Show address titles on transaction confirmation page

Add addressTitle() helper that looks up an address across all wallets
and returns its title (e.g. "Address 1.2"). The confirm page now shows
titles for both sender and receiver when they belong to our wallet.
formatAddressHtml gains an optional title parameter shown above the
full address, alongside any ENS name.

src/popup/views/confirmTx.js

@@ -8,6 +8,7 @@ const {
     showError,
     hideError,
     showView,
+    addressTitle,
     formatAddressHtml,
 } = require("./helpers");
 const { state } = require("../../shared/state");
@@ -22,11 +23,19 @@ let pendingTx = null;
 function show(txInfo) {
     pendingTx = txInfo;
 
-    $("confirm-from").innerHTML = formatAddressHtml(txInfo.from, null, null);
+    const fromTitle = addressTitle(txInfo.from, state.wallets);
+    $("confirm-from").innerHTML = formatAddressHtml(
+        txInfo.from,
+        null,
+        null,
+        fromTitle,
+    );
+    const toTitle = addressTitle(txInfo.to, state.wallets);
     $("confirm-to").innerHTML = formatAddressHtml(
         txInfo.to,
         txInfo.ensName,
         null,
+        toTitle,
     );
 
     // Hide the separate ENS element — it's now inline in the address display

src/popup/views/helpers.js

@@ -143,17 +143,37 @@ function escapeHtml(s) {
     return div.innerHTML;
 }
 
-// Render an address with color dot, optional ENS name, optional truncation.
+// Look up an address across all wallets and return its title
-// When ensName is provided, shows ENS name (bold) on one line and
+// (e.g. "Address 1.2") or null if it's not one of ours.
-// the address below it. Otherwise shows just the dotted address.
+function addressTitle(address, wallets) {
-function formatAddressHtml(address, ensName, maxLen) {
+    const lower = address.toLowerCase();
+    for (let wi = 0; wi < wallets.length; wi++) {
+        const addrs = wallets[wi].addresses;
+        for (let ai = 0; ai < addrs.length; ai++) {
+            if (addrs[ai].address.toLowerCase() === lower) {
+                return "Address " + (wi + 1) + "." + (ai + 1);
+            }
+        }
+    }
+    return null;
+}
+
+// Render an address with color dot, optional ENS name, optional title,
+// and optional truncation. Title and ENS are shown as bold labels above
+// the full address.
+function formatAddressHtml(address, ensName, maxLen, title) {
     const dot = addressDotHtml(address);
     const displayAddr = maxLen ? truncateMiddle(address, maxLen) : address;
-    if (ensName) {
+    if (title || ensName) {
-        return (
+        let html = "";
-            `<div class="flex items-center font-bold">${dot}${escapeHtml(ensName)}</div>` +
+        if (title) {
-            `<div class="break-all">${escapeHtml(displayAddr)}</div>`
+            html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
-        );
+        }
+        if (ensName) {
+            html += `<div class="flex items-center font-bold">${title ? "" : dot}${escapeHtml(ensName)}</div>`;
+        }
+        html += `<div class="break-all">${escapeHtml(displayAddr)}</div>`;
+        return html;
     }
     return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(displayAddr)}</span></div>`;
 }
@@ -168,6 +188,7 @@ module.exports = {
     addressColor,
     addressDotHtml,
     escapeHtml,
+    addressTitle,
     formatAddressHtml,
     truncateMiddle,
 };