📗
Widget API Reference
API documentation for the widget components and hooks.
Properties and types of the
LiFiWidget component.Name | Type | Default | Description | Example |
|---|---|---|---|---|
integrator | string | | Identifier of the integrator (dApp/company name) | OpenSea |
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 | |
Properties and types of the
useWidgetEvents hook.enum WidgetEvent {
RouteExecutionStarted = 'routeExecutionStarted',
RouteExecutionUpdated = 'routeExecutionUpdated',
RouteExecutionCompleted = 'routeExecutionCompleted',
RouteExecutionFailed = 'routeExecutionFailed',
RouteHighValueLoss = 'routeHighValueLoss',
}
type WidgetEvents = {
routeExecutionStarted: Route;
routeExecutionUpdated: RouteExecutionUpdate;
routeExecutionCompleted: Route;
routeExecutionFailed: RouteExecutionUpdate;
routeHighValueLoss: RouteHighValueLossUpdate;
};
interface RouteHighValueLossUpdate {
fromAmountUsd: string;
gasCostUSD?: string;
toAmountUSD: string;
valueLoss: string;
}
interface RouteExecutionUpdate {
route: Route;
process: Process;
}