Once a user executes a route within Rango Widget, various events will be triggered depending on the different states of the route. You can subscribe to these events to implement your custom logic in your dApp. For instance, you can display a personalized notification whenever a route succeeds or fails.
Copy import { useEffect } from 'react' ;
import { useWidgetEvents , Widget , MainEvents } from '@rango-dev/widget-embedded' ;
export function Component () {
const widgetEvents = useWidgetEvents ();
useEffect (() => {
widgetEvents .on ( MainEvents .RouteEvent , (widgetEvent) => {
const { event , route } = widgetEvent;
// your custom logic goes here
});
return () => widgetEvents . all .clear ();
} , [widgetEvents]);
}
Copy type RouteExecutionEvents = {
[ MainEvents .RouteEvent] : { route : Route ; event : RouteEvent };
[ MainEvents .StepEvent] : { route : Route ; step : Step ; event : StepEvent };
};
// sample usage:
widgetEvents .on ( MainEvents .RouteEvent , ({ route: Route; event: RouteEvent }) => {})
widgetEvents .on ( MainEvents .StepEvent , ({ route: Route; step: Step; event: StepEvent }) => {})
Copy type RouteEvent =
| Event < RouteEventType . STARTED >
| Event < RouteEventType . FAILED , FailedRouteEventPayload >
| Event < RouteEventType . SUCCEEDED , SucceededRouteEventPayload >;
type StepEvent =
| Event < StepEventType . STARTED >
| Event < StepEventType . SUCCEEDED , SucceededStepEventPayload >
| Event < StepEventType . FAILED , FailedStepEventPayload >
| Event < StepEventType . TX_EXECUTION , StepExecutionEventPayload >
| Event < StepEventType . TX_EXECUTION_BLOCKED , StepBlockedEventPayload >
| Event < StepEventType . CHECK_STATUS >
| Event < StepEventType . APPROVAL_TX_SUCCEEDED >
| Event < StepEventType . OUTPUT_REVEALED , OutputRevealedEventPayload >;