🎵Events

Subscribe to Rango Widget Events

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.

Here is a sample code:

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]);
}

These are different events that will be triggered:

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 }) => {})

And these are related types declarations for route and step events:

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>;