Documentation Index
Fetch the complete documentation index at: https://docs.li.fi/llms.txt
Use this file to discover all available pages before exploring further.
LI.FI 组件 提供了一个 useWidgetEvents 钩子，让您可以订阅一系列组件事件，并帮助您获取有关执行路由、跟踪桥接和交换进度、跟踪链和代币选择、与特定 UI 元素交互等有用信息。
我们继续致力于扩展可用事件，如果您对特定事件感兴趣，请通过我们的支持联系我们。
为了最小化不必要的重新渲染并防止主组件组件中的潜在故障，请在集成主 LiFiWidget 的组件外部集成 useWidgetEvents 钩子。
如何订阅组件事件的示例：
import type { Route } from '@lifi/sdk';
import type { RouteExecutionUpdate } from '@lifi/widget';
import { useWidgetEvents, WidgetEvent } from '@lifi/widget';
import { useEffect } from 'react';
export const WidgetEventsExample = () => {
const widgetEvents = useWidgetEvents();
// ...
useEffect(() => {
const onRouteExecutionStarted = (route: Route) => {
// console.log('onRouteExecutionStarted fired.');
};
const onRouteExecutionUpdated = (update: RouteExecutionUpdate) => {
// console.log('onRouteExecutionUpdated fired.');
};
const onRouteExecutionCompleted = (route: Route) => {
// console.log('onRouteExecutionCompleted fired.');
};
const onRouteExecutionFailed = (update: RouteExecutionUpdate) => {
// console.log('onRouteExecutionFailed fired.');
};
const onRouteHighValueLoss = (update: RouteHighValueLossUpdate) => {
// console.log('onRouteHighValueLoss continued.');
};
widgetEvents.on(WidgetEvent.RouteExecutionStarted, onRouteExecutionStarted);
widgetEvents.on(WidgetEvent.RouteExecutionUpdated, onRouteExecutionUpdated);
widgetEvents.on(WidgetEvent.RouteExecutionCompleted, onRouteExecutionCompleted);
widgetEvents.on(WidgetEvent.RouteExecutionFailed, onRouteExecutionFailed);
widgetEvents.on(WidgetEvent.RouteHighValueLoss, onRouteHighValueLoss);
return () => widgetEvents.all.clear();
}, [widgetEvents]);
// ...
// Return null because it's an example
return null;
};
List of events
Here is the list of all available events:
AvailableRoutes
The event fires when available routes are returned after the user has selected source and destination tokens, entered an amount, and requested the routes.
RouteSelected
The event fires when the user selects a specific route from the list of available routes.
RouteExecutionStarted
The event fires when the user clicks on the Start swapping or Start bridging button.
RouteExecutionUpdated
- Type: RouteExecutionUpdate
The event fires when there is an update to the Route object during execution.
RouteExecutionCompleted
The event fires when the execution is completed successfully.
RouteExecutionFailed
- Type: RouteExecutionUpdate
The event fires when the execution has failed.
RouteHighValueLoss
- Type: RouteHighValueLossUpdate
The event fires when the High Value Loss bottom sheet appears on the screen.
ContactSupport
The event fires when the user clicks on the Contact support button on the Transaction Details page.
SourceChainTokenSelected
The event fires when the user selects the source chain and token.
DestinationChainTokenSelected
The event fires when the user selects the destination chain and token.
SendToWalletToggled
The event fires when the user clicks on the wallet icon next to the action button on the main page to show/hide the destination wallet selection UI.
WalletConnected
The event fires when the user connects the wallet via the internal wallet management UI.
WidgetExpanded
The event fires when the side panel with routes is shown to the user. Only available 中 wide widget variant.
PageEntered
- Type: NavigationRouteType
The event fires when the user navigates to a page 中 widget.
FormFieldChanged
The event fires whenever a form value is changed 中 widget.
SettingUpdated
The event fires whenever a setting is updated 中 widget.
TokenSearch
The event fires when the user searches for a token (includes the query value and the matched token results).
LowAddressActivityConfirmed
- Type: LowAddressActivityConfirmed
The event fires when the user confirms proceeding despite a low address activity warning for the specified address and chain.
ChainPinned
The event fires when the user pins or unpins a chain 中 UI.
Routes: Some of the events here present information about routes. A route is the LI.FI way of presenting a quote on an exchange/transfer. A route is a collection of steps, transactions and costs associated with that transfer. In the Widget we present a set of routes that the user can select from. Once selected the execution of that route can begin and the user will be guided through the steps required to complete that route. The route events above can help track a route status.
组件事件 types
Properties and types of the useWidgetEvents hook.
enum WidgetEvent {
AvailableRoutes = 'availableRoutes',
ChainPinned = 'chainPinned',
ContactSupport = 'contactSupport',
DestinationChainTokenSelected = 'destinationChainTokenSelected',
FormFieldChanged = 'formFieldChanged',
LowAddressActivityConfirmed = 'lowAddressActivityConfirmed',
PageEntered = 'pageEntered',
RouteExecutionCompleted = 'routeExecutionCompleted',
RouteExecutionFailed = 'routeExecutionFailed',
RouteExecutionStarted = 'routeExecutionStarted',
RouteExecutionUpdated = 'routeExecutionUpdated',
RouteHighValueLoss = 'routeHighValueLoss',
RouteSelected = 'routeSelected',
SendToWalletToggled = 'sendToWalletToggled',
SettingUpdated = 'settingUpdated',
SourceChainTokenSelected = 'sourceChainTokenSelected',
TokenSearch = 'tokenSearch',
WidgetExpanded = 'widgetExpanded',
}
type WidgetEvents = {
availableRoutes: Route[]
chainPinned: ChainPinned
contactSupport: ContactSupport
destinationChainTokenSelected: ChainTokenSelected
formFieldChanged: FormFieldChanged
lowAddressActivityConfirmed: LowAddressActivityConfirmed
pageEntered: NavigationRouteType
routeExecutionCompleted: Route
routeExecutionFailed: RouteExecutionUpdate
routeExecutionStarted: Route
routeExecutionUpdated: RouteExecutionUpdate
routeHighValueLoss: RouteHighValueLossUpdate
routeSelected: RouteSelected
sendToWalletToggled: boolean
settingUpdated: SettingUpdated
sourceChainTokenSelected: ChainTokenSelected
tokenSearch: TokenSearch
walletConnected: WalletConnected
widgetExpanded: boolean
}
type ContactSupport = {
supportId?: string
}
type RouteHighValueLossUpdate = {
fromAmountUSD: number
toAmountUSD: number
gasCostUSD?: number
feeCostUSD?: number
valueLoss: number
}
type RouteExecutionUpdate = {
route: Route
process: Process
}
type RouteSelected = {
route: Route
routes: Route[]
}
type TokenSearch = {
value: string
tokens: TokenAmount[]
}
type ChainTokenSelected = {
chainId: ChainId
tokenAddress: string
}
type WalletConnected = {
address?: string
chainId?: number
chainType?: ChainType
}
type FormFieldChanged = {
[K in keyof DefaultValues]: {
fieldName: K
newValue: DefaultValues[K]
oldValue: DefaultValues[K]
}
}[keyof DefaultValues]
type SettingUpdated<
K extends keyof SettingsProps = keyof SettingsProps,
> = {
setting: K
newValue: SettingsProps[K]
oldValue: SettingsProps[K]
newSettings: SettingsProps
oldSettings: SettingsProps
}
type ChainPinned = {
chainId: number
pinned: boolean
}
type LowAddressActivityConfirmed = {
address: string
chainId: number
}
