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