feat: add About well to settings with build info and debug easter egg

Add a new well at the bottom of the settings view that displays:
- License (GPL-3.0)
- Author (sneak)
- Version (from package.json)
- Build date (injected at build time)
- Git commit short hash (linked to Gitea commit URL)

Build-time injection: build.js now reads the git commit hash and version
from package.json, injecting them via esbuild define constants. The
Dockerfile and Makefile pass commit hashes as build args so the info is
available even when .git is excluded from the Docker context.

Easter egg: clicking the version number 10 times reveals a hidden debug
well below the About well, containing a toggle for debug mode. The debug
mode flag is persisted in state and enables verbose console logging via
the runtime debug flag in the logger.

closes #144

.dockerignore

@@ -1,3 +1,4 @@
+.git
 node_modules
 .DS_Store
 dist

Dockerfile

@@ -1,7 +1,7 @@
 # node:22-slim (22.x LTS), 2026-02-24
 FROM node@sha256:5373f1906319b3a1f291da5d102f4ce5c77ccbe29eb637f072b6c7b70443fc36
 
-RUN apt-get update && apt-get install -y --no-install-recommends make git && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y --no-install-recommends make && rm -rf /var/lib/apt/lists/*
 RUN corepack enable && corepack prepare yarn@1.22.22 --activate
 
 WORKDIR /app
@@ -11,5 +11,10 @@ RUN yarn install --frozen-lockfile
 
 COPY . .
 
+ARG GIT_COMMIT_SHORT=unknown
+ARG GIT_COMMIT_FULL=unknown
+ENV GIT_COMMIT_SHORT=${GIT_COMMIT_SHORT}
+ENV GIT_COMMIT_FULL=${GIT_COMMIT_FULL}
+
 RUN make check
 RUN make build

Makefile

@@ -33,7 +33,10 @@ dev:
 	@yarn run build --watch 2>&1
 
 docker:
-	@docker build -t autistmask .
+	@docker build \
+		--build-arg GIT_COMMIT_SHORT=$$(git rev-parse --short HEAD 2>/dev/null || echo unknown) \
+		--build-arg GIT_COMMIT_FULL=$$(git rev-parse HEAD 2>/dev/null || echo unknown) \
+		-t autistmask .
 
 hooks:
 	@echo "Installing pre-commit hook..."

build.js

@@ -15,7 +15,8 @@ function getBuildInfo() {
     const pkg = JSON.parse(
         fs.readFileSync(path.join(__dirname, "package.json"), "utf8"),
     );
-    let commitHash = "unknown";
+    let commitHash = process.env.GIT_COMMIT_SHORT || "unknown";
+    if (commitHash === "unknown") {
         try {
             commitHash = execSync("git rev-parse --short HEAD", {
                 encoding: "utf8",
@@ -23,7 +24,9 @@ function getBuildInfo() {
         } catch (_) {
             // not a git repo or git not available
         }
-    let commitHashFull = "unknown";
+    }
+    let commitHashFull = process.env.GIT_COMMIT_FULL || "unknown";
+    if (commitHashFull === "unknown") {
         try {
             commitHashFull = execSync("git rev-parse HEAD", {
                 encoding: "utf8",
@@ -31,6 +34,7 @@ function getBuildInfo() {
         } catch (_) {
             // not a git repo or git not available
         }
+    }
     return {
         version: pkg.version,
         license: pkg.license,

src/popup/index.html

@@ -1005,16 +1005,6 @@
 
                 <div class="bg-well p-3 mx-1 mb-3">
                     <h3 class="font-bold mb-1">About</h3>
-                    <p class="text-xs mb-2">
-                        <a
-                            href="https://git.eeqj.de/sneak/AutistMask"
-                            class="underline decoration-dashed"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            >AutistMask</a
-                        >
-                        — Minimal Ethereum wallet browser extension.
-                    </p>
                     <div class="text-xs">
                         <div class="mb-1">
                             <span class="text-muted">License:</span>
@@ -1032,8 +1022,8 @@
                             ></span>
                         </div>
                         <div class="mb-1">
-                            <span class="text-muted">Release date:</span>
+                            <span class="text-muted">Build date:</span>
-                            <span id="about-release-date"></span>
+                            <span id="about-build-date"></span>
                         </div>
                         <div>
                             <span class="text-muted">Commit:</span>

src/popup/index.js

@@ -1,24 +1,11 @@
 // AutistMask popup entry point.
 // Loads state, initializes views, triggers first render.
 
-const {
+const { DEBUG } = require("../shared/constants");
-    state,
+const { state, saveState, loadState } = require("../shared/state");
-    saveState,
-    loadState,
-    currentNetwork,
-} = require("../shared/state");
-const { isDebug, setRuntimeDebug } = require("../shared/log");
 const { refreshPrices } = require("../shared/prices");
 const { refreshBalances } = require("../shared/balances");
-const {
+const { $, showView } = require("./views/helpers");
-    $,
-    showView,
-    updateDebugBanner,
-    setRenderMain,
-    pushCurrentView,
-    goBack,
-    clearViewStack,
-} = require("./views/helpers");
 const { applyTheme } = require("./theme");
 
 const home = require("./views/home");
@@ -66,42 +53,15 @@ async function doRefreshAndRender() {
 const ctx = {
     renderWalletList,
     doRefreshAndRender,
-    showAddWalletView: () => {
+    showAddWalletView: () => addWallet.show(),
-        pushCurrentView();
+    showAddressDetail: () => addressDetail.show(),
-        addWallet.show();
+    showAddressToken: () => addressToken.show(),
-    },
+    showAddTokenView: () => addToken.show(),
-    showAddressDetail: () => {
+    showConfirmTx: (txInfo) => confirmTx.show(txInfo),
-        pushCurrentView();
+    showReceive: () => receive.show(),
-        addressDetail.show();
+    showTransactionDetail: (tx) => transactionDetail.show(tx),
-    },
+    showSettingsView: () => settings.show(),
-    showAddressToken: () => {
+    showSettingsAddTokenView: () => settingsAddToken.show(),
-        pushCurrentView();
-        addressToken.show();
-    },
-    showAddTokenView: () => {
-        pushCurrentView();
-        addToken.show();
-    },
-    showConfirmTx: (txInfo) => {
-        pushCurrentView();
-        confirmTx.show(txInfo);
-    },
-    showReceive: () => {
-        pushCurrentView();
-        receive.show();
-    },
-    showTransactionDetail: (tx) => {
-        pushCurrentView();
-        transactionDetail.show(tx);
-    },
-    showSettingsView: () => {
-        pushCurrentView();
-        settings.show();
-    },
-    showSettingsAddTokenView: () => {
-        pushCurrentView();
-        settingsAddToken.show();
-    },
 };
 
 // Views that can be fully re-rendered from persisted state.
@@ -207,15 +167,18 @@ function fallbackView() {
 }
 
 async function init() {
+    if (DEBUG) {
+        const banner = document.createElement("div");
+        banner.id = "debug-banner";
+        banner.textContent = "DEBUG / INSECURE";
+        banner.style.cssText =
+            "background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;";
+        document.body.prepend(banner);
+    }
+
     await loadState();
     applyTheme(state.theme);
 
-    // Sync runtime debug flag from persisted state before first render
-    setRuntimeDebug(state.debugMode);
-
-    // Create the debug/testnet banner if needed (uses runtime debug state)
-    updateDebugBanner();
-
     // Auto-default active address
     if (
         state.activeAddress === null &&
@@ -245,15 +208,13 @@ async function init() {
                 .getElementById("view-settings")
                 .classList.contains("hidden")
         ) {
-            goBack();
+            renderWalletList();
+            showView("main");
             return;
         }
-        pushCurrentView();
         settings.show();
     });
 
-    setRenderMain(renderWalletList);
-
     welcome.init(ctx);
     addWallet.init(ctx);
     home.init(ctx);

src/popup/styles/main.css

@@ -10,7 +10,7 @@
     --color-border: #000000;
     --color-border-light: #cccccc;
     --color-hover: #eeeeee;
-    --color-well: #e8e8e8;
+    --color-well: #f5f5f5;
     --color-danger-well: #fef2f2;
     --color-section: #dddddd;
 }

src/popup/views/addToken.js

@@ -1,4 +1,4 @@
-const { $, showFlash, goBack } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const { getTopTokens } = require("../../shared/tokenList");
 const { state, saveState } = require("../../shared/state");
 const { lookupTokenInfo } = require("../../shared/balances");
@@ -59,12 +59,7 @@ function init(ctx) {
             });
             await saveState();
             ctx.doRefreshAndRender();
-            // Pop the stack (back to address detail) and re-render it
+            ctx.showAddressDetail();
-            // so the newly added token is visible immediately.
-            if (state.viewStack.length > 0) {
-                state.viewStack.pop();
-            }
-            require("./addressDetail").show();
         } catch (e) {
             const detail = e.shortMessage || e.message || String(e);
             log.errorf("Token lookup failed for", contractAddr, detail);
@@ -74,9 +69,7 @@ function init(ctx) {
         }
     });
 
-    $("btn-add-token-back").addEventListener("click", () => {
+    $("btn-add-token-back").addEventListener("click", ctx.showAddressDetail);
-        goBack();
-    });
 }
 
 module.exports = { init, show };

src/popup/views/addWallet.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash, goBack, clearViewStack } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const {
     generateMnemonic,
     hdWalletFromMnemonic,
@@ -143,7 +143,6 @@ async function importMnemonic(ctx) {
     state.wallets.push(wallet);
     state.hasWallet = true;
     await saveState();
-    clearViewStack();
     ctx.renderWalletList();
     showView("main");
 
@@ -199,7 +198,6 @@ async function importPrivateKey(ctx) {
     });
     state.hasWallet = true;
     await saveState();
-    clearViewStack();
     ctx.renderWalletList();
     showView("main");
 
@@ -251,7 +249,6 @@ async function importXprvKey(ctx) {
     state.wallets.push(wallet);
     state.hasWallet = true;
     await saveState();
-    clearViewStack();
     ctx.renderWalletList();
     showView("main");
 
@@ -300,7 +297,12 @@ function init(ctx) {
 
     // Back button
     $("btn-add-wallet-back").addEventListener("click", () => {
-        goBack();
+        if (!state.hasWallet) {
+            showView("welcome");
+        } else {
+            ctx.renderWalletList();
+            showView("main");
+        }
     });
 }
 

src/popup/views/addressDetail.js

@@ -8,12 +8,13 @@ const {
     addressTitle,
     escapeHtml,
     truncateMiddle,
-    renderAddressHtml,
-    attachCopyHandlers,
-    goBack,
-    pushCurrentView,
 } = require("./helpers");
-const { state, currentAddress, saveState } = require("../../shared/state");
+const {
+    state,
+    currentAddress,
+    saveState,
+    currentNetwork,
+} = require("../../shared/state");
 const { formatUsd, getAddressValueUsd } = require("../../shared/prices");
 const {
     fetchRecentTransactions,
@@ -32,6 +33,17 @@ const { getSignerForAddress } = require("../../shared/wallet");
 
 let ctx;
 
+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>`;
+
+function etherscanAddressLink(address) {
+    return `${currentNetwork().explorerUrl}/address/${address}`;
+}
+
 function show() {
     state.selectedToken = null;
     const wallet = state.wallets[state.selectedWallet];
@@ -49,18 +61,22 @@ function show() {
     img.style.imageRendering = "pixelated";
     img.style.borderRadius = "50%";
     blockieEl.appendChild(img);
-    const addrTitle = addressTitle(addr.address, state.wallets);
+    $("address-dot").innerHTML = addressDotHtml(addr.address);
-    $("address-line").innerHTML = renderAddressHtml(addr.address, {
+    $("address-full").dataset.full = addr.address;
-        title: addrTitle,
+    $("address-full").textContent = addr.address;
-        ensName: addr.ensName,
+    const addrLink = etherscanAddressLink(addr.address);
-    });
+    $("address-etherscan-link").innerHTML =
-    $("address-line").dataset.full = addr.address;
+        `<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
-    attachCopyHandlers($("address-line"));
     const usdTotal = formatUsd(getAddressValueUsd(addr));
     $("address-usd-total").innerHTML = usdTotal || "&nbsp;";
     const ensEl = $("address-ens");
-    // ENS is now shown inside renderAddressHtml, hide the separate element
+    if (addr.ensName) {
+        ensEl.innerHTML =
+            addressDotHtml(addr.address) + escapeHtml(addr.ensName);
+        ensEl.classList.remove("hidden");
+    } else {
         ensEl.classList.add("hidden");
+    }
     $("address-balances").innerHTML = balanceLinesForAddress(
         addr,
         state.trackedTokens,
@@ -247,9 +263,18 @@ function renderTransactions(txs) {
 
 function init(_ctx) {
     ctx = _ctx;
+    $("address-full").addEventListener("click", () => {
+        const addr = $("address-full").dataset.full;
+        if (addr) {
+            navigator.clipboard.writeText(addr);
+            showFlash("Copied!");
+            flashCopyFeedback($("address-full"));
+        }
+    });
 
     $("btn-address-back").addEventListener("click", () => {
-        goBack();
+        ctx.renderWalletList();
+        showView("main");
     });
 
     $("btn-send").addEventListener("click", () => {
@@ -267,7 +292,6 @@ function init(_ctx) {
         $("send-token-static").classList.add("hidden");
         updateSendBalance();
         resetSendValidation();
-        pushCurrentView();
         showView("send");
     });
 
@@ -297,7 +321,6 @@ function init(_ctx) {
     $("btn-export-privkey").addEventListener("click", () => {
         moreDropdown.classList.add("hidden");
         moreBtn.classList.remove("bg-fg", "text-bg");
-        pushCurrentView();
         const wallet = state.wallets[state.selectedWallet];
         const addr = wallet.addresses[state.selectedAddress];
         const blockieEl = $("export-privkey-jazzicon");
@@ -311,9 +334,9 @@ function init(_ctx) {
         blockieEl.appendChild(bImg);
         $("export-privkey-title").textContent =
             wallet.name + " \u2014 Address " + (state.selectedAddress + 1);
-        const exportAddrContainer = $("export-privkey-dot").parentElement;
+        $("export-privkey-dot").innerHTML = addressDotHtml(addr.address);
-        exportAddrContainer.innerHTML = renderAddressHtml(addr.address);
+        $("export-privkey-address").textContent = addr.address;
-        attachCopyHandlers(exportAddrContainer);
+        $("export-privkey-address").dataset.full = addr.address;
         $("export-privkey-password").value = "";
         $("export-privkey-flash").textContent = "";
         $("export-privkey-flash").style.visibility = "hidden";
@@ -367,10 +390,19 @@ function init(_ctx) {
         }
     });
 
+    $("export-privkey-address").addEventListener("click", () => {
+        const full = $("export-privkey-address").dataset.full;
+        if (full) {
+            navigator.clipboard.writeText(full);
+            showFlash("Copied!");
+            flashCopyFeedback($("export-privkey-address"));
+        }
+    });
+
     $("btn-export-privkey-back").addEventListener("click", () => {
         $("export-privkey-value").textContent = "";
         $("export-privkey-password").value = "";
-        goBack();
+        show();
     });
 }
 

src/popup/views/addressToken.js

@@ -11,12 +11,13 @@ const {
     escapeHtml,
     truncateMiddle,
     balanceLine,
-    renderAddressHtml,
-    attachCopyHandlers,
-    goBack,
-    pushCurrentView,
 } = require("./helpers");
-const { state, currentAddress, saveState } = require("../../shared/state");
+const {
+    state,
+    currentAddress,
+    saveState,
+    currentNetwork,
+} = require("../../shared/state");
 const { TOKEN_BY_ADDRESS, resolveSymbol } = require("../../shared/tokenList");
 const {
     formatUsd,
@@ -38,6 +39,21 @@ const makeBlockie = require("ethereum-blockies-base64");
 
 let ctx;
 
+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>`;
+
+function etherscanAddressLink(address) {
+    return `${currentNetwork().explorerUrl}/address/${address}`;
+}
+
+function etherscanTokenLink(tokenContract, holderAddress) {
+    return `${currentNetwork().explorerUrl}/token/${tokenContract}?a=${holderAddress}`;
+}
+
 function isoDate(timestamp) {
     const d = new Date(timestamp * 1000);
     const pad = (n) => String(n).padStart(2, "0");
@@ -141,13 +157,15 @@ function show() {
     blockieEl.appendChild(img);
 
     // Address line
-    const addrTitle = addressTitle(addr.address, state.wallets);
+    $("address-token-dot").innerHTML = addressDotHtml(addr.address);
-    $("address-token-line").innerHTML = renderAddressHtml(addr.address, {
+    $("address-token-full").dataset.full = addr.address;
-        title: addrTitle,
+    $("address-token-full").textContent = addr.address;
-        ensName: addr.ensName,
+    const addrLink =
-    });
+        tokenId !== "ETH"
-    $("address-token-line").dataset.full = addr.address;
+            ? etherscanTokenLink(tokenId, addr.address)
-    attachCopyHandlers($("address-token-line"));
+            : etherscanAddressLink(addr.address);
+    $("address-token-etherscan-link").innerHTML =
+        `<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
 
     // USD total for this token only
     const usdVal = price ? amount * price : null;
@@ -187,9 +205,15 @@ function show() {
                     ? knownToken.decimals
                     : null;
         const tokenHolders = tb && tb.holders != null ? tb.holders : null;
+        const dot = addressDotHtml(tokenId);
+        const tokenLink = `${currentNetwork().explorerUrl}/token/${escapeHtml(tokenId)}`;
         const projectUrl = knownToken && knownToken.url ? knownToken.url : null;
         let infoHtml = `<div class="font-bold mb-2">Contract Address</div>`;
-        infoHtml += `<div class="mb-2">${renderAddressHtml(tokenId)}</div>`;
+        infoHtml +=
+            `<div class="flex items-center mb-2">${dot}` +
+            `<span class="break-all underline decoration-dashed cursor-pointer" id="address-token-contract-copy" data-copy="${escapeHtml(tokenId)}">${escapeHtml(tokenId)}</span>` +
+            `<a href="${tokenLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>` +
+            `</div>`;
         if (tokenName)
             infoHtml += `<div class="mb-1"><span class="text-muted">Name:</span> ${tokenName}</div>`;
         if (tokenSymbol)
@@ -201,7 +225,6 @@ function show() {
         if (projectUrl)
             infoHtml += `<div class="mb-1"><span class="text-muted">Website:</span> <a href="${escapeHtml(projectUrl)}" target="_blank" rel="noopener" class="underline decoration-dashed">${escapeHtml(projectUrl)}</a></div>`;
         contractInfo.innerHTML = infoHtml;
-        attachCopyHandlers(contractInfo);
         contractInfo.classList.remove("hidden");
     } else {
         contractInfo.innerHTML = "";
@@ -323,6 +346,15 @@ function renderTransactions(txs) {
 
 function init(_ctx) {
     ctx = _ctx;
+    $("address-token-full").addEventListener("click", () => {
+        const addr = $("address-token-full").dataset.full;
+        if (addr) {
+            navigator.clipboard.writeText(addr);
+            showFlash("Copied!");
+            flashCopyFeedback($("address-token-full"));
+        }
+    });
+
     $("address-token-contract-info").addEventListener("click", (e) => {
         const copyEl = e.target.closest("[data-copy]");
         if (copyEl) {
@@ -333,7 +365,7 @@ function init(_ctx) {
     });
 
     $("btn-address-token-back").addEventListener("click", () => {
-        goBack();
+        ctx.showAddressDetail();
     });
 
     $("btn-address-token-send").addEventListener("click", () => {
@@ -360,14 +392,28 @@ function init(_ctx) {
         $("send-token").classList.add("hidden");
         let staticHtml = `<div class="font-bold">${escapeHtml(currentSymbol)}</div>`;
         if (tokenId !== "ETH") {
-            staticHtml += `<div class="text-xs">${renderAddressHtml(tokenId)}</div>`;
+            const dot = addressDotHtml(tokenId);
+            const link = `${currentNetwork().explorerUrl}/token/${tokenId}`;
+            const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+            staticHtml +=
+                `<div class="flex items-center text-xs">${dot}` +
+                `<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(tokenId)}">${escapeHtml(tokenId)}</span>` +
+                extLink +
+                `</div>`;
         }
         $("send-token-static").innerHTML = staticHtml;
         $("send-token-static").classList.remove("hidden");
-        attachCopyHandlers($("send-token-static"));
+        // Attach copy handler for the contract address
+        const copyEl = $("send-token-static").querySelector("[data-copy]");
+        if (copyEl) {
+            copyEl.addEventListener("click", () => {
+                navigator.clipboard.writeText(copyEl.dataset.copy);
+                showFlash("Copied!");
+                flashCopyFeedback(copyEl);
+            });
+        }
         updateSendBalance();
         resetSendValidation();
-        pushCurrentView();
         showView("send");
     });
 

src/popup/views/approval.js

@@ -1,12 +1,11 @@
 const {
     $,
+    addressDotHtml,
     addressTitle,
     escapeHtml,
     showView,
     showError,
     hideError,
-    renderAddressHtml,
-    attachCopyHandlers,
 } = require("./helpers");
 const { state, saveState, currentNetwork } = require("../../shared/state");
 const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers");
@@ -18,11 +17,28 @@ const uniswap = require("../../shared/uniswap");
 const runtime =
     typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
 
+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>`;
+
 const erc20Iface = new Interface(ERC20_ABI);
 
 function approvalAddressHtml(address) {
+    const dot = addressDotHtml(address);
+    const link = `${currentNetwork().explorerUrl}/address/${address}`;
+    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
     const title = addressTitle(address, state.wallets);
-    return renderAddressHtml(address, { title });
+    let html = "";
+    if (title) {
+        html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
+        html += `<div class="break-all">${escapeHtml(address)}${extLink}</div>`;
+    } else {
+        html += `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
+    }
+    return html;
 }
 
 function formatTxValue(val) {
@@ -37,6 +53,10 @@ function tokenLabel(address) {
     return t ? t.symbol : null;
 }
 
+function etherscanTokenLink(address) {
+    return `${currentNetwork().explorerUrl}/token/${address}`;
+}
+
 // Try to decode calldata using known ABIs.
 // Returns { name, description, details } or null.
 function decodeCalldata(data, toAddress) {
@@ -215,6 +235,10 @@ function showTxApproval(details) {
             toHtml += `<div class="font-bold mb-1">${escapeHtml(symbol)}</div>`;
         }
         toHtml += approvalAddressHtml(toAddr);
+        if (symbol) {
+            const link = etherscanTokenLink(toAddr);
+            toHtml = toHtml.replace("</div>", "") + ""; // approvalAddressHtml already has etherscan link
+        }
         $("approve-tx-to").innerHTML = toHtml;
     } else {
         $("approve-tx-to").innerHTML = escapeHtml("(contract creation)");
@@ -242,9 +266,12 @@ function showTxApproval(details) {
             detailsHtml += `<div class="text-muted">${escapeHtml(d.label)}</div>`;
             if (d.address) {
                 if (d.isToken) {
+                    const tLink = etherscanTokenLink(d.address);
                     detailsHtml += `<div class="font-bold">${escapeHtml(tokenLabel(d.address) || "Unknown token")}</div>`;
-                }
                     detailsHtml += approvalAddressHtml(d.address);
+                } else {
+                    detailsHtml += approvalAddressHtml(d.address);
+                }
             } else {
                 detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
             }
@@ -268,7 +295,6 @@ function showTxApproval(details) {
     hideError("approve-tx-error");
 
     showView("approve-tx");
-    attachCopyHandlers("view-approve-tx");
 }
 
 function decodeHexMessage(hex) {
@@ -366,7 +392,6 @@ function showSignApproval(details) {
     $("btn-approve-sign").classList.remove("text-muted");
 
     showView("approve-sign");
-    attachCopyHandlers("view-approve-sign");
 }
 
 function show(id) {
@@ -394,7 +419,6 @@ function show(id) {
         $("approve-address").innerHTML = approvalAddressHtml(
             state.activeAddress,
         );
-        attachCopyHandlers("view-approve-site");
         $("approve-remember").checked = state.rememberSiteChoice;
     });
 }

src/popup/views/confirmTx.js

@@ -17,10 +17,8 @@ const {
     showFlash,
     flashCopyFeedback,
     addressTitle,
+    addressDotHtml,
     escapeHtml,
-    renderAddressHtml,
-    attachCopyHandlers,
-    goBack,
 } = require("./helpers");
 const { state, currentNetwork } = require("../../shared/state");
 const { getSignerForAddress } = require("../../shared/wallet");
@@ -36,6 +34,13 @@ const { log } = require("../../shared/log");
 const makeBlockie = require("ethereum-blockies-base64");
 const txStatus = require("./txStatus");
 
+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 pendingTx = null;
 
 function restore() {
@@ -45,6 +50,14 @@ function restore() {
     }
 }
 
+function etherscanTokenLink(address) {
+    return `${currentNetwork().explorerUrl}/token/${address}`;
+}
+
+function etherscanAddressLink(address) {
+    return `${currentNetwork().explorerUrl}/address/${address}`;
+}
+
 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">`;
@@ -52,10 +65,22 @@ function blockieHtml(address) {
 
 function confirmAddressHtml(address, ensName, title) {
     const blockie = blockieHtml(address);
-    return (
+    const dot = addressDotHtml(address);
-        `<div class="mb-1">${blockie}</div>` +
+    const link = etherscanAddressLink(address);
-        renderAddressHtml(address, { title, ensName })
+    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 (title) {
+        html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
+    }
+    if (ensName) {
+        html += `<div class="flex items-center font-bold">${title ? "" : dot}${escapeHtml(ensName)}</div>`;
+    }
+    html +=
+        `<div class="flex items-center">${title || ensName ? "" : dot}` +
+        `<span class="break-all">${escapeHtml(address)}</span>` +
+        extLink +
+        `</div>`;
+    return html;
 }
 
 function valueWithUsd(text, usdAmount) {
@@ -82,12 +107,23 @@ function show(txInfo) {
     // Token contract section (ERC-20 only)
     const tokenSection = $("confirm-token-section");
     if (isErc20) {
-        $("confirm-token-contract").innerHTML = renderAddressHtml(
+        const dot = addressDotHtml(txInfo.token);
-            txInfo.token,
+        const link = etherscanTokenLink(txInfo.token);
-            {},
+        $("confirm-token-contract").innerHTML =
-        );
+            `<div class="flex items-center">${dot}` +
+            `<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(txInfo.token)}">${escapeHtml(txInfo.token)}</span>` +
+            `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>` +
+            `</div>`;
         tokenSection.classList.remove("hidden");
-        attachCopyHandlers(tokenSection);
+        // Attach click-to-copy on the contract address
+        const copyEl = tokenSection.querySelector("[data-copy]");
+        if (copyEl) {
+            copyEl.onclick = () => {
+                navigator.clipboard.writeText(copyEl.dataset.copy);
+                showFlash("Copied!");
+                flashCopyFeedback(copyEl);
+            };
+        }
     } else {
         tokenSection.classList.add("hidden");
     }
@@ -207,7 +243,6 @@ function show(txInfo) {
     $("confirm-fee-amount").textContent = "Estimating...";
     state.viewData = { pendingTx: txInfo };
     showView("confirm-tx");
-    attachCopyHandlers("view-confirm-tx");
 
     // Reset async warnings to hidden (space always reserved, no layout shift)
     $("confirm-recipient-warning").style.visibility = "hidden";
@@ -356,7 +391,7 @@ function init(ctx) {
     });
 
     $("btn-confirm-back").addEventListener("click", () => {
-        goBack();
+        showView("send");
     });
 }
 

src/popup/views/deleteWallet.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash, goBack, clearViewStack } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { decryptWithPassword } = require("../../shared/vault");
 
@@ -21,7 +21,7 @@ function init(_ctx) {
 
     $("btn-delete-wallet-back").addEventListener("click", () => {
         deleteWalletIndex = null;
-        goBack();
+        ctx.showSettingsView();
     });
 
     $("btn-delete-wallet-confirm").addEventListener("click", async () => {
@@ -77,7 +77,6 @@ function init(_ctx) {
             state.selectedWallet = null;
             state.selectedAddress = null;
             state.activeAddress = null;
-            clearViewStack();
             await saveState();
             showView("welcome");
         } else {
@@ -87,14 +86,8 @@ function init(_ctx) {
             state.activeAddress =
                 state.wallets[0].addresses[0]?.address || null;
             await saveState();
-            // Reset stack to [main] so Settings back goes home.
-            // Use require() lazily to avoid circular dependency
-            // (settings.js requires deleteWallet.js).
-            clearViewStack();
-            state.viewStack.push("main");
             ctx.renderWalletList();
-            const settings = require("./settings");
+            ctx.showSettingsView();
-            settings.show();
             showFlash("Wallet deleted.");
         }
     });

src/popup/views/helpers.js

@@ -1,13 +1,12 @@
 // Shared DOM helpers used by all views.
 
 const { DEBUG } = require("../../shared/constants");
-const { isDebug } = require("../../shared/log");
 const {
     formatUsd,
     getPrice,
     getAddressValueUsd,
 } = require("../../shared/prices");
-const { state, saveState, currentNetwork } = require("../../shared/state");
+const { state, saveState } = require("../../shared/state");
 
 // When views are added, removed, or transitions between them change,
 // update the view-navigation documentation in README.md to match.
@@ -60,75 +59,12 @@ function showView(name) {
     clearFlash();
     state.currentView = name;
     saveState();
-    updateDebugBanner(name);
+    if (DEBUG) {
-}
+        const banner = document.getElementById("debug-banner");
-
+        if (banner) {
-// Create or update the debug/insecure warning banner.
+            banner.textContent = "DEBUG / INSECURE (" + name + ")";
-// Called on every view switch and after the settings debug toggle changes.
-// The banner is shown when the compile-time DEBUG constant is true OR when
-// the user has enabled runtime debug mode via the settings easter egg, OR
-// when the active network is a testnet.
-function updateDebugBanner(viewName) {
-    const debug = isDebug();
-    const net = currentNetwork();
-    const show = debug || net.isTestnet;
-    let banner = document.getElementById("debug-banner");
-    if (show) {
-        if (!banner) {
-            banner = document.createElement("div");
-            banner.id = "debug-banner";
-            banner.style.cssText =
-                "background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;";
-            document.body.prepend(banner);
-        }
-        const suffix = viewName ? " (" + viewName + ")" : "";
-        if (debug && net.isTestnet) {
-            banner.textContent = "DEBUG / INSECURE [TESTNET]" + suffix;
-        } else if (net.isTestnet) {
-            banner.textContent = "[TESTNET]" + suffix;
-        } else {
-            banner.textContent = "DEBUG / INSECURE" + suffix;
-        }
-    } else if (banner) {
-        banner.remove();
         }
     }
-
-// Callback to re-render the main/home view when navigating back to it.
-// Set once by index.js via setRenderMain().
-let _renderMain = null;
-
-function setRenderMain(fn) {
-    _renderMain = fn;
-}
-
-// Push the current view onto the navigation stack so goBack() can
-// return to it.  Call this before any forward navigation.
-function pushCurrentView() {
-    if (state.currentView) {
-        state.viewStack.push(state.currentView);
-    }
-}
-
-// Pop the navigation stack and show the previous view.  If the stack
-// is empty, fall back to the main (home) view.
-function goBack() {
-    let target;
-    if (state.viewStack.length > 0) {
-        target = state.viewStack.pop();
-    } else {
-        target = "main";
-    }
-    if (target === "main" && _renderMain) {
-        _renderMain();
-    }
-    showView(target);
-}
-
-// Clear the entire navigation stack (used when resetting to root,
-// e.g. after adding or deleting a wallet).
-function clearViewStack() {
-    state.viewStack = [];
 }
 
 let flashTimer = null;
@@ -272,9 +208,21 @@ function addressTitle(address, wallets) {
 // Render an address with color dot, optional ENS name, optional title,
 // and optional truncation. Title and ENS are shown as bold labels above
 // the full address.
-// Delegates to renderAddressHtml for consistent output.
 function formatAddressHtml(address, ensName, maxLen, title) {
-    return renderAddressHtml(address, { title, ensName, maxLen });
+    const dot = addressDotHtml(address);
+    const displayAddr = maxLen ? truncateMiddle(address, maxLen) : address;
+    if (title || ensName) {
+        let html = "";
+        if (title) {
+            html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
+        }
+        if (ensName) {
+            html += `<div class="flex items-center font-bold">${title ? "" : dot}${escapeHtml(ensName)}</div>`;
+        }
+        html += `<div class="break-all">${escapeHtml(displayAddr)}</div>`;
+        return html;
+    }
+    return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(displayAddr)}</span></div>`;
 }
 
 function isoDate(timestamp) {
@@ -333,91 +281,6 @@ function timeAgo(timestamp) {
     return years + " year" + (years !== 1 ? "s" : "") + " ago";
 }
 
-// Shared external-link icon SVG used across all views.
-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>`;
-
-function etherscanAddressUrl(address) {
-    return `${currentNetwork().explorerUrl}/address/${address}`;
-}
-
-function etherscanLinkHtml(url) {
-    return (
-        `<a href="${url}" target="_blank" rel="noopener" ` +
-        `class="inline-flex items-center">${EXT_ICON}</a>`
-    );
-}
-
-// Render a copyable text span with dashed underline affordance.
-// The caller must attach click handlers via attachCopyHandlers() or
-// manually wire up [data-copy] elements after inserting the HTML.
-function copyableHtml(text, extraClass) {
-    const cls =
-        "underline decoration-dashed cursor-pointer" +
-        (extraClass ? " " + extraClass : "");
-    return `<span class="${cls}" data-copy="${escapeHtml(text)}">${escapeHtml(text)}</span>`;
-}
-
-// Attach click-to-copy handlers to all [data-copy] elements within
-// a container.  Safe to call multiple times on the same container.
-function attachCopyHandlers(container) {
-    const root =
-        typeof container === "string"
-            ? document.getElementById(container)
-            : container;
-    if (!root) return;
-    root.querySelectorAll("[data-copy]").forEach((el) => {
-        el.onclick = () => {
-            navigator.clipboard.writeText(el.dataset.copy);
-            showFlash("Copied!");
-            flashCopyFeedback(el);
-        };
-    });
-}
-
-// Unified address rendering.
-//
-// Produces consistent HTML for any Ethereum address:
-//   • Color dot
-//   • Optional title (e.g. "Wallet 1 — Address 2") shown bold above address
-//   • Optional ENS name shown bold above address
-//   • Full address (or truncated via maxLen) with dashed-underline click-to-copy
-//   • Etherscan external link icon
-//
-// Options object:
-//   title    — wallet title string (from addressTitle)
-//   ensName  — ENS name string
-//   maxLen   — if set, truncate address display (min 32 chars enforced)
-//   noLink   — if true, omit etherscan link
-//
-// After inserting the returned HTML into the DOM, call
-// attachCopyHandlers() on the parent to wire up click-to-copy.
-function renderAddressHtml(address, opts) {
-    const { title, ensName, maxLen, noLink } = opts || {};
-    const dot = addressDotHtml(address);
-    const displayAddr = maxLen ? truncateMiddle(address, maxLen) : address;
-    const link = etherscanAddressUrl(address);
-    const extLink = noLink ? "" : etherscanLinkHtml(link);
-
-    let html = "";
-    if (title) {
-        html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
-    }
-    if (ensName) {
-        html += `<div class="flex items-center font-bold">${title ? "" : dot}${escapeHtml(ensName)}</div>`;
-    }
-    if (title || ensName) {
-        html += `<div class="flex items-center">${copyableHtml(displayAddr, "break-all")}${extLink}</div>`;
-    } else {
-        html += `<div class="flex items-center">${dot}${copyableHtml(displayAddr, "break-all")}${extLink}</div>`;
-    }
-    return html;
-}
-
 function flashCopyFeedback(el) {
     if (!el) return;
     el.classList.remove("copy-flash-fade");
@@ -436,11 +299,6 @@ module.exports = {
     showError,
     hideError,
     showView,
-    updateDebugBanner,
-    setRenderMain,
-    pushCurrentView,
-    goBack,
-    clearViewStack,
     showFlash,
     flashCopyFeedback,
     balanceLine,
@@ -450,12 +308,6 @@ module.exports = {
     escapeHtml,
     addressTitle,
     formatAddressHtml,
-    renderAddressHtml,
-    copyableHtml,
-    attachCopyHandlers,
-    etherscanAddressUrl,
-    etherscanLinkHtml,
-    EXT_ICON,
     truncateMiddle,
     isoDate,
     timeAgo,

src/popup/views/home.js

@@ -10,11 +10,13 @@ const {
     addressTitle,
     escapeHtml,
     truncateMiddle,
-    renderAddressHtml,
-    attachCopyHandlers,
-    pushCurrentView,
 } = require("./helpers");
-const { state, saveState, currentAddress } = require("../../shared/state");
+const {
+    state,
+    saveState,
+    currentAddress,
+    currentNetwork,
+} = require("../../shared/state");
 const {
     updateSendBalance,
     renderSendTokenSelect,
@@ -72,12 +74,28 @@ function renderTotalValue() {
     }
 }
 
+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>`;
+
 function renderActiveAddress() {
     const el = $("active-address-display");
     if (!el) return;
     if (state.activeAddress) {
-        el.innerHTML = renderAddressHtml(state.activeAddress);
+        const addr = state.activeAddress;
-        attachCopyHandlers(el);
+        const dot = addressDotHtml(addr);
+        const link = `${currentNetwork().explorerUrl}/address/${addr}`;
+        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) => {
+            navigator.clipboard.writeText(addr);
+            showFlash("Copied!");
+            flashCopyFeedback(e.currentTarget);
+        });
     } else {
         el.textContent = "";
     }
@@ -382,7 +400,6 @@ function init(ctx) {
         renderSendTokenSelect(addr);
         updateSendBalance();
         resetSendValidation();
-        pushCurrentView();
         showView("send");
     });
 

src/popup/views/receive.js

@@ -5,12 +5,17 @@ const {
     flashCopyFeedback,
     formatAddressHtml,
     addressTitle,
-    attachCopyHandlers,
-    goBack,
 } = require("./helpers");
 const { state, currentAddress, currentNetwork } = require("../../shared/state");
 const QRCode = require("qrcode");
 
+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>`;
+
 function show() {
     const addr = currentAddress();
     const address = addr ? addr.address : "";
@@ -20,8 +25,11 @@ function show() {
         ? formatAddressHtml(address, ensName, null, title)
         : "";
     $("receive-address-block").dataset.full = address;
-    // Etherscan link is now included in formatAddressHtml via renderAddressHtml
+    const net = currentNetwork();
-    $("receive-etherscan-link").innerHTML = "";
+    const link = address ? `${net.explorerUrl}/address/${address}` : "";
+    $("receive-etherscan-link").innerHTML = link
+        ? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
+        : "";
     if (address) {
         QRCode.toCanvas($("receive-qr"), address, {
             width: 200,
@@ -54,10 +62,18 @@ function show() {
         warningEl.style.visibility = "hidden";
     }
     showView("receive");
-    attachCopyHandlers("view-receive");
 }
 
 function init(ctx) {
+    $("receive-address-block").addEventListener("click", (e) => {
+        const addr = $("receive-address-block").dataset.full;
+        if (addr) {
+            navigator.clipboard.writeText(addr);
+            showFlash("Copied!");
+            flashCopyFeedback(e.currentTarget);
+        }
+    });
+
     $("btn-receive-copy").addEventListener("click", () => {
         const addr = $("receive-address-block").dataset.full;
         if (addr) {
@@ -68,7 +84,11 @@ function init(ctx) {
     });
 
     $("btn-receive-back").addEventListener("click", () => {
-        goBack();
+        if (state.selectedToken) {
+            ctx.showAddressToken();
+        } else {
+            ctx.showAddressDetail();
+        }
     });
 }
 

src/popup/views/send.js

@@ -3,13 +3,11 @@
 const {
     $,
     showFlash,
+    addressDotHtml,
     addressTitle,
     escapeHtml,
-    renderAddressHtml,
-    attachCopyHandlers,
-    goBack,
 } = require("./helpers");
-const { state, currentAddress } = require("../../shared/state");
+const { state, currentAddress, currentNetwork } = require("../../shared/state");
 let ctx;
 const { getProvider } = require("../../shared/balances");
 const { KNOWN_SYMBOLS, resolveSymbol } = require("../../shared/tokenList");
@@ -115,6 +113,13 @@ function updateToValidation() {
     }
 }
 
+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>`;
+
 function isSpoofedToken(t) {
     const upper = (t.symbol || "").toUpperCase();
     if (!KNOWN_SYMBOLS.has(upper)) return false;
@@ -143,12 +148,24 @@ function renderSendTokenSelect(addr) {
 function updateSendBalance() {
     const addr = currentAddress();
     if (!addr) return;
+    const dot = addressDotHtml(addr.address);
+    const link = `${currentNetwork().explorerUrl}/address/${addr.address}`;
+    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
     const title = addressTitle(addr.address, state.wallets);
-    $("send-from").innerHTML = renderAddressHtml(addr.address, {
+    let fromHtml = "";
-        title,
+    if (title) {
-        ensName: addr.ensName,
+        fromHtml += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
-    });
+        if (addr.ensName) {
-    attachCopyHandlers($("send-from"));
+            fromHtml += `<div>${escapeHtml(addr.ensName)}</div>`;
+        }
+        fromHtml += `<div class="break-all">${escapeHtml(addr.address)}${extLink}</div>`;
+    } else if (addr.ensName) {
+        fromHtml += `<div class="flex items-center font-bold">${dot}${escapeHtml(addr.ensName)}</div>`;
+        fromHtml += `<div class="break-all">${escapeHtml(addr.address)}${extLink}</div>`;
+    } else {
+        fromHtml += `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(addr.address)}</span>${extLink}</div>`;
+    }
+    $("send-from").innerHTML = fromHtml;
     const token = state.selectedToken || $("send-token").value;
     if (token === "ETH") {
         $("send-balance").textContent =
@@ -251,7 +268,11 @@ function init(_ctx) {
     $("btn-send-back").addEventListener("click", () => {
         $("send-token").classList.remove("hidden");
         $("send-token-static").classList.add("hidden");
-        goBack();
+        if (state.selectedToken) {
+            ctx.showAddressToken();
+        } else {
+            ctx.showAddressDetail();
+        }
     });
 }
 

src/popup/views/settings.js

@@ -1,13 +1,4 @@
-const {
+const { $, showView, showFlash, escapeHtml } = require("./helpers");
-    $,
-    showView,
-    updateDebugBanner,
-    showFlash,
-    escapeHtml,
-    flashCopyFeedback,
-    goBack,
-    pushCurrentView,
-} = require("./helpers");
 const { applyTheme } = require("../theme");
 const { state, saveState, currentNetwork } = require("../../shared/state");
 const { NETWORKS, SUPPORTED_CHAIN_IDS } = require("../../shared/networks");
@@ -106,7 +97,6 @@ function renderWalletListSettings() {
     container.querySelectorAll(".btn-delete-wallet").forEach((btn) => {
         btn.addEventListener("click", () => {
             const idx = parseInt(btn.dataset.idx, 10);
-            pushCurrentView();
             deleteWallet.show(idx);
         });
     });
@@ -161,7 +151,7 @@ function show() {
     const authorName = BUILD_AUTHOR.replace(/\s*<[^>]+>/, "");
     $("about-author").textContent = authorName;
     $("about-version").textContent = BUILD_VERSION;
-    $("about-release-date").textContent = BUILD_DATE;
+    $("about-build-date").textContent = BUILD_DATE;
     $("about-commit-link").textContent = BUILD_COMMIT;
     $("about-commit-link").href = GITEA_COMMIT_URL;
 
@@ -324,18 +314,7 @@ function init(ctx) {
         ctx.showSettingsAddTokenView,
     );
 
-    // Bright saturated colors for easter egg flashes (clicks 6–10)
+    // Easter egg: click version 10 times to reveal the debug well
-    const easterEggColors = [
-        "#ff0055", // hot pink
-        "#00cc44", // vivid green
-        "#3366ff", // electric blue
-        "#ff9900", // bright orange
-        "#aa00ff", // vivid purple
-    ];
-
-    // Easter egg: click version 10 times to reveal the debug well.
-    // Each click does a copy-flash animation. After 5 clicks, each
-    // additional click flashes a different bright saturated color.
     $("about-version").addEventListener("click", () => {
         versionClickCount++;
         clearTimeout(versionClickTimer);
@@ -343,29 +322,6 @@ function init(ctx) {
         versionClickTimer = setTimeout(() => {
             versionClickCount = 0;
         }, 3000);
-
-        const el = $("about-version");
-
-        if (versionClickCount > 5) {
-            // Colored flash for clicks 6–10
-            const colorIdx = versionClickCount - 6;
-            const color = easterEggColors[colorIdx % easterEggColors.length];
-            el.classList.remove("copy-flash-fade");
-            el.style.backgroundColor = color;
-            el.style.color = "#ffffff";
-            setTimeout(() => {
-                el.style.backgroundColor = "";
-                el.style.color = "";
-                el.classList.add("copy-flash-fade");
-                setTimeout(() => {
-                    el.classList.remove("copy-flash-fade");
-                }, 275);
-            }, 75);
-        } else {
-            // Standard copy-flash for clicks 1–5
-            flashCopyFeedback(el);
-        }
-
         if (versionClickCount >= 10) {
             versionClickCount = 0;
             clearTimeout(versionClickTimer);
@@ -373,19 +329,19 @@ function init(ctx) {
         }
     });
 
-    // Debug mode toggle — update runtime flag, persist, and re-render banner
+    // Debug mode toggle
     $("settings-debug-mode").addEventListener("change", async () => {
         state.debugMode = $("settings-debug-mode").checked;
         setRuntimeDebug(state.debugMode);
         await saveState();
-        updateDebugBanner(state.currentView);
     });
 
     // Sync runtime debug flag on init
     setRuntimeDebug(state.debugMode);
 
     $("btn-settings-back").addEventListener("click", () => {
-        goBack();
+        ctx.renderWalletList();
+        showView("main");
     });
 }
 

src/popup/views/settingsAddToken.js

@@ -1,4 +1,4 @@
-const { $, showView, showFlash, goBack } = require("./helpers");
+const { $, showView, showFlash } = require("./helpers");
 const { getTopTokens } = require("../../shared/tokenList");
 const { state, saveState } = require("../../shared/state");
 const { lookupTokenInfo } = require("../../shared/balances");
@@ -84,7 +84,7 @@ function init(_ctx) {
     ctx = _ctx;
 
     $("btn-settings-addtoken-back").addEventListener("click", () => {
-        goBack();
+        ctx.showSettingsView();
     });
 
     $("btn-settings-addtoken-select").addEventListener("click", async () => {

src/popup/views/transactionDetail.js

@@ -6,15 +6,11 @@ const {
     showView,
     showFlash,
     flashCopyFeedback,
+    addressDotHtml,
     addressTitle,
     escapeHtml,
     isoDate,
     timeAgo,
-    renderAddressHtml,
-    attachCopyHandlers,
-    copyableHtml,
-    etherscanLinkHtml,
-    goBack,
 } = require("./helpers");
 const { state, currentNetwork } = require("../../shared/state");
 const { formatEther, formatUnits } = require("ethers");
@@ -22,6 +18,13 @@ const makeBlockie = require("ethereum-blockies-base64");
 const { log, debugFetch } = require("../../shared/log");
 const { decodeCalldata } = require("./approval");
 
+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;
 
 /**
@@ -43,17 +46,52 @@ function getTransactionType(tx) {
     return "Native ETH Transfer";
 }
 
+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 etherscanLinkHtml(url) {
+    return (
+        `<a href="${url}" target="_blank" rel="noopener" ` +
+        `class="inline-flex items-center"` +
+        `>${EXT_ICON}</a>`
+    );
+}
+
 function txAddressHtml(address, ensName, title) {
     const blockie = blockieHtml(address);
-    return (
+    const dot = addressDotHtml(address);
-        `<div class="mb-1">${blockie}</div>` +
+    const link = `${currentNetwork().explorerUrl}/address/${address}`;
-        renderAddressHtml(address, { title, ensName })
+    const extLink = etherscanLinkHtml(link);
-    );
+    let html = `<div class="mb-1">${blockie}</div>`;
+    if (title) {
+        html += `<div class="font-bold">${escapeHtml(title)}</div>`;
+    }
+    if (ensName) {
+        html +=
+            `<div class="flex items-center">${dot}` +
+            copyableHtml(ensName, "") +
+            `</div>` +
+            `<div class="flex items-center">${dot}` +
+            copyableHtml(address, "break-all") +
+            extLink +
+            `</div>`;
+    } else {
+        html +=
+            `<div class="flex items-center">${dot}` +
+            copyableHtml(address, "break-all") +
+            extLink +
+            `</div>`;
+    }
+    return html;
 }
 
 function txHashHtml(hash) {
@@ -172,7 +210,17 @@ function render() {
         copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
     $("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
     showView("transaction");
-    attachCopyHandlers("view-transaction");
+
+    document
+        .getElementById("view-transaction")
+        .querySelectorAll("[data-copy]")
+        .forEach((el) => {
+            el.onclick = () => {
+                navigator.clipboard.writeText(el.dataset.copy);
+                showFlash("Copied!");
+                flashCopyFeedback(el);
+            };
+        });
 }
 
 function showDetailField(sectionId, contentId, value) {
@@ -307,14 +355,19 @@ async function loadFullTxDetails(txHash, toAddress, isContractCall) {
                 detailsHtml += `<div class="mb-2">`;
                 detailsHtml += `<div class="text-muted">${escapeHtml(d.label)}</div>`;
                 if (d.address && d.isToken) {
-                    // Token entry: show symbol on its own line, then address via shared renderer
+                    // Token entry: show symbol on its own line, then dot + address + Etherscan link
+                    const dot = addressDotHtml(d.address);
                     const tokenSymbol = d.value.match(/^(\S+)\s*\(/)?.[1];
                     if (tokenSymbol) {
                         detailsHtml += `<div class="font-bold">${escapeHtml(tokenSymbol)}</div>`;
                     }
-                    detailsHtml += renderAddressHtml(d.address);
+                    const etherscanUrl = `${currentNetwork().explorerUrl}/token/${d.address}`;
+                    detailsHtml += `<div class="flex items-center">${dot}${copyableHtml(d.address, "break-all")}${etherscanLinkHtml(etherscanUrl)}</div>`;
                 } else if (d.address) {
-                    detailsHtml += renderAddressHtml(d.address);
+                    // Protocol/contract entry: show name + Etherscan link
+                    const dot = addressDotHtml(d.address);
+                    const etherscanUrl = `${currentNetwork().explorerUrl}/address/${d.address}`;
+                    detailsHtml += `<div class="flex items-center">${dot}${copyableHtml(d.value, "break-all")}${etherscanLinkHtml(etherscanUrl)}</div>`;
                 } else {
                     detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
                 }
@@ -341,7 +394,13 @@ async function loadFullTxDetails(txHash, toAddress, isContractCall) {
         // Bind copy handlers for new elements (including raw data now outside section)
         const copyTargets = [section, rawSection].filter(Boolean);
         for (const container of copyTargets) {
-            attachCopyHandlers(container);
+            container.querySelectorAll("[data-copy]").forEach((el) => {
+                el.onclick = () => {
+                    navigator.clipboard.writeText(el.dataset.copy);
+                    showFlash("Copied!");
+                    flashCopyFeedback(el);
+                };
+            });
         }
     } catch (e) {
         log.errorf("loadCalldata failed:", e.message);
@@ -351,7 +410,11 @@ async function loadFullTxDetails(txHash, toAddress, isContractCall) {
 function init(_ctx) {
     ctx = _ctx;
     $("btn-tx-back").addEventListener("click", () => {
-        goBack();
+        if (state.selectedToken) {
+            ctx.showAddressToken();
+        } else {
+            ctx.showAddressDetail();
+        }
     });
 }
 

src/popup/views/txStatus.js

@@ -3,19 +3,24 @@
 const {
     $,
     showView,
+    showFlash,
+    flashCopyFeedback,
+    addressDotHtml,
     addressTitle,
     escapeHtml,
-    renderAddressHtml,
-    attachCopyHandlers,
-    copyableHtml,
-    etherscanLinkHtml,
-    clearViewStack,
 } = require("./helpers");
 const { TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
 const { state, saveState, currentNetwork } = 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;
@@ -32,19 +37,50 @@ function clearTimers() {
 }
 
 function toAddressHtml(address) {
+    const dot = addressDotHtml(address);
+    const link = `${currentNetwork().explorerUrl}/address/${address}`;
+    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
     const title = addressTitle(address, state.wallets);
-    return renderAddressHtml(address, { title });
+    if (title) {
+        return (
+            `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</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 underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</span>${extLink}</div>`;
 }
 
 function txHashHtml(hash) {
     const link = `${currentNetwork().explorerUrl}/tx/${hash}`;
-    return copyableHtml(hash, "break-all") + etherscanLinkHtml(link);
+    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 blockNumberHtml(blockNumber) {
     const num = String(blockNumber);
     const link = `${currentNetwork().explorerUrl}/block/${num}`;
-    return copyableHtml(num) + etherscanLinkHtml(link);
+    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)
+        .querySelectorAll("[data-copy]")
+        .forEach((el) => {
+            el.onclick = () => {
+                navigator.clipboard.writeText(el.dataset.copy);
+                showFlash("Copied!");
+                flashCopyFeedback(el);
+            };
+        });
 }
 
 function showWait(txInfo, txHash) {
@@ -222,16 +258,10 @@ function navigateBack() {
         window.close();
         return;
     }
-    // After a completed transaction, reset the navigation stack
-    // and go directly to the address view (token or detail).
-    // Use require() lazily to call show() without the ctx push wrapper.
-    clearViewStack();
-    state.viewStack.push("main");
     if (state.selectedToken) {
-        state.viewStack.push("address");
+        ctx.showAddressToken();
-        require("./addressToken").show();
     } else {
-        require("./addressDetail").show();
+        ctx.showAddressDetail();
     }
 }
 

src/shared/state.js

@@ -39,7 +39,6 @@ const state = {
     selectedAddress: null,
     selectedToken: null,
     viewData: {},
-    viewStack: [],
 };
 
 // Return the network configuration for the currently selected network.
@@ -75,7 +74,6 @@ async function saveState() {
         selectedAddress: state.selectedAddress,
         selectedToken: state.selectedToken,
         viewData: state.viewData,
-        viewStack: state.viewStack,
     };
     await storageApi.set({ autistmask: persisted });
 }
@@ -139,7 +137,6 @@ async function loadState() {
             saved.selectedAddress !== undefined ? saved.selectedAddress : null;
         state.selectedToken = saved.selectedToken || null;
         state.viewData = saved.viewData || {};
-        state.viewStack = Array.isArray(saved.viewStack) ? saved.viewStack : [];
     }
 }