reorder transaction detail view: txid first, logical grouping with separators

Reorganize the transaction detail view into logical blocks separated by
thin horizontal rules:

- Identity: transaction hash (first!), type, status
- Timing: time, block number
- Value: amount, native quantity, token contract, from, to
- Decoded details: action/protocol/steps (contract calls)
- Network details: nonce, gas price, gas used, fee
- Raw data: full calldata

Updates README screen map to reflect new field ordering and grouping.

closes #131

README.md

@@ -435,25 +435,35 @@ transitions.
 #### TransactionDetail
 
 - **When**: User tapped a transaction row from AddressDetail or AddressToken.
-- **Elements**:
+- **Elements** (grouped into logical blocks separated by thin rules):
     - "Transaction" heading, "Back" button
-    - Type: transaction classification — one of: Native ETH Transfer, ERC-20
-      Token Transfer, Swap, Token Approval, Contract Call, Contract Creation
-    - Token contract: shown for ERC-20 transfers — color dot + full contract
-      address (tap to copy) + etherscan token link
-    - 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)
+    - **Identity block**:
+        - 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"
+    - **Timing block**:
+        - Time: ISO datetime + relative age in parentheses
+        - Block: block number (tap to copy) + etherscan block link
+    - **Value block**:
+        - 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
+        - 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
+    - **Decoded details** (shown for contract calls):
+        - Action name, decoded parameters, token details, swap steps
+    - **Network details** (shown when on-chain data is available):
+        - Nonce: transaction nonce (tap to copy)
+        - Gas price: value in Gwei (tap to copy)
+        - Gas used: integer (tap to copy)
+        - Transaction fee: ETH amount (tap to copy)
+    - **Raw data** (shown when calldata is present):
+        - Full calldata in monospace dashed border
 - **Transitions**:
     - "Back" → **AddressToken** (if `selectedToken` set) or **AddressDetail**
 

src/popup/index.html

@@ -1064,45 +1064,66 @@
                 <h2 id="tx-detail-heading" class="font-bold mb-2">
                     Transaction
                 </h2>
-                <div id="tx-detail-type-section" class="mb-4 hidden">
+
+                <!-- ── Identity ── -->
+                <div class="mb-2">
+                    <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-type-section" class="mb-2 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-4">
+                <div class="mb-2">
                     <div class="text-xs text-muted mb-1">Status</div>
                     <div id="tx-detail-status" class="text-xs"></div>
                 </div>
-                <div class="mb-4">
+
+                <hr class="border-border my-3" />
+
+                <!-- ── Timing ── -->
+                <div class="mb-2">
                     <div class="text-xs text-muted mb-1">Time</div>
                     <div id="tx-detail-time" class="text-xs"></div>
                 </div>
-                <div class="mb-4">
+                <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>
+
+                <hr class="border-border my-3" />
+
+                <!-- ── Value ── -->
+                <div class="mb-2">
                     <div class="text-xs text-muted mb-1">Amount</div>
                     <div id="tx-detail-value" class="text-xs"></div>
                 </div>
-                <div class="mb-4 hidden">
+                <div class="mb-2 hidden">
                     <div class="text-xs text-muted mb-1">Native quantity</div>
                     <div id="tx-detail-native" class="text-xs"></div>
                 </div>
-                <div class="mb-4">
-                    <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-4">
-                    <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 id="tx-detail-token-contract-section" class="mb-2 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 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>
+
+                <!-- ── Decoded details ── -->
+                <div id="tx-detail-calldata-section" class="hidden">
+                    <hr class="border-border my-3" />
                     <div
                         id="tx-detail-calldata-well"
-                        class="mb-3 border border-border border-dashed p-2"
+                        class="mb-2 border border-border border-dashed p-2"
                     >
                         <div class="text-xs text-muted mb-1">Action</div>
                         <div
@@ -1115,36 +1136,40 @@
                         ></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>
+
+                <!-- ── Network details ── -->
+                <div id="tx-detail-network-section" class="hidden">
+                    <hr class="border-border my-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>
+                    </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
-                        id="tx-detail-rawdata"
-                        class="text-xs break-all font-mono border border-border border-dashed p-2"
-                    ></div>
+
+                <!-- ── Raw data ── -->
+                <div id="tx-detail-rawdata-section" class="hidden">
+                    <hr class="border-border my-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>
             </div>
 

src/popup/views/transactionDetail.js

@@ -197,6 +197,7 @@ function render() {
         "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");
@@ -285,6 +286,21 @@ function populateOnChainDetails(txData) {
         );
     }
 
+    // Show the network details wrapper if any child section is visible
+    const networkWrapper = $("tx-detail-network-section");
+    if (networkWrapper) {
+        const hasVisible = [
+            "tx-detail-nonce-section",
+            "tx-detail-fee-section",
+            "tx-detail-gasprice-section",
+            "tx-detail-gasused-section",
+        ].some((id) => {
+            const el = $(id);
+            return el && !el.classList.contains("hidden");
+        });
+        if (hasVisible) networkWrapper.classList.remove("hidden");
+    }
+
     // Bind copy handlers for newly added elements
     for (const id of [
         "tx-detail-block-section",