Compare commits

..

1 Commits

Author SHA1 Message Date
user
db1b5c1c69 fix: standardize error display to use showError/hideError helpers
All checks were successful
check / check (push) Successful in 22s
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
2026-02-28 13:41:33 -08:00
6 changed files with 56 additions and 59 deletions

View File

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

View File

@@ -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 = {

View File

@@ -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");
$("export-privkey-flash").textContent = "";
hideError("export-privkey-error");
$("export-privkey-password-section").classList.remove("hidden");
$("export-privkey-result").classList.add("hidden");
$("export-privkey-value").textContent = "";
@@ -321,8 +322,7 @@ 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.";
$("export-privkey-flash").classList.remove("hidden");
showError("export-privkey-error", "Password is required.");
return;
}
const btn = $("btn-export-privkey-confirm");
@@ -343,10 +343,9 @@ 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.";
$("export-privkey-flash").classList.remove("hidden");
showError("export-privkey-error", "Wrong password.");
} finally {
btn.disabled = false;
btn.classList.remove("text-muted");

View File

@@ -244,7 +244,6 @@ function show(txInfo) {
showView("confirm-tx");
estimateGas(txInfo);
checkRecipientHistory(txInfo);
}
async function estimateGas(txInfo) {
@@ -287,28 +286,6 @@ 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;

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 { 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 = "";
$("delete-wallet-flash").classList.add("hidden");
hideError("delete-wallet-error");
showView("delete-wallet-confirm");
}
@@ -27,16 +26,15 @@ function init(_ctx) {
$("btn-delete-wallet-confirm").addEventListener("click", async () => {
const pw = $("delete-wallet-password").value;
if (!pw) {
$("delete-wallet-flash").textContent =
"Please enter your password.";
$("delete-wallet-flash").classList.remove("hidden");
showError("delete-wallet-error", "Please enter your password.");
return;
}
if (deleteWalletIndex === null) {
$("delete-wallet-flash").textContent =
"No wallet selected for deletion.";
$("delete-wallet-flash").classList.remove("hidden");
showError(
"delete-wallet-error",
"No wallet selected for deletion.",
);
return;
}
@@ -51,8 +49,7 @@ function init(_ctx) {
try {
await decryptWithPassword(wallet.encryptedSecret, pw);
} catch (_e) {
$("delete-wallet-flash").textContent = "Wrong password.";
$("delete-wallet-flash").classList.remove("hidden");
showError("delete-wallet-error", "Wrong password.");
btn.disabled = false;
btn.classList.remove("text-muted");
return;

View File

@@ -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({