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

Compare commits

base: sneak:c1e48f3825fc01257c22405bf2a17f47ec40338c
Branches Tags
sneak:main sneak:feat/issue-144-settings-about sneak:feat/issue-131-transaction-view-layout sneak:fix/116-timestamps-include-timezone sneak:feature/expanded-warnings sneak:fix/cross-wallet-duplicate-detection sneak:feature/copy-flash-feedback sneak:feature/issue-82-new-address-warning sneak:feature/82-warn-new-address sneak:issue-99-block-number-external-link sneak:issue-99-block-number-styling sneak:feature/82-zero-history-warning sneak:fix/issue-99-block-number-link-copy sneak:fix/99-block-number-clickable sneak:fix/87-consistent-error-display-v2 sneak:fix/87-consistent-error-display sneak:fix/consistent-error-display sneak:fix/77-confirm-tx-persist sneak:fix/issue-72-address-token-tx-history sneak:fix/70-confirm-tx-contract-display sneak:fix/issue-58-receive-address-consistency sneak:fix/59-transaction-view-ui-policies sneak:fix/55-swap-show-own-address sneak:feature/show-private-key sneak:feat/message-signing
sneak:v0.1.0
..
compare: sneak:feat/issue-131-transaction-view-layout
Branches Tags
sneak:feat/issue-144-settings-about sneak:main sneak:feat/issue-131-transaction-view-layout sneak:fix/116-timestamps-include-timezone sneak:feature/expanded-warnings sneak:fix/cross-wallet-duplicate-detection sneak:feature/copy-flash-feedback sneak:feature/issue-82-new-address-warning sneak:feature/82-warn-new-address sneak:issue-99-block-number-external-link sneak:issue-99-block-number-styling sneak:feature/82-zero-history-warning sneak:fix/issue-99-block-number-link-copy sneak:fix/99-block-number-clickable sneak:fix/87-consistent-error-display-v2 sneak:fix/87-consistent-error-display sneak:fix/consistent-error-display sneak:fix/77-confirm-tx-persist sneak:fix/issue-72-address-token-tx-history sneak:fix/70-confirm-tx-contract-display sneak:fix/issue-58-receive-address-consistency sneak:fix/59-transaction-view-ui-policies sneak:fix/55-swap-show-own-address sneak:feature/show-private-key sneak:feat/message-signing
sneak:v0.1.0

1 Commits
c1e48f3825 ... feat/issue

Author SHA1 Message Date
user
e13af842df feat: reorganize transaction detail view layout
All checks were successful
check / check (push) Successful in 22s
Details 
- 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
 2026-03-01 07:23:46 -08:00
4 changed files with 90 additions and 113 deletions
Expand all files Collapse all files

47
README.md
View File

@@ -435,36 +435,25 @@ 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**:
matching the Settings view pattern):
- "Transaction" heading, "Back" button - "Transaction" heading, "Back" button
- **Identity block**: - Type: transaction classification — one of: Native ETH Transfer, ERC-20
- Blockie identicon (48px, centered, derived from transaction hash) Token Transfer, Swap, Token Approval, Contract Call, Contract Creation
- Transaction hash: full hash (tap to copy) + etherscan link - Token contract: shown for ERC-20 transfers — color dot + full contract
- Type: transaction classification — one of: Native ETH Transfer, ERC-20 address (tap to copy) + etherscan token link
Token Transfer, Swap, Token Approval, Contract Call, Contract Creation - Status: "Success" or "Failed"
- Status: "Success" or "Failed" - Time: ISO datetime + relative age in parentheses
- **Timing block**: - Amount: value + symbol (bold)
- Time: ISO datetime + relative age in parentheses - From: blockie + color dot + full address (tap to copy) + etherscan link
- Block: block number (tap to copy) + etherscan block link - ENS name if available
- **Value block**: - To: blockie + color dot + full address (tap to copy) + etherscan link
- Amount: value + symbol (bold) - ENS name if available
- Native quantity: raw integer + unit (shown when available) - Transaction hash: full hash (tap to copy) + etherscan link
- Token contract: shown for ERC-20 transfers — color dot + full contract - Block: block number (tap to copy) + etherscan block link
address (tap to copy) + etherscan token link - Nonce: transaction nonce (tap to copy)
- From: blockie + color dot + full address (tap to copy) + etherscan - Transaction fee: ETH amount (tap to copy)
link; ENS name if available - Gas price: value in Gwei (tap to copy)
- To: blockie + color dot + full address (tap to copy) + etherscan link; - Gas used: integer (tap to copy)
ENS name if available
- **Decoded details** (shown for contract calls):
- Action name, decoded parameters, token details, swap steps
- **Network details** (shown when on-chain data is available):
- 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**

119
src/popup/index.html
View File

