fix(trading): stabilize the liquidity provision table (#3320)

Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
2023-03-31 12:41:16 +02:00 · 2023-03-31 12:41:16 +02:00 · c899da52c2
commit c899da52c2
parent b9c4057ce5
3 changed files with 229 additions and 153 deletions
--- a/apps/trading/client-pages/liquidity/liquidity.tsx
+++ b/apps/trading/client-pages/liquidity/liquidity.tsx
@ -1,4 +1,5 @@
 import {
+  getId,
  liquidityProvisionsDataProvider,
  LiquidityTable,
  lpAggregatedDataProvider,
@ -25,7 +26,7 @@ import {
  Indicator,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';

 import { Header, HeaderStat, HeaderTitle } from '../../components/header';

@ -37,6 +38,13 @@ import { Link, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';

 import { useMarket, useStaticMarketData } from '@vegaprotocol/market-list';
+import isEqual from 'lodash/isEqual';
+
+const enum LiquidityTabs {
+  Active = 'active',
+  Inactive = 'inactive',
+  MyLiquidityProvision = 'myLP',
+}

 export const Liquidity = () => {
  const params = useParams();
@ -48,10 +56,11 @@ const useReloadLiquidityData = (marketId: string | undefined) => {
  const { reload } = useDataProvider({
    dataProvider: liquidityProvisionsDataProvider,
    variables: { marketId: marketId || '' },
+    update: () => true,
    skip: !marketId,
  });
  useEffect(() => {
-    const interval = setInterval(reload, 10000);
+    const interval = setInterval(reload, 30000);
    return () => clearInterval(interval);
  }, [reload]);
 };
@ -126,47 +135,9 @@ export const LiquidityContainer = ({
  );
 };

-export const LiquidityViewContainer = ({
-  marketId,
-}: {
-  marketId: string | undefined;
-}) => {
-  const { pubKey } = useVegaWallet();
-  const gridRef = useRef<AgGridReact | null>(null);
+const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
  const { data: market } = useMarket(marketId);
  const { data: marketData } = useStaticMarketData(marketId);
-
-  const dataRef = useRef<LiquidityProvisionData[] | null>(null);
-
-  // To be removed when liquidityProvision subscriptions are working
-  useReloadLiquidityData(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: { marketId: marketId || '' },
-    skip: !marketId,
-  });
-
  const targetStake = marketData?.targetStake;
  const suppliedStake = marketData?.suppliedStake;
  const assetDecimalPlaces =
@ -178,44 +149,8 @@ export const LiquidityViewContainer = ({
    NetworkParams.market_liquidity_stakeToCcyVolume,
    NetworkParams.market_liquidity_targetstake_triggering_ratio,
  ]);
-  const stakeToCcyVolume = params.market_liquidity_stakeToCcyVolume;
  const triggeringRatio =
    params.market_liquidity_targetstake_triggering_ratio || '1';
-  const myLpEdges = useMemo(
-    () => liquidityProviders?.filter((e) => e.party.id === pubKey),
-    [liquidityProviders, pubKey]
-  );
-  const activeEdges = useMemo(
-    () =>
-      liquidityProviders?.filter(
-        (e) => e.status === Schema.LiquidityProvisionStatus.STATUS_ACTIVE
-      ),
-    [liquidityProviders]
-  );
-  const inactiveEdges = useMemo(
-    () =>
-      liquidityProviders?.filter(
-        (e) => e.status !== Schema.LiquidityProvisionStatus.STATUS_ACTIVE
-      ),
-    [liquidityProviders]
-  );
-
-  const enum LiquidityTabs {
-    Active = 'active',
-    Inactive = 'inactive',
-    MyLiquidityProvision = 'myLP',
-  }
-
-  const getActiveDefaultId = () => {
-    if (myLpEdges && myLpEdges.length > 0) {
-      return LiquidityTabs.MyLiquidityProvision;
-    }
-    if (activeEdges?.length) return LiquidityTabs.Active;
-    else if (inactiveEdges && inactiveEdges.length > 0) {
-      return LiquidityTabs.Inactive;
-    }
-    return LiquidityTabs.Active;
-  };

  const { percentage, status } = useCheckLiquidityStatus({
    suppliedStake: suppliedStake || 0,
@ -223,66 +158,197 @@ export const LiquidityViewContainer = ({
    triggeringRatio,
  });

+  return (
+    <Header
+      title={
+        market?.tradableInstrument.instrument.name &&
+        market?.tradableInstrument.instrument.code &&
+        marketId && (
+          <HeaderTitle
+            primaryContent={`${market.tradableInstrument.instrument.code} ${t(
+              'liquidity provision'
+            )}`}
+            secondaryContent={
+              <Link to={Links[Routes.MARKET](marketId)}>
+                <UiToolkitLink>{t('Go to trading')}</UiToolkitLink>
+              </Link>
+            }
+          />
+        )
+      }
+    >
+      <HeaderStat
+        heading={t('Target stake')}
+        description={tooltipMapping['targetStake']}
+      >
+        <div>
+          {targetStake
+            ? `${addDecimalsFormatNumber(
+                targetStake,
+                assetDecimalPlaces ?? 0
+              )} ${symbol}`
+            : '-'}
+        </div>
+      </HeaderStat>
+      <HeaderStat
+        heading={t('Supplied stake')}
+        description={tooltipMapping['suppliedStake']}
+      >
+        <div>
+          {suppliedStake
+            ? `${addDecimalsFormatNumber(
+                suppliedStake,
+                assetDecimalPlaces ?? 0
+              )} ${symbol}`
+            : '-'}
+        </div>
+      </HeaderStat>
+      <HeaderStat heading={t('Liquidity supplied')} testId="liquidity-supplied">
+        <Indicator variant={status} />
+
+        {formatNumberPercentage(percentage, 2)}
+      </HeaderStat>
+      <HeaderStat heading={t('Market ID')}>
+        <div className="break-word">{marketId}</div>
+      </HeaderStat>
+    </Header>
+  );
+});
+LiquidityViewHeader.displayName = 'LiquidityViewHeader';
+
+const filterLiquidities = (
+  tab: string,
+  liquidities?: LiquidityProvisionData[] | null,
+  pubKey?: string | null
+) => {
+  switch (tab) {
+    case LiquidityTabs.MyLiquidityProvision:
+      return pubKey
+        ? (liquidities || []).filter((e) => e.party.id === pubKey)
+        : [];
+      break;
+    case LiquidityTabs.Active:
+      return (liquidities || []).filter(
+        (e) => e.status === Schema.LiquidityProvisionStatus.STATUS_ACTIVE
+      );
+    case LiquidityTabs.Inactive:
+      return (liquidities || []).filter(
+        (e) => e.status !== Schema.LiquidityProvisionStatus.STATUS_ACTIVE
+      );
+    default:
+      return [];
+  }
+};
+
+export const LiquidityViewContainer = ({
+  marketId,
+}: {
+  marketId: string | undefined;
+}) => {
+  const [tab, setTab] = useState('');
+  const { pubKey } = useVegaWallet();
+  const [liquidityProviders, setLiquidityProviders] = useState<
+    LiquidityProvisionData[] | null
+  >();
+  const gridRef = useRef<AgGridReact | null>(null);
+  const { data: market } = useMarket(marketId);
+  const dataRef = useRef<LiquidityProvisionData[] | null>(null);
+
+  // To be removed when liquidityProvision subscriptions are working
+  useReloadLiquidityData(marketId);
+
+  const update = useCallback(
+    ({ data }: { data: LiquidityProvisionData[] | null }) => {
+      if (!dataRef.current) {
+        setLiquidityProviders(data);
+        dataRef.current = data;
+      }
+      if (!gridRef.current?.api) {
+        return false;
+      }
+      const updateRows: LiquidityProvisionData[] = [];
+      const addRows: LiquidityProvisionData[] = [];
+      if (gridRef.current?.api?.getModel().getType() === 'infinite') {
+        dataRef.current = data;
+        gridRef.current.api.refreshInfiniteCache();
+      } else {
+        const filteredData = filterLiquidities(tab, data, pubKey as string);
+        filteredData?.forEach((d) => {
+          const rowNode = gridRef.current?.api?.getRowNode(getId(d));
+          if (rowNode) {
+            if (!isEqual(rowNode.data, d)) {
+              updateRows.push(d);
+            }
+          } else {
+            addRows.push(d);
+          }
+        });
+        gridRef.current?.api?.applyTransaction({
+          update: updateRows,
+          add: addRows,
+          addIndex: 0,
+        });
+      }
+      return true;
+    },
+    [gridRef, tab, pubKey]
+  );
+
+  const { loading, error } = useDataProvider({
+    dataProvider: lpAggregatedDataProvider,
+    update,
+    variables: { marketId: marketId || '' },
+    skip: !marketId,
+  });
+  const assetDecimalPlaces =
+    market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
+  const symbol =
+    market?.tradableInstrument.instrument.product.settlementAsset.symbol;
+
+  const { params } = useNetworkParams([
+    NetworkParams.market_liquidity_stakeToCcyVolume,
+    NetworkParams.market_liquidity_targetstake_triggering_ratio,
+  ]);
+  const stakeToCcyVolume = params.market_liquidity_stakeToCcyVolume;
+  const myLpEdges = useMemo(
+    () =>
+      filterLiquidities(
+        LiquidityTabs.MyLiquidityProvision,
+        liquidityProviders,
+        pubKey
+      ),
+    [liquidityProviders, pubKey]
+  );
+  const activeEdges = useMemo(
+    () => filterLiquidities(LiquidityTabs.Active, liquidityProviders),
+    [liquidityProviders]
+  );
+  const inactiveEdges = useMemo(
+    () => filterLiquidities(LiquidityTabs.Inactive, liquidityProviders),
+    [liquidityProviders]
+  );
+
+  useEffect(() => {
+    if (tab) {
+      return;
+    }
+    let initialTab = LiquidityTabs.Active;
+    if (myLpEdges.length > 0) {
+      initialTab = LiquidityTabs.MyLiquidityProvision;
+    }
+    if (activeEdges?.length) {
+      initialTab = LiquidityTabs.Active;
+    } else if (inactiveEdges.length > 0) {
+      initialTab = LiquidityTabs.Inactive;
+    }
+    setTab(initialTab);
+  }, [tab, myLpEdges?.length, activeEdges?.length, inactiveEdges?.length]);
+
  return (
    <AsyncRenderer loading={loading} error={error} data={liquidityProviders}>
      <div className="h-full grid grid-rows-[min-content_1fr]">
-        <Header
-          title={
-            market?.tradableInstrument.instrument.name &&
-            market?.tradableInstrument.instrument.code &&
-            marketId && (
-              <HeaderTitle
-                primaryContent={`${
-                  market.tradableInstrument.instrument.code
-                } ${t('liquidity provision')}`}
-                secondaryContent={
-                  <Link to={Links[Routes.MARKET](marketId)}>
-                    <UiToolkitLink>{t('Go to trading')}</UiToolkitLink>
-                  </Link>
-                }
-              />
-            )
-          }
-        >
-          <HeaderStat
-            heading={t('Target stake')}
-            description={tooltipMapping['targetStake']}
-          >
-            <div>
-              {targetStake
-                ? `${addDecimalsFormatNumber(
-                    targetStake,
-                    assetDecimalPlaces ?? 0
-                  )} ${symbol}`
-                : '-'}
-            </div>
-          </HeaderStat>
-          <HeaderStat
-            heading={t('Supplied stake')}
-            description={tooltipMapping['suppliedStake']}
-          >
-            <div>
-              {suppliedStake
-                ? `${addDecimalsFormatNumber(
-                    suppliedStake,
-                    assetDecimalPlaces ?? 0
-                  )} ${symbol}`
-                : '-'}
-            </div>
-          </HeaderStat>
-          <HeaderStat
-            heading={t('Liquidity supplied')}
-            testId="liquidity-supplied"
-          >
-            <Indicator variant={status} />
-
-            {formatNumberPercentage(percentage, 2)}
-          </HeaderStat>
-          <HeaderStat heading={t('Market ID')}>
-            <div className="break-word">{marketId}</div>
-          </HeaderStat>
-        </Header>
-        <Tabs defaultValue={getActiveDefaultId()}>
+        <LiquidityViewHeader marketId={marketId} />
+        <Tabs value={tab} onValueChange={setTab}>
          <Tab
            id={LiquidityTabs.MyLiquidityProvision}
            name={t('My liquidity provision')}
@ -309,19 +375,17 @@ export const LiquidityViewContainer = ({
              />
            )}
          </Tab>
-          {
-            <Tab id={LiquidityTabs.Inactive} name={t('Inactive')}>
-              {inactiveEdges && (
-                <LiquidityTable
-                  ref={gridRef}
-                  rowData={inactiveEdges}
-                  symbol={symbol}
-                  assetDecimalPlaces={assetDecimalPlaces}
-                  stakeToCcyVolume={stakeToCcyVolume}
-                />
-              )}
-            </Tab>
-          }
+          <Tab id={LiquidityTabs.Inactive} name={t('Inactive')}>
+            {inactiveEdges && (
+              <LiquidityTable
+                ref={gridRef}
+                rowData={inactiveEdges}
+                symbol={symbol}
+                assetDecimalPlaces={assetDecimalPlaces}
+                stakeToCcyVolume={stakeToCcyVolume}
+              />
+            )}
+          </Tab>
        </Tabs>
      </div>
    </AsyncRenderer>
--- a/libs/liquidity/src/lib/liquidity-data-provider.ts
+++ b/libs/liquidity/src/lib/liquidity-data-provider.ts
@ -65,11 +65,23 @@ export const liquidityProvisionsDataProvider = makeDataProvider<
    });
  },
  getData: (responseData: LiquidityProvisionsQuery | null) => {
+    // to remove dedupe after core fix https://github.com/vegaprotocol/vega/issues/8043
+    const dedupeArr: string[] = [];
    return (
      responseData?.market?.liquidityProvisionsConnection?.edges?.map(
        (e) => e?.node
      ) ?? []
-    ).filter((e) => !!e) as LiquidityProvisionFieldsFragment[];
+    ).filter((e) => {
+      if (e) {
+        const id = getId(e);
+        if (dedupeArr.includes(id)) {
+          return false;
+        }
+        dedupeArr.push(id);
+        return true;
+      }
+      return false;
+    }) as LiquidityProvisionFieldsFragment[];
  },
  getDelta: (
    subscriptionData: LiquidityProvisionsUpdateSubscription
@ -96,8 +108,8 @@ export const getId = (
      >
 ) =>
  isLpFragment(entry)
-    ? `${entry.party.id}${entry.status}${entry.createdAt}`
-    : `${entry.partyID}${entry.status}${entry.createdAt}`;
+    ? `${entry.party.id}${entry.status}${entry.createdAt}${entry.updatedAt}`
+    : `${entry.partyID}${entry.status}${entry.createdAt}${entry.updatedAt}`;

 export const marketLiquidityDataProvider = makeDataProvider<
  MarketLpQuery,
--- a/libs/utils/src/lib/generic-data-provider.ts
+++ b/libs/utils/src/lib/generic-data-provider.ts
@ -339,7 +339,7 @@ function makeDataProviderInternal<
    }
  };

-  const initialFetch = async () => {
+  const initialFetch = async (isUpdate = false) => {
    if (!client) {
      return;
    }
@ -394,7 +394,7 @@ function makeDataProviderInternal<
      subscription = undefined;
    } finally {
      loading = false;
-      notifyAll();
+      notifyAll({ isUpdate });
    }
  };

@ -410,7 +410,7 @@ function makeDataProviderInternal<
    } else {
      loading = true;
      error = undefined;
-      initialFetch();
+      initialFetch(true);
    }
  };