remove number formatters

lib/formatNumberToMetricPrefix.ts

-export default function formatNumberToMetricPrefix(number: number) {
-  return Intl.NumberFormat('en-US', {
-    notation: 'compact',
-    maximumFractionDigits: 3,
-  }).format(number);
-}

lib/formatters.ts

-export function shortenNumberWithLetter(
-  x: number,
-  params?: {
-    unitSeparator: string;
-  },
-  _options?: Intl.NumberFormatOptions,
-) {
-  const options = _options || { maximumFractionDigits: 2 };
-  const unitSeparator = params?.unitSeparator || '';
-
-  if (x > 1_000_000_000) {
-    return (x / 1_000_000_000).toLocaleString('en', options) + unitSeparator + 'B';
-  }
-
-  if (x > 1_000_000) {
-    return (x / 1_000_000).toLocaleString('en', options) + unitSeparator + 'M';
-  }
-
-  if (x > 1_000) {
-    return (x / 1_000).toLocaleString('en', options) + unitSeparator + 'K';
-  }
-
-  return x.toLocaleString('en', options);
-}

ui/home/indicators/utils/indicators.tsx

@@ -6,14 +6,13 @@ import type { TChainIndicator } from '../types';
 import appConfig from 'configs/app/config';
 import globeIcon from 'icons/globe.svg';
 import txIcon from 'icons/transactions.svg';
-import { shortenNumberWithLetter } from 'lib/formatters';
 import { sortByDateDesc } from 'ui/shared/chart/utils/sorts';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
   id: 'daily_txs',
   title: 'Daily transactions',
-  value: (stats) => shortenNumberWithLetter(Number(stats.transactions_today), undefined, { maximumFractionDigits: 2 }),
+  value: (stats) => Number(stats.transactions_today).toLocaleString('en', { maximumFractionDigits: 2, notation: 'compact' }),
   icon: <Icon as={ txIcon } boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
   hint: `The total daily number of transactions on the blockchain for the last month.`,
   api: {
@@ -23,7 +22,7 @@ const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
         .map((item) => ({ date: new Date(item.date), value: item.tx_count }))
         .sort(sortByDateDesc),
       name: 'Tx/day',
-      valueFormatter: (x: number) => shortenNumberWithLetter(x, undefined, { maximumFractionDigits: 2 }),
+      valueFormatter: (x: number) => x.toLocaleString('en', { maximumFractionDigits: 2, notation: 'compact' }),
     } ]),
   },
 };
@@ -49,7 +48,7 @@ const coinPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
 const marketPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
   id: 'market_cup',
   title: 'Market cap',
-  value: (stats) => '$' + shortenNumberWithLetter(Number(stats.market_cap), undefined, { maximumFractionDigits: 0 }),
+  value: (stats) => '$' + Number(stats.market_cap).toLocaleString('en', { maximumFractionDigits: 0, notation: 'compact' }),
   icon: <Icon as={ globeIcon } boxSize={ 6 } bgColor="#6A5DCC" borderRadius="base" color="white"/>,
   // eslint-disable-next-line max-len
   hint: 'The total market value of a cryptocurrency\'s circulating supply. It is analogous to the free-float capitalization in the stock market. Market Cap = Current Price x Circulating Supply.',
@@ -60,7 +59,7 @@ const marketPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
         .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) * Number(response.available_supply) }))
         .sort(sortByDateDesc),
       name: 'Market cap',
-      valueFormatter: (x: number) => '$' + shortenNumberWithLetter(x, undefined, { maximumFractionDigits: 0 }),
+      valueFormatter: (x: number) => '$' + x.toLocaleString('en', { maximumFractionDigits: 0 }),
     } ]),
   },
 };

ui/shared/chart/useTimeChartController.tsx

@@ -4,7 +4,6 @@ import { useMemo } from 'react';
 import type { TimeChartData } from 'ui/shared/chart/types';
 
 import { WEEK, MONTH, YEAR } from 'lib/consts';
-import formatNumberToMetricPrefix from 'lib/formatNumberToMetricPrefix';
 
 interface Props {
   data: TimeChartData;
@@ -73,7 +72,7 @@ export default function useTimeChartController({ data, width, height }: Props) {
     return format(d as Date);
   };
 
-  const yTickFormat = () => (d: d3.AxisDomain) => formatNumberToMetricPrefix(Number(d));
+  const yTickFormat = () => (d: d3.AxisDomain) => Number(d).toLocaleString('en', { maximumFractionDigits: 3, notation: 'compact' });
 
   return {
     xTickFormat,

ui/shared/forms/FileSnippet.tsx

@@ -7,7 +7,6 @@ import placeholderIcon from 'icons/files/placeholder.svg';
 import solIcon from 'icons/files/sol.svg';
 import yulIcon from 'icons/files/yul.svg';
 import infoIcon from 'icons/info.svg';
-import { shortenNumberWithLetter } from 'lib/formatters';
 
 const FILE_ICONS: Record<string, React.FunctionComponent<React.SVGAttributes<SVGElement>>> = {
   '.json': jsonIcon,
@@ -101,7 +100,9 @@ const FileSnippet = ({ file, className, index, onRemove, isDisabled, error }: Pr
             alignSelf="flex-start"
           />
         </Flex>
-        <Text variant="secondary" mt={ 1 }>{ shortenNumberWithLetter(file.size) }B</Text>
+        <Text variant="secondary" mt={ 1 }>
+          { file.size.toLocaleString('en', { notation: 'compact', maximumFractionDigits: 2, unit: 'byte', unitDisplay: 'narrow', style: 'unit' }) }
+        </Text>
       </Box>
     </Flex>
   );

ui/stats/NumberWidgetsList.tsx

@@ -2,7 +2,6 @@ import { Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import formatNumberToMetricPrefix from 'lib/formatNumberToMetricPrefix';
 
 import DataFetchAlert from '../shared/DataFetchAlert';
 import NumberWidget from './NumberWidget';
@@ -32,7 +31,7 @@ const NumberWidgetsList = () => {
             <NumberWidget
               key={ id }
               label={ title }
-              value={ `${ formatNumberToMetricPrefix(Number(value)) } ${ units ? units : '' }` }
+              value={ `${ Number(value).toLocaleString('en', { maximumFractionDigits: 3, notation: 'compact' }) } ${ units ? units : '' }` }
             />
           );
         }) }