feat: add blockie identicon to Identity block in TransactionDetail

Generate a blockie from the transaction hash and display it centered
at the top of the Identity block, matching the pattern used in
AddressDetail and AddressToken views. Updates README to document
the new element.

README.md

@@ -435,25 +435,36 @@ transitions.
 #### TransactionDetail
 
 - **When**: User tapped a transaction row from AddressDetail or AddressToken.
-- **Elements**:
+- **Elements** (grouped into logical blocks using light well containers,
+  matching the Settings view pattern):
     - "Transaction" heading, "Back" button
-    - Type: transaction classification — one of: Native ETH Transfer, ERC-20
+    - **Identity block**:
-      Token Transfer, Swap, Token Approval, Contract Call, Contract Creation
+        - Blockie identicon (48px, centered, derived from transaction hash)
-    - Token contract: shown for ERC-20 transfers — color dot + full contract
+        - Transaction hash: full hash (tap to copy) + etherscan link
-      address (tap to copy) + etherscan token link
+        - Type: transaction classification — one of: Native ETH Transfer, ERC-20
-    - Status: "Success" or "Failed"
+          Token Transfer, Swap, Token Approval, Contract Call, Contract Creation
-    - Time: ISO datetime + relative age in parentheses
+        - Status: "Success" or "Failed"
-    - Amount: value + symbol (bold)
+    - **Timing block**:
-    - From: blockie + color dot + full address (tap to copy) + etherscan link
+        - Time: ISO datetime + relative age in parentheses
-        - ENS name if available
+        - Block: block number (tap to copy) + etherscan block link
-    - To: blockie + color dot + full address (tap to copy) + etherscan link
+    - **Value block**:
-        - ENS name if available
+        - Amount: value + symbol (bold)
-    - Transaction hash: full hash (tap to copy) + etherscan link
+        - Native quantity: raw integer + unit (shown when available)
-    - Block: block number (tap to copy) + etherscan block link
+        - Token contract: shown for ERC-20 transfers — color dot + full contract
-    - Nonce: transaction nonce (tap to copy)
+          address (tap to copy) + etherscan token link
-    - Transaction fee: ETH amount (tap to copy)
+        - From: blockie + color dot + full address (tap to copy) + etherscan
-    - Gas price: value in Gwei (tap to copy)
+          link; ENS name if available
-    - Gas used: integer (tap to copy)
+        - 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,87 +1064,145 @@
                 <h2 id="tx-detail-heading" class="font-bold mb-2">
                     Transaction
                 </h2>
-                <div id="tx-detail-type-section" class="mb-4 hidden">
+
-                    <div class="text-xs text-muted mb-1">Type</div>
+                <!-- ── Identity ── -->
-                    <div id="tx-detail-type" class="text-xs font-bold"></div>
+                <div class="bg-well p-3 mx-1 mb-3">
-                </div>
+                    <h3 class="font-bold mb-1">Identity</h3>
-                <div class="mb-4">
-                    <div class="text-xs text-muted mb-1">Status</div>
-                    <div id="tx-detail-status" class="text-xs"></div>
-                </div>
-                <div class="mb-4">
-                    <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 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="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 class="text-xs text-muted mb-1">Token contract</div>
                     <div
-                        id="tx-detail-token-contract"
+                        id="tx-detail-blockie"
-                        class="text-xs break-all"
+                        class="flex justify-center mt-1 mb-3"
                     ></div>
-                </div>
+                    <div class="mb-2">
-                <div id="tx-detail-calldata-section" class="mb-4 hidden">
+                        <div class="text-xs text-muted mb-1">
-                    <div
+                            Transaction hash
-                        id="tx-detail-calldata-well"
+                        </div>
-                        class="mb-3 border border-border border-dashed p-2"
-                    >
-                        <div class="text-xs text-muted mb-1">Action</div>
                         <div
-                            id="tx-detail-calldata-action"
+                            id="tx-detail-hash"
-                            class="text-xs font-bold mb-2"
+                            class="text-xs break-all"
-                        ></div>
-                        <div
-                            id="tx-detail-calldata-details"
-                            class="text-xs"
                         ></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-2">
