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

* 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

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

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

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

@@ -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)

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

@@ -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);
+    : toBigNum('0', assetDecimals);
-  const margin = toBigNum(estMargin?.margin || 0, 0);
+  const margin = toBigNum(estMargin?.margin || 0, assetDecimals);
   const { id, symbol, decimals } =
     market.tradableInstrument.instrument.product.settlementAsset;
   const balanceString = balance.toString();

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

@@ -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(
+      ? addDecimalsNormalizeNumber(value, assetDecimals)
-          value,
-          market.tradableInstrument.instrument.product.settlementAsset.decimals
-        )
       : '-';
   };
   return [
@@ -136,6 +139,7 @@ export const getFeeDetailsValues = ({
             fees={estMargin?.fees}
             feeFactors={market.fees.factors}
             quoteName={quoteName}
+            decimals={assetDecimals}
           />
         </>
       ),

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

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

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

@@ -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),
+      margin,
-      totalFees: addDecimal(fees, market.decimalPlaces),
+      totalFees: fees,
       fees: {
-        makerFee: addDecimal(makerFee, market.decimalPlaces),
+        makerFee,
-        liquidityFee: addDecimal(liquidityFee, market.decimalPlaces),
+        liquidityFee,
-        infrastructureFee: addDecimal(infrastructureFee, market.decimalPlaces),
+        infrastructureFee,
       },
     };
   }

libs/market-info/src/components/fees-breakdown/fees-breakdown.tsx

@@ -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">
+    <dl className="grid grid-cols-5">
-      <dt>{t('Infrastructure fee')}</dt>
+      <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">
+      <dd className="text-right col-span-2">
-        {fees.infrastructureFee} {quoteName || ''}
+        {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">
+      <dd className="text-right col-span-2">
-        {fees.liquidityFee} {quoteName || ''}
+        {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">
+      <dd className="text-right col-span-2">
-        {fees.makerFee} {quoteName || ''}
+        {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">
+      <dd className="text-right col-span-2">
-        {totalFees} {quoteName || ''}
+        {formatValue(totalFees)} {quoteName || ''}
       </dd>
     </dl>
   );

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

@@ -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 }) => {

libs/react-helpers/src/lib/format/number.tsx

@@ -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(
+  const numberToFormat = getMaximumDigitsNumberFormat(formatDecimals).format(
-    Number(rawValue)
+    new BigNumber(rawValue).toNumber()
   );
-  // Multiplying by 1 safely removes the insignificant trailing zeros from the formatted number
+  return numberToFormat;
-  return !isNaN(Number(numberToFormat))
-    ? (Number(numberToFormat) * 1).toString()
-    : numberToFormat;
 };
 
 export const addDecimalsFormatNumber = (