From 4e8376916ed15e85a56770fd29c391d506375179 Mon Sep 17 00:00:00 2001
From: Junichi Sugiura <jun.sugiura.jp@gmail.com>
Date: Thu, 21 Nov 2024 10:36:54 +0100
Subject: [PATCH] Round ERC20 formatted value to 5 decimals (#1050)

---
 .../src/components/DeployController.tsx       |  2 +-
 .../src/components/Funding/Balance.tsx        |  2 +-
 .../src/components/inventory/token/tokens.tsx |  2 +-
 packages/utils/src/currency.ts                | 10 ------
 packages/utils/src/hooks/balance.ts           | 32 +++++++++++--------
 packages/utils/src/hooks/countervalue.ts      |  5 +--
 packages/utils/src/index.ts                   |  1 -
 7 files changed, 24 insertions(+), 30 deletions(-)
 delete mode 100644 packages/utils/src/currency.ts

diff --git a/packages/keychain/src/components/DeployController.tsx b/packages/keychain/src/components/DeployController.tsx
index 238f26ece..ab4a67500 100644
--- a/packages/keychain/src/components/DeployController.tsx
+++ b/packages/keychain/src/components/DeployController.tsx
@@ -68,7 +68,7 @@ export function DeployController({
     contractAddress: ETH_CONTRACT_ADDRESS,
     provider: controller,
     interval: 3000,
-    fixed: 2,
+    decimals: 2,
   });
   useEffect(() => {
     if (!feeEstimate || accountState != "fund" || !eth?.balance.value) return;
diff --git a/packages/keychain/src/components/Funding/Balance.tsx b/packages/keychain/src/components/Funding/Balance.tsx
index 717564121..e0f330255 100644
--- a/packages/keychain/src/components/Funding/Balance.tsx
+++ b/packages/keychain/src/components/Funding/Balance.tsx
@@ -27,7 +27,7 @@ export function Balance({ showBalances }: BalanceProps) {
     contractAddress: ETH_CONTRACT_ADDRESS,
     provider: controller,
     interval: 3000,
-    fixed: 2,
+    decimals: 2,
   });
   const { countervalue } = useCountervalue(
     {
diff --git a/packages/profile/src/components/inventory/token/tokens.tsx b/packages/profile/src/components/inventory/token/tokens.tsx
index ee9e44548..62d465120 100644
--- a/packages/profile/src/components/inventory/token/tokens.tsx
+++ b/packages/profile/src/components/inventory/token/tokens.tsx
@@ -74,7 +74,7 @@ function TokenCardContent({
         </div>
 
         {countervalue && (
-          <div className="text-muted-foreground">${countervalue.formatted}</div>
+          <div className="text-muted-foreground">{countervalue.formatted}</div>
         )}
       </div>
     </CardContent>
diff --git a/packages/utils/src/currency.ts b/packages/utils/src/currency.ts
deleted file mode 100644
index 9de9ed9b7..000000000
--- a/packages/utils/src/currency.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export function formatBalance(balance: string, fixed?: number): string {
-  const formattedBalance = parseFloat(balance);
-  if (!fixed) {
-    return formattedBalance.toString();
-  }
-
-  const _fixed = formattedBalance.toFixed(fixed);
-
-  return formattedBalance < parseFloat(_fixed) ? `~${_fixed}` : _fixed;
-}
diff --git a/packages/utils/src/hooks/balance.ts b/packages/utils/src/hooks/balance.ts
index 440e161ea..66f5d3764 100644
--- a/packages/utils/src/hooks/balance.ts
+++ b/packages/utils/src/hooks/balance.ts
@@ -1,23 +1,21 @@
-import { useMemo } from "react";
 import { getChecksumAddress, Provider } from "starknet";
 import useSWR from "swr";
+import { formatEther } from "viem";
 import { ERC20, ERC20Metadata } from "../erc20";
-import { formatBalance } from "../currency";
 import { CreditQuery, useCreditQuery } from "../api/cartridge";
-import { formatEther } from "viem";
 
 export function useERC20Balance({
   address,
   contractAddress,
   provider,
   interval,
-  fixed,
+  decimals = 5,
 }: {
   address: string;
   contractAddress: string | string[];
   provider: Provider;
   interval: number | undefined;
-  fixed?: number;
+  decimals?: number;
 }) {
   const { data: chainId } = useSWR(provider ? "chainId" : null, () =>
     provider?.getChainId(),
@@ -67,15 +65,20 @@ export function useERC20Balance({
           const res = values[i];
           if (res.status === "rejected") return prev;
 
+          const value = res.value;
+          const factor = 10 ** meta.decimals;
+          const adjusted = parseFloat(value.toString()) / factor;
+          // Round and remove insignificant trailing zeros
+          const rounded = parseFloat(adjusted.toFixed(decimals));
+          const formatted =
+            adjusted === rounded ? adjusted.toString() : `~${rounded}`;
+
           return [
             ...prev,
             {
               balance: {
-                value: res.value,
-                formatted: formatBalance(
-                  formatEther(res.value).toString(),
-                  fixed,
-                ),
+                value,
+                formatted,
               },
               meta,
             },
@@ -127,10 +130,11 @@ export function useCreditBalance({
     },
   );
   const value = data?.account?.credits ?? 0n;
-  const formatted = useMemo(
-    () => formatBalance(formatEther(value).toString(), 2),
-    [value],
-  );
+  const adjusted = parseFloat(formatEther(value));
+  // Round and remove insignificant trailing zeros
+  const rounded = parseFloat(adjusted.toFixed(2));
+  const formatted = adjusted === rounded ? `$${adjusted}` : `~$${rounded}`;
+
   return {
     balance: {
       value,
diff --git a/packages/utils/src/hooks/countervalue.ts b/packages/utils/src/hooks/countervalue.ts
index 6988a2fd5..4cfbe5afc 100644
--- a/packages/utils/src/hooks/countervalue.ts
+++ b/packages/utils/src/hooks/countervalue.ts
@@ -1,6 +1,5 @@
 import { useMemo } from "react";
 import { PriceQuery, TokenPair, usePriceQuery } from "../api/cartridge";
-import { formatBalance } from "../currency";
 import { UseQueryOptions } from "react-query";
 
 export function useCountervalue(
@@ -26,7 +25,9 @@ export function useCountervalue(
     }
 
     const value = parseFloat(balance) * parseFloat(data?.price?.[0]?.amount);
-    const formatted = formatBalance(value.toString(), 2);
+    // Round and remove insignificant trailing zeros
+    const rounded = parseFloat(value.toFixed(2));
+    const formatted = value === rounded ? `$${value}` : `~$${rounded}`;
 
     return {
       value,
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index e1fd62185..77829662f 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -1,6 +1,5 @@
 export * from "./account";
 export * from "./color";
-export * from "./currency";
 export * from "./api";
 export * from "./hooks";
 export * from "./iframe";