From 24f04e509a95619bdcb1d5462001e3cb677e3064 Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Thu, 26 Feb 2026 16:49:52 +0700
Subject: [PATCH] Use wallet name in titles, replace hr dividers with grey
 stripe headers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Address titles now use wallet name instead of wallet index (e.g.
"Wallet 1 — Address 2" instead of "Address 1.2"). This applies to
the address detail page title, the home address labels, and the
addressTitle() helper used on confirmation pages.

Section dividers on the home screen are now full-width grey
background stripes instead of horizontal rules, visually breaking
the page into wallet sections and a recent transactions section.
---
 src/popup/index.html             | 10 ++--------
 src/popup/views/addressDetail.js |  2 +-
 src/popup/views/helpers.js       |  2 +-
 src/popup/views/home.js          |  7 ++-----
 4 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index 2e93eab..36841cb 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -218,16 +218,10 @@
                 <div id="wallet-list"></div>
 
                 <!-- recent transactions across all addresses -->
-                <hr
-                    style="
-                        border: none;
-                        border-top: 2px solid currentColor;
-                        margin: 1rem 0;
-                    "
-                />
                 <div>
                     <div
-                        class="font-bold border-b border-border-light pb-1 mb-1"
+                        class="font-bold bg-well py-1 px-2 mb-1"
+                        style="margin-left: -0.5rem; margin-right: -0.5rem"
                     >
                         Recent Transactions
                     </div>
diff --git a/src/popup/views/addressDetail.js b/src/popup/views/addressDetail.js
index 589d165..aa7fe80 100644
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -41,7 +41,7 @@ function show() {
     const wi = state.selectedWallet;
     const ai = state.selectedAddress;
     $("address-title").textContent =
-        wallet.name + " \u2014 Address " + (wi + 1) + "." + (ai + 1);
+        wallet.name + " \u2014 Address " + (ai + 1);
     const blockieEl = $("address-jazzicon");
     blockieEl.innerHTML = "";
     const img = document.createElement("img");
diff --git a/src/popup/views/helpers.js b/src/popup/views/helpers.js
index 47011ac..a2c63ac 100644
--- a/src/popup/views/helpers.js
+++ b/src/popup/views/helpers.js
@@ -159,7 +159,7 @@ function addressTitle(address, wallets) {
         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 wallets[wi].name + " \u2014 Address " + (ai + 1);
             }
         }
     }
diff --git a/src/popup/views/home.js b/src/popup/views/home.js
index 8e373a7..b3613b4 100644
--- a/src/popup/views/home.js
+++ b/src/popup/views/home.js
@@ -251,11 +251,8 @@ function render(ctx) {
 
     let html = "";
     state.wallets.forEach((wallet, wi) => {
-        if (wi > 0) {
-            html += `<hr style="border:none;border-top:2px solid currentColor;margin:1rem 0">`;
-        }
         html += `<div class="mb-3">`;
-        html += `<div class="flex justify-between items-center border-b border-border-light pb-1 mb-1">`;
+        html += `<div class="flex justify-between items-center bg-well py-1 px-2" style="margin:0 -0.5rem">`;
         html += `<span class="font-bold cursor-pointer wallet-name underline decoration-dashed" data-wallet="${wi}">${wallet.name}</span>`;
         if (wallet.type === "hd") {
             html += `<button class="btn-add-address border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs" data-wallet="${wi}" title="Add another address to this wallet">+</button>`;
@@ -268,7 +265,7 @@ function render(ctx) {
             const infoBtn = `<span class="btn-addr-info text-xs cursor-pointer border border-border hover:bg-fg hover:text-bg" style="padding:0" data-wallet="${wi}" data-address="${ai}">[info]</span>`;
             const dot = addressDotHtml(addr.address);
             const titleBold = isActive ? "font-bold" : "";
-            html += `<div class="text-xs ${titleBold}">Address ${wi + 1}.${ai + 1}</div>`;
+            html += `<div class="text-xs ${titleBold}">Address ${ai + 1}</div>`;
             if (addr.ensName) {
                 html += `<div class="text-xs font-bold flex items-center">${dot}${addr.ensName}</div>`;
             }