From 3e900dc14c2708681a9650db4f9f2579d4c77860 Mon Sep 17 00:00:00 2001
From: user <user@Mac.lan guest wan>
Date: Sun, 1 Mar 2026 06:11:35 -0800
Subject: [PATCH] feat: add Type field and on-chain details to transaction
 detail view

- Always display a Type field as the first item under the Transaction
  heading, identifying the transaction as: Native ETH Transfer, ERC-20
  Token Transfer, Swap, Token Approval, Contract Call, or Contract Creation
- Show token contract address with identicon for ERC-20 transfers
- Fetch and display on-chain details from Blockscout: block number,
  nonce, transaction fee, gas price, and gas used
- All new fields are click-copyable with Etherscan links where applicable

closes #95
---
 src/popup/index.html                 |  27 +++++
 src/popup/views/transactionDetail.js | 156 ++++++++++++++++++++++++---
 2 files changed, 171 insertions(+), 12 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index 89e36b7..336431c 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -1092,6 +1092,13 @@
                     <div class="text-xs text-muted mb-1">To</div>
                     <div id="tx-detail-to" class="text-xs break-all"></div>
                 </div>
+                <div id="tx-detail-token-contract-section" class="mb-4 hidden">
+                    <div class="text-xs text-muted mb-1">Token contract</div>
+                    <div
+                        id="tx-detail-token-contract"
+                        class="text-xs break-all"
+                    ></div>
+                </div>
                 <div id="tx-detail-calldata-section" class="mb-4 hidden">
                     <div
                         id="tx-detail-calldata-well"
@@ -1112,6 +1119,26 @@
                     <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-block-section" class="mb-4 hidden">
+                    <div class="text-xs text-muted mb-1">Block</div>
+                    <div id="tx-detail-block" class="text-xs"></div>
+                </div>
+                <div id="tx-detail-nonce-section" class="mb-4 hidden">
+                    <div class="text-xs text-muted mb-1">Nonce</div>
+                    <div id="tx-detail-nonce" class="text-xs"></div>
+                </div>
+                <div id="tx-detail-fee-section" class="mb-4 hidden">
+                    <div class="text-xs text-muted mb-1">Transaction fee</div>
+                    <div id="tx-detail-fee" class="text-xs"></div>
+                </div>
+                <div id="tx-detail-gasprice-section" class="mb-4 hidden">
+                    <div class="text-xs text-muted mb-1">Gas price</div>
+                    <div id="tx-detail-gasprice" class="text-xs"></div>
+                </div>
+                <div id="tx-detail-gasused-section" class="mb-4 hidden">
+                    <div class="text-xs text-muted mb-1">Gas used</div>
+                    <div id="tx-detail-gasused" class="text-xs"></div>
+                </div>
                 <div id="tx-detail-rawdata-section" class="mb-4 hidden">
                     <div class="text-xs text-muted mb-1">Raw data</div>
                     <div
diff --git a/src/popup/views/transactionDetail.js b/src/popup/views/transactionDetail.js
index e8cb1d5..f7fcee4 100644
--- a/src/popup/views/transactionDetail.js
+++ b/src/popup/views/transactionDetail.js
@@ -13,6 +13,7 @@ const {
     timeAgo,
 } = require("./helpers");
 const { state } = require("../../shared/state");
+const { formatEther, formatUnits } = require("ethers");
 const makeBlockie = require("ethereum-blockies-base64");
 const { log, debugFetch } = require("../../shared/log");
 const { decodeCalldata } = require("./approval");
@@ -26,6 +27,25 @@ const EXT_ICON =
 
 let ctx;
 
+/**
+ * Determine a human-readable transaction type string from tx fields.
+ */
+function getTransactionType(tx) {
+    if (!tx.to) return "Contract Creation";
+    if (tx.direction === "contract") {
+        if (tx.directionLabel === "Swap") return "Swap";
+        if (
+            tx.method === "approve" ||
+            tx.directionLabel === "Approve" ||
+            tx.method === "setApprovalForAll"
+        )
+            return "Token Approval";
+        return "Contract Call";
+    }
+    if (tx.symbol && tx.symbol !== "ETH") return "ERC-20 Token Transfer";
+    return "Native ETH Transfer";
+}
+
 function copyableHtml(text, extraClass) {
     const cls =
         "underline decoration-dashed cursor-pointer" +
@@ -99,6 +119,7 @@ function show(tx) {
             direction: tx.direction || null,
             isContractCall: tx.isContractCall || false,
             method: tx.method || null,
+            contractAddress: tx.contractAddress || null,
         },
     };
     render();
@@ -135,30 +156,54 @@ function render() {
         nativeEl.parentElement.classList.add("hidden");
     }
 
-    // Show type label for contract interactions (Swap, Execute, etc.)
+    // Always show transaction type as the first field
     const typeSection = $("tx-detail-type-section");
     const typeEl = $("tx-detail-type");
     const headingEl = $("tx-detail-heading");
