From 90b20bbe5d43c811e4ec6b7255575cf3c0b95281 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Wed, 5 Jul 2023 14:10:45 -0700
Subject: [PATCH] feat: update to use links from router config

---
 apps/trading/components/navbar/navbar.tsx     |  1 -
 apps/trading/components/sidebar/sidebar.tsx   | 45 ++++++++++---------
 .../welcome-dialog/risk-message.tsx           | 16 +++----
 .../lib/hooks/use-market-click-handler.ts     |  1 +
 apps/trading/pages/client-router.tsx          | 22 +++++----
 5 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx
index be9bbb215..53ba3e343 100644
--- a/apps/trading/components/navbar/navbar.tsx
+++ b/apps/trading/components/navbar/navbar.tsx
@@ -24,7 +24,6 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 
 import { Links, Routes } from '../../pages/client-router';
-// import { SettingsButton } from '../../client-pages/settings';
 import {
   ProtocolUpgradeCountdown,
   ProtocolUpgradeCountdownMode,
diff --git a/apps/trading/components/sidebar/sidebar.tsx b/apps/trading/components/sidebar/sidebar.tsx
index 54aeeab09..6e3e6cf9a 100644
--- a/apps/trading/components/sidebar/sidebar.tsx
+++ b/apps/trading/components/sidebar/sidebar.tsx
@@ -1,18 +1,19 @@
-import { TransferContainer } from '@vegaprotocol/accounts';
-import { DepositContainer } from '@vegaprotocol/deposits';
-import { VLogo, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
-import { Tooltip } from '../../components/tooltip';
-import { create } from 'zustand';
-import { Route, Routes, useParams } from 'react-router-dom';
-import { Settings } from '../settings';
 import classNames from 'classnames';
-import { NodeHealthContainer } from '../node-health';
-import { MarketInfoAccordionContainer } from '@vegaprotocol/markets';
-import { t } from '@vegaprotocol/i18n';
-import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
-import { WithdrawContainer } from '../withdraw-container';
 import type { ReactNode } from 'react';
 import { useEffect } from 'react';
+import { Route, Routes, useParams } from 'react-router-dom';
+import { create } from 'zustand';
+import { TransferContainer } from '@vegaprotocol/accounts';
+import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
+import { DepositContainer } from '@vegaprotocol/deposits';
+import { t } from '@vegaprotocol/i18n';
+import { MarketInfoAccordionContainer } from '@vegaprotocol/markets';
+import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import { NodeHealthContainer } from '../node-health';
+import { Settings } from '../settings';
+import { Tooltip } from '../../components/tooltip';
+import { WithdrawContainer } from '../withdraw-container';
+import { Routes as AppRoutes } from '../../pages/client-router';
 
 export enum ViewType {
   Order = 'Order',
@@ -53,7 +54,7 @@ export const Sidebar = () => {
         <SidebarButton
           view={ViewType.Settings}
           icon={VegaIconNames.COG}
-          tooltip="Settings"
+          tooltip={t('Settings')}
         />
       </div>
       <nav className="flex flex-col items-stretch gap-2 p-1">
@@ -61,35 +62,39 @@ export const Sidebar = () => {
         <SidebarButton
           view={ViewType.Deposit}
           icon={VegaIconNames.DEPOSIT}
-          tooltip="Deposit"
+          tooltip={t('Deposit')}
         />
         <SidebarButton
           view={ViewType.Withdraw}
           icon={VegaIconNames.WITHDRAW}
-          tooltip="Withdraw"
+          tooltip={t('Withdraw')}
         />
         <SidebarButton
           view={ViewType.Transfer}
           icon={VegaIconNames.TRANSFER}
-          tooltip="Transfer"
+          tooltip={t('Transfer')}
         />
         {/* buttons for specific routes */}
         <Routes>
-          <Route path="/markets/all" element={null} />
           <Route
-            path="/markets/:marketId"
+            path={AppRoutes.MARKETS}
+            // render nothing for markets/all, otherwise markets/:marketId will match with markets/all
+            element={null}
+          />
+          <Route
+            path={AppRoutes.MARKET}
             element={
               <>
                 <SidebarDivider />
                 <SidebarButton
                   view={ViewType.Order}
                   icon={VegaIconNames.TICKET}
-                  tooltip="Order"
+                  tooltip={t('Order')}
                 />
                 <SidebarButton
                   view={ViewType.Info}
                   icon={VegaIconNames.BREAKDOWN}
-                  tooltip="Market specification"
+                  tooltip={t('Market specification')}
                 />
               </>
             }
diff --git a/apps/trading/components/welcome-dialog/risk-message.tsx b/apps/trading/components/welcome-dialog/risk-message.tsx
index 4ab3e74b1..8168e405f 100644
--- a/apps/trading/components/welcome-dialog/risk-message.tsx
+++ b/apps/trading/components/welcome-dialog/risk-message.tsx
@@ -1,10 +1,7 @@
 import { t } from '@vegaprotocol/i18n';
-import {
-  ExternalLink,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
-import { Links, Routes } from '../../pages/client-router';
+import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import { Routes } from '../../pages/client-router';
+import { Link } from 'react-router-dom';
 
 export const RiskMessage = () => {
   return (
@@ -30,15 +27,12 @@ export const RiskMessage = () => {
         {t(
           'By using the Vega Console, you acknowledge that you have read and understood the'
         )}{' '}
-        <ExternalLink
-          href={`/#/${Links[Routes.DISCLAIMER]()}`}
-          className="underline"
-        >
+        <Link className="underline" to={Routes.DISCLAIMER} target="_blank">
           <span className="flex items-center gap-1">
             <span>{t('Vega Console Disclaimer')}</span>
             <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
           </span>
-        </ExternalLink>
+        </Link>
       </p>
     </>
   );
diff --git a/apps/trading/lib/hooks/use-market-click-handler.ts b/apps/trading/lib/hooks/use-market-click-handler.ts
index 546121246..15db3617e 100644
--- a/apps/trading/lib/hooks/use-market-click-handler.ts
+++ b/apps/trading/lib/hooks/use-market-click-handler.ts
@@ -7,6 +7,7 @@ export const useMarketClickHandler = (replace = false) => {
   const { marketId } = useParams();
   const { pathname } = useLocation();
   const isMarketPage = pathname.match(/^\/markets\/(.+)/);
+
   return useCallback(
     (selectedId: string, metaKey?: boolean) => {
       const link = Links[Routes.MARKET](selectedId);
diff --git a/apps/trading/pages/client-router.tsx b/apps/trading/pages/client-router.tsx
index 281f6aa24..bd9655077 100644
--- a/apps/trading/pages/client-router.tsx
+++ b/apps/trading/pages/client-router.tsx
@@ -33,34 +33,32 @@ const LazyDisclaimer = dynamic(() => import('../client-pages/disclaimer'), {
 
 export enum Routes {
   HOME = '/',
-  MARKET = '/markets',
+  MARKET = '/markets/:marketId',
   MARKETS = '/markets/all',
   PORTFOLIO = '/portfolio',
-  LIQUIDITY = 'liquidity/:marketId',
-  SETTINGS = 'settings',
-  DISCLAIMER = 'disclaimer',
+  LIQUIDITY = '/liquidity/:marketId',
+  DISCLAIMER = '/disclaimer',
 }
 
 type ConsoleLinks = { [r in Routes]: (...args: string[]) => string };
+
 export const Links: ConsoleLinks = {
   [Routes.HOME]: () => Routes.HOME,
-  [Routes.MARKET]: (marketId: string | null | undefined) =>
-    marketId ? trimEnd(`${Routes.MARKET}/${marketId}`, '/') : Routes.MARKET,
+  [Routes.MARKET]: (marketId: string) =>
+    trimEnd(Routes.MARKET.replace(':marketId', marketId)),
   [Routes.MARKETS]: () => Routes.MARKETS,
   [Routes.PORTFOLIO]: () => Routes.PORTFOLIO,
-  [Routes.LIQUIDITY]: (marketId: string | null | undefined) =>
-    marketId
-      ? trimEnd(`${Routes.LIQUIDITY}/${marketId}`, '/')
-      : Routes.LIQUIDITY,
-  [Routes.SETTINGS]: () => Routes.SETTINGS,
+  [Routes.LIQUIDITY]: (marketId: string) =>
+    trimEnd(Routes.LIQUIDITY.replace(':marketId', marketId)),
   [Routes.DISCLAIMER]: () => Routes.DISCLAIMER,
 };
 
 const routerConfig: RouteObject[] = [
   {
-    path: '/',
+    path: '/*',
     element: <Layout />,
     children: [
+      // all pages that require the Layout component (Sidebar)
       {
         index: true,
         element: <LazyHome />,