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
2026-03-01 11:42:19 -08:00
23 changed files with 678 additions and 370 deletions
--- a/5
+++ b/5
@@ -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
--- a/5
+++ b/5
@@ -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..."
--- a/build.js
+++ b/build.js
@@ -11,9 +11,55 @@ function ensureDir(dir) {
    fs.mkdirSync(dir, { recursive: true });
 }

+function getBuildInfo() {
+    const pkg = JSON.parse(
+        fs.readFileSync(path.join(__dirname, "package.json"), "utf8"),
+    );
+    let commitHash = process.env.GIT_COMMIT_SHORT || "unknown";
+    if (commitHash === "unknown") {
+        try {
+            commitHash = execSync("git rev-parse --short HEAD", {
+                encoding: "utf8",
+            }).trim();
+        } catch (_) {
+            // not a git repo or git not available
+        }
+    }
+    let commitHashFull = process.env.GIT_COMMIT_FULL || "unknown";
+    if (commitHashFull === "unknown") {
+        try {
+            commitHashFull = execSync("git rev-parse HEAD", {
+                encoding: "utf8",
+            }).trim();
+        } catch (_) {
+            // not a git repo or git not available
+        }
+    }
+    return {
+        version: pkg.version,
+        license: pkg.license,
+        author: pkg.author,
+        commitHash,
+        commitHashFull,
+        buildDate: new Date().toISOString().slice(0, 10),
+    };
+}
+
 async function build() {
    console.log("Building AutistMask extension...");

+    const buildInfo = getBuildInfo();
+    console.log("Build info:", buildInfo);
+
+    const define = {
+        __BUILD_VERSION__: JSON.stringify(buildInfo.version),
+        __BUILD_LICENSE__: JSON.stringify(buildInfo.license),
+        __BUILD_AUTHOR__: JSON.stringify(buildInfo.author),
+        __BUILD_COMMIT__: JSON.stringify(buildInfo.commitHash),
+        __BUILD_COMMIT_FULL__: JSON.stringify(buildInfo.commitHashFull),
+        __BUILD_DATE__: JSON.stringify(buildInfo.buildDate),
+    };
+
    // compile tailwind CSS
    console.log("Compiling Tailwind CSS...");
    const tailwindInput = path.join(SRC, "popup", "styles", "main.css");
@@ -38,6 +84,7 @@ async function build() {
            platform: "browser",
            target: ["chrome110", "firefox110"],
            minify: true,
+            define,
        });

        // bundle background script
@@ -49,6 +96,7 @@ async function build() {
            platform: "browser",
            target: ["chrome110", "firefox110"],
            minify: true,
+            define,
        });

        // bundle content script
@@ -60,6 +108,7 @@ async function build() {
            platform: "browser",
            target: ["chrome110", "firefox110"],
            minify: true,
+            define,
        });

        // bundle inpage script (injected into page context, separate file)
@@ -71,6 +120,7 @@ async function build() {
            platform: "browser",
            target: ["chrome110", "firefox110"],
            minify: true,
+            define,
        });

        // copy popup HTML
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -1002,6 +1002,54 @@
                    </p>
                    <div id="settings-denied-sites"></div>
                </div>
+
+                <div class="bg-well p-3 mx-1 mb-3">
+                    <h3 class="font-bold mb-1">About</h3>
+                    <div class="text-xs">
+                        <div class="mb-1">
+                            <span class="text-muted">License:</span>
+                            <span id="about-license"></span>
+                        </div>
+                        <div class="mb-1">
+                            <span class="text-muted">Author:</span>
+                            <span id="about-author"></span>
+                        </div>
+                        <div class="mb-1">
+                            <span class="text-muted">Version:</span>
+                            <span
+                                id="about-version"
+                                class="cursor-pointer select-none"
+                            ></span>
+                        </div>
+                        <div class="mb-1">
+                            <span class="text-muted">Build date:</span>
+                            <span id="about-build-date"></span>
+                        </div>
+                        <div>
+                            <span class="text-muted">Commit:</span>
+                            <a
+                                id="about-commit-link"
+                                class="underline decoration-dashed"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            ></a>
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    id="settings-debug-well"
+                    class="bg-well p-3 mx-1 mb-3"
+                    style="display: none"
+                >
+                    <h3 class="font-bold mb-1">Debug</h3>
+                    <label
+                        class="text-xs flex items-center gap-1 cursor-pointer"
+                    >
+                        <input type="checkbox" id="settings-debug-mode" />
+                        Enable debug mode
+                    </label>
+                </div>
            </div>

            <!-- ============ DELETE WALLET CONFIRM ============ -->
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -2,22 +2,10 @@
 // Loads state, initializes views, triggers first render.

 const { DEBUG } = require("../shared/constants");
