📖Widget API Reference

API documentation for the widget components and hooks.

Widget Component

Properties and types of the LiFiWidget component configuration.

Please also see LI.FI Terminology for more information about specific types.

Name	Description	Type	Default	Example
apiKey	API authentication key	string
integrator	Identifier of the integrator (dApp/company name)	string		OpenSea
fee	A float between 0 and 1, 0.1 refers to 10% of the transaction volume	number		0.05
referrer	Identifier of the referrer	string
fromChain	Source chain ID	number	The user's current wallet chain	42161
fromToken	Token Contract Address	string		0x539bde0d7dbd336b79148aa742883198bbf60342
fromAmount	Token amount to swap	number	0	69.42
toChain	Destination chain ID	number	1	137
toToken	Destination token contract address	string		0xd6df932a45c0f255f85145f286ea0b292b21c90b
toAddress	Destination wallet address	ToAddress		0x2b563420722cBcFC84857129Bef775e0dC5F1401
slippage	Sets default slippage (saved to user settings in localStorage on the first load)	number	0.005
routePriority	Sets default route priority order (saved to user settings in localStorage on the first load) CHEAPEST is shown as Best Return on the UI.	'CHEAPEST' | 'FASTEST'	'CHEAPEST'
variant	Variant of the widget	'compact' | 'wide' | 'drawer'	'compact'	Select Widget Variants
subvariant	Subvariant of the widget	'default' | 'split' | 'refuel' | 'custom'	'default'	Select Widget Variants
appearance	Default appearance of the widget	'light' | 'dark' | 'auto'	'auto'	'dark'
disabledUI	Allow disabling parts of the UI	DisabledUIType[]		['fromToken', 'toToken', 'fromAmount', 'toAddress']
hiddenUI	Allow hiding parts of the UI	HiddenUIType[]		['appearance', 'language', 'toAddress', 'poweredBy']
requiredUI	Makes parts of the UI required	RequiredUIType[]		['toAddress']
theme	Sets palette, shape, and typography	ThemeConfig		Customize Widget
useRecommendedRoute	Allow showing only recommended route	boolean	false	true
walletConfig	Set of options that helps manage widget wallet state	WidgetWalletConfig		Wallet Management
sdkConfig	Provides custom configuration to the SDK	WidgetSDKConfig		Configure SDK
chains	Allow or deny chains	{ allow?: number[]; deny?: number[]; }
tokens	Allow and deny tokens or add a featured tokens array, which will be shown above any other tokens in a special section	{ featured?: StaticToken[]; include?: Token[]; popular?: StaticToken[]; allow?: Token[]; deny?: Token[]; }
bridges	Allow or deny bridges	{ allow?: string[]; deny?: string[]; }
exchanges	Allow or deny exchanges	{ allow?: string[]; deny?: string[]; }
languages	Allow or deny languages or set a default one	{ default?: LanguageKey; allow?: LanguageKey[]; deny?: LanguageKey[]; }
languageResources	Allow overriding translation strings (titles/labels/messages)	LanguageResources
buildUrl	Adds main configuration to the URL search params in the URL of the page the widget is featured on.	boolean	false	Initialize form values
formRef	Provides access to function for updating form values	MutabelRefObject<FormState | null>		Updating by form ref
explorerUrls	Provides overrides for explorers used by the widget	Record<number, string[]> & Partial<Record<'internal', string[]>>		Explorer URLs

🚗Migrate from v2 to v3