fix: standardize error display to use showError/hideError helpers

Replace inconsistent error display patterns across views:

- addWallet.js: replace showFlash() with showError('add-wallet-error', ...)
- importKey.js: replace showFlash() with showError('import-key-error', ...)
- addressDetail.js: replace direct DOM manipulation of export-privkey-flash
  with showError/hideError('export-privkey-error', ...)
- deleteWallet.js: replace direct DOM manipulation of delete-wallet-flash
  with showError/hideError('delete-wallet-error', ...)
- index.html: add dedicated error divs with min-h-[1.25rem] for add-wallet,
  import-key views; rename flash divs to error divs for export-privkey and
  delete-wallet views with consistent styling

All password/validation errors now use the showError()/hideError() helper
pattern with min-h-[1.25rem] error divs to prevent layout shift.
Status/success messages (scanning, wallet deleted) remain as showFlash().

Closes #87

src/popup/index.html

@@ -104,6 +104,10 @@
                         class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
                     />
                 </div>
+                <div
+                    id="add-wallet-error"
+                    class="text-xs mb-2 min-h-[1.25rem] hidden"
+                ></div>
                 <button
                     id="btn-add-wallet-confirm"
                     class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -162,6 +166,10 @@
                         class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
                     />
                 </div>
+                <div
+                    id="import-key-error"
+                    class="text-xs mb-2 min-h-[1.25rem] hidden"
+                ></div>
                 <button
                     id="btn-import-key-confirm"
                     class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -365,8 +373,8 @@
                     transfer all funds from this address. Never share it.
                 </p>
                 <div
-                    id="export-privkey-flash"
+                    id="export-privkey-error"
-                    class="text-xs mb-2 hidden"
+                    class="text-xs mb-2 min-h-[1.25rem] hidden"
                 ></div>
                 <div id="export-privkey-password-section" class="mb-2">
                     <label class="block mb-1">Password</label>
@@ -581,11 +589,23 @@
                     id="confirm-errors"
                     class="mb-2 border border-border border-dashed p-2 hidden"
                 ></div>
+                <div class="mb-2">
+                    <label class="block mb-1 text-xs">Password</label>
+                    <input
+                        type="password"
+                        id="confirm-tx-password"
+                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
+                    />
+                </div>
+                <div
+                    id="confirm-tx-password-error"
+                    class="text-xs mb-2 min-h-[1.25rem]"
+                ></div>
                 <button
                     id="btn-confirm-send"
                     class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
                 >
-                    Send
+                    Sign &amp; Send
                 </button>
             </div>
 
@@ -664,42 +684,6 @@
                 </button>
             </div>
 
-            <!-- ============ PASSWORD MODAL ============ -->
-            <div
-                id="password-modal"
-                class="hidden fixed inset-0 bg-bg flex items-center justify-center z-50"
-            >
-                <div class="border border-border p-4 bg-bg w-80">
-                    <h2 class="font-bold mb-2">Enter Password</h2>
-                    <p class="text-xs text-muted mb-2">
-                        Your password is needed to authorize this transaction.
-                    </p>
-                    <input
-                        type="password"
-                        id="modal-password"
-                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg mb-2"
-                    />
-                    <div
-                        id="modal-password-error"
-                        class="text-xs mb-2 border border-border border-dashed p-1 hidden"
-                    ></div>
-                    <div class="flex gap-2">
-                        <button
-                            id="btn-modal-confirm"
-                            class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
-                        >
-                            Confirm
-                        </button>
-                        <button
-                            id="btn-modal-cancel"
-                            class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
-                        >
-                            Cancel
-                        </button>
-                    </div>
-                </div>
-            </div>
-
             <!-- ============ RECEIVE ============ -->
             <div id="view-receive" class="view hidden">
                 <button
@@ -939,8 +923,8 @@
                     funds will be unrecoverable without your recovery phrase.
                 </p>
                 <div
