From f69ce7f9d2cfa56df7d9d4ce1b8936756b7b9edf Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Thu, 26 Feb 2026 16:33:42 +0700
Subject: [PATCH] Restore color dots, add blockies above addresses on tx detail
 page

Blockies now appear above the from/to addresses on a separate line,
with color dots restored inline next to the address text. Increased
spacing between transaction detail fields from mb-2 to mb-3.
---
 src/popup/index.html             | 12 ++++++------
 src/popup/views/addressDetail.js | 18 +++++++++++++-----
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index 797dbca..58f95b9 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -653,27 +653,27 @@
                     &lt; Back
                 </button>
                 <h2 class="font-bold mb-2">Transaction</h2>
-                <div class="mb-2">
+                <div class="mb-3">
                     <div class="text-xs text-muted">Status</div>
                     <div id="tx-detail-status" class="text-xs"></div>
                 </div>
-                <div class="mb-2">
+                <div class="mb-3">
                     <div class="text-xs text-muted">Time</div>
                     <div id="tx-detail-time" class="text-xs"></div>
                 </div>
-                <div class="mb-2">
+                <div class="mb-3">
                     <div class="text-xs text-muted">Amount</div>
                     <div id="tx-detail-value" class="text-xs font-bold"></div>
                 </div>
-                <div class="mb-2">
+                <div class="mb-3">
                     <div class="text-xs text-muted">From</div>
                     <div id="tx-detail-from" class="text-xs break-all"></div>
                 </div>
-                <div class="mb-2">
+                <div class="mb-3">
                     <div class="text-xs text-muted">To</div>
                     <div id="tx-detail-to" class="text-xs break-all"></div>
                 </div>
-                <div class="mb-2">
+                <div class="mb-3">
                     <div class="text-xs text-muted">Transaction hash</div>
                     <div id="tx-detail-hash" class="text-xs break-all"></div>
                 </div>
diff --git a/src/popup/views/addressDetail.js b/src/popup/views/addressDetail.js
index 99b9cea..b41d3de 100644
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -221,19 +221,27 @@ function blockieHtml(address) {
 function txDetailAddressHtml(address) {
     const ensName = ensNameMap.get(address) || null;
     const blockie = blockieHtml(address);
+    const dot = addressDotHtml(address);
     const link = etherscanAddressLink(address);
     const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+    let html = `<div class="mb-1">${blockie}</div>`;
     if (ensName) {
-        return (
-            blockie +
+        html +=
+            `<div class="flex items-center">${dot}` +
             copyableHtml(ensName, "") +
             extLink +
+            `</div>` +
             `<div class="break-all">` +
             copyableHtml(address, "break-all") +
-            `</div>`
-        );
+            `</div>`;
+    } else {
+        html +=
+            `<div class="flex items-center">${dot}` +
+            copyableHtml(address, "break-all") +
+            extLink +
+            `</div>`;
     }
-    return blockie + copyableHtml(address, "break-all") + extLink;
+    return html;
 }
 
 function txDetailHashHtml(hash) {