From fb9def83ddb128387b70edb6fe88064e234366ce Mon Sep 17 00:00:00 2001
From: Karolis Ramanauskas <hello@karolisram.com>
Date: Tue, 3 Sep 2024 16:55:54 +0300
Subject: [PATCH] style(explorer): format account balances (#3117)

---
 .changeset/brave-houses-obey.md                    | 5 +++++
 packages/explorer/src/components/AccountSelect.tsx | 5 +++--
 packages/explorer/src/lib/utils.ts                 | 7 +++++++
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/brave-houses-obey.md

diff --git a/.changeset/brave-houses-obey.md b/.changeset/brave-houses-obey.md
new file mode 100644
index 0000000000..82148d30ed
--- /dev/null
+++ 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
index 1e51fa87cf..415b4be193 100644
--- 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
index bd104d41ca..4d0663bfbb 100644
--- 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) });
+}