2️⃣Configure the Widget

Our widget offers a range of variable features for you to customize according to the specific needs of your project. You can begin by configuring the fundamental settings, such as the default source and destination chains, tokens, and the input amount in the default setting.

const config = {
  fromInput: '0.1',
  fromToken: {
    address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
    chainId: '1'
  },
  toToken: {
    address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
    chainId: '56'
  },
  referrer: '0xFD19727868A8197F42e7a52d024374598F62953B'
}

function App() {
  return (
    <div>
      <XSwapWidget config={config} />
    </div>
  )
}

Disabling the specific chains

const config = {
  ...,
  disabledChains: ['108', '1285', '8127', '592', '10507']
}

XY Finance offers services across multiple chains, and our partners can choose to disable certain chains by configuring the disabledChains setting. This results in a simpler and more streamlined interface for users, allowing them to quickly find the information they need. Here's an example with a few disabled chains to demonstrate this.

Disabling the specific tokens

const config = {
  ...,
  disabledTokens: [
    {
      address: '0x77777777772cf0455fb38ee0e75f38034dfa50de',
      chainId: '1'
    }
  ],
}

If you choose to disable a particular token from appearing on their widget, it will no longer be searchable by its symbol name or address. This provides customers with an easy way to block tokens they may dislike or not trust. To illustrate this, we'll use our $XY token as an example.

Featuring the tokens you wish to promote

const config = {
  ...,
  featuredTokens: [
    {
      address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
      chainId: '321'
    },
    {
      address: '0x2ca48b4eea5a731c2b54e7c3944dbdb87c0cfb6f',
      chainId: '321'
    }
  ]
}

To make it easy for customers to promote a token to their partners, we offer a 'featured token' function. With this feature, you can pin the token you want to display at the top of the list, giving it greater exposure.

Configure the referrer

const config = {
  ...,
  referrer: '0xFD19727868A8197F42e7a52d024374598F62953B'
}

This option requires you to provide a web3 wallet address or smart contract address. Please complete the form. If the commissionRate is not configured, the referrer parameter will solely be utilized for tracking the traffic linked to your account.

Set the commission rate

const config = {
  ...,
  referrer: '0xFD19727868A8197F42e7a52d024374598F62953B',
  commissionRate: 1000
}

Setting the commissionRate will collect a fee percentage from the user's swap amount, which is then directly distributed to the specified wallet address. XY Finance will receive a share of these fees, varying according to the use case and transaction volume.

• commission rate represents the fee you wish to collect. It is an integer between 0 and 20,000. In this range, 20,000 corresponds to 2%, 1,000 represents 0.1%.

• referrer parameter represents the address where you want to receive the fees. The collected fee in every transaction will be directly transferred to this address. Before proceeding, please ensure that the provided address is under your management and capable of receiving assets correctly.

For additional information, please refer to our Widget API Reference.