diff --git a/apps/trading-e2e/src/integration/market-liquidity.cy.ts b/apps/trading-e2e/src/integration/market-liquidity.cy.ts index 0bff893be..b83687443 100644 --- a/apps/trading-e2e/src/integration/market-liquidity.cy.ts +++ b/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', ]; diff --git a/libs/liquidity/src/lib/liquidity-table.spec.tsx b/libs/liquidity/src/lib/liquidity-table.spec.tsx index 4c6dd57f1..47b64a845 100644 --- a/libs/liquidity/src/lib/liquidity-table.spec.tsx +++ b/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', ]; diff --git a/libs/liquidity/src/lib/liquidity-table.tsx b/libs/liquidity/src/lib/liquidity-table.tsx index f969ae911..d78ea51e3 100644 --- a/libs/liquidity/src/lib/liquidity-table.tsx +++ b/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) => { + 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(`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( - value, - assetDecimalPlaces ?? 0, - quantum ?? 0 - ); - if ( - data?.currentCommitmentAmount && - data?.currentCommitmentAmount !== value - ) { - return `${addDecimalsFormatNumberQuantum( - data.currentCommitmentAmount, + const currentCommitmentAmount = data?.currentCommitmentAmount; + const pendingCommitmentAmount = value; + + const formattedPendingCommitmentAmount = + addDecimalsFormatNumberQuantum( + pendingCommitmentAmount, assetDecimalPlaces ?? 0, quantum ?? 0 - )}/${formattedCommitmentAmount}`; + ); + + if ( + currentCommitmentAmount && + currentCommitmentAmount !== pendingCommitmentAmount + ) { + const formattedCurrentCommitmentAmount = + addDecimalsFormatNumberQuantum( + currentCommitmentAmount, + assetDecimalPlaces ?? 0, + quantum ?? 0 + ); + + return ( + <> + {formattedCurrentCommitmentAmount} ( + + {formattedPendingCommitmentAmount} + + ) + + ); } 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 ( + <> + {formattedCurrentCommitmentAmount} ( + + {formattedPendingCommitmentAmount} + + ) + + ); + } else { + return formattedPendingCommitmentAmount; + } + }, tooltipValueGetter: stakeToCcyVolumeFormatter, }, { @@ -235,21 +330,27 @@ export const LiquidityTable = ({ ), field: 'fee', type: 'rightAligned', - valueFormatter: ({ + cellRenderer: ({ data, value, - }: ValueFormatterParams) => { + }: VegaICellRendererParams) => { 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 ( + <> + {formattedCurrentFee} ( + {formattedPendingFee}) + + ); } - 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) => { - 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(