feat: reorganize transaction detail view layout

- Move transaction hash (txid) to first position after title
- Group fields into logical sections with visual dividers:
  Identity (hash, type, status, time), Value (amount, native qty,
  token contract), Parties (from, to), Protocol (calldata/action),
  On-chain (block, nonce, fee, gas price, gas used), Raw data
- Add tx-detail-group CSS class for subtle border separators
- Show on-chain details group wrapper only when data is loaded
- Maintain all existing functionality and copy-to-clipboard behavior

closes #131

README.md

@@ -435,29 +435,25 @@ transitions.
 #### TransactionDetail
 
 - **When**: User tapped a transaction row from AddressDetail or AddressToken.
-- **Elements** (grouped into logical blocks using light well containers; field
-  labels are self-explanatory so groups have no headings):
+- **Elements**:
     - "Transaction" heading, "Back" button
-    - Transaction hash: full hash (tap to copy) + etherscan link
     - Type: transaction classification — one of: Native ETH Transfer, ERC-20
       Token Transfer, Swap, Token Approval, Contract Call, Contract Creation
-    - Status: "Success" or "Failed"
-    - From: blockie + color dot + full address (tap to copy) + etherscan link;
-      ENS name if available
-    - To: blockie + color dot + full address (tap to copy) + etherscan link; ENS
-      name if available
-    - Time: ISO datetime + relative age in parentheses
-    - Block: block number (tap to copy) + etherscan block link
-    - Amount: value + symbol (bold)
-    - Native quantity: raw integer + unit (shown when available)
     - Token contract: shown for ERC-20 transfers — color dot + full contract
       address (tap to copy) + etherscan token link
-    - Decoded details (shown for contract calls): action name, decoded
-      parameters, token details, swap steps
-    - Network details (shown when on-chain data is available): nonce, gas price,
-      gas used, transaction fee (all tap to copy)
-    - Raw data (shown when calldata is present): full calldata in monospace
-      dashed border
+    - Status: "Success" or "Failed"
+    - Time: ISO datetime + relative age in parentheses
+    - Amount: value + symbol (bold)
+    - From: blockie + color dot + full address (tap to copy) + etherscan link
+        - ENS name if available
+    - To: blockie + color dot + full address (tap to copy) + etherscan link
+        - ENS name if available
+    - Transaction hash: full hash (tap to copy) + etherscan link
+    - Block: block number (tap to copy) + etherscan block link
+    - Nonce: transaction nonce (tap to copy)
+    - Transaction fee: ETH amount (tap to copy)
+    - Gas price: value in Gwei (tap to copy)
+    - Gas used: integer (tap to copy)
 - **Transitions**:
     - "Back" → **AddressToken** (if `selectedToken` set) or **AddressDetail**
 

src/popup/index.html

@@ -1066,8 +1066,8 @@
                 </h2>
 
                 <!-- ── Identity ── -->
-                <div class="bg-well p-3 mx-1 mb-3">
-                    <div class="mb-2">
+                <div class="tx-detail-group mb-1">
+                    <div class="mb-3">
                         <div class="text-xs text-muted mb-1">
                             Transaction hash
                         </div>
@@ -1076,49 +1076,30 @@
                             class="text-xs break-all"
                         ></div>
                     </div>
-                    <div id="tx-detail-type-section" class="mb-2 hidden">
+                    <div id="tx-detail-type-section" class="mb-3 hidden">
                         <div class="text-xs text-muted mb-1">Type</div>
                         <div
                             id="tx-detail-type"
                             class="text-xs font-bold"
                         ></div>
                     </div>
-                    <div class="mb-2">
+                    <div class="mb-3">
                         <div class="text-xs text-muted mb-1">Status</div>
                         <div id="tx-detail-status" class="text-xs"></div>
                     </div>
-                    <div class="mb-2">
-                        <div class="text-xs text-muted mb-1">From</div>
-                        <div
-                            id="tx-detail-from"
-                            class="text-xs break-all"
-                        ></div>
-                    </div>
-                    <div class="mb-2">
-                        <div class="text-xs text-muted mb-1">To</div>
-                        <div id="tx-detail-to" class="text-xs break-all"></div>
-                    </div>
-                </div>
-
-                <!-- ── Timing ── -->
-                <div class="bg-well p-3 mx-1 mb-3">
-                    <div class="mb-2">
+                    <div class="mb-1">
                         <div class="text-xs text-muted mb-1">Time</div>
                         <div id="tx-detail-time" class="text-xs"></div>
                     </div>
-                    <div id="tx-detail-block-section" class="mb-2 hidden">
-                        <div class="text-xs text-muted mb-1">Block</div>
-                        <div id="tx-detail-block" class="text-xs"></div>
-                    </div>
                 </div>
 
                 <!-- ── Value ── -->
-                <div class="bg-well p-3 mx-1 mb-3">
-                    <div class="mb-2">
+                <div class="tx-detail-group mb-1">
+                    <div class="mb-3">
                         <div class="text-xs text-muted mb-1">Amount</div>
                         <div id="tx-detail-value" class="text-xs"></div>
                     </div>
-                    <div class="mb-2 hidden">
+                    <div class="mb-3 hidden">
                         <div class="text-xs text-muted mb-1">
                             Native quantity
                         </div>
@@ -1126,7 +1107,7 @@
                     </div>
                     <div
                         id="tx-detail-token-contract-section"
