refactor: move From/To with blockies into Identity block

Move From and To address fields (which include blockie identicons) from the Value block into the Identity block, per review feedback. From/To are identity information, not value information. The Value block now contains only Amount, Native quantity, and Token contract. README TransactionDetail section updated to match.
refactor: replace hr separators with light well containers in TransactionDetail
2026-03-01 07:47:33 -08:00 · 2026-03-01 07:40:03 -08:00 · 2026-03-01 07:28:15 -08:00
4 changed files with 104 additions and 99 deletions
--- a/README.md
+++ b/README.md
@@ -435,25 +435,35 @@ 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**:
+        - 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
+    - **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"
-    - 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
+    - **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)
-    - 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**

--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -1066,8 +1066,9 @@
                </h2>

                <!-- ── Identity ── -->
-                <div class="tx-detail-group mb-1">
-                    <div class="mb-3">
+                <div class="bg-well p-3 mx-1 mb-3">
+                    <h3 class="font-bold mb-1">Identity</h3>
+                    <div class="mb-2">
                        <div class="text-xs text-muted mb-1">
                            Transaction hash
                        </div>
@@ -1076,30 +1077,51 @@
                            class="text-xs break-all"
                        ></div>
                    </div>
-                    <div id="tx-detail-type-section" class="mb-3 hidden">
+                    <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-3">
+                    <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-1">
+                    <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">
+                    <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>

                <!-- ── Value ── -->
-                <div class="tx-detail-group mb-1">
-                    <div class="mb-3">
+                <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-3 hidden">
+                    <div class="mb-2 hidden">
                        <div class="text-xs text-muted mb-1">
                            Native quantity
                        </div>
@@ -1107,7 +1129,7 @@
                    </div>
                    <div
                        id="tx-detail-token-contract-section"
-                        class="mb-1 hidden"
+                        class="mb-2 hidden"
                    >
                        <div class="text-xs text-muted mb-1">
                            Token contract
@@ -1119,28 +1141,11 @@
                    </div>
                </div>

-                <!-- ── 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"
-                        >
+                <!-- ── 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"
@@ -1154,38 +1159,39 @@
                    </div>
                </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">
+                <!-- ── 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-fee-section" class="mb-3 hidden">
+                        <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 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="mb-4 hidden">
-                    <div class="tx-detail-group">
+                <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"
@@ -1194,6 +1200,7 @@
                        </div>
                    </div>
                </div>
+            </div>

            <!-- ============ TRANSACTION APPROVAL ============ -->
            <div id="view-approve-tx" class="view hidden">
--- a/src/popup/styles/main.css
+++ b/src/popup/styles/main.css
@@ -44,11 +44,3 @@ 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;
-}
--- a/src/popup/views/transactionDetail.js
+++ b/src/popup/views/transactionDetail.js
@@ -190,15 +190,14 @@ function render() {
    const rawDataSection = $("tx-detail-rawdata-section");
    if (rawDataSection) rawDataSection.classList.add("hidden");

-    // Hide on-chain detail sections (and their group wrapper) until populated
-    const onchainGroup = $("tx-detail-onchain-group");
-    if (onchainGroup) onchainGroup.classList.add("hidden");
+    // Hide on-chain detail sections until populated
    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");
@@ -287,11 +286,10 @@ function populateOnChainDetails(txData) {
        );
    }

-    // Show the on-chain details group if any child section is visible
-    const onchainGroup = $("tx-detail-onchain-group");
-    if (onchainGroup) {
+    // Show the network details wrapper if any child section is visible
+    const networkWrapper = $("tx-detail-network-section");
+    if (networkWrapper) {
        const hasVisible = [
-            "tx-detail-block-section",
            "tx-detail-nonce-section",
            "tx-detail-fee-section",
            "tx-detail-gasprice-section",
@@ -300,9 +298,7 @@ function populateOnChainDetails(txData) {
            const el = $(id);
            return el && !el.classList.contains("hidden");
        });
-        if (hasVisible) {
-            onchainGroup.classList.remove("hidden");
-        }
+        if (hasVisible) networkWrapper.classList.remove("hidden");
    }

    // Bind copy handlers for newly added elements