fix: consistent token contract display on confirm-tx page

The confirm-tx page displayed token contract addresses as plain text, while addressToken used a styled container (bg-hover rounded-md) with color dot, copy-on-click, etherscan link, and token metadata. Changes: - confirm-tx HTML: use bg-hover rounded-md container matching addressToken - confirm-tx JS: render contract with addressDotHtml, copy-on-click span, etherscan link, and optional token name/symbol metadata - send.js: pass tokenName to confirmTx for richer contract display - Add click-to-copy handler for contract address on confirm-tx Closes #70
2026-02-28 12:06:25 -08:00
13 changed files with 88 additions and 420 deletions
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -104,10 +104,6 @@
                        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 min-h-[1.25rem] mb-2"
-                ></div>
                <button
                    id="btn-add-wallet-confirm"
                    class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -166,10 +162,6 @@
                        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 min-h-[1.25rem] mb-2"
-                ></div>
                <button
                    id="btn-import-key-confirm"
                    class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -313,26 +305,6 @@
                    >
                        + 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 -->
@@ -346,60 +318,6 @@
                </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-error"
-                    class="text-xs min-h-[1.25rem] mb-2"
-                ></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
@@ -504,11 +422,6 @@
                        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">
@@ -550,12 +463,12 @@
                </div>

                <!-- ERC-20 token contract (hidden for ETH) -->
-                <div id="confirm-token-section" class="mb-3 hidden">
-                    <div class="text-xs text-muted mb-1">Token contract</div>
-                    <div
-                        id="confirm-token-contract"
-                        class="text-xs break-all"
-                    ></div>
+                <div
+                    id="confirm-token-section"
+                    class="bg-hover rounded-md mx-1 p-3 mb-3 text-xs hidden"
+                >
+                    <div class="font-bold mb-2">Token Contract</div>
+                    <div id="confirm-token-contract" class="break-all"></div>
                </div>

                <div class="mb-3">
@@ -947,8 +860,8 @@
                    funds will be unrecoverable without your recovery phrase.
                </p>
                <div
-                    id="delete-wallet-error"
-                    class="text-xs min-h-[1.25rem] mb-2"
+                    id="delete-wallet-flash"
+                    class="text-xs text-red-500 mb-2 hidden"
                ></div>
                <div class="mb-2">
                    <label class="block mb-1">Password</label>
@@ -1147,10 +1060,7 @@
                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
                    />
                </div>
-                <div
-                    id="approve-tx-error"
-                    class="text-xs min-h-[1.25rem] mb-2"
-                ></div>
+                <div id="approve-tx-error" class="text-xs hidden mb-2"></div>
                <div class="flex justify-between">
                    <button
                        id="btn-approve-tx"
@@ -1213,10 +1123,7 @@
                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
                    />
                </div>
-                <div
-                    id="approve-sign-error"
-                    class="text-xs min-h-[1.25rem] mb-2"
-                ></div>
+                <div id="approve-sign-error" class="text-xs hidden mb-2"></div>
                <div class="flex justify-between">
                    <button
                        id="btn-approve-sign"
--- a/src/popup/styles/main.css
+++ b/src/popup/styles/main.css
@@ -11,7 +11,6 @@
    --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
