3️⃣Configure Widget

Flexibility at your fingertips

LI.FI Widget supports default chains and tokens configuration, allowing you to preselect default source and destination chains and tokens as well as destination token amount.

The example below shows how to preconfigure default chains and tokens.

import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  // set source chain to Polygon
  fromChain: 137,
  // set destination chain to Optimism
  toChain: 10,
  // set source token to USDC (Polygon)
  fromToken: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
  // set source token to USDC (Optimism)
  toToken: '0x7f5c764cbc14f9669b88837ca1490cca17c31607',
  // set source token amount to 10 USDC (Polygon)
  fromAmount: 10,
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

There are also allow and deny options for chains, tokens, bridges, and exchanges.

import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  // disable BSC from being shown in the chains list
  chains: {
    deny: [56],
  },
  // allow bridging through Stargate bridge only
  bridges: {
    allow: ['stargate'],
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

Apart from allow and deny options, the tokens option can be configured to include other tokens or featured tokens that will appear on top of the corresponding list of tokens.

import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  tokens: {
    // Featured tokens will appear on top of the list
    featured: [
      {
        address: '0x2fd6c9b869dea106730269e13113361b684f843a',
        symbol: 'CHH',
        decimals: 9,
        chainId: 56,
        name: 'Chihuahua',
        logoURI: 'https://s2.coinmarketcap.com/static/img/coins/64x64/21334.png',
      },
    ],
    // Include any token to the list
    include: [
      {
        address: '0xba98c0fbebc892f5b07a42b0febd606913ebc981',
        symbol: 'MEH',
        decimals: 18,
        chainId: 1,
        name: 'meh',
        logoURI: 'https://s2.coinmarketcap.com/static/img/coins/64x64/22158.png',
      },
    ],
    // To deny a token it is required to specify the chainId and address only
    deny: [
      {
        address: '0x4200000000000000000000000000000000000006',
        chainId: 10,
      },
      {
        address: '0x0000000000000000000000000000000000000000',
        chainId: 10,
      },
    ],
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

Without featured tokens

With featured tokens

Find more configuration options in API Reference.