fix: approve-tx/approve-sign error divs consistency with confirm-tx
All checks were successful
check / check (push) Successful in 22s
All checks were successful
check / check (push) Successful in 22s
Add min-h-[1.25rem] and border styling to approve-tx-error and approve-sign-error divs to prevent layout shift, matching the pattern used by modal-password-error in confirm-tx view. Replace direct DOM classList manipulation with showError()/hideError() helpers from helpers.js for consistency. Closes #84
This commit is contained in:
@@ -1139,7 +1139,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 +1205,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"
|
||||
|
||||
@@ -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");
|
||||
@@ -342,7 +344,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 +409,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.";
|
||||
$("approve-tx-error").classList.remove("hidden");
|
||||
showError("approve-tx-error", "Please enter your password.");
|
||||
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 +448,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.";
|
||||
$("approve-sign-error").classList.remove("hidden");
|
||||
showError("approve-sign-error", "Please enter your password.");
|
||||
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 +469,7 @@ function init(ctx) {
|
||||
} else {
|
||||
const msg =
|
||||
(response && response.error) || "Signing failed.";
|
||||
$("approve-sign-error").textContent = msg;
|
||||
$("approve-sign-error").classList.remove("hidden");
|
||||
showError("approve-sign-error", msg);
|
||||
$("btn-approve-sign").disabled = false;
|
||||
$("btn-approve-sign").classList.remove("text-muted");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user