From e58f113cda9a90941799a3c481a6916c45e8213d Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Fri, 27 Feb 2026 12:01:34 +0700
Subject: [PATCH] Fix display consistency across all views

Receive view: address now shows color dot and etherscan link,
matching every other address display in the app.

Send view "From": address now includes etherscan link alongside
the existing color dot.

Send view "What to send" (ERC-20 from token view): shows token
symbol as bold heading, then full contract address below with
color dot, copy-on-click, and etherscan link.

Approval views: tx approval From/To addresses now show color
dots and etherscan links instead of bare text. Site approval
address adds etherscan link. Tx approval value uses 4 decimal
places consistent with all other amount displays.

Home tx list: row padding changed from py-1 to py-2, matching
addressDetail and addressToken transaction lists.
---
 src/popup/index.html             |  9 ++++----
 src/popup/views/addressDetail.js |  5 +++++
 src/popup/views/addressToken.js  | 23 ++++++++++++++++++--
 src/popup/views/approval.js      | 37 +++++++++++++++++++++++++-------
 src/popup/views/home.js          |  7 +++++-
 src/popup/views/send.js          | 25 +++++++++++++++------
 6 files changed, 85 insertions(+), 21 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index 3ca1ed7..c716436 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -552,10 +552,11 @@
                 <div class="flex justify-center mb-3">
                     <canvas id="receive-qr"></canvas>
                 </div>
-                <div
-                    id="receive-address"
-                    class="border border-border p-2 break-all select-all mb-3"
-                ></div>
+                <div class="border border-border p-2 break-all mb-3 text-xs">
+                    <span id="receive-dot"></span>
+                    <span id="receive-address" class="select-all"></span>
+                    <span id="receive-etherscan-link"></span>
+                </div>
                 <button
                     id="btn-receive-copy"
                     class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
