Round ERC20 formatted value to 5 decimals (#1050)

cartridge-gg · Nov 21, 2024 · 4e83769 · 4e83769
1 parent 61ab589
commit 4e83769
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -1,6 +1,5 @@
 export * from "./account";
 export * from "./color";
-export * from "./currency";
 export * from "./api";
 export * from "./hooks";
 export * from "./iframe";