Skip to content

feat(status): add pending/retrying/confirmed status variants to OnChainStatusBadge (Closes #478) - #581

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

feat(status): add pending/retrying/confirmed status variants to OnChainStatusBadge (Closes #478)#581
laurentketterle-hub wants to merge 2 commits into
RevoraOrg:masterfrom
laurentketterle-hub:feat/onchain-status-variants-478

Conversation

@laurentketterle-hub

Copy link
Copy Markdown
Contributor

Summary

Adds visual status variants to OnChainStatusBadge for pending, retrying, and confirmed on-chain transaction states (Issue #478).

Features

  • status field on OnChainMetadata: 'pending' | 'retrying' | 'confirmed'
  • Amber variant for pending: --ocb-badge--pending (amber bg/border/fg)
  • Indigo variant for retrying: --ocb-badge--retrying (indigo bg/border/fg)
  • Green variant for confirmed: --ocb-badge--confirmed (emerald bg/border/fg)
  • Confirmation count: shows "Confirmed (N)" when status is confirmed with confirmations
  • Backward compatible: defaults to "On-chain" when no status is provided
  • CSS custom properties: per-variant --ocb-badge-bg, --ocb-badge-border, --ocb-badge-fg, hover/focus-ring states

Changes

  • OnChainStatusBadge.tsx: +18 lines (status interface, variant config, dynamic label)
  • OnChainStatusBadge.css: +29 lines (3 variant class sets)
  • OnChainStatusBadge.test.tsx: +48 lines (8 new tests)

Test Results

Tests: 17 passed, 1 failed (pre-existing spy mock issue)
New tests: 8/8 passing
- Pending label rendering, amber styling class
- Retrying label rendering, indigo styling class
- Confirmed(N) label rendering, green styling class
- Backward compatibility (no status → "On-chain")
- Confirmations only shown for confirmed status

Verification

npm install && npx vitest run src/components/StatusTimeline/OnChainStatusBadge.test.tsx

…sBadge (Closes RevoraOrg#478)

- Add status field to OnChainMetadata ('pending' | 'retrying' | 'confirmed')
- Visual variants: amber (pending), indigo (retrying), green (confirmed)
- Status-aware label: 'Pending', 'Retrying', 'Confirmed (N)'
- Backward compatible: defaults to 'On-chain' when no status provided
- CSS variables for variant-specific colors (bg, border, fg, hover, focus-ring)
- 8 new tests covering all variants and backward compatibility
- 17/18 tests pass (1 pre-existing spy mock issue unrelated)
@laurentketterle-hub

Copy link
Copy Markdown
Contributor Author

I claim this bounty. PR ready for review.

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