style(explorer): format account balances (#3117)

latticexyz · Sep 3, 2024 · fb9def8 · fb9def8
1 parent ef6f7c0
commit fb9def8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/.changeset/brave-houses-obey.md b/.changeset/brave-houses-obey.md
@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Format account balances with comma-separated thousands and trimmed decimal places for better readability.
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) });
+}