sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: standardize error display to use showError/hideError helpers
All checks were successful
check / check (push) Successful in 21s
Details

Browse Source 
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
This commit is contained in:
user
2026-02-28 12:49:39 -08:00
parent 3b6b18d168
commit efc299d542
6 changed files with 70 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/popup/index.html
View File

@@ -104,6 +104,10 @@
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg" class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
/> />
</div> </div>
<div
id="add-wallet-error"
class="text-xs min-h-[1.25rem] mb-2"
></div>
<button <button
id="btn-add-wallet-confirm" id="btn-add-wallet-confirm"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer" 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" class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
/> />
</div> </div>
<div
id="import-key-error"
class="text-xs min-h-[1.25rem] mb-2"
></div>
<button <button
id="btn-import-key-confirm" id="btn-import-key-confirm"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer" 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. transfer all funds from this address. Never share it.
</p> </p>
<div <div
id="export-privkey-flash" id="export-privkey-error"
class="text-xs mb-2 hidden" class="text-xs min-h-[1.25rem] mb-2"
></div> ></div>
<div id="export-privkey-password-section" class="mb-2"> <div id="export-privkey-password-section" class="mb-2">
<label class="block mb-1">Password</label> <label class="block mb-1">Password</label>
@@ -939,8 +947,8 @@
funds will be unrecoverable without your recovery phrase. funds will be unrecoverable without your recovery phrase.
</p> </p>
<div <div
id="delete-wallet-flash" id="delete-wallet-error"
class="text-xs text-red-500 mb-2 hidden" class="text-xs min-h-[1.25rem] mb-2"
></div> ></div>
<div class="mb-2"> <div class="mb-2">
<label class="block mb-1">Password</label> <label class="block mb-1">Password</label>
@@ -1139,7 +1147,10 @@
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg" class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
/> />
</div> </div>
<div id="approve-tx-error" class="text-xs hidden mb-2"></div> <div
id="approve-tx-error"
class="text-xs min-h-[1.25rem] mb-2"
></div>
<div class="flex justify-between"> <div class="flex justify-between">
<button <button
id="btn-approve-tx" id="btn-approve-tx"
@@ -1202,7 +1213,10 @@
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg" class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
/> />
</div> </div>
<div id="approve-sign-error" class="text-xs hidden mb-2"></div> <div
id="approve-sign-error"
class="text-xs min-h-[1.25rem] mb-2"
></div>
<div class="flex justify-between"> <div class="flex justify-between">
<button <button
id="btn-approve-sign" id="btn-approve-sign"

26
src/popup/views/addWallet.js
View File

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

13
src/popup/views/addressDetail.js
View File

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

17
src/popup/views/approval.js
View File

@@ -4,6 +4,8 @@ const {
addressTitle, addressTitle,
escapeHtml, escapeHtml,
showView, showView,
showError,
hideError,
} = require("./helpers"); } = require("./helpers");
const { state, saveState } = require("../../shared/state"); const { state, saveState } = require("../../shared/state");
const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers"); const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers");
@@ -342,7 +344,7 @@ function showSignApproval(details) {
} }
$("approve-sign-password").value = ""; $("approve-sign-password").value = "";
$("approve-sign-error").classList.add("hidden"); hideError("approve-sign-error");
$("btn-approve-sign").disabled = false; $("btn-approve-sign").disabled = false;
$("btn-approve-sign").classList.remove("text-muted"); $("btn-approve-sign").classList.remove("text-muted");
@@ -407,11 +409,10 @@ function init(ctx) {
$("btn-approve-tx").addEventListener("click", () => { $("btn-approve-tx").addEventListener("click", () => {
const password = $("approve-tx-password").value; const password = $("approve-tx-password").value;
if (!password) { 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; return;
} }
$("approve-tx-error").classList.add("hidden"); hideError("approve-tx-error");
$("btn-approve-tx").disabled = true; $("btn-approve-tx").disabled = true;
$("btn-approve-tx").classList.add("text-muted"); $("btn-approve-tx").classList.add("text-muted");
@@ -447,11 +448,10 @@ function init(ctx) {
$("btn-approve-sign").addEventListener("click", () => { $("btn-approve-sign").addEventListener("click", () => {
const password = $("approve-sign-password").value; const password = $("approve-sign-password").value;
if (!password) { 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; return;
} }
$("approve-sign-error").classList.add("hidden"); hideError("approve-sign-error");
$("btn-approve-sign").disabled = true; $("btn-approve-sign").disabled = true;
$("btn-approve-sign").classList.add("text-muted"); $("btn-approve-sign").classList.add("text-muted");
@@ -469,8 +469,7 @@ function init(ctx) {
} else { } else {
const msg = const msg =
(response && response.error) || "Signing failed."; (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").disabled = false;
$("btn-approve-sign").classList.remove("text-muted"); $("btn-approve-sign").classList.remove("text-muted");
} }

19
src/popup/views/deleteWallet.js
View File

@@ -1,4 +1,4 @@
const { $, showView, showFlash } = require("./helpers"); const { $, showView, showFlash, showError, hideError } = require("./helpers");
const { state, saveState } = require("../../shared/state"); const { state, saveState } = require("../../shared/state");
const { decryptWithPassword } = require("../../shared/vault"); const { decryptWithPassword } = require("../../shared/vault");
@@ -11,8 +11,7 @@ function show(walletIdx) {
$("delete-wallet-name").textContent = $("delete-wallet-name").textContent =
wallet.name || "Wallet " + (walletIdx + 1); wallet.name || "Wallet " + (walletIdx + 1);
$("delete-wallet-password").value = ""; $("delete-wallet-password").value = "";
$("delete-wallet-flash").textContent = ""; hideError("delete-wallet-error");
$("delete-wallet-flash").classList.add("hidden");
showView("delete-wallet-confirm"); showView("delete-wallet-confirm");
} }
@@ -27,16 +26,15 @@ function init(_ctx) {
$("btn-delete-wallet-confirm").addEventListener("click", async () => { $("btn-delete-wallet-confirm").addEventListener("click", async () => {
const pw = $("delete-wallet-password").value; const pw = $("delete-wallet-password").value;
if (!pw) { 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; return;
} }
if (deleteWalletIndex === null) { 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; return;
} }
@@ -47,8 +45,7 @@ function init(_ctx) {
try { try {
await decryptWithPassword(wallet.encryptedSecret, pw); await decryptWithPassword(wallet.encryptedSecret, pw);
} catch (_e) { } catch (_e) {
$("delete-wallet-flash").textContent = "Wrong password."; showError("delete-wallet-error", "Wrong password.");
$("delete-wallet-flash").classList.remove("hidden");
return; return;
} }

16
src/popup/views/importKey.js
View File

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