From 4bfcf17773990368b354cc1b13924e9e149e0561 Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Thu, 26 Feb 2026 12:38:34 +0700
Subject: [PATCH] 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 | 11 +++++++++-
 src/popup/views/helpers.js   | 39 +++++++++++++++++++++++++++---------
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/popup/views/confirmTx.js b/src/popup/views/confirmTx.js
index 7d4f55f..3068e97 100644
--- a/src/popup/views/confirmTx.js
+++ b/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
diff --git a/src/popup/views/helpers.js b/src/popup/views/helpers.js
index 0e0b195..dda007a 100644
--- a/src/popup/views/helpers.js
+++ b/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.
-// 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) {
+// Look up an address across all wallets and return its title
+// (e.g. "Address 1.2") or null if it's not one of ours.
+function addressTitle(address, wallets) {
+    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) {
-        return (
-            `<div class="flex items-center font-bold">${dot}${escapeHtml(ensName)}</div>` +
-            `<div class="break-all">${escapeHtml(displayAddr)}</div>`
-        );
+    if (title || ensName) {
+        let html = "";
+        if (title) {
+            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,
 };