diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx index 11de9727f..a0b574413 100644 --- 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 index fcbe6f9d3..09988a298 100644 --- 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 index b60fe18ec..77ab85fae 100644 --- 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 index f1995f06a..192b51ca0 100644 --- 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 index 650038da6..119108526 100644 --- 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 index 6ec5eae4a..f66259ae3 100644 --- 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) => (