fix: improve dark mode contrast for wells and balance display

- Change dark mode --color-well from #0a0a0a to #111111 for visible contrast against #000000 background - Add explicit text-fg class to balance display element to ensure white text in dark mode
feat: add theme setting (Light/Dark/System) with dark mode
2026-03-01 03:38:27 -08:00 · 2026-03-01 03:36:42 -08:00 · 2026-03-01 12:33:08 +01:00 · 2026-02-28 16:30:43 -08:00 · 2026-03-01 01:21:24 +01:00 · 2026-02-28 16:17:07 -08:00
22 changed files with 686 additions and 338 deletions
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -56,37 +56,105 @@
                    &lt; Back
                </button>
                <h2 class="font-bold mb-2">Add Wallet</h2>
-                <p class="mb-2">
-                    Enter your 12 or 24 word recovery phrase below, or click the
-                    button to roll the die for a new one.
-                </p>
-                <div class="mb-1 flex justify-end">
+
+                <!-- Mode selector tabs -->
+                <div
+                    class="flex border-b border-border mb-3"
+                    id="add-wallet-tabs"
+                >
                    <button
-                        id="btn-generate-phrase"
-                        class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer text-xs"
-                        title="Generate a random recovery phrase"
+                        id="tab-mnemonic"
+                        class="px-3 py-1.5 cursor-pointer text-xs font-bold border border-border border-b-bg bg-bg -mb-px"
                    >
