fix: never collapse warning container — always reserve space to prevent layout shift

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.

src/popup/index.html

@@ -104,10 +104,6 @@
                         class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
                     />
                 </div>
-                <div
-                    id="add-wallet-error"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
-                ></div>
                 <button
                     id="btn-add-wallet-confirm"
                     class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -166,10 +162,6 @@
                         class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
                     />
                 </div>
-                <div
-                    id="import-key-error"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
-                ></div>
                 <button
                     id="btn-import-key-confirm"
                     class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -373,8 +365,8 @@
                     transfer all funds from this address. Never share it.
                 </p>
                 <div
-                    id="export-privkey-error"
+                    id="export-privkey-flash"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
+                    class="text-xs mb-2 hidden"
                 ></div>
                 <div id="export-privkey-password-section" class="mb-2">
                     <label class="block mb-1">Password</label>
@@ -585,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"
@@ -923,8 +928,8 @@
                     funds will be unrecoverable without your recovery phrase.
                 </p>
                 <div
-                    id="delete-wallet-error"
+                    id="delete-wallet-flash"
-                    class="text-xs mb-2 min-h-[1.25rem] hidden"
+                    class="text-xs text-red-500 mb-2 hidden"
                 ></div>
                 <div class="mb-2">
                     <label class="block mb-1">Password</label>

