feat(#2307): make liquidity provision table more prominent (#2350)

* feat(#2307): make liquidity provision table more prominent

* feat(#2307): show title only if content is defined

* feat(#2307): filter LP to show active, undeployed and pending

* fix(#2307): remove showTitle attribute

* fix: check marketId and name before building href

* fix(#2307): revert header changes

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

@@ -30,11 +30,103 @@ import { Link, useParams } from 'react-router-dom';
 
 export const Liquidity = () => {
   const params = useParams();
+  const marketId = params.marketId;
+  return <LiquidityViewContainer marketId={marketId} />;
+};
+
+export const LiquidityContainer = ({
+  marketId,
+}: {
+  marketId: string | undefined;
+}) => {
+  const gridRef = useRef<AgGridReact | null>(null);
+  const { data: marketProvision } = useDataProvider({
+    dataProvider: marketLiquidityDataProvider,
+    skipUpdates: true,
+    variables: useMemo(() => ({ marketId }), [marketId]),
+  });
+  const dataRef = useRef<LiquidityProvisionData[] | null>(null);
+
+  const { reload } = useDataProvider({
+    dataProvider: liquidityProvisionsDataProvider,
+    variables: useMemo(() => ({ marketId }), [marketId]),
+  });
+
+  const update = useCallback(
+    ({ data }: { data: LiquidityProvisionData[] | null }) => {
+      if (!gridRef.current?.api) {
+        return false;
+      }
+      if (dataRef.current?.length) {
+        dataRef.current = data;
+        gridRef.current.api.refreshInfiniteCache();
+        return true;
+      }
+      return false;
+    },
+    [gridRef]
+  );
+
+  const {
+    data: liquidityProviders,
+    loading,
+    error,
+  } = useDataProvider({
+    dataProvider: lpAggregatedDataProvider,
+    update,
+    variables: useMemo(() => ({ marketId }), [marketId]),
+  });
+
+  // To be removed when liquidityProvision subscriptions are working
+  useEffect(() => {
+    const interval = setInterval(reload, 10000);
+    return () => clearInterval(interval);
+  }, [reload]);
+
+  const assetDecimalPlaces =
+    marketProvision?.market?.tradableInstrument.instrument.product
+      .settlementAsset.decimals || 0;
+  const symbol =
+    marketProvision?.market?.tradableInstrument.instrument.product
+      .settlementAsset.symbol;
+
+  const { param: stakeToCcySiskas } = useNetworkParam(
+    NetworkParams.market_liquidity_stakeToCcySiskas
+  );
+  const stakeToCcySiska = stakeToCcySiskas && stakeToCcySiskas[0];
+
+  const filteredEdges = useMemo(
+    () =>
+      liquidityProviders?.filter((e) =>
+        [
+          Schema.LiquidityProvisionStatus.STATUS_ACTIVE,
+          Schema.LiquidityProvisionStatus.STATUS_UNDEPLOYED,
+          Schema.LiquidityProvisionStatus.STATUS_PENDING,
+        ].includes(e.status)
+      ),
+    [liquidityProviders]
+  );
+
+  return (
+    <AsyncRenderer loading={loading} error={error} data={filteredEdges}>
+      <LiquidityTable
+        ref={gridRef}
+        data={filteredEdges}
+        symbol={symbol}
+        assetDecimalPlaces={assetDecimalPlaces}
+        stakeToCcySiskas={stakeToCcySiska}
+      />
+    </AsyncRenderer>
+  );
+};
+
+export const LiquidityViewContainer = ({
+  marketId,
+}: {
+  marketId: string | undefined;
+}) => {
   const { pubKey } = useVegaWallet();
   const gridRef = useRef<AgGridReact | null>(null);
-
-  const marketId = params.marketId;
-
   const { data: marketProvision } = useDataProvider({
     dataProvider: marketLiquidityDataProvider,
     skipUpdates: true,
@@ -133,13 +225,16 @@ export const Liquidity = () => {
       <div className="h-full grid grid-rows-[min-content_1fr]">
         <Header
           title={
-            <Link to={`/markets/${marketId}`}>
+            marketProvision?.market?.tradableInstrument.instrument.name &&
-              <UiToolkitLink className="sm:text-lg md:text-xl lg:text-2xl flex items-center gap-2 whitespace-nowrap hover:text-neutral-500 dark:hover:text-neutral-300">
+            marketId && (
-                {`${
+              <Link to={`/markets/${marketId}`}>
-                  marketProvision?.market?.tradableInstrument.instrument.name
+                <UiToolkitLink className="sm:text-lg md:text-xl lg:text-2xl flex items-center gap-2 whitespace-nowrap hover:text-neutral-500 dark:hover:text-neutral-300">
-                } ${t('liquidity provision')}`}
+                  {`${
-              </UiToolkitLink>
+                    marketProvision?.market?.tradableInstrument.instrument.name
-            </Link>
+                  } ${t('liquidity provision')}`}
+                </UiToolkitLink>
+              </Link>
+            )
           }
         >
           <HeaderStat

apps/trading/client-pages/market/trade-grid.tsx

@@ -25,6 +25,7 @@ import type { SingleMarketFieldsFragment } from '@vegaprotocol/market-list';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import { TradeMarketHeader } from './trade-market-header';
 import { NO_MARKET } from './constants';
+import { LiquidityContainer } from '../liquidity/liquidity';
 
 type MarketDependantView =
   | typeof CandlesChartContainer
@@ -46,6 +47,7 @@ const requiresMarket = (View: MarketDependantView) => {
 const TradingViews = {
   Candles: requiresMarket(CandlesChartContainer),
   Depth: requiresMarket(DepthChartContainer),
+  Liquidity: requiresMarket(LiquidityContainer),
   Ticket: requiresMarket(DealTicketContainer),
   Info: requiresMarket(MarketInfoContainer),
   Orderbook: requiresMarket(OrderbookContainer),
@@ -86,6 +88,9 @@ const MainGrid = ({
               <Tab id="depth" name={t('Depth')}>
                 <TradingViews.Depth marketId={marketId} />
               </Tab>
+              <Tab id="liquidity" name={t('Liquidity')}>
+                <TradingViews.Liquidity marketId={marketId} />
+              </Tab>
             </Tabs>
           </TradeGridChild>
         </ResizableGridPanel>

apps/trading/components/header/header.tsx

@@ -15,7 +15,7 @@ export const Header = ({ title, children }: TradeMarketHeaderProps) => {
         <div className="mb-4 xl:mb-0 px-4 xl:px-0">{title}</div>
         <div
           data-testid="header-summary"
-          className="flex flex-nowrap items-start xl:flex-1 w-full overflow-x-auto text-xs "
+          className="flex flex-nowrap items-start xl:flex-1 w-full overflow-x-auto text-xs"
         >
           {Children.map(children, (child, index) => {
             if (!child) return null;