fix: standardize error display to use showError/hideError helpers

Replaces four inconsistent error display patterns with the centralized
showError()/hideError() helpers from helpers.js:

- approval.js: replace direct classList toggling on approve-tx-error and
  approve-sign-error with showError()/hideError()
- addressDetail.js: rename export-privkey-flash to export-privkey-error,
  use showError()/hideError() instead of direct DOM manipulation
- deleteWallet.js: rename delete-wallet-flash to delete-wallet-error,
  use showError()/hideError() instead of direct DOM with text-red-500
- addWallet.js: replace showFlash() validation errors with dedicated
  add-wallet-error div and showError() (keep showFlash for status msgs)
- importKey.js: replace showFlash() validation errors with dedicated
  import-key-error div and showError()
- index.html: add error divs with min-h-[1.25rem] for add-wallet,
  import-key views; update existing error divs to use consistent
  min-h-[1.25rem] class instead of hidden class

Closes #87

src/popup/index.html

@@ -106,7 +106,7 @@
                 </div>
                 <div
                     id="add-wallet-error"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
+                    class="text-xs min-h-[1.25rem] mb-2"
                 ></div>
                 <button
                     id="btn-add-wallet-confirm"
@@ -168,7 +168,7 @@
                 </div>
                 <div
                     id="import-key-error"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
+                    class="text-xs min-h-[1.25rem] mb-2"
                 ></div>
                 <button
                     id="btn-import-key-confirm"
@@ -374,7 +374,7 @@
                 </p>
                 <div
                     id="export-privkey-error"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
+                    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>
@@ -589,23 +589,11 @@
                     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"
                 >
-                    Sign &amp; Send
+                    Send
                 </button>
             </div>
 
@@ -684,6 +672,42 @@
                 </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
@@ -924,7 +948,7 @@
                 </p>
                 <div
                     id="delete-wallet-error"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
+                    class="text-xs min-h-[1.25rem] mb-2"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1">Password</label>
@@ -1125,7 +1149,7 @@
                 </div>
                 <div
                     id="approve-tx-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
+                    class="text-xs min-h-[1.25rem] mb-2"
                 ></div>
                 <div class="flex justify-between">
                     <button
@@ -1191,7 +1215,7 @@
                 </div>
                 <div
                     id="approve-sign-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
+                    class="text-xs min-h-[1.25rem] mb-2"
                 ></div>
                 <div class="flex justify-between">
                     <button

src/popup/index.js

@@ -74,7 +74,6 @@ const RESTORABLE_VIEWS = new Set([
     "receive",
     "settings",
     "settings-addtoken",
-    "confirm-tx",
     "transaction",
     "success-tx",
     "error-tx",
@@ -128,13 +127,6 @@ 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

@@ -83,7 +83,6 @@ function init(ctx) {
             );
             return;
         }
-        hideError("add-wallet-error");
         const encrypted = await encryptWithPassword(mnemonic, pw);
         const walletNum = state.wallets.length + 1;
         const wallet = {

src/popup/views/addressDetail.js

@@ -325,9 +325,6 @@ function init(_ctx) {
             showError("export-privkey-error", "Password is required.");
             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(
@@ -346,9 +343,6 @@ function init(_ctx) {
             hideError("export-privkey-error");
         } catch {
             showError("export-privkey-error", "Wrong password.");
-        } finally {
-            btn.disabled = false;
-            btn.classList.remove("text-muted");
         }
     });
 

src/popup/views/approval.js

@@ -256,9 +256,6 @@ function showTxApproval(details) {
         $("approve-tx-data-section").classList.add("hidden");
     }
 
-    $("approve-tx-password").value = "";
-    $("approve-tx-error").classList.add("hidden");
-
     showView("approve-tx");
 }
 

src/popup/views/confirmTx.js

@@ -1,6 +1,6 @@
-// Transaction confirmation view with inline password.
+// Transaction confirmation view + password modal.
-// Shows transaction details, warnings, errors. On Sign & Send,
+// Shows transaction details, warnings, errors. On proceed, opens
-// reads inline password, decrypts secret, signs and broadcasts.
+// password modal, decrypts secret, signs and broadcasts.
 
 const {
     parseEther,
@@ -39,13 +39,6 @@ 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}`;
 }
@@ -233,14 +226,9 @@ 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);
@@ -286,20 +274,39 @@ 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", async () => {
+    $("btn-confirm-send").addEventListener("click", () => {
-        const password = $("confirm-tx-password").value;
+        showPasswordModal();
+    });
+
+    $("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(
+            showError("modal-password-error", "Please enter your password.");
-                "confirm-tx-password-error",
-                "Please enter your password.",
-            );
             return;
         }
 
         const wallet = state.wallets[state.selectedWallet];
         let decryptedSecret;
-        hideError("confirm-tx-password-error");
+        hideError("modal-password-error");
 
         try {
             decryptedSecret = await decryptWithPassword(
@@ -307,12 +314,11 @@ function init(ctx) {
                 password,
             );
         } catch (e) {
-            showError("confirm-tx-password-error", "Wrong password.");
+            showError("modal-password-error", "Wrong password.");
             return;
         }
 
-        $("btn-confirm-send").disabled = true;
+        hidePasswordModal();
-        $("btn-confirm-send").classList.add("text-muted");
 
         let tx;
         try {
@@ -349,15 +355,8 @@ 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, restore };
+module.exports = { init, show };

src/popup/views/deleteWallet.js

@@ -38,10 +38,6 @@ function init(_ctx) {
             return;
         }
 
-        const btn = $("btn-delete-wallet-confirm");
-        btn.disabled = true;
-        btn.classList.add("text-muted");
-
         const walletIdx = deleteWalletIndex;
         const wallet = state.wallets[walletIdx];
 
@@ -50,8 +46,6 @@ function init(_ctx) {
             await decryptWithPassword(wallet.encryptedSecret, pw);
         } catch (_e) {
             showError("delete-wallet-error", "Wrong password.");
-            btn.disabled = false;
-            btn.classList.remove("text-muted");
             return;
         }
 

src/popup/views/importKey.js

@@ -42,7 +42,6 @@ function init(ctx) {
             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({