Compare commits

..

3 Commits

Author SHA1 Message Date
user
8c071ae508 fix: never collapse warning container — always reserve space to prevent layout shift
All checks were successful
check / check (push) Successful in 10s
Replace display:none with persistent visibility:hidden so the warning
area occupies the same vertical space regardless of API result.
This eliminates the layout shift that occurred when the container was
collapsed after the recipient history check returned.
2026-02-28 15:26:49 -08:00
user
a3c2b8227a 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)
2026-02-28 15:26:44 -08:00
user
f9f3e7b85a 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 15:26:44 -08:00
10 changed files with 50 additions and 61 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,13 @@ 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.visibility = "hidden";
estimateGas(txInfo);
checkRecipientHistory(txInfo);
}
async function estimateGas(txInfo) {
@@ -288,6 +292,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 — no warning needed, keep space reserved
// but invisible to prevent layout shift
return;
}
const txCount = await provider.getTransactionCount(txInfo.to);
if (txCount === 0) {
el.style.visibility = "visible";
}
// If txCount > 0, leave visibility:hidden — space stays reserved
} catch (e) {
log.errorf("recipient history check failed:", e.message);
// On error, leave visibility:hidden — no layout shift, no false warning
}
}
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,
@@ -171,7 +170,6 @@ function render() {
.forEach((el) => {
el.onclick = () => {
navigator.clipboard.writeText(el.dataset.copy);
flashCopyElement(el);
showFlash("Copied!");
};
});
@@ -249,7 +247,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,
@@ -77,7 +76,6 @@ function attachCopyHandlers(viewId) {
.forEach((el) => {
el.onclick = () => {
navigator.clipboard.writeText(el.dataset.copy);
flashCopyElement(el);
showFlash("Copied!");
};
});