3⃣
Configure Widget
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';
import { useMemo } from 'react';
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 config={widgetConfig} />;
};
There are also allow and deny options for chains, tokens, bridges, and exchanges.
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { useMemo } from 'react';
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 config={widgetConfig} />;
};
Apart from allow and deny options, the
tokens option can be configured to include featured tokens that will appear on top of the corresponding list of tokens.import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { useMemo } from 'react';
const widgetConfig1: WidgetConfig = {
tokens: {
featured: [
{
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 config={widgetConfig} />;
};
Without featured tokens
With featured tokens