feat(frontend): add animated VestingBar component (#740) - #920
Conversation
Implements a three-colour animated progress bar for stream vesting state. Changes: - Add VestingBar component (frontend/src/components/VestingBar.tsx) - Green segment: claimed tokens - Blue segment: vested but not yet claimed - Gray segment: unvested / remaining - Hover tooltip showing exact amounts per segment - Inline cliff marker (📍 pin + vertical rule) with reached/pending colouring - ARIA role="img" + aria-label on track, per-segment aria-labels, sr-only summary - CSS transitions for smooth real-time updates - Dark-mode CSS variable overrides - Optional claimedAmount prop (defaults to 0; ready for on-chain claim wiring) - Integrate VestingBar in: - StreamDetailDrawer (replaces bare progress-bar + CliffMarker) - StreamsTable (replaces bare progress-bar) - RecipientDashboard (replaces bare progress-bar) - SenderDashboard (replaces bare progress-bar) - Add VestingBar CSS to index.css - CSS custom properties (--vesting-claimed/vested/unvested) for easy theming - Legend row beneath the bar - Tooltip arrow-caret styling Closes ritik4ever#740
|
@slakee-bot is attempting to deploy a commit to the ritik4ever's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@slakee-bot Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
PR description
│ feat: animated three-colour VestingBar component (#740)
│
│ Adds a VestingBar component that visualises the full vesting lifecycle in a single horizontal bar: green for claimed, blue for vested-but-unclaimed, and gray for
unvested. A tooltip on hover shows exact amounts per segment. When a stream has a cliff, a vertical pin marker is rendered at the correct position along the bar (amber
until reached, green after). All segments carry aria-label values and a visually-hidden summary ensures screen reader compatibility.
│
│ The component accepts an optional claimedAmount prop (defaults to 0) so it degrades gracefully until on-chain claim tracking is wired. Integrated into StreamsTable,
StreamDetailDrawer, RecipientDashboard, and SenderDashboard, replacing the existing single-colour progress bars.
│
closes #740