From 938861c12ec3f90f57b225464a8569f9e399688a Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Thu, 26 Feb 2026 16:00:50 +0700
Subject: [PATCH] Move USD total to its own line and add etherscan link on
 address page

The address now sits on its own line with no other elements beside it,
followed by an etherscan external link icon. The USD total value moves
to a separate line below.
---
 src/popup/index.html             | 17 ++++++++--------
 src/popup/views/addressDetail.js | 33 +++++++++++++++++---------------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index dfb693e..970870f 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -230,19 +230,18 @@
                     class="font-bold mb-1 hidden flex items-center"
                 ></div>
                 <div
-                    class="flex text-xs mb-3 cursor-pointer items-center"
+                    class="text-xs mb-1 cursor-pointer break-all"
                     title="Click to copy"
+                    id="address-line"
                 >
                     <span id="address-dot"></span>
-                    <span
-                        id="address-full"
-                        style="width: 40ch; max-width: 100%"
-                    ></span>
-                    <span
-                        id="address-usd-total"
-                        class="text-right text-muted flex-1"
-                    ></span>
+                    <span id="address-full"></span>
+                    <span id="address-etherscan-link"></span>
                 </div>
+                <div
+                    id="address-usd-total"
+                    class="text-xs text-muted mb-3"
+                ></div>
                 <!-- balances -->
                 <div class="border-b border-border-light pb-2 mb-2">
                     <div id="address-balances"></div>
diff --git a/src/popup/views/addressDetail.js b/src/popup/views/addressDetail.js
index 83589ff..8cb3a03 100644
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -19,6 +19,21 @@ const { updateSendBalance, renderSendTokenSelect } = require("./send");
 const { log } = require("../../shared/log");
 const QRCode = require("qrcode");
 
+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 etherscanAddressLink(address) {
+    return `https://etherscan.io/address/${address}`;
+}
+
+function etherscanTxLink(hash) {
+    return `https://etherscan.io/tx/${hash}`;
+}
+
 function show() {
     const wallet = state.wallets[state.selectedWallet];
     const addr = wallet.addresses[state.selectedAddress];
@@ -29,6 +44,9 @@ function show() {
     $("address-dot").innerHTML = addressDotHtml(addr.address);
     $("address-full").dataset.full = addr.address;
     $("address-full").textContent = addr.address;
+    const addrLink = etherscanAddressLink(addr.address);
+    $("address-etherscan-link").innerHTML =
+        `<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
     $("address-usd-total").textContent = formatUsd(getAddressValueUsd(addr));
     const ensEl = $("address-ens");
     if (addr.ensName) {
@@ -178,21 +196,6 @@ function renderTransactions(txs) {
     });
 }
 
-function etherscanAddressLink(address) {
-    return `https://etherscan.io/address/${address}`;
-}
-
-function etherscanTxLink(hash) {
-    return `https://etherscan.io/tx/${hash}`;
-}
-
-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 copyableHtml(text, extraClass) {
     const cls =
         "underline decoration-dashed cursor-pointer" +