@rubanrubi/hardhat-dashboard 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -0,0 +1,50 @@
+# Changelog
+
+All notable changes to `@rubanrubi/hardhat-dashboard` are documented here.
+
+---
+
+## [0.2.0] — 2026-03-29
+
+### Added
+
+#### Network names
+- Expanded chain ID → name mapping from 7 to 35+ EVM networks and testnets.
+- Now covers: Ethereum, Sepolia, Goerli, Polygon Mainnet, **Polygon Amoy Testnet**, Polygon Mumbai, Polygon zkEVM, BNB Smart Chain, Avalanche C-Chain, Avalanche Fuji, Arbitrum One, Arbitrum Sepolia, Optimism Mainnet, Optimism Sepolia, Base Mainnet, Base Sepolia, zkSync Era, Linea, Scroll, Fantom Opera, Gnosis Chain, Celo, Blast, Mantle, Moonbeam, Moonriver, Moonbase Alpha, Metis Andromeda, Cronos, Hardhat Local, Anvil Local, and more.
+- Each chain displays its correct **native currency symbol** (ETH, POL, BNB, AVAX, FTM, xDAI, CELO, GLMR, MOVR, CRO) so balance values are labelled accurately.
+
+#### Wallet details panel
+- The wallet badge now shows: network name with a live green indicator dot, shortened address (`0x1234…5678`), a **Copy** button that writes the full address to the clipboard (shows `✓` for 2 s as feedback), and the current native token balance.
+- Balance is fetched live via `eth_getBalance` on connect and re-fetched whenever the account or chain changes.
+- The **Balance** metric in the status strip replaces the redundant "Wallet" name field.
+
+#### Human-readable transaction display
+- `eth_sendTransaction` cards now show a structured summary: **From**, **To** (shortened), and **Value** in ETH rather than raw hex.
+- Transactions with no `to` address display a **Contract Deployment** badge and read *Deploy `<ContractName>`* when the ABI is available.
+- Decoded call section shows `ContractName.functionName(…)` with the full signature and each argument on its own line.
+- When a function selector is recognised but no ABI match is found, an "Unknown function — selector: `0x…`" warning is shown instead of silently hiding the call.
+- **`personal_sign`** cards decode the hex message to UTF-8 and display it as plain text.
+- **`eth_sign`** cards show the raw message hash.
+- **`eth_signTypedData*`** cards parse the EIP-712 payload and display the **Domain** and **Message** fields as formatted JSON, so users can read what they are signing before confirming.
+- Raw hex calldata is no longer shown in pending request cards.
+
+#### Activity / Tx History filtering
+- The **Tx History** panel now shows only signing and deployment events (`eth_sendTransaction`, `eth_sign`, `personal_sign`, `eth_signTypedData*`), filtering out read-only `eth_call` passthroughs that were adding noise.
+- Confirmed transactions display the truncated **tx hash** when available.
+- Failed/rejected entries show the human-readable **error message** instead of a raw JSON error object.
+
+### Changed
+- `WalletBadge` component refactored to a multi-line detail panel; the old single-line pill is preserved for disconnected/unavailable states.
+- Status strip "Wallet" metric renamed to **Balance** and now reflects live on-chain balance.
+- History entries show `→` between queued and completed timestamps for clarity.
+- Method names in cards use friendly labels (*Send Transaction*, *Sign Message*, *Sign Typed Data*) instead of raw RPC method strings.
+
+---
+
+## [0.1.1] — 2025-03-28
+
+- Fix: updated README documentation and resolved TypeScript type-stub lint errors.
+
+## [0.1.0] — 2025-03-28
+
+- Initial release: Hardhat plugin that routes JSON-RPC signing through a local browser dashboard backed by MetaMask.

package/dist/types/rpc.d.ts

