From 156e77b5cfcb64cd6577bf4e96bf0e1777802ea2 Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Thu, 26 Feb 2026 16:31:36 +0700
Subject: [PATCH] Show blockie identicons on transaction detail page

Replace color dots with 16px circular blockies next to from and to
addresses on the transaction detail view.
---
 src/popup/views/addressDetail.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/popup/views/addressDetail.js b/src/popup/views/addressDetail.js
index 582f96b..99b9cea 100644
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -213,14 +213,19 @@ function copyableHtml(text, extraClass) {
     return `<span class="${cls}" data-copy="${escapeHtml(text)}">${escapeHtml(text)}</span>`;
 }
 
+function blockieHtml(address) {
+    const src = makeBlockie(address);
+    return `<img src="${src}" width="16" height="16" style="image-rendering:pixelated;border-radius:50%;margin-right:4px;vertical-align:middle;flex-shrink:0;display:inline-block">`;
+}
+
 function txDetailAddressHtml(address) {
     const ensName = ensNameMap.get(address) || null;
-    const dot = addressDotHtml(address);
+    const blockie = blockieHtml(address);
     const link = etherscanAddressLink(address);
     const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
     if (ensName) {
         return (
-            dot +
+            blockie +
             copyableHtml(ensName, "") +
             extLink +
             `<div class="break-all">` +
@@ -228,7 +233,7 @@ function txDetailAddressHtml(address) {
             `</div>`
         );
     }
-    return dot + copyableHtml(address, "break-all") + extLink;
+    return blockie + copyableHtml(address, "break-all") + extLink;
 }
 
 function txDetailHashHtml(hash) {