📖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 | 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' | 'FASTEST' | 'CHEAPEST' | |
variant | Variant of the widget | 'compact' | 'wide' | 'drawer' | 'compact' | |
subvariant | Subvariant of the widget | 'default' | 'split' | 'refuel' | 'custom' | 'default' | |
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 | ||
useRecommendedRoute | Allow showing only recommended route | boolean | false | true |
walletConfig | Set of options that helps manage widget wallet state | WidgetWalletConfig | ||
sdkConfig | Provides custom configuration to the SDK | WidgetSDKConfig | ||
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 | |
formRef | Provides access to function for updating form values | MutabelRefObject<FormState | null> | ||
explorerUrls | Provides overrides for explorers used by the widget | Record<number, string[]> & Partial<Record<'internal', string[]>> |
Last updated
