Add dedicated wait/success/error screens for transaction status

After broadcast, the user is taken to a full-screen wait view showing
the amount, recipient, tx hash (copyable + etherscan link), and a
count-up timer. The view polls every 10 seconds for confirmation.

On confirmation: navigates to success screen showing block number,
tx hash, and a Done button that returns to the address view.

On 60-second timeout or error: navigates to error screen with the
failure message, tx hash (if available), and Done button.

Replaces the previous inline confirm-status div that was crammed
onto the confirmation page.

src/popup/views/txStatus.js

@@ -0,0 +1,154 @@
+// Post-broadcast transaction status views: wait, success, error.
+
+const {
+    $,
+    showView,
+    showFlash,
+    addressDotHtml,
+    escapeHtml,
+} = require("./helpers");
+const { state } = require("../../shared/state");
+const { getProvider } = require("../../shared/balances");
+const { log } = require("../../shared/log");
+
+const EXT_ICON =
+    `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
+    `<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
+    `<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
+    `<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
+    `</svg></span>`;
+
+let ctx;
+let elapsedTimer = null;
+let pollTimer = null;
+
+function clearTimers() {
+    if (elapsedTimer) {
+        clearInterval(elapsedTimer);
+        elapsedTimer = null;
+    }
+    if (pollTimer) {
+        clearInterval(pollTimer);
+        pollTimer = null;
+    }
+}
+
+function toAddressHtml(address) {
+    const dot = addressDotHtml(address);
+    const link = `https://etherscan.io/address/${address}`;
+    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+    return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
+}
+
+function txHashHtml(hash) {
+    const link = `https://etherscan.io/tx/${hash}`;
+    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 break-all" data-copy="${escapeHtml(hash)}">${escapeHtml(hash)}</span>` +
+        extLink
+    );
+}
+
+function attachCopyHandlers(viewId) {
+    document
+        .getElementById(viewId)
+        .querySelectorAll("[data-copy]")
+        .forEach((el) => {
+            el.onclick = () => {
+                navigator.clipboard.writeText(el.dataset.copy);
+                showFlash("Copied!");
+            };
+        });
+}
+
+function showWait(txInfo, txHash) {
+    clearTimers();
+
+    const symbol = txInfo.token === "ETH" ? "ETH" : txInfo.tokenSymbol || "?";
+    $("wait-tx-summary").textContent = txInfo.amount + " " + symbol;
+    $("wait-tx-to").innerHTML = toAddressHtml(txInfo.to);
+    $("wait-tx-hash").innerHTML = txHashHtml(txHash);
+    attachCopyHandlers("view-wait-tx");
+
+    const broadcastTime = Date.now();
+    $("wait-tx-status").textContent = "Waiting for confirmation... 0s";
+
+    elapsedTimer = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - broadcastTime) / 1000);
+        $("wait-tx-status").textContent =
+            "Waiting for confirmation... " + elapsed + "s";
+    }, 1000);
+
+    const provider = getProvider(state.rpcUrl);
+    pollTimer = setInterval(async () => {
+        try {
+            const receipt = await provider.getTransactionReceipt(txHash);
+            if (receipt) {
+                showSuccess(txInfo, txHash, receipt.blockNumber);
+            }
+        } catch (e) {
+            log.errorf("poll receipt failed:", e.message);
+        }
+
+        const elapsed = Math.floor((Date.now() - broadcastTime) / 1000);
+        if (elapsed >= 60) {
+            showError(
+                txInfo,
+                txHash,
+                "Transaction was not confirmed within 60 seconds. It may still confirm later \u2014 check Etherscan.",
+            );
+        }
+    }, 10000);
+
+    showView("wait-tx");
+}
+
+function showSuccess(txInfo, txHash, blockNumber) {
+    clearTimers();
+
+    const symbol = txInfo.token === "ETH" ? "ETH" : txInfo.tokenSymbol || "?";
+    $("success-tx-summary").textContent = txInfo.amount + " " + symbol;
+    $("success-tx-to").innerHTML = toAddressHtml(txInfo.to);
+    $("success-tx-block").textContent = String(blockNumber);
+    $("success-tx-hash").innerHTML = txHashHtml(txHash);
+    attachCopyHandlers("view-success-tx");
+
+    showView("success-tx");
+    ctx.doRefreshAndRender();
+}
+
+function showError(txInfo, txHash, message) {
+    clearTimers();
+
+    const symbol = txInfo.token === "ETH" ? "ETH" : txInfo.tokenSymbol || "?";
+    $("error-tx-summary").textContent = txInfo.amount + " " + symbol;
+    $("error-tx-to").innerHTML = toAddressHtml(txInfo.to);
+    $("error-tx-message").textContent = message;
+
+    if (txHash) {
+        $("error-tx-hash").innerHTML = txHashHtml(txHash);
+        $("error-tx-hash-section").classList.remove("hidden");
+        attachCopyHandlers("view-error-tx");
+    } else {
+        $("error-tx-hash-section").classList.add("hidden");
+    }
+
+    showView("error-tx");
+}
+
+function navigateBack() {
+    if (state.selectedToken) {
+        ctx.showAddressToken();
+    } else {
+        ctx.showAddressDetail();
+    }
+}
+
+function init(_ctx) {
+    ctx = _ctx;
+
+    $("btn-success-tx-done").addEventListener("click", navigateBack);
+    $("btn-error-tx-done").addEventListener("click", navigateBack);
+}
+
+module.exports = { init, showWait, showError };