Skip to content

feat(design): on-chain status badge variants — pending, retrying, confirmed (#478) - #565

Open
laurentketterle-hub wants to merge 4 commits into
RevoraOrg:masterfrom
laurentketterle-hub:feat/onchain-status-badge-variants
Open

feat(design): on-chain status badge variants — pending, retrying, confirmed (#478)#565
laurentketterle-hub wants to merge 4 commits into
RevoraOrg:masterfrom
laurentketterle-hub:feat/onchain-status-badge-variants

Conversation

@laurentketterle-hub

Copy link
Copy Markdown
Contributor

Design: On-Chain Status Badge Variants

Closes #478

Comprehensive UI/UX design for 3 on-chain status badge variants.

Deliverable

designs/onchain-status-badge-variants/DESIGN.md — 8 sections including badge specs, sizes, CSS guide, component API, and testing checklist.

Badge Variants

Variant Color Animation Sub-states
Pending Amber Pulsing dot submitted, replacing, speed_up
Retrying Blue Rotating arrows attempt_1/2/max, manual
Confirmed Green Pop-in partial, enough, finalized, reverted

Highlights

  • 3 sizes (sm/md/lg) for different contexts
  • Combined badge + progress bar for Ledger
  • Ready-to-use CSS implementation guide
  • TypeScript Component API
  • respects prefers-reduced-motion

🔄 Stellar Wave 7th Wave

… and reverted variant for RevoraOrg#478

- Add subStatus prop with pending (submitted/speed_up/replacing), retrying (attempt_N/manual), confirmed (partial/enough/finalized/reverted)
- Add retryAttempt/maxRetries props with label + aria-label
- Add txHash with truncated display, copy-to-clipboard, and block explorer link
- Add progressBar mode replacing counter with animated progress track
- Add reverted variant with red styling for block reorgs
- Add onClick handler for navigation
- Add comprehensive tests: 6 subStatus, 3 retry, 5 txHash, 1 onClick, 2 progressBar
- Backward-compatible: all existing props and tests unchanged
…raOrg#478

- Guard navigator.clipboard?.writeText with jsdom fallback
- Fix truncated hash assertions to match actual slice boundaries
- 43/43 tests passing
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.

[UI/UX Design] Design On-Chain Status badge variants for pending, retrying, and confirmed states

1 participant