diff --git a/apps/trading/lib/hooks/use-get-current-route-id.ts b/apps/trading/lib/hooks/use-get-current-route-id.ts index d99c757c7..5adb812bd 100644 --- a/apps/trading/lib/hooks/use-get-current-route-id.ts +++ b/apps/trading/lib/hooks/use-get-current-route-id.ts @@ -3,12 +3,10 @@ import { matchRoutes, useLocation } from 'react-router-dom'; export const useGetCurrentRouteId = () => { const location = useLocation(); - const currentRoute = matchRoutes(routerConfig, location); - const lastRoute = currentRoute?.pop(); + const matches = matchRoutes(routerConfig, location); + const lastRoute = matches ? matches[matches.length - 1] : undefined; if (lastRoute) { - const { - route: { id }, - } = lastRoute; + const id = lastRoute.route.id; return id || ''; } return ''; diff --git a/apps/trading/pages/client-router.tsx b/apps/trading/pages/client-router.tsx index 028689d91..880ef8732 100644 --- a/apps/trading/pages/client-router.tsx +++ b/apps/trading/pages/client-router.tsx @@ -13,6 +13,7 @@ import { Assets } from '../client-pages/assets'; import { Deposit } from '../client-pages/deposit'; import { Withdraw } from '../client-pages/withdraw'; import { Transfer } from '../client-pages/transfer'; +import { Routes } from '../lib/links'; // These must remain dynamically imported as pennant cannot be compiled by nextjs due to ESM // Using dynamic imports is a workaround for this until pennant is published as ESM @@ -31,6 +32,7 @@ export const routerConfig: RouteObject[] = [ { path: 'disclaimer', element: , + id: Routes.DISCLAIMER, children: [{ index: true, element: }], }, @@ -42,6 +44,7 @@ export const routerConfig: RouteObject[] = [ { index: true, element: , + id: Routes.HOME, }, { path: 'markets', @@ -54,10 +57,12 @@ export const routerConfig: RouteObject[] = [ { path: 'all', element: , + id: Routes.MARKETS, }, { path: ':marketId', element: , + id: Routes.MARKET, }, ], }, @@ -68,15 +73,17 @@ export const routerConfig: RouteObject[] = [ { index: true, element: , + id: Routes.PORTFOLIO, }, { path: 'assets', element: , + id: Routes.ASSETS, children: [ { index: true, element: }, - { path: 'deposit', element: }, - { path: 'withdraw', element: }, - { path: 'transfer', element: }, + { path: 'deposit', element: , id: Routes.DEPOSIT }, + { path: 'withdraw', element: , id: Routes.WITHDRAW }, + { path: 'transfer', element: , id: Routes.TRANSFER }, ], }, ], @@ -84,6 +91,7 @@ export const routerConfig: RouteObject[] = [ { path: 'liquidity/:marketId', element: , + id: Routes.LIQUIDITY, }, // NotFound page is here so its caught within parent '/*' route