FlowX Widget

Overview

FlowX Finance Widget is a customizable financial tool designed for the Sui blockchain ecosystem. It provides best rate swap for user.

npm: @flowx-finance/swap-widgetnpm

Live Example

Here's a more comprehensive example of how to integrate the FlowX Finance Widget into a web application:

• Flowx Finance

• Birdeye

• ...

Key Features

• Swap Aggregator Service: Our advanced algorithm finds the best swap routes across multiple DEXes to ensure optimal trading outcomes.

• Partner fee customization

• Style customization

Installation

npm install @flowx-finance/swap-widget

Usage

import { SwapWidget } from '@flowx-finance/swap-widget';
import "@mysten/dapp-kit/dist/index.css";
import "@flowx-finance/swap-widget/index.esm.css";

const config: IConfig = {};

 <SwapWidget config={config} />

Customization

Partner fee customize

We support 3 type of partner fee

• Collect input as a fee

• Collect output as a fee

• Collect only specific tokens as a fee

const config = {
    commission: {
        partner: '0xWALLET_ADDRESS', //wallet that you want collect fee
        valueType: CommissionType.PERCENTAGE, //Type of fee, now support percentage and specific amount
        value: (1 / 100) * 1e6, // Fee collect, in this case 1%
        strategy: 'TOKEN', // Collect fee by specific token, current support 'INPUT' | 'OUTPUT' | 'TOKEN'
        listCoins: [
          '0x2::sui::SUI',
          '0x5d4b302506645c37ff133b98c4b50a5ae14841659738d6d733d59d0d217a93bf::coin::COIN', //If you chose TOKEN you must specific list tokens want to collect fee
        ],
        directTransfer: true, //We have 2 strategy transfer, direct to your address, store in the contract and collect later
      }
    }

Customize default token

Change default pair for swap

const config = {
    defaultPair: ["0x6dae8ca14311574fdfe555524ea48558e3d1360d1607d1c7f98af867e3b7976c::flx::FLX", "0x2::sui::SUI"]
}

Token list

Default token list

const config = {
    customList: ["0x6dae8ca14311574fdfe555524ea48558e3d1360d1607d1c7f98af867e3b7976c::flx::FLX", "0x2::sui::SUI", "0x5d4b302506645c37ff133b98c4b50a5ae14841659738d6d733d59d0d217a93bf::coin::COIN"] // In this case, only SUI, FLX, USDC show on the token selection
}

Explorer customize

Currently we support SuiVision and SuiScan for Explorer

const config = {
    suiExplorer: 'SUI_VISION', //Value: 'SUI_VISION'| 'SUI_SCAN';
}