fix: add header store context

packages/widget/src/components/Header/NavigationHeader.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { useNavigateBack } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
+import { useHeaderStore } from '../../stores';
 import { HiddenUI } from '../../types';
 import {
   backButtonRoutes,
@@ -15,14 +16,13 @@ import {
 import { HeaderAppBar } from './Header.style';
 import { NavigationTabs } from './NavigationTabs';
 import { WalletMenuButton } from './WalletHeader';
-import { useHeaderStore } from './useHeaderStore';
 
 export const NavigationHeader: React.FC = () => {
   const { t } = useTranslation();
   const { subvariant, hiddenUI } = useWidgetConfig();
   const { navigate, navigateBack } = useNavigateBack();
   const { account } = useWallet();
-  const { element, title } = useHeaderStore();
+  const { element, title } = useHeaderStore((state) => state);
   const { pathname } = useLocation();
 
   const cleanedPathname = pathname.endsWith('/')

packages/widget/src/components/Header/index.ts

@@ -1,2 +1 @@
 export * from './Header';
-export * from './useHeaderStore';

packages/widget/src/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -13,16 +13,20 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActiveTransactionItem } from '../../components/ActiveTransactions';
 import { Dialog } from '../../components/Dialog';
-import { useHeaderStore } from '../../components/Header';
 import { useWallet } from '../../providers';
-import { useExecutingRoutesIds, useRouteExecutionStore } from '../../stores';
+import {
+  useExecutingRoutesIds,
+  useHeaderStoreContext,
+  useRouteExecutionStore,
+} from '../../stores';
 import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty';
 
 export const ActiveTransactionsPage = () => {
   const { t } = useTranslation();
   const { account } = useWallet();
   const executingRoutes = useExecutingRoutesIds(account.address);
   const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
+  const headerStoreContext = useHeaderStoreContext();
   const [open, setOpen] = useState(false);
 
   const toggleDialog = useCallback(() => {
@@ -31,13 +35,13 @@ export const ActiveTransactionsPage = () => {
 
   useEffect(() => {
     if (executingRoutes.length) {
-      return useHeaderStore.getState().setAction(
+      return headerStoreContext.getState().setAction(
         <IconButton size="medium" edge="end" onClick={toggleDialog}>
           <DeleteIcon />
         </IconButton>,
       );
     }
-  }, [executingRoutes.length, toggleDialog]);
+  }, [executingRoutes.length, headerStoreContext, toggleDialog]);
 
   if (!executingRoutes.length) {
     return <ActiveTransactionsEmpty />;

packages/widget/src/pages/RoutesPage/RoutesPage.tsx

@@ -2,15 +2,14 @@
 import type { Route } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import { useEffect } from 'react';
-import { useHeaderStore } from '../../components/Header';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
 import {
   RouteCard,
   RouteCardSkeleton,
   RouteNotFoundCard,
 } from '../../components/RouteCard';
 import { useNavigateBack, useRoutes } from '../../hooks';
-import { useSetExecutableRoute } from '../../stores';
+import { useHeaderStoreContext, useSetExecutableRoute } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { Stack } from './RoutesPage.style';
 
@@ -19,6 +18,7 @@ export const RoutesPage: React.FC<BoxProps> = () => {
   const { routes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch } =
     useRoutes();
   const setExecutableRoute = useSetExecutableRoute();
+  const headerStoreContext = useHeaderStoreContext();
 
   const handleRouteClick = (route: Route) => {
     setExecutableRoute(route);
@@ -36,7 +36,7 @@ export const RoutesPage: React.FC<BoxProps> = () => {
   }, []);
 
   useEffect(() => {
-    return useHeaderStore
+    return headerStoreContext
       .getState()
       .setAction(
         <ProgressToNextUpdate
@@ -49,7 +49,7 @@ export const RoutesPage: React.FC<BoxProps> = () => {
           edge="end"
         />,
       );
-  }, [dataUpdatedAt, isFetching, refetch, refetchTime]);
+  }, [dataUpdatedAt, headerStoreContext, isFetching, refetch, refetchTime]);
 
   const routeNotFound = !routes?.length && !isLoading && !isFetching;
 

packages/widget/src/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx

@@ -9,13 +9,11 @@ import {
   List,
   ListItemAvatar,
 } from '@mui/material';
-import { useHeaderStore } from '../../components/Header';
-
 import { useEffect } from 'react';
 import { shallow } from 'zustand/shallow';
 import { ListItemText } from '../../components/ListItemText';
 import { useTools } from '../../hooks';
-import { useSettingsStore } from '../../stores';
+import { useHeaderStoreContext, useSettingsStore } from '../../stores';
 import { ListItemButton } from './SelectEnabledToolsPage.style';
 
 export const SelectEnabledToolsPage: React.FC<{
@@ -27,6 +25,7 @@ export const SelectEnabledToolsPage: React.FC<{
     (state) => [state[`enabled${type}`], state.setTools],
     shallow,
   );
+  const headerStoreContext = useHeaderStoreContext();
 
   const handleClick = (key: string) => {
     if (!tools) {
@@ -57,7 +56,7 @@ export const SelectEnabledToolsPage: React.FC<{
         setTools(type, toolKeys, toolKeys);
       }
     };
-    return useHeaderStore.getState().setAction(
+    return headerStoreContext.getState().setAction(
       <IconButton size="medium" edge="end" onClick={toggleCheckboxes}>
         {allToolsSelected ? (
           <CheckBoxOutlinedIcon />
@@ -68,7 +67,7 @@ export const SelectEnabledToolsPage: React.FC<{
         )}
       </IconButton>,
     );
-  }, [enabledTools.length, setTools, tools, type, typeKey]);
+  }, [enabledTools.length, headerStoreContext, setTools, tools, type, typeKey]);
 
   return (
     <Container disableGutters>

packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -17,12 +17,11 @@ import { shallow } from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
 import { ContractComponent } from '../../components/ContractComponent';
 import { Dialog } from '../../components/Dialog';
-import { useHeaderStore } from '../../components/Header';
 import { Insurance } from '../../components/Insurance';
 import { getStepList } from '../../components/Step';
 import { useNavigateBack } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
-import { useRouteExecutionStore } from '../../stores';
+import { useHeaderStoreContext, useRouteExecutionStore } from '../../stores';
 import { formatTokenAmount } from '../../utils';
 import { ContactSupportButton } from './ContactSupportButton';
 import { Container } from './TransactionDetailsPage.style';
@@ -37,6 +36,7 @@ export const TransactionDetailsPage: React.FC = () => {
     (store) => [store.routes[state?.routeId], store.deleteRoute],
     shallow,
   );
+  const headerStoreContext = useHeaderStoreContext();
   const [open, setOpen] = useState(false);
 
   const toggleDialog = useCallback(() => {
@@ -67,12 +67,12 @@ export const TransactionDetailsPage: React.FC = () => {
   };
 
   useEffect(() => {
-    return useHeaderStore.getState().setAction(
+    return headerStoreContext.getState().setAction(
       <IconButton size="medium" edge="end" onClick={toggleDialog}>
         <DeleteIcon />
       </IconButton>,
     );
-  }, [toggleDialog]);
+  }, [headerStoreContext, toggleDialog]);
 
   const startedAt = new Date(
     routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0,

packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -12,9 +12,8 @@ import {
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dialog } from '../../components/Dialog';
-import { useHeaderStore } from '../../components/Header';
 import { useWallet } from '../../providers';
-import { useRouteExecutionStore } from '../../stores';
+import { useHeaderStoreContext, useRouteExecutionStore } from '../../stores';
 import { useTransactionHistory } from '../../stores/routes';
 import { TransactionHistoryEmpty } from './TransactionHistoryEmpty';
 import { TransactionHistoryItem } from './TransactionHistoryItem';
@@ -23,6 +22,7 @@ export const TransactionHistoryPage: React.FC = () => {
   const { t } = useTranslation();
   const { account } = useWallet();
   const transactions = useTransactionHistory(account.address);
+  const headerStoreContext = useHeaderStoreContext();
   const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
   const [open, setOpen] = useState(false);
 
@@ -32,13 +32,13 @@ export const TransactionHistoryPage: React.FC = () => {
 
   useEffect(() => {
     if (transactions.length) {
-      return useHeaderStore.getState().setAction(
+      return headerStoreContext.getState().setAction(
         <IconButton size="medium" edge="end" onClick={toggleDialog}>
           <DeleteIcon />
         </IconButton>,
       );
     }
-  }, [transactions.length, toggleDialog]);
+  }, [transactions.length, toggleDialog, headerStoreContext]);
 
   if (!transactions.length) {
     return <TransactionHistoryEmpty />;

packages/widget/src/pages/TransactionPage/TransactionPage.tsx

@@ -8,7 +8,6 @@ import { useLocation } from 'react-router-dom';
 import type { BottomSheetBase } from '../../components/BottomSheet';
 import { ContractComponent } from '../../components/ContractComponent';
 import { GasMessage } from '../../components/GasMessage';
-import { useHeaderStore } from '../../components/Header';
 import { Insurance } from '../../components/Insurance';
 import { getStepList } from '../../components/Step';
 import {
@@ -17,7 +16,7 @@ import {
   useWidgetEvents,
 } from '../../hooks';
 import { FormKey, useWidgetConfig } from '../../providers';
-import { RouteExecutionStatus } from '../../stores';
+import { RouteExecutionStatus, useHeaderStoreContext } from '../../stores';
 import { WidgetEvent } from '../../types/events';
 import { formatTokenAmount } from '../../utils';
 import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet';
@@ -46,6 +45,7 @@ export const TransactionPage: React.FC = () => {
     contractSecondaryComponent,
   } = useWidgetConfig();
   const { state }: any = useLocation();
+  const headerStoreContext = useHeaderStoreContext();
   const stateRouteId = state?.routeId;
   const [routeId, setRouteId] = useState<string>(stateRouteId);
 
@@ -69,15 +69,15 @@ export const TransactionPage: React.FC = () => {
     if (route && subvariant !== 'nft') {
       const transactionType =
         route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
-      return useHeaderStore
+      return headerStoreContext
         .getState()
         .setTitle(
           status === RouteExecutionStatus.Idle
             ? t(`button.review${transactionType}`)
             : t(`header.${transactionType.toLowerCase() as 'swap' | 'bridge'}`),
         );
     }
-  }, [route, status, subvariant, t]);
+  }, [headerStoreContext, route, status, subvariant, t]);
 
   if (!route) {
     return null;

packages/widget/src/stores/StoreProvider.tsx

@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import type { WidgetConfigProps } from '../types';
+import { HeaderStoreProvider } from './header';
 import { RouteExecutionStoreProvider } from './routes';
 import { SplitSubvariantStoreProvider } from './settings';
 
@@ -11,9 +12,11 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
     <SplitSubvariantStoreProvider
       state={config.subvariant === 'split' ? 'swap' : undefined}
     >
-      <RouteExecutionStoreProvider namePrefix={config?.localStorageKeyPrefix}>
-        {children}
-      </RouteExecutionStoreProvider>
+      <HeaderStoreProvider namePrefix={config?.localStorageKeyPrefix}>
+        <RouteExecutionStoreProvider namePrefix={config?.localStorageKeyPrefix}>
+          {children}
+        </RouteExecutionStoreProvider>
+      </HeaderStoreProvider>
     </SplitSubvariantStoreProvider>
   );
 };

packages/widget/src/stores/header/index.ts

@@ -0,0 +1 @@
+export * from './useHeaderStore';

packages/widget/src/stores/header/types.ts

@@ -0,0 +1,15 @@
+import type { StoreApi, UseBoundStore } from 'zustand';
+
+export type HeaderStore = UseBoundStore<StoreApi<HeaderState>>;
+
+export interface HeaderStateBase {
+  element?: React.ReactNode | null;
+  title?: string;
+}
+
+export interface HeaderState extends HeaderStateBase {
+  setAction(element?: React.ReactNode | null): () => void;
+  setTitle(title?: string): () => void;
+  removeAction(): void;
+  removeTitle(): void;
+}