# 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="/files/ck1vLFMFB2NqyCBoyChJ" 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flowx.finance/developer/flowx-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.