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
+    - **Identity block**:
+        - Blockie identicon (48px, centered, derived from transaction hash)
+        - 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
-    - Status: "Success" or "Failed"
+        - From: blockie + color dot + full address (tap to copy) + etherscan
-    - Time: ISO datetime + relative age in parentheses
+          link; ENS name if available
-    - Amount: value + symbol (bold)
+        - To: blockie + color dot + full address (tap to copy) + etherscan link;
-    - From: blockie + color dot + full address (tap to copy) + etherscan link
+          ENS name if available
-        - ENS name if available
+    - **Decoded details** (shown for contract calls):
-    - To: blockie + color dot + full address (tap to copy) + etherscan link
+        - Action name, decoded parameters, token details, swap steps
-        - ENS name if available
+    - **Network details** (shown when on-chain data is 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)
+        - 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,46 +1064,92 @@
                 <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">
+                    <h3 class="font-bold mb-1">Identity</h3>
+                    <div
+                        id="tx-detail-blockie"
+                        class="flex justify-center mt-1 mb-3"
+                    ></div>
+                    <div class="mb-2">
+                        <div class="text-xs text-muted mb-1">
+                            Transaction hash
                         </div>
-                <div class="mb-4">
+                        <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-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">
+                </div>
+
+                <!-- ── Timing ── -->
+                <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 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>
+                </div>
+
+                <!-- ── Value ── -->
+                <div class="bg-well p-3 mx-1 mb-3">
+                    <h3 class="font-bold mb-1">Value</h3>
+                    <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 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
-                    <div class="text-xs text-muted mb-1">From</div>
+                        id="tx-detail-token-contract-section"
-                    <div id="tx-detail-from" class="text-xs break-all"></div>
+                        class="mb-2 hidden"
+                    >
+                        <div class="text-xs text-muted mb-1">
+                            Token contract
                         </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"
                             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-calldata-well"
+                            id="tx-detail-from"
-                        class="mb-3 border border-border border-dashed p-2"
+                            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"
@@ -1115,31 +1161,41 @@
                             ></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 id="tx-detail-block-section" class="mb-4 hidden">
+
-                    <div class="text-xs text-muted mb-1">Block</div>
+                <!-- ── Network details ── -->
-                    <div id="tx-detail-block" class="text-xs"></div>
+                <div id="tx-detail-network-section" class="hidden">
-                </div>
+                    <div class="bg-well p-3 mx-1 mb-3">
-                <div id="tx-detail-nonce-section" class="mb-4 hidden">
+                        <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-fee-section" class="mb-4 hidden">
+                        <div
-                    <div class="text-xs text-muted mb-1">Transaction fee</div>
+                            id="tx-detail-gasprice-section"
-                    <div id="tx-detail-fee" class="text-xs"></div>
+                            class="mb-2 hidden"
-                </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 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-rawdata-section" class="mb-4 hidden">
+                        <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"
@@ -1147,6 +1203,8 @@
                             ></div>
                         </div>
                     </div>
+                </div>
+            </div>
 
             <!-- ============ TRANSACTION APPROVAL ============ -->
             <div id="view-approve-tx" class="view hidden">

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",