+                        <div class="text-xs text-muted mb-1">Status</div>
+                        <div id="tx-detail-status" class="text-xs"></div>
+                    </div>
                 </div>
-                <div class="mb-4">
+
-                    <div class="text-xs text-muted mb-1">Transaction hash</div>
+                <!-- ── Timing ── -->
-                    <div id="tx-detail-hash" class="text-xs break-all"></div>
+                <div class="bg-well p-3 mx-1 mb-3">
+                    <h3 class="font-bold mb-1">Timing</h3>
+                    <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 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>
-                <div id="tx-detail-block-section" class="mb-4 hidden">
+
-                    <div class="text-xs text-muted mb-1">Block</div>
+                <!-- ── Value ── -->
-                    <div id="tx-detail-block" class="text-xs"></div>
+                <div class="bg-well p-3 mx-1 mb-3">
-                </div>
+                    <h3 class="font-bold mb-1">Value</h3>
-                <div id="tx-detail-nonce-section" class="mb-4 hidden">
+                    <div class="mb-2">
-                    <div class="text-xs text-muted mb-1">Nonce</div>
+                        <div class="text-xs text-muted mb-1">Amount</div>
-                    <div id="tx-detail-nonce" class="text-xs"></div>
+                        <div id="tx-detail-value" class="text-xs"></div>
-                </div>
+                    </div>
-                <div id="tx-detail-fee-section" class="mb-4 hidden">
+                    <div class="mb-2 hidden">
-                    <div class="text-xs text-muted mb-1">Transaction fee</div>
+                        <div class="text-xs text-muted mb-1">
-                    <div id="tx-detail-fee" class="text-xs"></div>
+                            Native quantity
-                </div>
+                        </div>
-                <div id="tx-detail-gasprice-section" class="mb-4 hidden">
+                        <div id="tx-detail-native" class="text-xs"></div>
-                    <div class="text-xs text-muted mb-1">Gas price</div>
+                    </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"
+                        id="tx-detail-token-contract-section"
-                        class="text-xs break-all font-mono border border-border border-dashed p-2"
+                        class="mb-2 hidden"
-                    ></div>
+                    >
+                        <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 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>
+
+                <!-- ── Decoded details ── -->
+                <div id="tx-detail-calldata-section" class="hidden">
+                    <div class="bg-well p-3 mx-1 mb-3">
+                        <h3 class="font-bold mb-1">Decoded Details</h3>
+                        <div id="tx-detail-calldata-well" class="mb-2">
+                            <div class="text-xs text-muted mb-1">Action</div>
+                            <div
+                                id="tx-detail-calldata-action"
+                                class="text-xs font-bold mb-2"
+                            ></div>
+                            <div
+                                id="tx-detail-calldata-details"
+                                class="text-xs"
+                            ></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- ── Network details ── -->
+                <div id="tx-detail-network-section" class="hidden">
+                    <div class="bg-well p-3 mx-1 mb-3">
+                        <h3 class="font-bold mb-1">Network Details</h3>
+                        <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>
+
+                <!-- ── Raw data ── -->
+                <div id="tx-detail-rawdata-section" class="hidden">
+                    <div class="bg-well p-3 mx-1 mb-3">
+                        <h3 class="font-bold mb-1">Raw Data</h3>
+                        <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>
             </div>
 

src/popup/views/transactionDetail.js

@@ -130,6 +130,19 @@ function render() {
     if (!tx) return;
     $("tx-detail-hash").innerHTML = txHashHtml(tx.hash);
 
+    // Blockie identicon for the transaction hash
+    const blockieEl = $("tx-detail-blockie");
+    if (blockieEl) {
+        blockieEl.innerHTML = "";
+        const img = document.createElement("img");
+        img.src = makeBlockie(tx.hash);
+        img.width = 48;
+        img.height = 48;
+        img.style.imageRendering = "pixelated";
+        img.style.borderRadius = "50%";
+        blockieEl.appendChild(img);
+    }
+
     const fromTitle = addressTitle(tx.from, state.wallets);
     const toTitle = addressTitle(tx.to, state.wallets);
     $("tx-detail-from").innerHTML = txAddressHtml(
@@ -197,6 +210,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 +299,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",