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
refactor: unify add-wallet, import-key, and import-xprv into single view
2026-02-28 12:44:48 -08:00 · 2026-02-28 12:44:48 -08:00 · 2026-02-28 12:44:48 -08:00 · 2026-02-28 12:44:48 -08:00 · 2026-02-28 21:38:22 +01:00 · 2026-02-28 21:37:38 +01:00
19 changed files with 842 additions and 311 deletions
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -56,37 +56,104 @@
                    &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-2 py-1 cursor-pointer text-xs border-b-2 border-fg font-bold"
                    >
-                        [&#9856;]
+                        From Phrase
+                    </button>
+                    <button
+                        id="tab-privkey"
+                        class="px-2 py-1 cursor-pointer text-xs border-b-2 border-transparent text-muted hover:text-fg"
+                    >
+                        From Key
+                    </button>
+                    <button
+                        id="tab-xprv"
+                        class="px-2 py-1 cursor-pointer text-xs border-b-2 border-transparent text-muted hover:text-fg"
+                    >
+                        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 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>
@@ -107,64 +174,6 @@
                <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>
-                <button
-                    id="btn-import-key-confirm"
-                    class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
                >
                    Import
                </button>
@@ -305,6 +314,26 @@
                    >
                        + Token
                    </button>
+                    <div class="relative">
+                        <button
+                            id="btn-more-menu"
+                            class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
+                            aria-label="More actions"
+                        >
+                            &middot;&middot;&middot;
+                        </button>
+                        <div
+                            id="more-menu-dropdown"
+                            class="hidden absolute right-0 top-full mt-1 border border-border bg-bg z-50 whitespace-nowrap py-1"
+                        >
+                            <button
+                                id="btn-export-privkey"
+                                class="block w-full text-left px-4 py-1.5 text-xs font-light text-muted hover:bg-hover hover:text-fg cursor-pointer"
+                            >
+                                Export Private Key
+                            </button>
+                        </div>
+                    </div>
                </div>

                <!-- transactions -->
@@ -318,6 +347,60 @@
                </div>
            </div>

+            <!-- ============ EXPORT PRIVATE KEY VIEW ============ -->
+            <div id="view-export-privkey" class="view hidden">
+                <button
+                    id="btn-export-privkey-back"
+                    class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
+                >
+                    &lt; Back
+                </button>
+                <div
+                    id="export-privkey-jazzicon"
+                    class="flex justify-center mt-1 mb-3"
+                ></div>
+                <h2 class="font-bold mb-1">Export Private Key</h2>
+                <p class="text-xs mb-1" id="export-privkey-title"></p>
+                <p class="text-xs mb-3">
+                    <span id="export-privkey-dot"></span>
+                    <span
+                        id="export-privkey-address"
+                        class="cursor-pointer"
+                        title="Click to copy"
+                    ></span>
+                </p>
+                <p class="text-xs mb-3 text-muted">
+                    Warning: anyone with this private key can access and
+                    transfer all funds from this address. Never share it.
+                </p>
+                <div
+                    id="export-privkey-flash"
+                    class="text-xs mb-2 hidden"
+                ></div>
+                <div id="export-privkey-password-section" class="mb-2">
+                    <label class="block mb-1">Password</label>
+                    <input
+                        type="password"
+                        id="export-privkey-password"
+                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
+                        placeholder="Enter your password to continue"
+                    />
+                    <button
+                        id="btn-export-privkey-confirm"
+                        class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mt-2"
+                    >
+                        Reveal
+                    </button>
+                </div>
+                <div id="export-privkey-result" class="hidden">
+                    <div
+                        id="export-privkey-value"
+                        class="bg-danger-well rounded p-2 font-mono text-xs break-all cursor-pointer mb-1"
+                        title="Click to copy"
+                    ></div>
+                </div>
+            </div>
+
            <!-- ============ ADDRESS-TOKEN DETAIL VIEW ============ -->
            <div id="view-address-token" class="view hidden">
                <button
@@ -422,6 +505,11 @@
                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
                        placeholder="Address (0x...) or ENS name"
                    />
+                    <div
+                        id="send-to-error"
+                        class="text-xs"
+                        style="min-height: 1.25rem; color: #cc0000"
+                    ></div>
                </div>
                <div class="mb-2">
                    <div class="flex justify-between mb-1">
@@ -531,6 +619,7 @@
            <!-- ============ TX SUCCESS ============ -->
            <div id="view-success-tx" class="view hidden">
                <h2 class="font-bold mb-2">Transaction Confirmed</h2>
+                <div id="success-tx-decoded" class="mb-3 hidden text-xs"></div>
                <div class="mb-3">
                    <div class="text-xs text-muted mb-1">Amount</div>
                    <div id="success-tx-summary" class="font-bold"></div>
@@ -636,9 +725,10 @@
                <div class="flex justify-center mb-3">
                    <canvas id="receive-qr"></canvas>
                </div>
-                <div class="border border-border p-2 break-all mb-3 text-xs">
-                    <span id="receive-dot"></span>
-                    <span id="receive-address" class="select-all"></span>
+                <div
+                    class="border border-border p-2 break-all mb-3 text-xs cursor-pointer"
+                >
+                    <span id="receive-address-block" class="select-all"></span>
                    <span id="receive-etherscan-link"></span>
                </div>
                <button
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -10,7 +10,6 @@ const { $, showView } = require("./views/helpers");
 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 +53,6 @@ const ctx = {
    renderWalletList,
    doRefreshAndRender,
    showAddWalletView: () => addWallet.show(),
-    showImportKeyView: () => importKey.show(),
    showAddressDetail: () => addressDetail.show(),
    showAddressToken: () => addressToken.show(),
    showAddTokenView: () => addToken.show(),
@@ -209,7 +207,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
@@ -11,6 +11,7 @@
    --color-border-light: #cccccc;
    --color-hover: #eeeeee;
    --color-well: #f5f5f5;
+    --color-danger-well: #fef2f2;
    --color-section: #dddddd;
 }

--- a/src/popup/views/addWallet.js
+++ b/src/popup/views/addWallet.js
@@ -3,114 +3,275 @@ 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");

+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);
+        tab.classList.toggle("border-fg", m === mode);
+        tab.classList.toggle("font-bold", m === mode);
+        tab.classList.toggle("border-transparent", m !== mode);
+        tab.classList.toggle("text-muted", m !== mode);
+    }
+    $("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");
+    switchMode("mnemonic");
    showView("add-wallet");
 }

