vega-frontend-monorepo/apps/simple-trading-app/src/app/routes/router-config.tsx

import { t } from '@vegaprotocol/react-helpers';
import { DealTicketContainer } from '../components/deal-ticket';
import { SimpleMarketList } from '../components/simple-market-list';
import { Portfolio } from '../components/portfolio';

export const ROUTES = {
  HOME: '/',
  MARKETS: 'markets',
  TRADING: 'trading',
  LIQUIDITY: 'liquidity',
  PORTFOLIO: 'portfolio',
};

export const routerConfig = [
  {
    path: ROUTES.HOME,
    name: 'Home',
    text: t('Home'),
    element: <div>Home</div>,
  },
  {
    path: ROUTES.MARKETS,
    children: [
      {
        path: `:state`,
        element: <SimpleMarketList />,
        children: [
          {
            path: `:product`,
            element: <SimpleMarketList />,
            children: [{ path: `:asset`, element: <SimpleMarketList /> }],
          },
        ],
      },
    ],
    name: 'Markets',
    text: t('Markets'),
    element: <SimpleMarketList />,
  },
  {
    path: ROUTES.TRADING,
    name: 'Trading',
    text: t('Trading'),
    element: <DealTicketContainer />,
    children: [
      {
        path: ':marketId',
        element: <DealTicketContainer />,
      },
    ],
  },
  {
    path: ROUTES.LIQUIDITY,
    name: 'Liquidity',
    text: t('Liquidity'),
    element: <div>Liquidity</div>,
  },
  {
    path: ROUTES.PORTFOLIO,
    name: 'Portfolio',
    text: t('Portfolio'),
    element: <Portfolio />,
  },
];