diff --git a/src/popup/views/addressDetail.js b/src/popup/views/addressDetail.js
index 7fd9e64..dfffec8 100644
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -318,7 +318,12 @@ function init(_ctx) {
     $("btn-receive").addEventListener("click", () => {
         const addr = currentAddress();
         const address = addr ? addr.address : "";
+        $("receive-dot").innerHTML = address ? addressDotHtml(address) : "";
         $("receive-address").textContent = address;
+        const link = address ? etherscanAddressLink(address) : "";
+        $("receive-etherscan-link").innerHTML = link
+            ? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
+            : "";
         if (address) {
             QRCode.toCanvas($("receive-qr"), address, {
                 width: 200,
diff --git a/src/popup/views/addressToken.js b/src/popup/views/addressToken.js
index 840c9dd..cba0ee3 100644
--- a/src/popup/views/addressToken.js
+++ b/src/popup/views/addressToken.js
@@ -340,13 +340,27 @@ function init(ctx) {
         }
         // Hide dropdown, show static token display
         $("send-token").classList.add("hidden");
-        let staticHtml = escapeHtml(currentSymbol);
+        let staticHtml = `<div class="font-bold">${escapeHtml(currentSymbol)}</div>`;
         if (tokenId !== "ETH") {
+            const dot = addressDotHtml(tokenId);
             const link = `https://etherscan.io/token/${tokenId}`;
-            staticHtml += ` <a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+            const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+            staticHtml +=
+                `<div class="flex items-center text-xs">${dot}` +
+                `<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(tokenId)}">${escapeHtml(tokenId)}</span>` +
+                extLink +
+                `</div>`;
         }
         $("send-token-static").innerHTML = staticHtml;
         $("send-token-static").classList.remove("hidden");
+        // Attach copy handler for the contract address
+        const copyEl = $("send-token-static").querySelector("[data-copy]");
+        if (copyEl) {
+            copyEl.addEventListener("click", () => {
+                navigator.clipboard.writeText(copyEl.dataset.copy);
+                showFlash("Copied!");
+            });
+        }
         updateSendBalance();
         showView("send");
     });
@@ -354,7 +368,12 @@ function init(ctx) {
     $("btn-address-token-receive").addEventListener("click", () => {
         const addr = currentAddress();
         const address = addr ? addr.address : "";
+        $("receive-dot").innerHTML = address ? addressDotHtml(address) : "";
         $("receive-address").textContent = address;
+        const addrLink = address ? etherscanAddressLink(address) : "";
+        $("receive-etherscan-link").innerHTML = addrLink
+            ? `<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
+            : "";
         if (address) {
             QRCode.toCanvas($("receive-qr"), address, {
                 width: 200,
diff --git a/src/popup/views/approval.js b/src/popup/views/approval.js
index e8c5d32..1226d9a 100644
--- a/src/popup/views/approval.js
+++ b/src/popup/views/approval.js
@@ -1,19 +1,42 @@
-const { $, formatAddressHtml, showView } = require("./helpers");
+const { $, addressDotHtml, escapeHtml, showView } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { formatEther } = require("ethers");
 
 const runtime =
     typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
 
+const EXT_ICON =
+    `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
+    `<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
+    `<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
+    `<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
+    `</svg></span>`;
+
+function approvalAddressHtml(address) {
+    const dot = addressDotHtml(address);
+    const link = `https://etherscan.io/address/${address}`;
+    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+    return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
+}
+
+function formatTxValue(val) {
+    const parts = val.split(".");
+    if (parts.length === 1) return val + ".0000";
+    const dec = (parts[1] + "0000").slice(0, 4);
+    return parts[0] + "." + dec;
+}
+
 let approvalId = null;
 
 function showTxApproval(details) {
     $("approve-tx-hostname").textContent = details.hostname;
-    $("approve-tx-from").textContent = state.activeAddress;
-    $("approve-tx-to").textContent =
-        details.txParams.to || "(contract creation)";
+    $("approve-tx-from").innerHTML = approvalAddressHtml(state.activeAddress);
+    const toAddr = details.txParams.to;
+    $("approve-tx-to").innerHTML = toAddr
+        ? approvalAddressHtml(toAddr)
+        : escapeHtml("(contract creation)");
     $("approve-tx-value").textContent =
-        formatEther(details.txParams.value || "0") + " ETH";
+        formatTxValue(formatEther(details.txParams.value || "0")) + " ETH";
     if (details.txParams.data && details.txParams.data !== "0x") {
         $("approve-tx-data").textContent = details.txParams.data;
         $("approve-tx-data-section").classList.remove("hidden");
@@ -36,10 +59,8 @@ function show(id) {
             return;
         }
         $("approve-hostname").textContent = details.hostname;
-        $("approve-address").innerHTML = formatAddressHtml(
+        $("approve-address").innerHTML = approvalAddressHtml(
             state.activeAddress,
-            null,
-            null,
         );
         $("approve-remember").checked = state.rememberSiteChoice;
     });
diff --git a/src/popup/views/home.js b/src/popup/views/home.js
index b938781..a8267eb 100644
--- a/src/popup/views/home.js
+++ b/src/popup/views/home.js
@@ -145,7 +145,7 @@ function renderHomeTxList(ctx) {
         const opacity = tx.isError ? " opacity:0.5;" : "";
         const ago = escapeHtml(timeAgo(tx.timestamp));
         const iso = escapeHtml(isoDate(tx.timestamp));
-        html += `<div class="home-tx-row py-1 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
+        html += `<div class="home-tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
         html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
         html += `<div class="flex justify-between"><span class="flex items-center">${dot}${addrStr}</span><span>${amountStr}</span></div>`;
         html += `</div>`;
@@ -417,7 +417,12 @@ function init(ctx) {
         }
         const addr = currentAddress();
         const address = addr ? addr.address : "";
+        $("receive-dot").innerHTML = address ? addressDotHtml(address) : "";
         $("receive-address").textContent = address;
+        const link = address ? `https://etherscan.io/address/${address}` : "";
+        $("receive-etherscan-link").innerHTML = link
+            ? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
+            : "";
         if (address) {
             QRCode.toCanvas($("receive-qr"), address, {
                 width: 200,
diff --git a/src/popup/views/send.js b/src/popup/views/send.js
index 0749ceb..7af8e13 100644
--- a/src/popup/views/send.js
+++ b/src/popup/views/send.js
@@ -1,11 +1,18 @@
 // Send view: collect To, Amount, Token. Then go to confirmation.
 
-const { $, showFlash, formatAddressHtml } = require("./helpers");
+const { $, showFlash, addressDotHtml, escapeHtml } = require("./helpers");
 const { state, currentAddress } = require("../../shared/state");
 let ctx;
 const { getProvider } = require("../../shared/balances");
 const { KNOWN_SYMBOLS } = require("../../shared/tokens");
 
+const EXT_ICON =
+    `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
+    `<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
+    `<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
+    `<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
+    `</svg></span>`;
+
 function isSpoofedToken(t) {
     const upper = (t.symbol || "").toUpperCase();
     if (!KNOWN_SYMBOLS.has(upper)) return false;
@@ -34,11 +41,17 @@ function renderSendTokenSelect(addr) {
 function updateSendBalance() {
     const addr = currentAddress();
     if (!addr) return;
-    $("send-from").innerHTML = formatAddressHtml(
-        addr.address,
-        addr.ensName || null,
-        null,
-    );
+    const dot = addressDotHtml(addr.address);
+    const link = `https://etherscan.io/address/${addr.address}`;
+    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+    let fromHtml = "";
+    if (addr.ensName) {
+        fromHtml += `<div class="flex items-center font-bold">${dot}${escapeHtml(addr.ensName)}</div>`;
+        fromHtml += `<div class="break-all">${escapeHtml(addr.address)}${extLink}</div>`;
+    } else {
+        fromHtml += `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(addr.address)}</span>${extLink}</div>`;
+    }
+    $("send-from").innerHTML = fromHtml;
     const token = state.selectedToken || $("send-token").value;
     if (token === "ETH") {
         $("send-balance").textContent =