⚙️Configure Widget

Flexibility at your fingertips

The LI.FI Widget supports a range of configuration options, allowing you to:

Allow or deny specific chains, tokens, bridges, and exchanges.
Preselect default source and destination chains.
Choose default tokens for both source and destination.
Set the amount of the destination token.
Specify a destination address.
Customize various LI.FI SDK settings through the sdkConfig configuration.

These options enable precise control over the widget's behavior and improve the user experience by adjusting it to specific needs and preferences.

Find an overview of all configuration options in Widget API Reference.

LI.FI SDK configuration

The LI.FI Widget is built on top of the LI.FI SDK, leveraging its robust functionality for cross-chain swaps and bridging. The sdkConfig option allows you to configure various aspects of the SDK directly within the widget.

Let's look at the example of configuring private RPC endpoints using the sdkConfig option.

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

const widgetConfig: WidgetConfig = {
  sdkConfig: {
    rpcUrls: {
      [ChainId.ARB]: ['https://arbitrum-example.node.com/'],
      [ChainId.SOL]: ['https://solana-example.node.com/'],
    },
  },
}

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

In a production app, it is recommended to pass through your authenticated RPC provider URL (Alchemy, Infura, Ankr, etc).

If no RPC URLs are provided, LI.FI Widget will default to public RPC providers.

Public RPC endpoints can sometimes rate-limit users during periods of heavy load, leading to issues such as incorrectly displaying balances.

Please see other SDK configuration options in the Configure SDK section.

Preselect chains and tokens

The LI.FI Widget allows you to preconfigure default chains and tokens, making it easy to set up your desired swap or bridging parameters right from the start. Below is an example of how to configure the widget with specific default chains, tokens and amount.

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: '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359',
  // set source token to USDC (Optimism)
  toToken: '0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85',
  // set source token amount to 10 USDC (Polygon)
  fromAmount: 10,
};

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

By configuring these options, you can streamline the user experience, ensuring that the widget is preloaded with the desired chains and tokens for the swap or bridge. This reduces the need for manual input and helps guide users through the intended flow.

Configure allow and deny options

We provide allow and deny configuration options to control which chains, tokens, bridges, and exchanges can be used within your application. Here’s how you can set up and use these options:

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 the allow and deny options, the tokens option can be configured to include other tokens or featured tokens that will appear at the 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} />
  );
};

Destination address

There are use cases where users need to have a different destination address. Usually, they can enter the destination address independently.

Still, the widget also has configuration options to pre-configure the destination address or create a curated list of wallet addresses to choose from.

Configure single destination address

Developers can use the toAddress option to configure a single destination address. The address and chainType properties are required, while the name and logoURI properties are optional.

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

const widgetConfig: WidgetConfig = {
  toAddress: {
    name: 'Vault Deposit',
    address: '0x0000000000000000000000000000000000000000',
    chainType: ChainType.EVM,
    logoURI: 'https://example.com/image.svg',
  },
};

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

Configure a curated list of wallet addresses

Developers can use toAddresses option to configure a curated list of wallet addresses.

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

const widgetConfig: WidgetConfig = {
  toAddresses: [
    {
      name: 'Lenny',
      address: '0x552008c0f6870c2f77e5cC1d2eb9bdff03e30Ea9',
      chainType: ChainType.EVM,
      logoURI: 'https://example.com/image.svg',    
    },
    {
      address: '0x4577a46A3eCf44E0ed44410B7793977ffbe22CE0',
      chainType: ChainType.EVM,
    },
    {
      name: 'My sweet solami',
      address: '6AUWsSCRFSCbrHKH9s84wfzJXtD6mNzAHs11x6pGEcmJ',
      chainType: ChainType.SVM,
    },
  ],
};

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

Using this configuration, when users click on the Send to wallet button, they will open a pre-configured list of addresses from which to choose, skipping the step where they can manually enter the address.

Together with configuring the wallet list, developers can make the destination address required to be filled out. Please see Required destination address for more details.

🎨Customize Widget

Last updated 2 months ago