2022-12-22 14:24:20 +00:00
|
|
|
import type { RouteObject } from 'react-router-dom';
|
2023-10-16 18:18:26 +00:00
|
|
|
import { Navigate, useRoutes } from 'react-router-dom';
|
2023-09-20 20:28:34 +00:00
|
|
|
import { lazy, Suspense } from 'react';
|
2023-01-02 16:01:06 +00:00
|
|
|
import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
|
2024-01-31 14:21:29 +00:00
|
|
|
import { LayoutWithSidebar, LayoutCentered } from '../components/layouts';
|
|
|
|
import { LayoutWithSky } from '../components/layouts-inner';
|
2023-09-20 20:28:34 +00:00
|
|
|
import { Home } from '../client-pages/home';
|
|
|
|
import { Liquidity } from '../client-pages/liquidity';
|
|
|
|
import { MarketsPage } from '../client-pages/markets';
|
|
|
|
import { Disclaimer } from '../client-pages/disclaimer';
|
|
|
|
import { Assets } from '../client-pages/assets';
|
2023-09-19 06:15:36 +00:00
|
|
|
import { Deposit } from '../client-pages/deposit';
|
|
|
|
import { Withdraw } from '../client-pages/withdraw';
|
|
|
|
import { Transfer } from '../client-pages/transfer';
|
2023-10-25 21:59:30 +00:00
|
|
|
import { Fees } from '../client-pages/fees';
|
2023-12-05 10:19:42 +00:00
|
|
|
import { Rewards } from '../client-pages/rewards';
|
2023-10-16 18:18:26 +00:00
|
|
|
import { Routes as AppRoutes } from '../lib/links';
|
2023-09-21 13:25:19 +00:00
|
|
|
import { Referrals } from '../client-pages/referrals/referrals';
|
|
|
|
import { ReferralStatistics } from '../client-pages/referrals/referral-statistics';
|
2023-11-28 15:08:21 +00:00
|
|
|
import { ApplyCodeFormContainer } from '../client-pages/referrals/apply-code-form';
|
2023-09-21 13:25:19 +00:00
|
|
|
import { CreateCodeContainer } from '../client-pages/referrals/create-code-form';
|
|
|
|
import { NotFound as ReferralNotFound } from '../client-pages/referrals/error-boundary';
|
|
|
|
import { compact } from 'lodash';
|
2023-12-12 12:53:20 +00:00
|
|
|
import { useFeatureFlags } from '@vegaprotocol/environment';
|
2023-10-16 18:18:26 +00:00
|
|
|
import { LiquidityHeader } from '../components/liquidity-header';
|
2024-02-08 13:24:48 +00:00
|
|
|
import { MarketHeader, MobileMarketHeader } from '../components/market-header';
|
2024-02-09 10:30:24 +00:00
|
|
|
import {
|
|
|
|
PortfolioMobileSidebar,
|
|
|
|
PortfolioSidebar,
|
|
|
|
} from '../client-pages/portfolio/portfolio-sidebar';
|
2023-10-16 18:18:26 +00:00
|
|
|
import { LiquiditySidebar } from '../client-pages/liquidity/liquidity-sidebar';
|
|
|
|
import { MarketsSidebar } from '../client-pages/markets/markets-sidebar';
|
2023-11-16 03:10:39 +00:00
|
|
|
import { useT } from '../lib/use-t';
|
2024-01-31 14:21:29 +00:00
|
|
|
import { CompetitionsHome } from '../client-pages/competitions/competitions-home';
|
|
|
|
import { CompetitionsTeams } from '../client-pages/competitions/competitions-teams';
|
|
|
|
import { CompetitionsTeam } from '../client-pages/competitions/competitions-team';
|
|
|
|
import { CompetitionsCreateTeam } from '../client-pages/competitions/competitions-create-team';
|
|
|
|
import { CompetitionsUpdateTeam } from '../client-pages/competitions/competitions-update-team';
|
2024-02-09 10:30:24 +00:00
|
|
|
import { MarketsMobileSidebar } from '../client-pages/markets/mobile-buttons';
|
2024-02-08 13:24:48 +00:00
|
|
|
import { useScreenDimensions } from '@vegaprotocol/react-helpers';
|
2022-11-08 07:23:38 +00:00
|
|
|
|
2024-02-09 10:30:24 +00:00
|
|
|
// These must remain dynamically imported as pennant cannot be compiled by Next.js due to ESM
|
2023-09-20 20:28:34 +00:00
|
|
|
// Using dynamic imports is a workaround for this until pennant is published as ESM
|
|
|
|
const MarketPage = lazy(() => import('../client-pages/market'));
|
|
|
|
const Portfolio = lazy(() => import('../client-pages/portfolio'));
|
2022-11-08 07:23:38 +00:00
|
|
|
|
2023-11-16 03:10:39 +00:00
|
|
|
const NotFound = () => {
|
|
|
|
const t = useT();
|
|
|
|
return (
|
|
|
|
<Splash>
|
|
|
|
<p>{t('Page not found')}</p>
|
|
|
|
</Splash>
|
|
|
|
);
|
|
|
|
};
|
2022-12-22 14:24:20 +00:00
|
|
|
|
2023-12-12 12:53:20 +00:00
|
|
|
export const useRouterConfig = (): RouteObject[] => {
|
|
|
|
const featureFlags = useFeatureFlags((state) => state.flags);
|
2024-02-08 13:24:48 +00:00
|
|
|
const { screenSize } = useScreenDimensions();
|
|
|
|
const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
|
|
|
|
const marketHeader = largeScreen ? <MarketHeader /> : <MobileMarketHeader />;
|
2024-02-09 10:30:24 +00:00
|
|
|
const marketsSidebar = largeScreen ? (
|
|
|
|
<MarketsSidebar />
|
|
|
|
) : (
|
|
|
|
<MarketsMobileSidebar />
|
|
|
|
);
|
|
|
|
const portfolioSidebar = largeScreen ? (
|
|
|
|
<PortfolioSidebar />
|
|
|
|
) : (
|
|
|
|
<PortfolioMobileSidebar />
|
|
|
|
);
|
|
|
|
|
2024-01-31 14:21:29 +00:00
|
|
|
const routeConfig = compact([
|
2023-12-12 12:53:20 +00:00
|
|
|
{
|
|
|
|
index: true,
|
|
|
|
element: <Home />,
|
|
|
|
id: AppRoutes.HOME,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'disclaimer',
|
|
|
|
element: <LayoutCentered />,
|
|
|
|
id: AppRoutes.DISCLAIMER,
|
|
|
|
children: [{ index: true, element: <Disclaimer /> }],
|
|
|
|
},
|
|
|
|
// Referrals routing (the pages should be available if the feature flag is on)
|
|
|
|
featureFlags.REFERRALS
|
|
|
|
? {
|
|
|
|
path: AppRoutes.REFERRALS,
|
2024-02-09 10:30:24 +00:00
|
|
|
element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
|
2023-12-12 12:53:20 +00:00
|
|
|
children: [
|
|
|
|
{
|
|
|
|
element: (
|
|
|
|
<LayoutWithSky>
|
|
|
|
<Referrals />
|
|
|
|
</LayoutWithSky>
|
|
|
|
),
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
index: true,
|
|
|
|
element: <ReferralStatistics />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: AppRoutes.REFERRALS_CREATE_CODE,
|
|
|
|
element: <CreateCodeContainer />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: AppRoutes.REFERRALS_APPLY_CODE,
|
|
|
|
element: <ApplyCodeFormContainer />,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: '*',
|
|
|
|
element: <ReferralNotFound />,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}
|
|
|
|
: undefined,
|
2023-12-29 15:50:51 +00:00
|
|
|
featureFlags.TEAM_COMPETITION
|
|
|
|
? {
|
2024-01-31 14:21:29 +00:00
|
|
|
path: AppRoutes.COMPETITIONS,
|
2024-02-09 10:30:24 +00:00
|
|
|
element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
|
2024-01-31 14:21:29 +00:00
|
|
|
children: [
|
|
|
|
// pages with planets and stars
|
|
|
|
{
|
|
|
|
element: <LayoutWithSky />,
|
|
|
|
children: [
|
|
|
|
{ index: true, element: <CompetitionsHome /> },
|
|
|
|
{
|
|
|
|
path: AppRoutes.COMPETITIONS_TEAMS,
|
|
|
|
element: <CompetitionsTeams />,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
// pages with blurred background
|
|
|
|
{
|
|
|
|
path: AppRoutes.COMPETITIONS_TEAM,
|
|
|
|
element: <CompetitionsTeam />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: AppRoutes.COMPETITIONS_CREATE_TEAM,
|
|
|
|
element: <CompetitionsCreateTeam />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: AppRoutes.COMPETITIONS_UPDATE_TEAM,
|
|
|
|
element: <CompetitionsUpdateTeam />,
|
|
|
|
},
|
|
|
|
],
|
2023-12-29 15:50:51 +00:00
|
|
|
}
|
|
|
|
: undefined,
|
2023-12-12 12:53:20 +00:00
|
|
|
{
|
|
|
|
path: 'fees/*',
|
2024-02-09 10:30:24 +00:00
|
|
|
element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
|
2023-12-12 12:53:20 +00:00
|
|
|
children: [
|
|
|
|
{
|
|
|
|
index: true,
|
|
|
|
element: <Fees />,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'rewards/*',
|
2024-02-09 10:30:24 +00:00
|
|
|
element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
|
2023-12-12 12:53:20 +00:00
|
|
|
children: [
|
|
|
|
{
|
|
|
|
index: true,
|
|
|
|
element: <Rewards />,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'markets/*',
|
|
|
|
element: (
|
2024-02-09 10:30:24 +00:00
|
|
|
<LayoutWithSidebar header={marketHeader} sidebar={marketsSidebar} />
|
2023-12-12 12:53:20 +00:00
|
|
|
),
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
index: true,
|
|
|
|
element: <MarketsPage />,
|
|
|
|
id: AppRoutes.MARKETS,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'all',
|
|
|
|
element: <Navigate to="/markets" />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: ':marketId',
|
|
|
|
element: <MarketPage />,
|
|
|
|
id: AppRoutes.MARKET,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'portfolio/*',
|
2024-02-09 10:30:24 +00:00
|
|
|
element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
|
2023-12-12 12:53:20 +00:00
|
|
|
children: [
|
|
|
|
{
|
|
|
|
index: true,
|
|
|
|
element: <Portfolio />,
|
|
|
|
id: AppRoutes.PORTFOLIO,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
path: 'assets',
|
|
|
|
element: <Assets />,
|
|
|
|
id: AppRoutes.ASSETS,
|
|
|
|
children: [
|
|
|
|
{ index: true, element: <Navigate to="deposit" /> },
|
|
|
|
{ path: 'deposit', element: <Deposit />, id: AppRoutes.DEPOSIT },
|
|
|
|
{ path: 'withdraw', element: <Withdraw />, id: AppRoutes.WITHDRAW },
|
|
|
|
{ path: 'transfer', element: <Transfer />, id: AppRoutes.TRANSFER },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
2023-10-16 18:18:26 +00:00
|
|
|
|
2023-12-12 12:53:20 +00:00
|
|
|
{
|
|
|
|
path: 'liquidity/*',
|
|
|
|
element: (
|
|
|
|
<LayoutWithSidebar
|
|
|
|
header={<LiquidityHeader />}
|
|
|
|
sidebar={<LiquiditySidebar />}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
id: AppRoutes.LIQUIDITY,
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
path: ':marketId',
|
|
|
|
element: <Liquidity />,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
2023-12-29 15:50:51 +00:00
|
|
|
|
2023-12-12 12:53:20 +00:00
|
|
|
{
|
|
|
|
path: '*',
|
|
|
|
element: <NotFound />,
|
|
|
|
},
|
|
|
|
]);
|
2024-01-31 14:21:29 +00:00
|
|
|
|
|
|
|
return routeConfig;
|
2023-12-12 12:53:20 +00:00
|
|
|
};
|
2022-11-08 07:23:38 +00:00
|
|
|
|
|
|
|
export const ClientRouter = () => {
|
2023-12-12 12:53:20 +00:00
|
|
|
const routes = useRoutes(useRouterConfig());
|
2022-11-08 07:23:38 +00:00
|
|
|
return (
|
|
|
|
<Suspense
|
|
|
|
fallback={
|
2023-09-20 20:28:34 +00:00
|
|
|
<Splash>
|
2023-01-02 16:01:06 +00:00
|
|
|
<Loader />
|
2023-09-20 20:28:34 +00:00
|
|
|
</Splash>
|
2022-11-08 07:23:38 +00:00
|
|
|
}
|
|
|
|
>
|
|
|
|
{routes}
|
|
|
|
</Suspense>
|
|
|
|
);
|
|
|
|
};
|