+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;
+}
+
+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 +
+                ".",
+        );
+        return;
+    }
+    if (!isValidMnemonic(mnemonic)) {
+        showFlash("Invalid recovery phrase. Check for typos.");
+        return;
+    }
+    const pw = validatePassword();
+    if (!pw) 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(),
+    );
+    if (duplicate) {
+        showFlash(
+            "This recovery phrase is already added (" + duplicate.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();
+        showFlash("Found " + scan.addresses.length + " addresses.");
+    } else {
+        showFlash("Ready.", 1000);
+    }
+
+    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 = state.wallets.find(
+        (w) =>
+            w.type === "key" &&
+            w.addresses[0] &&
+            w.addresses[0].address.toLowerCase() === addr.toLowerCase(),
+    );
+    if (duplicate) {
+        showFlash(
+            "This private key is already added (" + 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 duplicate = state.wallets.find(
+        (w) =>
+            (w.type === "hd" || w.type === "xprv") &&
+            w.addresses[0] &&
+            w.addresses[0].address.toLowerCase() === firstAddress.toLowerCase(),
+    );
+    if (duplicate) {
+        showFlash("This key is already added (" + duplicate.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").classList.remove("hidden");
    });

+    // Import / confirm
    $("btn-add-wallet-confirm").addEventListener("click", async () => {
-        const mnemonic = $("wallet-mnemonic").value.trim();
-        if (!mnemonic) {
-            showFlash(
-                "Enter a recovery phrase or press the die to generate one.",
-            );
-            return;
+        if (currentMode === "mnemonic") {
+            await importMnemonic(ctx);
+        } else if (currentMode === "privkey") {
+            await importPrivateKey(ctx);
+        } else if (currentMode === "xprv") {
+            await importXprvKey(ctx);
        }
-        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 +
-                    ".",
-            );
-            return;
-        }
-        if (!isValidMnemonic(mnemonic)) {
-            showFlash("Invalid recovery phrase. Check for typos.");
-            return;
-        }
-        const pw = $("add-wallet-password").value;
-        const pw2 = $("add-wallet-password-confirm").value;
-        if (!pw) {
-            showFlash("Please choose a password.");
-            return;
-        }
-        if (pw.length < 12) {
-            showFlash("Password must be at least 12 characters.");
-            return;
-        }
-        if (pw !== pw2) {
-            showFlash("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(),
-        );
-        if (duplicate) {
-            showFlash(
-                "This recovery phrase is already added (" +
-                    duplicate.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();
-            showFlash("Found " + scan.addresses.length + " addresses.");
-        } else {
-            showFlash("Ready.", 1000);
-        }
-
-        ctx.doRefreshAndRender();
    });

+    // Back button
    $("btn-add-wallet-back").addEventListener("click", () => {
        if (!state.hasWallet) {
            showView("welcome");
@@ -119,11 +280,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
@@ -15,9 +15,15 @@ const {
    filterTransactions,
 } = require("../../shared/transactions");
 const { resolveEnsNames } = require("../../shared/ens");
-const { updateSendBalance, renderSendTokenSelect } = require("./send");
+const {
+    updateSendBalance,
+    renderSendTokenSelect,
+    resetSendValidation,
+} = require("./send");
 const { log } = require("../../shared/log");
 const makeBlockie = require("ethereum-blockies-base64");
+const { decryptWithPassword } = require("../../shared/vault");
+const { getSignerForAddress } = require("../../shared/wallet");

 let ctx;

@@ -257,6 +263,7 @@ function init(_ctx) {
        $("send-token").classList.remove("hidden");
        $("send-token-static").classList.add("hidden");
        updateSendBalance();
+        resetSendValidation();
        showView("send");
    });

@@ -265,6 +272,102 @@ function init(_ctx) {
    });

    $("btn-add-token").addEventListener("click", ctx.showAddTokenView);
+
+    // More menu dropdown
+    const moreBtn = $("btn-more-menu");
+    const moreDropdown = $("more-menu-dropdown");
+    moreBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const isOpen = !moreDropdown.classList.toggle("hidden");
+        moreBtn.classList.toggle("bg-fg", isOpen);
+        moreBtn.classList.toggle("text-bg", isOpen);
+    });
+    document.addEventListener("click", () => {
+        moreDropdown.classList.add("hidden");
+        moreBtn.classList.remove("bg-fg", "text-bg");
+    });
+    moreDropdown.addEventListener("click", (e) => {
+        e.stopPropagation();
+    });
+
+    $("btn-export-privkey").addEventListener("click", () => {
+        moreDropdown.classList.add("hidden");
+        moreBtn.classList.remove("bg-fg", "text-bg");
+        const wallet = state.wallets[state.selectedWallet];
+        const addr = wallet.addresses[state.selectedAddress];
+        const blockieEl = $("export-privkey-jazzicon");
+        blockieEl.innerHTML = "";
+        const bImg = document.createElement("img");
+        bImg.src = makeBlockie(addr.address);
+        bImg.width = 48;
+        bImg.height = 48;
+        bImg.style.imageRendering = "pixelated";
+        bImg.style.borderRadius = "50%";
+        blockieEl.appendChild(bImg);
+        $("export-privkey-title").textContent =
+            wallet.name + " \u2014 Address " + (state.selectedAddress + 1);
+        $("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-password-section").classList.remove("hidden");
+        $("export-privkey-result").classList.add("hidden");
+        $("export-privkey-value").textContent = "";
+        showView("export-privkey");
+    });
+
+    $("btn-export-privkey-confirm").addEventListener("click", async () => {
+        const password = $("export-privkey-password").value;
+        if (!password) {
+            $("export-privkey-flash").textContent = "Password is required.";
+            $("export-privkey-flash").classList.remove("hidden");
+            return;
+        }
+        const wallet = state.wallets[state.selectedWallet];
+        try {
+            const secret = await decryptWithPassword(
+                wallet.encryptedSecret,
+                password,
+            );
+            const signer = getSignerForAddress(
+                wallet,
+                state.selectedAddress,
+                secret,
+            );
+            const privateKey = signer.privateKey;
+            $("export-privkey-password-section").classList.add("hidden");
+            $("export-privkey-value").textContent = privateKey;
+            $("export-privkey-result").classList.remove("hidden");
+            $("export-privkey-flash").classList.add("hidden");
+        } catch {
+            $("export-privkey-flash").textContent = "Wrong password.";
+            $("export-privkey-flash").classList.remove("hidden");
+        }
+    });
+
+    $("export-privkey-value").addEventListener("click", () => {
+        const key = $("export-privkey-value").textContent;
+        if (key) {
+            navigator.clipboard.writeText(key);
+            showFlash("Copied!");
+        }
+    });
+
+    $("export-privkey-address").addEventListener("click", () => {
+        const full = $("export-privkey-address").dataset.full;
+        if (full) {
+            navigator.clipboard.writeText(full);
+            showFlash("Copied!");
+        }
+    });
+
+    $("btn-export-privkey-back").addEventListener("click", () => {
+        $("export-privkey-value").textContent = "";
+        $("export-privkey-password").value = "";
+        show();
+    });
 }

 module.exports = { init, show };
--- a/src/popup/views/addressToken.js
+++ b/src/popup/views/addressToken.js
@@ -12,7 +12,7 @@ const {
    balanceLine,
 } = require("./helpers");
 const { state, currentAddress, saveState } = require("../../shared/state");
-const { TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
+const { TOKEN_BY_ADDRESS, resolveSymbol } = require("../../shared/tokenList");
 const {
    formatUsd,
    getPrice,
@@ -23,7 +23,11 @@ const {
    filterTransactions,
 } = require("../../shared/transactions");
 const { resolveEnsNames } = require("../../shared/ens");
-const { updateSendBalance, renderSendTokenSelect } = require("./send");
+const {
+    updateSendBalance,
+    renderSendTokenSelect,
+    resetSendValidation,
+} = require("./send");
 const { log } = require("../../shared/log");
 const makeBlockie = require("ethereum-blockies-base64");

@@ -96,14 +100,11 @@ function show() {
        const tb = (addr.tokenBalances || []).find(
            (t) => t.address.toLowerCase() === tokenId.toLowerCase(),
        );
-        const tracked = (state.trackedTokens || []).find(
-            (t) => t.address.toLowerCase() === tokenId.toLowerCase(),
+        symbol = resolveSymbol(
+            tokenId,
+            addr.tokenBalances,
+            state.trackedTokens,
        );
-        symbol =
-            (tb && tb.symbol) ||
-            (tracked && tracked.symbol) ||
-            (knownToken && knownToken.symbol) ||
-            "?";
        amount = tb ? parseFloat(tb.balance || "0") : 0;
        price = getPrice(symbol);
    }
@@ -375,6 +376,7 @@ function init(_ctx) {
            });
        }
        updateSendBalance();
+        resetSendValidation();
        showView("send");
    });

--- a/src/popup/views/approval.js
+++ b/src/popup/views/approval.js
@@ -167,11 +167,9 @@ function showTxApproval(details) {
        tokenSymbol: token ? token.symbol : null,
    };

-    // If this is an ERC-20 call or a swap, extract the real recipient, amount, and token info
+    // 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 decodedTokenSymbol = null;
-        let decodedTokenAddress = null;
        for (const d of decoded.details) {
            if (d.label === "Recipient" && d.address) {
                pendingTxDetails.to = d.address;
@@ -179,22 +177,22 @@ function showTxApproval(details) {
            if (d.label === "Amount") {
                pendingTxDetails.amount = d.rawValue || d.value;
            }
-            if (d.label === "Token In" && !decodedTokenSymbol) {
-                // Extract token symbol and address from decoded details
-                decodedTokenSymbol = d.value;
-                if (d.address) decodedTokenAddress = d.address;
-            }
        }
        if (token) {
            pendingTxDetails.token = toAddr;
            pendingTxDetails.tokenSymbol = token.symbol;
-        } else if (decodedTokenAddress) {
-            // For swaps through routers: use the input token info
-            pendingTxDetails.token = decodedTokenAddress;
-            pendingTxDetails.tokenSymbol = decodedTokenSymbol;
        }
    }

+    // Carry decoded calldata info through to success/error views
+    if (decoded) {
+        pendingTxDetails.decoded = {
+            name: decoded.name,
+            description: decoded.description,
+            details: decoded.details,
+        };
+    }
+
    $("approve-tx-hostname").textContent = details.hostname;
    $("approve-tx-from").innerHTML = approvalAddressHtml(state.activeAddress);

--- a/src/popup/views/confirmTx.js
+++ b/src/popup/views/confirmTx.js
@@ -14,6 +14,7 @@ const {
    showError,
    hideError,
    showView,
+    showFlash,
    addressTitle,
    addressDotHtml,
    escapeHtml,
@@ -95,11 +96,22 @@ function show(txInfo) {
    // Token contract section (ERC-20 only)
    const tokenSection = $("confirm-token-section");
    if (isErc20) {
+        const dot = addressDotHtml(txInfo.token);
        const link = etherscanTokenLink(txInfo.token);
        $("confirm-token-contract").innerHTML =
-            escapeHtml(txInfo.token) +
-            ` <a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+            `<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");
+        // 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");
    }
--- 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",
@@ -31,6 +30,7 @@ const VIEWS = [
    "approve-site",
    "approve-tx",
    "approve-sign",
+    "export-privkey",
 ];

 function $(id) {
--- a/src/popup/views/home.js
+++ b/src/popup/views/home.js
@@ -11,7 +11,11 @@ const {
    truncateMiddle,
 } = require("./helpers");
 const { state, saveState, currentAddress } = require("../../shared/state");
-const { updateSendBalance, renderSendTokenSelect } = require("./send");
+const {
+    updateSendBalance,
+    renderSendTokenSelect,
+    resetSendValidation,
+} = require("./send");
 const { deriveAddressFromXpub } = require("../../shared/wallet");
 const {
    formatUsd,
@@ -235,7 +239,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>`;
@@ -388,6 +392,7 @@ function init(ctx) {
        $("send-token-static").classList.add("hidden");
        renderSendTokenSelect(addr);
        updateSendBalance();
+        resetSendValidation();
        showView("send");
    });

--- a/src/popup/views/importKey.js
+++ b/src/popup/views/importKey.js
@@ -1,69 +0,0 @@
-const { $, showView, showFlash } = 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 = "";
-    showView("import-key");
-}
-
-function init(ctx) {
-    $("btn-import-key-confirm").addEventListener("click", async () => {
-        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 = $("import-key-password").value;
-        const pw2 = $("import-key-password-confirm").value;
-        if (!pw) {
-            showFlash("Please choose a password.");
-            return;
-        }
-        if (pw.length < 12) {
-            showFlash("Password must be at least 12 characters.");
-            return;
-        }
-        if (pw !== pw2) {
-            showFlash("Passwords do not match.");
-            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();
-    });
-
-    $("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
@@ -1,4 +1,10 @@
-const { $, showView, showFlash, addressDotHtml } = require("./helpers");
+const {
+    $,
+    showView,
+    showFlash,
+    formatAddressHtml,
+    addressTitle,
+} = require("./helpers");
 const { state, currentAddress } = require("../../shared/state");
 const QRCode = require("qrcode");

@@ -12,8 +18,12 @@ const EXT_ICON =
 function show() {
    const addr = currentAddress();
    const address = addr ? addr.address : "";
-    $("receive-dot").innerHTML = address ? addressDotHtml(address) : "";
-    $("receive-address").textContent = address;
+    const title = address ? addressTitle(address, state.wallets) : null;
+    const ensName = addr ? addr.ensName || null : null;
+    $("receive-address-block").innerHTML = address
+        ? formatAddressHtml(address, ensName, null, title)
+        : "";
+    $("receive-address-block").dataset.full = address;
    const link = address ? `https://etherscan.io/address/${address}` : "";
    $("receive-etherscan-link").innerHTML = link
        ? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
@@ -50,8 +60,16 @@ function show() {
 }

 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").textContent;
+        const addr = $("receive-address-block").dataset.full;
        if (addr) {
            navigator.clipboard.writeText(addr);
            showFlash("Copied!");
--- a/src/popup/views/send.js
+++ b/src/popup/views/send.js
@@ -10,7 +10,108 @@ const {
 const { state, currentAddress } = require("../../shared/state");
 let ctx;
 const { getProvider } = require("../../shared/balances");
-const { KNOWN_SYMBOLS, TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
+const { KNOWN_SYMBOLS, resolveSymbol } = require("../../shared/tokenList");
+const { getAddress } = require("ethers");
+
+const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
+
+/**
+ * Validate a destination address string.
+ * Returns { valid: true } or { valid: false, error: "..." }.
+ */
+function validateToAddress(value) {
+    const v = value.trim();
+    if (!v) return { valid: false, error: "" };
+
+    // ENS names: contains a dot and doesn't start with 0x
+    if (v.includes(".") && !v.startsWith("0x")) {
+        // Basic ENS format check: at least one label before and after dot
+        if (/^[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)+$/.test(v)) {
+            return { valid: true };
+        }
+        return {
+            valid: false,
+            error: "Please enter a valid ENS name.",
+        };
+    }
+
+    // Must look like an Ethereum address
+    if (!/^0x[0-9a-fA-F]{40}$/.test(v)) {
+        return {
+            valid: false,
+            error: "Please enter a valid Ethereum address.",
+        };
+    }
+
+    // Reject zero address
+    if (v.toLowerCase() === ZERO_ADDRESS) {
+        return {
+            valid: false,
+            error: "Sending to the zero address is not allowed.",
+        };
+    }
+
+    // EIP-55 checksum validation: all-lowercase is ok, otherwise must match checksum
+    if (v !== v.toLowerCase()) {
+        try {
+            const checksummed = getAddress(v);
+            if (checksummed !== v) {
+                return {
+                    valid: false,
+                    error: "Address checksum is invalid. Please double-check the address.",
+                };
+            }
+        } catch {
+            return {
+                valid: false,
+                error: "Address checksum is invalid. Please double-check the address.",
+            };
+        }
+    }
+
+    // Warn if sending to own address
+    const addr = currentAddress();
+    if (addr && v.toLowerCase() === addr.address.toLowerCase()) {
+        // Allow but will warn — we return valid with a warning
+        return {
+            valid: true,
+            warning: "This is your own address. Are you sure?",
+        };
+    }
+
+    return { valid: true };
+}
+
+function updateToValidation() {
+    const input = $("send-to");
+    const errorEl = $("send-to-error");
+    const btn = $("btn-send-review");
+    const value = input.value.trim();
+
+    if (!value) {
+        errorEl.textContent = "";
+        btn.disabled = true;
+        btn.classList.add("opacity-50");
+        return;
+    }
+
+    const result = validateToAddress(value);
+    if (!result.valid) {
+        errorEl.textContent = result.error;
+        errorEl.style.color = "#cc0000";
+        btn.disabled = true;
+        btn.classList.add("opacity-50");
+    } else if (result.warning) {
+        errorEl.textContent = result.warning;
+        errorEl.style.color = "#b8860b";
+        btn.disabled = false;
+        btn.classList.remove("opacity-50");
+    } else {
+        errorEl.textContent = "";
+        btn.disabled = false;
+        btn.classList.remove("opacity-50");
+    }
+}

 const EXT_ICON =
    `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
@@ -73,15 +174,11 @@ function updateSendBalance() {
        const tb = (addr.tokenBalances || []).find(
            (t) => t.address.toLowerCase() === token.toLowerCase(),
        );
-        const knownToken = TOKEN_BY_ADDRESS.get(token.toLowerCase());
-        const tracked = (state.trackedTokens || []).find(
-            (t) => t.address.toLowerCase() === token.toLowerCase(),
+        const symbol = resolveSymbol(
+            token,
+            addr.tokenBalances,
+            state.trackedTokens,
        );
-        const symbol =
-            (tb && tb.symbol) ||
-            (tracked && tracked.symbol) ||
-            (knownToken && knownToken.symbol) ||
-            "?";
        const bal = tb ? tb.balance || "0" : "0";
        $("send-balance").textContent =
            "Current balance: " + bal + " " + symbol;
@@ -92,6 +189,13 @@ function init(_ctx) {
    ctx = _ctx;
    $("send-token").addEventListener("change", updateSendBalance);

+    // Initial state: disable review button until address is entered
+    $("btn-send-review").disabled = true;
+    $("btn-send-review").classList.add("opacity-50");
+
+    // Validate address on input
+    $("send-to").addEventListener("input", updateToValidation);
+
    $("btn-send-review").addEventListener("click", async () => {
        const to = $("send-to").value.trim();
        const amount = $("send-amount").value.trim();
@@ -99,6 +203,15 @@ function init(_ctx) {
            showFlash("Please enter a recipient address.");
            return;
        }
+
+        // Re-validate before proceeding
+        const validation = validateToAddress(to);
+        if (!validation.valid) {
+            showFlash(
+                validation.error || "Please enter a valid Ethereum address.",
+            );
+            return;
+        }
        if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
            showFlash("Please enter a valid amount.");
            return;
@@ -132,15 +245,11 @@ function init(_ctx) {
            const tb = (addr.tokenBalances || []).find(
                (t) => t.address.toLowerCase() === token.toLowerCase(),
            );
-            const knownTk = TOKEN_BY_ADDRESS.get(token.toLowerCase());
-            const trackedTk = (state.trackedTokens || []).find(
-                (t) => t.address.toLowerCase() === token.toLowerCase(),
+            tokenSymbol = resolveSymbol(
+                token,
+                addr.tokenBalances,
+                state.trackedTokens,
            );
-            tokenSymbol =
-                (tb && tb.symbol) ||
-                (trackedTk && trackedTk.symbol) ||
-                (knownTk && knownTk.symbol) ||
-                "?";
            tokenBalance = tb ? tb.balance || "0" : "0";
        }

@@ -167,4 +276,19 @@ function init(_ctx) {
    });
 }

-module.exports = { init, updateSendBalance, renderSendTokenSelect };
+function resetSendValidation() {
+    const errorEl = $("send-to-error");
+    const btn = $("btn-send-review");
+    if (errorEl) errorEl.textContent = "";
+    if (btn) {
+        btn.disabled = true;
+        btn.classList.add("opacity-50");
+    }
+}
+
+module.exports = {
+    init,
+    updateSendBalance,
+    renderSendTokenSelect,
+    resetSendValidation,
+};
--- a/src/popup/views/transactionDetail.js
+++ b/src/popup/views/transactionDetail.js
@@ -143,11 +143,10 @@ function render() {
            typeEl.textContent = tx.directionLabel;
            typeSection.classList.remove("hidden");
        }
-        if (headingEl) headingEl.textContent = tx.directionLabel;
    } else {
        if (typeSection) typeSection.classList.add("hidden");
-        if (headingEl) headingEl.textContent = "Transaction";
    }
+    if (headingEl) headingEl.textContent = "Transaction";

    // Hide calldata and raw data sections; re-fetch if this is a contract call
    const calldataSection = $("tx-detail-calldata-section");
--- a/src/popup/views/txStatus.js
+++ b/src/popup/views/txStatus.js
@@ -8,6 +8,7 @@ const {
    addressTitle,
    escapeHtml,
 } = 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");
@@ -121,11 +122,51 @@ function showSuccess(txInfo, txHash, blockNumber) {
        to: txInfo.to,
        hash: txHash,
        blockNumber: blockNumber,
+        decoded: txInfo.decoded || null,
    };
    renderSuccess();
    ctx.doRefreshAndRender();
 }

+function tokenLabel(address) {
+    const t = TOKEN_BY_ADDRESS.get(address.toLowerCase());
+    return t ? t.symbol : null;
+}
+
+function etherscanTokenLink(address) {
+    return `https://etherscan.io/token/${address}`;
+}
+
+function decodedDetailsHtml(decoded) {
+    if (!decoded || !decoded.details) return "";
+    let html = "";
+    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>`;
+    }
+    if (decoded.description) {
+        html += `<div class="mb-2"><div class="text-xs text-muted mb-1">Description</div>`;
+        html += `<div>${escapeHtml(decoded.description)}</div></div>`;
+    }
+    for (const d of decoded.details) {
+        html += `<div class="mb-2">`;
+        html += `<div class="text-xs text-muted mb-1">${escapeHtml(d.label)}</div>`;
+        if (d.address) {
+            if (d.isToken) {
+                const sym = tokenLabel(d.address) || "Unknown token";
+                html += `<div class="font-bold">${escapeHtml(sym)}</div>`;
+                html += toAddressHtml(d.address);
+            } else {
+                html += toAddressHtml(d.address);
+            }
+        } else {
+            html += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
+        }
+        html += `</div>`;
+    }
+    return html;
+}
+
 function renderSuccess() {
    const d = state.viewData;
    if (!d || !d.hash) return;
@@ -133,6 +174,16 @@ function renderSuccess() {
    $("success-tx-to").innerHTML = toAddressHtml(d.to);
    $("success-tx-block").textContent = String(d.blockNumber);
    $("success-tx-hash").innerHTML = txHashHtml(d.hash);
+
+    // Show decoded calldata details if present
+    const decodedEl = $("success-tx-decoded");
+    if (decodedEl && d.decoded) {
+        decodedEl.innerHTML = decodedDetailsHtml(d.decoded);
+        decodedEl.classList.remove("hidden");
+    } else if (decodedEl) {
+        decodedEl.classList.add("hidden");
+    }
+
    attachCopyHandlers("view-success-tx");
    showView("success-tx");
 }
--- a/src/shared/tokenList.js
+++ b/src/shared/tokenList.js
@@ -3645,10 +3645,27 @@ async function getTopTokenPrices(n) {
    return prices;
 }

+// Resolve a token symbol from multiple sources, never returning "?".
+function resolveSymbol(tokenAddress, tokenBalances, trackedTokens) {
+    const lower = (tokenAddress || "").toLowerCase();
+    const tb = (tokenBalances || []).find(
+        (t) => t.address.toLowerCase() === lower,
+    );
+    if (tb && tb.symbol) return tb.symbol;
+    const known = TOKEN_BY_ADDRESS.get(lower);
+    if (known && known.symbol) return known.symbol;
+    const tracked = (trackedTokens || []).find(
+        (t) => t.address.toLowerCase() === lower,
+    );
+    if (tracked && tracked.symbol) return tracked.symbol;
+    return lower.slice(0, 10) + "\u2026";
+}
+
 module.exports = {
    TOKENS,
    TOKEN_BY_ADDRESS,
    KNOWN_SYMBOLS,
    getTopTokens,
    getTopTokenPrices,
+    resolveSymbol,
 };
--- a/src/shared/transactions.js
+++ b/src/shared/transactions.js
@@ -153,9 +153,11 @@ async function fetchRecentTransactions(address, blockscoutUrl, count = 25) {

    // When a token transfer shares a hash with a normal tx, the normal tx
    // is the contract call (0 ETH) and the token transfer has the real
-    // amount and symbol. Replace the normal tx with the token transfer,
-    // but preserve contract call metadata (direction, label, method) so
-    // swaps and other contract interactions display correctly.
+    // amount and symbol.  A single transaction (e.g. a swap) can produce
+    // multiple token transfers (one per token involved), so we key token
+    // transfers by hash + contract address to keep all of them.  We also
+    // preserve contract-call metadata (direction, label, method) from the
+    // matching normal tx so swaps display correctly.
    for (const tt of ttJson.items || []) {
        const parsed = parseTokenTransfer(tt, addrLower);
        const existing = txsByHash.get(parsed.hash);
@@ -164,8 +166,13 @@ async function fetchRecentTransactions(address, blockscoutUrl, count = 25) {
            parsed.directionLabel = existing.directionLabel;
            parsed.isContractCall = true;
            parsed.method = existing.method;
+            // Remove the bare-hash normal tx so it doesn't appear as a
+            // duplicate with empty value; token transfers replace it.
+            txsByHash.delete(parsed.hash);
        }
-        txsByHash.set(parsed.hash, parsed);
+        // Use composite key so multiple token transfers per tx are kept.
+        const ttKey = parsed.hash + ":" + (parsed.contractAddress || "");
+        txsByHash.set(ttKey, parsed);
    }

    const txs = [...txsByHash.values()];
--- a/src/shared/uniswap.js
+++ b/src/shared/uniswap.js
@@ -445,19 +445,12 @@ function decode(data, toAddress) {
            const maxUint160 = BigInt(
                "0xffffffffffffffffffffffffffffffffffffffff",
            );
-            const rawAmount =
-                inputAmount >= maxUint160
-                    ? "Unlimited"
-                    : formatAmount(inputAmount, inInfo.decimals);
            const amountStr =
                inputAmount >= maxUint160
                    ? "Unlimited"
-                    : rawAmount + (inSymbol ? " " + inSymbol : "");
-            details.push({
-                label: "Amount",
-                value: amountStr,
-                rawValue: rawAmount,
-            });
+                    : formatAmount(inputAmount, inInfo.decimals) +
+                      (inSymbol ? " " + inSymbol : "");
+            details.push({ label: "Amount", value: amountStr });
        }

        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	005b97cdab	restyle add-wallet tabs: 'From' prefix, underline tab style All checks were successful check / check (push) Successful in 1m1s Details - 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 12:44:48 -08:00
user	0d110914a7	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 12:44:48 -08:00
user	612df5cfca	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 12:44:48 -08:00
user	eba962b271	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 12:44:48 -08:00
Jeffrey Paul	3b6b18d168	Merge pull request 'fix: validate destination address on send view (closes #67 )' (#68 ) from fix/67-validate-send-address into main All checks were successful check / check (push) Successful in 8s Details Reviewed-on: #68	2026-02-28 21:38:22 +01:00
Jeffrey Paul	33ae5784e2	Merge branch 'main' into fix/67-validate-send-address All checks were successful check / check (push) Successful in 22s Details	2026-02-28 21:37:38 +01:00
Jeffrey Paul	cd30d94040	Merge pull request 'fix: make token contract display on confirm-tx consistent with other views' (#73 ) from fix/confirm-tx-contract-display into main All checks were successful check / check (push) Successful in 8s Details Reviewed-on: #73	2026-02-28 21:33:53 +01:00
Jeffrey Paul	62bb54556c	Merge branch 'main' into fix/confirm-tx-contract-display All checks were successful check / check (push) Successful in 22s Details	2026-02-28 21:33:24 +01:00
Jeffrey Paul	8e1856415a	Merge branch 'main' into fix/67-validate-send-address All checks were successful check / check (push) Successful in 23s Details	2026-02-28 21:25:08 +01:00
Jeffrey Paul	9444b06b52	Merge pull request 'fix: show token transaction history on address-token view (closes #72 )' (#76 ) from fix/72-address-token-tx-history into main All checks were successful check / check (push) Successful in 9s Details Reviewed-on: #76	2026-02-28 21:22:05 +01:00
Jeffrey Paul	c2fdb3e0c1	Merge branch 'main' into fix/72-address-token-tx-history All checks were successful check / check (push) Successful in 23s Details	2026-02-28 21:21:48 +01:00
user	9de7791553	fix: reset validation state when navigating to send view All checks were successful check / check (push) Successful in 22s Details Clear the error/warning text and disable the review button when entering the send view from home, address detail, or address token views. This prevents stale validation messages from persisting after leaving and returning to the send view.	2026-02-28 12:17:52 -08:00
user	ef2f862d23	fix: validate destination address on send view - Validate Ethereum addresses (0x + 40 hex chars) and ENS names - EIP-55 checksum validation for mixed-case addresses - Block sending to zero address (0x0000...0000) - Warn when sending to own address (allow but show warning) - Inline error messages with reserved space (no layout shift) - Disable Review button while address is invalid Closes #67	2026-02-28 12:17:52 -08:00
clawbot	a655c546b7	fix: make token contract display on confirm-tx consistent with other views All checks were successful check / check (push) Successful in 22s Details Add color dot (addressDotHtml), dashed underline styling, and click-to-copy functionality to the token contract address on the confirm-tx page, matching the display pattern used in addressToken, txStatus, and other views. Closes #70	2026-02-28 12:11:55 -08:00
Jeffrey Paul	0e68279037	Merge pull request 'feat: add export private key from address detail view' (#31 ) from feat/export-private-key into main All checks were successful check / check (push) Successful in 9s Details Reviewed-on: #31	2026-02-28 21:10:17 +01:00
Jeffrey Paul	2bb7fc5786	Merge branch 'main' into feat/export-private-key All checks were successful check / check (push) Successful in 21s Details	2026-02-28 21:10:05 +01:00
user	4157732f4b	fix: preserve multiple token transfers per tx hash for address-token view All checks were successful check / check (push) Successful in 21s Details A single transaction (e.g. a DEX swap) can produce multiple ERC-20 token transfers. The transaction merger was keyed by tx hash alone, so only the last token transfer survived. This meant the address-token view's contract-address filter often matched nothing. Use a composite key (hash + contract address) so all token transfers are preserved. Also remove the bare normal-tx entry when it gets replaced by token transfers to avoid duplicates. Closes #72	2026-02-28 12:08:47 -08:00
Jeffrey Paul	e8ede7010a	Merge pull request 'fix: use formatAddressHtml in receive view for display consistency' (#69 ) from fix/issue-58-receive-address-consistency into main All checks were successful check / check (push) Successful in 9s Details Reviewed-on: #69	2026-02-28 20:57:08 +01:00
user	0c1150ac4d	fix: style private key as red well, remove explicit copy text All checks were successful check / check (push) Successful in 22s Details - Replace dashed border with light red well (bg-danger-well) and rounded corners - Remove redundant 'Click to copy.' paragraph - Add --color-danger-well theme token	2026-02-28 11:54:20 -08:00
clawbot	a2fbb0e30d	fix: use formatAddressHtml in receive view for display consistency All checks were successful check / check (push) Successful in 22s Details The receive view was using raw textContent and a manually constructed color dot instead of the shared formatAddressHtml helper used by other views. This violated the display consistency policy ('Same data formatted identically across all screens'). Changes: - Use formatAddressHtml() to render address with color dot, title (e.g. 'Wallet 1 — Address 1'), and ENS name — matching addressDetail - Make the address block itself click-to-copy (matching policy: 'Clicking any address copies the full untruncated value') - Replace separate receive-dot/receive-address spans with a single receive-address-block element - Address is still shown in full (no truncation) as appropriate for the receive view Closes #58	2026-02-28 11:47:45 -08:00
Jeffrey Paul	72a4dd3382	Merge branch 'main' into feat/export-private-key All checks were successful check / check (push) Successful in 22s Details	2026-02-28 20:44:21 +01:00
user	d3d9f9a8b0	fix: export-privkey view address display consistency All checks were successful check / check (push) Successful in 22s Details Add blockie identicon, wallet/address title, and color dot with full address display to the export-privkey view, matching the pattern used by AddressDetail and other views. Address is click-to-copy.	2026-02-28 11:41:28 -08:00
Jeffrey Paul	24464ffe33	Merge pull request 'fix: resolve token symbols from multiple sources (closes #51 )' (#52 ) from fix/usdc-symbol-display into main All checks were successful check / check (push) Successful in 9s Details Reviewed-on: #52	2026-02-28 20:40:43 +01:00
Jeffrey Paul	34c66d19c4	Merge branch 'main' into fix/usdc-symbol-display All checks were successful check / check (push) Successful in 22s Details	2026-02-28 20:40:10 +01:00
Jeffrey Paul	e09904147b	Merge pull request 'fix: consistent transaction view title (closes #65 )' (#66 ) from fix/65-transaction-view-title into main All checks were successful check / check (push) Successful in 9s Details Reviewed-on: #66	2026-02-28 20:39:47 +01:00
user	b02a1d3a55	fix: always use 'Transaction' as detail view heading All checks were successful check / check (push) Successful in 22s Details The transaction detail view was dynamically changing its title to match the transaction type (e.g. 'Swap' for contract interactions), causing inconsistency with the Screen Map specification. The heading is now always 'Transaction' regardless of type. The action type is still shown in the 'Action' detail section below. Closes #65	2026-02-28 11:38:49 -08:00
clawbot	9a7aa1f4fc	fix: resolve token symbols from multiple sources (closes #51 ) All checks were successful check / check (push) Successful in 22s Details When tokenBalances doesn't contain an entry for a token (e.g. before balances are fetched), the symbol fell back to '?' in addressToken and send views. Add resolveSymbol() helper that checks tokenBalances → TOKEN_BY_ADDRESS (known tokens) → trackedTokens → truncated address as last resort. Fixes USDC and other known tokens showing '?' when balance data hasn't loaded yet.	2026-02-28 11:37:38 -08:00
Jeffrey Paul	9788db95f2	Merge pull request 'fix: show decoded swap details on success-tx view (closes #63 )' (#64 ) from fix/63-swap-success-view into main All checks were successful check / check (push) Successful in 8s Details Reviewed-on: #64	2026-02-28 20:35:39 +01:00
clawbot	9981be6986	fix: show decoded swap details on success-tx view (closes #63 ) All checks were successful check / check (push) Successful in 22s Details Carry decoded calldata info (action name, description, token details, amounts, addresses) from the approval confirmation view through to the success-tx view. For swap transactions, this now shows the same decoded details (protocol, action, token symbols, amounts) that appeared on the signing confirmation screen. Changes: - approval.js: store decoded calldata in pendingTxDetails.decoded - txStatus.js: carry decoded through state.viewData, render in success view - index.html: add success-tx-decoded container element	2026-02-28 11:32:55 -08:00
Jeffrey Paul	16f9e98b25	Merge branch 'main' into feat/export-private-key All checks were successful check / check (push) Successful in 22s Details	2026-02-28 20:31:50 +01:00
Jeffrey Paul	bbf5945ff1	Merge pull request 'fix: enforce UI policies on transaction detail view (closes #59 )' (#62 ) from fix/59-transaction-view-ui-policies into main All checks were successful check / check (push) Successful in 8s Details Reviewed-on: #62	2026-02-28 20:30:43 +01:00
Jeffrey Paul	676109860a	Merge branch 'main' into feat/export-private-key All checks were successful check / check (push) Successful in 22s Details	2026-02-28 18:08:33 +01:00
user	3daba279d2	style: rework overflow menu to look like menu items, not buttons All checks were successful check / check (push) Successful in 21s Details - Menu items now use text-xs font-light for smaller, lighter type that's clearly distinct from the pushbuttons in the action row - The ··· button stays visually inverted (bg-fg text-bg) while the dropdown menu is open, reverting when closed - Menu items styled as plain text rows with subtle hover background, no borders or button-like appearance	2026-02-28 08:39:57 -08:00
clawbot	70a8ac6f99	style: dropdown menu with subtle grey hover and list padding All checks were successful check / check (push) Successful in 22s Details Use bg-hover token for grey mouseover instead of full fg/bg inversion. Add py-1 padding to dropdown container and px-4 to items for proper list appearance with margin around items.	2026-02-28 08:29:12 -08:00
user	68bd909345	fix: make overflow menu auto-width to prevent text wrapping All checks were successful check / check (push) Successful in 22s Details	2026-02-28 04:39:45 -08:00
user	91c3b4e394	refactor: move Export Private Key into overflow menu Some checks are pending check / check (push) Waiting to run Details Replace the muted text link at the bottom of AddressDetail with a '···' overflow/more button in the action button row. Clicking it opens a dropdown with 'Export Private Key' as an option. Clicking outside closes the dropdown. The pattern is reusable for future secondary actions.	2026-02-28 04:27:56 -08:00
user	41794f8bf5	fix: make export key a subtle link, add view to VIEWS array All checks were successful check / check (push) Successful in 22s Details - Moved 'Export private key' from prominent button row to a small muted text link at the bottom of the address detail view - Added 'export-privkey' to the VIEWS array in helpers.js — this was the cause of the blank view (showView toggled all known views but didn't know about export-privkey, so it was never unhidden)	2026-02-28 01:37:45 -08:00
user	ca78da2e07	feat: add export private key from address detail view All checks were successful check / check (push) Successful in 22s Details Adds an 'Export Private Key' button to the address detail view. Clicking it opens a password confirmation screen; after verification, the derived private key is displayed in a copyable field with a security warning. The key is cleared when navigating away. Closes #19	2026-02-28 01:19:36 -08:00