From e3254564aeb760351a0bccf5cc83ca9719931f5d Mon Sep 17 00:00:00 2001
From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com>
Date: Fri, 23 Sep 2022 09:18:59 +0100
Subject: [PATCH] fix: view liquidity provision anchor (#1443)

* fix: view liquidity provision anchor

* fix: remove router push and use external links in tooltips

* fix:  remove unused push router

* fix:  remove unused push router
---
 .../trading-mode-tooltip.tsx                  | 30 ++++++++-----------
 apps/trading/pages/markets/trade-grid.tsx     |  7 -----
 .../components/market-info/info-market.tsx    | 16 +++++-----
 3 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/apps/trading/components/trading-mode-tooltip/trading-mode-tooltip.tsx b/apps/trading/components/trading-mode-tooltip/trading-mode-tooltip.tsx
index 4a38b17be..b8cf24c2b 100644
--- a/apps/trading/components/trading-mode-tooltip/trading-mode-tooltip.tsx
+++ b/apps/trading/components/trading-mode-tooltip/trading-mode-tooltip.tsx
@@ -4,7 +4,8 @@ import {
   getDateTimeFormat,
   addDecimalsFormatNumber,
 } from '@vegaprotocol/react-helpers';
-import { Link } from '@vegaprotocol/ui-toolkit';
+import { ExternalLink, Link as UiToolkitLink } from '@vegaprotocol/ui-toolkit';
+import Link from 'next/link';
 import { MarketTradingMode, AuctionTrigger } from '@vegaprotocol/types';
 import type { Market_market } from '../../pages/markets/__generated__/Market';
 
@@ -83,8 +84,10 @@ const compileGridData = (
   if (isLiquidityMonitoringAuction && market.data?.suppliedStake) {
     grid.push({
       label: (
-        <Link onClick={() => onSelect && onSelect(market.id)}>
-          {t('Current liquidity')}
+        <Link href={`/liquidity/${market.id}`} passHref={true}>
+          <UiToolkitLink onClick={() => onSelect && onSelect(market.id)}>
+            {t('Current liquidity')}
+          </UiToolkitLink>
         </Link>
       ),
       value: formatStake(market.data.suppliedStake, market),
@@ -146,12 +149,9 @@ export const TradingModeTooltip = ({
                 'This new market is in an opening auction to determine a fair mid-price before starting continuous trading.'
               )}
             </span>{' '}
-            <Link
-              href="https://docs.fairground.vega.xyz/docs/trading-questions/#auctions-what-happens-in-an-opening-auction"
-              target="_blank"
-            >
+            <ExternalLink href="https://docs.fairground.vega.xyz/docs/trading-questions/#auctions-what-happens-in-an-opening-auction">
               {t('Find out more')}
-            </Link>
+            </ExternalLink>
           </p>
           <MarketDataGrid grid={compileGridData(market)} />
         </>
@@ -168,12 +168,9 @@ export const TradingModeTooltip = ({
                     'This market is in auction until it reaches sufficient liquidity.'
                   )}
                 </span>{' '}
-                <Link
-                  href="https://docs.fairground.vega.xyz/docs/trading-questions/#auctions-what-is-a-liquidity-monitoring-auction"
-                  target="_blank"
-                >
+                <ExternalLink href="https://docs.fairground.vega.xyz/docs/trading-questions/#auctions-what-is-a-liquidity-monitoring-auction">
                   {t('Find out more')}
-                </Link>
+                </ExternalLink>
               </p>
               <MarketDataGrid grid={compileGridData(market, onSelect)} />
             </>
@@ -186,12 +183,9 @@ export const TradingModeTooltip = ({
                 <span>
                   {t('This market is in auction due to high price volatility.')}
                 </span>{' '}
-                <Link
-                  href="https://docs.fairground.vega.xyz/docs/trading-questions/#auctions-what-is-a-price-monitoring-auction"
-                  target="_blank"
-                >
+                <ExternalLink href="https://docs.fairground.vega.xyz/docs/trading-questions/#auctions-what-is-a-price-monitoring-auction">
                   {t('Find out more')}
-                </Link>
+                </ExternalLink>
               </p>
               <MarketDataGrid grid={compileGridData(market)} />
             </>
diff --git a/apps/trading/pages/markets/trade-grid.tsx b/apps/trading/pages/markets/trade-grid.tsx
index 8d4aca2ce..3cecca793 100644
--- a/apps/trading/pages/markets/trade-grid.tsx
+++ b/apps/trading/pages/markets/trade-grid.tsx
@@ -39,7 +39,6 @@ import {
   MarketTradingModeMapping,
 } from '@vegaprotocol/types';
 import { TradingModeTooltip } from '../../components/trading-mode-tooltip';
-import { useRouter } from 'next/router';
 import { Header, HeaderStat } from '../../components/header';
 
 const TradingViews = {
@@ -116,7 +115,6 @@ export const TradeMarketHeader = ({
   market,
   onSelect,
 }: TradeMarketHeaderProps) => {
-  const { push } = useRouter();
   const { VEGA_EXPLORER_URL } = useEnvironment();
   const { setAssetDetailsDialogOpen, setAssetDetailsDialogSymbol } =
     useAssetDetailsDialogStore();
@@ -170,7 +168,6 @@ export const TradeMarketHeader = ({
             market={market}
             onSelect={(marketId: string) => {
               onSelect(marketId);
-              push(`/liquidity/${marketId}`);
             }}
           />
         }
@@ -219,7 +216,6 @@ interface TradeGridProps {
 }
 
 export const TradeGrid = ({ market, onSelect }: TradeGridProps) => {
-  const { push } = useRouter();
   return (
     <div className="h-full grid grid-rows-[min-content_1fr]">
       <TradeMarketHeader market={market} onSelect={onSelect} />
@@ -257,7 +253,6 @@ export const TradeGrid = ({ market, onSelect }: TradeGridProps) => {
                       marketId={market.id}
                       onSelect={(id: string) => {
                         onSelect(id);
-                        push(`/liquidity/${id}`);
                       }}
                     />
                   </Tab>
@@ -329,7 +324,6 @@ interface TradePanelsProps {
 }
 
 export const TradePanels = ({ market, onSelect }: TradePanelsProps) => {
-  const { push } = useRouter();
   const [view, setView] = useState<TradingView>('Candles');
 
   const renderView = () => {
@@ -344,7 +338,6 @@ export const TradePanels = ({ market, onSelect }: TradePanelsProps) => {
         marketId={market.id}
         onSelect={(id: string) => {
           onSelect(id);
-          push(`/liquidity/${id}`);
         }}
       />
     );
diff --git a/libs/market-info/src/components/market-info/info-market.tsx b/libs/market-info/src/components/market-info/info-market.tsx
index 0e86ac729..97f632858 100644
--- a/libs/market-info/src/components/market-info/info-market.tsx
+++ b/libs/market-info/src/components/market-info/info-market.tsx
@@ -1,11 +1,6 @@
 import { useMemo } from 'react';
 import { formatNumber, t } from '@vegaprotocol/react-helpers';
-import {
-  AsyncRenderer,
-  Splash,
-  Accordion,
-  Link,
-} from '@vegaprotocol/ui-toolkit';
+import { AsyncRenderer, Splash, Accordion } from '@vegaprotocol/ui-toolkit';
 import pick from 'lodash/pick';
 import BigNumber from 'bignumber.js';
 import { useQuery } from '@apollo/client';
@@ -26,6 +21,8 @@ import { MarketInfoTable } from './info-key-value-table';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { generatePath } from 'react-router-dom';
 import { useEnvironment } from '@vegaprotocol/environment';
+import { Link as UiToolkitLink } from '@vegaprotocol/ui-toolkit';
+import Link from 'next/link';
 
 const Links = {
   PROPOSAL_PAGE: ':tokenUrl/governance/:proposalId',
@@ -72,6 +69,7 @@ export const MarketInfoContainer = ({
     MARKET_INFO_QUERY,
     {
       variables,
+      errorPolicy: 'ignore',
     }
   );
 
@@ -291,8 +289,10 @@ export const Info = ({ market, onSelect }: InfoProps) => {
           }
           assetSymbol={assetSymbol}
         >
-          <Link onClick={() => onSelect(market.id)}>
-            {t('View liquidity provision table')}
+          <Link passHref={true} href={`/liquidity/${market.id}`}>
+            <UiToolkitLink onClick={() => onSelect(market.id)}>
+              {t('View liquidity provision table')}
+            </UiToolkitLink>
           </Link>
         </MarketInfoTable>
       ),