Centralize view state into app ctx with viewData persistence

Creates a centralized transactionDetail.js view module, replacing
the duplicated showTxDetail/copyableHtml/blockieHtml/txDetailAddressHtml
code that was in both addressDetail.js and addressToken.js (~120 lines
removed). Transaction data is stored in state.viewData and persisted,
so the transaction detail view survives popup close/reopen.

Adds viewData to persisted state. Each view that needs data for
restore stores it in state.viewData before rendering. The ctx object
now has showTransactionDetail() alongside all other show methods.

Restorable views expanded to include: transaction (via viewData.tx),
success-tx (via viewData.hash/blockNumber), error-tx (via
viewData.message). txStatus.js split into show (sets data) + render
(reads data) for each screen, enabling restore.

Non-restorable views (send, confirm-tx, wait-tx, add-wallet,
import-key, add-token) fall back to the nearest parent since they
involve active form state or network polling.

src/popup/views/transactionDetail.js

@@ -0,0 +1,152 @@
+// Transaction detail view — shows full details for a single transaction.
+// Shared by addressDetail and addressToken via ctx.showTransactionDetail().
+
+const {
+    $,
+    showView,
+    showFlash,
+    addressDotHtml,
+    escapeHtml,
+} = require("./helpers");
+const { state } = require("../../shared/state");
+const makeBlockie = require("ethereum-blockies-base64");
+
+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;
+
+function isoDate(timestamp) {
+    const d = new Date(timestamp * 1000);
+    const pad = (n) => String(n).padStart(2, "0");
+    return (
+        d.getFullYear() +
+        "-" +
+        pad(d.getMonth() + 1) +
+        "-" +
+        pad(d.getDate()) +
+        " " +
+        pad(d.getHours()) +
+        ":" +
+        pad(d.getMinutes()) +
+        ":" +
+        pad(d.getSeconds())
+    );
+}
+
+function timeAgo(timestamp) {
+    const seconds = Math.floor(Date.now() / 1000 - timestamp);
+    if (seconds < 60) return seconds + " seconds ago";
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return minutes + " minute" + (minutes !== 1 ? "s" : "") + " ago";
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return hours + " hour" + (hours !== 1 ? "s" : "") + " ago";
+    const days = Math.floor(hours / 24);
+    if (days < 30) return days + " day" + (days !== 1 ? "s" : "") + " ago";
+    const months = Math.floor(days / 30);
+    if (months < 12)
+        return months + " month" + (months !== 1 ? "s" : "") + " ago";
+    const years = Math.floor(days / 365);
+    return years + " year" + (years !== 1 ? "s" : "") + " ago";
+}
+
+function copyableHtml(text, extraClass) {
+    const cls =
+        "underline decoration-dashed cursor-pointer" +
+        (extraClass ? " " + extraClass : "");
+    return `<span class="${cls}" data-copy="${escapeHtml(text)}">${escapeHtml(text)}</span>`;
+}
+
+function blockieHtml(address) {
+    const src = makeBlockie(address);
+    return `<img src="${src}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
+}
+
+function txAddressHtml(address, ensName) {
+    const blockie = blockieHtml(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>`;
+    let html = `<div class="mb-1">${blockie}</div>`;
+    if (ensName) {
+        html +=
+            `<div class="flex items-center">${dot}` +
+            copyableHtml(ensName, "") +
+            extLink +
+            `</div>` +
+            `<div class="break-all">` +
+            copyableHtml(address, "break-all") +
+            `</div>`;
+    } else {
+        html +=
+            `<div class="flex items-center">${dot}` +
+            copyableHtml(address, "break-all") +
+            extLink +
+            `</div>`;
+    }
+    return html;
+}
+
+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 copyableHtml(hash, "break-all") + extLink;
+}
+
+function show(tx) {
+    state.viewData = {
+        tx: {
+            hash: tx.hash,
+            from: tx.from,
+            to: tx.to,
+            value: tx.value,
+            symbol: tx.symbol,
+            timestamp: tx.timestamp,
+            isError: tx.isError,
+            fromEns: tx.fromEns || null,
+            toEns: tx.toEns || null,
+        },
+    };
+    render();
+}
+
+function render() {
+    const tx = state.viewData.tx;
+    if (!tx) return;
+    $("tx-detail-hash").innerHTML = txHashHtml(tx.hash);
+    $("tx-detail-from").innerHTML = txAddressHtml(tx.from, tx.fromEns);
+    $("tx-detail-to").innerHTML = txAddressHtml(tx.to, tx.toEns);
+    $("tx-detail-value").textContent = tx.value + " " + tx.symbol;
+    $("tx-detail-time").textContent =
+        isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
+    $("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
+    showView("transaction");
+
+    document
+        .getElementById("view-transaction")
+        .querySelectorAll("[data-copy]")
+        .forEach((el) => {
+            el.onclick = () => {
+                navigator.clipboard.writeText(el.dataset.copy);
+                showFlash("Copied!");
+            };
+        });
+}
+
+function init(_ctx) {
+    ctx = _ctx;
+    $("btn-tx-back").addEventListener("click", () => {
+        if (state.selectedToken) {
+            ctx.showAddressToken();
+        } else {
+            ctx.showAddressDetail();
+        }
+    });
+}
+
+module.exports = { init, show, render };