LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix: estimate order margin query asset decimal places fix (#2029)

Browse Source 
* fix: estimate margin and fees update fix - use asset dp and normalize

* fix: update styling in fees breakdown component

* fix: fix cypress tests

* fix: format with asset dp only in react components

* fix: fix number formattingcd

* fix: remove comment

* fix: rename getMaximumDigitsNumberFormat

* fix: fix console-lite cypress tests
This commit is contained in:
m.ray 2022-11-11 14:44:53 +00:00 committed by GitHub
parent d3cb3896f4
commit 011ea97d23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 87 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/console-lite-e2e/src/integration/market-trade.test.ts
View File

@ -266,10 +266,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
.find('dt')
.eq(3)
.should('have.text', 'Est. Fees (tDAI)');
cy.get('#step-2-panel')
.find('dd')
.eq(3)
.should('have.text', '3.00000 (3.03%)');
cy.get('#step-2-panel').find('dd').eq(3).should('have.text', '3 (3.03%)');
}
});
@ -291,10 +288,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
cy.get('#step-3-panel').find('dd').eq(2).should('have.text', '98.93006');
cy.get('#step-3-panel')
.find('dd')
.eq(3)
.should('have.text', '3.00000 (3.03%)');
cy.get('#step-3-panel').find('dd').eq(3).should('have.text', '3 (3.03%)');
cy.get('#step-3-panel').find('dd').eq(4).should('have.text', ' - ');

13
apps/console-lite/src/app/components/deal-ticket/deal-ticket-steps.tsx
View File

