sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

reorder transaction detail view: txid first, logical grouping with separators
All checks were successful
check / check (push) Successful in 22s
Details

Browse Source 
Reorganize the transaction detail view into logical blocks separated by
thin horizontal rules:

- Identity: transaction hash (first!), type, status
- Timing: time, block number
- Value: amount, native quantity, token contract, from, to
- Decoded details: action/protocol/steps (contract calls)
- Network details: nonce, gas price, gas used, fee
- Raw data: full calldata

Updates README screen map to reflect new field ordering and grouping.

closes #131
This commit is contained in:
user
2026-03-01 07:24:41 -08:00
parent 6aeab54e8c
commit 437b904ab6
3 changed files with 113 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/popup/index.html
View File

@@ -1064,45 +1064,66 @@
<h2 id="tx-detail-heading" class="font-bold mb-2">
Transaction
</h2>
<div id="tx-detail-type-section" class="mb-4 hidden">
<!-- ── Identity ── -->
<div class="mb-2">
<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-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-4">
<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">
<hr class="border-border my-3" />
<!-- ── Timing ── -->
<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>
<hr class="border-border my-3" />
<!-- ── Value ── -->
<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 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 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 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-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>
<!-- ── Decoded details ── -->
<div id="tx-detail-calldata-section" class="hidden">
<hr class="border-border my-3" />
<div
id="tx-detail-calldata-well"
class="mb-3 border border-border border-dashed p-2"
class="mb-2 border border-border border-dashed p-2"
>
<div class="text-xs text-muted mb-1">Action</div>
<div
@@ -1115,36 +1136,40 @@
></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>
<!-- ── Network details ── -->
<div id="tx-detail-network-section" class="hidden">
<hr class="border-border my-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 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>
</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">
<hr class="border-border my-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>