format balances

frontend/package.json

@@ -17,6 +17,7 @@
     "@hookform/resolvers": "3.9.0",
     "@polkadot/api": "14.3.1",
     "@polkadot/react-identicon": "3.11.3",
+    "@polkadot/util": "13.2.3",
     "@tanstack/react-query": "5.61.5",
     "@web3modal/wagmi": "5.1.3",
     "graphql": "16.9.0",

frontend/src/components/formatted-balance/fortmatted-balance.tsx

@@ -1,3 +1,4 @@
+import { formatBalance } from '@polkadot/util';
 import { formatUnits } from 'viem';
 
 import { cx } from '@/utils';
@@ -6,16 +7,6 @@ import { Tooltip } from '../tooltip';
 
 import styles from './fortmatted-balance.module.scss';
 
-// simplest solution without rounding for now
-const withPrecision = (value: string) => {
-  const DIGITS_COUNT = 2;
-  const decimalIndex = value.indexOf('.');
-
-  if (decimalIndex === -1) return value;
-
-  return value.slice(0, decimalIndex + DIGITS_COUNT + 1);
-};
-
 type Props = {
   value: bigint;
   decimals: number;
@@ -25,11 +16,12 @@ type Props = {
 
 function FormattedBalance({ value, decimals, symbol, className }: Props) {
   const formattedValue = formatUnits(value, decimals);
+  const compactBalance = formatBalance(value, { decimals, withUnit: symbol, withZero: false });
 
   return (
     <span className={cx(styles.balance, className)}>
-      {withPrecision(formattedValue)} {symbol}
-      <Tooltip text={formattedValue} />
+      {compactBalance}
+      <Tooltip text={`${formattedValue} ${symbol}`} />
     </span>
   );
 }