Parallelize address scanning and unify address display formatting

Scanning: check all gap-limit addresses in parallel per batch instead
of sequentially. For a wallet with 1 used address this reduces from
12 sequential RPC round-trips to 1 parallel batch + 1 small follow-up.

Display: add shared formatAddressHtml(address, ensName, maxLen) and
escapeHtml() to helpers.js. Use them in confirm-tx (was missing color
dot entirely) and approval view. Remove duplicate escapeHtml from
addressDetail.js.

src/popup/views/addressDetail.js

@@ -4,6 +4,8 @@ const {
     showFlash,
     balanceLinesForAddress,
     addressDotHtml,
+    escapeHtml,
+    formatAddressHtml,
     truncateMiddle,
 } = require("./helpers");
 const { state, currentAddress } = require("../../shared/state");
@@ -76,12 +78,6 @@ function timeAgo(timestamp) {
     return years + " year" + (years !== 1 ? "s" : "") + " ago";
 }
 
-function escapeHtml(s) {
-    const div = document.createElement("div");
-    div.textContent = s;
-    return div.innerHTML;
-}
-
 let loadedTxs = [];
 
 let ensNameMap = new Map();

src/popup/views/approval.js

@@ -1,4 +1,4 @@
-const { $, addressDotHtml } = require("./helpers");
+const { $, formatAddressHtml } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 
 const runtime =
@@ -14,8 +14,11 @@ function show(id) {
             return;
         }
         $("approve-hostname").textContent = details.hostname;
-        const dot = addressDotHtml(state.activeAddress);
-        $("approve-address").innerHTML = dot + state.activeAddress;
+        $("approve-address").innerHTML = formatAddressHtml(
+            state.activeAddress,
+            null,
+            null,
+        );
         $("approve-remember").checked = state.rememberSiteChoice;
     });
 }

src/popup/views/confirmTx.js

@@ -3,7 +3,13 @@
 // password modal, decrypts secret, signs and broadcasts.
 
 const { parseEther } = require("ethers");
-const { $, showError, hideError, showView } = require("./helpers");
+const {
+    $,
+    showError,
+    hideError,
+    showView,
+    formatAddressHtml,
+} = require("./helpers");
 const { state } = require("../../shared/state");
 const { getSignerForAddress } = require("../../shared/wallet");
 const { decryptWithPassword } = require("../../shared/vault");
@@ -16,16 +22,15 @@ let pendingTx = null;
 function show(txInfo) {
     pendingTx = txInfo;
 
-    $("confirm-from").textContent = txInfo.from;
-    $("confirm-to").textContent = txInfo.to;
+    $("confirm-from").innerHTML = formatAddressHtml(txInfo.from, null, null);
+    $("confirm-to").innerHTML = formatAddressHtml(
+        txInfo.to,
+        txInfo.ensName,
+        null,
+    );
 
-    const ensEl = $("confirm-to-ens");
-    if (txInfo.ensName) {
-        ensEl.textContent = "(" + txInfo.ensName + ")";
-        ensEl.classList.remove("hidden");
-    } else {
-        ensEl.classList.add("hidden");
-    }
+    // Hide the separate ENS element — it's now inline in the address display
+    $("confirm-to-ens").classList.add("hidden");
 
     $("confirm-amount").textContent = txInfo.amount + " " + txInfo.token;
 

src/popup/views/helpers.js

@@ -137,6 +137,27 @@ function addressDotHtml(address) {
     return `<span style="width:8px;height:8px;border-radius:50%;display:inline-block;background:${color};margin-right:4px;vertical-align:middle;flex-shrink:0;"></span>`;
 }
 
+function escapeHtml(s) {
+    const div = document.createElement("div");
+    div.textContent = s;
+    return div.innerHTML;
+}
+
+// Render an address with color dot, optional ENS name, optional truncation.
+// When ensName is provided, shows ENS name (bold) on one line and
+// the address below it. Otherwise shows just the dotted address.
+function formatAddressHtml(address, ensName, maxLen) {
+    const dot = addressDotHtml(address);
+    const displayAddr = maxLen ? truncateMiddle(address, maxLen) : address;
+    if (ensName) {
+        return (
+            `<div class="flex items-center font-bold">${dot}${escapeHtml(ensName)}</div>` +
+            `<div class="break-all">${escapeHtml(displayAddr)}</div>`
+        );
+    }
+    return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(displayAddr)}</span></div>`;
+}
+
 module.exports = {
     $,
     showError,
@@ -146,5 +167,7 @@ module.exports = {
     balanceLinesForAddress,
     addressColor,
     addressDotHtml,
+    escapeHtml,
+    formatAddressHtml,
     truncateMiddle,
 };