-                    id="delete-wallet-flash"
+                    id="delete-wallet-error"
-                    class="text-xs text-red-500 mb-2 hidden"
+                    class="text-xs mb-2 min-h-[1.25rem] hidden"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1">Password</label>
@@ -1139,7 +1123,10 @@
                         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 hidden mb-2"></div>
+                <div
+                    id="approve-tx-error"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
+                ></div>
                 <div class="flex justify-between">
                     <button
                         id="btn-approve-tx"
@@ -1202,7 +1189,10 @@
                         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 hidden mb-2"></div>
+                <div
+                    id="approve-sign-error"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
+                ></div>
                 <div class="flex justify-between">
                     <button
                         id="btn-approve-sign"

src/popup/index.js

@@ -74,6 +74,7 @@ const RESTORABLE_VIEWS = new Set([
     "receive",
     "settings",
     "settings-addtoken",
+    "confirm-tx",
     "transaction",
     "success-tx",
     "error-tx",
@@ -127,6 +128,13 @@ function restoreView() {
         case "settings-addtoken":
             settingsAddToken.show();
             break;
+        case "confirm-tx":
+            if (state.viewData && state.viewData.pendingTx) {
+                confirmTx.restore();
+            } else {
+                fallbackView();
+            }
+            break;
         case "transaction":
             if (state.viewData && state.viewData.tx) {
                 transactionDetail.render();

src/popup/views/addWallet.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash } = require("./helpers");
+const { $, showView, showFlash, showError, hideError } = require("./helpers");
 const {
     generateMnemonic,
     hdWalletFromMnemonic,
@@ -13,6 +13,7 @@ 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");
 }
 
@@ -25,14 +26,16 @@ function init(ctx) {
     $("btn-add-wallet-confirm").addEventListener("click", async () => {
         const mnemonic = $("wallet-mnemonic").value.trim();
         if (!mnemonic) {
-            showFlash(
+            showError(
+                "add-wallet-error",
                 "Enter a recovery phrase or press the die to generate one.",
             );
             return;
         }
         const words = mnemonic.split(/\s+/);
         if (words.length !== 12 && words.length !== 24) {
-            showFlash(
+            showError(
+                "add-wallet-error",
                 "Recovery phrase must be 12 or 24 words. You entered " +
                     words.length +
                     ".",
@@ -40,21 +43,27 @@ function init(ctx) {
             return;
         }
         if (!isValidMnemonic(mnemonic)) {
-            showFlash("Invalid recovery phrase. Check for typos.");
+            showError(
+                "add-wallet-error",
+                "Invalid recovery phrase. Check for typos.",
+            );
             return;
         }
         const pw = $("add-wallet-password").value;
         const pw2 = $("add-wallet-password-confirm").value;
         if (!pw) {
-            showFlash("Please choose a password.");
+            showError("add-wallet-error", "Please choose a password.");
             return;
         }
         if (pw.length < 12) {
-            showFlash("Password must be at least 12 characters.");
+            showError(
+                "add-wallet-error",
+                "Password must be at least 12 characters.",
+            );
             return;
         }
         if (pw !== pw2) {
-            showFlash("Passwords do not match.");
+            showError("add-wallet-error", "Passwords do not match.");
             return;
         }
         const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic);
@@ -66,13 +75,15 @@ function init(ctx) {
                     firstAddress.toLowerCase(),
         );
         if (duplicate) {
-            showFlash(
+            showError(
+                "add-wallet-error",
                 "This recovery phrase is already added (" +
                     duplicate.name +
                     ").",
             );
             return;
         }
+        hideError("add-wallet-error");
         const encrypted = await encryptWithPassword(mnemonic, pw);
         const walletNum = state.wallets.length + 1;
         const wallet = {

src/popup/views/addressDetail.js

@@ -2,6 +2,8 @@ const {
     $,
     showView,
     showFlash,
+    showError,
+    hideError,
     balanceLinesForAddress,
     addressDotHtml,
     addressTitle,
@@ -310,8 +312,7 @@ function init(_ctx) {
         $("export-privkey-address").textContent = addr.address;
         $("export-privkey-address").dataset.full = addr.address;
         $("export-privkey-password").value = "";
-        $("export-privkey-flash").classList.add("hidden");
+        hideError("export-privkey-error");
-        $("export-privkey-flash").textContent = "";
         $("export-privkey-password-section").classList.remove("hidden");
         $("export-privkey-result").classList.add("hidden");
         $("export-privkey-value").textContent = "";
@@ -321,10 +322,12 @@ function init(_ctx) {
     $("btn-export-privkey-confirm").addEventListener("click", async () => {
         const password = $("export-privkey-password").value;
         if (!password) {
-            $("export-privkey-flash").textContent = "Password is required.";
+            showError("export-privkey-error", "Password is required.");
-            $("export-privkey-flash").classList.remove("hidden");
             return;
         }
+        const btn = $("btn-export-privkey-confirm");
+        btn.disabled = true;
+        btn.classList.add("text-muted");
         const wallet = state.wallets[state.selectedWallet];
         try {
             const secret = await decryptWithPassword(
@@ -340,10 +343,12 @@ function init(_ctx) {
             $("export-privkey-password-section").classList.add("hidden");
             $("export-privkey-value").textContent = privateKey;
             $("export-privkey-result").classList.remove("hidden");
-            $("export-privkey-flash").classList.add("hidden");
+            hideError("export-privkey-error");
         } catch {
-            $("export-privkey-flash").textContent = "Wrong password.";
+            showError("export-privkey-error", "Wrong password.");
-            $("export-privkey-flash").classList.remove("hidden");
+        } finally {
+            btn.disabled = false;
+            btn.classList.remove("text-muted");
         }
     });
 

src/popup/views/approval.js

@@ -4,6 +4,8 @@ const {
     addressTitle,
     escapeHtml,
     showView,
+    showError,
+    hideError,
 } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers");
@@ -254,6 +256,9 @@ function showTxApproval(details) {
         $("approve-tx-data-section").classList.add("hidden");
     }
 
+    $("approve-tx-password").value = "";
+    $("approve-tx-error").classList.add("hidden");
+
     showView("approve-tx");
 }
 
@@ -342,7 +347,7 @@ function showSignApproval(details) {
     }
 
     $("approve-sign-password").value = "";
-    $("approve-sign-error").classList.add("hidden");
+    hideError("approve-sign-error");
     $("btn-approve-sign").disabled = false;
     $("btn-approve-sign").classList.remove("text-muted");
 
@@ -407,11 +412,10 @@ function init(ctx) {
     $("btn-approve-tx").addEventListener("click", () => {
         const password = $("approve-tx-password").value;
         if (!password) {
-            $("approve-tx-error").textContent = "Please enter your password.";
+            showError("approve-tx-error", "Please enter your password.");
-            $("approve-tx-error").classList.remove("hidden");
             return;
         }
-        $("approve-tx-error").classList.add("hidden");
+        hideError("approve-tx-error");
         $("btn-approve-tx").disabled = true;
         $("btn-approve-tx").classList.add("text-muted");
 
@@ -447,11 +451,10 @@ function init(ctx) {
     $("btn-approve-sign").addEventListener("click", () => {
         const password = $("approve-sign-password").value;
         if (!password) {
-            $("approve-sign-error").textContent = "Please enter your password.";
+            showError("approve-sign-error", "Please enter your password.");
-            $("approve-sign-error").classList.remove("hidden");
             return;
         }
-        $("approve-sign-error").classList.add("hidden");
+        hideError("approve-sign-error");
         $("btn-approve-sign").disabled = true;
         $("btn-approve-sign").classList.add("text-muted");
 
@@ -469,8 +472,7 @@ function init(ctx) {
                 } else {
                     const msg =
                         (response && response.error) || "Signing failed.";
-                    $("approve-sign-error").textContent = msg;
+                    showError("approve-sign-error", msg);
-                    $("approve-sign-error").classList.remove("hidden");
                     $("btn-approve-sign").disabled = false;
                     $("btn-approve-sign").classList.remove("text-muted");
                 }

src/popup/views/confirmTx.js

@@ -1,6 +1,6 @@
-// Transaction confirmation view + password modal.
+// Transaction confirmation view with inline password.
-// Shows transaction details, warnings, errors. On proceed, opens
+// Shows transaction details, warnings, errors. On Sign & Send,
-// password modal, decrypts secret, signs and broadcasts.
+// reads inline password, decrypts secret, signs and broadcasts.
 
 const {
     parseEther,
@@ -14,6 +14,7 @@ const {
     showError,
     hideError,
     showView,
+    showFlash,
     addressTitle,
     addressDotHtml,
     escapeHtml,
@@ -38,6 +39,13 @@ const EXT_ICON =
 
 let pendingTx = null;
 
+function restore() {
+    const d = state.viewData;
+    if (d && d.pendingTx) {
+        show(d.pendingTx);
+    }
+}
+
 function etherscanTokenLink(address) {
     return `https://etherscan.io/token/${address}`;
 }
@@ -95,11 +103,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) +
+            `<div class="flex items-center">${dot}` +
-            ` <a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+            `<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");
     }
@@ -214,9 +233,14 @@ function show(txInfo) {
         sendBtn.classList.remove("text-muted");
     }
 
+    // Reset password field and error
+    $("confirm-tx-password").value = "";
+    hideError("confirm-tx-password-error");
+
     // Gas estimate — show placeholder then fetch async
     $("confirm-fee").classList.remove("hidden");
     $("confirm-fee-amount").textContent = "Estimating...";
+    state.viewData = { pendingTx: txInfo };
     showView("confirm-tx");
 
     estimateGas(txInfo);
@@ -262,39 +286,20 @@ async function estimateGas(txInfo) {
     }
 }
 
-function showPasswordModal() {
-    $("modal-password").value = "";
-    hideError("modal-password-error");
-    $("password-modal").classList.remove("hidden");
-}
-
-function hidePasswordModal() {
-    $("password-modal").classList.add("hidden");
-}
-
 function init(ctx) {
-    $("btn-confirm-send").addEventListener("click", () => {
+    $("btn-confirm-send").addEventListener("click", async () => {
-        showPasswordModal();
+        const password = $("confirm-tx-password").value;
-    });
-
-    $("btn-confirm-back").addEventListener("click", () => {
-        showView("send");
-    });
-
-    $("btn-modal-cancel").addEventListener("click", () => {
-        hidePasswordModal();
-    });
-
-    $("btn-modal-confirm").addEventListener("click", async () => {
-        const password = $("modal-password").value;
         if (!password) {
-            showError("modal-password-error", "Please enter your password.");
+            showError(
+                "confirm-tx-password-error",
+                "Please enter your password.",
+            );
             return;
         }
 
         const wallet = state.wallets[state.selectedWallet];
         let decryptedSecret;
-        hideError("modal-password-error");
+        hideError("confirm-tx-password-error");
 
         try {
             decryptedSecret = await decryptWithPassword(
@@ -302,11 +307,12 @@ function init(ctx) {
                 password,
             );
         } catch (e) {
-            showError("modal-password-error", "Wrong password.");
+            showError("confirm-tx-password-error", "Wrong password.");
             return;
         }
 
-        hidePasswordModal();
+        $("btn-confirm-send").disabled = true;
+        $("btn-confirm-send").classList.add("text-muted");
 
         let tx;
         try {
@@ -343,8 +349,15 @@ function init(ctx) {
             decryptedSecret = null;
             const hash = tx ? tx.hash : null;
             txStatus.showError(pendingTx, hash, e.shortMessage || e.message);
+        } finally {
+            $("btn-confirm-send").disabled = false;
+            $("btn-confirm-send").classList.remove("text-muted");
         }
     });
+
+    $("btn-confirm-back").addEventListener("click", () => {
+        showView("send");
+    });
 }
 
-module.exports = { init, show };
+module.exports = { init, show, restore };

src/popup/views/deleteWallet.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash } = require("./helpers");
+const { $, showView, showFlash, showError, hideError } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { decryptWithPassword } = require("../../shared/vault");
 
@@ -11,8 +11,7 @@ function show(walletIdx) {
     $("delete-wallet-name").textContent =
         wallet.name || "Wallet " + (walletIdx + 1);
     $("delete-wallet-password").value = "";
-    $("delete-wallet-flash").textContent = "";
+    hideError("delete-wallet-error");
-    $("delete-wallet-flash").classList.add("hidden");
     showView("delete-wallet-confirm");
 }
 
@@ -27,19 +26,22 @@ function init(_ctx) {
     $("btn-delete-wallet-confirm").addEventListener("click", async () => {
         const pw = $("delete-wallet-password").value;
         if (!pw) {
-            $("delete-wallet-flash").textContent =
+            showError("delete-wallet-error", "Please enter your password.");
-                "Please enter your password.";
-            $("delete-wallet-flash").classList.remove("hidden");
             return;
         }
 
         if (deleteWalletIndex === null) {
-            $("delete-wallet-flash").textContent =
+            showError(
-                "No wallet selected for deletion.";
+                "delete-wallet-error",
-            $("delete-wallet-flash").classList.remove("hidden");
+                "No wallet selected for deletion.",
+            );
             return;
         }
 
+        const btn = $("btn-delete-wallet-confirm");
+        btn.disabled = true;
+        btn.classList.add("text-muted");
+
         const walletIdx = deleteWalletIndex;
         const wallet = state.wallets[walletIdx];
 
@@ -47,8 +49,9 @@ function init(_ctx) {
         try {
             await decryptWithPassword(wallet.encryptedSecret, pw);
         } catch (_e) {
-            $("delete-wallet-flash").textContent = "Wrong password.";
+            showError("delete-wallet-error", "Wrong password.");
-            $("delete-wallet-flash").classList.remove("hidden");
+            btn.disabled = false;
+            btn.classList.remove("text-muted");
             return;
         }
 

src/popup/views/importKey.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash } = require("./helpers");
+const { $, showView, showError, hideError } = require("./helpers");
 const { addressFromPrivateKey } = require("../../shared/wallet");
 const { encryptWithPassword } = require("../../shared/vault");
 const { state, saveState } = require("../../shared/state");
@@ -7,6 +7,7 @@ function show() {
     $("import-private-key").value = "";
     $("import-key-password").value = "";
     $("import-key-password-confirm").value = "";
+    hideError("import-key-error");
     showView("import-key");
 }
 
@@ -14,30 +15,34 @@ 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.");
+            showError("import-key-error", "Please enter your private key.");
             return;
         }
         let addr;
         try {
             addr = addressFromPrivateKey(key);
         } catch (e) {
-            showFlash("Invalid private key.");
+            showError("import-key-error", "Invalid private key.");
             return;
         }
         const pw = $("import-key-password").value;
         const pw2 = $("import-key-password-confirm").value;
         if (!pw) {
-            showFlash("Please choose a password.");
+            showError("import-key-error", "Please choose a password.");
             return;
         }
         if (pw.length < 12) {
-            showFlash("Password must be at least 12 characters.");
+            showError(
+                "import-key-error",
+                "Password must be at least 12 characters.",
+            );
             return;
         }
         if (pw !== pw2) {
-            showFlash("Passwords do not match.");
+            showError("import-key-error", "Passwords do not match.");
             return;
         }
+        hideError("import-key-error");
         const encrypted = await encryptWithPassword(key, pw);
         const walletNum = state.wallets.length + 1;
         state.wallets.push({

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,
+    // amount and symbol.  A single transaction (e.g. a swap) can produce
-    // but preserve contract call metadata (direction, label, method) so
+    // multiple token transfers (one per token involved), so we key token
-    // swaps and other contract interactions display correctly.
+    // 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()];