From fd50b001ac01de725be3dff37decfa2a178040c3 Mon Sep 17 00:00:00 2001 From: toniocodo Date: Fri, 8 Sep 2023 14:31:27 +0200 Subject: [PATCH] feat: use hashrouter, move to RouteProvider, expose routes --- apps/oeth/src/App.tsx | 57 ++++++++++++-------------- apps/oeth/src/components/Topnav.tsx | 35 +++++++--------- apps/oeth/src/main.tsx | 20 ++++----- apps/oeth/src/routes.ts | 26 ++++++++++++ libs/oeth/shared/src/clients/index.ts | 1 + libs/oeth/shared/src/clients/router.ts | 5 +++ 6 files changed, 83 insertions(+), 61 deletions(-) create mode 100644 apps/oeth/src/routes.ts create mode 100644 libs/oeth/shared/src/clients/router.ts diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx index fe38e4a42..8eff592da 100644 --- 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 ( - - - + + + + - - - - } /> - } /> - } /> - - - - + }} + maxWidth="sm" + > + + + + + + + ); -} +}; diff --git a/apps/oeth/src/components/Topnav.tsx b/apps/oeth/src/components/Topnav.tsx index ba85987fc..b163f9027 100644 --- 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,7 +10,9 @@ 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'; @@ -20,7 +20,8 @@ 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 ( setValue(0)} > - Origin logo + Origin logo 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) => ( + /> ))} diff --git a/apps/oeth/src/main.tsx b/apps/oeth/src/main.tsx index 482a9f2c0..2b7e81f94 100644 --- a/apps/oeth/src/main.tsx +++ b/apps/oeth/src/main.tsx @@ -4,11 +4,13 @@ import './polyfills'; import { StrictMode } from 'react'; import * as ReactDOM from 'react-dom/client'; +import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material'; import { - CssBaseline, - Experimental_CssVarsProvider as CssVarsProvider, -} from '@mui/material'; -import { chains, queryClient, wagmiConfig } from '@origin/oeth/shared'; + chains, + getRouter, + queryClient, + wagmiConfig, +} from '@origin/oeth/shared'; import { CurveProvider } from '@origin/shared/providers'; import { theme } from '@origin/shared/theme'; import { composeContexts } from '@origin/shared/utils'; @@ -16,11 +18,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 { 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 +35,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 +47,6 @@ root.render( }, ], ], - <> - - - , + , ), ); diff --git a/apps/oeth/src/routes.ts b/apps/oeth/src/routes.ts new file mode 100644 index 000000000..dde93b321 --- /dev/null +++ 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' }) }, + }, + ], + }, +]; diff --git a/libs/oeth/shared/src/clients/index.ts b/libs/oeth/shared/src/clients/index.ts index 969f58276..cf00d9350 100644 --- a/libs/oeth/shared/src/clients/index.ts +++ b/libs/oeth/shared/src/clients/index.ts @@ -1,3 +1,4 @@ export * from './graphql'; export * from './reactQuery'; +export * from './router'; export * from './wagmi'; diff --git a/libs/oeth/shared/src/clients/router.ts b/libs/oeth/shared/src/clients/router.ts new file mode 100644 index 000000000..23cbec785 --- /dev/null +++ b/libs/oeth/shared/src/clients/router.ts @@ -0,0 +1,5 @@ +import { createHashRouter } from 'react-router-dom'; + +import type { RouteObject } from 'react-router-dom'; + +export const getRouter = (routes: RouteObject[]) => createHashRouter(routes);