> For the complete documentation index, see [llms.txt](https://docs.flowx.finance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flowx.finance/developer/flowx-widget.md).

# FlowX Widget

### Overview

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

{% embed url="<https://www.npmjs.com/package/@flowx-finance/swap-widget>" %}

### Live Example

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

* [Flowx Finance](https://flowx.finance/)
* [Birdeye](https://birdeye.so/token/0x2::sui::SUI?chain=sui)
* ...

<figure><img src="https://3458959336-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpEOgAVtfjtpMXMM550M8%2Fuploads%2FuEBYg5KUdvoLXxxauVC6%2Fimage.png?alt=media&amp;token=392c4d48-82ba-47f9-b03a-319f1ea1c202" alt=""><figcaption></figcaption></figure>

### 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

```typescript
npm install @flowx-finance/swap-widget
```

### Usage

```typescript
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

```typescript
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

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

#### Token list

Default token list

```typescript
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

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

<br>