format balances

latticexyz · Sep 3, 2024 · d51bc77 · d51bc77
1 parent fc1e2a5
commit d51bc77
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/explorer/src/components/AccountSelect.tsx b/packages/explorer/src/components/AccountSelect.tsx
@@ -1,6 +1,7 @@
-import { Address, formatEther } from "viem";
+import { Address } from "viem";
 import { useBalance } from "wagmi";
 import { ACCOUNTS } from "../consts";
+import { formatBalance } from "../lib/utils";
 import { useAppStore } from "../store";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/Select";
 import { TruncatedHex } from "./ui/TruncatedHex";
@@ -16,7 +17,7 @@ function AccountSelectItem({ address, name }: { address: Address; name: string }
   return (
     <SelectItem key={address} value={address} className="font-mono">
       {name}
-      {balanceValue !== undefined && ` (${formatEther(balanceValue)} ETH)`}{" "}
+      {balanceValue !== undefined && ` (${formatBalance(balanceValue)} ETH)`}{" "}
       <span className="opacity-70">
         (<TruncatedHex hex={address} />)
       </span>

diff --git a/packages/explorer/src/lib/utils.ts b/packages/explorer/src/lib/utils.ts
@@ -1,3 +1,4 @@
+import { formatEther } from "viem";
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -9,3 +10,9 @@ export function camelCase(str: string) {
   const a = str.toLowerCase().replace(/[-_\s.]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ""));
   return a.substring(0, 1).toLowerCase() + a.substring(1);
 }
+
+export function formatBalance(wei: bigint) {
+  const formatted = formatEther(wei);
+  const magnitude = Math.floor(parseFloat(formatted)).toString().length;
+  return parseFloat(formatted).toLocaleString("en-US", { maximumFractionDigits: Math.max(0, 6 - magnitude) });
+}