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

fix: use visibility:hidden/visible instead of CSS transitions for zero-tx warning
All checks were successful
check / check (push) Successful in 22s
Details

Browse Source 
Remove all CSS transitions, max-height changes, and opacity animations.
The warning container always reserves its space with visibility:hidden
and switches to visibility:visible when needed. No layout shift ever.
This commit is contained in:
user
2026-02-28 15:46:58 -08:00
parent 576fe3ab15
commit 045328f3b9
2 changed files with 4 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/popup/index.html
View File

@@ -580,14 +580,7 @@
<div <div
id="confirm-recipient-warning" id="confirm-recipient-warning"
class="mb-2" class="mb-2"
style=" style="visibility: hidden"
overflow: hidden;
transition:
max-height 0.3s ease,
opacity 0.3s ease;
max-height: 60px;
opacity: 0;
"
> >
<div <div
class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500" class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"

20
src/popup/views/confirmTx.js
View File

@@ -243,11 +243,8 @@ function show(txInfo) {
state.viewData = { pendingTx: txInfo }; state.viewData = { pendingTx: txInfo };
showView("confirm-tx"); showView("confirm-tx");
// Reset recipient warning: reserve space (max-height) while the async // Reset recipient warning to hidden (space always reserved, no layout shift)
// check runs, then collapse smoothly if not needed. $("confirm-recipient-warning").style.visibility = "hidden";
const recipientWarning = $("confirm-recipient-warning");
recipientWarning.style.maxHeight = "60px";
recipientWarning.style.opacity = "0";
estimateGas(txInfo); estimateGas(txInfo);
checkRecipientHistory(txInfo); checkRecipientHistory(txInfo);
@@ -302,25 +299,14 @@ async function checkRecipientHistory(txInfo) {
// the nonce, i.e. sent-tx count only). // the nonce, i.e. sent-tx count only).
const code = await provider.getCode(txInfo.to); const code = await provider.getCode(txInfo.to);
if (code && code !== "0x") { if (code && code !== "0x") {
// Contract address — no warning needed, collapse smoothly
el.style.maxHeight = "0";
el.style.opacity = "0";
return; return;
} }
const txCount = await provider.getTransactionCount(txInfo.to); const txCount = await provider.getTransactionCount(txInfo.to);
if (txCount === 0) { if (txCount === 0) {
// Show warning: fade in (space already reserved) el.style.visibility = "visible";
el.style.opacity = "1";
} else {
// Recipient has history — collapse the reserved space smoothly
el.style.maxHeight = "0";
el.style.opacity = "0";
} }
} catch (e) { } catch (e) {
log.errorf("recipient history check failed:", e.message); log.errorf("recipient history check failed:", e.message);
// On error, collapse space — no false warning
el.style.maxHeight = "0";
el.style.opacity = "0";
} }
} }