Links
⚡

Widget Events

LI.FI Widget provides a useWidgetEvents hook that lets you subscribe to a series of widget events and helps you retrieve helpful information about executing routes, track bridge and swap progress, and more.
Currently, we support the following events:
  • Route execution started
  • Route execution updated
  • Route execution completed
  • Route execution failed
Each event goes with a route object and/or currently running process and status.
We continue working on extending available events and If you are interested in a specific event, reach out via our Discord Channel.
Example of how to subscribe to widget events:
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.');
};
widgetEvents.on(WidgetEvent.RouteExecutionStarted, onRouteExecutionStarted);
widgetEvents.on(WidgetEvent.RouteExecutionUpdated, onRouteExecutionUpdated);
widgetEvents.on(WidgetEvent.RouteExecutionCompleted, onRouteExecutionCompleted);
widgetEvents.on(WidgetEvent.RouteExecutionFailed, onRouteExecutionFailed);
return () => widgetEvents.all.clear();
}, [widgetEvents]);
​
// ...
// Return null because it's an example
return null;
};
Find more about event types in API Reference.