c576037b58
* chore: make liquidity page client side only * chore: switch to hash based router * chore: add index files for each page * chore: tidy up _app * chore: convert to use useRoutes * fix: active state with react-router NavLink * feat: add routes enum * chore: restrict link and router imports from next * chore: update testing navigation to use hash routes * fix: typoe in eslint rule message * chore: remove unnecessary getInitialProps function definition * chore: wrap tests with memory router * chore: delete unused index.page file * chore: update suspense fallback state * chore: add comment for link component span usage, update link to use toolkit styles * chore: fix lint issues * chore: delete client deposit page * chore: revert title in _app so title gets set correctly without rerender * revert: removal of deposit page so deposit e2e tests still pass * chore: move client router to index page so valid status codes are still sent * fix: wrong route path for markets page, cypress tests
78 lines
1.5 KiB
TypeScript
78 lines
1.5 KiB
TypeScript
import { Suspense } from 'react';
|
|
import { useRoutes } from 'react-router-dom';
|
|
import dynamic from 'next/dynamic';
|
|
import { t } from '@vegaprotocol/react-helpers';
|
|
|
|
const LazyHome = dynamic(() => import('../client-pages/home'), {
|
|
ssr: false,
|
|
});
|
|
|
|
const LazyLiquidity = dynamic(() => import('../client-pages/liquidity'), {
|
|
ssr: false,
|
|
});
|
|
|
|
const LazyMarkets = dynamic(() => import('../client-pages/markets'), {
|
|
ssr: false,
|
|
});
|
|
|
|
const LazyMarket = dynamic(() => import('../client-pages/market'), {
|
|
ssr: false,
|
|
});
|
|
|
|
const LazyPortfolio = dynamic(() => import('../client-pages/portfolio'), {
|
|
ssr: false,
|
|
});
|
|
|
|
const LazyDeposit = dynamic(() => import('../client-pages/deposit'), {
|
|
ssr: false,
|
|
});
|
|
|
|
export enum Routes {
|
|
HOME = '/',
|
|
MARKETS = '/markets',
|
|
PORTFOLIO = '/portfolio',
|
|
PORTFOLIO_DEPOSIT = '/portfolio/deposit',
|
|
}
|
|
|
|
const routerConfig = [
|
|
{
|
|
index: true,
|
|
element: <LazyHome />,
|
|
},
|
|
{
|
|
path: Routes.MARKETS,
|
|
element: <LazyMarkets />,
|
|
},
|
|
{
|
|
path: 'markets/:marketId',
|
|
element: <LazyMarket />,
|
|
},
|
|
{
|
|
path: 'liquidity/:marketId',
|
|
element: <LazyLiquidity />,
|
|
},
|
|
{
|
|
path: Routes.PORTFOLIO,
|
|
element: <LazyPortfolio />,
|
|
},
|
|
{
|
|
path: Routes.PORTFOLIO_DEPOSIT,
|
|
element: <LazyDeposit />,
|
|
},
|
|
];
|
|
|
|
export const ClientRouter = () => {
|
|
const routes = useRoutes(routerConfig);
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<div className="w-full h-full flex justify-center items-center">
|
|
{t('Loading...')}
|
|
</div>
|
|
}
|
|
>
|
|
{routes}
|
|
</Suspense>
|
|
);
|
|
};
|