From efc5404d6dddc1941915543a3ff430d8e41b061b Mon Sep 17 00:00:00 2001
From: clawbot <clawbot@noreply.example.org>
Date: Fri, 27 Feb 2026 12:05:21 -0800
Subject: [PATCH] Show decoded calldata in transaction detail view

Add decoded transaction summary (matching the approval screen
format) to the transaction detail view. For unknown contract
calls, show 'Unknown Contract Call' label with full raw
calldata hex (not truncated).
---
 src/popup/index.html                 | 17 +++++++++
 src/popup/views/transactionDetail.js | 56 ++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)

diff --git a/src/popup/index.html b/src/popup/index.html
index 6922bcd..b8f6f4e 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -943,6 +943,23 @@
                     <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-decoded"
+                    class="mb-3 border border-border border-dashed p-2 hidden"
+                >
+                    <div
+                        id="tx-detail-action"
+                        class="font-bold mb-1 text-xs"
+                    ></div>
+                    <div id="tx-detail-decoded-details" class="text-xs"></div>
+                </div>
+                <div id="tx-detail-rawdata-section" class="mb-4 hidden">
+                    <div class="text-xs text-muted mb-1">Raw calldata</div>
+                    <div
+                        id="tx-detail-rawdata"
+                        class="text-xs break-all font-mono"
+                    ></div>
+                </div>
             </div>
 
             <!-- ============ TRANSACTION APPROVAL ============ -->
diff --git a/src/popup/views/transactionDetail.js b/src/popup/views/transactionDetail.js
index 8ecbfe3..9961e28 100644
--- a/src/popup/views/transactionDetail.js
+++ b/src/popup/views/transactionDetail.js
@@ -12,6 +12,8 @@ const {
     timeAgo,
 } = require("./helpers");
 const { state } = require("../../shared/state");
+const { TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
+const { decodeCalldata } = require("../../shared/decodeCalldata");
 const makeBlockie = require("ethereum-blockies-base64");
 
 const EXT_ICON =
@@ -85,6 +87,8 @@ function show(tx) {
             fromEns: tx.fromEns || null,
             toEns: tx.toEns || null,
             directionLabel: tx.directionLabel || null,
+            rawInput: tx.rawInput || null,
+            decoded: tx.decoded || null,
         },
     };
     render();
@@ -124,6 +128,58 @@ function render() {
     $("tx-detail-time").textContent =
         isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
     $("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
+
+    // Decoded calldata section — matches approval screen format
+    const decodedEl = $("tx-detail-decoded");
+    const rawDataEl = $("tx-detail-rawdata-section");
+    const decoded = tx.decoded;
+
+    if (decoded) {
+        $("tx-detail-action").textContent = decoded.name;
+        let detailsHtml = "";
+        if (decoded.description) {
+            detailsHtml += `<div class="mb-2">${escapeHtml(decoded.description)}</div>`;
+        }
+        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.isToken) {
+                    const t = TOKEN_BY_ADDRESS.get(d.address.toLowerCase());
+                    const label = t ? t.symbol : "Unknown token";
+                    detailsHtml += `<div class="font-bold">${escapeHtml(label)}</div>`;
+                }
+                const dot = addressDotHtml(d.address);
+                const link = `https://etherscan.io/address/${d.address}`;
+                detailsHtml +=
+                    `<div class="flex items-center">${dot}` +
+                    `<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(d.address)}">${escapeHtml(d.address)}</span>` +
+                    `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a></div>`;
+            } else {
+                detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
+            }
+            detailsHtml += `</div>`;
+        }
+        $("tx-detail-decoded-details").innerHTML = detailsHtml;
+        decodedEl.classList.remove("hidden");
+    } else {
+        decodedEl.classList.add("hidden");
+    }
+
+    // Raw calldata section — shown for unknown contract calls (full, not truncated)
+    if (tx.rawInput && tx.rawInput !== "0x" && !decoded) {
+        $("tx-detail-rawdata").textContent = tx.rawInput;
+        rawDataEl.classList.remove("hidden");
+        // Label as unknown contract call
+        $("tx-detail-action").textContent = "Unknown Contract Call";
+        $("tx-detail-decoded-details").innerHTML = "";
+        decodedEl.classList.remove("hidden");
+    } else if (!decoded) {
+        rawDataEl.classList.add("hidden");
+    } else {
+        rawDataEl.classList.add("hidden");
+    }
+
     showView("transaction");
 
     document