@@ -1,4 +1,4 @@
-const { $, showView, showFlash, showError, hideError } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const {
    generateMnemonic,
    hdWalletFromMnemonic,
@@ -13,7 +13,6 @@ function show() {
    $("add-wallet-password").value = "";
    $("add-wallet-password-confirm").value = "";
    $("add-wallet-phrase-warning").classList.add("hidden");
-    hideError("add-wallet-error");
    showView("add-wallet");
 }

@@ -26,16 +25,14 @@ function init(ctx) {
    $("btn-add-wallet-confirm").addEventListener("click", async () => {
        const mnemonic = $("wallet-mnemonic").value.trim();
        if (!mnemonic) {
-            showError(
-                "add-wallet-error",
+            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) {
-            showError(
-                "add-wallet-error",
+            showFlash(
                "Recovery phrase must be 12 or 24 words. You entered " +
                    words.length +
                    ".",
@@ -43,27 +40,21 @@ function init(ctx) {
            return;
        }
        if (!isValidMnemonic(mnemonic)) {
-            showError(
-                "add-wallet-error",
-                "Invalid recovery phrase. Check for typos.",
-            );
+            showFlash("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.");
+            showFlash("Please choose a password.");
            return;
        }
        if (pw.length < 12) {
-            showError(
-                "add-wallet-error",
-                "Password must be at least 12 characters.",
-            );
+            showFlash("Password must be at least 12 characters.");
            return;
        }
        if (pw !== pw2) {
-            showError("add-wallet-error", "Passwords do not match.");
+            showFlash("Passwords do not match.");
            return;
        }
        const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic);
@@ -75,8 +66,7 @@ function init(ctx) {
                    firstAddress.toLowerCase(),
        );
        if (duplicate) {
-            showError(
-                "add-wallet-error",
+            showFlash(
                "This recovery phrase is already added (" +
                    duplicate.name +
                    ").",
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -2,8 +2,6 @@ const {
    $,
    showView,
    showFlash,
-    showError,
-    hideError,
    balanceLinesForAddress,
    addressDotHtml,
    addressTitle,
@@ -17,15 +15,9 @@ const {
    filterTransactions,
 } = require("../../shared/transactions");
 const { resolveEnsNames } = require("../../shared/ens");
-const {
-    updateSendBalance,
-    renderSendTokenSelect,
-    resetSendValidation,
-} = require("./send");
+const { updateSendBalance, renderSendTokenSelect } = 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;

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

@@ -274,99 +265,6 @@ 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 = "";
-        hideError("export-privkey-error");
-        $("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) {
-            showError("export-privkey-error", "Password is required.");
-            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");
-            hideError("export-privkey-error");
-        } catch {
-            showError("export-privkey-error", "Wrong password.");
-        }
-    });
-
-    $("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
@@ -23,11 +23,7 @@ const {
    filterTransactions,
 } = require("../../shared/transactions");
 const { resolveEnsNames } = require("../../shared/ens");
-const {
-    updateSendBalance,
-    renderSendTokenSelect,
-    resetSendValidation,
-} = require("./send");
+const { updateSendBalance, renderSendTokenSelect } = require("./send");
 const { log } = require("../../shared/log");
 const makeBlockie = require("ethereum-blockies-base64");

@@ -376,7 +372,6 @@ function init(_ctx) {
            });
        }
        updateSendBalance();
-        resetSendValidation();
        showView("send");
    });

--- a/src/popup/views/approval.js
+++ b/src/popup/views/approval.js
@@ -4,8 +4,6 @@ const {
    addressTitle,
    escapeHtml,
    showView,
-    showError,
-    hideError,
 } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers");
@@ -344,7 +342,7 @@ function showSignApproval(details) {
    }

    $("approve-sign-password").value = "";
-    hideError("approve-sign-error");
+    $("approve-sign-error").classList.add("hidden");
    $("btn-approve-sign").disabled = false;
    $("btn-approve-sign").classList.remove("text-muted");

@@ -409,10 +407,11 @@ function init(ctx) {
    $("btn-approve-tx").addEventListener("click", () => {
        const password = $("approve-tx-password").value;
        if (!password) {
-            showError("approve-tx-error", "Please enter your password.");
+            $("approve-tx-error").textContent = "Please enter your password.";
+            $("approve-tx-error").classList.remove("hidden");
            return;
        }
-        hideError("approve-tx-error");
+        $("approve-tx-error").classList.add("hidden");
        $("btn-approve-tx").disabled = true;
        $("btn-approve-tx").classList.add("text-muted");

@@ -448,10 +447,11 @@ function init(ctx) {
    $("btn-approve-sign").addEventListener("click", () => {
        const password = $("approve-sign-password").value;
        if (!password) {
-            showError("approve-sign-error", "Please enter your password.");
+            $("approve-sign-error").textContent = "Please enter your password.";
+            $("approve-sign-error").classList.remove("hidden");
            return;
        }
-        hideError("approve-sign-error");
+        $("approve-sign-error").classList.add("hidden");
        $("btn-approve-sign").disabled = true;
        $("btn-approve-sign").classList.add("text-muted");

@@ -469,7 +469,8 @@ function init(ctx) {
                } else {
                    const msg =
                        (response && response.error) || "Signing failed.";
-                    showError("approve-sign-error", msg);
+                    $("approve-sign-error").textContent = msg;
+                    $("approve-sign-error").classList.remove("hidden");
                    $("btn-approve-sign").disabled = false;
                    $("btn-approve-sign").classList.remove("text-muted");
                }
--- a/src/popup/views/confirmTx.js
+++ b/src/popup/views/confirmTx.js
@@ -14,7 +14,6 @@ const {
    showError,
    hideError,
    showView,
-    showFlash,
    addressTitle,
    addressDotHtml,
    escapeHtml,
@@ -99,19 +98,20 @@ function show(txInfo) {
        const dot = addressDotHtml(txInfo.token);
        const link = etherscanTokenLink(txInfo.token);
        $("confirm-token-contract").innerHTML =
-            `<div class="flex items-center">${dot}` +
-            `<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(txInfo.token)}">${escapeHtml(txInfo.token)}</span>` +
+            `<div class="flex items-center">` +
+            dot +
+            `<span class="break-all underline decoration-dashed cursor-pointer" id="confirm-token-contract-copy" 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!");
-            };
+        if (txInfo.tokenName) {
+            $("confirm-token-contract").innerHTML +=
+                `<div class="mt-1"><span class="text-muted">Name:</span> ${escapeHtml(txInfo.tokenName)}</div>`;
        }
+        if (txInfo.tokenSymbol) {
+            $("confirm-token-contract").innerHTML +=
+                `<div class="mt-1"><span class="text-muted">Symbol:</span> ${escapeHtml(txInfo.tokenSymbol)}</div>`;
+        }
+        tokenSection.classList.remove("hidden");
    } else {
        tokenSection.classList.add("hidden");
    }
@@ -285,6 +285,13 @@ function hidePasswordModal() {
 }

 function init(ctx) {
+    $("confirm-token-section").addEventListener("click", (e) => {
+        const copyEl = e.target.closest("[data-copy]");
+        if (copyEl) {
+            navigator.clipboard.writeText(copyEl.dataset.copy);
+        }
+    });
+
    $("btn-confirm-send").addEventListener("click", () => {
        showPasswordModal();
    });
--- 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").classList.add("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").classList.remove("hidden");
            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").classList.remove("hidden");
            return;
        }

@@ -45,7 +47,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").classList.remove("hidden");
            return;
        }

--- a/src/popup/views/helpers.js
+++ b/src/popup/views/helpers.js
@@ -31,7 +31,6 @@ 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,11 +11,7 @@ const {
    truncateMiddle,
 } = require("./helpers");
 const { state, saveState, currentAddress } = require("../../shared/state");
-const {
-    updateSendBalance,
-    renderSendTokenSelect,
-    resetSendValidation,
-} = require("./send");
+const { updateSendBalance, renderSendTokenSelect } = require("./send");
 const { deriveAddressFromXpub } = require("../../shared/wallet");
 const {
    formatUsd,
@@ -392,7 +388,6 @@ 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,4 +1,4 @@
-const { $, showView, showError, hideError } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const { addressFromPrivateKey } = require("../../shared/wallet");
 const { encryptWithPassword } = require("../../shared/vault");
 const { state, saveState } = require("../../shared/state");
@@ -7,7 +7,6 @@ function show() {
    $("import-private-key").value = "";
    $("import-key-password").value = "";
    $("import-key-password-confirm").value = "";
-    hideError("import-key-error");
    showView("import-key");
 }

@@ -15,31 +14,28 @@ 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.");
+            showFlash("Please enter your private key.");
            return;
        }
        let addr;
        try {
            addr = addressFromPrivateKey(key);
        } catch (e) {
-            showError("import-key-error", "Invalid private key.");
+            showFlash("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.");
+            showFlash("Please choose a password.");
            return;
        }
        if (pw.length < 12) {
-            showError(
-                "import-key-error",
-                "Password must be at least 12 characters.",
-            );
+            showFlash("Password must be at least 12 characters.");
            return;
        }
        if (pw !== pw2) {
-            showError("import-key-error", "Passwords do not match.");
+            showFlash("Passwords do not match.");
            return;
        }
        const encrypted = await encryptWithPassword(key, pw);
--- a/src/popup/views/send.js
+++ b/src/popup/views/send.js
@@ -10,108 +10,11 @@ const {
 const { state, currentAddress } = require("../../shared/state");
 let ctx;
 const { getProvider } = require("../../shared/balances");
-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 {
+    KNOWN_SYMBOLS,
+    TOKEN_BY_ADDRESS,
+    resolveSymbol,
+} = require("../../shared/tokenList");

 const EXT_ICON =
    `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
@@ -189,13 +92,6 @@ 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();
@@ -203,15 +99,6 @@ 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;
@@ -241,6 +128,7 @@ function init(_ctx) {

        let tokenSymbol = null;
        let tokenBalance = null;
+        let tokenName = null;
        if (token !== "ETH") {
            const tb = (addr.tokenBalances || []).find(
                (t) => t.address.toLowerCase() === token.toLowerCase(),
@@ -251,6 +139,17 @@ function init(_ctx) {
                state.trackedTokens,
            );
            tokenBalance = tb ? tb.balance || "0" : "0";
+            // Resolve token name from balances, tracked tokens, or known list
+            const lower = token.toLowerCase();
+            tokenName =
+                (tb && tb.name) ||
+                (
+                    (state.trackedTokens || []).find(
+                        (t) => t.address.toLowerCase() === lower,
+                    ) || {}
+                ).name ||
+                (TOKEN_BY_ADDRESS.get(lower) || {}).name ||
+                null;
        }

        ctx.showConfirmTx({
@@ -262,6 +161,7 @@ function init(_ctx) {
            balance: addr.balance,
            tokenSymbol: tokenSymbol,
            tokenBalance: tokenBalance,
+            tokenName: tokenName,
        });
    });

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

-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,
-};
+module.exports = { init, updateSendBalance, renderSendTokenSelect };
--- a/src/shared/transactions.js
+++ b/src/shared/transactions.js
@@ -153,11 +153,9 @@ 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.  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.
+    // 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.
    for (const tt of ttJson.items || []) {
        const parsed = parseTokenTransfer(tt, addrLower);
        const existing = txsByHash.get(parsed.hash);
@@ -166,13 +164,8 @@ 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);
        }
-        // Use composite key so multiple token transfers per tx are kept.
-        const ttKey = parsed.hash + ":" + (parsed.contractAddress || "");
-        txsByHash.set(ttKey, parsed);
+        txsByHash.set(parsed.hash, parsed);
    }

    const txs = [...txsByHash.values()];