feat: reorganize transaction detail view layout #132

clawbot · 2026-03-01T16:24:02+01:00

clawbot commented

2026-03-01 16:24:02 +01:00

Summary

Reorganizes the transaction detail view for better visual hierarchy and logical grouping, per #131.

Changes

Transaction hash (txid) moved to first position after the title heading — the most important identifier is now immediately visible
Fields grouped into logical sections with subtle border dividers:
- Identity: hash, type, status, time
- Value: amount, native quantity, token contract
- Parties: from, to
- Protocol: calldata/action (contract interaction details)
- On-chain: block, nonce, fee, gas price, gas used
- Raw data: raw input hex (last, for deep inspection)
Visual grouping via tx-detail-group CSS class that adds a light bottom border between sections
On-chain details group wrapper only shown when data loads from Blockscout API

All existing functionality (copy-to-clipboard, Etherscan links, dynamic show/hide) is preserved.

closes #131

## Summary Reorganizes the transaction detail view for better visual hierarchy and logical grouping, per #131. ### Changes 1. **Transaction hash (txid) moved to first position** after the title heading — the most important identifier is now immediately visible 2. **Fields grouped into logical sections** with subtle border dividers: - **Identity**: hash, type, status, time - **Value**: amount, native quantity, token contract - **Parties**: from, to - **Protocol**: calldata/action (contract interaction details) - **On-chain**: block, nonce, fee, gas price, gas used - **Raw data**: raw input hex (last, for deep inspection) 3. **Visual grouping** via `tx-detail-group` CSS class that adds a light bottom border between sections 4. On-chain details group wrapper only shown when data loads from Blockscout API All existing functionality (copy-to-clipboard, Etherscan links, dynamic show/hide) is preserved. closes #131

clawbot added 1 commit 2026-03-01 16:24:02 +01:00

feat: reorganize transaction detail view layout

check / check (push) Successful in 22s

Details

e13af842df

- 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

clawbot added the

needs-review

label 2026-03-01 16:24:16 +01:00

clawbot reviewed 2026-03-01 16:25:26 +01:00

clawbot left a comment

Review: AutistMask#132 — ✅ Approved

Summary: Clean reorganization of the transaction detail view into logical groups (Identity, Value, Parties, Protocol, On-chain details, Raw data) with a new .tx-detail-group CSS class for visual separation.

Checked

Element IDs preserved: All id attributes (tx-detail-hash, tx-detail-type, tx-detail-status, etc.) are unchanged. No JS references break.
parentElement patterns still valid: tx-detail-native uses parentElement.classList to toggle its immediate wrapper — the wrapper div structure is preserved, so this works correctly.
On-chain group visibility: New tx-detail-onchain-group wrapper starts hidden and is shown via populateOnChainDetails() only when child sections become visible. Logic is correct.
Hidden sections: tx-detail-type-section, tx-detail-token-contract-section, tx-detail-calldata-section, tx-detail-rawdata-section all retain their hidden class and toggling behavior.
CSS: .tx-detail-group uses var(--color-border-light) which is defined in both light and dark themes. Follows project conventions.
Spacing: Switched from mb-4 to mb-3/mb-1 within groups for tighter internal spacing — sensible.
Docker build: Passes (make check + make build green).

No issues found. LGTM.

## Review: AutistMask#132 — ✅ Approved **Summary:** Clean reorganization of the transaction detail view into logical groups (Identity, Value, Parties, Protocol, On-chain details, Raw data) with a new `.tx-detail-group` CSS class for visual separation. ### Checked - **Element IDs preserved:** All `id` attributes (`tx-detail-hash`, `tx-detail-type`, `tx-detail-status`, etc.) are unchanged. No JS references break. - **`parentElement` patterns still valid:** `tx-detail-native` uses `parentElement.classList` to toggle its immediate wrapper — the wrapper div structure is preserved, so this works correctly. - **On-chain group visibility:** New `tx-detail-onchain-group` wrapper starts `hidden` and is shown via `populateOnChainDetails()` only when child sections become visible. Logic is correct. - **Hidden sections:** `tx-detail-type-section`, `tx-detail-token-contract-section`, `tx-detail-calldata-section`, `tx-detail-rawdata-section` all retain their `hidden` class and toggling behavior. - **CSS:** `.tx-detail-group` uses `var(--color-border-light)` which is defined in both light and dark themes. Follows project conventions. - **Spacing:** Switched from `mb-4` to `mb-3`/`mb-1` within groups for tighter internal spacing — sensible. - **Docker build:** Passes (`make check` + `make build` green). No issues found. LGTM.

clawbot closed this pull request

2026-03-01 16:25:30 +01:00

clawbot added the

merge-ready

label 2026-03-01 16:25:33 +01:00

clawbot commented

2026-03-01 16:25:35 +01:00

Closing as duplicate — PR #133 covers the same issue #131 with the proper bot label.

clawbot removed the

needs-review

label 2026-03-01 16:25:43 +01:00

check / check (push) Successful in 22s