Widget Component
Properties and types of theLiFiWidget component configuration.
Core Configuration
| Name | Type | Default | Example | Description |
|---|---|---|---|---|
apiKey | string | – | integrator | API authentication key |
integrator | string | – | OpenSea | Identifier of the integrator (dApp/company) |
referrer | string | – | – | Identifier of the referrer |
fee | number | 0.05 | – | Float between 0 and 1 (e.g. 0.1 = 10% fee) |
Swap Details
| Name | Type | Default | Example | Description |
|---|---|---|---|---|
fromChain | number | – | 42161 | Source chain ID |
fromToken | string | – | 0x539b...0342 | Token contract address (source) |
fromAmount | number | 0 | 69.42 | Token amount to swap |
toChain | number | 1 | 137 | Destination chain ID |
toToken | string | – | 0xd6df...1c90b | Destination token contract address |
toAddress | ToAddress | – | 0x2b56...1401 | Destination wallet address |
slippage | number | 0.005 | – | Default slippage setting |
useRecommendedRoute | boolean | false | true | Show only recommended route |
Routing & Filtering Options
| Name | Type | Default | Example | Description |
|---|---|---|---|---|
routePriority | 'CHEAPEST' | 'FASTEST' | 'CHEAPEST' | – | Route selection priority |
chains | { allow?: number[]; deny?: number[] } | – | – | Allowed or denied chains |
tokens | { featured?, include?, popular?, allow?, deny? } | – | – | Token filtering and prioritization |
bridges | { allow?: string[]; deny?: string[] } | – | – | Bridge control list |
exchanges | { allow?: string[]; deny?: string[] } | – | – | Exchange control list |
UI Appearance & Behavior
| Name | Type | Default | Example | Description |
|---|---|---|---|---|
variant | 'compact' | 'wide' | 'drawer' | 'compact' | – | Widget layout style |
subvariant | 'default' | 'split' | 'refuel' | 'custom' | 'default' | – | Additional layout customization |
appearance | 'light' | 'dark' | 'auto' | 'auto' | 'dark' | Theme mode |
disabledUI | DisabledUIType[] | – | ['fromAmount', 'toAddress'] | UI parts to disable |
hiddenUI | HiddenUIType[] | – | ['appearance', 'language'] | UI parts to hide |
requiredUI | RequiredUIType[] | – | ['toAddress'] | Required UI fields |
theme | ThemeConfig | – | – | Theme palette and typography |
languages | { default?, allow?, deny? } | – | – | Language preferences |
languageResources | LanguageResources | – | – | Custom i18n translations |
Integration Hooks & State
| Name | Type | Default | Example | Description |
|---|---|---|---|---|
walletConfig | WidgetWalletConfig | – | – | Options to manage wallet state |
sdkConfig | WidgetSDKConfig | – | – | SDK-specific configuration |
formRef | MutableRefObject<FormState | null> | – | – | Access for programmatic form updates |
buildUrl | boolean | false | – | Append widget config to page URL |
explorerUrls | Record<number, string[]> & Partial<Record<'internal', string[]>> | – | – | Custom block explorer links |