fix: decimal precision out of range (#1318)

* fix: fix fraction digits getting out of range

* fix: cumulative volume pos decimal places, number formatting tests and typos

* fix: added braces

* chore: increase request timeout

Co-authored-by: Joe <joe@vega.xyz>

apps/token/src/lib/format-number.spec.ts

@@ -10,7 +10,7 @@ describe('formatNumber and formatNumberPercentage', () => {
     { v: new BigNumber(123), d: undefined, o: '123.00' }, // it default to 2 decimal places
     { v: new BigNumber(30000), d: undefined, o: '30,000.00' },
     { v: new BigNumber(3.000001), d: undefined, o: '3.000001' },
-  ])('formats given number correctly', ({ v, d, o }) => {
+  ])(`formats given number with decimals correctly`, ({ v, d, o }) => {
     expect(formatNumber(v, d)).toStrictEqual(o);
   });
 });

apps/token/src/lib/format-number.ts

@@ -4,6 +4,6 @@ import { formatNumber as format } from '@vegaprotocol/react-helpers';
 export const formatNumber = (value: BigNumber, decimals?: number) => {
   return format(
     value,
-    typeof decimals === 'undefined' ? Math.max(value.dp() || 0, 2) : decimals
+    typeof decimals === 'undefined' ? Math.max(value.dp() ?? 0, 2) : decimals
   );
 };

apps/trading-e2e/cypress.config.js

@@ -30,7 +30,7 @@ module.exports = defineConfig({
     viewportWidth: 1440,
     viewportHeight: 900,
     responseTimeout: 50000,
-    requestTimeout: 10000,
+    requestTimeout: 20000,
   },
   env: {
     TRADING_TEST_VEGA_WALLET_NAME: 'UI_Trading_Test',

libs/market-depth/src/lib/orderbook-data.ts

@@ -284,7 +284,7 @@ export const updateCompactedRows = (
     );
   });
 
-  // update cummulative ask only below hihgest modified price level
+  // update cumulative ask only below highest modified price level
   if (sellModifiedIndex !== -1) {
     for (let i = Math.min(sellModifiedIndex, data.length - 2); i >= 0; i--) {
       data[i] = {
@@ -296,7 +296,7 @@ export const updateCompactedRows = (
       };
     }
   }
-  // update cummulative bid only above lowest modified price level
+  // update cumulative bid only above lowest modified price level
   if (buyModifiedIndex !== data.length) {
     for (let i = Math.max(buyModifiedIndex, 1), l = data.length; i < l; i++) {
       data[i] = {

libs/market-depth/src/lib/orderbook-row.tsx

@@ -61,6 +61,7 @@ export const OrderbookRow = React.memo(
         />
         <CumulativeVol
           testId={`cumulative-vol-${price}`}
+          positionDecimalPlaces={positionDecimalPlaces}
           bid={cumulativeBid}
           ask={cumulativeAsk}
           relativeAsk={cumulativeRelativeAsk}

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

@@ -1,5 +1,6 @@
 import { BigNumber } from 'bignumber.js';
 import { BigNumber as EthersBigNumber } from 'ethers';
+import isNil from 'lodash/isNil';
 import memoize from 'lodash/memoize';
 import React from 'react';
 import { getUserLocale } from './utils';
@@ -23,6 +24,9 @@ export function addDecimal(
   decimalPrecision = decimals
 ): string {
   if (!decimals) return value.toString();
+  if (!decimalPrecision || decimalPrecision < 0) {
+    return toBigNum(value, decimals).toFixed(0);
+  }
   return toBigNum(value, decimals).toFixed(decimalPrecision);
 }
 
@@ -32,13 +36,15 @@ export function removeDecimal(value: string, decimals: number): string {
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
-export const getNumberFormat = memoize(
-  (digits: number) =>
-    new Intl.NumberFormat(getUserLocale(), {
-      minimumFractionDigits: digits,
-      maximumFractionDigits: digits,
-    })
-);
+export const getNumberFormat = memoize((digits: number) => {
+  if (isNil(digits) || digits < 0) {
+    return new Intl.NumberFormat(getUserLocale());
+  }
+  return new Intl.NumberFormat(getUserLocale(), {
+    minimumFractionDigits: Math.max(0, digits),
+    maximumFractionDigits: Math.max(0, digits),
+  });
+});
 
 export const getDecimalSeparator = memoize(
   () =>

libs/react-helpers/src/lib/grid/cumulative-vol-cell.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ICellRendererParams } from 'ag-grid-community';
 import classNames from 'classnames';
 import { BID_COLOR, ASK_COLOR } from './vol-cell';
+import { addDecimalsFormatNumber } from '../format';
 
 export interface CumulativeVolProps {
   ask?: number;
@@ -11,6 +12,7 @@ export interface CumulativeVolProps {
   indicativeVolume?: string;
   testId?: string;
   className?: string;
+  positionDecimalPlaces: number;
 }
 
 export interface ICumulativeVolCellProps extends ICellRendererParams {
@@ -26,6 +28,7 @@ export const CumulativeVol = React.memo(
     indicativeVolume,
     testId,
     className,
+    positionDecimalPlaces,
   }: CumulativeVolProps) => {
     const askBar = relativeAsk ? (
       <div
@@ -52,19 +55,22 @@ export const CumulativeVol = React.memo(
     ) : null;
 
     const volume = indicativeVolume ? (
-      <span className="relative">({indicativeVolume})</span>
+      <span className="relative">
+        ({addDecimalsFormatNumber(indicativeVolume, positionDecimalPlaces ?? 0)}
+        )
+      </span>
     ) : (
       <span className="relative">
-        {ask ? ask : null}
+        {ask ? addDecimalsFormatNumber(ask, positionDecimalPlaces ?? 0) : null}
         {ask && bid ? '/' : null}
-        {bid ? bid : null}
+        {bid ? addDecimalsFormatNumber(bid, positionDecimalPlaces ?? 0) : null}
       </span>
     );
 
     return (
       <div
         className={classNames('h-full relative', className)}
-        data-testid={testId || 'cummulative-vol'}
+        data-testid={testId || 'cumulative-vol'}
       >
         {askBar}
         {bidBar}