Skip to content

Commit

Permalink
feat: use hashrouter, move to RouteProvider, expose routes
Browse files Browse the repository at this point in the history
  • Loading branch information
toniocodo committed Sep 8, 2023
1 parent 82fcfcf commit fd50b00
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 61 deletions.
57 changes: 27 additions & 30 deletions apps/oeth/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
};
35 changes: 15 additions & 20 deletions apps/oeth/src/components/Topnav.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { useState } from 'react';

import {
alpha,
Box,
Expand All @@ -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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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',
Expand All @@ -141,7 +136,7 @@ export function Topnav(props: BoxProps) {
zIndex: 2,
},
}}
></Tab>
/>
))}
</Tabs>

Expand Down
20 changes: 9 additions & 11 deletions apps/oeth/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,25 @@ 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';
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);
Expand All @@ -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 }],
Expand All @@ -46,9 +47,6 @@ root.render(
},
],
],
<>
<CssBaseline />
<App />
</>,
<RouterProvider router={getRouter(routes)} />,
),
);
26 changes: 26 additions & 0 deletions apps/oeth/src/routes.ts
Original file line number Diff line number Diff line change
@@ -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' }) },
},
],
},
];
1 change: 1 addition & 0 deletions libs/oeth/shared/src/clients/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './graphql';
export * from './reactQuery';
export * from './router';
export * from './wagmi';
5 changes: 5 additions & 0 deletions libs/oeth/shared/src/clients/router.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { createHashRouter } from 'react-router-dom';

import type { RouteObject } from 'react-router-dom';

export const getRouter = (routes: RouteObject[]) => createHashRouter(routes);

0 comments on commit fd50b00

Please sign in to comment.