Merge pull request #30 from OriginProtocol/feat/hash-router

[TAS-241] feat: use hashrouter, move to RouteProvider, expose routes
OriginProtocol · Sep 10, 2023 · 8c63ee4 · 8c63ee4
2 parents 0bfcfbc + 232fbec
commit 8c63ee4
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 61 deletions.
diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
@@ -1,37 +1,34 @@
-import { Container, Stack } from '@mui/material';
-import { HistoryView } from '@origin/oeth/history';
+import { Container, CssBaseline, Stack } from '@mui/material';
 import { ApyHeader } from '@origin/oeth/shared';
-import { SwapView } from '@origin/oeth/swap';
-import { Route, Routes } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 
 import { Topnav } from './components/Topnav';
 
-export function App() {
+export const App = () => {
   return (
-    <Stack>
-      <Topnav />
-      <Container
-        sx={{
-          mt: {
-            xs: 3,
-            md: 5,
-            paddingInline: {
-              xs: 2,
-              md: 0,
+    <>
+      <CssBaseline />
+      <Stack>
+        <Topnav />
+        <Container
+          sx={{
+            mt: {
+              xs: 3,
+              md: 5,
+              paddingInline: {
+                xs: 2,
+                md: 0,
+              },
             },
-          },
-        }}
-        maxWidth="sm"
-      >
-        <ApyHeader />
-        <Stack mt={3}>
-          <Routes>
-            <Route index element={<SwapView />} />
-            <Route path="history" element={<HistoryView />} />
-            <Route path="swap" element={<SwapView />} />
-          </Routes>
-        </Stack>
-      </Container>
-    </Stack>
+          }}
+          maxWidth="sm"
+        >
+          <ApyHeader />
+          <Stack mt={3}>
+            <Outlet />
+          </Stack>
+        </Container>
+      </Stack>
+    </>
   );
-}
+};
diff --git a/apps/oeth/src/components/Topnav.tsx b/apps/oeth/src/components/Topnav.tsx
@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import {
   alpha,
   Box,
@@ -12,15 +10,18 @@ import {
 } from '@mui/material';
 import { OpenAccountModalButton } from '@origin/shared/providers';
 import { useIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+
+import { routes } from '../routes';
 
 import type { BoxProps } from '@mui/material';
 
 export function Topnav(props: BoxProps) {
   const theme = useTheme();
   const isSmall = useMediaQuery(theme.breakpoints.down('md'));
   const intl = useIntl();
-  const [value, setValue] = useState(0);
+  const navigate = useNavigate();
+  const location = useLocation();
 
   return (
     <Box
@@ -65,15 +66,14 @@ export function Topnav(props: BoxProps) {
             },
           },
         })}
-        onClick={() => setValue(0)}
       >
-        <img
-          src="https://app.oeth.com/images/origin-ether-logo.svg"
-          alt="Origin logo"
-        />
+        <img src="/images/origin-ether-logo.svg" alt="Origin logo" />
       </Box>
       <Tabs
-        onChange={(_, value) => setValue(value)}
+        value={location.pathname}
+        onChange={(_, value) => {
+          navigate(value);
+        }}
         sx={{
           order: {
             xs: 2,
@@ -104,17 +104,12 @@ export function Topnav(props: BoxProps) {
             },
           },
         }}
-        value={value}
       >
-        {[
-          intl.formatMessage({ defaultMessage: 'Swap' }),
-          intl.formatMessage({ defaultMessage: 'History' }),
-        ].map((tab) => (
+        {routes[0].children.map((route) => (
           <Tab
-            key={tab}
-            component={Link}
-            label={tab}
-            to={`/${tab.toLowerCase()}`}
+            key={route?.path ?? '/'}
+            value={route?.path ?? '/'}
+            label={intl.formatMessage(route.handle.label)}
             sx={{
               fontSize: {
                 xs: '0.875rem',
@@ -141,7 +136,7 @@ export function Topnav(props: BoxProps) {
                 zIndex: 2,
               },
             }}
-          ></Tab>
+          />
         ))}
       </Tabs>
 

diff --git a/apps/oeth/src/main.tsx b/apps/oeth/src/main.tsx
@@ -4,10 +4,7 @@ import './polyfills';
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
 
-import {
-  CssBaseline,
-  Experimental_CssVarsProvider as CssVarsProvider,
-} from '@mui/material';
+import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material';
 import { chains, queryClient, wagmiConfig } from '@origin/oeth/shared';
 import { CurveProvider } from '@origin/shared/providers';
 import { theme } from '@origin/shared/theme';
@@ -16,11 +13,11 @@ import { darkTheme, RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { setAutoFreeze } from 'immer';
 import { IntlProvider } from 'react-intl';
-import { BrowserRouter } from 'react-router-dom';
+import { createHashRouter, RouterProvider } from 'react-router-dom';
 import { WagmiConfig } from 'wagmi';
 
-import { App } from './App';
 import { en } from './lang';
+import { routes } from './routes';
 
 // https://github.com/dai-shi/proxy-compare/pull/8
 setAutoFreeze(false);
@@ -33,7 +30,6 @@ root.render(
     [
       [StrictMode],
       [IntlProvider, { messages: en, locale: 'en', defaultLocale: 'en' }],
-      [BrowserRouter],
       [QueryClientProvider, { client: queryClient }],
       [CssVarsProvider, { theme: theme, defaultMode: 'dark' }],
       [WagmiConfig, { config: wagmiConfig }],
@@ -46,9 +42,6 @@ root.render(
         },
       ],
     ],
-    <>
-      <CssBaseline />
-      <App />
-    </>,
+    <RouterProvider router={createHashRouter(routes)} />,
   ),
 );
diff --git a/apps/oeth/src/routes.ts b/apps/oeth/src/routes.ts
@@ -0,0 +1,26 @@
+import { HistoryView } from '@origin/oeth/history';
+import { SwapView } from '@origin/oeth/swap';
+import { defineMessage } from 'react-intl';
+
+import { App } from './App';
+
+import type { RouteObject } from 'react-router-dom';
+
+export const routes: RouteObject[] = [
+  {
+    path: '/',
+    Component: App,
+    children: [
+      {
+        index: true,
+        Component: SwapView,
+        handle: { label: defineMessage({ defaultMessage: 'Swap' }) },
+      },
+      {
+        path: '/history',
+        Component: HistoryView,
+        handle: { label: defineMessage({ defaultMessage: 'History' }) },
+      },
+    ],
+  },
+];