feat(trading): liquidity provision current and pending on update (#5152)

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

@@ -21,7 +21,10 @@ import type {
 } from './__generated__/MarketLiquidity';
 
 export type LiquidityProvisionFields = LiquidityProvisionFieldsFragment &
-  Schema.LiquiditySLAParameters;
+  Schema.LiquiditySLAParameters & {
+    currentCommitmentAmount?: string;
+    currentFee?: string;
+  };
 
 export const liquidityProvisionsDataProvider = makeDataProvider<
   LiquidityProvisionsQuery,
@@ -34,10 +37,28 @@ export const liquidityProvisionsDataProvider = makeDataProvider<
   getData: (responseData: LiquidityProvisionsQuery | null) => {
     return (responseData?.market?.liquidityProvisions?.edges
       ?.filter((n) => !!n)
-      .map((e) => ({
+      .map((e) => {
-        ...e?.node.current,
+        let node;
-        ...responseData.market?.liquiditySLAParameters,
+        if (!e?.node.pending && e?.node.current) {
-      })) ?? []) as LiquidityProvisionFields[];
+          node = {
+            ...e?.node.current,
+            ...responseData.market?.liquiditySLAParameters,
+          };
+        } else if (!e?.node.current && e?.node.pending) {
+          node = {
+            ...e?.node.pending,
+            ...responseData.market?.liquiditySLAParameters,
+          };
+        } else {
+          node = {
+            ...e?.node.pending,
+            currentCommitmentAmount: e?.node.current.commitmentAmount,
+            currentFee: e?.node.current.fee,
+            ...responseData.market?.liquiditySLAParameters,
+          };
+        }
+        return node;
+      }) ?? []) as LiquidityProvisionFields[];
   },
 });
 
@@ -91,7 +112,8 @@ export const matchFilter = (filter: Filter, lp: LiquidityProvisionData) => {
   }
   if (
     filter.active === true &&
-    lp.status !== Schema.LiquidityProvisionStatus.STATUS_ACTIVE
+    lp.status !== Schema.LiquidityProvisionStatus.STATUS_ACTIVE &&
+    lp.status !== Schema.LiquidityProvisionStatus.STATUS_PENDING
   ) {
     return false;
   }
@@ -105,7 +127,7 @@ export const matchFilter = (filter: Filter, lp: LiquidityProvisionData) => {
 };
 
 export interface LiquidityProvisionData
-  extends Omit<LiquidityProvisionFieldsFragment, '__typename'>,
+  extends Omit<LiquidityProvisionFields, '__typename'>,
     Partial<LiquidityProviderFieldsFragment>,
     Omit<Schema.LiquiditySLAParameters, '__typename'> {
   assetDecimalPlaces?: number;
@@ -113,11 +135,12 @@ export interface LiquidityProvisionData
   averageEntryValuation?: string;
   equityLikeShare?: string;
   earmarkedFees?: number;
+  status: Schema.LiquidityProvisionStatus;
 }
 
 export const getLiquidityProvision = (
   liquidityProvisions: LiquidityProvisionFields[],
-  liquidityProvider: LiquidityProviderFieldsFragment[],
+  liquidityProviders: LiquidityProviderFieldsFragment[],
   filter?: Filter
 ): LiquidityProvisionData[] => {
   return liquidityProvisions
@@ -136,12 +159,14 @@ export const getLiquidityProvision = (
       }
       return true;
     })
