feat: add emitter event on location change (#304)

packages/widget/src/AppProvider.tsx

@@ -2,6 +2,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import type { PropsWithChildren } from 'react';
 import { Fragment } from 'react';
 import { MemoryRouter, useInRouterContext } from 'react-router-dom';
+import { PageEntered } from './components/PageEntered.js';
 import { queryClient } from './config/queryClient.js';
 import { I18nProvider } from './providers/I18nProvider/I18nProvider.js';
 import { ThemeProvider } from './providers/ThemeProvider/ThemeProvider.js';
@@ -44,6 +45,7 @@ export const AppRouter: React.FC<PropsWithChildren<{}>> = ({ children }) => {
     <Router>
       {children}
       {buildUrl ? <URLSearchParamsBuilder /> : null}
+      <PageEntered />
     </Router>
   );
 };

packages/widget/src/components/PageEntered.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useWidgetEvents } from '../hooks/useWidgetEvents.js';
+import { WidgetEvent } from '../types/events.js';
+
+export function PageEntered() {
+  const location = useLocation();
+  const emitter = useWidgetEvents();
+
+  useEffect(() => {
+    emitter.emit(WidgetEvent.PageEntered, location.pathname);
+  }, [emitter, location.pathname]);
+  return null;
+}

packages/widget/src/types/events.ts

@@ -1,4 +1,5 @@
 import type { ChainId, ChainType, Process, Route } from '@lifi/sdk';
+import type { NavigationRouteType } from '../utils/navigationRoutes.js';
 
 export enum WidgetEvent {
   RouteExecutionStarted = 'routeExecutionStarted',
@@ -11,9 +12,13 @@ export enum WidgetEvent {
   SourceChainTokenSelected = 'sourceChainTokenSelected',
   DestinationChainTokenSelected = 'destinationChainTokenSelected',
   SendToWalletToggled = 'sendToWalletToggled',
+  /**
+   * @deprecated Use `PageEntered` event instead.
+   */
   ReviewTransactionPageEntered = 'reviewTransactionPageEntered',
   WalletConnected = 'walletConnected',
   WidgetExpanded = 'widgetExpanded',
+  PageEntered = 'pageEntered',
 }
 
 export type WidgetEvents = {
@@ -30,6 +35,7 @@ export type WidgetEvents = {
   reviewTransactionPageEntered?: Route;
   walletConnected: WalletConnected;
   widgetExpanded: boolean;
+  pageEntered: NavigationRouteType;
 };
 
 export interface ContactSupport {

packages/widget/src/utils/navigationRoutes.ts

@@ -68,4 +68,7 @@ export const backButtonRoutes = [
   navigationRoutes.configuredWallets,
 ];
 
-export type NavigationRouteType = keyof typeof navigationRoutes;
+export type NavigationRouteTypeKeys = keyof typeof navigationRoutes;
+
+export type NavigationRouteType =
+  (typeof navigationRoutes)[NavigationRouteTypeKeys];