on 'transaction' view, several UI policies are violated: #59

New Issue

sneak · 2026-02-28T18:10:47+01:00

sneak commented

2026-02-28 18:10:47 +01:00

No description provided.

sneak commented

2026-02-28 18:15:31 +01:00

Action
Swap USDT → ETH
Swap via Uniswap Universal Router
Protocol
Uniswap Universal Router
Token In
USDT (0xdAC17F958D2ee523a2206206994597C13D831ec7)
Amount
Unlimited
Token Out
ETH
Steps
Permit2 Permit → V4 Swap
Deadline
2026-02-27 08:25:51

"Uniswap Universal Router" under protocol is underlined and appears clickable, but is not. this should probably have an etherscan link after it.
the "USDT " appears clickable but isn't, and the contract address violates standard address display guidelines (which means its missing its etherscan link), and the symbol is interposed between the color dot and the contract address (violation).
the raw data should always be listed last (not a policy violation, just common sense, as it's huge and pushes the (actually useful) txid off the screen)

``` Action Swap USDT → ETH Swap via Uniswap Universal Router Protocol Uniswap Universal Router Token In USDT (0xdAC17F958D2ee523a2206206994597C13D831ec7) Amount Unlimited Token Out ETH Steps Permit2 Permit → V4 Swap Deadline 2026-02-27 08:25:51 ``` 1. "Uniswap Universal Router" under protocol is underlined and appears clickable, but is not. this should probably have an etherscan link after it. 2. the "USDT <contract address>" appears clickable but isn't, and the contract address violates standard address display guidelines (which means its missing its etherscan link), and the symbol is interposed between the color dot and the contract address (violation). 3. the raw data should always be listed last (not a policy violation, just common sense, as it's huge and pushes the (actually useful) txid off the screen)

clawbot was assigned by sneak

2026-02-28 18:15:36 +01:00

clawbot referenced this issue from a commit

2026-02-28 19:27:21 +01:00

fix: enforce UI policies on transaction detail view

clawbot referenced a pull request that will close this issue

2026-02-28 19:27:29 +01:00

fix: enforce UI policies on transaction detail view (closes #59) #62

clawbot commented

2026-02-28 19:27:45 +01:00

Audited the transaction detail view (src/popup/views/transactionDetail.js) against all README UI policies. Found and fixed two violations:

1. Clickable affordance missing on Etherscan links

Policy: "Buttons use a visible border, padding, and a hover state (invert to white-on-black)."
Violation: All Etherscan external link <a> tags (on From address, To address, and transaction hash) used only inline-flex items-center with no border or hover state — just a bare SVG icon.
Fix: Extracted etherscanLinkHtml() helper that applies border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer to all Etherscan links.

2. Address display incomplete when ENS name is present

Policy: "From: blockie + color dot + full address (tap to copy) + etherscan link — ENS name if available"
Violation: When an ENS name was resolved, the full address line was rendered without its color dot and without an Etherscan link. Only the ENS name line had the dot and link.
Fix: Both lines now show the color dot; the Etherscan link is on the full address line (the authoritative identifier).

Items audited and confirmed compliant:

✅ Full addresses shown (never truncated) — critical view policy
✅ Blockie identicons on From and To
✅ Color dots on addresses
✅ ISO datetime + relative age in parentheses
✅ Exact amount with full precision (transaction detail exception)
✅ Native quantity (wei) shown and copyable
✅ Transaction hash shown in full, copyable, with Etherscan link
✅ Copy-on-click for addresses, ENS names, amounts, hash
✅ Back button with proper border + hover styling
✅ No layout shift (hidden sections use hidden class)

Fix submitted in PR #62.

Audited the transaction detail view (`src/popup/views/transactionDetail.js`) against all README UI policies. Found and fixed two violations: ### 1. Clickable affordance missing on Etherscan links **Policy:** "Buttons use a visible border, padding, and a hover state (invert to white-on-black)." **Violation:** All Etherscan external link `<a>` tags (on From address, To address, and transaction hash) used only `inline-flex items-center` with no border or hover state — just a bare SVG icon. **Fix:** Extracted `etherscanLinkHtml()` helper that applies `border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer` to all Etherscan links. ### 2. Address display incomplete when ENS name is present **Policy:** "From: blockie + color dot + full address (tap to copy) + etherscan link — ENS name if available" **Violation:** When an ENS name was resolved, the full address line was rendered without its color dot and without an Etherscan link. Only the ENS name line had the dot and link. **Fix:** Both lines now show the color dot; the Etherscan link is on the full address line (the authoritative identifier). ### Items audited and confirmed compliant: - ✅ Full addresses shown (never truncated) — critical view policy - ✅ Blockie identicons on From and To - ✅ Color dots on addresses - ✅ ISO datetime + relative age in parentheses - ✅ Exact amount with full precision (transaction detail exception) - ✅ Native quantity (wei) shown and copyable - ✅ Transaction hash shown in full, copyable, with Etherscan link - ✅ Copy-on-click for addresses, ENS names, amounts, hash - ✅ Back button with proper border + hover styling - ✅ No layout shift (hidden sections use `hidden` class) Fix submitted in PR #62.

clawbot referenced this issue

2026-02-28 19:35:26 +01:00

fix: enforce UI policies on transaction detail view (closes #59) #62

clawbot referenced this issue from a commit

2026-02-28 19:41:17 +01:00

fix: address all 3 violations from #59

clawbot referenced this issue

2026-02-28 19:41:35 +01:00

fix: enforce UI policies on transaction detail view (closes #59) #62

clawbot referenced this issue

2026-02-28 19:44:18 +01:00

fix: enforce UI policies on transaction detail view (closes #59) #62