fix: match etherscan link styling to other views (remove extra border/hover/padding)

The etherscanLinkHtml helper had added border, px-1, hover:bg-fg, hover:text-bg, and cursor-pointer classes that no other view uses. All other views (addressDetail, addressToken, confirmTx, send, receive, home, txStatus) use only 'inline-flex items-center' on etherscan links. Removed the extra classes for consistency.
fix: address all 3 violations from #59
2026-02-28 11:04:37 -08:00 · 2026-02-28 11:03:20 -08:00 · 2026-02-28 11:03:20 -08:00 · 2026-02-28 19:38:16 +01:00 · 2026-02-28 10:25:34 -08:00 · 2026-02-28 18:16:12 +01:00
7 changed files with 113 additions and 37 deletions
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -999,18 +999,18 @@
                            class="text-xs"
                        ></div>
                    </div>
-                    <div id="tx-detail-rawdata-section" class="hidden">
-                        <div class="text-xs text-muted mb-1">Raw data</div>
-                        <div
-                            id="tx-detail-rawdata"
-                            class="text-xs break-all font-mono border border-border border-dashed p-2"
-                        ></div>
-                    </div>
                </div>
                <div class="mb-4">
                    <div class="text-xs text-muted mb-1">Transaction hash</div>
                    <div id="tx-detail-hash" class="text-xs break-all"></div>
                </div>
+                <div id="tx-detail-rawdata-section" class="mb-4 hidden">
+                    <div class="text-xs text-muted mb-1">Raw data</div>
+                    <div
+                        id="tx-detail-rawdata"
+                        class="text-xs break-all font-mono border border-border border-dashed p-2"
+                    ></div>
+                </div>
            </div>

            <!-- ============ TRANSACTION APPROVAL ============ -->
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -186,10 +186,12 @@ function renderTransactions(txs) {
    let html = "";
    let i = 0;
    for (const tx of txs) {
+        // For swap transactions, show the user's own labelled wallet
+        // address instead of the contract address (see issue #55).
        const counterparty =
-            tx.direction === "contract"
+            tx.direction === "contract" && tx.directionLabel === "Swap"
                ? tx.from
-                : tx.direction === "sent"
+                : tx.direction === "sent" || tx.direction === "contract"
                  ? tx.to
                  : tx.from;
        const ensName = ensNameMap.get(counterparty) || null;
--- a/src/popup/views/addressToken.js
+++ b/src/popup/views/addressToken.js
@@ -87,6 +87,7 @@ function show() {

    // Determine token symbol and balance
    let symbol, amount, price;
+    const knownToken = TOKEN_BY_ADDRESS.get(tokenId.toLowerCase());
    if (tokenId === "ETH") {
        symbol = "ETH";
        amount = parseFloat(addr.balance || "0");
@@ -95,7 +96,14 @@ function show() {
        const tb = (addr.tokenBalances || []).find(
            (t) => t.address.toLowerCase() === tokenId.toLowerCase(),
        );
-        symbol = tb ? tb.symbol : "?";
+        const tracked = (state.trackedTokens || []).find(
+            (t) => t.address.toLowerCase() === tokenId.toLowerCase(),
+        );
+        symbol =
+            (tb && tb.symbol) ||
+            (tracked && tracked.symbol) ||
+            (knownToken && knownToken.symbol) ||
+            "?";
        amount = tb ? parseFloat(tb.balance || "0") : 0;
        price = getPrice(symbol);
    }
@@ -138,13 +146,32 @@ function show() {
        const tb = (addr.tokenBalances || []).find(
            (t) => t.address.toLowerCase() === tokenId.toLowerCase(),
        );
-        const tokenName = tb && tb.name ? escapeHtml(tb.name) : null;
-        const tokenSymbol = tb && tb.symbol ? escapeHtml(tb.symbol) : null;
-        const tokenDecimals = tb && tb.decimals != null ? tb.decimals : null;
+        const tracked = (state.trackedTokens || []).find(
+            (t) => t.address.toLowerCase() === tokenId.toLowerCase(),
+        );
+        const rawName =
+            (tb && tb.name) ||
+            (tracked && tracked.name) ||
+            (knownToken && knownToken.name) ||
+            null;
+        const rawSymbol =
+            (tb && tb.symbol) ||
+            (tracked && tracked.symbol) ||
+            (knownToken && knownToken.symbol) ||
+            null;
+        const tokenName = rawName ? escapeHtml(rawName) : null;
+        const tokenSymbol = rawSymbol ? escapeHtml(rawSymbol) : null;
+        const tokenDecimals =
+            tb && tb.decimals != null
+                ? tb.decimals
+                : tracked && tracked.decimals != null
+                  ? tracked.decimals
+                  : knownToken && knownToken.decimals != null
+                    ? knownToken.decimals
+                    : null;
        const tokenHolders = tb && tb.holders != null ? tb.holders : null;
        const dot = addressDotHtml(tokenId);
        const tokenLink = `https://etherscan.io/token/${escapeHtml(tokenId)}`;
-        const knownToken = TOKEN_BY_ADDRESS.get(tokenId.toLowerCase());
        const projectUrl = knownToken && knownToken.url ? knownToken.url : null;
        let infoHtml = `<div class="font-bold mb-2">Contract Address</div>`;
        infoHtml +=
--- a/src/popup/views/home.js
+++ b/src/popup/views/home.js
@@ -103,10 +103,15 @@ function renderHomeTxList(ctx) {
    let html = "";
    let i = 0;
    for (const tx of homeTxs) {
+        // For swap transactions, show the user's own labelled wallet
+        // address (the one that initiated the swap) instead of the
+        // contract address which is not useful in the list view.
        const counterparty =
-            tx.direction === "sent" || tx.direction === "contract"
-                ? tx.to
-                : tx.from;
+            tx.direction === "contract" && tx.directionLabel === "Swap"
+                ? tx.from
+                : tx.direction === "sent" || tx.direction === "contract"
+                  ? tx.to
+                  : tx.from;
        const dirLabel = tx.directionLabel;
        const amountStr = tx.value
            ? escapeHtml(tx.value + " " + tx.symbol)
--- a/src/popup/views/send.js
+++ b/src/popup/views/send.js
@@ -10,7 +10,7 @@ const {
 const { state, currentAddress } = require("../../shared/state");
 let ctx;
 const { getProvider } = require("../../shared/balances");
-const { KNOWN_SYMBOLS } = require("../../shared/tokenList");
+const { KNOWN_SYMBOLS, TOKEN_BY_ADDRESS } = require("../../shared/tokenList");

 const EXT_ICON =
    `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
@@ -73,7 +73,15 @@ function updateSendBalance() {
        const tb = (addr.tokenBalances || []).find(
            (t) => t.address.toLowerCase() === token.toLowerCase(),
        );
-        const symbol = tb ? tb.symbol : "?";
+        const knownToken = TOKEN_BY_ADDRESS.get(token.toLowerCase());
+        const tracked = (state.trackedTokens || []).find(
+            (t) => t.address.toLowerCase() === token.toLowerCase(),
+        );
+        const symbol =
+            (tb && tb.symbol) ||
+            (tracked && tracked.symbol) ||
+            (knownToken && knownToken.symbol) ||
+            "?";
        const bal = tb ? tb.balance || "0" : "0";
        $("send-balance").textContent =
            "Current balance: " + bal + " " + symbol;
@@ -124,7 +132,15 @@ function init(_ctx) {
            const tb = (addr.tokenBalances || []).find(
                (t) => t.address.toLowerCase() === token.toLowerCase(),
            );
-            tokenSymbol = tb ? tb.symbol : "?";
+            const knownTk = TOKEN_BY_ADDRESS.get(token.toLowerCase());
+            const trackedTk = (state.trackedTokens || []).find(
+                (t) => t.address.toLowerCase() === token.toLowerCase(),
+            );
+            tokenSymbol =
+                (tb && tb.symbol) ||
+                (trackedTk && trackedTk.symbol) ||
+                (knownTk && knownTk.symbol) ||
+                "?";
            tokenBalance = tb ? tb.balance || "0" : "0";
        }

--- a/src/popup/views/transactionDetail.js
+++ b/src/popup/views/transactionDetail.js
@@ -37,11 +37,19 @@ function blockieHtml(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);
    const dot = addressDotHtml(address);
    const link = `https://etherscan.io/address/${address}`;
-    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+    const extLink = etherscanLinkHtml(link);
    let html = `<div class="mb-1">${blockie}</div>`;
    if (title) {
        html += `<div class="font-bold">${escapeHtml(title)}</div>`;
@@ -50,10 +58,10 @@ function txAddressHtml(address, ensName, title) {
        html +=
            `<div class="flex items-center">${dot}` +
            copyableHtml(ensName, "") +
-            extLink +
            `</div>` +
-            `<div class="break-all">` +
+            `<div class="flex items-center">${dot}` +
            copyableHtml(address, "break-all") +
+            extLink +
            `</div>`;
    } else {
        html +=
@@ -67,7 +75,7 @@ function txAddressHtml(address, ensName, title) {

 function txHashHtml(hash) {
    const link = `https://etherscan.io/tx/${hash}`;
-    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
+    const extLink = etherscanLinkHtml(link);
    return copyableHtml(hash, "break-all") + extLink;
 }

@@ -93,9 +101,6 @@ function show(tx) {
        },
    };
    render();
-    if (tx.isContractCall || tx.direction === "contract") {
-        loadCalldata(tx.hash, tx.to);
-    }
 }

 function render() {
@@ -144,9 +149,15 @@ function render() {
        if (headingEl) headingEl.textContent = "Transaction";
    }

-    // Hide calldata section by default; loadCalldata will show it if needed
+    // Hide calldata and raw data sections; re-fetch if this is a contract call
    const calldataSection = $("tx-detail-calldata-section");
    if (calldataSection) calldataSection.classList.add("hidden");
+    const rawDataSection = $("tx-detail-rawdata-section");
+    if (rawDataSection) rawDataSection.classList.add("hidden");
+
+    if (tx.isContractCall || tx.direction === "contract") {
+        loadCalldata(tx.hash, tx.to);
+    }

    $("tx-detail-time").textContent =
        isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
@@ -193,9 +204,20 @@ async function loadCalldata(txHash, toAddress) {
            for (const d of decoded.details || []) {
                detailsHtml += `<div class="mb-2">`;
                detailsHtml += `<div class="text-muted">${escapeHtml(d.label)}</div>`;
-                if (d.address) {
+                if (d.address && d.isToken) {
+                    // Token entry: show symbol on its own line, then dot + address + Etherscan link
                    const dot = addressDotHtml(d.address);
-                    detailsHtml += `<div>${dot}${copyableHtml(d.value, "break-all")}</div>`;
+                    const tokenSymbol = d.value.match(/^(\S+)\s*\(/)?.[1];
+                    if (tokenSymbol) {
+                        detailsHtml += `<div class="font-bold">${escapeHtml(tokenSymbol)}</div>`;
+                    }
+                    const etherscanUrl = `https://etherscan.io/token/${d.address}`;
+                    detailsHtml += `<div class="flex items-center">${dot}${copyableHtml(d.address, "break-all")}${etherscanLinkHtml(etherscanUrl)}</div>`;
+                } else if (d.address) {
+                    // Protocol/contract entry: show name + Etherscan link
+                    const dot = addressDotHtml(d.address);
+                    const etherscanUrl = `https://etherscan.io/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>`;
                }
@@ -219,13 +241,16 @@ async function loadCalldata(txHash, toAddress) {

        section.classList.remove("hidden");

-        // Bind copy handlers for new elements
-        section.querySelectorAll("[data-copy]").forEach((el) => {
-            el.onclick = () => {
-                navigator.clipboard.writeText(el.dataset.copy);
-                showFlash("Copied!");
-            };
-        });
+        // Bind copy handlers for new elements (including raw data now outside section)
+        const copyTargets = [section, rawSection].filter(Boolean);
+        for (const container of copyTargets) {
+            container.querySelectorAll("[data-copy]").forEach((el) => {
+                el.onclick = () => {
+                    navigator.clipboard.writeText(el.dataset.copy);
+                    showFlash("Copied!");
+                };
+            });
+        }
    } catch (e) {
        log.errorf("loadCalldata failed:", e.message);
    }
--- a/src/shared/balances.js
+++ b/src/shared/balances.js
@@ -85,6 +85,7 @@ async function fetchTokenBalances(address, blockscoutUrl, trackedTokens) {

            balances.push({
                address: item.token.address_hash,
+                name: item.token.name || "",
                symbol: item.token.symbol || "???",
                decimals: decimals,
                balance: bal,
Author	SHA1	Message	Date
clawbot	93565c7196	fix: match etherscan link styling to other views (remove extra border/hover/padding) All checks were successful check / check (push) Successful in 21s Details The etherscanLinkHtml helper had added border, px-1, hover:bg-fg, hover:text-bg, and cursor-pointer classes that no other view uses. All other views (addressDetail, addressToken, confirmTx, send, receive, home, txStatus) use only 'inline-flex items-center' on etherscan links. Removed the extra classes for consistency.	2026-02-28 11:04:37 -08:00
clawbot	71ef08fe85	fix: address all 3 violations from #59 1. Protocol name now has Etherscan link (was appearing clickable but wasn't) 2. Token contract addresses: symbol shown separately, then color dot + full address + Etherscan link (symbol no longer interposed) 3. Raw data section moved after transaction hash (no longer pushes useful info off screen)	2026-02-28 11:03:20 -08:00
clawbot	8d230aceb6	fix: enforce UI policies on transaction detail view - Add clickable affordance (border + hover state) to all Etherscan external links on addresses and transaction hash per clickable affordance policy - Fix address display when ENS name is present: show color dot and Etherscan link on the full address line (previously only shown on ENS name line) - Extract etherscanLinkHtml helper for consistent link styling Closes #59	2026-02-28 11:03:20 -08:00
Jeffrey Paul	6031c3e76c	Merge pull request 'fix: persist tx decoding across popup close/reopen (closes #60 )' (#61 ) from fix/60-tx-view-decode-persistence into main All checks were successful check / check (push) Successful in 8s Details Reviewed-on: #61	2026-02-28 19:38:16 +01:00
user	436fe22296	fix: call loadCalldata from render() so tx decoding persists across popup close/reopen All checks were successful check / check (push) Successful in 22s Details Previously loadCalldata was only called from show(), meaning when the popup was closed and reopened (triggering render() directly via restoreView), the calldata decoding section was hidden and never re-fetched. Now render() triggers loadCalldata for contract calls, so decoded data always appears. Closes #60	2026-02-28 10:25:34 -08:00
Jeffrey Paul	82a7db63b5	Merge pull request 'fix: show own labelled address for swap transactions (closes #55 )' (#57 ) from fix/55-swap-tx-address into main All checks were successful check / check (push) Successful in 8s Details Reviewed-on: #57	2026-02-28 18:16:12 +01:00
Jeffrey Paul	7c53c48cb1	Merge branch 'main' into fix/55-swap-tx-address All checks were successful check / check (push) Successful in 22s Details	2026-02-28 18:04:14 +01:00
Jeffrey Paul	4d9a8a49b9	Merge pull request 'fix: fall back to known token list for symbol/name/decimals' (#54 ) from fix/51-usdc-symbol-fallback into main All checks were successful check / check (push) Successful in 9s Details Reviewed-on: #54	2026-02-28 18:04:04 +01:00
user	996003fd79	fix: add trackedTokens fallback for symbol/name/decimals resolution All checks were successful check / check (push) Successful in 22s Details Extends the fallback chain to: tb → state.trackedTokens → TOKEN_BY_ADDRESS → '?' This ensures user-added custom tokens (not just hardcoded known tokens) display correct symbol, name, and decimals even when Blockscout hasn't returned balance data (e.g. zero-balance tracked tokens).	2026-02-28 09:01:29 -08:00
user	2c9a34aff6	fix: show own labelled address for swap transactions in tx lists All checks were successful check / check (push) Successful in 22s Details For swap transactions in the transaction history list views (home and addressDetail), display the user's own labelled wallet address instead of the contract/counterparty address. The contract address is not useful in the list view — users need to see which of their addresses performed the swap. Closes #55	2026-02-28 08:57:16 -08:00
user	173d75c57a	fix: fall back to known token list for symbol/name/decimals All checks were successful check / check (push) Successful in 22s Details When a token's balance entry is missing or incomplete (e.g. not yet fetched from Blockscout), the address-token view and send view now fall back to the built-in known token list for symbol, name, and decimals instead of showing '?'. Also includes token name in the balance object returned by fetchTokenBalances so the contract info well can display it. Fixes #51	2026-02-28 08:44:09 -08:00