remove well headings from TransactionDetail view
All checks were successful
check / check (push) Successful in 22s

Field labels are self-explanatory and the logical groupings from bg-well
containers work without explicit headings. Removed all <h3> headings
(Identity, Timing, Value, Decoded Details, Network Details, Raw Data)
from inside the well containers. Updated README accordingly.

Closes #131
This commit is contained in:
clawbot
2026-03-01 10:22:07 -08:00
parent c8a467c021
commit fce5ed6959
2 changed files with 22 additions and 34 deletions

View File

@@ -435,35 +435,29 @@ transitions.
#### TransactionDetail #### TransactionDetail
- **When**: User tapped a transaction row from AddressDetail or AddressToken. - **When**: User tapped a transaction row from AddressDetail or AddressToken.
- **Elements** (grouped into logical blocks using light well containers, - **Elements** (grouped into logical blocks using light well containers; field
matching the Settings view pattern): labels are self-explanatory so groups have no headings):
- "Transaction" heading, "Back" button - "Transaction" heading, "Back" button
- **Identity block**: - Transaction hash: full hash (tap to copy) + etherscan link
- Transaction hash: full hash (tap to copy) + etherscan link - Type: transaction classification — one of: Native ETH Transfer, ERC-20
- Type: transaction classification — one of: Native ETH Transfer, ERC-20 Token Transfer, Swap, Token Approval, Contract Call, Contract Creation
Token Transfer, Swap, Token Approval, Contract Call, Contract Creation - Status: "Success" or "Failed"
- Status: "Success" or "Failed" - From: blockie + color dot + full address (tap to copy) + etherscan link;
- From: blockie + color dot + full address (tap to copy) + etherscan ENS name if available
link; ENS name if available - To: blockie + color dot + full address (tap to copy) + etherscan link; ENS
- To: blockie + color dot + full address (tap to copy) + etherscan link; name if available
ENS name if available - Time: ISO datetime + relative age in parentheses
- **Timing block**: - Block: block number (tap to copy) + etherscan block link
- Time: ISO datetime + relative age in parentheses - Amount: value + symbol (bold)
- Block: block number (tap to copy) + etherscan block link - Native quantity: raw integer + unit (shown when available)
- **Value block**: - Token contract: shown for ERC-20 transfers — color dot + full contract
- Amount: value + symbol (bold) address (tap to copy) + etherscan token link
- Native quantity: raw integer + unit (shown when available) - Decoded details (shown for contract calls): action name, decoded
- Token contract: shown for ERC-20 transfers — color dot + full contract parameters, token details, swap steps
address (tap to copy) + etherscan token link - Network details (shown when on-chain data is available): nonce, gas price,
- **Decoded details** (shown for contract calls): gas used, transaction fee (all tap to copy)
- Action name, decoded parameters, token details, swap steps - Raw data (shown when calldata is present): full calldata in monospace
- **Network details** (shown when on-chain data is available): dashed border
- 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**: - **Transitions**:
- "Back" → **AddressToken** (if `selectedToken` set) or **AddressDetail** - "Back" → **AddressToken** (if `selectedToken` set) or **AddressDetail**

View File

@@ -1067,7 +1067,6 @@
<!-- ── Identity ── --> <!-- ── Identity ── -->
<div class="bg-well p-3 mx-1 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="mb-2">
<div class="text-xs text-muted mb-1"> <div class="text-xs text-muted mb-1">
Transaction hash Transaction hash
@@ -1103,7 +1102,6 @@
<!-- ── Timing ── --> <!-- ── Timing ── -->
<div class="bg-well p-3 mx-1 mb-3"> <div class="bg-well p-3 mx-1 mb-3">
<h3 class="font-bold mb-1">Timing</h3>
<div class="mb-2"> <div class="mb-2">
<div class="text-xs text-muted mb-1">Time</div> <div class="text-xs text-muted mb-1">Time</div>
<div id="tx-detail-time" class="text-xs"></div> <div id="tx-detail-time" class="text-xs"></div>
@@ -1116,7 +1114,6 @@
<!-- ── Value ── --> <!-- ── Value ── -->
<div class="bg-well p-3 mx-1 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="mb-2">
<div class="text-xs text-muted mb-1">Amount</div> <div class="text-xs text-muted mb-1">Amount</div>
<div id="tx-detail-value" class="text-xs"></div> <div id="tx-detail-value" class="text-xs"></div>
@@ -1144,7 +1141,6 @@
<!-- ── Decoded details ── --> <!-- ── Decoded details ── -->
<div id="tx-detail-calldata-section" class="hidden"> <div id="tx-detail-calldata-section" class="hidden">
<div class="bg-well p-3 mx-1 mb-3"> <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 id="tx-detail-calldata-well" class="mb-2">
<div class="text-xs text-muted mb-1">Action</div> <div class="text-xs text-muted mb-1">Action</div>
<div <div
@@ -1162,7 +1158,6 @@
<!-- ── Network details ── --> <!-- ── Network details ── -->
<div id="tx-detail-network-section" class="hidden"> <div id="tx-detail-network-section" class="hidden">
<div class="bg-well p-3 mx-1 mb-3"> <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 id="tx-detail-nonce-section" class="mb-2 hidden">
<div class="text-xs text-muted mb-1">Nonce</div> <div class="text-xs text-muted mb-1">Nonce</div>
<div id="tx-detail-nonce" class="text-xs"></div> <div id="tx-detail-nonce" class="text-xs"></div>
@@ -1190,7 +1185,6 @@
<!-- ── Raw data ── --> <!-- ── Raw data ── -->
<div id="tx-detail-rawdata-section" class="hidden"> <div id="tx-detail-rawdata-section" class="hidden">
<div class="bg-well p-3 mx-1 mb-3"> <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="mb-2">
<div class="text-xs text-muted mb-1">Raw data</div> <div class="text-xs text-muted mb-1">Raw data</div>
<div <div