fix(balances): coinDecimals

front/src/pages/Main/Passport/ui/Balances/Balances.tsx

@@ -4,20 +4,24 @@ import { DenomListKey, configDenom } from "./utils/configDenom";
 import styles from "./Balances.module.scss";
 import TitleItem from "../TitleItem/TitleItem";
 import { formatNumber } from "@/utils/formatNumber";
+import BigNumber from "bignumber.js";
+import { getDisplayAmount } from "@/utils/getDisplayAmount";
 
 function BalancesItem({
   amount,
-  denom,
+  denomValue,
 }: {
   amount?: any;
-  denom: DenomListKey;
+  denomValue: DenomListKey;
 }) {
+  const { denom, coinDecimals, img } = configDenom[denomValue];
+
   return (
     <div className={styles.wrapperItem}>
-      <span className={styles.denom}>{configDenom[denom].denom}</span>
+      <span className={styles.denom}>{denom}</span>
       <div className={styles.amount}>
-        <span>{formatNumber(amount || 0)}</span>
-        <img src={configDenom[denom].img} alt={denom} />
+        <span>{formatNumber(getDisplayAmount(amount || 0, coinDecimals))}</span>
+        <img src={img} alt={denom} />
       </div>
     </div>
   );
@@ -32,7 +36,7 @@ function Balances({ address }: { address: string }) {
 
   const renderItem = Object.keys(Denom).map((key: DenomListKey) => {
     const { amount } = data.find((item) => item.denom === key);
-    return <BalancesItem key={key} denom={key} amount={amount} />;
+    return <BalancesItem key={key} denomValue={key} amount={amount} />;
   });
 
   return (

front/src/utils/getDisplayAmount.ts

@@ -0,0 +1,13 @@
+import BigNumber from "bignumber.js";
+
+export function getDisplayAmount(
+  rawAmount: number | string,
+  precision: number
+): number {
+  return parseFloat(
+    new BigNumber(rawAmount)
+      .shiftedBy(-precision)
+      .dp(precision, BigNumber.ROUND_FLOOR)
+      .toFixed(precision > 0 ? 3 : 0, BigNumber.ROUND_FLOOR)
+  );
+}