fix: zero-tx warning layout shift and contract address false positive
- Reserve space for the warning upfront using visibility:hidden instead of display:none, preventing layout shift per README policy - Move warning HTML to index.html as a static element rather than injecting dynamically - Skip warning for contract addresses (check getCode first) since getTransactionCount only returns outgoing tx nonce - Collapse reserved space when warning is not needed (address has history, is a contract, or on RPC error)
This commit is contained in:
@@ -577,6 +577,19 @@
|
||||
<div id="confirm-fee-amount" class="text-xs"></div>
|
||||
</div>
|
||||
<div id="confirm-warnings" class="mb-2 hidden"></div>
|
||||
<div
|
||||
id="confirm-recipient-warning"
|
||||
class="mb-2"
|
||||
style="visibility: hidden"
|
||||
>
|
||||
<div
|
||||
class="border border-red-500 border-dashed p-2 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>
|
||||
</div>
|
||||
<div
|
||||
id="confirm-errors"
|
||||
class="mb-2 border border-border border-dashed p-2 hidden"
|
||||
|
||||
@@ -243,6 +243,12 @@ function show(txInfo) {
|
||||
state.viewData = { pendingTx: txInfo };
|
||||
showView("confirm-tx");
|
||||
|
||||
// Reset recipient warning: reserve space (visibility:hidden) while
|
||||
// the async check runs, preventing layout shift per README policy.
|
||||
const recipientWarning = $("confirm-recipient-warning");
|
||||
recipientWarning.style.display = "";
|
||||
recipientWarning.style.visibility = "hidden";
|
||||
|
||||
estimateGas(txInfo);
|
||||
checkRecipientHistory(txInfo);
|
||||
}
|
||||
@@ -288,24 +294,30 @@ async function estimateGas(txInfo) {
|
||||
}
|
||||
|
||||
async function checkRecipientHistory(txInfo) {
|
||||
const el = $("confirm-recipient-warning");
|
||||
try {
|
||||
const provider = getProvider(state.rpcUrl);
|
||||
// Skip warning for contract addresses — they may legitimately
|
||||
// have zero outgoing transactions (getTransactionCount returns
|
||||
// the nonce, i.e. sent-tx count only).
|
||||
const code = await provider.getCode(txInfo.to);
|
||||
if (code && code !== "0x") {
|
||||
// Contract address — hide the reserved space entirely
|
||||
el.style.display = "none";
|
||||
return;
|
||||
}
|
||||
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;
|
||||
}
|
||||
el.style.visibility = "visible";
|
||||
} else {
|
||||
// Address has history — collapse the reserved space
|
||||
el.style.display = "none";
|
||||
}
|
||||
} catch (e) {
|
||||
log.errorf("recipient history check failed:", e.message);
|
||||
// On error, collapse the reserved space rather than showing a
|
||||
// false warning or leaving an empty gap
|
||||
el.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user