Compare commits

..

2 Commits

Author SHA1 Message Date
user
b799686cd4 fix: zero-tx warning layout shift and contract address false positive
All checks were successful
check / check (push) Successful in 22s
- 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)
2026-02-28 14:18:28 -08:00
user
9e177f04a4 feat: show red warning when sending to address with zero tx history
On the confirm-tx view, asynchronously check the recipient address
transaction count via getTransactionCount(). If zero, display a
prominent red warning advising the user to double-check the address.

Closes #82
2026-02-28 14:18:28 -08:00
10 changed files with 58 additions and 75 deletions

View File

@@ -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"

View File

@@ -15,21 +15,6 @@
--color-section: #dddddd;
}
@keyframes copy-flash {
0% {
background-color: var(--color-fg);
color: var(--color-bg);
}
100% {
background-color: transparent;
color: inherit;
}
}
.copy-flash {
animation: copy-flash 500ms ease-out;
}
body {
width: 396px;
overflow-x: hidden;

View File

@@ -2,7 +2,6 @@ const {
$,
showView,
showFlash,
flashCopyElement,
balanceLinesForAddress,
addressDotHtml,
addressTitle,
@@ -238,11 +237,9 @@ function renderTransactions(txs) {
function init(_ctx) {
ctx = _ctx;
$("address-full").addEventListener("click", () => {
const el = $("address-full");
const addr = el.dataset.full;
const addr = $("address-full").dataset.full;
if (addr) {
navigator.clipboard.writeText(addr);
flashCopyElement(el);
showFlash("Copied!");
}
});
@@ -357,21 +354,17 @@ function init(_ctx) {
});
$("export-privkey-value").addEventListener("click", () => {
const el = $("export-privkey-value");
const key = el.textContent;
const key = $("export-privkey-value").textContent;
if (key) {
navigator.clipboard.writeText(key);
flashCopyElement(el);
showFlash("Copied!");
}
});
$("export-privkey-address").addEventListener("click", () => {
const el = $("export-privkey-address");
const full = el.dataset.full;
const full = $("export-privkey-address").dataset.full;
if (full) {
navigator.clipboard.writeText(full);
flashCopyElement(el);
showFlash("Copied!");
}
});

View File

@@ -5,7 +5,6 @@ const {
$,
showView,
showFlash,
flashCopyElement,
addressDotHtml,
addressTitle,
escapeHtml,
@@ -314,11 +313,9 @@ function renderTransactions(txs) {
function init(_ctx) {
ctx = _ctx;
$("address-token-full").addEventListener("click", () => {
const el = $("address-token-full");
const addr = el.dataset.full;
const addr = $("address-token-full").dataset.full;
if (addr) {
navigator.clipboard.writeText(addr);
flashCopyElement(el);
showFlash("Copied!");
}
});
@@ -327,7 +324,6 @@ function init(_ctx) {
const copyEl = e.target.closest("[data-copy]");
if (copyEl) {
navigator.clipboard.writeText(copyEl.dataset.copy);
flashCopyElement(copyEl);
showFlash("Copied!");
}
});
@@ -376,7 +372,6 @@ function init(_ctx) {
if (copyEl) {
copyEl.addEventListener("click", () => {
navigator.clipboard.writeText(copyEl.dataset.copy);
flashCopyElement(copyEl);
showFlash("Copied!");
});
}

View File

@@ -15,7 +15,6 @@ const {
hideError,
showView,
showFlash,
flashCopyElement,
addressTitle,
addressDotHtml,
escapeHtml,
@@ -117,7 +116,6 @@ function show(txInfo) {
if (copyEl) {
copyEl.onclick = () => {
navigator.clipboard.writeText(copyEl.dataset.copy);
flashCopyElement(copyEl);
showFlash("Copied!");
};
}
@@ -245,7 +243,14 @@ 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);
}
async function estimateGas(txInfo) {
@@ -288,6 +293,34 @@ 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) {
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";
}
}
function init(ctx) {
$("btn-confirm-send").addEventListener("click", async () => {
const password = $("confirm-tx-password").value;

View File

@@ -76,18 +76,6 @@ function clearFlash() {
$("flash-msg").textContent = "";
}
function flashCopyElement(el) {
el.classList.remove("copy-flash");
// Force reflow so re-adding the class restarts the animation.
void el.offsetWidth;
el.classList.add("copy-flash");
el.addEventListener(
"animationend",
() => el.classList.remove("copy-flash"),
{ once: true },
);
}
function showFlash(msg, duration = 2000) {
clearFlash();
$("flash-msg").textContent = msg;
@@ -277,7 +265,6 @@ module.exports = {
hideError,
showView,
showFlash,
flashCopyElement,
balanceLine,
balanceLinesForAddress,
addressColor,

View File

@@ -2,7 +2,6 @@ const {
$,
showView,
showFlash,
flashCopyElement,
balanceLinesForAddress,
isoDate,
timeAgo,
@@ -86,9 +85,8 @@ function renderActiveAddress() {
el.innerHTML =
`<span class="underline decoration-dashed cursor-pointer" id="active-addr-copy">${dot}${escapeHtml(addr)}</span>` +
`<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
$("active-addr-copy").addEventListener("click", (e) => {
$("active-addr-copy").addEventListener("click", () => {
navigator.clipboard.writeText(addr);
flashCopyElement(e.currentTarget);
showFlash("Copied!");
});
} else {

View File

@@ -2,7 +2,6 @@ const {
$,
showView,
showFlash,
flashCopyElement,
formatAddressHtml,
addressTitle,
} = require("./helpers");
@@ -62,21 +61,17 @@ function show() {
function init(ctx) {
$("receive-address-block").addEventListener("click", () => {
const el = $("receive-address-block");
const addr = el.dataset.full;
const addr = $("receive-address-block").dataset.full;
if (addr) {
navigator.clipboard.writeText(addr);
flashCopyElement(el);
showFlash("Copied!");
}
});
$("btn-receive-copy").addEventListener("click", () => {
const block = $("receive-address-block");
const addr = block.dataset.full;
const addr = $("receive-address-block").dataset.full;
if (addr) {
navigator.clipboard.writeText(addr);
flashCopyElement(block);
showFlash("Copied!");
}
});

View File

@@ -5,7 +5,6 @@ const {
$,
showView,
showFlash,
flashCopyElement,
addressDotHtml,
addressTitle,
escapeHtml,
@@ -159,9 +158,8 @@ function render() {
loadCalldata(tx.hash, tx.to);
}
const isoStr = isoDate(tx.timestamp);
$("tx-detail-time").innerHTML =
copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
$("tx-detail-time").textContent =
isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
$("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
showView("transaction");
@@ -171,7 +169,6 @@ function render() {
.forEach((el) => {
el.onclick = () => {
navigator.clipboard.writeText(el.dataset.copy);
flashCopyElement(el);
showFlash("Copied!");
};
});
@@ -249,7 +246,6 @@ async function loadCalldata(txHash, toAddress) {
container.querySelectorAll("[data-copy]").forEach((el) => {
el.onclick = () => {
navigator.clipboard.writeText(el.dataset.copy);
flashCopyElement(el);
showFlash("Copied!");
};
});

View File

@@ -4,7 +4,6 @@ const {
$,
showView,
showFlash,
flashCopyElement,
addressDotHtml,
addressTitle,
escapeHtml,
@@ -60,16 +59,6 @@ function txHashHtml(hash) {
);
}
function blockNumberHtml(blockNumber) {
const num = String(blockNumber);
const link = `https://etherscan.io/block/${num}`;
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
return (
`<span class="underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(num)}">${escapeHtml(num)}</span>` +
extLink
);
}
function attachCopyHandlers(viewId) {
document
.getElementById(viewId)
@@ -77,7 +66,6 @@ function attachCopyHandlers(viewId) {
.forEach((el) => {
el.onclick = () => {
navigator.clipboard.writeText(el.dataset.copy);
flashCopyElement(el);
showFlash("Copied!");
};
});
@@ -201,7 +189,7 @@ function renderSuccess() {
$("success-tx-to").innerHTML = toAddressHtml(d.to);
}
$("success-tx-block").innerHTML = blockNumberHtml(d.blockNumber);
$("success-tx-block").textContent = String(d.blockNumber);
$("success-tx-hash").innerHTML = txHashHtml(d.hash);
// Show decoded calldata details if present