@@ -59,6 +59,8 @@ export interface WalletConnectionState {
     account?: string;
     chainId?: string;
     networkName?: string;
+    balance?: string;
+    nativeSymbol?: string;
 }
 export interface DashboardSnapshot {
     pending: PendingRpcRequest[];

package/dist/types/rpc.js.map

@@ -1 +1 @@
-{"version":3,"file":"rpc.js","sourceRoot":"","sources":["../../src/types/rpc.ts"],"names":[],"mappings":";;;AAyGa,QAAA,kBAAkB,GAA0B;IACvD,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,UAAU;CACvB,CAAC"}
+{"version":3,"file":"rpc.js","sourceRoot":"","sources":["../../src/types/rpc.ts"],"names":[],"mappings":";;;AA2Ga,QAAA,kBAAkB,GAA0B;IACvD,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,UAAU;CACvB,CAAC"}

package/dist/ui/app.js

@@ -1083,7 +1083,7 @@ var require_react_development = __commonJS({
           }
           return dispatcher.useContext(Context);
         }
-        function useState2(initialState) {
+        function useState3(initialState) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useState(initialState);
         }
@@ -1886,7 +1886,7 @@ var require_react_development = __commonJS({
         exports.useMemo = useMemo;
         exports.useReducer = useReducer;
         exports.useRef = useRef2;
-        exports.useState = useState2;
+        exports.useState = useState3;
         exports.useSyncExternalStore = useSyncExternalStore;
         exports.useTransition = useTransition;
         exports.version = ReactVersion;
@@ -24486,7 +24486,7 @@ var require_jsx_runtime = __commonJS({
 });
 
 // src/ui/app.tsx
-var import_react = __toESM(require_react());
+var import_react2 = __toESM(require_react());
 var import_client = __toESM(require_client());
 
 // src/types/rpc.ts
@@ -24506,8 +24506,98 @@ function formatTimestamp(value) {
     second: "2-digit"
   });
 }
-function formatParams(params) {
-  return JSON.stringify(params ?? [], null, 2);
+function shortenAddress(addr) {
+  return `${addr.slice(0, 8)}...${addr.slice(-6)}`;
+}
+function formatWeiValue(hex) {
+  try {
+    const wei = BigInt(hex);
+    if (wei === 0n) return "";
+    const eth = Number(wei) / 1e18;
+    return `${eth.toFixed(6)} ETH`;
+  } catch {
+    return hex;
+  }
+}
+function hexToUtf8(hex) {
+  try {
+    const bytes = (hex.startsWith("0x") ? hex.slice(2) : hex).match(/.{2}/g) ?? [];
+    const decoded = bytes.map((b) => String.fromCharCode(parseInt(b, 16))).join("");
+    return decoded.trim() || hex;
+  } catch {
+    return hex;
+  }
+}
+function extractTxFields(request) {
+  if (request.method !== "eth_sendTransaction") return null;
+  const params = request.params;
+  const first = Array.isArray(params) ? params[0] : params;
+  if (!first || typeof first !== "object") return null;
+  const tx = first;
+  const to = typeof tx.to === "string" && tx.to.length > 2 ? tx.to : void 0;
+  const from = typeof tx.from === "string" ? tx.from : void 0;
+  const rawValue = typeof tx.value === "string" ? tx.value : void 0;
+  const value = rawValue && rawValue !== "0x0" && rawValue !== "0x00" && rawValue !== "0x" ? formatWeiValue(rawValue) : void 0;
+  return { from, to, value: value || void 0, isDeployment: !to };
+}
+function getMethodLabel(method) {
+  switch (method) {
+    case "eth_sendTransaction":
+      return "Send Transaction";
+    case "eth_sign":
+      return "Sign Message";
+    case "personal_sign":
+      return "Sign Message";
+    case "eth_signTypedData":
+    case "eth_signTypedData_v1":
+    case "eth_signTypedData_v3":
+    case "eth_signTypedData_v4":
+      return "Sign Typed Data";
+    default:
+      return method;
+  }
+}
+function SigningMessageView({ request }) {
+  const params = Array.isArray(request.params) ? request.params : [];
+  if (request.method === "personal_sign") {
+    const raw = typeof params[0] === "string" ? params[0] : "";
+    const message = raw.startsWith("0x") ? hexToUtf8(raw) : raw;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tx-message-box", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tx-field-label", children: "Message" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tx-message-content", children: message || raw })
+    ] });
+  }
+  if (request.method === "eth_sign") {
+    const raw = typeof params[1] === "string" ? params[1] : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tx-message-box", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tx-field-label", children: "Message hash" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tx-message-content mono", children: raw })
+    ] });
+  }
+  if (request.method.startsWith("eth_signTypedData")) {
+    const rawData = typeof params[1] === "string" ? params[1] : JSON.stringify(params[1]);
+    try {
+      const parsed = typeof rawData === "string" ? JSON.parse(rawData) : rawData;
+      const domain = parsed?.domain;
+      const message = parsed?.message;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tx-message-box", children: [
+        domain ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tx-typed-section", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tx-field-label", children: "Domain" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "tx-typed-pre", children: JSON.stringify(domain, null, 2) })
+        ] }) : null,
+        message ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tx-typed-section", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tx-field-label", children: "Message" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "tx-typed-pre", children: JSON.stringify(message, null, 2) })
+        ] }) : null
+      ] });
+    } catch {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tx-message-box", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tx-field-label", children: "Typed data" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tx-message-content mono", children: rawData })
+      ] });
+    }
+  }
+  return null;
 }
 function PendingTxCard({
   request,
@@ -24516,26 +24606,63 @@ function PendingTxCard({
   onReject
 }) {
   const actionLabel = request.requiresApproval ? "Confirm" : "Run";
+  const txFields = extractTxFields(request);
+  const isSigningMethod = [
+    "eth_sign",
+    "personal_sign",
+    "eth_signTypedData",
+    "eth_signTypedData_v1",
+    "eth_signTypedData_v3",
+    "eth_signTypedData_v4"
+  ].includes(request.method);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { className: `request-card ${request.status === "processing" ? "processing" : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "request-top", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "method", children: request.method }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "method", children: getMethodLabel(request.method) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "timestamp", children: [
           "Queued at ",
           formatTimestamp(request.createdAt)
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tag-row", children: [
+        txFields?.isDeployment ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tag deploy", children: "Contract Deployment" }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tag", children: request.requiresApproval ? "Approval required" : "Read-only passthrough" }),
         request.status === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tag success", children: "Processing" }) : null
       ] })
     ] }),
-    request.decodedCall ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "decoded-call", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: request.decodedCall.matched ? `${request.decodedCall.contractName ?? "Contract"}.${request.decodedCall.functionName ?? "call"}` : "No ABI decode available" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: request.decodedCall.signature ?? request.decodedCall.selector ?? "Raw transaction payload" }),
-      request.decodedCall.args.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: request.decodedCall.args.map((argument, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: argument }, `${request.queueId}-arg-${index}`)) }) : null
+    txFields ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tx-summary", children: [
+      txFields.isDeployment ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tx-summary-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tx-field-label", children: "Action" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tx-field-value", children: request.decodedCall?.contractName ? `Deploy ${request.decodedCall.contractName}` : "Deploy new contract" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tx-summary-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tx-field-label", children: "To" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tx-field-value mono", children: txFields.to ? shortenAddress(txFields.to) : "\u2014" })
+      ] }),
+      txFields.from ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tx-summary-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tx-field-label", children: "From" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tx-field-value mono", children: shortenAddress(txFields.from) })
+      ] }) : null,
+      txFields.value ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tx-summary-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tx-field-label", children: "Value" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tx-field-value value-accent", children: txFields.value })
+      ] }) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: formatParams(request.params) }),
+    request.decodedCall?.matched ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "decoded-call", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+        request.decodedCall.contractName ?? "Contract",
+        ".",
+        request.decodedCall.functionName ?? "call"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "decoded-sig", children: request.decodedCall.signature }),
+      request.decodedCall.args.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "decoded-args", children: request.decodedCall.args.map((argument, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: argument }, `${request.queueId}-arg-${index}`)) }) : null
+    ] }) : request.decodedCall && !request.decodedCall.matched && request.decodedCall.selector ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "decoded-call unmatched", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Unknown function" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "decoded-sig", children: [
+        "Selector: ",
+        request.decodedCall.selector
+      ] })
+    ] }) : null,
+    isSigningMethod ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SigningMessageView, { request }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "button-row", style: { marginTop: 14 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "button-primary", disabled: busy, onClick: () => onConfirm(request), children: busy ? "Waiting for wallet..." : actionLabel }),
       request.requiresApproval ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "button-danger", disabled: busy, onClick: () => onReject(request), children: "Reject" }) : null
@@ -24545,6 +24672,15 @@ function PendingTxCard({
 
 // src/ui/components/TxHistory.tsx
 var import_jsx_runtime2 = __toESM(require_jsx_runtime());
+var DEPLOYMENT_METHODS = /* @__PURE__ */ new Set([
+  "eth_sendTransaction",
+  "eth_sign",
+  "personal_sign",
+  "eth_signTypedData",
+  "eth_signTypedData_v1",
+  "eth_signTypedData_v3",
+  "eth_signTypedData_v4"
+]);
 function formatTimestamp2(value) {
   return new Date(value).toLocaleTimeString([], {
     hour: "2-digit",
@@ -24555,41 +24691,98 @@ function formatTimestamp2(value) {
 function getStatusClass(status) {
   return status === "confirmed" ? "success" : "error";
 }
-function formatValue(value) {
-  return JSON.stringify(value ?? null, null, 2);
+function getMethodLabel2(method) {
+  switch (method) {
+    case "eth_sendTransaction":
+      return "Send Transaction";
+    case "eth_sign":
+      return "Sign Message";
+    case "personal_sign":
+      return "Sign Message";
+    case "eth_signTypedData":
+    case "eth_signTypedData_v1":
+    case "eth_signTypedData_v3":
+    case "eth_signTypedData_v4":
+      return "Sign Typed Data";
+    default:
+      return method;
+  }
+}
+function getActionSummary(entry) {
+  if (entry.decodedCall?.matched) {
+    const name = entry.decodedCall.contractName ?? "Contract";
+    const fn = entry.decodedCall.functionName ?? "call";
+    return `${name}.${fn}`;
+  }
+  if (entry.method === "eth_sendTransaction") {
+    const params = entry;
+    const first = Array.isArray(params) ? params[0] : void 0;
+    const tx = first && typeof first === "object" ? first : void 0;
+    const hasTo = tx && typeof tx.to === "string" && tx.to.length > 2;
+    return hasTo ? "Contract interaction" : "Contract deployment";
+  }
+  return "";
+}
+function getTxHash(entry) {
+  if (typeof entry.result === "string" && entry.result.startsWith("0x") && entry.result.length === 66) {
+    return entry.result;
+  }
+  return void 0;
 }
 function TxHistory({ entries }) {
-  if (!entries.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "empty-state", children: "Completed and rejected requests will appear here during this session." });
+  const relevant = entries.filter((e) => DEPLOYMENT_METHODS.has(e.method));
+  if (!relevant.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "empty-state", children: "Confirmed transactions and signing events will appear here during this session." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card-list", children: entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("article", { className: "history-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "history-top", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "method", children: entry.method }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "timestamp", children: [
-          formatTimestamp2(entry.createdAt),
-          " to ",
-          formatTimestamp2(entry.completedAt)
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `tag ${getStatusClass(entry.status)}`, children: entry.status })
-    ] }),
-    entry.decodedCall?.matched ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: "decoded-call", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { children: [
-        entry.decodedCall.contractName,
-        ".",
-        entry.decodedCall.functionName
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card-list", children: relevant.map((entry) => {
+    const actionSummary = getActionSummary(entry);
+    const txHash = getTxHash(entry);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("article", { className: "history-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "history-top", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "method", children: getMethodLabel2(entry.method) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "timestamp", children: [
+            formatTimestamp2(entry.createdAt),
+            " \u2192 ",
+            formatTimestamp2(entry.completedAt)
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `tag ${getStatusClass(entry.status)}`, children: entry.status })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: entry.decodedCall.signature })
-    ] }) : null,
-    entry.result !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { children: formatValue(entry.result) }) : null,
-    entry.error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { children: formatValue(entry.error) }) : null
-  ] }, entry.queueId)) });
+      actionSummary ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "history-action", children: actionSummary }) : null,
+      entry.decodedCall?.matched ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: "decoded-call", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { children: [
+          entry.decodedCall.contractName,
+          ".",
+          entry.decodedCall.functionName
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "decoded-sig", children: entry.decodedCall.signature })
+      ] }) : null,
+      txHash ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "history-hash", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "tx-field-label", children: "Tx hash" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "history-hash-value mono", children: [
+          txHash.slice(0, 18),
+          "...",
+          txHash.slice(-8)
+        ] })
+      ] }) : null,
+      entry.error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "history-error", children: entry.error.message }) : null
+    ] }, entry.queueId);
+  }) });
 }
 
 // src/ui/components/WalletBadge.tsx
+var import_react = __toESM(require_react());
 var import_jsx_runtime3 = __toESM(require_jsx_runtime());
 function WalletBadge({ wallet }) {
+  const [copied, setCopied] = (0, import_react.useState)(false);
+  function copyAddress() {
+    if (!wallet.account) return;
+    void navigator.clipboard.writeText(wallet.account).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    });
+  }
   if (!wallet.available) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "network-pill", children: "MetaMask not detected" });
   }
@@ -24599,21 +24792,105 @@ function WalletBadge({ wallet }) {
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: wallet.locked ? "Locked or not connected" : "Waiting for account access" })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "network-pill", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: wallet.networkName ?? wallet.chainId ?? "Connected" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: wallet.account ? `${wallet.account.slice(0, 6)}...${wallet.account.slice(-4)}` : "No account" })
+  const shortAddress = wallet.account ? `${wallet.account.slice(0, 6)}...${wallet.account.slice(-4)}` : "No account";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "wallet-detail-pill", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "wallet-network-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "wallet-dot" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { className: "wallet-network-name", children: wallet.networkName ?? wallet.chainId ?? "Connected" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "wallet-account-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "wallet-address", title: wallet.account, children: shortAddress }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "copy-btn", onClick: copyAddress, title: "Copy full address", children: copied ? "\u2713" : "Copy" })
+    ] }),
+    wallet.balance ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "wallet-balance", children: wallet.balance }) : null
   ] });
 }
 
 // src/ui/wallet.ts
 var CHAIN_NAMES = {
+  // Ethereum
   "0x1": "Ethereum Mainnet",
-  "0xaa36a7": "Sepolia",
-  "0x89": "Polygon",
-  "0x2105": "Base",
+  "0xaa36a7": "Sepolia Testnet",
+  "0x5": "Goerli Testnet",
+  // Polygon
+  "0x89": "Polygon Mainnet",
+  "0x13882": "Polygon Amoy Testnet",
+  "0x13881": "Polygon Mumbai Testnet",
+  "0x44d": "Polygon zkEVM",
+  "0x5a2": "Polygon zkEVM Testnet",
+  // BNB Smart Chain
+  "0x38": "BNB Smart Chain",
+  "0x61": "BNB Testnet",
+  // Avalanche
+  "0xa86a": "Avalanche C-Chain",
+  "0xa869": "Avalanche Fuji Testnet",
+  // Arbitrum
   "0xa4b1": "Arbitrum One",
-  "0xa": "Optimism",
-  "0x539": "Hardhat Local"
+  "0x66eee": "Arbitrum Sepolia",
+  "0x66eed": "Arbitrum Goerli",
+  // Optimism
+  "0xa": "Optimism Mainnet",
+  "0xaa37dc": "Optimism Sepolia",
+  "0x1a4": "Optimism Goerli",
+  // Base
+  "0x2105": "Base Mainnet",
+  "0x14a34": "Base Sepolia",
+  // zkSync Era
+  "0x144": "zkSync Era Mainnet",
+  "0x12c": "zkSync Era Sepolia",
+  // Linea
+  "0xe708": "Linea Mainnet",
+  "0xe704": "Linea Goerli",
+  // Scroll
+  "0x82750": "Scroll Mainnet",
+  "0x8274f": "Scroll Sepolia",
+  // Fantom
+  "0xfa": "Fantom Opera",
+  "0xfa2": "Fantom Testnet",
+  // Gnosis
+  "0x64": "Gnosis Chain",
+  "0x27d8": "Chiado Testnet",
+  // Celo
+  "0xa4ec": "Celo Mainnet",
+  "0xaef3": "Celo Alfajores",
+  // Blast
+  "0x13e31": "Blast Mainnet",
+  "0xa0c71fd": "Blast Sepolia",
+  // Mantle
+  "0x1388": "Mantle Mainnet",
+  "0x1389": "Mantle Testnet",
+  // Moonbeam
+  "0x504": "Moonbeam",
+  "0x505": "Moonriver",
+  "0x507": "Moonbase Alpha",
+  // Metis
+  "0x440": "Metis Andromeda",
+  // Cronos
+  "0x19": "Cronos Mainnet",
+  "0x152": "Cronos Testnet",
+  // Local development
+  "0x539": "Hardhat Local (1337)",
+  "0x7a69": "Hardhat / Anvil Local"
+};
+var NATIVE_SYMBOLS = {
+  "0x89": "POL",
+  "0x13882": "POL",
+  "0x13881": "POL",
+  "0x44d": "ETH",
+  "0x38": "BNB",
+  "0x61": "BNB",
+  "0xa86a": "AVAX",
+  "0xa869": "AVAX",
+  "0xfa": "FTM",
+  "0xfa2": "FTM",
+  "0x64": "xDAI",
+  "0x27d8": "xDAI",
+  "0xa4ec": "CELO",
+  "0xaef3": "CELO",
+  "0x504": "GLMR",
+  "0x505": "MOVR",
+  "0x19": "CRO",
+  "0x152": "CRO"
 };
 function getNetworkName(chainId) {
   if (!chainId) {
@@ -24621,6 +24898,21 @@ function getNetworkName(chainId) {
   }
   return CHAIN_NAMES[chainId.toLowerCase()] ?? `Chain ${chainId}`;
 }
+function getNativeSymbol(chainId) {
+  if (!chainId) return "ETH";
+  return NATIVE_SYMBOLS[chainId.toLowerCase()] ?? "ETH";
+}
+function formatBalance(balanceHex, symbol) {
+  try {
+    const wei = BigInt(balanceHex);
+    const ethValue = Number(wei) / 1e18;
+    if (ethValue === 0) return `0 ${symbol}`;
+    if (ethValue < 1e-4) return `< 0.0001 ${symbol}`;
+    return `${ethValue.toFixed(4)} ${symbol}`;
+  } catch {
+    return `\u2014 ${symbol}`;
+  }
+}
 function getEthereumProvider() {
   return window.ethereum;
 }
@@ -24639,6 +24931,20 @@ async function getWalletStatus(provider = getEthereumProvider()) {
   ]);
   const accounts = Array.isArray(accountsResult) ? accountsResult : [];
   const chainId = typeof chainIdResult === "string" ? chainIdResult : void 0;
+  const nativeSymbol = getNativeSymbol(chainId);
+  let balance;
+  if (accounts.length > 0) {
+    try {
+      const balanceHex = await provider.request({
+        method: "eth_getBalance",
+        params: [accounts[0], "latest"]
+      });
+      if (typeof balanceHex === "string") {
+        balance = formatBalance(balanceHex, nativeSymbol);
+      }
+    } catch {
+    }
+  }
   return {
     available: true,
     connected: accounts.length > 0,
@@ -24646,7 +24952,9 @@ async function getWalletStatus(provider = getEthereumProvider()) {
     walletName: provider.isMetaMask ? "MetaMask" : "Browser Wallet",
     account: accounts[0],
     chainId,
-    networkName: getNetworkName(chainId)
+    networkName: getNetworkName(chainId),
+    balance,
+    nativeSymbol
   };
 }
 async function connectWallet(provider = getEthereumProvider()) {
@@ -24731,15 +25039,15 @@ function formatLastUpdated(timestamp) {
   });
 }
 function App() {
-  const [snapshot, setSnapshot] = (0, import_react.useState)(INITIAL_SNAPSHOT);
-  const [wallet, setWallet] = (0, import_react.useState)(EMPTY_WALLET_STATE);
-  const [socketConnected, setSocketConnected] = (0, import_react.useState)(false);
-  const [busyIds, setBusyIds] = (0, import_react.useState)([]);
-  const [errorMessage, setErrorMessage] = (0, import_react.useState)(null);
-  const socketRef = (0, import_react.useRef)(null);
-  const autoRunningIdsRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+  const [snapshot, setSnapshot] = (0, import_react2.useState)(INITIAL_SNAPSHOT);
+  const [wallet, setWallet] = (0, import_react2.useState)(EMPTY_WALLET_STATE);
+  const [socketConnected, setSocketConnected] = (0, import_react2.useState)(false);
+  const [busyIds, setBusyIds] = (0, import_react2.useState)([]);
+  const [errorMessage, setErrorMessage] = (0, import_react2.useState)(null);
+  const socketRef = (0, import_react2.useRef)(null);
+  const autoRunningIdsRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
   const provider = getEthereumProvider();
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const socket = new WebSocket(`${window.location.origin.replace(/^http/, "ws")}/ws`);
     socketRef.current = socket;
     socket.onopen = async () => {
@@ -24769,7 +25077,7 @@ function App() {
       socket.close();
     };
   }, [provider]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const unsubscribe = subscribeToWallet(async () => {
       try {
         const nextWallet = await getWalletStatus(provider);
@@ -24812,7 +25120,7 @@ function App() {
       setBusyIds((current) => current.filter((id) => id !== request.queueId));
     }
   }
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!wallet.connected) {
       return;
     }
@@ -24900,8 +25208,8 @@ function App() {
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: wallet.networkName ?? wallet.chainId ?? "Not connected" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "metric", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "label", children: "Wallet" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: wallet.connected ? wallet.walletName : "Disconnected" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "label", children: "Balance" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: wallet.balance ?? (wallet.connected ? "Fetching\u2026" : "\u2014") })
       ] })
     ] }),
     warnings.length > 0 || errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { children: [