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

refactor: replace hr separators with light well containers in TransactionDetail
All checks were successful
check / check (push) Successful in 9s
Details

Browse Source 
Replace horizontal rules (<hr>) between TransactionDetail groups with
bg-well container divs matching the Settings view pattern. Each logical
group (Identity, Timing, Value, Decoded Details, Network Details, Raw
Data) is now wrapped in a bg-well p-3 mx-1 mb-3 container with an h3
heading, providing subtle background-based visual grouping instead of
line separators.

Conditional groups (Decoded, Network, Raw Data) retain their visibility
toggling with the bg-well wrapper inside the hidden container.

Update README TransactionDetail section to reflect light well containers.

Closes #131
This commit is contained in:
clawbot
2026-03-01 07:40:03 -08:00
parent 437b904ab6
commit a35f794c53
2 changed files with 112 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -435,7 +435,8 @@ transitions.
#### TransactionDetail
- **When**: User tapped a transaction row from AddressDetail or AddressToken.
- **Elements** (grouped into logical blocks separated by thin rules):
- **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

67
src/popup/index.html
View File

@@ -1066,22 +1066,33 @@
</h2>
<!-- ── Identity ── -->
<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>
<div id="tx-detail-hash" class="text-xs break-all"></div>
<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
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>
<hr class="border-border my-3" />
</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>
@@ -1090,20 +1101,28 @@
<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" />
</div>
<!-- ── Value ── -->
<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-2 hidden">
<div class="text-xs text-muted mb-1">Native quantity</div>
<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-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"
@@ -1111,20 +1130,22 @@
</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
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>
<!-- ── Decoded details ── -->
<div id="tx-detail-calldata-section" class="hidden">
<hr class="border-border my-3" />
<div
id="tx-detail-calldata-well"
class="mb-2 border border-border border-dashed p-2"
>
<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"
@@ -1136,15 +1157,20 @@
></div>
</div>
</div>
</div>
<!-- ── Network details ── -->
<div id="tx-detail-network-section" class="hidden">
<hr class="border-border my-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 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
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>
@@ -1159,10 +1185,12 @@
<div id="tx-detail-fee" class="text-xs"></div>
</div>
</div>
</div>
<!-- ── Raw data ── -->
<div id="tx-detail-rawdata-section" class="hidden">
<hr class="border-border my-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="text-xs text-muted mb-1">Raw data</div>
<div
@@ -1172,6 +1200,7 @@
</div>
</div>
</div>
</div>
<!-- ============ TRANSACTION APPROVAL ============ -->
<div id="view-approve-tx" class="view hidden">