fix: cross-wallet duplicate address detection on import

Previously each import method (mnemonic, private key, xprv) only checked for duplicates among wallets of the same type. Now all three check the derived address against ALL existing wallet addresses regardless of type, and mnemonic/xprv imports also compare xpubs against existing HD/xprv wallets. Closes #111
2026-02-28 16:01:40 -08:00
20 changed files with 437 additions and 468 deletions
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -107,8 +107,7 @@
                    </div>
                    <div
                        id="add-wallet-phrase-warning"
-                        class="text-xs mb-2 border border-border border-dashed p-2"
-                        style="visibility: hidden"
+                        class="text-xs mb-2 border border-border border-dashed p-2 hidden"
                    >
                        Write these words down and keep them safe. Anyone with
                        them can take your funds; if you lose them, your wallet
@@ -185,7 +184,7 @@
                <!-- active address headline -->
                <div
                    id="total-value"
-                    class="text-2xl font-bold min-h-[2rem] text-fg"
+                    class="text-2xl font-bold min-h-[2rem]"
                ></div>
                <div
                    id="total-value-sub"
@@ -376,8 +375,7 @@
                </p>
                <div
                    id="export-privkey-flash"
-                    class="text-xs mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs mb-2 hidden"
                ></div>
                <div id="export-privkey-password-section" class="mb-2">
                    <label class="block mb-1">Password</label>
@@ -581,17 +579,13 @@
                    <div class="text-xs text-muted mb-1">Your balance</div>
                    <div id="confirm-balance" class="text-xs"></div>
                </div>
-                <div id="confirm-fee" class="mb-3" style="visibility: hidden">
+                <div id="confirm-fee" class="mb-3 hidden">
                    <div class="text-xs text-muted mb-1">
                        Estimated network fee
                    </div>
                    <div id="confirm-fee-amount" class="text-xs"></div>
                </div>
-                <div
-                    id="confirm-warnings"
-                    class="mb-2"
-                    style="visibility: hidden"
-                ></div>
+                <div id="confirm-warnings" class="mb-2 hidden"></div>
                <div
                    id="confirm-recipient-warning"
                    class="mb-2"
@@ -607,8 +601,7 @@
                </div>
                <div
                    id="confirm-errors"
-                    class="mb-2 border border-border border-dashed p-2"
-                    style="visibility: hidden; min-height: 1.25rem"
+                    class="mb-2 border border-border border-dashed p-2 hidden"
                ></div>
                <div class="mb-2">
                    <label class="block mb-1 text-xs">Password</label>
@@ -621,7 +614,6 @@
                <div
                    id="confirm-tx-password-error"
                    class="text-xs mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
                ></div>
                <button
                    id="btn-confirm-send"
@@ -736,8 +728,7 @@
                </button>
                <div
                    id="receive-erc20-warning"
-                    class="text-xs border border-border border-dashed p-2 mt-3"
-                    style="visibility: hidden"
+                    class="text-xs border border-border border-dashed p-2 mt-3 hidden"
                ></div>
            </div>

@@ -765,8 +756,7 @@
                </div>
                <div
                    id="add-token-info"
-                    class="text-xs text-muted mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs text-muted mb-2 hidden"
                ></div>
                <div class="mb-2">
                    <label class="block mb-1 text-xs text-muted"
@@ -824,7 +814,7 @@
                <div class="bg-well p-3 mx-1 mb-3">
                    <h3 class="font-bold mb-1">Display</h3>
                    <label
-                        class="text-xs flex items-center gap-1 cursor-pointer mb-2"
+                        class="text-xs flex items-center gap-1 cursor-pointer"
                    >
                        <input
                            type="checkbox"
@@ -832,17 +822,6 @@
                        />
                        Show tracked tokens with zero balance
                    </label>
-                    <div class="text-xs flex items-center gap-1">
-                        <label for="settings-theme">Theme:</label>
-                        <select
-                            id="settings-theme"
-                            class="border border-border p-1 bg-bg text-fg text-xs cursor-pointer"
-                        >
-                            <option value="system">System</option>
-                            <option value="light">Light</option>
-                            <option value="dark">Dark</option>
-                        </select>
-                    </div>
                </div>

                <div class="bg-well p-3 mx-1 mb-3">
@@ -924,12 +903,6 @@
                        />
                        <span class="text-xs text-muted">gwei</span>
                    </div>
-                    <label
-                        class="text-xs flex items-center gap-1 cursor-pointer mb-1"
-                    >
-                        <input type="checkbox" id="settings-utc-timestamps" />
-                        UTC Timestamps
-                    </label>
                </div>

                <div class="bg-well p-3 mx-1 mb-3">
@@ -965,8 +938,7 @@
                </p>
                <div
                    id="delete-wallet-flash"
-                    class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs text-red-500 mb-2 hidden"
                ></div>
                <div class="mb-2">
                    <label class="block mb-1">Password</label>
@@ -1041,8 +1013,7 @@
                    />
                    <div
                        id="settings-addtoken-info"
-                        class="text-xs text-muted mt-1 min-h-[1.25rem]"
-                        style="visibility: hidden"
+                        class="text-xs text-muted mt-1 hidden"
                    ></div>
                    <button
                        id="btn-settings-addtoken-manual"
@@ -1168,8 +1139,7 @@
                </div>
                <div
                    id="approve-tx-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
                ></div>
                <div class="flex justify-between">
                    <button
@@ -1197,10 +1167,8 @@

                <div
                    id="approve-sign-danger-warning"
-                    class="mb-3 p-2 text-xs font-bold"
+                    class="hidden mb-3 p-2 text-xs font-bold"
                    style="
-                        visibility: hidden;
-                        min-height: 1.25rem;
                        background: #fee2e2;
                        color: #991b1b;
                        border: 2px solid #dc2626;
@@ -1237,8 +1205,7 @@
                </div>
                <div
                    id="approve-sign-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem]"
-                    style="visibility: hidden"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
                ></div>
                <div class="flex justify-between">
                    <button
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -6,7 +6,6 @@ const { state, saveState, loadState } = require("../shared/state");
 const { refreshPrices } = require("../shared/prices");
 const { refreshBalances } = require("../shared/balances");
 const { $, showView } = require("./views/helpers");
-const { applyTheme } = require("./theme");

 const home = require("./views/home");
 const welcome = require("./views/welcome");
@@ -177,7 +176,6 @@ async function init() {
    }

    await loadState();
-    applyTheme(state.theme);

    // Auto-default active address
    if (
--- a/src/popup/styles/main.css
+++ b/src/popup/styles/main.css
@@ -15,32 +15,7 @@
    --color-section: #dddddd;
 }

-html.dark {
-    --color-bg: #000000;
-    --color-fg: #ffffff;
-    --color-muted: #aaaaaa;
-    --color-border: #ffffff;
-    --color-border-light: #444444;
-    --color-hover: #222222;
-    --color-well: #1a1a1a;
-    --color-danger-well: #2a0a0a;
-    --color-section: #2a2a2a;
-}
-
 body {
    width: 396px;
    overflow-x: hidden;
 }
