fix(#2063): console liquidity tab keeps adding duplicate rows (#2069)

* fix: create custom ID for liquidity provision entries

* fix: #1931 rename is LP fragment

* fix(#2063): normalize numbers in lp table and rename isLpFragment

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

@@ -6,7 +6,7 @@ import {
 } from '@vegaprotocol/liquidity';
 import { tooltipMapping } from '@vegaprotocol/market-info';
 import {
-  addDecimalsFormatNumber,
+  addDecimalsNormalizeNumber,
   NetworkParams,
   t,
   useDataProvider,
@@ -151,7 +151,7 @@ export const Liquidity = () => {
           >
             <div>
               {targetStake
-                ? `${addDecimalsFormatNumber(
+                ? `${addDecimalsNormalizeNumber(
                     targetStake,
                     assetDecimalPlaces ?? 0
                   )} ${symbol}`
@@ -164,7 +164,7 @@ export const Liquidity = () => {
           >
             <div>
               {suppliedStake
-                ? `${addDecimalsFormatNumber(
+                ? `${addDecimalsNormalizeNumber(
                     suppliedStake,
                     assetDecimalPlaces ?? 0
                   )} ${symbol}`

libs/deal-ticket/src/components/trading-mode-tooltip/compile-grid-data.tsx

@@ -1,7 +1,7 @@
 import {
   t,
   getDateTimeFormat,
-  addDecimalsFormatNumber,
+  addDecimalsNormalizeNumber,
 } from '@vegaprotocol/react-helpers';
 import { MarketTradingMode, AuctionTrigger } from '@vegaprotocol/types';
 import { Link as UILink } from '@vegaprotocol/ui-toolkit';
@@ -20,7 +20,7 @@ export const compileGridData = (
     market.data?.trigger === AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY;
 
   const formatStake = (value: string) => {
-    const formattedValue = addDecimalsFormatNumber(
+    const formattedValue = addDecimalsNormalizeNumber(
       value,
       market.tradableInstrument.instrument.product.settlementAsset.decimals
     );
@@ -76,7 +76,7 @@ export const compileGridData = (
       value:
         market.data.indicativePrice && market.data.indicativePrice !== '0'
           ? `~
-            ${addDecimalsFormatNumber(
+            ${addDecimalsNormalizeNumber(
               market.data.indicativePrice,
               market.decimalPlaces
             )}`
@@ -90,7 +90,7 @@ export const compileGridData = (
       value:
         market.data.indicativeVolume && market.data.indicativeVolume !== '0'
           ? '~' +
-            addDecimalsFormatNumber(
+            addDecimalsNormalizeNumber(
               market.data.indicativeVolume,
               market.positionDecimalPlaces
             )

libs/liquidity/src/lib/liquidity-data-provider.ts

@@ -25,6 +25,8 @@ import type {
   LiquidityProvisionsUpdateSubscription,
 } from './__generated__/MarketLiquidity';
 import type { Account } from '@vegaprotocol/accounts';
+import type { IterableElement } from 'type-fest';
+
 export const liquidityProvisionsDataProvider = makeDataProvider<
   LiquidityProvisionsQuery,
   LiquidityProvisionFieldsFragment[],
@@ -39,8 +41,8 @@ export const liquidityProvisionsDataProvider = makeDataProvider<
   ) => {
     return produce(data, (draft) => {
       deltas?.forEach((delta) => {
-        const id = delta.partyID;
+        const id = getId(delta);
-        const index = draft.findIndex((a) => a.party.id === id);
+        const index = draft.findIndex((a) => getId(a) === id);
         if (index !== -1) {
           draft[index].commitmentAmount = delta.commitmentAmount;
           draft[index].fee = delta.fee;
@@ -76,6 +78,27 @@ export const liquidityProvisionsDataProvider = makeDataProvider<
   },
 });
 
+function isLpFragment(
+  entry:
+    | LiquidityProvisionFieldsFragment
+    | IterableElement<
+        LiquidityProvisionsUpdateSubscription['liquidityProvisions']
+      >
+): entry is LiquidityProvisionFieldsFragment {
+  return entry.__typename === 'LiquidityProvision';
+}
+
+export const getId = (
+  entry:
+    | LiquidityProvisionFieldsFragment
+    | IterableElement<
+        LiquidityProvisionsUpdateSubscription['liquidityProvisions']
+      >
+) =>
+  isLpFragment(entry)
+    ? `${entry.party.id}${entry.status}${entry.createdAt}`
+    : `${entry.partyID}${entry.status}${entry.createdAt}`;
+
 export const marketLiquidityDataProvider = makeDataProvider<
   MarketLpQuery,
   MarketLpQuery,

libs/liquidity/src/lib/liquidity-table.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import {
-  addDecimalsFormatNumber,
+  addDecimalsNormalizeNumber,
   formatNumberPercentage,
   getDateTimeFormat,
   t,
@@ -16,10 +16,11 @@ import BigNumber from 'bignumber.js';
 import type { Schema } from '@vegaprotocol/types';
 import { LiquidityProvisionStatusMapping } from '@vegaprotocol/types';
 import type { LiquidityProvisionData } from './liquidity-data-provider';
+import { getId } from './liquidity-data-provider';
 
 const percentageFormatter = ({ value }: ValueFormatterParams) => {
   if (!value) return '-';
-  return formatNumberPercentage(new BigNumber(value).times(100), 4) || '-';
+  return formatNumberPercentage(new BigNumber(value).times(100), 2) || '-';
 };
 
 const dateValueFormatter = ({ value }: { value?: string | null }) => {
@@ -40,14 +41,18 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
   ({ data, symbol = '', assetDecimalPlaces, stakeToCcySiskas }, ref) => {
     const assetDecimalsFormatter = ({ value }: ValueFormatterParams) => {
       if (!value) return '-';
-      return `${addDecimalsFormatNumber(value, assetDecimalPlaces ?? 0, 5)}`;
+      return `${addDecimalsNormalizeNumber(value, assetDecimalPlaces ?? 0, 5)}`;
     };
     const stakeToCcySiskasFormatter = ({ value }: ValueFormatterParams) => {
       if (!value) return '-';
       const newValue = new BigNumber(value)
         .times(stakeToCcySiskas ?? 1)
         .toString();
-      return `${addDecimalsFormatNumber(newValue, assetDecimalPlaces ?? 0, 5)}`;
+      return `${addDecimalsNormalizeNumber(
+        newValue,
+        assetDecimalPlaces ?? 0,
+        5
+      )}`;
     };
 
     if (!data) return null;
@@ -55,7 +60,7 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
       <AgGrid
         style={{ width: '100%', height: '100%' }}
         overlayNoRowsTemplate={t('No liquidity provisions')}
-        getRowId={({ data }) => data.party.id}
+        getRowId={({ data }) => getId(data)}
         rowHeight={34}
         ref={ref}
         tooltipShowDelay={500}