amounts formatter

lib/formatters.ts

@@ -0,0 +1,24 @@
+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

@@ -7,6 +7,7 @@ import { QueryKeys } from 'types/client/queries';
 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';
 const COLOR = '#439AE2';
 
@@ -25,7 +26,7 @@ const dailyTxsIndicator: TChainIndicator<QueryKeys.chartsTxs> = {
         .sort(sortByDateDesc),
       name: 'Tx/day',
       color: COLOR,
-      valueFormatter: (x) => x.toString(),
+      valueFormatter: (x) => '$' + shortenNumberWithLetter(x),
     } ]),
   },
 };