@ -26,6 +26,9 @@ import {
toDecimal,
removeDecimal,
addDecimalsFormatNumber,
addDecimalsNormalizeNumber,
addDecimal,
formatNumber,
} from '@vegaprotocol/react-helpers';
import {
useOrderSubmit,
@ -142,6 +145,9 @@ export const DealTicketSteps = ({ market }: DealTicketMarketProps) => {
return null;
}, [market.decimalPlaces, order.size, price]);
const assetDecimals =
market.tradableInstrument.instrument.product.settlementAsset.decimals;
const fees = useMemo(() => {
if (estMargin?.totalFees && notionalSize) {
const percentage = new BigNumber(estMargin?.totalFees)
@ -150,11 +156,14 @@ export const DealTicketSteps = ({ market }: DealTicketMarketProps) => {
.decimalPlaces(2)
.toString();
return `${estMargin.totalFees} (${percentage}%)`;
return `${addDecimalsNormalizeNumber(
estMargin.totalFees,
assetDecimals
)} (${formatNumber(addDecimal(percentage, assetDecimals), 2)}%)`;
}
return null;
}, [estMargin?.totalFees, notionalSize]);
}, [assetDecimals, estMargin?.totalFees, notionalSize]);
const max = useMemo(() => {
return new BigNumber(maxTrade)

6
libs/deal-ticket/src/components/deal-ticket-validation/use-order-margin-validation.tsx
View File

@ -25,13 +25,15 @@ export const useOrderMarginValidation = ({ market, estMargin }: Props) => {
partyBalance?.party?.accounts || [],
AccountType.ACCOUNT_TYPE_GENERAL
);
const assetDecimals =
market.tradableInstrument.instrument.product.settlementAsset.decimals;
const balance = settlementAccount
? toBigNum(
settlementAccount.balance || 0,
settlementAccount.asset.decimals || 0
)
: toBigNum('0', 0);
const margin = toBigNum(estMargin?.margin || 0, 0);
: toBigNum('0', assetDecimals);
const margin = toBigNum(estMargin?.margin || 0, assetDecimals);
const { id, symbol, decimals } =
market.tradableInstrument.instrument.product.settlementAsset;
const balanceString = balance.toString();

14
libs/deal-ticket/src/hooks/use-fee-deal-ticket-details.tsx
View File

@ -1,5 +1,9 @@
import { FeesBreakdown } from '@vegaprotocol/market-info';
import { normalizeFormatNumber, t } from '@vegaprotocol/react-helpers';
import {
addDecimalsNormalizeNumber,
normalizeFormatNumber,
t,
} from '@vegaprotocol/react-helpers';
import { Schema } from '@vegaprotocol/types';
import { useVegaWallet } from '@vegaprotocol/wallet';
import BigNumber from 'bignumber.js';
@ -96,6 +100,8 @@ export const getFeeDetailsValues = ({
estCloseOut,
market,
}: FeeDetails) => {
const assetDecimals =
market.tradableInstrument.instrument.product.settlementAsset.decimals;
const formatValueWithMarketDp = (
value: string | number | null | undefined
): string => {
@ -107,10 +113,7 @@ export const getFeeDetailsValues = ({
value: string | number | null | undefined
): string => {
return value && !isNaN(Number(value))
? normalizeFormatNumber(
value,
market.tradableInstrument.instrument.product.settlementAsset.decimals
)
? addDecimalsNormalizeNumber(value, assetDecimals)
: '-';
};
return [
@ -136,6 +139,7 @@ export const getFeeDetailsValues = ({
fees={estMargin?.fees}
feeFactors={market.fees.factors}
quoteName={quoteName}
decimals={assetDecimals}
/>
</>
),

9
libs/deal-ticket/src/hooks/use-order-margin.spec.ts
View File

@ -52,6 +52,15 @@ describe('useOrderMargin', () => {
price: '1000000',
},
},
tradableInstrument: {
instrument: {
product: {
settlementAsset: {
decimals: 5,
},
},
},
},
};
const partyId = 'partyId';

13
libs/deal-ticket/src/hooks/use-order-margin.ts
View File

@ -1,7 +1,7 @@
import { BigNumber } from 'bignumber.js';
import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
import { Schema } from '@vegaprotocol/types';
import { addDecimal, removeDecimal } from '@vegaprotocol/react-helpers';
import { removeDecimal } from '@vegaprotocol/react-helpers';
import { useMarketPositions } from './use-market-positions';
import { useMarketDataMarkPrice } from './use-market-data-mark-price';
import type { EstimateOrderQuery } from './__generated__/EstimateOrder';
@ -37,6 +37,7 @@ export const useOrderMargin = ({
}: Props): OrderMargin | null => {
const marketPositions = useMarketPositions({ marketId: market.id, partyId });
const markPriceData = useMarketDataMarkPrice(market.id);
const { data } = useEstimateOrderQuery({
variables: {
marketId: market.id,
@ -79,12 +80,12 @@ export const useOrderMargin = ({
const { makerFee, liquidityFee, infrastructureFee } =
data.estimateOrder.fee;
return {
margin: addDecimal(margin, market.decimalPlaces),
totalFees: addDecimal(fees, market.decimalPlaces),
margin,
totalFees: fees,
fees: {
makerFee: addDecimal(makerFee, market.decimalPlaces),
liquidityFee: addDecimal(liquidityFee, market.decimalPlaces),
infrastructureFee: addDecimal(infrastructureFee, market.decimalPlaces),
makerFee,
liquidityFee,
infrastructureFee,
},
};
}

49
libs/market-info/src/components/fees-breakdown/fees-breakdown.tsx
View File

@ -1,5 +1,9 @@
import { totalFeesPercentage } from '@vegaprotocol/market-list';
import { formatNumberPercentage, t } from '@vegaprotocol/react-helpers';
import {
addDecimalsNormalizeNumber,
formatNumberPercentage,
t,
} from '@vegaprotocol/react-helpers';
import { Tooltip } from '@vegaprotocol/ui-toolkit';
import BigNumber from 'bignumber.js';
@ -48,6 +52,7 @@ export const FeesBreakdown = ({
fees,
feeFactors,
quoteName,
decimals,
}: {
fees?: {
infrastructureFee: string;
@ -56,53 +61,61 @@ export const FeesBreakdown = ({
};
feeFactors?: Market['fees']['factors'];
quoteName?: string;
decimals: number;
}) => {
if (!fees) return null;
const totalFees = new BigNumber(fees.makerFee)
.plus(fees.infrastructureFee)
.plus(fees.liquidityFee)
.toString();
const formatValue = (value: string | number | null | undefined): string => {
return value && !isNaN(Number(value))
? addDecimalsNormalizeNumber(value, decimals)
: '-';
};
return (
<dl className="grid grid-cols-3 gap-x-3">
<dt>{t('Infrastructure fee')}</dt>
<dl className="grid grid-cols-5">
<dt className="col-span-2">{t('Infrastructure fee')}</dt>
{feeFactors && (
<dd className="text-right">
<dd className="text-right col-span-1">
{formatNumberPercentage(
new BigNumber(feeFactors.infrastructureFee).times(100)
)}
</dd>
)}
<dd className="text-right">
{fees.infrastructureFee} {quoteName || ''}
<dd className="text-right col-span-2">
{formatValue(fees.infrastructureFee)} {quoteName || ''}
</dd>
<dt>{t('Liquidity fee')}</dt>
<dt className="col-span-2">{t('Liquidity fee')}</dt>
{feeFactors && (
<dd className="text-right">
<dd className="text-right col-span-1">
{formatNumberPercentage(
new BigNumber(feeFactors.liquidityFee).times(100)
)}
</dd>
)}
<dd className="text-right">
{fees.liquidityFee} {quoteName || ''}
<dd className="text-right col-span-2">
{formatValue(fees.liquidityFee)} {quoteName || ''}
</dd>
<dt>{t('Maker fee')}</dt>
<dt className="col-span-2">{t('Maker fee')}</dt>
{feeFactors && (
<dd className="text-right">
<dd className="text-right col-span-1">
{formatNumberPercentage(
new BigNumber(feeFactors.makerFee).times(100)
)}
</dd>
)}
<dd className="text-right">
{fees.makerFee} {quoteName || ''}
<dd className="text-right col-span-2">
{formatValue(fees.makerFee)} {quoteName || ''}
</dd>
<dt>{t('Total fees')}</dt>
<dt className="col-span-2">{t('Total fees')}</dt>
{feeFactors && (
<dd className="text-right">{totalFeesPercentage(feeFactors)}</dd>
<dd className="text-right col-span-1">
{totalFeesPercentage(feeFactors)}
</dd>
)}
<dd className="text-right">
{totalFees} {quoteName || ''}
<dd className="text-right col-span-2">
{formatValue(totalFees)} {quoteName || ''}
</dd>
</dl>
);

4
libs/react-helpers/src/lib/format/number.spec.tsx
View File

@ -14,9 +14,9 @@ describe('number react-helpers', () => {
it.each([
{ v: new BigNumber(123000), d: 5, o: '1.23' },
{ v: new BigNumber(123000), d: 3, o: '123' },
{ v: new BigNumber(123000), d: 1, o: '12,300.0' },
{ v: new BigNumber(123000), d: 1, o: '12,300' },
{ v: new BigNumber(123001), d: 2, o: '1,230.01' },
{ v: new BigNumber(123001000), d: 2, o: '1,230,010.00' },
{ v: new BigNumber(123001000), d: 2, o: '1,230,010' },
])(
'formats with addDecimalsNormalizeNumber given number correctly',
({ v, d, o }) => {

18
libs/react-helpers/src/lib/format/number.tsx
View File

@ -49,6 +49,15 @@ export const getNumberFormat = memoize((digits: number) => {
});
});
export const getMaximumDigitsNumberFormat = memoize((digits: number) => {
if (isNil(digits) || digits < 0) {
return new Intl.NumberFormat(getUserLocale());
}
return new Intl.NumberFormat(getUserLocale(), {
maximumFractionDigits: Math.min(Math.max(0, digits), MAX_FRACTION_DIGITS),
});
});
export const getDecimalSeparator = memoize(
() =>
getNumberFormat(1)
@ -75,13 +84,10 @@ export const normalizeFormatNumber = (
rawValue: string | number | BigNumber,
formatDecimals = 0
): string => {
const numberToFormat = getNumberFormat(formatDecimals).format(
Number(rawValue)
const numberToFormat = getMaximumDigitsNumberFormat(formatDecimals).format(
new BigNumber(rawValue).toNumber()
);
// Multiplying by 1 safely removes the insignificant trailing zeros from the formatted number
return !isNaN(Number(numberToFormat))
? (Number(numberToFormat) * 1).toString()
: numberToFormat;
return numberToFormat;
};
export const addDecimalsFormatNumber = (