diff --git a/libs/market-depth/src/lib/orderbook.tsx b/libs/market-depth/src/lib/orderbook.tsx index e5a932bfe..74b39773e 100644 --- a/libs/market-depth/src/lib/orderbook.tsx +++ b/libs/market-depth/src/lib/orderbook.tsx @@ -14,11 +14,11 @@ import { import classNames from 'classnames'; import { - formatNumber, addDecimalsFormatNumber, t, ThemeContext, useResizeObserver, + formatNumberFixed, } from '@vegaprotocol/react-helpers'; import { Schema } from '@vegaprotocol/types'; import { OrderbookRow } from './orderbook-row'; @@ -659,7 +659,7 @@ export const Orderbook = ({ > {resolutions.map((r) => ( ))} diff --git a/libs/positions/src/lib/positions-table.tsx b/libs/positions/src/lib/positions-table.tsx index 3e8b4fc86..86083c141 100644 --- a/libs/positions/src/lib/positions-table.tsx +++ b/libs/positions/src/lib/positions-table.tsx @@ -10,7 +10,6 @@ import type { import { ProgressBarCell } from '@vegaprotocol/ui-toolkit'; import { PriceFlashCell, - addDecimalsFormatNumber, volumePrefix, t, toBigNum, @@ -19,6 +18,7 @@ import { signedNumberCssClass, signedNumberCssClassRules, DateRangeFilter, + addDecimalsFormatNumber, } from '@vegaprotocol/react-helpers'; import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit'; import { AgGridColumn } from 'ag-grid-react'; diff --git a/libs/react-helpers/src/lib/format/number.tsx b/libs/react-helpers/src/lib/format/number.tsx index 839bdacf4..8a2a46eef 100644 --- a/libs/react-helpers/src/lib/format/number.tsx +++ b/libs/react-helpers/src/lib/format/number.tsx @@ -50,6 +50,17 @@ export const getNumberFormat = memoize((digits: number) => { }); }); +// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat +export const getFixedNumberFormat = memoize((digits: number) => { + if (isNil(digits) || digits < 0) { + return new Intl.NumberFormat(getUserLocale()); + } + return new Intl.NumberFormat(getUserLocale(), { + minimumFractionDigits: Math.min(Math.max(0, digits), MAX_FRACTION_DIGITS), + maximumFractionDigits: Math.min(Math.max(0, digits), MAX_FRACTION_DIGITS), + }); +}); + export const getDecimalSeparator = memoize( () => getNumberFormat(1) @@ -68,6 +79,17 @@ export const formatNumber = ( return getNumberFormat(formatDecimals).format(Number(rawValue)); }; +/** formatNumberFixed will format the number with fixed decimals + * @param rawValue - should be a number that is not outside the safe range fail as in https://mikemcl.github.io/bignumber.js/#toN + * @param formatDecimals - number of decimals to use + */ +export const formatNumberFixed = ( + rawValue: string | number | BigNumber, + formatDecimals = 0 +) => { + return getFixedNumberFormat(formatDecimals).format(Number(rawValue)); +}; + export const addDecimalsFormatNumber = ( rawValue: string | number, decimalPlaces: number,