Reorder transaction detail view: txid first, logical grouping (#133)
All checks were successful
check / check (push) Successful in 9s
All checks were successful
check / check (push) Successful in 9s
Reorganizes the transaction detail view into logical blocks separated by thin horizontal rules for visual clarity. **Identity block**: Transaction hash (first!), Type, Status **Timing block**: Time, Block number **Value block**: Amount, Native quantity, Token contract, From, To **Decoded details**: Action/protocol/steps (for contract calls) **Network details**: Nonce, Gas price, Gas used, Transaction fee **Raw data**: Full calldata README TransactionDetail screen map updated to reflect the new ordering and grouping. closes #131 Co-authored-by: user <user@Mac.lan guest wan> Co-authored-by: clawbot <clawbot@git.eeqj.de> Co-authored-by: clawbot <clawbot@noreply.git.eeqj.de> Reviewed-on: #133 Co-authored-by: clawbot <clawbot@noreply.example.org> Co-committed-by: clawbot <clawbot@noreply.example.org>
This commit is contained in:
parent
6aeab54e8c
commit
3bf60ff162
32
README.md
32
README.md
@ -435,25 +435,29 @@ transitions.
|
||||
#### TransactionDetail
|
||||
|
||||
- **When**: User tapped a transaction row from AddressDetail or AddressToken.
|
||||
- **Elements**:
|
||||
- **Elements** (grouped into logical blocks using light well containers; field
|
||||
labels are self-explanatory so groups have no headings):
|
||||
- "Transaction" heading, "Back" button
|
||||
- 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
|
||||
- Time: ISO datetime + relative age in parentheses
|
||||
- Block: block number (tap to copy) + etherscan block link
|
||||
- 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
|
||||
- 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)
|
||||
- Decoded details (shown for contract calls): action name, decoded
|
||||
parameters, token details, swap steps
|
||||
- Network details (shown when on-chain data is available): nonce, gas price,
|
||||
gas used, transaction fee (all tap to copy)
|
||||
- Raw data (shown when calldata is present): full calldata in monospace
|
||||
dashed border
|
||||
- **Transitions**:
|
||||
- "Back" → **AddressToken** (if `selectedToken` set) or **AddressDetail**
|
||||
|
||||
|
||||
@ -1064,87 +1064,135 @@
|
||||
<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>
|
||||
<div id="tx-detail-type" class="text-xs font-bold"></div>
|
||||
</div>
|
||||
<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"
|
||||
class="text-xs break-all"
|
||||
></div>
|
||||
</div>
|
||||
<div id="tx-detail-calldata-section" class="mb-4 hidden">
|
||||
<div
|
||||
id="tx-detail-calldata-well"
|
||||
class="mb-3 border border-border border-dashed p-2"
|
||||
>
|
||||
<div class="text-xs text-muted mb-1">Action</div>
|
||||
|
||||
<!-- ── Identity ── -->
|
||||
<div class="bg-well p-3 mx-1 mb-3">
|
||||
<div class="mb-2">
|
||||
<div class="text-xs text-muted mb-1">
|
||||
Transaction hash
|
||||
</div>
|
||||
<div
|
||||
id="tx-detail-calldata-action"
|
||||
class="text-xs font-bold mb-2"
|
||||
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-calldata-details"
|
||||
class="text-xs"
|
||||
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-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">
|
||||
<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="bg-well p-3 mx-1 mb-3">
|
||||
<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-2 hidden">
|
||||
<div class="text-xs text-muted mb-1">
|
||||
Native quantity
|
||||
</div>
|
||||
<div id="tx-detail-native" class="text-xs"></div>
|
||||
</div>
|
||||
<div
|
||||
id="tx-detail-token-contract-section"
|
||||
class="mb-2 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>
|
||||
<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>
|
||||
|
||||
<!-- ── Decoded details ── -->
|
||||
<div id="tx-detail-calldata-section" class="hidden">
|
||||
<div class="bg-well p-3 mx-1 mb-3">
|
||||
<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>
|
||||
<div id="tx-detail-block-section" class="mb-4 hidden">
|
||||
<div class="text-xs text-muted mb-1">Block</div>
|
||||
<div id="tx-detail-block" class="text-xs"></div>
|
||||
|
||||
<!-- ── Network details ── -->
|
||||
<div id="tx-detail-network-section" class="hidden">
|
||||
<div class="bg-well p-3 mx-1 mb-3">
|
||||
<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>
|
||||
<div id="tx-detail-nonce-section" class="mb-4 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 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-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 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"
|
||||
class="text-xs break-all font-mono border border-border border-dashed p-2"
|
||||
></div>
|
||||
|
||||
<!-- ── Raw data ── -->
|
||||
<div id="tx-detail-rawdata-section" class="hidden">
|
||||
<div class="bg-well p-3 mx-1 mb-3">
|
||||
<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>
|
||||
|
||||
|
||||
@ -197,6 +197,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 +286,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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user