-                        class="mb-2 hidden"
+                        class="mb-1 hidden"
                     >
                         <div class="text-xs text-muted mb-1">
                             Token contract
@@ -1138,10 +1119,28 @@
                     </div>
                 </div>
 
-                <!-- ── Decoded details ── -->
-                <div id="tx-detail-calldata-section" class="hidden">
-                    <div class="bg-well p-3 mx-1 mb-3">
-                        <div id="tx-detail-calldata-well" class="mb-2">
+                <!-- ── Parties ── -->
+                <div class="tx-detail-group mb-1">
+                    <div class="mb-3">
+                        <div class="text-xs text-muted mb-1">From</div>
+                        <div
+                            id="tx-detail-from"
+                            class="text-xs break-all"
+                        ></div>
+                    </div>
+                    <div class="mb-1">
+                        <div class="text-xs text-muted mb-1">To</div>
+                        <div id="tx-detail-to" class="text-xs break-all"></div>
+                    </div>
+                </div>
+
+                <!-- ── Protocol ── -->
+                <div id="tx-detail-calldata-section" class="mb-1 hidden">
+                    <div class="tx-detail-group mb-1">
+                        <div
+                            id="tx-detail-calldata-well"
+                            class="border border-border border-dashed p-2"
+                        >
                             <div class="text-xs text-muted mb-1">Action</div>
                             <div
                                 id="tx-detail-calldata-action"
@@ -1155,43 +1154,43 @@
                     </div>
                 </div>
 
-                <!-- ── Network details ── -->
-                <div id="tx-detail-network-section" class="hidden">
-                    <div class="bg-well p-3 mx-1 mb-3">
-                        <div id="tx-detail-nonce-section" class="mb-2 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-gasprice-section"
-                            class="mb-2 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-2 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-fee-section" class="mb-2 hidden">
-                            <div class="text-xs text-muted mb-1">
-                                Transaction fee
-                            </div>
-                            <div id="tx-detail-fee" class="text-xs"></div>
+                <!-- ── On-chain details ── -->
+                <div
+                    id="tx-detail-onchain-group"
+                    class="tx-detail-group mb-1 hidden"
+                >
+                    <div id="tx-detail-block-section" class="mb-3 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-3 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-3 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-3 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-1 hidden">
+                        <div class="text-xs text-muted mb-1">Gas used</div>
+                        <div id="tx-detail-gasused" class="text-xs"></div>
                     </div>
                 </div>
 
                 <!-- ── Raw data ── -->
-                <div id="tx-detail-rawdata-section" class="hidden">
-                    <div class="bg-well p-3 mx-1 mb-3">
-                        <div class="mb-2">
-                            <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 id="tx-detail-rawdata-section" class="mb-4 hidden">
+                    <div class="tx-detail-group">
+                        <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>

src/popup/styles/main.css

@@ -44,3 +44,11 @@ body {
         background-color 225ms ease-out,
         color 225ms ease-out;
 }
+
+/* Transaction detail view — visual grouping of related fields */
+.tx-detail-group {
+    border-bottom: 1px solid var(--color-border-light);
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+    padding-top: 0.25rem;
+}

src/popup/views/addressToken.js

@@ -45,10 +45,6 @@ function etherscanAddressLink(address) {
     return `https://etherscan.io/address/${address}`;
 }
 
-function etherscanTokenLink(tokenContract, holderAddress) {
-    return `https://etherscan.io/token/${tokenContract}?a=${holderAddress}`;
-}
-
 function isoDate(timestamp) {
     const d = new Date(timestamp * 1000);
     const pad = (n) => String(n).padStart(2, "0");
@@ -155,10 +151,7 @@ function show() {
     $("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);
+    const addrLink = etherscanAddressLink(addr.address);
     $("address-token-etherscan-link").innerHTML =
         `<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
 

src/popup/views/transactionDetail.js

@@ -190,14 +190,15 @@ function render() {
     const rawDataSection = $("tx-detail-rawdata-section");
     if (rawDataSection) rawDataSection.classList.add("hidden");
 
-    // Hide on-chain detail sections until populated
+    // Hide on-chain detail sections (and their group wrapper) until populated
+    const onchainGroup = $("tx-detail-onchain-group");
+    if (onchainGroup) onchainGroup.classList.add("hidden");
     for (const id of [
         "tx-detail-block-section",
         "tx-detail-nonce-section",
         "tx-detail-fee-section",
         "tx-detail-gasprice-section",
         "tx-detail-gasused-section",
-        "tx-detail-network-section",
     ]) {
         const el = $(id);
         if (el) el.classList.add("hidden");
@@ -286,10 +287,11 @@ function populateOnChainDetails(txData) {
         );
     }
 
-    // Show the network details wrapper if any child section is visible
-    const networkWrapper = $("tx-detail-network-section");
-    if (networkWrapper) {
+    // Show the on-chain details group if any child section is visible
+    const onchainGroup = $("tx-detail-onchain-group");
+    if (onchainGroup) {
         const hasVisible = [
+            "tx-detail-block-section",
             "tx-detail-nonce-section",
             "tx-detail-fee-section",
             "tx-detail-gasprice-section",
@@ -298,7 +300,9 @@ function populateOnChainDetails(txData) {
             const el = $(id);
             return el && !el.classList.contains("hidden");
         });
-        if (hasVisible) networkWrapper.classList.remove("hidden");
+        if (hasVisible) {
+            onchainGroup.classList.remove("hidden");
+        }
     }
 
     // Bind copy handlers for newly added elements