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)

src/popup/index.html

@@ -999,7 +999,12 @@
                             class="text-xs"
                         ></div>
                     </div>
-                    <div id="tx-detail-rawdata-section" class="hidden">
+                </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"
@@ -1007,11 +1012,6 @@
                     ></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>
 
             <!-- ============ TRANSACTION APPROVAL ============ -->
             <div id="view-approve-tx" class="view hidden">

src/popup/views/transactionDetail.js

@@ -149,9 +149,11 @@ function render() {
         if (headingEl) headingEl.textContent = "Transaction";
     }
 
-    // Hide calldata section; re-fetch if this is a contract call
+    // 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);
@@ -202,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>`;
                 }
@@ -228,13 +241,16 @@ async function loadCalldata(txHash, toAddress) {
 
         section.classList.remove("hidden");
 
-        // Bind copy handlers for new elements
+        // Bind copy handlers for new elements (including raw data now outside section)
-        section.querySelectorAll("[data-copy]").forEach((el) => {
+        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);
     }