-const {
-    state,
-    saveState,
-    loadState,
-    currentNetwork,
-} = require("../shared/state");
+const { state, saveState, loadState } = require("../shared/state");
 const { refreshPrices } = require("../shared/prices");
 const { refreshBalances } = require("../shared/balances");
-const {
-    $,
-    showView,
-    setRenderMain,
-    pushCurrentView,
-    goBack,
-    clearViewStack,
-} = require("./views/helpers");
+const { $, showView } = require("./views/helpers");
 const { applyTheme } = require("./theme");

 const home = require("./views/home");
@@ -65,42 +53,15 @@ async function doRefreshAndRender() {
 const ctx = {
    renderWalletList,
    doRefreshAndRender,
-    showAddWalletView: () => {
-        pushCurrentView();
-        addWallet.show();
-    },
-    showAddressDetail: () => {
-        pushCurrentView();
-        addressDetail.show();
-    },
-    showAddressToken: () => {
-        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();
-    },
+    showAddWalletView: () => addWallet.show(),
+    showAddressDetail: () => addressDetail.show(),
+    showAddressToken: () => addressToken.show(),
+    showAddTokenView: () => addToken.show(),
+    showConfirmTx: (txInfo) => confirmTx.show(txInfo),
+    showReceive: () => receive.show(),
+    showTransactionDetail: (tx) => transactionDetail.show(tx),
+    showSettingsView: () => settings.show(),
+    showSettingsAddTokenView: () => settingsAddToken.show(),
 };

 // Views that can be fully re-rendered from persisted state.
@@ -206,25 +167,18 @@ function fallbackView() {
 }

 async function init() {
-    await loadState();
-    applyTheme(state.theme);
-
-    const net = currentNetwork();
-    if (DEBUG || net.isTestnet) {
+    if (DEBUG) {
        const banner = document.createElement("div");
        banner.id = "debug-banner";
-        if (DEBUG && net.isTestnet) {
-            banner.textContent = "DEBUG / INSECURE [TESTNET]";
-        } else if (net.isTestnet) {
-            banner.textContent = "[TESTNET]";
-        } else {
-            banner.textContent = "DEBUG / INSECURE";
-        }
+        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);
+
    // Auto-default active address
    if (
        state.activeAddress === null &&
@@ -254,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);
--- a/src/popup/views/addToken.js
+++ b/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
-            // so the newly added token is visible immediately.
-            if (state.viewStack.length > 0) {
-                state.viewStack.pop();
-            }
-            require("./addressDetail").show();
+            ctx.showAddressDetail();
        } 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", () => {
-        goBack();
-    });
+    $("btn-add-token-back").addEventListener("click", ctx.showAddressDetail);
 }

 module.exports = { init, show };
--- a/src/popup/views/addWallet.js
+++ b/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");
+        }
    });
 }

