Widget Component

Properties and types of the LiFiWidget component configuration.

Core Configuration

NameTypeDefaultExampleDescription
apiKeystringintegratorAPI authentication key
integratorstringOpenSeaIdentifier of the integrator (dApp/company)
referrerstringIdentifier of the referrer
feenumber0.05Float between 0 and 1 (e.g. 0.1 = 10% fee)

Swap Details

NameTypeDefaultExampleDescription
fromChainnumber42161Source chain ID
fromTokenstring0x539b...0342Token contract address (source)
fromAmountnumber069.42Token amount to swap
toChainnumber1137Destination chain ID
toTokenstring0xd6df...1c90bDestination token contract address
toAddressToAddress0x2b56...1401Destination wallet address
slippagenumber0.005Default slippage setting
useRecommendedRoutebooleanfalsetrueShow only recommended route

Routing & Filtering Options

NameTypeDefaultExampleDescription
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

NameTypeDefaultExampleDescription
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
disabledUIDisabledUIType[]['fromAmount', 'toAddress']UI parts to disable
hiddenUIHiddenUIType[]['appearance', 'language']UI parts to hide
requiredUIRequiredUIType[]['toAddress']Required UI fields
themeThemeConfigTheme palette and typography
languages{ default?, allow?, deny? }Language preferences
languageResourcesLanguageResourcesCustom i18n translations

Integration Hooks & State

NameTypeDefaultExampleDescription
walletConfigWidgetWalletConfigOptions to manage wallet state
sdkConfigWidgetSDKConfigSDK-specific configuration
formRefMutableRefObject<FormState | null>Access for programmatic form updates
buildUrlbooleanfalseAppend widget config to page URL
explorerUrlsRecord<number, string[]> & Partial<Record<'internal', string[]>>Custom block explorer links