chore: fix liquidity page and sidebars/header

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

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>
   ) : (
     '-'

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 />

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'));
 

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,
   });