📗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	Select Widget Variants
subvariant	'default' | 'split' | 'refuel' | 'nft'	'default'	Subvariant of the widget	Select Widget Variants
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	Customize Widget
theme	ThemeConfig		Sets palette, shape, and typography	Customize Widget
useRecommendedRoute	boolean	false	Allow showing only recommended route	true
walletManagement	WidgetWalletManagement		Set of callbacks to manage widget wallet state	Wallet Management
sdkConfig	ConfigUpdate		Provides custom configuration to the SDK	Set up 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;
}