fix: header action is not shown in some cases

lifinance · Jul 27, 2022 · d5840e8 · d5840e8
1 parent c8ee71d
commit d5840e8
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 59 deletions.
diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom';
+import { useRoutes } from 'react-router-dom';
 import { AppProps, AppProvider } from './AppProvider';
 import { AppContainer, FlexContainer } from './components/AppContainer';
 import { Header } from './components/Header';
@@ -28,51 +28,63 @@ export const AppDefault = () => {
     <AppContainer>
       <Header />
       <FlexContainer disableGutters>
-        <Routes>
-          <Route index element={<MainPage />} />
-          <Route
-            path={navigationRoutes.selectWallet}
-            element={<SelectWalletPage />}
-          />
-          <Route
-            path={`${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`}
-            element={<SelectWalletPage />}
-          />
-          <Route
-            path={`${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`}
-            element={<SelectWalletPage />}
-          />
-          <Route path={navigationRoutes.settings} element={<SettingsPage />} />
-          <Route
-            path={navigationRoutes.fromToken}
-            element={<SelectTokenPage formType="from" />}
-          />
-          <Route
-            path={navigationRoutes.toToken}
-            element={<SelectTokenPage formType="to" />}
-          />
-          <Route
-            path={navigationRoutes.swapHistory}
-            element={<SwapHistoryPage />}
-          />
-          <Route
-            path={`${navigationRoutes.swapHistory}/${navigationRoutes.swapDetails}`}
-            element={<SwapDetailsPage />}
-          />
-          <Route
-            path={navigationRoutes.swapRoutes}
-            element={<SwapRoutesPage />}
-          />
-          <Route path={navigationRoutes.swapExecution} element={<SwapPage />} />
-          <Route
-            path={`${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}`}
-            element={<SwapPage />}
-          />
-          <Route path="*" element={<NotFound />} />
-        </Routes>
+        <AppRoutes />
       </FlexContainer>
       <PoweredBy />
       <Initializer />
     </AppContainer>
   );
 };
+
+const AppRoutes = () => {
+  const element = useRoutes([
+    {
+      path: '/',
+      element: <MainPage />,
+    },
+    {
+      path: navigationRoutes.settings,
+      element: <SettingsPage />,
+    },
+    {
+      path: navigationRoutes.fromToken,
+      element: <SelectTokenPage formType="from" />,
+    },
+    {
+      path: navigationRoutes.toToken,
+      element: <SelectTokenPage formType="to" />,
+    },
+    {
+      path: navigationRoutes.swapRoutes,
+      element: <SwapRoutesPage />,
+    },
+    {
+      path: navigationRoutes.swapHistory,
+      element: <SwapHistoryPage />,
+    },
+    {
+      path: `${navigationRoutes.swapHistory}/${navigationRoutes.swapDetails}`,
+      element: <SwapDetailsPage />,
+    },
+    ...[
+      navigationRoutes.selectWallet,
+      `${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
+      `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
+    ].map((path) => ({
+      path,
+      element: <SelectWalletPage />,
+    })),
+    ...[
+      navigationRoutes.swapExecution,
+      `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}`,
+    ].map((path) => ({
+      path,
+      element: <SwapPage />,
+    })),
+    {
+      path: '*',
+      element: <NotFound />,
+    },
+  ]);
+  return element;
+};
diff --git a/packages/widget/src/components/Header/NavigationHeader.tsx b/packages/widget/src/components/Header/NavigationHeader.tsx
@@ -26,7 +26,7 @@ export const NavigationHeader: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { account } = useWallet();
-  const { path: actionPath, element } = useHeaderActionStore();
+  const { element } = useHeaderActionStore();
   const { pathname } = useLocation();
   const path = pathname.substring(pathname.lastIndexOf('/') + 1);
   const hasPath = navigationRoutesValues.includes(path);
@@ -81,7 +81,7 @@ export const NavigationHeader: React.FC = () => {
       </Typography>
       <Routes>
         <Route
-          index
+          path={navigationRoutes.home}
           element={
             <>
               {account.isActive ? (
@@ -105,10 +105,7 @@ export const NavigationHeader: React.FC = () => {
             </>
           }
         />
-        <Route
-          path={actionPath ?? '*'}
-          element={element || <Box width={28} height={40} />}
-        />
+        <Route path="*" element={element || <Box width={28} height={40} />} />
       </Routes>
     </HeaderAppBar>
   );

diff --git a/packages/widget/src/components/Header/types.ts b/packages/widget/src/components/Header/types.ts
@@ -1,9 +1,8 @@
 export interface HeaderActionState {
-  path?: string | null;
   element?: React.ReactNode | null;
 }
 
 export interface HeaderActionStore extends HeaderActionState {
-  setAction(path?: string, element?: React.ReactNode | null): () => void;
+  setAction(element?: React.ReactNode | null): () => void;
   removeAction(): void;
 }
diff --git a/packages/widget/src/components/Header/useHeaderActionStore.ts b/packages/widget/src/components/Header/useHeaderActionStore.ts
@@ -5,16 +5,14 @@ import { HeaderActionState, HeaderActionStore } from './types';
 
 export const useHeaderActionStore = create<HeaderActionStore>()(
   immer((set, get) => ({
-    setAction: (path, element) => {
+    setAction: (element) => {
       set((state: HeaderActionState) => {
-        state.path = path;
         state.element = element;
       });
       return get().removeAction;
     },
     removeAction: () => {
       set((state: HeaderActionState) => {
-        state.path = null;
         state.element = null;
       });
     },

diff --git a/packages/widget/src/pages/SwapDetailsPage/SwapDetailsPage.tsx b/packages/widget/src/pages/SwapDetailsPage/SwapDetailsPage.tsx
@@ -22,7 +22,6 @@ import { useSetHeaderAction } from '../../components/Header';
 import { Step } from '../../components/Step';
 import { StepDivider } from '../../components/StepDivider';
 import { useRouteStore } from '../../stores';
-import { navigationRoutes } from '../../utils';
 import { Container } from './SwapDetailsPage.style';
 
 export const SwapDetailsPage: React.FC = () => {
@@ -53,7 +52,6 @@ export const SwapDetailsPage: React.FC = () => {
 
   useEffect(() => {
     return setHeaderAction(
-      navigationRoutes.swapDetails,
       <IconButton
         size="medium"
         aria-label="settings"

diff --git a/packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx b/packages/widget/src/pages/SwapRoutesPage/SwapRoutesPage.tsx
@@ -47,7 +47,6 @@ export const SwapRoutesPage: React.FC<BoxProps> = () => {
 
   useEffect(() => {
     return setHeaderAction(
-      navigationRoutes.swapRoutes,
       <ProgressToNextUpdate
         updatedAt={dataUpdatedAt}
         timeToUpdate={refetchTime}
@@ -65,10 +64,10 @@ export const SwapRoutesPage: React.FC<BoxProps> = () => {
   return (
     <Stack direction="column" spacing={2}>
       {routeNotFound ? (
-        <SwapRouteNotFoundCard dense />
+        <SwapRouteNotFoundCard />
       ) : isLoading || isFetching ? (
         Array.from({ length: 3 }).map((_, index) => (
-          <SwapRouteCardSkeleton key={index} dense />
+          <SwapRouteCardSkeleton key={index} />
         ))
       ) : (
         swapRoutes?.map((route, index) => (