Links
📗

Widget API Reference

API documentation for the widget components and hooks.

Widget Component

Properties and types of the LiFiWidget component.
Name
Type
Default
Description
Example
integrator
string
Identifier of the integrator (dApp/company name)
OpenSea
apiKey
string
API authentication key
referrer
string
Identifier of the referrer
fee
number
A float between 0.0 and 0.1, 0.1 refers to 10% of the transaction volume
0.05
insurance
boolean
false
Enables bridge insurance
fromChain
string | number
The user's current wallet chain
Source chain ID or chain abbreviation
42161
fromToken
string
Token Contract Address
0x539bde0d7dbd336b79148aa742883198bbf60342
fromAmount
number
0
Token amount to swap
69.42
toChain
string | number
'eth'
Destination chain ID or chain abbreviation
137
toToken
string
Destination token contract address
0xd6df932a45c0f255f85145f286ea0b292b21c90b
toAddress
string
Destination wallet address
0x2b563420722cBcFC84857129Bef775e0dC5F1401
slippage
number
0.005
Sets default slippage (saved to user settings in localStorage on the first load)
routePriority
'RECOMMENDED' | 'FASTEST' | 'CHEAPEST' | 'SAFEST'
'RECOMMENDED'
Sets default route priority order (saved to user settings in localStorage on the first load)
variant
'default' | 'expandable' | 'drawer'
'default'
Variant of the widget
subvariant
'default' | 'split' | 'refuel' | 'nft'
'default'
Subvariant of the widget
appearance
'light' | 'dark' | 'auto'
'auto'
Default appearance of the widget
'dark'
disabledUI
DisabledUIType[]
Allow disabling parts of the UI
['fromToken', 'toToken', 'fromAmount', 'toAddress']
hiddenUI
HiddenUIType[]
Allow hiding parts of the UI
['appearance', 'language', 'toAddress', 'poweredBy']
requiredUI
RequiredUIType[]
Makes parts of the UI required
['toAddress']
containerStyle
CSSProperties
Styles for the widget container element
theme
ThemeConfig
Sets palette, shape, and typography
useRecommendedRoute
boolean
false
Allow showing only recommended route
true
walletManagement
WidgetWalletManagement
Set of callbacks to manage widget wallet state
sdkConfig
ConfigUpdate
Provides custom configuration to the SDK
chains
{ allow?: number[]; deny?: number[]; }
Allow or deny chains
tokens
{ featured?: Token[]; allow?: Token[]; deny?: Token[]; }
Allow and deny tokens or add a featured tokens array, which will be shown above any other tokens in a special section
bridges
{ allow?: string[]; deny?: string[]; }
Allow or deny bridges
exchanges
{ allow?: string[]; deny?: string[]; }
Allow or deny exchanges
languages
{ default?: LanguageKey; allow?: LanguageKey[]; deny?: LanguageKey[]; }
Allow or deny languages or set a default one
languageResources
LanguageResources
Allow overriding translation strings (titles/labels/messages)
disableLanguageDetector
boolean
Disables widget language detection

Widget Events

Properties and types of the useWidgetEvents hook.
enum WidgetEvent {
RouteExecutionStarted = 'routeExecutionStarted',
RouteExecutionUpdated = 'routeExecutionUpdated',
RouteExecutionCompleted = 'routeExecutionCompleted',
RouteExecutionFailed = 'routeExecutionFailed',
RouteHighValueLoss = 'routeHighValueLoss',
RouteContactSupport = 'routeContactSupport',
SourceChainTokenSelected = 'sourceChainTokenSelected',
DestinationChainTokenSelected = 'destinationChainTokenSelected',
SendToWalletToggled = 'sendToWalletToggled',
ReviewTransactionPageEntered = 'reviewTransactionPageEntered',
}
type WidgetEvents = {
routeExecutionStarted: Route;
routeExecutionUpdated: RouteExecutionUpdate;
routeExecutionCompleted: Route;
routeExecutionFailed: RouteExecutionUpdate;
routeHighValueLoss: RouteHighValueLossUpdate;
routeContactSupport: RouteContactSupport;
sourceChainTokenSelected: ChainTokenSelected;
destinationChainTokenSelected: ChainTokenSelected;
sendToWalletToggled: boolean;
reviewTransactionPageEntered?: Route;
};
interface RouteContactSupport {
supportId?: string;
}
interface RouteHighValueLossUpdate {
fromAmountUsd: string;
gasCostUSD?: string;
toAmountUSD: string;
valueLoss: string;
}
interface RouteExecutionUpdate {
route: Route;
process: Process;
}
interface ChainTokenSelected {
chainId: ChainId;
tokenAddress: string;
}
Last modified 4mo ago