diff --git a/packages/widget/src/AppProvider.tsx b/packages/widget/src/AppProvider.tsx index 40b5800df..ae659f77a 100644 --- a/packages/widget/src/AppProvider.tsx +++ b/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> = ({ children }) => { {children} {buildUrl ? : null} + ); }; diff --git a/packages/widget/src/components/PageEntered.ts b/packages/widget/src/components/PageEntered.ts new file mode 100644 index 000000000..d98516094 --- /dev/null +++ b/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; +} diff --git a/packages/widget/src/types/events.ts b/packages/widget/src/types/events.ts index 60f75e388..e93fe4e2e 100644 --- a/packages/widget/src/types/events.ts +++ b/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 { diff --git a/packages/widget/src/utils/navigationRoutes.ts b/packages/widget/src/utils/navigationRoutes.ts index 0e8b57dcf..3428b7cc3 100644 --- a/packages/widget/src/utils/navigationRoutes.ts +++ b/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];