--- a/src/popup/views/addressDetail.js
+++ b/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-line").innerHTML = renderAddressHtml(addr.address, {
-        title: addrTitle,
-        ensName: addr.ensName,
-    });
-    $("address-line").dataset.full = addr.address;
-    attachCopyHandlers($("address-line"));
+    $("address-dot").innerHTML = addressDotHtml(addr.address);
+    $("address-full").dataset.full = addr.address;
+    $("address-full").textContent = addr.address;
+    const addrLink = etherscanAddressLink(addr.address);
+    $("address-etherscan-link").innerHTML =
+        `<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
    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
-    ensEl.classList.add("hidden");
+    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;
-        exportAddrContainer.innerHTML = renderAddressHtml(addr.address);
-        attachCopyHandlers(exportAddrContainer);
+        $("export-privkey-dot").innerHTML = addressDotHtml(addr.address);
+        $("export-privkey-address").textContent = addr.address;
+        $("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();
    });
 }

--- a/src/popup/views/addressToken.js
+++ b/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-line").innerHTML = renderAddressHtml(addr.address, {
-        title: addrTitle,
-        ensName: addr.ensName,
-    });
-    $("address-token-line").dataset.full = addr.address;
-    attachCopyHandlers($("address-token-line"));
+    $("address-token-dot").innerHTML = addressDotHtml(addr.address);
+    $("address-token-full").dataset.full = addr.address;
+    $("address-token-full").textContent = addr.address;
+    const addrLink =
+        tokenId !== "ETH"
+            ? etherscanTokenLink(tokenId, addr.address)
+            : 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");
    });

--- a/src/popup/views/approval.js
+++ b/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);
                }
-                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;
    });
 }
--- a/src/popup/views/confirmTx.js
+++ b/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 (
-        `<div class="mb-1">${blockie}</div>` +
-        renderAddressHtml(address, { title, ensName })
-    );
+    const dot = addressDotHtml(address);
+    const link = etherscanAddressLink(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 (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(
-            txInfo.token,
-            {},
-        );
+        const dot = addressDotHtml(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");
    });
 }

--- a/src/popup/views/deleteWallet.js
+++ b/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");
-            settings.show();
+            ctx.showSettingsView();
            showFlash("Wallet deleted.");
        }
    });
--- a/src/popup/views/helpers.js
+++ b/src/popup/views/helpers.js
@@ -6,7 +6,7 @@ const {
    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.
@@ -59,59 +59,14 @@ function showView(name) {
    clearFlash();
    state.currentView = name;
    saveState();
-    const net = currentNetwork();
-    if (DEBUG || net.isTestnet) {
+    if (DEBUG) {
        const banner = document.getElementById("debug-banner");
        if (banner) {
-            if (DEBUG && net.isTestnet) {
-                banner.textContent =
-                    "DEBUG / INSECURE [TESTNET] (" + name + ")";
-            } else if (net.isTestnet) {
-                banner.textContent = "[TESTNET]";
-            } else {
-                banner.textContent = "DEBUG / INSECURE (" + name + ")";
-            }
+            banner.textContent = "DEBUG / INSECURE (" + name + ")";
        }
    }
 }

-// 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;

 function clearFlash() {
@@ -253,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) {
@@ -314,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");
@@ -417,10 +299,6 @@ module.exports = {
    showError,
    hideError,
    showView,
-    setRenderMain,
-    pushCurrentView,
-    goBack,
-    clearViewStack,
    showFlash,
    flashCopyFeedback,
    balanceLine,
@@ -430,12 +308,6 @@ module.exports = {
    escapeHtml,
    addressTitle,
    formatAddressHtml,
-    renderAddressHtml,
-    copyableHtml,
-    attachCopyHandlers,
-    etherscanAddressUrl,
-    etherscanLinkHtml,
-    EXT_ICON,
    truncateMiddle,
    isoDate,
    timeAgo,
--- a/src/popup/views/home.js
+++ b/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);
-        attachCopyHandlers(el);
+        const addr = state.activeAddress;
+        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");
    });

--- a/src/popup/views/receive.js
+++ b/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
-    $("receive-etherscan-link").innerHTML = "";
+    const net = currentNetwork();
+    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();
+        }
    });
 }

--- a/src/popup/views/send.js
+++ b/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, {
-        title,
-        ensName: addr.ensName,
-    });
-    attachCopyHandlers($("send-from"));
+    let fromHtml = "";
+    if (title) {
+        fromHtml += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
+        if (addr.ensName) {
+            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();
+        }
    });
 }

--- a/src/popup/views/settings.js
+++ b/src/popup/views/settings.js
@@ -1,21 +1,25 @@
-const {
-    $,
-    showView,
-    showFlash,
-    escapeHtml,
-    goBack,
-    pushCurrentView,
-} = require("./helpers");
+const { $, showView, showFlash, escapeHtml } = require("./helpers");
 const { applyTheme } = require("../theme");
 const { state, saveState, currentNetwork } = require("../../shared/state");
 const { NETWORKS, SUPPORTED_CHAIN_IDS } = require("../../shared/networks");
 const { onChainSwitch } = require("../../shared/chainSwitch");
-const { log, debugFetch } = require("../../shared/log");
+const { log, debugFetch, setRuntimeDebug } = require("../../shared/log");
 const deleteWallet = require("./deleteWallet");
+const {
+    BUILD_VERSION,
+    BUILD_LICENSE,
+    BUILD_AUTHOR,
+    BUILD_COMMIT,
+    BUILD_DATE,
+    GITEA_COMMIT_URL,
+} = require("../../shared/buildInfo");

 const runtime =
    typeof browser !== "undefined" ? browser.runtime : chrome.runtime;

+let versionClickCount = 0;
+let versionClickTimer = null;
+
 function renderSiteList(containerId, siteMap, stateKey) {
    const container = $(containerId);
    const hostnames = [...new Set(Object.values(siteMap).flat())];
@@ -93,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);
        });
    });
@@ -142,6 +145,28 @@ function show() {
    renderSiteLists();
    renderWalletListSettings();

+    // Populate About well
+    $("about-license").textContent = BUILD_LICENSE;
+    // Show only the name part of the author field (strip email)
+    const authorName = BUILD_AUTHOR.replace(/\s*<[^>]+>/, "");
+    $("about-author").textContent = authorName;
+    $("about-version").textContent = BUILD_VERSION;
+    $("about-build-date").textContent = BUILD_DATE;
+    $("about-commit-link").textContent = BUILD_COMMIT;
+    $("about-commit-link").href = GITEA_COMMIT_URL;
+
+    // Reset version click counter each time settings opens
+    versionClickCount = 0;
+
+    // Show debug well if debug mode is already enabled
+    const debugWell = $("settings-debug-well");
+    if (state.debugMode) {
+        debugWell.style.display = "";
+    } else {
+        debugWell.style.display = "none";
+    }
+    $("settings-debug-mode").checked = state.debugMode;
+
    showView("settings");
 }

@@ -289,8 +314,34 @@ function init(ctx) {
        ctx.showSettingsAddTokenView,
    );

+    // Easter egg: click version 10 times to reveal the debug well
+    $("about-version").addEventListener("click", () => {
+        versionClickCount++;
+        clearTimeout(versionClickTimer);
+        // Reset counter if user stops clicking for 3 seconds
+        versionClickTimer = setTimeout(() => {
+            versionClickCount = 0;
+        }, 3000);
+        if (versionClickCount >= 10) {
+            versionClickCount = 0;
+            clearTimeout(versionClickTimer);
+            $("settings-debug-well").style.display = "";
+        }
+    });
+
+    // Debug mode toggle
+    $("settings-debug-mode").addEventListener("change", async () => {
+        state.debugMode = $("settings-debug-mode").checked;
+        setRuntimeDebug(state.debugMode);
+        await saveState();
+    });
+
+    // Sync runtime debug flag on init
+    setRuntimeDebug(state.debugMode);
+
    $("btn-settings-back").addEventListener("click", () => {
-        goBack();
+        ctx.renderWalletList();
+        showView("main");
    });
 }

--- a/src/popup/views/settingsAddToken.js
+++ b/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 () => {
--- a/src/popup/views/transactionDetail.js
+++ b/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 (
-        `<div class="mb-1">${blockie}</div>` +
-        renderAddressHtml(address, { title, ensName })
-    );
+    const dot = addressDotHtml(address);
+    const link = `${currentNetwork().explorerUrl}/address/${address}`;
+    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();
+        }
    });
 }

--- a/src/popup/views/txStatus.js
+++ b/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");
-        require("./addressToken").show();
+        ctx.showAddressToken();
    } else {
-        require("./addressDetail").show();
+        ctx.showAddressDetail();
    }
 }

--- a/src/shared/buildInfo.js
+++ b/src/shared/buildInfo.js
@@ -0,0 +1,35 @@
+// Build-time constants injected by esbuild define in build.js.
+// These globals are replaced at bundle time with string literals.
+
+/* global __BUILD_VERSION__, __BUILD_LICENSE__, __BUILD_AUTHOR__,
+          __BUILD_COMMIT__, __BUILD_COMMIT_FULL__, __BUILD_DATE__ */
+
+const BUILD_VERSION =
+    typeof __BUILD_VERSION__ !== "undefined" ? __BUILD_VERSION__ : "dev";
+const BUILD_LICENSE =
+    typeof __BUILD_LICENSE__ !== "undefined" ? __BUILD_LICENSE__ : "GPL-3.0";
+const BUILD_AUTHOR =
+    typeof __BUILD_AUTHOR__ !== "undefined"
+        ? __BUILD_AUTHOR__
+        : "sneak <sneak@sneak.berlin>";
+const BUILD_COMMIT =
+    typeof __BUILD_COMMIT__ !== "undefined" ? __BUILD_COMMIT__ : "unknown";
+const BUILD_COMMIT_FULL =
+    typeof __BUILD_COMMIT_FULL__ !== "undefined"
+        ? __BUILD_COMMIT_FULL__
+        : "unknown";
+const BUILD_DATE =
+    typeof __BUILD_DATE__ !== "undefined" ? __BUILD_DATE__ : "unknown";
+
+const GITEA_COMMIT_URL =
+    "https://git.eeqj.de/sneak/AutistMask/commit/" + BUILD_COMMIT_FULL;
+
+module.exports = {
+    BUILD_VERSION,
+    BUILD_LICENSE,
+    BUILD_AUTHOR,
+    BUILD_COMMIT,
+    BUILD_COMMIT_FULL,
+    BUILD_DATE,
+    GITEA_COMMIT_URL,
+};
--- a/src/shared/log.js
+++ b/src/shared/log.js
@@ -1,12 +1,27 @@
 // Leveled logger. Outputs to console with [AutistMask] prefix.
-// Level is DEBUG when the DEBUG constant is true, INFO otherwise.
+// Level is DEBUG when the compile-time DEBUG constant is true or the runtime
+// debugMode state flag is enabled.  The runtime flag is checked lazily so it
+// responds immediately when toggled in settings.

 const { DEBUG } = require("./constants");

 const LEVELS = { debug: 0, info: 1, warn: 2, error: 3 };
-const threshold = DEBUG ? LEVELS.debug : LEVELS.info;
+
+// Runtime debug mode flag — set by settings.js when the user toggles debug
+// mode via the easter egg.  Kept here as a simple mutable reference so it can
+// be updated without circular dependency issues with state.js.
+let _runtimeDebug = false;
+
+function setRuntimeDebug(enabled) {
+    _runtimeDebug = enabled;
+}
+
+function isDebug() {
+    return DEBUG || _runtimeDebug;
+}

 function emit(level, method, args) {
+    const threshold = isDebug() ? LEVELS.debug : LEVELS.info;
    if (LEVELS[level] >= threshold) {
        console[method]("[AutistMask]", ...args);
    }
@@ -37,4 +52,4 @@ async function debugFetch(url, opts) {
    return resp;
 }

-module.exports = { log, debugFetch };
+module.exports = { log, debugFetch, setRuntimeDebug, isDebug };
--- a/src/shared/state.js
+++ b/src/shared/state.js
@@ -29,6 +29,7 @@ const DEFAULT_STATE = {
    fraudContracts: [],
    tokenHolderCache: {},
    theme: "system",
+    debugMode: false,
 };

 const state = {
@@ -38,7 +39,6 @@ const state = {
    selectedAddress: null,
    selectedToken: null,
    viewData: {},
-    viewStack: [],
 };

 // Return the network configuration for the currently selected network.
@@ -68,12 +68,12 @@ async function saveState() {
        fraudContracts: state.fraudContracts,
        tokenHolderCache: state.tokenHolderCache,
        theme: state.theme,
+        debugMode: state.debugMode,
        currentView: state.currentView,
        selectedWallet: state.selectedWallet,
        selectedAddress: state.selectedAddress,
        selectedToken: state.selectedToken,
        viewData: state.viewData,
-        viewStack: state.viewStack,
    };
    await storageApi.set({ autistmask: persisted });
 }
@@ -128,6 +128,8 @@ async function loadState() {
        state.fraudContracts = saved.fraudContracts || [];
        state.tokenHolderCache = saved.tokenHolderCache || {};
        state.theme = saved.theme || "system";
+        state.debugMode =
+            saved.debugMode !== undefined ? saved.debugMode : false;
        state.currentView = saved.currentView || null;
        state.selectedWallet =
            saved.selectedWallet !== undefined ? saved.selectedWallet : null;
@@ -135,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 : [];
    }
 }