fix(trading): update LP table on Updating next epoch (#5204)

apps/trading-e2e/src/integration/market-liquidity.cy.ts

@@ -22,6 +22,7 @@ const colUpdatedAt = '[col-id="updatedAt"] button';
 
 const headers = [
   'Party',
+  'Status',
   'Commitment (tDAI)',
   'Obligation',
   'Fee',
@@ -34,7 +35,6 @@ const headers = [
   'Last time on the book',
   'Last fee penalty',
   'Last bond penalty',
-  'Status',
   'Created',
   'Updated',
 ];

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

@@ -49,6 +49,7 @@ describe('LiquidityTable', () => {
       undefined,
       undefined,
       'Party',
+      'Status',
       'Commitment ()',
       'Obligation',
       'Fee',
@@ -61,7 +62,6 @@ describe('LiquidityTable', () => {
       'Last time on the book',
       'Last fee penalty',
       'Last bond penalty',
-      'Status',
       'Created',
       'Updated',
     ];

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

@@ -8,7 +8,7 @@ import {
 import { t } from '@vegaprotocol/i18n';
 import type {
   TypedDataAgGrid,
-  VegaValueFormatterParams,
+  VegaICellRendererParams,
 } from '@vegaprotocol/datagrid';
 import { AgGrid } from '@vegaprotocol/datagrid';
 import {
@@ -183,6 +183,36 @@ export const LiquidityTable = ({
         headerName: t('Commitment details'),
         marryChildren: true,
         children: [
+          {
+            headerName: t('Status'),
+            headerTooltip: t('The current status of this liquidity provision.'),
+            field: 'status',
+            cellRenderer: ({
+              data,
+              value,
+            }: VegaICellRendererParams<LiquidityProvisionData, 'status'>) => {
+              if (!value) return value;
+              if (
+                data?.status === LiquidityProvisionStatus.STATUS_PENDING &&
+                (data?.currentCommitmentAmount || data?.currentFee)
+              ) {
+                return (
+                  <span className="text-warning">
+                    {t('Updating next epoch')}
+                  </span>
+                );
+              }
+              return (
+                <span>
+                  {
+                    LiquidityProvisionStatusMapping[
+                      value as LiquidityProvisionStatus
+                    ]
+                  }
+                </span>
+              );
+            },
+          },
           {
             headerName: t(`Commitment (${symbol})`),
             field: 'commitmentAmount',
@@ -190,30 +220,46 @@ export const LiquidityTable = ({
             headerTooltip: t(
               'The amount committed to the market by this liquidity provider.'
             ),
-            valueFormatter: ({
+            cellRenderer: ({
               data,
               value,
-            }: VegaValueFormatterParams<
+            }: VegaICellRendererParams<
               LiquidityProvisionData,
               'commitmentAmount'
             >) => {
               if (!value) return '-';
-              const formattedCommitmentAmount = addDecimalsFormatNumberQuantum(
+              const currentCommitmentAmount = data?.currentCommitmentAmount;
-                value,
+              const pendingCommitmentAmount = value;
+
+              const formattedPendingCommitmentAmount =
+                addDecimalsFormatNumberQuantum(
+                  pendingCommitmentAmount,
                   assetDecimalPlaces ?? 0,
                   quantum ?? 0
                 );
+
               if (
-                data?.currentCommitmentAmount &&
+                currentCommitmentAmount &&
-                data?.currentCommitmentAmount !== value
+                currentCommitmentAmount !== pendingCommitmentAmount
               ) {
-                return `${addDecimalsFormatNumberQuantum(
+                const formattedCurrentCommitmentAmount =
-                  data.currentCommitmentAmount,
+                  addDecimalsFormatNumberQuantum(
+                    currentCommitmentAmount,
                     assetDecimalPlaces ?? 0,
                     quantum ?? 0
-                )}/${formattedCommitmentAmount}`;
+                  );
+
+                return (
+                  <>
+                    <span>{formattedCurrentCommitmentAmount}</span> (
+                    <span className="text-warning">
+                      {formattedPendingCommitmentAmount}
+                    </span>
+                    )
+                  </>
+                );
               } else {
-                return formattedCommitmentAmount;
+                return formattedPendingCommitmentAmount;
               }
             },
             tooltipValueGetter: assetDecimalsFormatter,
@@ -223,9 +269,58 @@ export const LiquidityTable = ({
             field: 'commitmentAmount',
             type: 'rightAligned',
             headerTooltip: t(
-              `The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_volume network parameter to convert into units of liquidity volume. The obligation can be met by a combination of LP orders and limit orders on the order book.`
+              `The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_volume network parameter to convert into units of liquidity volume.`
             ),
-            valueFormatter: stakeToCcyVolumeQuantumFormatter,
+            cellRenderer: ({
+              data,
+              value,
+            }: VegaICellRendererParams<
+              LiquidityProvisionData,
+              'commitmentAmount'
+            >) => {
+              if (!value) return '-';
+
+              const currentCommitmentAmount = data?.currentCommitmentAmount
+                ? new BigNumber(data?.currentCommitmentAmount)
+                    .times(Number(stakeToCcyVolume) || 1)
+                    .toString()
+                : undefined;
+
+              const pendingCommitmentAmount = new BigNumber(value)
+                .times(Number(stakeToCcyVolume) || 1)
+                .toString();
+
+              const formattedPendingCommitmentAmount =
+                addDecimalsFormatNumberQuantum(
+                  pendingCommitmentAmount,
+                  assetDecimalPlaces ?? 0,
+                  quantum ?? 0
+                );
+
+              if (
+                currentCommitmentAmount &&
+                currentCommitmentAmount !== pendingCommitmentAmount
+              ) {
+                const formattedCurrentCommitmentAmount =
+                  addDecimalsFormatNumberQuantum(
+                    currentCommitmentAmount,
+                    assetDecimalPlaces ?? 0,
+                    quantum ?? 0
+                  );
+
+                return (
+                  <>
+                    <span>{formattedCurrentCommitmentAmount}</span> (
+                    <span className="text-warning">
+                      {formattedPendingCommitmentAmount}
+                    </span>
+                    )
+                  </>
+                );
+              } else {
+                return formattedPendingCommitmentAmount;
+              }
+            },
             tooltipValueGetter: stakeToCcyVolumeFormatter,
           },
           {
@@ -235,21 +330,27 @@ export const LiquidityTable = ({
             ),
             field: 'fee',
             type: 'rightAligned',
-            valueFormatter: ({
+            cellRenderer: ({
               data,
               value,
-            }: ValueFormatterParams<LiquidityProvisionData, 'fee'>) => {
+            }: VegaICellRendererParams<LiquidityProvisionData, 'fee'>) => {
               if (!value) return '-';
-              const formattedValue =
+              const formattedPendingFee =
                 formatNumberPercentage(new BigNumber(value).times(100), 2) ||
                 '-';
               if (data?.currentFee && data?.currentFee !== value) {
-                return `${formatNumberPercentage(
+                const formattedCurrentFee = formatNumberPercentage(
                   new BigNumber(data.currentFee).times(100),
                   2
-                )}/${formattedValue}`;
+                );
+                return (
+                  <>
+                    <span>{formattedCurrentFee}</span> (
+                    <span className="text-warning">{formattedPendingFee}</span>)
+                  </>
+                );
               }
-              return formattedValue;
+              return formattedPendingFee;
             },
           },
           {
@@ -367,26 +468,6 @@ export const LiquidityTable = ({
         headerName: '',
         marryChildren: true,
         children: [
-          {
-            headerName: t('Status'),
-            headerTooltip: t('The current status of this liquidity provision.'),
-            field: 'status',
-            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
-              ];
-            },
-          },
           {
             headerName: t('Created'),
             headerTooltip: t(