@@ -1066,13 +1066,8 @@
</h2> </h2>
<!-- ── Identity ── --> <!-- ── Identity ── -->
<div class="bg-well p-3 mx-1 mb-3"> <div class="tx-detail-group mb-1">
<h3 class="font-bold mb-1">Identity</h3> <div class="mb-3">
<div
id="tx-detail-blockie"
class="flex justify-center mt-1 mb-3"
></div>
<div class="mb-2">
<div class="text-xs text-muted mb-1"> <div class="text-xs text-muted mb-1">
Transaction hash Transaction hash
</div> </div>
@@ -1081,40 +1076,30 @@
class="text-xs break-all" class="text-xs break-all"
></div> ></div>
</div> </div>
<div id="tx-detail-type-section" class="mb-2 hidden"> <div id="tx-detail-type-section" class="mb-3 hidden">
<div class="text-xs text-muted mb-1">Type</div> <div class="text-xs text-muted mb-1">Type</div>
<div <div
id="tx-detail-type" id="tx-detail-type"
class="text-xs font-bold" class="text-xs font-bold"
></div> ></div>
</div> </div>
<div class="mb-2"> <div class="mb-3">
<div class="text-xs text-muted mb-1">Status</div> <div class="text-xs text-muted mb-1">Status</div>
<div id="tx-detail-status" class="text-xs"></div> <div id="tx-detail-status" class="text-xs"></div>
</div> </div>
</div> <div class="mb-1">
<!-- ── 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 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>
</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> </div>
<!-- ── Value ── --> <!-- ── Value ── -->
<div class="bg-well p-3 mx-1 mb-3"> <div class="tx-detail-group mb-1">
<h3 class="font-bold mb-1">Value</h3> <div class="mb-3">
<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>
</div> </div>
<div class="mb-2 hidden"> <div class="mb-3 hidden">
<div class="text-xs text-muted mb-1"> <div class="text-xs text-muted mb-1">
Native quantity Native quantity
</div> </div>
@@ -1122,7 +1107,7 @@
</div> </div>
<div <div
id="tx-detail-token-contract-section" id="tx-detail-token-contract-section"
class="mb-2 hidden" class="mb-1 hidden"
> >
<div class="text-xs text-muted mb-1"> <div class="text-xs text-muted mb-1">
Token contract Token contract
@@ -1132,24 +1117,30 @@
class="text-xs break-all" class="text-xs break-all"
></div> ></div>
</div> </div>
<div class="mb-2"> </div>
<!-- ── Parties ── -->
<div class="tx-detail-group mb-1">
<div class="mb-3">
<div class="text-xs text-muted mb-1">From</div> <div class="text-xs text-muted mb-1">From</div>
<div <div
id="tx-detail-from" id="tx-detail-from"
class="text-xs break-all" class="text-xs break-all"
></div> ></div>
</div> </div>
<div class="mb-2"> <div class="mb-1">
<div class="text-xs text-muted mb-1">To</div> <div class="text-xs text-muted mb-1">To</div>
<div id="tx-detail-to" class="text-xs break-all"></div> <div id="tx-detail-to" class="text-xs break-all"></div>
</div> </div>
</div> </div>
<!-- ── Decoded details ── --> <!-- ── Protocol ── -->
<div id="tx-detail-calldata-section" class="hidden"> <div id="tx-detail-calldata-section" class="mb-1 hidden">
<div class="bg-well p-3 mx-1 mb-3"> <div class="tx-detail-group mb-1">
<h3 class="font-bold mb-1">Decoded Details</h3> <div
<div id="tx-detail-calldata-well" class="mb-2"> id="tx-detail-calldata-well"
class="border border-border border-dashed p-2"
>
<div class="text-xs text-muted mb-1">Action</div> <div class="text-xs text-muted mb-1">Action</div>
<div <div
id="tx-detail-calldata-action" id="tx-detail-calldata-action"
@@ -1163,45 +1154,43 @@
</div> </div>
</div> </div>
<!-- ── Network details ── --> <!-- ── On-chain details ── -->
<div id="tx-detail-network-section" class="hidden"> <div
<div class="bg-well p-3 mx-1 mb-3"> id="tx-detail-onchain-group"
<h3 class="font-bold mb-1">Network Details</h3> class="tx-detail-group mb-1 hidden"
<div id="tx-detail-nonce-section" class="mb-2 hidden"> >
<div class="text-xs text-muted mb-1">Nonce</div> <div id="tx-detail-block-section" class="mb-3 hidden">
<div id="tx-detail-nonce" class="text-xs"></div> <div class="text-xs text-muted mb-1">Block</div>
</div> <div id="tx-detail-block" class="text-xs"></div>
<div </div>
id="tx-detail-gasprice-section" <div id="tx-detail-nonce-section" class="mb-3 hidden">
class="mb-2 hidden" <div class="text-xs text-muted mb-1">Nonce</div>
> <div id="tx-detail-nonce" class="text-xs"></div>
<div class="text-xs text-muted mb-1">Gas price</div> </div>
<div id="tx-detail-gasprice" class="text-xs"></div> <div id="tx-detail-fee-section" class="mb-3 hidden">
</div> <div class="text-xs text-muted mb-1">
<div id="tx-detail-gasused-section" class="mb-2 hidden"> Transaction fee
<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-fee" class="text-xs"></div>
</div>
<div id="tx-detail-gasprice-section" class="mb-3 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-1 hidden">
<div class="text-xs text-muted mb-1">Gas used</div>
<div id="tx-detail-gasused" class="text-xs"></div>
</div> </div>
</div> </div>
<!-- ── Raw data ── --> <!-- ── Raw data ── -->
<div id="tx-detail-rawdata-section" class="hidden"> <div id="tx-detail-rawdata-section" class="mb-4 hidden">
<div class="bg-well p-3 mx-1 mb-3"> <div class="tx-detail-group">
<h3 class="font-bold mb-1">Raw Data</h3> <div class="text-xs text-muted mb-1">Raw data</div>
<div class="mb-2"> <div
<div class="text-xs text-muted mb-1">Raw data</div> id="tx-detail-rawdata"
<div class="text-xs break-all font-mono border border-border border-dashed p-2"
id="tx-detail-rawdata" ></div>
class="text-xs break-all font-mono border border-border border-dashed p-2"
></div>
</div>
</div> </div>
</div> </div>
</div> </div>