-    .map((lp) => {
+    .map((liquidityProvision) => {
-      const lpObj = liquidityProvider.find((f) => lp.party.id === f.partyId);
+      const liquidityProvider = liquidityProviders.find(
-      if (!lpObj) return lp;
+        (f) => liquidityProvision.party.id === f.partyId
-      const accounts = compact(lp.party.accountsConnection?.edges).map(
-        (e) => e.node
       );
+      if (!liquidityProvider) return liquidityProvision;
+      const accounts = compact(
+        liquidityProvision.party.accountsConnection?.edges
+      ).map((e) => e.node);
       const bondAccounts = accounts?.filter(
         (a) => a?.type === Schema.AccountType.ACCOUNT_TYPE_BOND
       );
@@ -164,8 +189,8 @@ export const getLiquidityProvision = (
           )
           .toNumber() ?? 0;
       return {
-        ...lp,
+        ...liquidityProvision,
-        ...lpObj,
+        ...liquidityProvider,
         balance,
         earmarkedFees,
         __typename: undefined,

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

@@ -6,7 +6,10 @@ import {
   getDateTimeFormat,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import type { TypedDataAgGrid } from '@vegaprotocol/datagrid';
+import type {
+  TypedDataAgGrid,
+  VegaValueFormatterParams,
+} from '@vegaprotocol/datagrid';
 import { AgGrid } from '@vegaprotocol/datagrid';
 import {
   CopyWithTooltip,
@@ -22,7 +25,7 @@ import type {
   ValueFormatterParams,
 } from 'ag-grid-community';
 import BigNumber from 'bignumber.js';
-import type { LiquidityProvisionStatus } from '@vegaprotocol/types';
+import { LiquidityProvisionStatus } from '@vegaprotocol/types';
 import { LiquidityProvisionStatusMapping } from '@vegaprotocol/types';
 import type { LiquidityProvisionData } from './liquidity-data-provider';
 
@@ -187,7 +190,32 @@ export const LiquidityTable = ({
             headerTooltip: t(
               'The amount committed to the market by this liquidity provider.'
             ),
-            valueFormatter: assetDecimalsQuantumFormatter,
+            valueFormatter: ({
+              data,
+              value,
+            }: VegaValueFormatterParams<
+              LiquidityProvisionData,
+              'commitmentAmount'
+            >) => {
+              if (!value) return '-';
+              const formattedCommitmentAmount = addDecimalsFormatNumberQuantum(
+                value,
+                assetDecimalPlaces ?? 0,
+                quantum ?? 0
+              );
+              if (
+                data?.currentCommitmentAmount &&
+                data?.currentCommitmentAmount !== value
+              ) {
+                return `${addDecimalsFormatNumberQuantum(
+                  data.currentCommitmentAmount,
+                  assetDecimalPlaces ?? 0,
+                  quantum ?? 0
+                )}/${formattedCommitmentAmount}`;
+              } else {
+                return formattedCommitmentAmount;
+              }
+            },
             tooltipValueGetter: assetDecimalsFormatter,
           },
           {
@@ -207,7 +235,22 @@ export const LiquidityTable = ({
             ),
             field: 'fee',
             type: 'rightAligned',
-            valueFormatter: percentageFormatter,
+            valueFormatter: ({
+              data,
+              value,
+            }: ValueFormatterParams<LiquidityProvisionData, 'fee'>) => {
+              if (!value) return '-';
+              const formattedValue =
+                formatNumberPercentage(new BigNumber(value).times(100), 2) ||
+                '-';
+              if (data?.currentFee && data?.currentFee !== value) {
+                return `${formatNumberPercentage(
+                  new BigNumber(data.currentFee).times(100),
+                  2
+                )}/${formattedValue}`;
+              }
+              return formattedValue;
+            },
           },
           {
             headerName: t('Adjusted stake share'),
@@ -328,8 +371,17 @@ export const LiquidityTable = ({
             headerName: t('Status'),
             headerTooltip: t('The current status of this liquidity provision.'),
             field: 'status',
-            valueFormatter: ({ value }) => {
+            valueFormatter: ({
+              data,
+              value,
+            }: ValueFormatterParams<LiquidityProvisionData, 'status'>) => {
               if (!value) return value;
+              if (
+                data?.status === LiquidityProvisionStatus.STATUS_PENDING &&
+                (data?.currentCommitmentAmount || data?.currentFee)
+              ) {
+                return t('Updating next epoch');
+              }
               return LiquidityProvisionStatusMapping[
                 value as LiquidityProvisionStatus
               ];