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
This commit is contained in:
m.ray 2022-11-14 16:17:26 -05:00 committed by GitHub
parent ed60f959d4
commit ffa33634a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 14 deletions

View File

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

View File

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

View File

@ -25,6 +25,8 @@ import type {
LiquidityProvisionsUpdateSubscription, LiquidityProvisionsUpdateSubscription,
} from './__generated__/MarketLiquidity'; } from './__generated__/MarketLiquidity';
import type { Account } from '@vegaprotocol/accounts'; import type { Account } from '@vegaprotocol/accounts';
import type { IterableElement } from 'type-fest';
export const liquidityProvisionsDataProvider = makeDataProvider< export const liquidityProvisionsDataProvider = makeDataProvider<
LiquidityProvisionsQuery, LiquidityProvisionsQuery,
LiquidityProvisionFieldsFragment[], LiquidityProvisionFieldsFragment[],
@ -39,8 +41,8 @@ export const liquidityProvisionsDataProvider = makeDataProvider<
) => { ) => {
return produce(data, (draft) => { return produce(data, (draft) => {
deltas?.forEach((delta) => { 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) { if (index !== -1) {
draft[index].commitmentAmount = delta.commitmentAmount; draft[index].commitmentAmount = delta.commitmentAmount;
draft[index].fee = delta.fee; 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< export const marketLiquidityDataProvider = makeDataProvider<
MarketLpQuery, MarketLpQuery,
MarketLpQuery, MarketLpQuery,

View File

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