-                        [&#9856;]
+                        From Phrase
+                    </button>
+                    <button
+                        id="tab-privkey"
+                        class="px-3 py-1.5 cursor-pointer text-xs text-muted border border-dashed border-border-light border-b-transparent -mb-px hover:bg-fg hover:text-bg"
+                    >
+                        From Key
+                    </button>
+                    <button
+                        id="tab-xprv"
+                        class="px-3 py-1.5 cursor-pointer text-xs text-muted border border-dashed border-border-light border-b-transparent -mb-px hover:bg-fg hover:text-bg"
+                    >
+                        From xprv
                    </button>
                </div>
-                <div class="mb-2">
-                    <textarea
-                        id="wallet-mnemonic"
-                        rows="3"
-                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg resize-y"
-                        placeholder="word word word ..."
-                    ></textarea>
+
+                <!-- Mnemonic form section -->
+                <div id="add-wallet-section-mnemonic">
+                    <p class="mb-2">
+                        Enter your 12 or 24 word recovery phrase below, or click
+                        the button to roll the die for a new one.
+                    </p>
+                    <div class="mb-1 flex justify-end">
+                        <button
+                            id="btn-generate-phrase"
+                            class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer text-xs"
+                            title="Generate a random recovery phrase"
+                        >
+                            [&#9856;]
+                        </button>
+                    </div>
+                    <div class="mb-2">
+                        <textarea
+                            id="wallet-mnemonic"
+                            rows="3"
+                            class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg resize-y"
+                            placeholder="word word word ..."
+                        ></textarea>
+                    </div>
+                    <div
+                        id="add-wallet-phrase-warning"
+                        class="text-xs mb-2 border border-border border-dashed p-2"
+                        style="visibility: hidden"
+                    >
+                        Write these words down and keep them safe. Anyone with
+                        them can take your funds; if you lose them, your wallet
+                        is gone.
+                    </div>
                </div>
-                <div
-                    id="add-wallet-phrase-warning"
-                    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 is gone.
+
+                <!-- Private key form section -->
+                <div id="add-wallet-section-privkey" class="hidden">
+                    <p class="mb-2">
+                        Paste your private key below. This wallet will have a
+                        single address.
+                    </p>
+                    <div class="mb-2">
+                        <input
+                            type="password"
+                            id="import-private-key"
+                            class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
+                            placeholder="0x..."
+                        />
+                    </div>
                </div>
+
+                <!-- Extended key (xprv) form section -->
+                <div id="add-wallet-section-xprv" class="hidden">
+                    <p class="mb-2">
+                        Paste your extended private key (xprv) below. This will
+                        import the HD wallet and scan for used addresses.
+                    </p>
+                    <div class="mb-2">
+                        <input
+                            type="password"
+                            id="import-xprv-key"
+                            class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
+                            placeholder="xprv..."
+                        />
+                    </div>
+                </div>
+
+                <!-- Shared password fields -->
                <div class="mb-2" id="add-wallet-password-section">
                    <label class="block mb-1">Choose a password</label>
-                    <p class="text-xs text-muted mb-1">
+                    <p
+                        class="text-xs text-muted mb-1"
+                        id="add-wallet-password-hint"
+                    >
                        This password encrypts your recovery phrase on this
                        device. You will need it to send funds.
                    </p>
@@ -104,75 +172,9 @@
                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
                    />
                </div>
-                <div
-                    id="add-wallet-error"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
-                ></div>
                <button
                    id="btn-add-wallet-confirm"
                    class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
-                >
-                    Add
-                </button>
-                <div class="mt-3 text-xs text-muted">
-                    Have a private key instead?
-                    <button
-                        id="btn-add-wallet-import-key"
-                        class="underline cursor-pointer bg-transparent border-none text-fg text-xs font-mono p-0"
-                    >
-                        Import private key
-                    </button>
-                </div>
-            </div>
-
-            <!-- ============ IMPORT PRIVATE KEY ============ -->
-            <div id="view-import-key" class="view hidden">
-                <button
-                    id="btn-import-key-back"
-                    class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
-                >
-                    &lt; Back
-                </button>
-                <h2 class="font-bold mb-2">Import Private Key</h2>
-                <p class="mb-2">
-                    Paste your private key below. This wallet will have a single
-                    address.
-                </p>
-                <div class="mb-2">
-                    <input
-                        type="password"
-                        id="import-private-key"
-                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
-                        placeholder="0x..."
-                    />
-                </div>
-                <div class="mb-2" id="import-key-password-section">
-                    <label class="block mb-1">Choose a password</label>
-                    <p class="text-xs text-muted mb-1">
-                        This password encrypts your private key on this device.
-                        You will need it to send funds.
-                    </p>
-                    <input
-                        type="password"
-                        id="import-key-password"
-                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
-                    />
-                </div>
-                <div class="mb-2" id="import-key-password-confirm-section">
-                    <label class="block mb-1">Confirm password</label>
-                    <input
-                        type="password"
-                        id="import-key-password-confirm"
-                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
-                    />
-                </div>
-                <div
-                    id="import-key-error"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
-                ></div>
-                <button
-                    id="btn-import-key-confirm"
-                    class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
                >
                    Import
                </button>
@@ -183,7 +185,7 @@
                <!-- active address headline -->
                <div
                    id="total-value"
-                    class="text-2xl font-bold min-h-[2rem]"
+                    class="text-2xl font-bold min-h-[2rem] text-fg"
                ></div>
                <div
                    id="total-value-sub"
@@ -373,8 +375,9 @@
                    transfer all funds from this address. Never share it.
                </p>
                <div
-                    id="export-privkey-error"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
+                    id="export-privkey-flash"
+                    class="text-xs mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
                ></div>
                <div id="export-privkey-password-section" class="mb-2">
                    <label class="block mb-1">Password</label>
@@ -578,16 +581,34 @@
                    <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 hidden">
+                <div id="confirm-fee" class="mb-3" style="visibility: 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 hidden"></div>
+                <div
+                    id="confirm-warnings"
+                    class="mb-2"
+                    style="visibility: hidden"
+                ></div>
+                <div
+                    id="confirm-recipient-warning"
+                    class="mb-2"
+                    style="visibility: hidden"
+                >
+                    <div
+                        class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
+                    >
+                        WARNING: The recipient address has ZERO transaction
+                        history. This may indicate a fresh or unused address.
+                        Double-check the address before sending.
+                    </div>
+                </div>
                <div
                    id="confirm-errors"
-                    class="mb-2 border border-border border-dashed p-2 hidden"
+                    class="mb-2 border border-border border-dashed p-2"
+                    style="visibility: hidden; min-height: 1.25rem"
                ></div>
                <div class="mb-2">
                    <label class="block mb-1 text-xs">Password</label>
@@ -600,6 +621,7 @@
                <div
                    id="confirm-tx-password-error"
                    class="text-xs mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
                ></div>
                <button
                    id="btn-confirm-send"
@@ -714,7 +736,8 @@
                </button>
                <div
                    id="receive-erc20-warning"
-                    class="text-xs border border-border border-dashed p-2 mt-3 hidden"
+                    class="text-xs border border-border border-dashed p-2 mt-3"
+                    style="visibility: hidden"
                ></div>
            </div>

@@ -742,7 +765,8 @@
                </div>
                <div
                    id="add-token-info"
-                    class="text-xs text-muted mb-2 hidden"
+                    class="text-xs text-muted mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
                ></div>
                <div class="mb-2">
                    <label class="block mb-1 text-xs text-muted"
@@ -800,7 +824,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"
+                        class="text-xs flex items-center gap-1 cursor-pointer mb-2"
                    >
                        <input
                            type="checkbox"
@@ -808,6 +832,17 @@
                        />
                        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">
@@ -923,8 +958,9 @@
                    funds will be unrecoverable without your recovery phrase.
                </p>
                <div
-                    id="delete-wallet-error"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
+                    id="delete-wallet-flash"
+                    class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
                ></div>
                <div class="mb-2">
                    <label class="block mb-1">Password</label>
@@ -999,7 +1035,8 @@
                    />
                    <div
                        id="settings-addtoken-info"
-                        class="text-xs text-muted mt-1 hidden"
+                        class="text-xs text-muted mt-1 min-h-[1.25rem]"
+                        style="visibility: hidden"
                    ></div>
                    <button
                        id="btn-settings-addtoken-manual"
@@ -1125,7 +1162,8 @@
                </div>
                <div
                    id="approve-tx-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem]"
+                    style="visibility: hidden"
                ></div>
                <div class="flex justify-between">
                    <button
@@ -1153,8 +1191,10 @@

                <div
                    id="approve-sign-danger-warning"
-                    class="hidden mb-3 p-2 text-xs font-bold"
+                    class="mb-3 p-2 text-xs font-bold"
                    style="
+                        visibility: hidden;
+                        min-height: 1.25rem;
                        background: #fee2e2;
                        color: #991b1b;
                        border: 2px solid #dc2626;
@@ -1191,7 +1231,8 @@
                </div>
                <div
                    id="approve-sign-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem]"
+                    style="visibility: hidden"
                ></div>
                <div class="flex justify-between">
                    <button
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -6,11 +6,11 @@ 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");
 const addWallet = require("./views/addWallet");
-const importKey = require("./views/importKey");
 const addressDetail = require("./views/addressDetail");
 const addressToken = require("./views/addressToken");
 const send = require("./views/send");
@@ -54,7 +54,6 @@ const ctx = {
    renderWalletList,
    doRefreshAndRender,
    showAddWalletView: () => addWallet.show(),
-    showImportKeyView: () => importKey.show(),
    showAddressDetail: () => addressDetail.show(),
    showAddressToken: () => addressToken.show(),
    showAddTokenView: () => addToken.show(),
@@ -178,6 +177,7 @@ async function init() {
    }

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

    // Auto-default active address
    if (
@@ -217,7 +217,6 @@ async function init() {

    welcome.init(ctx);
    addWallet.init(ctx);
-    importKey.init(ctx);
    home.init(ctx);
    addressDetail.init(ctx);
    addressToken.init(ctx);
--- a/src/popup/styles/main.css
+++ b/src/popup/styles/main.css
@@ -15,7 +15,32 @@
    --color-section: #dddddd;
 }

+html.dark {
+    --color-bg: #000000;
+    --color-fg: #ffffff;
+    --color-muted: #999999;
+    --color-border: #ffffff;
+    --color-border-light: #333333;
+    --color-hover: #111111;
+    --color-well: #111111;
+    --color-danger-well: #1a0000;
+    --color-section: #222222;
+}
+
 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
@@ -0,0 +1,33 @@
+// 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,7 +7,8 @@ const { log } = require("../../shared/log");

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

--- a/src/popup/views/addWallet.js
+++ b/src/popup/views/addWallet.js
@@ -1,127 +1,301 @@
-const { $, showView, showFlash, showError, hideError } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const {
    generateMnemonic,
    hdWalletFromMnemonic,
    isValidMnemonic,
+    addressFromPrivateKey,
+    hdWalletFromXprv,
+    isValidXprv,
 } = require("../../shared/wallet");
 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"];
+
+const PASSWORD_HINTS = {
+    mnemonic:
+        "This password encrypts your recovery phrase on this device. You will need it to send funds.",
+    privkey:
+        "This password encrypts your private key on this device. You will need it to send funds.",
+    xprv: "This password encrypts your key on this device. You will need it to send funds.",
+};
+
+function switchMode(mode) {
+    currentMode = mode;
+    for (const m of MODES) {
+        $("add-wallet-section-" + m).classList.toggle("hidden", m !== mode);
+        const tab = $("tab-" + m);
+        const isActive = m === mode;
+        // Active: bold, solid border on top/sides, no bottom border (connects to content)
+        tab.classList.toggle("font-bold", isActive);
+        tab.classList.toggle("border-solid", isActive);
+        tab.classList.toggle("border-border", isActive);
+        tab.classList.toggle("border-b-bg", isActive);
+        tab.classList.toggle("bg-bg", isActive);
+        // Inactive: muted text, dashed border on top/sides, transparent bottom, hover invert
+        tab.classList.toggle("text-muted", !isActive);
+        tab.classList.toggle("border-dashed", !isActive);
+        tab.classList.toggle("border-border-light", !isActive);
+        tab.classList.toggle("border-b-transparent", !isActive);
+        tab.classList.toggle("hover:bg-fg", !isActive);
+        tab.classList.toggle("hover:text-bg", !isActive);
+    }
+    $("add-wallet-password-hint").textContent = PASSWORD_HINTS[mode];
+}
+
 function show() {
    $("wallet-mnemonic").value = "";
+    $("import-private-key").value = "";
+    $("import-xprv-key").value = "";
    $("add-wallet-password").value = "";
    $("add-wallet-password-confirm").value = "";
-    $("add-wallet-phrase-warning").classList.add("hidden");
-    hideError("add-wallet-error");
+    $("add-wallet-phrase-warning").style.visibility = "hidden";
+    switchMode("mnemonic");
    showView("add-wallet");
 }

-function init(ctx) {
-    $("btn-generate-phrase").addEventListener("click", () => {
-        $("wallet-mnemonic").value = generateMnemonic();
-        $("add-wallet-phrase-warning").classList.remove("hidden");
-    });
+function validatePassword() {
+    const pw = $("add-wallet-password").value;
+    const pw2 = $("add-wallet-password-confirm").value;
+    if (!pw) {
+        showFlash("Please choose a password.");
+        return null;
+    }
+    if (pw.length < 12) {
+        showFlash("Password must be at least 12 characters.");
+        return null;
+    }
+    if (pw !== pw2) {
+        showFlash("Passwords do not match.");
+        return null;
+    }
+    return pw;
+}

-    $("btn-add-wallet-confirm").addEventListener("click", async () => {
-        const mnemonic = $("wallet-mnemonic").value.trim();
-        if (!mnemonic) {
-            showError(
-                "add-wallet-error",
-                "Enter a recovery phrase or press the die to generate one.",
-            );
-            return;
-        }
-        const words = mnemonic.split(/\s+/);
-        if (words.length !== 12 && words.length !== 24) {
-            showError(
-                "add-wallet-error",
-                "Recovery phrase must be 12 or 24 words. You entered " +
-                    words.length +
-                    ".",
-            );
-            return;
-        }
-        if (!isValidMnemonic(mnemonic)) {
-            showError(
-                "add-wallet-error",
-                "Invalid recovery phrase. Check for typos.",
-            );
-            return;
-        }
-        const pw = $("add-wallet-password").value;
-        const pw2 = $("add-wallet-password-confirm").value;
-        if (!pw) {
-            showError("add-wallet-error", "Please choose a password.");
-            return;
-        }
-        if (pw.length < 12) {
-            showError(
-                "add-wallet-error",
-                "Password must be at least 12 characters.",
-            );
-            return;
-        }
-        if (pw !== pw2) {
-            showError("add-wallet-error", "Passwords do not match.");
-            return;
-        }
-        const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic);
-        const duplicate = state.wallets.find(
-            (w) =>
-                w.type === "hd" &&
-                w.addresses[0] &&
-                w.addresses[0].address.toLowerCase() ===
-                    firstAddress.toLowerCase(),
+async function importMnemonic(ctx) {
+    const mnemonic = $("wallet-mnemonic").value.trim();
+    if (!mnemonic) {
+        showFlash("Enter a recovery phrase or press the die to generate one.");
+        return;
+    }
+    const words = mnemonic.split(/\s+/);
+    if (words.length !== 12 && words.length !== 24) {
+        showFlash(
+            "Recovery phrase must be 12 or 24 words. You entered " +
+                words.length +
+                ".",
        );
-        if (duplicate) {
-            showError(
-                "add-wallet-error",
-                "This recovery phrase is already added (" +
-                    duplicate.name +
-                    ").",
-            );
-            return;
-        }
-        hideError("add-wallet-error");
-        const encrypted = await encryptWithPassword(mnemonic, pw);
-        const walletNum = state.wallets.length + 1;
-        const wallet = {
-            type: "hd",
-            name: "Wallet " + walletNum,
-            xpub: xpub,
-            encryptedSecret: encrypted,
-            nextIndex: 1,
-            addresses: [
-                { address: firstAddress, balance: "0.0000", tokenBalances: [] },
-            ],
-        };
-        state.wallets.push(wallet);
-        state.hasWallet = true;
+        return;
+    }
+    if (!isValidMnemonic(mnemonic)) {
+        showFlash("Invalid recovery phrase. Check for typos.");
+        return;
+    }
+    const pw = validatePassword();
+    if (!pw) return;
+    const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic);
+    const xpubDup = findWalletByXpub(xpub);
+    if (xpubDup) {
+        showFlash(
+            "This recovery phrase is already added (" + xpubDup.name + ").",
+        );
+        return;
+    }
+    const addrDup = findWalletByAddress(firstAddress);
+    if (addrDup) {
+        showFlash("Address already exists in wallet (" + addrDup.name + ").");
+        return;
+    }
+    const encrypted = await encryptWithPassword(mnemonic, pw);
+    const walletNum = state.wallets.length + 1;
+    const wallet = {
+        type: "hd",
+        name: "Wallet " + walletNum,
+        xpub: xpub,
+        encryptedSecret: encrypted,
+        nextIndex: 1,
+        addresses: [
+            { address: firstAddress, balance: "0.0000", tokenBalances: [] },
+        ],
+    };
+    state.wallets.push(wallet);
+    state.hasWallet = true;
+    await saveState();
+    ctx.renderWalletList();
+    showView("main");
+
+    // Scan for used HD addresses beyond index 0.
+    showFlash("Scanning for addresses...", 30000);
+    const scan = await scanForAddresses(xpub, state.rpcUrl);
+    if (scan.addresses.length > 1) {
+        wallet.addresses = scan.addresses.map((a) => ({
+            address: a.address,
+            balance: "0.0000",
+            tokenBalances: [],
+        }));
+        wallet.nextIndex = scan.nextIndex;
        await saveState();
        ctx.renderWalletList();
-        showView("main");
+        showFlash("Found " + scan.addresses.length + " addresses.");
+    } else {
+        showFlash("Ready.", 1000);
+    }

-        // Scan for used HD addresses beyond index 0.
-        showFlash("Scanning for addresses...", 30000);
-        const scan = await scanForAddresses(xpub, state.rpcUrl);
-        if (scan.addresses.length > 1) {
-            wallet.addresses = scan.addresses.map((a) => ({
-                address: a.address,
-                balance: "0.0000",
-                tokenBalances: [],
-            }));
-            wallet.nextIndex = scan.nextIndex;
-            await saveState();
-            ctx.renderWalletList();
-            showFlash("Found " + scan.addresses.length + " addresses.");
-        } else {
-            showFlash("Ready.", 1000);
-        }
+    ctx.doRefreshAndRender();
+}

-        ctx.doRefreshAndRender();
+async function importPrivateKey(ctx) {
+    const key = $("import-private-key").value.trim();
+    if (!key) {
+        showFlash("Please enter your private key.");
+        return;
+    }
+    let addr;
+    try {
+        addr = addressFromPrivateKey(key);
+    } catch (e) {
+        showFlash("Invalid private key.");
+        return;
+    }
+    const pw = validatePassword();
+    if (!pw) return;
+    const duplicate = findWalletByAddress(addr);
+    if (duplicate) {
+        showFlash(
+            "This address already exists in wallet (" + duplicate.name + ").",
+        );
+        return;
+    }
+    const encrypted = await encryptWithPassword(key, pw);
+    const walletNum = state.wallets.length + 1;
+    state.wallets.push({
+        type: "key",
+        name: "Wallet " + walletNum,
+        encryptedSecret: encrypted,
+        addresses: [{ address: addr, balance: "0.0000", tokenBalances: [] }],
+    });
+    state.hasWallet = true;
+    await saveState();
+    ctx.renderWalletList();
+    showView("main");
+
+    ctx.doRefreshAndRender();
+}
+
+async function importXprvKey(ctx) {
+    const xprv = $("import-xprv-key").value.trim();
+    if (!xprv) {
+        showFlash("Please enter your extended private key.");
+        return;
+    }
+    if (!isValidXprv(xprv)) {
+        showFlash("Invalid extended private key.");
+        return;
+    }
+    let result;
+    try {
+        result = hdWalletFromXprv(xprv);
+    } catch (e) {
+        showFlash("Invalid extended private key.");
+        return;
+    }
+    const { xpub, firstAddress } = result;
+    const xpubDup = findWalletByXpub(xpub);
+    if (xpubDup) {
+        showFlash("This key is already added (" + xpubDup.name + ").");
+        return;
+    }
+    const addrDup = findWalletByAddress(firstAddress);
+    if (addrDup) {
+        showFlash("Address already exists in wallet (" + addrDup.name + ").");
+        return;
+    }
+    const pw = validatePassword();
+    if (!pw) return;
+    const encrypted = await encryptWithPassword(xprv, pw);
+    const walletNum = state.wallets.length + 1;
+    const wallet = {
+        type: "xprv",
+        name: "Wallet " + walletNum,
+        xpub: xpub,
+        encryptedSecret: encrypted,
+        nextIndex: 1,
+        addresses: [
+            { address: firstAddress, balance: "0.0000", tokenBalances: [] },
+        ],
+    };
+    state.wallets.push(wallet);
+    state.hasWallet = true;
+    await saveState();
+    ctx.renderWalletList();
+    showView("main");
+
+    // Scan for used HD addresses beyond index 0.
+    showFlash("Scanning for addresses...", 30000);
+    const scan = await scanForAddresses(xpub, state.rpcUrl);
+    if (scan.addresses.length > 1) {
+        wallet.addresses = scan.addresses.map((a) => ({
+            address: a.address,
+            balance: "0.0000",
+            tokenBalances: [],
+        }));
+        wallet.nextIndex = scan.nextIndex;
+        await saveState();
+        ctx.renderWalletList();
+        showFlash("Found " + scan.addresses.length + " addresses.");
+    } else {
+        showFlash("Ready.", 1000);
+    }
+
+    ctx.doRefreshAndRender();
+}
+
+function init(ctx) {
+    // Tab click handlers
+    $("tab-mnemonic").addEventListener("click", () => switchMode("mnemonic"));
+    $("tab-privkey").addEventListener("click", () => switchMode("privkey"));
+    $("tab-xprv").addEventListener("click", () => switchMode("xprv"));
+
+    // Generate mnemonic
+    $("btn-generate-phrase").addEventListener("click", () => {
+        $("wallet-mnemonic").value = generateMnemonic();
+        $("add-wallet-phrase-warning").style.visibility = "visible";
    });

+    // Import / confirm
+    $("btn-add-wallet-confirm").addEventListener("click", async () => {
+        if (currentMode === "mnemonic") {
+            await importMnemonic(ctx);
+        } else if (currentMode === "privkey") {
+            await importPrivateKey(ctx);
+        } else if (currentMode === "xprv") {
+            await importXprvKey(ctx);
+        }
+    });
+
+    // Back button
    $("btn-add-wallet-back").addEventListener("click", () => {
        if (!state.hasWallet) {
            showView("welcome");
@@ -130,11 +304,6 @@ function init(ctx) {
            showView("main");
        }
    });
-
-    $("btn-add-wallet-import-key").addEventListener(
-        "click",
-        ctx.showImportKeyView,
-    );
 }

 module.exports = { init, show };
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -2,8 +2,7 @@ const {
    $,
    showView,
    showFlash,
-    showError,
-    hideError,
+    flashCopyFeedback,
    balanceLinesForAddress,
    addressDotHtml,
    addressTitle,
@@ -243,6 +242,7 @@ function init(_ctx) {
        if (addr) {
            navigator.clipboard.writeText(addr);
            showFlash("Copied!");
+            flashCopyFeedback($("address-full"));
        }
    });

@@ -312,7 +312,8 @@ function init(_ctx) {
        $("export-privkey-address").textContent = addr.address;
        $("export-privkey-address").dataset.full = addr.address;
        $("export-privkey-password").value = "";
-        hideError("export-privkey-error");
+        $("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 = "";
@@ -322,7 +323,8 @@ function init(_ctx) {
    $("btn-export-privkey-confirm").addEventListener("click", async () => {
        const password = $("export-privkey-password").value;
        if (!password) {
-            showError("export-privkey-error", "Password is required.");
+            $("export-privkey-flash").textContent = "Password is required.";
+            $("export-privkey-flash").style.visibility = "visible";
            return;
        }
        const btn = $("btn-export-privkey-confirm");
@@ -343,9 +345,10 @@ function init(_ctx) {
            $("export-privkey-password-section").classList.add("hidden");
            $("export-privkey-value").textContent = privateKey;
            $("export-privkey-result").classList.remove("hidden");
-            hideError("export-privkey-error");
+            $("export-privkey-flash").style.visibility = "hidden";
        } catch {
-            showError("export-privkey-error", "Wrong password.");
+            $("export-privkey-flash").textContent = "Wrong password.";
+            $("export-privkey-flash").style.visibility = "visible";
        } finally {
            btn.disabled = false;
            btn.classList.remove("text-muted");
@@ -357,6 +360,7 @@ function init(_ctx) {
        if (key) {
            navigator.clipboard.writeText(key);
            showFlash("Copied!");
+            flashCopyFeedback($("export-privkey-value"));
        }
    });

@@ -365,6 +369,7 @@ function init(_ctx) {
        if (full) {
            navigator.clipboard.writeText(full);
            showFlash("Copied!");
+            flashCopyFeedback($("export-privkey-address"));
        }
    });

--- a/src/popup/views/addressToken.js
+++ b/src/popup/views/addressToken.js
@@ -5,6 +5,7 @@ const {
    $,
    showView,
    showFlash,
+    flashCopyFeedback,
    addressDotHtml,
    addressTitle,
    escapeHtml,
@@ -317,6 +318,7 @@ function init(_ctx) {
        if (addr) {
            navigator.clipboard.writeText(addr);
            showFlash("Copied!");
+            flashCopyFeedback($("address-token-full"));
        }
    });

@@ -325,6 +327,7 @@ function init(_ctx) {
        if (copyEl) {
            navigator.clipboard.writeText(copyEl.dataset.copy);
            showFlash("Copied!");
+            flashCopyFeedback(copyEl);
        }
    });

@@ -373,6 +376,7 @@ function init(_ctx) {
            copyEl.addEventListener("click", () => {
                navigator.clipboard.writeText(copyEl.dataset.copy);
                showFlash("Copied!");
+                flashCopyFeedback(copyEl);
            });
        }
        updateSendBalance();
--- a/src/popup/views/approval.js
+++ b/src/popup/views/approval.js
@@ -172,6 +172,8 @@ function showTxApproval(details) {
    // If this is an ERC-20 call, try to extract the real recipient and amount
    const decoded = decodeCalldata(details.txParams.data, toAddr || "");
    if (decoded && decoded.details) {
+        let decodedTokenAddr = null;
+        let decodedTokenSymbol = null;
        for (const d of decoded.details) {
            if (d.label === "Recipient" && d.address) {
                pendingTxDetails.to = d.address;
@@ -179,10 +181,20 @@ function showTxApproval(details) {
            if (d.label === "Amount") {
                pendingTxDetails.amount = d.rawValue || d.value;
            }
+            if (d.label === "Token In" && d.isToken && d.address) {
+                const t = TOKEN_BY_ADDRESS.get(d.address.toLowerCase());
+                if (t) {
+                    decodedTokenAddr = d.address;
+                    decodedTokenSymbol = t.symbol;
+                }
+            }
        }
        if (token) {
            pendingTxDetails.token = toAddr;
            pendingTxDetails.tokenSymbol = token.symbol;
+        } else if (decodedTokenAddr) {
+            pendingTxDetails.token = decodedTokenAddr;
+            pendingTxDetails.tokenSymbol = decodedTokenSymbol;
        }
    }

@@ -257,7 +269,7 @@ function showTxApproval(details) {
    }

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

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

--- a/src/popup/views/confirmTx.js
+++ b/src/popup/views/confirmTx.js
@@ -15,6 +15,7 @@ const {
    hideError,
    showView,
    showFlash,
+    flashCopyFeedback,
    addressTitle,
    addressDotHtml,
    escapeHtml,
@@ -117,6 +118,7 @@ function show(txInfo) {
            copyEl.onclick = () => {
                navigator.clipboard.writeText(copyEl.dataset.copy);
                showFlash("Copied!");
+                flashCopyFeedback(copyEl);
            };
        }
    } else {
@@ -184,9 +186,10 @@ function show(txInfo) {
                    `<div class="border border-border border-dashed p-2 mb-1 text-xs font-bold">WARNING: ${w}</div>`,
            )
            .join("");
-        warningsEl.classList.remove("hidden");
+        warningsEl.style.visibility = "visible";
    } else {
-        warningsEl.classList.add("hidden");
+        warningsEl.innerHTML = "";
+        warningsEl.style.visibility = "hidden";
    }

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

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

+    // Reset recipient warning to hidden (space always reserved, no layout shift)
+    $("confirm-recipient-warning").style.visibility = "hidden";
+
    estimateGas(txInfo);
+    checkRecipientHistory(txInfo);
 }

 async function estimateGas(txInfo) {
@@ -286,6 +294,26 @@ async function estimateGas(txInfo) {
    }
 }

+async function checkRecipientHistory(txInfo) {
+    const el = $("confirm-recipient-warning");
+    try {
+        const provider = getProvider(state.rpcUrl);
+        // Skip warning for contract addresses — they may legitimately
+        // have zero outgoing transactions (getTransactionCount returns
+        // the nonce, i.e. sent-tx count only).
+        const code = await provider.getCode(txInfo.to);
+        if (code && code !== "0x") {
+            return;
+        }
+        const txCount = await provider.getTransactionCount(txInfo.to);
+        if (txCount === 0) {
+            el.style.visibility = "visible";
+        }
+    } catch (e) {
+        log.errorf("recipient history check failed:", e.message);
+    }
+}
+
 function init(ctx) {
    $("btn-confirm-send").addEventListener("click", async () => {
        const password = $("confirm-tx-password").value;
--- a/src/popup/views/deleteWallet.js
+++ b/src/popup/views/deleteWallet.js
@@ -1,4 +1,4 @@
-const { $, showView, showFlash, showError, hideError } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { decryptWithPassword } = require("../../shared/vault");

@@ -11,7 +11,8 @@ function show(walletIdx) {
    $("delete-wallet-name").textContent =
        wallet.name || "Wallet " + (walletIdx + 1);
    $("delete-wallet-password").value = "";
-    hideError("delete-wallet-error");
+    $("delete-wallet-flash").textContent = "";
+    $("delete-wallet-flash").style.visibility = "hidden";
    showView("delete-wallet-confirm");
 }

@@ -26,15 +27,16 @@ function init(_ctx) {
    $("btn-delete-wallet-confirm").addEventListener("click", async () => {
        const pw = $("delete-wallet-password").value;
        if (!pw) {
-            showError("delete-wallet-error", "Please enter your password.");
+            $("delete-wallet-flash").textContent =
+                "Please enter your password.";
+            $("delete-wallet-flash").style.visibility = "visible";
            return;
        }

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

@@ -49,7 +51,8 @@ function init(_ctx) {
        try {
            await decryptWithPassword(wallet.encryptedSecret, pw);
        } catch (_e) {
-            showError("delete-wallet-error", "Wrong password.");
+            $("delete-wallet-flash").textContent = "Wrong password.";
+            $("delete-wallet-flash").style.visibility = "visible";
            btn.disabled = false;
            btn.classList.remove("text-muted");
            return;
--- a/src/popup/views/helpers.js
+++ b/src/popup/views/helpers.js
@@ -13,7 +13,6 @@ const { state, saveState } = require("../../shared/state");
 const VIEWS = [
    "welcome",
    "add-wallet",
-    "import-key",
    "main",
    "address",
    "address-token",
@@ -41,11 +40,13 @@ function $(id) {
 function showError(id, msg) {
    const el = $(id);
    el.textContent = msg;
-    el.classList.remove("hidden");
+    el.style.visibility = "visible";
 }

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

 function showView(name) {
@@ -259,12 +260,26 @@ function timeAgo(timestamp) {
    return years + " year" + (years !== 1 ? "s" : "") + " ago";
 }

+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,
--- a/src/popup/views/home.js
+++ b/src/popup/views/home.js
@@ -2,6 +2,7 @@ const {
    $,
    showView,
    showFlash,
+    flashCopyFeedback,
    balanceLinesForAddress,
    isoDate,
    timeAgo,
@@ -85,9 +86,10 @@ function renderActiveAddress() {
        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", () => {
+        $("active-addr-copy").addEventListener("click", (e) => {
            navigator.clipboard.writeText(addr);
            showFlash("Copied!");
+            flashCopyFeedback(e.currentTarget);
        });
    } else {
        el.textContent = "";
@@ -239,7 +241,7 @@ function render(ctx) {
        html += `<div>`;
        html += `<div class="flex justify-between items-center bg-section py-1 px-2" style="margin:0 -0.5rem">`;
        html += `<span class="font-bold cursor-pointer wallet-name underline decoration-dashed" data-wallet="${wi}">${wallet.name}</span>`;
-        if (wallet.type === "hd") {
+        if (wallet.type === "hd" || wallet.type === "xprv") {
            html += `<button class="btn-add-address border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs" data-wallet="${wi}" title="Add another address to this wallet">+</button>`;
        }
        html += `</div>`;
--- a/src/popup/views/importKey.js
+++ b/src/popup/views/importKey.js
@@ -1,74 +0,0 @@
-const { $, showView, showError, hideError } = require("./helpers");
-const { addressFromPrivateKey } = require("../../shared/wallet");
-const { encryptWithPassword } = require("../../shared/vault");
-const { state, saveState } = require("../../shared/state");
-
-function show() {
-    $("import-private-key").value = "";
-    $("import-key-password").value = "";
-    $("import-key-password-confirm").value = "";
-    hideError("import-key-error");
-    showView("import-key");
-}
-
-function init(ctx) {
-    $("btn-import-key-confirm").addEventListener("click", async () => {
-        const key = $("import-private-key").value.trim();
-        if (!key) {
-            showError("import-key-error", "Please enter your private key.");
-            return;
-        }
-        let addr;
-        try {
-            addr = addressFromPrivateKey(key);
-        } catch (e) {
-            showError("import-key-error", "Invalid private key.");
-            return;
-        }
-        const pw = $("import-key-password").value;
-        const pw2 = $("import-key-password-confirm").value;
-        if (!pw) {
-            showError("import-key-error", "Please choose a password.");
-            return;
-        }
-        if (pw.length < 12) {
-            showError(
-                "import-key-error",
-                "Password must be at least 12 characters.",
-            );
-            return;
-        }
-        if (pw !== pw2) {
-            showError("import-key-error", "Passwords do not match.");
-            return;
-        }
-        hideError("import-key-error");
-        const encrypted = await encryptWithPassword(key, pw);
-        const walletNum = state.wallets.length + 1;
-        state.wallets.push({
-            type: "key",
-            name: "Wallet " + walletNum,
-            encryptedSecret: encrypted,
-            addresses: [
-                { address: addr, balance: "0.0000", tokenBalances: [] },
-            ],
-        });
-        state.hasWallet = true;
-        await saveState();
-        ctx.renderWalletList();
-        showView("main");
-
-        ctx.doRefreshAndRender();
-    });
-
-    $("btn-import-key-back").addEventListener("click", () => {
-        if (!state.hasWallet) {
-            showView("welcome");
-        } else {
-            ctx.renderWalletList();
-            showView("main");
-        }
-    });
-}
-
-module.exports = { init, show };
--- a/src/popup/views/receive.js
+++ b/src/popup/views/receive.js
@@ -2,6 +2,7 @@ const {
    $,
    showView,
    showFlash,
+    flashCopyFeedback,
    formatAddressHtml,
    addressTitle,
 } = require("./helpers");
@@ -52,19 +53,21 @@ 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.classList.remove("hidden");
+        warningEl.style.visibility = "visible";
    } else {
-        warningEl.classList.add("hidden");
+        warningEl.textContent = "";
+        warningEl.style.visibility = "hidden";
    }
    showView("receive");
 }

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

@@ -73,6 +76,7 @@ function init(ctx) {
        if (addr) {
            navigator.clipboard.writeText(addr);
            showFlash("Copied!");
+            flashCopyFeedback($("receive-address-block"));
        }
    });

--- a/src/popup/views/settings.js
+++ b/src/popup/views/settings.js
@@ -1,4 +1,5 @@
 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");
@@ -214,6 +215,13 @@ 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;
--- a/src/popup/views/settingsAddToken.js
+++ b/src/popup/views/settingsAddToken.js
@@ -73,7 +73,8 @@ function renderDropdown() {

 function show() {
    $("settings-addtoken-address").value = "";
-    $("settings-addtoken-info").classList.add("hidden");
+    $("settings-addtoken-info").textContent = "";
+    $("settings-addtoken-info").style.visibility = "hidden";
    renderTop10();
    renderDropdown();
    showView("settings-addtoken");
@@ -129,7 +130,7 @@ function init(_ctx) {
        }
        const infoEl = $("settings-addtoken-info");
        infoEl.textContent = "Looking up token...";
-        infoEl.classList.remove("hidden");
+        infoEl.style.visibility = "visible";
        log.debugf("Looking up token contract", addr);
        try {
            const info = await lookupTokenInfo(addr, state.rpcUrl);
@@ -143,7 +144,8 @@ function init(_ctx) {
            await saveState();
            showFlash("Added " + info.symbol);
            $("settings-addtoken-address").value = "";
-            infoEl.classList.add("hidden");
+            infoEl.textContent = "";
+            infoEl.style.visibility = "hidden";
            renderTop10();
            renderDropdown();
            ctx.doRefreshAndRender();
@@ -151,7 +153,8 @@ function init(_ctx) {
            const detail = e.shortMessage || e.message || String(e);
            log.errorf("Token lookup failed for", addr, detail);
            showFlash(detail);
-            infoEl.classList.add("hidden");
+            infoEl.textContent = "";
+            infoEl.style.visibility = "hidden";
        }
    });
 }
--- a/src/popup/views/transactionDetail.js
+++ b/src/popup/views/transactionDetail.js
@@ -5,6 +5,7 @@ const {
    $,
    showView,
    showFlash,
+    flashCopyFeedback,
    addressDotHtml,
    addressTitle,
    escapeHtml,
@@ -158,8 +159,9 @@ function render() {
        loadCalldata(tx.hash, tx.to);
    }

-    $("tx-detail-time").textContent =
-        isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
+    const isoStr = isoDate(tx.timestamp);
+    $("tx-detail-time").innerHTML =
+        copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
    $("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
    showView("transaction");

@@ -170,6 +172,7 @@ function render() {
            el.onclick = () => {
                navigator.clipboard.writeText(el.dataset.copy);
                showFlash("Copied!");
+                flashCopyFeedback(el);
            };
        });
 }
@@ -247,6 +250,7 @@ async function loadCalldata(txHash, toAddress) {
                el.onclick = () => {
                    navigator.clipboard.writeText(el.dataset.copy);
                    showFlash("Copied!");
+                    flashCopyFeedback(el);
                };
            });
        }
--- a/src/popup/views/txStatus.js
+++ b/src/popup/views/txStatus.js
@@ -4,6 +4,7 @@ const {
    $,
    showView,
    showFlash,
+    flashCopyFeedback,
    addressDotHtml,
    addressTitle,
    escapeHtml,
@@ -43,10 +44,11 @@ function toAddressHtml(address) {
    if (title) {
        return (
            `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>` +
-            `<div class="break-all">${escapeHtml(address)}${extLink}</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">${escapeHtml(address)}</span>${extLink}</div>`;
+    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) {
@@ -58,6 +60,16 @@ function txHashHtml(hash) {
    );
 }

+function blockNumberHtml(blockNumber) {
+    const num = String(blockNumber);
+    const link = `https://etherscan.io/block/${num}`;
+    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)
@@ -66,6 +78,7 @@ function attachCopyHandlers(viewId) {
            el.onclick = () => {
                navigator.clipboard.writeText(el.dataset.copy);
                showFlash("Copied!");
+                flashCopyFeedback(el);
            };
        });
 }
@@ -139,7 +152,7 @@ function etherscanTokenLink(address) {

 function decodedDetailsHtml(decoded) {
    if (!decoded || !decoded.details) return "";
-    let html = "";
+    let html = `<div class="border border-border border-dashed p-2 mb-3">`;
    if (decoded.name) {
        html += `<div class="mb-2"><div class="text-xs text-muted mb-1">Action</div>`;
        html += `<div class="font-bold">${escapeHtml(decoded.name)}</div></div>`;
@@ -164,20 +177,36 @@ function decodedDetailsHtml(decoded) {
        }
        html += `</div>`;
    }
+    html += `</div>`;
    return html;
 }

 function renderSuccess() {
    const d = state.viewData;
    if (!d || !d.hash) return;
-    $("success-tx-summary").textContent = d.amount + " " + d.symbol;
-    $("success-tx-to").innerHTML = toAddressHtml(d.to);
-    $("success-tx-block").textContent = String(d.blockNumber);
+
+    const hasDecoded = d.decoded && d.decoded.details;
+
+    // When decoded details are present, the Amount and To are already
+    // shown inside the decoded well — hide the top-level duplicates.
+    const summarySection = $("success-tx-summary").parentElement;
+    const toSection = $("success-tx-to").parentElement;
+    if (hasDecoded) {
+        summarySection.classList.add("hidden");
+        toSection.classList.add("hidden");
+    } else {
+        summarySection.classList.remove("hidden");
+        toSection.classList.remove("hidden");
+        $("success-tx-summary").textContent = d.amount + " " + d.symbol;
+        $("success-tx-to").innerHTML = toAddressHtml(d.to);
+    }
+
+    $("success-tx-block").innerHTML = blockNumberHtml(d.blockNumber);
    $("success-tx-hash").innerHTML = txHashHtml(d.hash);

    // Show decoded calldata details if present
    const decodedEl = $("success-tx-decoded");
-    if (decodedEl && d.decoded) {
+    if (decodedEl && hasDecoded) {
        decodedEl.innerHTML = decodedDetailsHtml(d.decoded);
        decodedEl.classList.remove("hidden");
    } else if (decodedEl) {
--- a/src/shared/state.js
+++ b/src/shared/state.js
@@ -25,6 +25,7 @@ const DEFAULT_STATE = {
    dustThresholdGwei: 100000,
    fraudContracts: [],
    tokenHolderCache: {},
+    theme: "system",
 };

 const state = {
@@ -55,6 +56,7 @@ async function saveState() {
        dustThresholdGwei: state.dustThresholdGwei,
        fraudContracts: state.fraudContracts,
        tokenHolderCache: state.tokenHolderCache,
+        theme: state.theme,
        currentView: state.currentView,
        selectedWallet: state.selectedWallet,
        selectedAddress: state.selectedAddress,
@@ -110,6 +112,7 @@ async function loadState() {
                : 100000;
        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;
--- a/src/shared/uniswap.js
+++ b/src/shared/uniswap.js
@@ -445,12 +445,18 @@ function decode(data, toAddress) {
            const maxUint160 = BigInt(
                "0xffffffffffffffffffffffffffffffffffffffff",
            );
-            const amountStr =
-                inputAmount >= maxUint160
-                    ? "Unlimited"
-                    : formatAmount(inputAmount, inInfo.decimals) +
-                      (inSymbol ? " " + inSymbol : "");
-            details.push({ label: "Amount", value: amountStr });
+            const isUnlimited = inputAmount >= maxUint160;
+            const amountRaw = isUnlimited
+                ? "Unlimited"
+                : formatAmount(inputAmount, inInfo.decimals);
+            const amountStr = isUnlimited
+                ? "Unlimited"
+                : amountRaw + (inSymbol ? " " + inSymbol : "");
+            details.push({
+                label: "Amount",
+                value: amountStr,
+                rawValue: amountRaw,
+            });
        }

        if (outSymbol) {
--- a/src/shared/wallet.js
+++ b/src/shared/wallet.js
@@ -24,6 +24,26 @@ function hdWalletFromMnemonic(mnemonic) {
    return { xpub, firstAddress };
 }

+function hdWalletFromXprv(xprv) {
+    const root = HDNodeWallet.fromExtendedKey(xprv);
+    if (!root.privateKey) {
+        throw new Error("Not an extended private key (xprv).");
+    }
+    const node = root.derivePath("44'/60'/0'/0");
+    const xpub = node.neuter().extendedKey;
+    const firstAddress = node.deriveChild(0).address;
+    return { xpub, firstAddress };
+}
+
+function isValidXprv(key) {
+    try {
+        const node = HDNodeWallet.fromExtendedKey(key);
+        return !!node.privateKey;
+    } catch {
+        return false;
+    }
+}
+
 function addressFromPrivateKey(key) {
    const w = new Wallet(key);
    return w.address;
@@ -38,6 +58,11 @@ function getSignerForAddress(walletData, addrIndex, decryptedSecret) {
        );
        return node.deriveChild(addrIndex);
    }
+    if (walletData.type === "xprv") {
+        const root = HDNodeWallet.fromExtendedKey(decryptedSecret);
+        const node = root.derivePath("44'/60'/0'/0");
+        return node.deriveChild(addrIndex);
+    }
    return new Wallet(decryptedSecret);
 }

@@ -49,6 +74,8 @@ module.exports = {
    generateMnemonic,
    deriveAddressFromXpub,
    hdWalletFromMnemonic,
+    hdWalletFromXprv,
+    isValidXprv,
    addressFromPrivateKey,
    getSignerForAddress,
    isValidMnemonic,
Author	SHA1	Message	Date
user	be06bd8f0c	fix: improve dark mode contrast for wells and balance display All checks were successful check / check (push) Successful in 10s Details - Change dark mode --color-well from #0a0a0a to #111111 for visible contrast against #000000 background - Add explicit text-fg class to balance display element to ensure white text in dark mode	2026-03-01 03:38:27 -08:00
user	2bdb547995	feat: add theme setting (Light/Dark/System) with dark mode Add theme preference (light/dark/system) stored in extension state. System mode follows prefers-color-scheme and listens for changes. Dark mode inverts the monochrome palette (white-on-black). Theme selector added to Display section in settings. Closes #125	2026-03-01 03:36:42 -08:00
Jeffrey Paul	834228b572	Merge pull request 'fix: reserve space for all error/status messages — closes #123 ' (#124 ) from fix/issue-123-layout-shift-audit into main All checks were successful check / check (push) Successful in 8s Details Reviewed-on: #124	2026-03-01 12:33:08 +01:00
clawbot	813993f17c	fix: reserve space for all error/status messages — closes #123 All checks were successful check / check (push) Successful in 22s Details Replace display:none (hidden class) with visibility:hidden/visible for all error, warning, and status message elements across the extension UI. This prevents layout shift when messages appear or disappear. Changes: - helpers.js: showError/hideError now use visibility instead of hidden class - index.html: all error/status divs use visibility:hidden + min-height - confirmTx.js: warnings, errors, fee section use visibility - approval.js: tx-error, sign-error, danger-warning use visibility - addressDetail.js: export-privkey-flash uses visibility - deleteWallet.js: delete-wallet-flash uses visibility - addWallet.js: phrase-warning uses visibility - receive.js: erc20-warning uses visibility - addToken.js: add-token-info uses visibility - settingsAddToken.js: settings-addtoken-info uses visibility	2026-02-28 16:30:43 -08:00
Jeffrey Paul	5f01d9f111	Merge pull request 'feat: speed up copy-flash timing by ~25% — follow-up to #113 ' (#121 ) from fix/issue-100-faster-copy-flash into main All checks were successful check / check (push) Successful in 11s Details Reviewed-on: #121	2026-03-01 01:21:24 +01:00
user	d78af3ec80	feat: speed up copy-flash timing by ~25% All checks were successful check / check (push) Successful in 20s Details Reduce active phase from 100ms to 75ms, fade transition from 300ms to 225ms, and cleanup delay from 350ms to 275ms for snappier feedback. Refs #100	2026-02-28 16:17:07 -08:00
Jeffrey Paul	753fb5658a	Merge pull request 'fix: cross-wallet-type duplicate detection — closes #111 ' (#115 ) from fix/issue-111-cross-wallet-dedup into main All checks were successful check / check (push) Successful in 9s Details Reviewed-on: #115	2026-03-01 01:13:15 +01:00
Jeffrey Paul	bdb2031d46	Merge branch 'main' into fix/issue-111-cross-wallet-dedup All checks were successful check / check (push) Successful in 21s Details	2026-03-01 01:13:06 +01:00
Jeffrey Paul	25ecaee128	Merge pull request 'feat: add copy-flash visual feedback — closes #100 ' (#113 ) from fix/issue-100-copy-flash-feedback into main All checks were successful check / check (push) Successful in 21s Details Reviewed-on: #113	2026-03-01 01:12:40 +01:00
user	ff4b5ee24d	feat: add copy-flash visual feedback on click-to-copy All checks were successful check / check (push) Successful in 9s Details When a user clicks to copy text (addresses, tx hashes, etc.), the copied element now briefly flashes with inverted colors (bg/fg swap) and fades back over ~300ms. This provides localized visual feedback in addition to the existing flash message. Applied to all click-to-copy elements across all views. closes #100	2026-03-01 01:01:34 +01:00
user	ca6e9054f9	fix: cross-wallet-type duplicate detection for all import methods All checks were successful check / check (push) Successful in 22s Details - Private key import now checks ALL wallets (hd, xprv, key) for address conflicts - xprv import now checks xpub against existing xpubs and addresses across all wallet types - Mnemonic import now checks xpub against xprv wallets and addresses across all types - Extract findWalletByAddress() and findWalletByXpub() helpers for consistent dedup closes #111	2026-02-28 15:58:47 -08:00
Jeffrey Paul	09c52b2519	Merge pull request 'feat: show red warning when sending to address with zero tx history' (#98 ) from issue-82-zero-tx-warning into main All checks were successful check / check (push) Successful in 8s Details Reviewed-on: #98	2026-03-01 00:54:15 +01:00
Jeffrey Paul	1fb9fade51	Merge branch 'main' into issue-82-zero-tx-warning All checks were successful check / check (push) Successful in 22s Details	2026-03-01 00:53:45 +01:00
Jeffrey Paul	bc04482fb5	Merge pull request 'feat: add xprv wallet import support' (#53 ) from feature/import-xprv into main All checks were successful check / check (push) Successful in 8s Details Reviewed-on: #53	2026-03-01 00:53:08 +01:00
user	045328f3b9	fix: use visibility:hidden/visible instead of CSS transitions for zero-tx warning All checks were successful check / check (push) Successful in 22s Details Remove all CSS transitions, max-height changes, and opacity animations. The warning container always reserves its space with visibility:hidden and switches to visibility:visible when needed. No layout shift ever.	2026-02-28 15:46:58 -08:00
user	576fe3ab15	fix: replace visibility:hidden with smooth collapse for zero-tx warning All checks were successful check / check (push) Successful in 10s Details Instead of permanently reserving space with visibility:hidden, the warning container now uses max-height + opacity transitions. Space is reserved during the async check, then smoothly collapses to 0 if the warning isn't needed. This reclaims ~40px of popup viewport in the common case.	2026-02-28 15:37:27 -08:00
user	35bb6b9806	fix: add hover classes to all inactive tabs in switchMode() All checks were successful check / check (push) Successful in 22s Details The 'From Phrase' tab was missing hover:bg-fg and hover:text-bg classes when transitioning from active to inactive state. switchMode() now explicitly toggles these hover classes on all tabs, ensuring identical hover behavior across all three inactive tabs.	2026-02-28 15:33:26 -08:00
user	e56e15e34c	style: tabby tab styling with dashed inactive borders and hover invert - Active tab: solid border on top/sides, bottom border matches background (connects to content area), bold text - Inactive tabs: dashed borders in border-light color, muted text, transparent bottom border - Inactive hover: invert (bg-fg text-bg) for clear clickability signal - All three tabs behave identically on hover	2026-02-28 15:33:26 -08:00
user	cc69ce39ed	fix tabs: use underline tab style with hover on all tabs Tabs are not buttons (they change UI state, not application state). All tabs now use underline style with identical hover behavior: - Active: bold text + solid bottom border - Inactive: muted text + transparent bottom border - Hover (all tabs): text brightens to fg + bottom border appears This ensures all tabs clearly indicate clickability on hover, including the currently active one.	2026-02-28 15:33:26 -08:00
user	9476724284	fix tab affordance: use standard button style with border + hover invert Per README clickable affordance policy: all tabs now use visible border, padding, and hover:bg-fg hover:text-bg (invert to white-on-black). Active tab is inverted (bg-fg text-bg). All three tabs behave identically on hover regardless of active state.	2026-02-28 15:33:26 -08:00
user	9246959777	fix: tab labels add (xprv) suffix, restyle tabs as underline view switcher - Rename 'From Extended Key' to 'From Extended Key (xprv)' - Replace box-border tab style with underline indicator pattern - Active tab: bold text + solid bottom border - Inactive tabs: muted text + transparent bottom border with hover state - Tabs now clearly read as mutually-exclusive view switchers, not buttons	2026-02-28 15:33:26 -08:00
user	0f6daf3200	restyle tabs as classic tab bar with connected active tab	2026-02-28 15:33:26 -08:00
user	435669b6b6	fix: use full tab labels and add hover border for tab affordance - 'From Phrase' → 'From Recovery Phrase' - 'From Key' → 'From Private Key' - 'From xprv' → 'From Extended Key' - Add hover:border-fg to inactive tabs for visible hover affordance	2026-02-28 15:33:26 -08:00
user	f75a258125	restyle add-wallet tabs: 'From' prefix, underline tab style - Tab labels: 'From Phrase', 'From Key', 'From xprv' - Visual: bottom-border underline on active tab (not filled buttons) - Inactive tabs: muted text with hover highlight - Container: bottom border connects tabs to content area	2026-02-28 15:33:26 -08:00
user	4d120e5ea9	refactor: unify add-wallet, import-key, and import-xprv into single view Merge all three wallet import methods (recovery phrase, private key, extended key/xprv) into one tabbed add-wallet view with a mode selector. This fixes the blank import-xprv render (it was missing from the VIEWS array) and the broken back-button navigation from the separate import views. - Add tab selector: Recovery Phrase \| Private Key \| Extended Key (xprv) - Share password fields across all modes - Remove separate import-key and import-xprv views and modules - Add duplicate wallet detection for private key imports - All tabs follow affordance policy (visible border + hover state) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-28 15:33:26 -08:00
user	57959b70c3	fix: derive xprv addresses from correct BIP44 path (m/44'/60'/0'/0) hdWalletFromXprv() and getSignerForAddress() for xprv type were deriving addresses directly from the root key (m/N) instead of the standard BIP44 Ethereum path (m/44'/60'/0'/0/N). This caused imported xprv wallets to generate completely wrong addresses. Navigate to the BIP44 Ethereum derivation path before deriving child addresses, matching the behavior of mnemonic-based wallet imports.	2026-02-28 15:33:26 -08:00
user	7a7f9c5135	feat: add xprv wallet import support Add the ability to import an existing HD wallet using an extended private key (xprv) instead of a mnemonic phrase. - New 'xprv' wallet type with full HD derivation and address scanning - New importXprv view with password encryption - Updated getSignerForAddress to handle xprv wallet type - Added xprv link to the add-wallet view - Allow adding derived addresses for xprv wallets Closes #20	2026-02-28 15:33:26 -08:00
user	8c071ae508	fix: never collapse warning container — always reserve space to prevent layout shift All checks were successful check / check (push) Successful in 10s Details Replace display:none with persistent visibility:hidden so the warning area occupies the same vertical space regardless of API result. This eliminates the layout shift that occurred when the container was collapsed after the recipient history check returned.	2026-02-28 15:26:49 -08:00
user	a3c2b8227a	fix: zero-tx warning layout shift and contract address false positive - Reserve space for the warning upfront using visibility:hidden instead of display:none, preventing layout shift per README policy - Move warning HTML to index.html as a static element rather than injecting dynamically - Skip warning for contract addresses (check getCode first) since getTransactionCount only returns outgoing tx nonce - Collapse reserved space when warning is not needed (address has history, is a contract, or on RPC error)	2026-02-28 15:26:44 -08:00
user	f9f3e7b85a	feat: show red warning when sending to address with zero tx history On the confirm-tx view, asynchronously check the recipient address transaction count via getTransactionCount(). If zero, display a prominent red warning advising the user to double-check the address. Closes #82	2026-02-28 15:26:44 -08:00
Jeffrey Paul	812fc01a98	Merge pull request 'feat: add etherscan link and click-to-copy on block number in success-tx view' (#102 ) from issue-99-block-number-link into main All checks were successful check / check (push) Successful in 10s Details Reviewed-on: #102	2026-03-01 00:23:07 +01:00
user	811c125cb9	fix: remove click-to-copy from timestamps in list views All checks were successful check / check (push) Successful in 22s Details List view rows (home, addressDetail, addressToken) should only be clickable as a whole to navigate to the detail view. Click-to-copy on individual elements belongs only in the transaction detail view. Reverts timestamp click-to-copy changes in list views per review feedback. Keeps blockNumberHtml() and detail-view timestamp changes.	2026-02-28 15:21:13 -08:00
user	3005813f2c	feat: add click-to-copy on timestamps in all transaction list views All checks were successful check / check (push) Successful in 9s Details Adds click-to-copy (copies ISO date string) to timestamp displays in: - home view (relative time ago) - addressDetail view (relative time ago) - addressToken view (relative time ago) - transactionDetail view (full ISO date) All timestamps now show dashed underline to indicate copyability, matching the existing UX pattern for addresses, tx hashes, and block numbers.	2026-02-28 14:40:11 -08:00
user	5565e76796	feat: add etherscan link and click-to-copy on block number in success-tx view All checks were successful check / check (push) Successful in 22s Details Block numbers are blockchain entities like addresses and tx hashes. They now receive the same treatment: click-to-copy and an external link icon pointing to etherscan.io/block/{number}. Closes #99	2026-02-28 14:09:23 -08:00
Jeffrey Paul	dc8ec7d28f	Merge pull request 'fix: make success-tx addresses clickable, fix USDT ETH bug, nest decoded details (closes #80 )' (#94 ) from fix/issue-80-success-tx-display into main All checks were successful check / check (push) Successful in 10s Details Reviewed-on: #94	2026-02-28 22:57:37 +01:00
user	2fbed343db	fix: make success-tx addresses clickable, fix USDT ETH bug, nest decoded details (closes #80 ) All checks were successful check / check (push) Successful in 22s Details - Add underline + click-to-copy (data-copy) to addresses in toAddressHtml() so they match the style used everywhere else in the extension - Fix 'USDT ETH' display: add rawValue to Uniswap decoder Amount details and extract Token In info for proper symbol resolution in approval.js - Hide redundant top-level Amount/To when decoded details are present (they already show the same info inside the decoded section) - Wrap decoded calldata details in a bordered well for visual separation	2026-02-28 13:36:19 -08:00