8
src/popup/styles/main.css
View File

@@ -44,3 +44,11 @@ body {
background-color 225ms ease-out, background-color 225ms ease-out,
color 225ms ease-out; color 225ms ease-out;
} }
/* Transaction detail view — visual grouping of related fields */
.tx-detail-group {
border-bottom: 1px solid var(--color-border-light);
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
padding-top: 0.25rem;
}

29
src/popup/views/transactionDetail.js
View File

@@ -130,19 +130,6 @@ function render() {
if (!tx) return; if (!tx) return;
$("tx-detail-hash").innerHTML = txHashHtml(tx.hash); $("tx-detail-hash").innerHTML = txHashHtml(tx.hash);
// Blockie identicon for the transaction hash
const blockieEl = $("tx-detail-blockie");
if (blockieEl) {
blockieEl.innerHTML = "";
const img = document.createElement("img");
img.src = makeBlockie(tx.hash);
img.width = 48;
img.height = 48;
img.style.imageRendering = "pixelated";
img.style.borderRadius = "50%";
blockieEl.appendChild(img);
}
const fromTitle = addressTitle(tx.from, state.wallets); const fromTitle = addressTitle(tx.from, state.wallets);
const toTitle = addressTitle(tx.to, state.wallets); const toTitle = addressTitle(tx.to, state.wallets);
$("tx-detail-from").innerHTML = txAddressHtml( $("tx-detail-from").innerHTML = txAddressHtml(
@@ -203,14 +190,15 @@ function render() {
const rawDataSection = $("tx-detail-rawdata-section"); const rawDataSection = $("tx-detail-rawdata-section");
if (rawDataSection) rawDataSection.classList.add("hidden"); if (rawDataSection) rawDataSection.classList.add("hidden");
// Hide on-chain detail sections until populated // Hide on-chain detail sections (and their group wrapper) until populated
const onchainGroup = $("tx-detail-onchain-group");
if (onchainGroup) onchainGroup.classList.add("hidden");
for (const id of [ for (const id of [
"tx-detail-block-section", "tx-detail-block-section",
"tx-detail-nonce-section", "tx-detail-nonce-section",
"tx-detail-fee-section", "tx-detail-fee-section",
"tx-detail-gasprice-section", "tx-detail-gasprice-section",
"tx-detail-gasused-section", "tx-detail-gasused-section",
"tx-detail-network-section",
]) { ]) {
const el = $(id); const el = $(id);
if (el) el.classList.add("hidden"); if (el) el.classList.add("hidden");
@@ -299,10 +287,11 @@ function populateOnChainDetails(txData) {
); );
} }
// Show the network details wrapper if any child section is visible // Show the on-chain details group if any child section is visible
const networkWrapper = $("tx-detail-network-section"); const onchainGroup = $("tx-detail-onchain-group");
if (networkWrapper) { if (onchainGroup) {
const hasVisible = [ const hasVisible = [
"tx-detail-block-section",
"tx-detail-nonce-section", "tx-detail-nonce-section",
"tx-detail-fee-section", "tx-detail-fee-section",
"tx-detail-gasprice-section", "tx-detail-gasprice-section",
@@ -311,7 +300,9 @@ function populateOnChainDetails(txData) {
const el = $(id); const el = $(id);
return el && !el.classList.contains("hidden"); return el && !el.classList.contains("hidden");
}); });
if (hasVisible) networkWrapper.classList.remove("hidden"); if (hasVisible) {
onchainGroup.classList.remove("hidden");
}
} }
// Bind copy handlers for newly added elements // Bind copy handlers for newly added elements