Widget 事件

import type { Route, ExecutionAction } from '@lifi/sdk';
import type { RouteExecutionUpdate, RouteHighValueLossUpdate } 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.removeAllListeners();
  }, [widgetEvents]);

  // ...
  
  // Return null because it's an example
  return null;
};

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: (data: Route[]) => void
  chainPinned: (data: ChainPinned) => void
  contactSupport: (data: ContactSupport) => void
  destinationChainTokenSelected: (data: ChainTokenSelected) => void
  formFieldChanged: (data: FormFieldChanged) => void
  lowAddressActivityConfirmed: (data: LowAddressActivityConfirmed) => void
  pageEntered: (data: NavigationRouteType) => void
  routeExecutionCompleted: (data: Route) => void
  routeExecutionFailed: (data: RouteExecutionUpdate) => void
  routeExecutionStarted: (data: Route) => void
  routeExecutionUpdated: (data: RouteExecutionUpdate) => void
  routeHighValueLoss: (data: RouteHighValueLossUpdate) => void
  routeSelected: (data: RouteSelected) => void
  sendToWalletToggled: (data: boolean) => void
  settingUpdated: (data: SettingUpdated) => void
  sourceChainTokenSelected: (data: ChainTokenSelected) => void
  tokenSearch: (data: TokenSearch) => void
  widgetExpanded: (data: boolean) => void
}

type ContactSupport = {
  supportId?: string
}

type RouteHighValueLossUpdate = {
  fromAmountUSD: number
  toAmountUSD: number
  gasCostUSD?: number
  feeCostUSD?: number
  valueLoss: number
}

// `Route` and `ExecutionAction` are exported from `@lifi/sdk`.
type RouteExecutionUpdate = {
  route: Route
  action: ExecutionAction
}

type RouteSelected = {
  route: Route
  routes: Route[]
}

type TokenSearch = {
  value: string
  tokens: TokenAmount[]
}

type ChainTokenSelected = {
  chainId: ChainId
  tokenAddress: string
}

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
}