src/popup/views/addWallet.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash, showError, hideError } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const {
     generateMnemonic,
     hdWalletFromMnemonic,
@@ -13,7 +13,6 @@ function show() {
     $("add-wallet-password").value = "";
     $("add-wallet-password-confirm").value = "";
     $("add-wallet-phrase-warning").classList.add("hidden");
-    hideError("add-wallet-error");
     showView("add-wallet");
 }
 
@@ -26,16 +25,14 @@ function init(ctx) {
     $("btn-add-wallet-confirm").addEventListener("click", async () => {
         const mnemonic = $("wallet-mnemonic").value.trim();
         if (!mnemonic) {
-            showError(
+            showFlash(
-                "add-wallet-error",
                 "Enter a recovery phrase or press the die to generate one.",
             );
             return;
         }
         const words = mnemonic.split(/\s+/);
         if (words.length !== 12 && words.length !== 24) {
-            showError(
+            showFlash(
-                "add-wallet-error",
                 "Recovery phrase must be 12 or 24 words. You entered " +
                     words.length +
                     ".",
@@ -43,27 +40,21 @@ function init(ctx) {
             return;
         }
         if (!isValidMnemonic(mnemonic)) {
-            showError(
+            showFlash("Invalid recovery phrase. Check for typos.");
-                "add-wallet-error",
-                "Invalid recovery phrase. Check for typos.",
-            );
             return;
         }
         const pw = $("add-wallet-password").value;
         const pw2 = $("add-wallet-password-confirm").value;
         if (!pw) {
-            showError("add-wallet-error", "Please choose a password.");
+            showFlash("Please choose a password.");
             return;
         }
         if (pw.length < 12) {
-            showError(
+            showFlash("Password must be at least 12 characters.");
-                "add-wallet-error",
-                "Password must be at least 12 characters.",
-            );
             return;
         }
         if (pw !== pw2) {
-            showError("add-wallet-error", "Passwords do not match.");
+            showFlash("Passwords do not match.");
             return;
         }
         const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic);
@@ -75,15 +66,13 @@ function init(ctx) {
                     firstAddress.toLowerCase(),
         );
         if (duplicate) {
-            showError(
+            showFlash(
-                "add-wallet-error",
                 "This recovery phrase is already added (" +
                     duplicate.name +
                     ").",
             );
             return;
         }
-        hideError("add-wallet-error");
         const encrypted = await encryptWithPassword(mnemonic, pw);
         const walletNum = state.wallets.length + 1;
         const wallet = {

src/popup/views/addressDetail.js

@@ -2,8 +2,6 @@ const {
     $,
     showView,
     showFlash,
-    showError,
-    hideError,
     balanceLinesForAddress,
     addressDotHtml,
     addressTitle,
@@ -312,7 +310,8 @@ function init(_ctx) {
         $("export-privkey-address").textContent = addr.address;
         $("export-privkey-address").dataset.full = addr.address;
         $("export-privkey-password").value = "";
-        hideError("export-privkey-error");
+        $("export-privkey-flash").classList.add("hidden");
+        $("export-privkey-flash").textContent = "";
         $("export-privkey-password-section").classList.remove("hidden");
         $("export-privkey-result").classList.add("hidden");
         $("export-privkey-value").textContent = "";
@@ -322,7 +321,8 @@ function init(_ctx) {
     $("btn-export-privkey-confirm").addEventListener("click", async () => {
         const password = $("export-privkey-password").value;
         if (!password) {
-            showError("export-privkey-error", "Password is required.");
+            $("export-privkey-flash").textContent = "Password is required.";
+            $("export-privkey-flash").classList.remove("hidden");
             return;
         }
         const btn = $("btn-export-privkey-confirm");
@@ -343,9 +343,10 @@ function init(_ctx) {
             $("export-privkey-password-section").classList.add("hidden");
             $("export-privkey-value").textContent = privateKey;
             $("export-privkey-result").classList.remove("hidden");
-            hideError("export-privkey-error");
+            $("export-privkey-flash").classList.add("hidden");
         } catch {
-            showError("export-privkey-error", "Wrong password.");
+            $("export-privkey-flash").textContent = "Wrong password.";
+            $("export-privkey-flash").classList.remove("hidden");
         } finally {
             btn.disabled = false;
             btn.classList.remove("text-muted");

src/popup/views/approval.js

@@ -172,6 +172,8 @@ function showTxApproval(details) {
     // If this is an ERC-20 call, try to extract the real recipient and amount
     const decoded = decodeCalldata(details.txParams.data, toAddr || "");
     if (decoded && decoded.details) {
+        let decodedTokenAddr = null;
+        let decodedTokenSymbol = null;
         for (const d of decoded.details) {
             if (d.label === "Recipient" && d.address) {
                 pendingTxDetails.to = d.address;
@@ -179,10 +181,20 @@ function showTxApproval(details) {
             if (d.label === "Amount") {
                 pendingTxDetails.amount = d.rawValue || d.value;
             }
+            if (d.label === "Token In" && d.isToken && d.address) {
+                const t = TOKEN_BY_ADDRESS.get(d.address.toLowerCase());
+                if (t) {
+                    decodedTokenAddr = d.address;
+                    decodedTokenSymbol = t.symbol;
+                }
+            }
         }
         if (token) {
             pendingTxDetails.token = toAddr;
             pendingTxDetails.tokenSymbol = token.symbol;
+        } else if (decodedTokenAddr) {
+            pendingTxDetails.token = decodedTokenAddr;
+            pendingTxDetails.tokenSymbol = decodedTokenSymbol;
         }
     }
 

src/popup/views/confirmTx.js

@@ -243,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) {
@@ -286,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;

src/popup/views/deleteWallet.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash, showError, hideError } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { decryptWithPassword } = require("../../shared/vault");
 
@@ -11,7 +11,8 @@ function show(walletIdx) {
     $("delete-wallet-name").textContent =
         wallet.name || "Wallet " + (walletIdx + 1);
     $("delete-wallet-password").value = "";
-    hideError("delete-wallet-error");
+    $("delete-wallet-flash").textContent = "";
+    $("delete-wallet-flash").classList.add("hidden");
     showView("delete-wallet-confirm");
 }
 
@@ -26,15 +27,16 @@ function init(_ctx) {
     $("btn-delete-wallet-confirm").addEventListener("click", async () => {
         const pw = $("delete-wallet-password").value;
         if (!pw) {
-            showError("delete-wallet-error", "Please enter your password.");
+            $("delete-wallet-flash").textContent =
+                "Please enter your password.";
+            $("delete-wallet-flash").classList.remove("hidden");
             return;
         }
 
         if (deleteWalletIndex === null) {
-            showError(
+            $("delete-wallet-flash").textContent =
-                "delete-wallet-error",
+                "No wallet selected for deletion.";
-                "No wallet selected for deletion.",
+            $("delete-wallet-flash").classList.remove("hidden");
-            );
             return;
         }
 
@@ -49,7 +51,8 @@ function init(_ctx) {
         try {
             await decryptWithPassword(wallet.encryptedSecret, pw);
         } catch (_e) {
-            showError("delete-wallet-error", "Wrong password.");
+            $("delete-wallet-flash").textContent = "Wrong password.";
+            $("delete-wallet-flash").classList.remove("hidden");
             btn.disabled = false;
             btn.classList.remove("text-muted");
             return;

src/popup/views/importKey.js

@@ -1,4 +1,4 @@
-const { $, showView, showError, hideError } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const { addressFromPrivateKey } = require("../../shared/wallet");
 const { encryptWithPassword } = require("../../shared/vault");
 const { state, saveState } = require("../../shared/state");
@@ -7,7 +7,6 @@ function show() {
     $("import-private-key").value = "";
     $("import-key-password").value = "";
     $("import-key-password-confirm").value = "";
-    hideError("import-key-error");
     showView("import-key");
 }
 
@@ -15,34 +14,30 @@ function init(ctx) {
     $("btn-import-key-confirm").addEventListener("click", async () => {
         const key = $("import-private-key").value.trim();
         if (!key) {
-            showError("import-key-error", "Please enter your private key.");
+            showFlash("Please enter your private key.");
             return;
         }
         let addr;
         try {
             addr = addressFromPrivateKey(key);
         } catch (e) {
-            showError("import-key-error", "Invalid private key.");
+            showFlash("Invalid private key.");
             return;
         }
         const pw = $("import-key-password").value;
         const pw2 = $("import-key-password-confirm").value;
         if (!pw) {
-            showError("import-key-error", "Please choose a password.");
+            showFlash("Please choose a password.");
             return;
         }
         if (pw.length < 12) {
-            showError(
+            showFlash("Password must be at least 12 characters.");
-                "import-key-error",
-                "Password must be at least 12 characters.",
-            );
             return;
         }
         if (pw !== pw2) {
-            showError("import-key-error", "Passwords do not match.");
+            showFlash("Passwords do not match.");
             return;
         }
-        hideError("import-key-error");
         const encrypted = await encryptWithPassword(key, pw);
         const walletNum = state.wallets.length + 1;
         state.wallets.push({

src/popup/views/transactionDetail.js

@@ -158,8 +158,9 @@ function render() {
         loadCalldata(tx.hash, tx.to);
     }
 
-    $("tx-detail-time").textContent =
+    const isoStr = isoDate(tx.timestamp);
-        isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
+    $("tx-detail-time").innerHTML =
+        copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
     $("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
     showView("transaction");
 

src/popup/views/txStatus.js

@@ -43,10 +43,11 @@ function toAddressHtml(address) {
     if (title) {
         return (
             `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>` +
-            `<div class="break-all">${escapeHtml(address)}${extLink}</div>`
+            `<div class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</div>` +
+            extLink
         );
     }
-    return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
+    return `<div class="flex items-center">${dot}<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</span>${extLink}</div>`;
 }
 
 function txHashHtml(hash) {
@@ -58,6 +59,16 @@ 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)
@@ -139,7 +150,7 @@ function etherscanTokenLink(address) {
 
 function decodedDetailsHtml(decoded) {
     if (!decoded || !decoded.details) return "";
-    let html = "";
+    let html = `<div class="border border-border border-dashed p-2 mb-3">`;
     if (decoded.name) {
         html += `<div class="mb-2"><div class="text-xs text-muted mb-1">Action</div>`;
         html += `<div class="font-bold">${escapeHtml(decoded.name)}</div></div>`;
@@ -164,20 +175,36 @@ function decodedDetailsHtml(decoded) {
         }
         html += `</div>`;
     }
+    html += `</div>`;
     return html;
 }
 
 function renderSuccess() {
     const d = state.viewData;
     if (!d || !d.hash) return;
-    $("success-tx-summary").textContent = d.amount + " " + d.symbol;
+
-    $("success-tx-to").innerHTML = toAddressHtml(d.to);
+    const hasDecoded = d.decoded && d.decoded.details;
-    $("success-tx-block").textContent = String(d.blockNumber);
+
+    // When decoded details are present, the Amount and To are already
+    // shown inside the decoded well — hide the top-level duplicates.
+    const summarySection = $("success-tx-summary").parentElement;
+    const toSection = $("success-tx-to").parentElement;
+    if (hasDecoded) {
+        summarySection.classList.add("hidden");
+        toSection.classList.add("hidden");
+    } else {
+        summarySection.classList.remove("hidden");
+        toSection.classList.remove("hidden");
+        $("success-tx-summary").textContent = d.amount + " " + d.symbol;
+        $("success-tx-to").innerHTML = toAddressHtml(d.to);
+    }
+
+    $("success-tx-block").innerHTML = blockNumberHtml(d.blockNumber);
     $("success-tx-hash").innerHTML = txHashHtml(d.hash);
 
     // Show decoded calldata details if present
     const decodedEl = $("success-tx-decoded");
-    if (decodedEl && d.decoded) {
+    if (decodedEl && hasDecoded) {
         decodedEl.innerHTML = decodedDetailsHtml(d.decoded);
         decodedEl.classList.remove("hidden");
     } else if (decodedEl) {

src/shared/uniswap.js

@@ -445,12 +445,18 @@ function decode(data, toAddress) {
             const maxUint160 = BigInt(
                 "0xffffffffffffffffffffffffffffffffffffffff",
             );
-            const amountStr =
+            const isUnlimited = inputAmount >= maxUint160;
-                inputAmount >= maxUint160
+            const amountRaw = isUnlimited
-                    ? "Unlimited"
+                ? "Unlimited"
-                    : formatAmount(inputAmount, inInfo.decimals) +
+                : formatAmount(inputAmount, inInfo.decimals);
-                      (inSymbol ? " " + inSymbol : "");
+            const amountStr = isUnlimited
-            details.push({ label: "Amount", value: amountStr });
+                ? "Unlimited"
+                : amountRaw + (inSymbol ? " " + inSymbol : "");
+            details.push({
+                label: "Amount",
+                value: amountStr,
+                rawValue: amountRaw,
+            });
         }
 
         if (outSymbol) {