feat: show red warning when sending to address with zero tx history

On the confirm-tx view, asynchronously check the recipient address
transaction count via getTransactionCount(). If zero, display a
prominent red warning advising the user to double-check the address.

Closes #82

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 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"
@@ -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 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"
@@ -373,8 +365,8 @@
                     transfer all funds from this address. Never share it.
                 </p>
                 <div
-                    id="export-privkey-error"
+                    id="export-privkey-flash"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
+                    class="text-xs mb-2 hidden"
                 ></div>
                 <div id="export-privkey-password-section" class="mb-2">
                     <label class="block mb-1">Password</label>
@@ -923,8 +915,8 @@
                     funds will be unrecoverable without your recovery phrase.
                 </p>
                 <div
-                    id="delete-wallet-error"
+                    id="delete-wallet-flash"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
+                    class="text-xs text-red-500 mb-2 hidden"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1">Password</label>

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(
+            showFlash(
-                "add-wallet-error",
                 "Enter a recovery phrase or press the die to generate one.",
             );
             return;
         }
         const words = mnemonic.split(/\s+/);
         if (words.length !== 12 && words.length !== 24) {
-            showError(
+            showFlash(
-                "add-wallet-error",
                 "Recovery phrase must be 12 or 24 words. You entered " +
                     words.length +
                     ".",
@@ -43,27 +40,21 @@ function init(ctx) {
             return;
         }
         if (!isValidMnemonic(mnemonic)) {
-            showError(
+            showFlash("Invalid recovery phrase. Check for typos.");
-                "add-wallet-error",
-                "Invalid recovery phrase. Check for typos.",
-            );
             return;
         }
         const pw = $("add-wallet-password").value;
         const pw2 = $("add-wallet-password-confirm").value;
         if (!pw) {
-            showError("add-wallet-error", "Please choose a password.");
+            showFlash("Please choose a password.");
             return;
         }
         if (pw.length < 12) {
-            showError(
+            showFlash("Password must be at least 12 characters.");
-                "add-wallet-error",
-                "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,15 +66,13 @@ function init(ctx) {
                     firstAddress.toLowerCase(),
         );
         if (duplicate) {
-            showError(
+            showFlash(
-                "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,8 +2,6 @@ const {
     $,
     showView,
     showFlash,
-    showError,
-    hideError,
     balanceLinesForAddress,
     addressDotHtml,
     addressTitle,
@@ -312,7 +310,8 @@ function init(_ctx) {
         $("export-privkey-address").textContent = addr.address;
         $("export-privkey-address").dataset.full = addr.address;
         $("export-privkey-password").value = "";
-        hideError("export-privkey-error");
+        $("export-privkey-flash").classList.add("hidden");
+        $("export-privkey-flash").textContent = "";
         $("export-privkey-password-section").classList.remove("hidden");
         $("export-privkey-result").classList.add("hidden");
         $("export-privkey-value").textContent = "";
@@ -322,7 +321,8 @@ function init(_ctx) {
     $("btn-export-privkey-confirm").addEventListener("click", async () => {
         const password = $("export-privkey-password").value;
         if (!password) {
-            showError("export-privkey-error", "Password is required.");
+            $("export-privkey-flash").textContent = "Password is required.";
+            $("export-privkey-flash").classList.remove("hidden");
             return;
         }
         const btn = $("btn-export-privkey-confirm");
@@ -343,9 +343,10 @@ function init(_ctx) {
             $("export-privkey-password-section").classList.add("hidden");
             $("export-privkey-value").textContent = privateKey;
             $("export-privkey-result").classList.remove("hidden");
-            hideError("export-privkey-error");
+            $("export-privkey-flash").classList.add("hidden");
         } catch {
-            showError("export-privkey-error", "Wrong password.");
+            $("export-privkey-flash").textContent = "Wrong password.";
+            $("export-privkey-flash").classList.remove("hidden");
         } finally {
             btn.disabled = false;
             btn.classList.remove("text-muted");

src/popup/views/confirmTx.js

@@ -244,6 +244,7 @@ function show(txInfo) {
     showView("confirm-tx");
 
     estimateGas(txInfo);
+    checkRecipientHistory(txInfo);
 }
 
 async function estimateGas(txInfo) {
@@ -286,6 +287,28 @@ async function estimateGas(txInfo) {
     }
 }
 
+async function checkRecipientHistory(txInfo) {
+    try {
+        const provider = getProvider(state.rpcUrl);
+        const txCount = await provider.getTransactionCount(txInfo.to);
+        if (txCount === 0) {
+            const warningsEl = $("confirm-warnings");
+            const warning =
+                `<div class="border border-red-500 border-dashed p-2 mb-1 text-xs font-bold text-red-500">` +
+                `WARNING: The recipient address has ZERO transaction history. ` +
+                `This may indicate a fresh or unused address. Double-check the address before sending.</div>`;
+            if (warningsEl.classList.contains("hidden")) {
+                warningsEl.innerHTML = warning;
+                warningsEl.classList.remove("hidden");
+            } else {
+                warningsEl.innerHTML += warning;
+            }
+        }
+    } catch (e) {
+        log.errorf("recipient history check failed:", e.message);
+    }
+}
+
 function init(ctx) {
     $("btn-confirm-send").addEventListener("click", async () => {
         const password = $("confirm-tx-password").value;

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-flash").textContent =
-                "delete-wallet-error",
+                "No wallet selected for deletion.";
-                "No wallet selected for deletion.",
+            $("delete-wallet-flash").classList.remove("hidden");
-            );
             return;
         }
 
@@ -49,7 +51,8 @@ function init(_ctx) {
         try {
             await decryptWithPassword(wallet.encryptedSecret, pw);
         } catch (_e) {
-            showError("delete-wallet-error", "Wrong password.");
+            $("delete-wallet-flash").textContent = "Wrong password.";
+            $("delete-wallet-flash").classList.remove("hidden");
             btn.disabled = false;
             btn.classList.remove("text-muted");
             return;

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,34 +14,30 @@ 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(
+            showFlash("Password must be at least 12 characters.");
-                "import-key-error",
-                "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;
         }
-        hideError("import-key-error");
         const encrypted = await encryptWithPassword(key, pw);
         const walletNum = state.wallets.length + 1;
         state.wallets.push({