-
-/* Copy-flash feedback: inverts colors then fades back */
-.copy-flash-active {
-    background-color: var(--color-fg) !important;
-    color: var(--color-bg) !important;
-    transition: none;
-}
-
-.copy-flash-fade {
-    transition:
-        background-color 225ms ease-out,
-        color 225ms ease-out;
-}
--- a/src/popup/theme.js
+++ b/src/popup/theme.js
@@ -1,33 +0,0 @@
-// Theme management: applies light/dark class to <html> based on preference.
-
-let mediaQuery = null;
-let mediaHandler = null;
-
-function applyTheme(theme) {
-    // Clean up previous system listener
-    if (mediaQuery && mediaHandler) {
-        mediaQuery.removeEventListener("change", mediaHandler);
-        mediaHandler = null;
-    }
-
-    if (theme === "dark") {
-        document.documentElement.classList.add("dark");
-    } else if (theme === "light") {
-        document.documentElement.classList.remove("dark");
-    } else {
-        // system
-        mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-        const update = () => {
-            if (mediaQuery.matches) {
-                document.documentElement.classList.add("dark");
-            } else {
-                document.documentElement.classList.remove("dark");
-            }
-        };
-        mediaHandler = update;
-        mediaQuery.addEventListener("change", update);
-        update();
-    }
-}
-
-module.exports = { applyTheme };
--- a/src/popup/views/addToken.js
+++ b/src/popup/views/addToken.js
@@ -7,8 +7,7 @@ const { log } = require("../../shared/log");

 function show() {
    $("add-token-address").value = "";
-    $("add-token-info").textContent = "";
-    $("add-token-info").style.visibility = "hidden";
+    $("add-token-info").classList.add("hidden");
    const list = $("common-token-list");
    list.innerHTML = getTopTokens(25)
        .map(
@@ -46,7 +45,7 @@ function init(ctx) {
        }
        const infoEl = $("add-token-info");
        infoEl.textContent = "Looking up token...";
-        infoEl.style.visibility = "visible";
+        infoEl.classList.remove("hidden");
        log.debugf("Looking up token contract", contractAddr);
        try {
            const info = await lookupTokenInfo(contractAddr, state.rpcUrl);
@@ -64,8 +63,7 @@ function init(ctx) {
            const detail = e.shortMessage || e.message || String(e);
            log.errorf("Token lookup failed for", contractAddr, detail);
            showFlash(detail);
-            infoEl.textContent = "";
-            infoEl.style.visibility = "hidden";
+            infoEl.classList.add("hidden");
        }
    });

--- a/src/popup/views/addWallet.js
+++ b/src/popup/views/addWallet.js
@@ -11,25 +11,6 @@ const { encryptWithPassword } = require("../../shared/vault");
 const { state, saveState } = require("../../shared/state");
 const { scanForAddresses } = require("../../shared/balances");

-/**
- * Check if an address already exists in ANY wallet (hd, xprv, or key).
- * Returns the wallet object if found, or undefined.
- */
-function findWalletByAddress(addr) {
-    const lower = addr.toLowerCase();
-    return state.wallets.find((w) =>
-        w.addresses.some((a) => a.address.toLowerCase() === lower),
-    );
-}
-
-/**
- * Check if an xpub already exists in any HD-type wallet (hd or xprv).
- * Returns the wallet object if found, or undefined.
- */
-function findWalletByXpub(xpub) {
-    return state.wallets.find((w) => w.xpub && w.xpub === xpub);
-}
-
 let currentMode = "mnemonic";

 const MODES = ["mnemonic", "privkey", "xprv"];
@@ -71,7 +52,7 @@ function show() {
    $("import-xprv-key").value = "";
    $("add-wallet-password").value = "";
    $("add-wallet-password-confirm").value = "";
-    $("add-wallet-phrase-warning").style.visibility = "hidden";
+    $("add-wallet-phrase-warning").classList.add("hidden");
    switchMode("mnemonic");
    showView("add-wallet");
 }
@@ -116,16 +97,24 @@ async function importMnemonic(ctx) {
    const pw = validatePassword();
    if (!pw) return;
    const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic);
-    const xpubDup = findWalletByXpub(xpub);
-    if (xpubDup) {
+    const addrDup = state.wallets.find((w) =>
+        w.addresses.some(
+            (a) => a.address.toLowerCase() === firstAddress.toLowerCase(),
+        ),
+    );
+    if (addrDup) {
        showFlash(
-            "This recovery phrase is already added (" + xpubDup.name + ").",
+            "An address from this phrase already exists in " +
+                addrDup.name +
+                ".",
        );
        return;
    }
-    const addrDup = findWalletByAddress(firstAddress);
-    if (addrDup) {
-        showFlash("Address already exists in wallet (" + addrDup.name + ").");
+    const xpubDup = state.wallets.find(
+        (w) => (w.type === "hd" || w.type === "xprv") && w.xpub === xpub,
+    );
+    if (xpubDup) {
+        showFlash("This recovery phrase matches " + xpubDup.name + ".");
        return;
    }
    const encrypted = await encryptWithPassword(mnemonic, pw);
@@ -181,11 +170,11 @@ async function importPrivateKey(ctx) {
    }
    const pw = validatePassword();
    if (!pw) return;
-    const duplicate = findWalletByAddress(addr);
-    if (duplicate) {
-        showFlash(
-            "This address already exists in wallet (" + duplicate.name + ").",
+    const duplicate = state.wallets.find((w) =>
+        w.addresses.some((a) => a.address.toLowerCase() === addr.toLowerCase()),
    );
+    if (duplicate) {
+        showFlash("This address already exists in " + duplicate.name + ".");
        return;
    }
    const encrypted = await encryptWithPassword(key, pw);
@@ -222,14 +211,22 @@ async function importXprvKey(ctx) {
        return;
    }
    const { xpub, firstAddress } = result;
-    const xpubDup = findWalletByXpub(xpub);
-    if (xpubDup) {
-        showFlash("This key is already added (" + xpubDup.name + ").");
+    const addrDup = state.wallets.find((w) =>
+        w.addresses.some(
+            (a) => a.address.toLowerCase() === firstAddress.toLowerCase(),
+        ),
+    );
+    if (addrDup) {
+        showFlash(
+            "An address from this key already exists in " + addrDup.name + ".",
+        );
        return;
    }
-    const addrDup = findWalletByAddress(firstAddress);
-    if (addrDup) {
-        showFlash("Address already exists in wallet (" + addrDup.name + ").");
+    const xpubDup = state.wallets.find(
+        (w) => (w.type === "hd" || w.type === "xprv") && w.xpub === xpub,
+    );
+    if (xpubDup) {
+        showFlash("This key matches " + xpubDup.name + ".");
        return;
    }
    const pw = validatePassword();
@@ -281,7 +278,7 @@ function init(ctx) {
    // Generate mnemonic
    $("btn-generate-phrase").addEventListener("click", () => {
        $("wallet-mnemonic").value = generateMnemonic();
-        $("add-wallet-phrase-warning").style.visibility = "visible";
+        $("add-wallet-phrase-warning").classList.remove("hidden");
    });

    // Import / confirm
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -2,14 +2,11 @@ const {
    $,
    showView,
    showFlash,
-    flashCopyFeedback,
    balanceLinesForAddress,
    addressDotHtml,
    addressTitle,
    escapeHtml,
    truncateMiddle,
-    renderAddressHtml,
-    attachCopyHandlers,
 } = require("./helpers");
 const { state, currentAddress, saveState } = require("../../shared/state");
 const { formatUsd, getAddressValueUsd } = require("../../shared/prices");
@@ -30,6 +27,17 @@ const { getSignerForAddress } = require("../../shared/wallet");

 let ctx;

+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 show() {
    state.selectedToken = null;
    const wallet = state.wallets[state.selectedWallet];
@@ -47,18 +55,22 @@ function show() {
    img.style.imageRendering = "pixelated";
    img.style.borderRadius = "50%";
    blockieEl.appendChild(img);
-    const addrTitle = addressTitle(addr.address, state.wallets);
-    $("address-line").innerHTML = renderAddressHtml(addr.address, {
-        title: addrTitle,
-        ensName: addr.ensName,
-    });
-    $("address-line").dataset.full = addr.address;
-    attachCopyHandlers($("address-line"));
+    $("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>`;
    const usdTotal = formatUsd(getAddressValueUsd(addr));
    $("address-usd-total").innerHTML = usdTotal || "&nbsp;";
    const ensEl = $("address-ens");
-    // ENS is now shown inside renderAddressHtml, hide the separate element
+    if (addr.ensName) {
+        ensEl.innerHTML =
+            addressDotHtml(addr.address) + escapeHtml(addr.ensName);
+        ensEl.classList.remove("hidden");
+    } else {
        ensEl.classList.add("hidden");
+    }
    $("address-balances").innerHTML = balanceLinesForAddress(
        addr,
        state.trackedTokens,
@@ -82,39 +94,18 @@ function show() {
 function isoDate(timestamp) {
    const d = new Date(timestamp * 1000);
    const pad = (n) => String(n).padStart(2, "0");
-    if (state.utcTimestamps) {
-        return (
-            d.getUTCFullYear() +
-            "-" +
-            pad(d.getUTCMonth() + 1) +
-            "-" +
-            pad(d.getUTCDate()) +
-            "T" +
-            pad(d.getUTCHours()) +
-            ":" +
-            pad(d.getUTCMinutes()) +
-            ":" +
-            pad(d.getUTCSeconds()) +
-            "Z"
-        );
-    }
-    const offsetMin = -d.getTimezoneOffset();
-    const sign = offsetMin >= 0 ? "+" : "-";
-    const absOff = Math.abs(offsetMin);
-    const tzStr = sign + pad(Math.floor(absOff / 60)) + ":" + pad(absOff % 60);
    return (
        d.getFullYear() +
        "-" +
        pad(d.getMonth() + 1) +
        "-" +
        pad(d.getDate()) +
-        "T" +
+        " " +
        pad(d.getHours()) +
        ":" +
        pad(d.getMinutes()) +
        ":" +
-        pad(d.getSeconds()) +
-        tzStr
+        pad(d.getSeconds())
    );
 }

@@ -245,6 +236,13 @@ function renderTransactions(txs) {

 function init(_ctx) {
    ctx = _ctx;
+    $("address-full").addEventListener("click", () => {
+        const addr = $("address-full").dataset.full;
+        if (addr) {
+            navigator.clipboard.writeText(addr);
+            showFlash("Copied!");
+        }
+    });

    $("btn-address-back").addEventListener("click", () => {
        ctx.renderWalletList();
@@ -308,12 +306,12 @@ function init(_ctx) {
        blockieEl.appendChild(bImg);
        $("export-privkey-title").textContent =
            wallet.name + " \u2014 Address " + (state.selectedAddress + 1);
-        const exportAddrContainer = $("export-privkey-dot").parentElement;
-        exportAddrContainer.innerHTML = renderAddressHtml(addr.address);
-        attachCopyHandlers(exportAddrContainer);
+        $("export-privkey-dot").innerHTML = addressDotHtml(addr.address);
+        $("export-privkey-address").textContent = addr.address;
+        $("export-privkey-address").dataset.full = addr.address;
        $("export-privkey-password").value = "";
+        $("export-privkey-flash").classList.add("hidden");
        $("export-privkey-flash").textContent = "";
-        $("export-privkey-flash").style.visibility = "hidden";
        $("export-privkey-password-section").classList.remove("hidden");
        $("export-privkey-result").classList.add("hidden");
        $("export-privkey-value").textContent = "";
@@ -324,7 +322,7 @@ function init(_ctx) {
        const password = $("export-privkey-password").value;
        if (!password) {
            $("export-privkey-flash").textContent = "Password is required.";
-            $("export-privkey-flash").style.visibility = "visible";
+            $("export-privkey-flash").classList.remove("hidden");
            return;
        }
        const btn = $("btn-export-privkey-confirm");
@@ -345,10 +343,10 @@ function init(_ctx) {
            $("export-privkey-password-section").classList.add("hidden");
            $("export-privkey-value").textContent = privateKey;
            $("export-privkey-result").classList.remove("hidden");
-            $("export-privkey-flash").style.visibility = "hidden";
+            $("export-privkey-flash").classList.add("hidden");
        } catch {
            $("export-privkey-flash").textContent = "Wrong password.";
-            $("export-privkey-flash").style.visibility = "visible";
+            $("export-privkey-flash").classList.remove("hidden");
        } finally {
            btn.disabled = false;
            btn.classList.remove("text-muted");
@@ -360,7 +358,14 @@ function init(_ctx) {
        if (key) {
            navigator.clipboard.writeText(key);
            showFlash("Copied!");
-            flashCopyFeedback($("export-privkey-value"));
+        }
+    });
+
+    $("export-privkey-address").addEventListener("click", () => {
+        const full = $("export-privkey-address").dataset.full;
+        if (full) {
+            navigator.clipboard.writeText(full);
+            showFlash("Copied!");
        }
    });

--- a/src/popup/views/addressToken.js
+++ b/src/popup/views/addressToken.js
@@ -5,14 +5,11 @@ const {
    $,
    showView,
    showFlash,
-    flashCopyFeedback,
    addressDotHtml,
    addressTitle,
    escapeHtml,
    truncateMiddle,
    balanceLine,
-    renderAddressHtml,
-    attachCopyHandlers,
 } = require("./helpers");
 const { state, currentAddress, saveState } = require("../../shared/state");
 const { TOKEN_BY_ADDRESS, resolveSymbol } = require("../../shared/tokenList");
@@ -36,42 +33,32 @@ const makeBlockie = require("ethereum-blockies-base64");

 let ctx;

+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 isoDate(timestamp) {
    const d = new Date(timestamp * 1000);
    const pad = (n) => String(n).padStart(2, "0");
-    if (state.utcTimestamps) {
-        return (
-            d.getUTCFullYear() +
-            "-" +
-            pad(d.getUTCMonth() + 1) +
-            "-" +
-            pad(d.getUTCDate()) +
-            "T" +
-            pad(d.getUTCHours()) +
-            ":" +
-            pad(d.getUTCMinutes()) +
-            ":" +
-            pad(d.getUTCSeconds()) +
-            "Z"
-        );
-    }
-    const offsetMin = -d.getTimezoneOffset();
-    const sign = offsetMin >= 0 ? "+" : "-";
-    const absOff = Math.abs(offsetMin);
-    const tzStr = sign + pad(Math.floor(absOff / 60)) + ":" + pad(absOff % 60);
    return (
        d.getFullYear() +
        "-" +
        pad(d.getMonth() + 1) +
        "-" +
        pad(d.getDate()) +
-        "T" +
+        " " +
        pad(d.getHours()) +
        ":" +
        pad(d.getMinutes()) +
        ":" +
-        pad(d.getSeconds()) +
-        tzStr
+        pad(d.getSeconds())
    );
 }

@@ -139,13 +126,12 @@ function show() {
    blockieEl.appendChild(img);

    // Address line
-    const addrTitle = addressTitle(addr.address, state.wallets);
-    $("address-token-line").innerHTML = renderAddressHtml(addr.address, {
-        title: addrTitle,
-        ensName: addr.ensName,
-    });
-    $("address-token-line").dataset.full = addr.address;
-    attachCopyHandlers($("address-token-line"));
+    $("address-token-dot").innerHTML = addressDotHtml(addr.address);
+    $("address-token-full").dataset.full = addr.address;
+    $("address-token-full").textContent = addr.address;
+    const addrLink = etherscanAddressLink(addr.address);
+    $("address-token-etherscan-link").innerHTML =
+        `<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;

    // USD total for this token only
    const usdVal = price ? amount * price : 0;
@@ -185,9 +171,15 @@ function show() {
                    ? knownToken.decimals
                    : null;
        const tokenHolders = tb && tb.holders != null ? tb.holders : null;
+        const dot = addressDotHtml(tokenId);
+        const tokenLink = `https://etherscan.io/token/${escapeHtml(tokenId)}`;
        const projectUrl = knownToken && knownToken.url ? knownToken.url : null;
        let infoHtml = `<div class="font-bold mb-2">Contract Address</div>`;
-        infoHtml += `<div class="mb-2">${renderAddressHtml(tokenId)}</div>`;
+        infoHtml +=
+            `<div class="flex items-center mb-2">${dot}` +
+            `<span class="break-all underline decoration-dashed cursor-pointer" id="address-token-contract-copy" data-copy="${escapeHtml(tokenId)}">${escapeHtml(tokenId)}</span>` +
+            `<a href="${tokenLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>` +
+            `</div>`;
        if (tokenName)
            infoHtml += `<div class="mb-1"><span class="text-muted">Name:</span> ${tokenName}</div>`;
        if (tokenSymbol)
@@ -199,7 +191,6 @@ function show() {
        if (projectUrl)
            infoHtml += `<div class="mb-1"><span class="text-muted">Website:</span> <a href="${escapeHtml(projectUrl)}" target="_blank" rel="noopener" class="underline decoration-dashed">${escapeHtml(projectUrl)}</a></div>`;
        contractInfo.innerHTML = infoHtml;
-        attachCopyHandlers(contractInfo);
        contractInfo.classList.remove("hidden");
    } else {
        contractInfo.innerHTML = "";
@@ -321,12 +312,19 @@ function renderTransactions(txs) {

 function init(_ctx) {
    ctx = _ctx;
+    $("address-token-full").addEventListener("click", () => {
+        const addr = $("address-token-full").dataset.full;
+        if (addr) {
+            navigator.clipboard.writeText(addr);
+            showFlash("Copied!");
+        }
+    });
+
    $("address-token-contract-info").addEventListener("click", (e) => {
        const copyEl = e.target.closest("[data-copy]");
        if (copyEl) {
            navigator.clipboard.writeText(copyEl.dataset.copy);
            showFlash("Copied!");
-            flashCopyFeedback(copyEl);
        }
    });

@@ -358,11 +356,25 @@ function init(_ctx) {
        $("send-token").classList.add("hidden");
        let staticHtml = `<div class="font-bold">${escapeHtml(currentSymbol)}</div>`;
        if (tokenId !== "ETH") {
-            staticHtml += `<div class="text-xs">${renderAddressHtml(tokenId)}</div>`;
+            const dot = addressDotHtml(tokenId);
+            const link = `https://etherscan.io/token/${tokenId}`;
+            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");
-        attachCopyHandlers($("send-token-static"));
+        // 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();
        resetSendValidation();
        showView("send");
--- a/src/popup/views/approval.js
+++ b/src/popup/views/approval.js
@@ -1,12 +1,11 @@
 const {
    $,
+    addressDotHtml,
    addressTitle,
    escapeHtml,
    showView,
    showError,
    hideError,
-    renderAddressHtml,
-    attachCopyHandlers,
 } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers");
@@ -18,11 +17,28 @@ const uniswap = require("../../shared/uniswap");
 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>`;
+
 const erc20Iface = new Interface(ERC20_ABI);

 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>`;
    const title = addressTitle(address, state.wallets);
-    return renderAddressHtml(address, { title });
+    let html = "";
+    if (title) {
+        html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
+        html += `<div class="break-all">${escapeHtml(address)}${extLink}</div>`;
+    } else {
+        html += `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
+    }
+    return html;
 }

 function formatTxValue(val) {
@@ -37,6 +53,10 @@ function tokenLabel(address) {
    return t ? t.symbol : null;
 }

+function etherscanTokenLink(address) {
+    return `https://etherscan.io/token/${address}`;
+}
+
 // Try to decode calldata using known ABIs.
 // Returns { name, description, details } or null.
 function decodeCalldata(data, toAddress) {
@@ -198,6 +218,10 @@ function showTxApproval(details) {
            toHtml += `<div class="font-bold mb-1">${escapeHtml(symbol)}</div>`;
        }
        toHtml += approvalAddressHtml(toAddr);
+        if (symbol) {
+            const link = etherscanTokenLink(toAddr);
+            toHtml = toHtml.replace("</div>", "") + ""; // approvalAddressHtml already has etherscan link
+        }
        $("approve-tx-to").innerHTML = toHtml;
    } else {
        $("approve-tx-to").innerHTML = escapeHtml("(contract creation)");
@@ -219,9 +243,12 @@ function showTxApproval(details) {
            detailsHtml += `<div class="text-muted">${escapeHtml(d.label)}</div>`;
            if (d.address) {
                if (d.isToken) {
+                    const tLink = etherscanTokenLink(d.address);
                    detailsHtml += `<div class="font-bold">${escapeHtml(tokenLabel(d.address) || "Unknown token")}</div>`;
-                }
                    detailsHtml += approvalAddressHtml(d.address);
+                } else {
+                    detailsHtml += approvalAddressHtml(d.address);
+                }
            } else {
                detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
            }
@@ -242,10 +269,9 @@ function showTxApproval(details) {
    }

    $("approve-tx-password").value = "";
-    hideError("approve-tx-error");
+    $("approve-tx-error").classList.add("hidden");

    showView("approve-tx");
-    attachCopyHandlers("view-approve-tx");
 }

 function decodeHexMessage(hex) {
@@ -325,10 +351,10 @@ function showSignApproval(details) {
    if (warningEl) {
        if (sp.dangerWarning) {
            warningEl.textContent = sp.dangerWarning;
-            warningEl.style.visibility = "visible";
+            warningEl.classList.remove("hidden");
        } else {
            warningEl.textContent = "";
-            warningEl.style.visibility = "hidden";
+            warningEl.classList.add("hidden");
        }
    }

@@ -338,7 +364,6 @@ function showSignApproval(details) {
    $("btn-approve-sign").classList.remove("text-muted");

    showView("approve-sign");
-    attachCopyHandlers("view-approve-sign");
 }

 function show(id) {
@@ -361,7 +386,6 @@ function show(id) {
        $("approve-address").innerHTML = approvalAddressHtml(
            state.activeAddress,
        );
-        attachCopyHandlers("view-approve-site");
        $("approve-remember").checked = state.rememberSiteChoice;
    });
 }
--- a/src/popup/views/confirmTx.js
+++ b/src/popup/views/confirmTx.js
@@ -15,11 +15,9 @@ const {
    hideError,
    showView,
    showFlash,
-    flashCopyFeedback,
    addressTitle,
+    addressDotHtml,
    escapeHtml,
-    renderAddressHtml,
-    attachCopyHandlers,
 } = require("./helpers");
 const { state } = require("../../shared/state");
 const { getSignerForAddress } = require("../../shared/wallet");
@@ -32,6 +30,13 @@ const { log } = require("../../shared/log");
 const makeBlockie = require("ethereum-blockies-base64");
 const txStatus = require("./txStatus");

+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>`;
+
 let pendingTx = null;

 function restore() {
@@ -41,6 +46,14 @@ function restore() {
    }
 }

+function etherscanTokenLink(address) {
+    return `https://etherscan.io/token/${address}`;
+}
+
+function etherscanAddressLink(address) {
+    return `https://etherscan.io/address/${address}`;
+}
+
 function blockieHtml(address) {
    const src = makeBlockie(address);
    return `<img src="${src}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
@@ -48,10 +61,22 @@ function blockieHtml(address) {

 function confirmAddressHtml(address, ensName, title) {
    const blockie = blockieHtml(address);
-    return (
-        `<div class="mb-1">${blockie}</div>` +
-        renderAddressHtml(address, { title, ensName })
-    );
+    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 (title) {
+        html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
+    }
+    if (ensName) {
+        html += `<div class="flex items-center font-bold">${title ? "" : dot}${escapeHtml(ensName)}</div>`;
+    }
+    html +=
+        `<div class="flex items-center">${title || ensName ? "" : dot}` +
+        `<span class="break-all">${escapeHtml(address)}</span>` +
+        extLink +
+        `</div>`;
+    return html;
 }

 function valueWithUsd(text, usdAmount) {
@@ -78,12 +103,22 @@ function show(txInfo) {
    // Token contract section (ERC-20 only)
    const tokenSection = $("confirm-token-section");
    if (isErc20) {
-        $("confirm-token-contract").innerHTML = renderAddressHtml(
-            txInfo.token,
-            {},
-        );
+        const dot = addressDotHtml(txInfo.token);
+        const link = etherscanTokenLink(txInfo.token);
+        $("confirm-token-contract").innerHTML =
+            `<div class="flex items-center">${dot}` +
+            `<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(txInfo.token)}">${escapeHtml(txInfo.token)}</span>` +
+            `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>` +
+            `</div>`;
        tokenSection.classList.remove("hidden");
-        attachCopyHandlers(tokenSection);
+        // Attach click-to-copy on the contract address
+        const copyEl = tokenSection.querySelector("[data-copy]");
+        if (copyEl) {
+            copyEl.onclick = () => {
+                navigator.clipboard.writeText(copyEl.dataset.copy);
+                showFlash("Copied!");
+            };
+        }
    } else {
        tokenSection.classList.add("hidden");
    }
@@ -149,10 +184,9 @@ function show(txInfo) {
                    `<div class="border border-border border-dashed p-2 mb-1 text-xs font-bold">WARNING: ${w}</div>`,
            )
            .join("");
-        warningsEl.style.visibility = "visible";
+        warningsEl.classList.remove("hidden");
    } else {
-        warningsEl.innerHTML = "";
-        warningsEl.style.visibility = "hidden";
+        warningsEl.classList.add("hidden");
    }

    // Check for errors
@@ -190,12 +224,11 @@ function show(txInfo) {
        errorsEl.innerHTML = errors
            .map((e) => `<div class="text-xs">${e}</div>`)
            .join("");
-        errorsEl.style.visibility = "visible";
+        errorsEl.classList.remove("hidden");
        sendBtn.disabled = true;
        sendBtn.classList.add("text-muted");
    } else {
-        errorsEl.innerHTML = "";
-        errorsEl.style.visibility = "hidden";
+        errorsEl.classList.add("hidden");
        sendBtn.disabled = false;
        sendBtn.classList.remove("text-muted");
    }
@@ -205,11 +238,10 @@ function show(txInfo) {
    hideError("confirm-tx-password-error");

    // Gas estimate — show placeholder then fetch async
-    $("confirm-fee").style.visibility = "visible";
+    $("confirm-fee").classList.remove("hidden");
    $("confirm-fee-amount").textContent = "Estimating...";
    state.viewData = { pendingTx: txInfo };
    showView("confirm-tx");
-    attachCopyHandlers("view-confirm-tx");

    // Reset recipient warning to hidden (space always reserved, no layout shift)
    $("confirm-recipient-warning").style.visibility = "hidden";
--- a/src/popup/views/deleteWallet.js
+++ b/src/popup/views/deleteWallet.js
@@ -12,7 +12,7 @@ function show(walletIdx) {
        wallet.name || "Wallet " + (walletIdx + 1);
    $("delete-wallet-password").value = "";
    $("delete-wallet-flash").textContent = "";
-    $("delete-wallet-flash").style.visibility = "hidden";
+    $("delete-wallet-flash").classList.add("hidden");
    showView("delete-wallet-confirm");
 }

@@ -29,14 +29,14 @@ function init(_ctx) {
        if (!pw) {
            $("delete-wallet-flash").textContent =
                "Please enter your password.";
-            $("delete-wallet-flash").style.visibility = "visible";
+            $("delete-wallet-flash").classList.remove("hidden");
            return;
        }

        if (deleteWalletIndex === null) {
            $("delete-wallet-flash").textContent =
                "No wallet selected for deletion.";
-            $("delete-wallet-flash").style.visibility = "visible";
+            $("delete-wallet-flash").classList.remove("hidden");
            return;
        }

@@ -52,7 +52,7 @@ function init(_ctx) {
            await decryptWithPassword(wallet.encryptedSecret, pw);
        } catch (_e) {
            $("delete-wallet-flash").textContent = "Wrong password.";
-            $("delete-wallet-flash").style.visibility = "visible";
+            $("delete-wallet-flash").classList.remove("hidden");
            btn.disabled = false;
            btn.classList.remove("text-muted");
            return;
--- a/src/popup/views/helpers.js
+++ b/src/popup/views/helpers.js
@@ -40,13 +40,11 @@ function $(id) {
 function showError(id, msg) {
    const el = $(id);
    el.textContent = msg;
-    el.style.visibility = "visible";
+    el.classList.remove("hidden");
 }

 function hideError(id) {
-    const el = $(id);
-    el.textContent = "";
-    el.style.visibility = "hidden";
+    $(id).classList.add("hidden");
 }

 function showView(name) {
@@ -208,47 +206,38 @@ function addressTitle(address, wallets) {
 // Render an address with color dot, optional ENS name, optional title,
 // and optional truncation. Title and ENS are shown as bold labels above
 // the full address.
-// Delegates to renderAddressHtml for consistent output.
 function formatAddressHtml(address, ensName, maxLen, title) {
-    return renderAddressHtml(address, { title, ensName, maxLen });
+    const dot = addressDotHtml(address);
+    const displayAddr = maxLen ? truncateMiddle(address, maxLen) : address;
+    if (title || ensName) {
+        let html = "";
+        if (title) {
+            html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
+        }
+        if (ensName) {
+            html += `<div class="flex items-center font-bold">${title ? "" : dot}${escapeHtml(ensName)}</div>`;
+        }
+        html += `<div class="break-all">${escapeHtml(displayAddr)}</div>`;
+        return html;
+    }
+    return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(displayAddr)}</span></div>`;
 }

 function isoDate(timestamp) {
    const d = new Date(timestamp * 1000);
    const pad = (n) => String(n).padStart(2, "0");
-    if (state.utcTimestamps) {
-        return (
-            d.getUTCFullYear() +
-            "-" +
-            pad(d.getUTCMonth() + 1) +
-            "-" +
-            pad(d.getUTCDate()) +
-            "T" +
-            pad(d.getUTCHours()) +
-            ":" +
-            pad(d.getUTCMinutes()) +
-            ":" +
-            pad(d.getUTCSeconds()) +
-            "Z"
-        );
-    }
-    const offsetMin = -d.getTimezoneOffset();
-    const sign = offsetMin >= 0 ? "+" : "-";
-    const absOff = Math.abs(offsetMin);
-    const tzStr = sign + pad(Math.floor(absOff / 60)) + ":" + pad(absOff % 60);
    return (
        d.getFullYear() +
        "-" +
        pad(d.getMonth() + 1) +
        "-" +
        pad(d.getDate()) +
-        "T" +
+        " " +
        pad(d.getHours()) +
        ":" +
        pad(d.getMinutes()) +
        ":" +
-        pad(d.getSeconds()) +
-        tzStr
+        pad(d.getSeconds())
    );
 }

@@ -269,111 +258,12 @@ function timeAgo(timestamp) {
    return years + " year" + (years !== 1 ? "s" : "") + " ago";
 }

-// Shared external-link icon SVG used across all views.
-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 etherscanAddressUrl(address) {
-    return `https://etherscan.io/address/${address}`;
-}
-
-function etherscanLinkHtml(url) {
-    return (
-        `<a href="${url}" target="_blank" rel="noopener" ` +
-        `class="inline-flex items-center">${EXT_ICON}</a>`
-    );
-}
-
-// Render a copyable text span with dashed underline affordance.
-// The caller must attach click handlers via attachCopyHandlers() or
-// manually wire up [data-copy] elements after inserting the HTML.
-function copyableHtml(text, extraClass) {
-    const cls =
-        "underline decoration-dashed cursor-pointer" +
-        (extraClass ? " " + extraClass : "");
-    return `<span class="${cls}" data-copy="${escapeHtml(text)}">${escapeHtml(text)}</span>`;
-}
-
-// Attach click-to-copy handlers to all [data-copy] elements within
-// a container.  Safe to call multiple times on the same container.
-function attachCopyHandlers(container) {
-    const root =
-        typeof container === "string"
-            ? document.getElementById(container)
-            : container;
-    if (!root) return;
-    root.querySelectorAll("[data-copy]").forEach((el) => {
-        el.onclick = () => {
-            navigator.clipboard.writeText(el.dataset.copy);
-            showFlash("Copied!");
-            flashCopyFeedback(el);
-        };
-    });
-}
-
-// Unified address rendering.
-//
-// Produces consistent HTML for any Ethereum address:
-//   • Color dot
-//   • Optional title (e.g. "Wallet 1 — Address 2") shown bold above address
-//   • Optional ENS name shown bold above address
-//   • Full address (or truncated via maxLen) with dashed-underline click-to-copy
-//   • Etherscan external link icon
-//
-// Options object:
-//   title    — wallet title string (from addressTitle)
-//   ensName  — ENS name string
-//   maxLen   — if set, truncate address display (min 32 chars enforced)
-//   noLink   — if true, omit etherscan link
-//
-// After inserting the returned HTML into the DOM, call
-// attachCopyHandlers() on the parent to wire up click-to-copy.
-function renderAddressHtml(address, opts) {
-    const { title, ensName, maxLen, noLink } = opts || {};
-    const dot = addressDotHtml(address);
-    const displayAddr = maxLen ? truncateMiddle(address, maxLen) : address;
-    const link = etherscanAddressUrl(address);
-    const extLink = noLink ? "" : etherscanLinkHtml(link);
-
-    let html = "";
-    if (title) {
-        html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
-    }
-    if (ensName) {
-        html += `<div class="flex items-center font-bold">${title ? "" : dot}${escapeHtml(ensName)}</div>`;
-    }
-    if (title || ensName) {
-        html += `<div class="flex items-center">${copyableHtml(displayAddr, "break-all")}${extLink}</div>`;
-    } else {
-        html += `<div class="flex items-center">${dot}${copyableHtml(displayAddr, "break-all")}${extLink}</div>`;
-    }
-    return html;
-}
-
-function flashCopyFeedback(el) {
-    if (!el) return;
-    el.classList.remove("copy-flash-fade");
-    el.classList.add("copy-flash-active");
-    setTimeout(() => {
-        el.classList.remove("copy-flash-active");
-        el.classList.add("copy-flash-fade");
-        setTimeout(() => {
-            el.classList.remove("copy-flash-fade");
-        }, 275);
-    }, 75);
-}
-
 module.exports = {
    $,
    showError,
    hideError,
    showView,
    showFlash,
-    flashCopyFeedback,
    balanceLine,
    balanceLinesForAddress,
    addressColor,
@@ -381,12 +271,6 @@ module.exports = {
    escapeHtml,
    addressTitle,
    formatAddressHtml,
-    renderAddressHtml,
-    copyableHtml,
-    attachCopyHandlers,
-    etherscanAddressUrl,
-    etherscanLinkHtml,
-    EXT_ICON,
    truncateMiddle,
    isoDate,
    timeAgo,
--- a/src/popup/views/home.js
+++ b/src/popup/views/home.js
@@ -2,7 +2,6 @@ const {
    $,
    showView,
    showFlash,
-    flashCopyFeedback,
    balanceLinesForAddress,
    isoDate,
    timeAgo,
@@ -10,8 +9,6 @@ const {
    addressTitle,
    escapeHtml,
    truncateMiddle,
-    renderAddressHtml,
-    attachCopyHandlers,
 } = require("./helpers");
 const { state, saveState, currentAddress } = require("../../shared/state");
 const {
@@ -71,12 +68,27 @@ function renderTotalValue() {
    }
 }

+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 renderActiveAddress() {
    const el = $("active-address-display");
    if (!el) return;
    if (state.activeAddress) {
-        el.innerHTML = renderAddressHtml(state.activeAddress);
-        attachCopyHandlers(el);
+        const addr = state.activeAddress;
+        const dot = addressDotHtml(addr);
+        const link = `https://etherscan.io/address/${addr}`;
+        el.innerHTML =
+            `<span class="underline decoration-dashed cursor-pointer" id="active-addr-copy">${dot}${escapeHtml(addr)}</span>` +
+            `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+        $("active-addr-copy").addEventListener("click", () => {
+            navigator.clipboard.writeText(addr);
+            showFlash("Copied!");
+        });
    } else {
        el.textContent = "";
    }
--- a/src/popup/views/receive.js
+++ b/src/popup/views/receive.js
@@ -2,14 +2,19 @@ const {
    $,
    showView,
    showFlash,
-    flashCopyFeedback,
    formatAddressHtml,
    addressTitle,
-    attachCopyHandlers,
 } = require("./helpers");
 const { state, currentAddress } = require("../../shared/state");
 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 show() {
    const addr = currentAddress();
    const address = addr ? addr.address : "";
@@ -19,8 +24,10 @@ function show() {
        ? formatAddressHtml(address, ensName, null, title)
        : "";
    $("receive-address-block").dataset.full = address;
-    // Etherscan link is now included in formatAddressHtml via renderAddressHtml
-    $("receive-etherscan-link").innerHTML = "";
+    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,
@@ -45,22 +52,27 @@ function show() {
            "This is an ERC-20 token. Only send " +
            symbol +
            " on the Ethereum network to this address. Sending tokens on other networks will result in permanent loss.";
-        warningEl.style.visibility = "visible";
+        warningEl.classList.remove("hidden");
    } else {
-        warningEl.textContent = "";
-        warningEl.style.visibility = "hidden";
+        warningEl.classList.add("hidden");
    }
    showView("receive");
-    attachCopyHandlers("view-receive");
 }

 function init(ctx) {
+    $("receive-address-block").addEventListener("click", () => {
+        const addr = $("receive-address-block").dataset.full;
+        if (addr) {
+            navigator.clipboard.writeText(addr);
+            showFlash("Copied!");
+        }
+    });
+
    $("btn-receive-copy").addEventListener("click", () => {
        const addr = $("receive-address-block").dataset.full;
        if (addr) {
            navigator.clipboard.writeText(addr);
            showFlash("Copied!");
-            flashCopyFeedback($("receive-address-block"));
        }
    });

--- a/src/popup/views/send.js
+++ b/src/popup/views/send.js
@@ -3,10 +3,9 @@
 const {
    $,
    showFlash,
+    addressDotHtml,
    addressTitle,
    escapeHtml,
-    renderAddressHtml,
-    attachCopyHandlers,
 } = require("./helpers");
 const { state, currentAddress } = require("../../shared/state");
 let ctx;
@@ -114,6 +113,13 @@ function updateToValidation() {
    }
 }

+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;
@@ -142,12 +148,24 @@ function renderSendTokenSelect(addr) {
 function updateSendBalance() {
    const addr = currentAddress();
    if (!addr) return;
+    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>`;
    const title = addressTitle(addr.address, state.wallets);
-    $("send-from").innerHTML = renderAddressHtml(addr.address, {
-        title,
-        ensName: addr.ensName,
-    });
-    attachCopyHandlers($("send-from"));
+    let fromHtml = "";
+    if (title) {
+        fromHtml += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
+        if (addr.ensName) {
+            fromHtml += `<div>${escapeHtml(addr.ensName)}</div>`;
+        }
+        fromHtml += `<div class="break-all">${escapeHtml(addr.address)}${extLink}</div>`;
+    } else 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 =
--- a/src/popup/views/settings.js
+++ b/src/popup/views/settings.js
@@ -1,5 +1,4 @@
 const { $, showView, showFlash, escapeHtml } = require("./helpers");
-const { applyTheme } = require("../theme");
 const { state, saveState } = require("../../shared/state");
 const { ETHEREUM_MAINNET_CHAIN_ID } = require("../../shared/constants");
 const { log, debugFetch } = require("../../shared/log");
@@ -215,13 +214,6 @@ function init(ctx) {
        await saveState();
    });

-    $("settings-theme").value = state.theme;
-    $("settings-theme").addEventListener("change", async () => {
-        state.theme = $("settings-theme").value;
-        await saveState();
-        applyTheme(state.theme);
-    });
-
    $("settings-hide-low-holders").checked = state.hideLowHolderTokens;
    $("settings-hide-low-holders").addEventListener("change", async () => {
        state.hideLowHolderTokens = $("settings-hide-low-holders").checked;
@@ -249,12 +241,6 @@ function init(ctx) {
        }
    });

-    $("settings-utc-timestamps").checked = state.utcTimestamps;
-    $("settings-utc-timestamps").addEventListener("change", async () => {
-        state.utcTimestamps = $("settings-utc-timestamps").checked;
-        await saveState();
-    });
-
    $("btn-main-add-wallet").addEventListener("click", ctx.showAddWalletView);

    $("btn-settings-add-token").addEventListener(
--- a/src/popup/views/settingsAddToken.js
+++ b/src/popup/views/settingsAddToken.js
@@ -73,8 +73,7 @@ function renderDropdown() {

 function show() {
    $("settings-addtoken-address").value = "";
-    $("settings-addtoken-info").textContent = "";
-    $("settings-addtoken-info").style.visibility = "hidden";
+    $("settings-addtoken-info").classList.add("hidden");
    renderTop10();
    renderDropdown();
    showView("settings-addtoken");
@@ -130,7 +129,7 @@ function init(_ctx) {
        }
        const infoEl = $("settings-addtoken-info");
        infoEl.textContent = "Looking up token...";
-        infoEl.style.visibility = "visible";
+        infoEl.classList.remove("hidden");
        log.debugf("Looking up token contract", addr);
        try {
            const info = await lookupTokenInfo(addr, state.rpcUrl);
@@ -144,8 +143,7 @@ function init(_ctx) {
            await saveState();
            showFlash("Added " + info.symbol);
            $("settings-addtoken-address").value = "";
-            infoEl.textContent = "";
-            infoEl.style.visibility = "hidden";
+            infoEl.classList.add("hidden");
            renderTop10();
            renderDropdown();
            ctx.doRefreshAndRender();
@@ -153,8 +151,7 @@ function init(_ctx) {
            const detail = e.shortMessage || e.message || String(e);
            log.errorf("Token lookup failed for", addr, detail);
            showFlash(detail);
-            infoEl.textContent = "";
-            infoEl.style.visibility = "hidden";
+            infoEl.classList.add("hidden");
        }
    });
 }
--- a/src/popup/views/transactionDetail.js
+++ b/src/popup/views/transactionDetail.js
@@ -5,34 +5,72 @@ const {
    $,
    showView,
    showFlash,
-    flashCopyFeedback,
+    addressDotHtml,
    addressTitle,
    escapeHtml,
    isoDate,
    timeAgo,
-    renderAddressHtml,
-    attachCopyHandlers,
-    copyableHtml,
-    etherscanLinkHtml,
 } = require("./helpers");
 const { state } = require("../../shared/state");
 const makeBlockie = require("ethereum-blockies-base64");
 const { log, debugFetch } = require("../../shared/log");
 const { decodeCalldata } = require("./approval");

+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>`;
+
 let ctx;

+function copyableHtml(text, extraClass) {
+    const cls =
+        "underline decoration-dashed cursor-pointer" +
+        (extraClass ? " " + extraClass : "");
+    return `<span class="${cls}" data-copy="${escapeHtml(text)}">${escapeHtml(text)}</span>`;
+}
+
 function blockieHtml(address) {
    const src = makeBlockie(address);
    return `<img src="${src}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
 }

+function etherscanLinkHtml(url) {
+    return (
+        `<a href="${url}" target="_blank" rel="noopener" ` +
+        `class="inline-flex items-center"` +
+        `>${EXT_ICON}</a>`
+    );
+}
+
 function txAddressHtml(address, ensName, title) {
    const blockie = blockieHtml(address);
-    return (
-        `<div class="mb-1">${blockie}</div>` +
-        renderAddressHtml(address, { title, ensName })
-    );
+    const dot = addressDotHtml(address);
+    const link = `https://etherscan.io/address/${address}`;
+    const extLink = etherscanLinkHtml(link);
+    let html = `<div class="mb-1">${blockie}</div>`;
+    if (title) {
+        html += `<div class="font-bold">${escapeHtml(title)}</div>`;
+    }
+    if (ensName) {
+        html +=
+            `<div class="flex items-center">${dot}` +
+            copyableHtml(ensName, "") +
+            `</div>` +
+            `<div class="flex items-center">${dot}` +
+            copyableHtml(address, "break-all") +
+            extLink +
+            `</div>`;
+    } else {
+        html +=
+            `<div class="flex items-center">${dot}` +
+            copyableHtml(address, "break-all") +
+            extLink +
+            `</div>`;
+    }
+    return html;
 }

 function txHashHtml(hash) {
@@ -125,7 +163,16 @@ function render() {
        copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
    $("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
    showView("transaction");
-    attachCopyHandlers("view-transaction");
+
+    document
+        .getElementById("view-transaction")
+        .querySelectorAll("[data-copy]")
+        .forEach((el) => {
+            el.onclick = () => {
+                navigator.clipboard.writeText(el.dataset.copy);
+                showFlash("Copied!");
+            };
+        });
 }

 async function loadCalldata(txHash, toAddress) {
@@ -158,14 +205,19 @@ async function loadCalldata(txHash, toAddress) {
                detailsHtml += `<div class="mb-2">`;
                detailsHtml += `<div class="text-muted">${escapeHtml(d.label)}</div>`;
                if (d.address && d.isToken) {
-                    // Token entry: show symbol on its own line, then address via shared renderer
+                    // Token entry: show symbol on its own line, then dot + address + Etherscan link
+                    const dot = addressDotHtml(d.address);
                    const tokenSymbol = d.value.match(/^(\S+)\s*\(/)?.[1];
                    if (tokenSymbol) {
                        detailsHtml += `<div class="font-bold">${escapeHtml(tokenSymbol)}</div>`;
                    }
-                    detailsHtml += renderAddressHtml(d.address);
+                    const etherscanUrl = `https://etherscan.io/token/${d.address}`;
+                    detailsHtml += `<div class="flex items-center">${dot}${copyableHtml(d.address, "break-all")}${etherscanLinkHtml(etherscanUrl)}</div>`;
                } else if (d.address) {
-                    detailsHtml += renderAddressHtml(d.address);
+                    // Protocol/contract entry: show name + Etherscan link
+                    const dot = addressDotHtml(d.address);
+                    const etherscanUrl = `https://etherscan.io/address/${d.address}`;
+                    detailsHtml += `<div class="flex items-center">${dot}${copyableHtml(d.value, "break-all")}${etherscanLinkHtml(etherscanUrl)}</div>`;
                } else {
                    detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
                }
@@ -192,7 +244,12 @@ async function loadCalldata(txHash, toAddress) {
        // Bind copy handlers for new elements (including raw data now outside section)
        const copyTargets = [section, rawSection].filter(Boolean);
        for (const container of copyTargets) {
-            attachCopyHandlers(container);
+            container.querySelectorAll("[data-copy]").forEach((el) => {
+                el.onclick = () => {
+                    navigator.clipboard.writeText(el.dataset.copy);
+                    showFlash("Copied!");
+                };
+            });
        }
    } catch (e) {
        log.errorf("loadCalldata failed:", e.message);
--- a/src/popup/views/txStatus.js
+++ b/src/popup/views/txStatus.js
@@ -3,18 +3,23 @@
 const {
    $,
    showView,
+    showFlash,
+    addressDotHtml,
    addressTitle,
    escapeHtml,
-    renderAddressHtml,
-    attachCopyHandlers,
-    copyableHtml,
-    etherscanLinkHtml,
 } = require("./helpers");
 const { TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
 const { state, saveState } = require("../../shared/state");
 const { getProvider } = require("../../shared/balances");
 const { log } = require("../../shared/log");

+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>`;
+
 let ctx;
 let elapsedTimer = null;
 let pollTimer = null;
@@ -31,19 +36,49 @@ function clearTimers() {
 }

 function toAddressHtml(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>`;
    const title = addressTitle(address, state.wallets);
-    return renderAddressHtml(address, { title });
+    if (title) {
+        return (
+            `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>` +
+            `<div class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</div>` +
+            extLink
+        );
+    }
+    return `<div class="flex items-center">${dot}<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</span>${extLink}</div>`;
 }

 function txHashHtml(hash) {
    const link = `https://etherscan.io/tx/${hash}`;
-    return copyableHtml(hash, "break-all") + etherscanLinkHtml(link);
+    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+    return (
+        `<span class="underline decoration-dashed cursor-pointer break-all" data-copy="${escapeHtml(hash)}">${escapeHtml(hash)}</span>` +
+        extLink
+    );
 }

 function blockNumberHtml(blockNumber) {
    const num = String(blockNumber);
    const link = `https://etherscan.io/block/${num}`;
-    return copyableHtml(num) + etherscanLinkHtml(link);
+    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+    return (
+        `<span class="underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(num)}">${escapeHtml(num)}</span>` +
+        extLink
+    );
+}
+
+function attachCopyHandlers(viewId) {
+    document
+        .getElementById(viewId)
+        .querySelectorAll("[data-copy]")
+        .forEach((el) => {
+            el.onclick = () => {
+                navigator.clipboard.writeText(el.dataset.copy);
+                showFlash("Copied!");
+            };
+        });
 }

 function showWait(txInfo, txHash) {
--- a/src/shared/state.js
+++ b/src/shared/state.js
@@ -23,10 +23,8 @@ const DEFAULT_STATE = {
    hideFraudContracts: true,
    hideDustTransactions: true,
    dustThresholdGwei: 100000,
-    utcTimestamps: false,
    fraudContracts: [],
    tokenHolderCache: {},
-    theme: "system",
 };

 const state = {
@@ -55,10 +53,8 @@ async function saveState() {
        hideFraudContracts: state.hideFraudContracts,
        hideDustTransactions: state.hideDustTransactions,
        dustThresholdGwei: state.dustThresholdGwei,
-        utcTimestamps: state.utcTimestamps,
        fraudContracts: state.fraudContracts,
        tokenHolderCache: state.tokenHolderCache,
-        theme: state.theme,
        currentView: state.currentView,
        selectedWallet: state.selectedWallet,
        selectedAddress: state.selectedAddress,
@@ -112,11 +108,8 @@ async function loadState() {
            saved.dustThresholdGwei !== undefined
                ? saved.dustThresholdGwei
                : 100000;
-        state.utcTimestamps =
-            saved.utcTimestamps !== undefined ? saved.utcTimestamps : false;
        state.fraudContracts = saved.fraudContracts || [];
        state.tokenHolderCache = saved.tokenHolderCache || {};
-        state.theme = saved.theme || "system";
        state.currentView = saved.currentView || null;
        state.selectedWallet =
            saved.selectedWallet !== undefined ? saved.selectedWallet : null;