Skip to content

feat(ux): risk-tiered approval colors, hex dump + copy, deep-link Chainlist, typed timeouts#58

Merged
BitHighlander merged 2 commits intodevelopfrom
feat/dapp-ux-polish
Apr 30, 2026
Merged

feat(ux): risk-tiered approval colors, hex dump + copy, deep-link Chainlist, typed timeouts#58
BitHighlander merged 2 commits intodevelopfrom
feat/dapp-ux-polish

Conversation

@BitHighlander
Copy link
Copy Markdown
Collaborator

Summary

UX polish on the approval surfaces shipped in #57.

  • Risk-tiered colors in the Solana sign-method card. signMessage / signOffchainMessage are blue (read-only, no funds at risk). signTransaction is orange (you sign; the dApp broadcasts). signAndSendTransaction is red with a warning icon (signs and broadcasts immediately — irreversible).
  • User-facing copy for off-chain messages — replaces "the signature is over a Solana-defined wrapper, not the bare bytes" with "Some apps require this format for off-chain logins. Verify the message text matches what you expect."
  • Chainlist deep-link by chainId — chainlist.org/?search=56 lands on BSC's row instead of dumping the user on the homepage.
  • Known chain names on the not-enabled card — shows "BNB Smart Chain" above "0x38 (56)" when the chain is in KNOWN_EVM_CHAINS. Stranger chainIds still fall back to mono hex.
  • Hex dump formatting — non-printable message bytes now render as 8-byte chunks with newlines every 32 bytes, matching xxd / hexdump -C conventions instead of one unbroken hex string.
  • Copy-to-clipboard icon next to "Message:" with a 1.5s green checkmark on success. Lets SIWS users paste the message into a verifier.
  • Typed timeout error — new createTimeoutError helper sets kind: 'timeout' on the thrown error; methods.ts forwards it on transaction_error; Transaction.tsx keys off errorKind === 'timeout' instead of regex-matching the message string. Regex retained as a legacy fallback. Solana, TON, and Tron timeout sites all converted (~10 call sites).
  • Better timeout copy — "Reject the request in the dApp, then try again." (Old copy didn't tell the user what action to take.)
  • Sign-message message box max-height bumped 240→360px for typical SIWS messages.

Files

  • chrome-extension/src/background/utils.tsProviderErrorKind, createTimeoutError
  • chrome-extension/src/background/methods.ts — forward kind on transaction_error
  • chrome-extension/src/background/chains/{solana,ton,tron}Handler.ts — use createTimeoutError at all 9 timeout throw sites
  • pages/side-panel/src/approval/Transaction.tsxerrorKind state, kind-based timeout detection, clearer copy
  • pages/side-panel/src/approval/ChainNotEnabledCard.tsx — known-name lookup, deep-link Chainlist
  • pages/side-panel/src/approval/other/RequestMethodCard.tsx — risk-tiered colors + revised copy
  • pages/side-panel/src/approval/other/RequestDetailsCard.tsx — hex dump formatting, copy button, larger box

Test plan

  • dApp signMessage from a Solana site (e.g. SIWS login) — card is blue, message readable, copy button works (icon turns green for ~1.5s)
  • dApp signTransaction from a Solana site — card is orange
  • dApp signAndSendTransaction — card is red with warning icon
  • Trigger a sign-message timeout (decline on device for >5min) — yellow "Took too long" card appears with "Reject the request in the dApp, then try again."
  • Switch to a chain Pioneer doesn't know (e.g. invented chainId 0xfffffe) — chain-not-enabled card shows the chainId; Chainlist link opens chainlist.org/?search=<decimal>
  • Switch to a chain in KNOWN_EVM_CHAINS but not yet provisioned — card shows "BNB Smart Chain" above the hex/decimal pair
  • Sign a message that decodes to non-UTF-8 bytes — fallback renders as a readable hex dump (8 bytes per chunk, newlines every 32)
  • Existing BSC switch flow from feat: Pioneer-sourced EVM chain registry + Solana sign-message UX #57 still works (no regression on the typed-timeout refactor)

🤖 Generated with Claude Code

BitHighlander and others added 2 commits April 30, 2026 15:07
…inlist, typed timeouts

- RequestMethodCard: color tiers encode risk — blue for read-only signMessage/signOffchainMessage, orange for signTransaction (signs, dApp broadcasts), red+warning icon for signAndSendTransaction (signs and broadcasts; irreversible).
- Off-chain message copy rewritten from dev-speak ('signature is over a Solana-defined wrapper') to user-facing guidance.
- ChainNotEnabledCard now shows known chain names (BNB Smart Chain, Polygon, etc.) above the hex/decimal pair, sourced from KNOWN_EVM_CHAINS. Chainlist link deep-links to /?search=<chainId> so the user lands on the right row.
- RequestDetailsCard: hex fallback formatted as a real hex dump (8 bytes per chunk, newline every 32) instead of one unbroken string. Copy-to-clipboard icon next to the message (CopyIcon → CheckIcon for 1.5s on success). Max-height bumped 240→360px for typical SIWS messages.
- New createTimeoutError helper in utils.ts; Solana/TON/Tron timeout sites use it. methods.ts forwards `kind` on the transaction_error message. Transaction.tsx prefers `errorKind === 'timeout'` over the legacy regex (regex retained as fallback for older error sources). Timeout copy clarifies the next step ('Reject the request in the dApp, then try again.').

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The first PR pass added createTimeoutError calls in four solanaHandler timeout paths but never updated the import line — the linter retouched the file before that edit landed and it got silently dropped. ReferenceError on every Solana timeout, type-check failures at lines 354/408/469/511.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@BitHighlander BitHighlander merged commit b79e889 into develop Apr 30, 2026
3 of 4 checks passed
@BitHighlander BitHighlander deleted the feat/dapp-ux-polish branch April 30, 2026 20:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant