From bc6a8ff959eb8c5e9c9239d66f683a27be856e2d Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Sun, 10 Sep 2023 07:58:48 -0700
Subject: [PATCH] chore: fix liquidity page and sidebars/header

---
 .../layouts/layout-with-sidebar.tsx           |  4 +-
 .../liquidity-supplied/liquidity-supplied.tsx | 79 ++++++++++---------
 apps/trading/components/sidebar/sidebar.tsx   |  4 +-
 apps/trading/pages/client-router.tsx          |  3 +-
 libs/ui-toolkit/src/components/link/link.tsx  |  2 +-
 5 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/apps/trading/components/layouts/layout-with-sidebar.tsx b/apps/trading/components/layouts/layout-with-sidebar.tsx
index 0e777b993..520a53edd 100644
--- a/apps/trading/components/layouts/layout-with-sidebar.tsx
+++ b/apps/trading/components/layouts/layout-with-sidebar.tsx
@@ -23,8 +23,8 @@ export const LayoutWithSidebar = () => {
     <div className={gridClasses}>
       <div className="col-span-full">
         <Routes>
-          <Route path={AppRoutes.MARKET} element={<MarketHeader />} />
-          <Route path={AppRoutes.LIQUIDITY} element={<LiquidityHeader />} />
+          <Route path=":marketId" element={<MarketHeader />} />
+          <Route path=":marketId/liquidity" element={<LiquidityHeader />} />
         </Routes>
       </div>
       <main
diff --git a/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx b/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx
index ec8b092f0..4f73fd855 100644
--- a/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx
+++ b/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx
@@ -12,7 +12,7 @@ import {
   Indicator,
   KeyValueTable,
   KeyValueTableRow,
-  Link,
+  Link as UILink,
 } from '@vegaprotocol/ui-toolkit';
 import BigNumber from 'bignumber.js';
 import { useCheckLiquidityStatus } from '@vegaprotocol/liquidity';
@@ -23,6 +23,7 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { DocsLinks } from '@vegaprotocol/environment';
+import { Link } from 'react-router-dom';
 
 interface Props {
   marketId?: string;
@@ -100,51 +101,51 @@ export const MarketLiquiditySupplied = ({
 
   const description = marketId ? (
     <section data-testid="liquidity-supplied-tooltip">
-      <KeyValueTable>
-        <KeyValueTableRow>
-          <span>{t('Supplied stake')}</span>
-          <span>
-            {market?.suppliedStake
-              ? addDecimalsFormatNumber(
-                  new BigNumber(market?.suppliedStake).toString(),
-                  assetDecimals
-                )
-              : '-'}
-          </span>
-        </KeyValueTableRow>
-        <KeyValueTableRow>
-          <span>{t('Target stake')}</span>
-          <span>
-            {market?.targetStake
-              ? addDecimalsFormatNumber(
-                  new BigNumber(market?.targetStake).toString(),
-                  assetDecimals
-                )
-              : '-'}
-          </span>
-        </KeyValueTableRow>
-      </KeyValueTable>
-      <br />
-      <div className="flex flex-col gap-2">
-        <Link
-          href={`/#/liquidity/${marketId}`}
-          data-testid="view-liquidity-link"
-        >
-          {t('View liquidity provision table')}
-        </Link>
-        {DocsLinks && (
-          <ExternalLink href={DocsLinks.LIQUIDITY} className="mt-2">
-            {t('Learn about providing liquidity')}
-          </ExternalLink>
-        )}
+      <div className="mb-2">
+        <KeyValueTable>
+          <KeyValueTableRow>
+            <span>{t('Supplied stake')}</span>
+            <span>
+              {market?.suppliedStake
+                ? addDecimalsFormatNumber(
+                    new BigNumber(market?.suppliedStake).toString(),
+                    assetDecimals
+                  )
+                : '-'}
+            </span>
+          </KeyValueTableRow>
+          <KeyValueTableRow>
+            <span>{t('Target stake')}</span>
+            <span>
+              {market?.targetStake
+                ? addDecimalsFormatNumber(
+                    new BigNumber(market?.targetStake).toString(),
+                    assetDecimals
+                  )
+                : '-'}
+            </span>
+          </KeyValueTableRow>
+        </KeyValueTable>
       </div>
       {showMessage && (
-        <p className="mt-4">
+        <p className="mb-2">
           {t(
             'The market has sufficient liquidity but there are not enough priced limit orders in the order book, which are required to deploy liquidity commitment pegged orders.'
           )}
         </p>
       )}
+      <div className="flex flex-col gap-2">
+        <Link to="liquidity" data-testid="view-liquidity-link">
+          <UILink>{t('View liquidity provision table')}</UILink>
+        </Link>
+      </div>
+      {DocsLinks && (
+        <div>
+          <ExternalLink href={DocsLinks.LIQUIDITY} className="mt-2">
+            {t('Learn about providing liquidity')}
+          </ExternalLink>
+        </div>
+      )}
     </section>
   ) : (
     '-'
diff --git a/apps/trading/components/sidebar/sidebar.tsx b/apps/trading/components/sidebar/sidebar.tsx
index 6eb66a593..6f0eef819 100644
--- a/apps/trading/components/sidebar/sidebar.tsx
+++ b/apps/trading/components/sidebar/sidebar.tsx
@@ -81,7 +81,7 @@ export const Sidebar = () => {
         {/* buttons for specific routes */}
         <Routes>
           <Route
-            path={AppRoutes.MARKETS}
+            path="all"
             // render nothing for markets/all, otherwise markets/:marketId will match with markets/all
             element={null}
           />
@@ -91,7 +91,7 @@ export const Sidebar = () => {
             element={null}
           />
           <Route
-            path={AppRoutes.MARKET}
+            path=":marketId"
             element={
               <>
                 <SidebarDivider />
diff --git a/apps/trading/pages/client-router.tsx b/apps/trading/pages/client-router.tsx
index 4d6aa2494..19d05b578 100644
--- a/apps/trading/pages/client-router.tsx
+++ b/apps/trading/pages/client-router.tsx
@@ -15,7 +15,8 @@ import { Deposit } from '../client-pages/deposit';
 import { Withdraw } from '../client-pages/withdraw';
 import { Transfer } from '../client-pages/transfer';
 
-// These must remain dynamically imported as pennant cannot be compiled by nextjs
+// 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
 const MarketPage = lazy(() => import('../client-pages/market'));
 const Portfolio = lazy(() => import('../client-pages/portfolio'));
 
diff --git a/libs/ui-toolkit/src/components/link/link.tsx b/libs/ui-toolkit/src/components/link/link.tsx
index 524ba3fd6..172907214 100644
--- a/libs/ui-toolkit/src/components/link/link.tsx
+++ b/libs/ui-toolkit/src/components/link/link.tsx
@@ -11,7 +11,7 @@ type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
  */
 export const Link = ({ className, children, ...props }: LinkProps) => {
   const anchorClassName = classNames(className, {
-    underline: typeof children === 'string',
+    'underline underline-offset-4': typeof children === 'string',
     'cursor-pointer': props['aria-disabled'] !== true,
     'opacity-50 pointer-events-none': props['aria-disabled'] === true,
   });