-    if (tx.direction === "contract" && tx.directionLabel) {
-        if (typeSection) {
-            typeEl.textContent = tx.directionLabel;
-            typeSection.classList.remove("hidden");
-        }
-    } else {
-        if (typeSection) typeSection.classList.add("hidden");
+    if (typeSection && typeEl) {
+        typeEl.textContent = getTransactionType(tx);
+        typeSection.classList.remove("hidden");
     }
     if (headingEl) headingEl.textContent = "Transaction";
 
-    // Hide calldata and raw data sections; re-fetch if this is a contract call
+    // Token contract address (for ERC-20 transfers)
+    const tokenContractSection = $("tx-detail-token-contract-section");
+    const tokenContractEl = $("tx-detail-token-contract");
+    if (tokenContractSection && tokenContractEl) {
+        if (tx.contractAddress) {
+            const dot = addressDotHtml(tx.contractAddress);
+            const link = `https://etherscan.io/token/${tx.contractAddress}`;
+            tokenContractEl.innerHTML =
+                `<div class="flex items-center">${dot}` +
+                copyableHtml(tx.contractAddress, "break-all") +
+                etherscanLinkHtml(link) +
+                `</div>`;
+            tokenContractSection.classList.remove("hidden");
+        } else {
+            tokenContractSection.classList.add("hidden");
+        }
+    }
+
+    // Hide calldata and raw data sections; always fetch full tx details
     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);
+    // Hide on-chain detail sections until populated
+    for (const id of [
+        "tx-detail-block-section",
+        "tx-detail-nonce-section",
+        "tx-detail-fee-section",
+        "tx-detail-gasprice-section",
+        "tx-detail-gasused-section",
+    ]) {
+        const el = $(id);
+        if (el) el.classList.add("hidden");
     }
 
+    loadFullTxDetails(tx.hash, tx.to, tx.isContractCall);
+
     const isoStr = isoDate(tx.timestamp);
     $("tx-detail-time").innerHTML =
         copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
@@ -177,7 +222,90 @@ function render() {
         });
 }
 
-async function loadCalldata(txHash, toAddress) {
+function showDetailField(sectionId, contentId, value) {
+    const section = $(sectionId);
+    const el = $(contentId);
+    if (!section || !el) return;
+    el.innerHTML = copyableHtml(value, "");
+    section.classList.remove("hidden");
+}
+
+function populateOnChainDetails(txData) {
+    // Block number
+    if (txData.block_number != null) {
+        const blockLink = `https://etherscan.io/block/${txData.block_number}`;
+        const blockSection = $("tx-detail-block-section");
+        const blockEl = $("tx-detail-block");
+        if (blockSection && blockEl) {
+            blockEl.innerHTML =
+                copyableHtml(String(txData.block_number), "") +
+                etherscanLinkHtml(blockLink);
+            blockSection.classList.remove("hidden");
+        }
+    }
+
+    // Nonce
+    if (txData.nonce != null) {
+        showDetailField(
+            "tx-detail-nonce-section",
+            "tx-detail-nonce",
+            String(txData.nonce),
+        );
+    }
+
+    // Transaction fee
+    const feeWei = txData.fee?.value || txData.tx_fee;
+    if (feeWei) {
+        const feeEth = formatEther(String(feeWei));
+        showDetailField(
+            "tx-detail-fee-section",
+            "tx-detail-fee",
+            feeEth + " ETH",
+        );
+    }
+
+    // Gas price
+    const gasPrice = txData.gas_price;
+    if (gasPrice) {
+        const gwei = formatUnits(String(gasPrice), "gwei");
+        showDetailField(
+            "tx-detail-gasprice-section",
+            "tx-detail-gasprice",
+            gwei + " Gwei",
+        );
+    }
+
+    // Gas used
+    const gasUsed = txData.gas_used;
+    if (gasUsed) {
+        showDetailField(
+            "tx-detail-gasused-section",
+            "tx-detail-gasused",
+            String(gasUsed),
+        );
+    }
+
+    // Bind copy handlers for newly added elements
+    for (const id of [
+        "tx-detail-block-section",
+        "tx-detail-nonce-section",
+        "tx-detail-fee-section",
+        "tx-detail-gasprice-section",
+        "tx-detail-gasused-section",
+    ]) {
+        const section = $(id);
+        if (!section) continue;
+        section.querySelectorAll("[data-copy]").forEach((el) => {
+            el.onclick = () => {
+                navigator.clipboard.writeText(el.dataset.copy);
+                showFlash("Copied!");
+                flashCopyFeedback(el);
+            };
+        });
+    }
+}
+
+async function loadFullTxDetails(txHash, toAddress, isContractCall) {
     const section = $("tx-detail-calldata-section");
     const actionEl = $("tx-detail-calldata-action");
     const detailsEl = $("tx-detail-calldata-details");
@@ -192,6 +320,10 @@ async function loadCalldata(txHash, toAddress) {
         );
         if (!resp.ok) return;
         const txData = await resp.json();
+
+        // Populate on-chain detail fields (block, nonce, gas, fee)
+        populateOnChainDetails(txData);
+
         const inputData = txData.raw_input || txData.input || null;
         if (!inputData || inputData === "0x") return;