fix(trading): add liquidity provision docs (#3403)

apps/trading/client-pages/liquidity/liquidity.tsx

@@ -8,6 +8,7 @@ import {
 import { tooltipMapping } from '@vegaprotocol/market-info';
 import {
   addDecimalsFormatNumber,
+  createDocsLinks,
   formatNumberPercentage,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
@@ -23,6 +24,7 @@ import {
   Tabs,
   Link as UiToolkitLink,
   Indicator,
+  ExternalLink,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
@@ -37,6 +39,7 @@ import { Link, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 
 import { useMarket, useStaticMarketData } from '@vegaprotocol/market-list';
+import { useEnvironment } from '@vegaprotocol/environment';
 
 const enum LiquidityTabs {
   Active = 'active',
@@ -144,6 +147,7 @@ const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
     market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
   const symbol =
     market?.tradableInstrument.instrument.product.settlementAsset.symbol;
+  const { VEGA_DOCS_URL } = useEnvironment();
 
   const { params } = useNetworkParams([
     NetworkParams.market_liquidity_stakeToCcyVolume,
@@ -211,6 +215,13 @@ const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
       <HeaderStat heading={t('Market ID')}>
         <div className="break-word">{marketId}</div>
       </HeaderStat>
+      <HeaderStat heading={t('Learn more')}>
+        {VEGA_DOCS_URL && (
+          <ExternalLink href={createDocsLinks(VEGA_DOCS_URL).LIQUIDITY}>
+            {t('Providing liquidity')}
+          </ExternalLink>
+        )}
+      </HeaderStat>
     </Header>
   );
 });

apps/trading/components/liquidity-supplied/liquidity-supplied.tsx

@@ -8,6 +8,7 @@ import type { MarketData } from '@vegaprotocol/market-list';
 import { marketDataProvider, marketProvider } from '@vegaprotocol/market-list';
 import { HeaderStat } from '../header';
 import {
+  ExternalLink,
   Indicator,
   KeyValueTable,
   KeyValueTableRow,
@@ -18,9 +19,11 @@ import { useCheckLiquidityStatus } from '@vegaprotocol/liquidity';
 import { AuctionTrigger, MarketTradingMode } from '@vegaprotocol/types';
 import {
   addDecimalsFormatNumber,
+  createDocsLinks,
   formatNumberPercentage,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
+import { useEnvironment } from '@vegaprotocol/environment';
 
 interface Props {
   marketId?: string;
@@ -44,6 +47,8 @@ export const MarketLiquiditySupplied = ({
     params.market_liquidity_targetstake_triggering_ratio
   );
 
+  const { VEGA_DOCS_URL } = useEnvironment();
+
   const variables = useMemo(
     () => ({
       marketId: marketId || '',
@@ -126,6 +131,14 @@ export const MarketLiquiditySupplied = ({
       <Link href={`/#/liquidity/${marketId}`} data-testid="view-liquidity-link">
         {t('View liquidity provision table')}
       </Link>
+      {VEGA_DOCS_URL && (
+        <ExternalLink
+          href={createDocsLinks(VEGA_DOCS_URL).LIQUIDITY}
+          className="mt-2"
+        >
+          {t('Learn about providing liquidity')}
+        </ExternalLink>
+      )}
       {showMessage && (
         <p className="mt-4">
           {t(

libs/utils/src/lib/links.ts

@@ -15,6 +15,7 @@ export const createDocsLinks = (docsUrl: string) => ({
   NODE_OPERATORS: `${docsUrl}/node-operators`,
   LOSS_SOCIALIZATION: `${docsUrl}/concepts/trading-on-vega/market-protections#loss-socialisation`,
   POSITION_RESOLUTION: `${docsUrl}/concepts/trading-on-vega/market-protections#position-resolution`,
+  LIQUIDITY: `${docsUrl}/concepts/liquidity/provision`,
 });
 
 export const ExternalLinks = {