Implement Animated Number Counter for Stats Dashboard

[dev-fatima-24]

Pull Request: Implement Animated Number Counter for Stats Dashboard

Description

This PR enhances the stats dashboard by introducing an animated number counter for key platform metrics such as Total TVL, Total Markets, and Total Bets Placed.

Previously displayed as static values, these metrics now animate from zero to their target values when they enter the viewport, creating a more dynamic and engaging user experience consistent with modern DeFi dashboards.

Changes Implemented

Component

• Created reusable CountUp component in:
  • frontend/src/components

Core Functionality

• Animates numbers from 0 to target value over 1.5 seconds
• Uses requestAnimationFrame for smooth rendering
• Applies ease-out cubic easing for natural deceleration

Visibility Trigger

• Integrated IntersectionObserver:
  • Animation starts only when component enters viewport
  • Prevents unnecessary re-renders and improves performance

Accessibility

• Supports prefers-reduced-motion:
  • If enabled, animation is skipped
  • Final value is displayed immediately

Formatting

• Formats large numbers with comma separators:
  • Example: 1,234,567
• Supports suffix prop for units:
  • Examples: XLM, markets, bets

UI Consistency

• Styled to match Stellar Polymarket design system:
  • Color palette adherence
  • 4px spacing grid compliance

Acceptance Criteria

• Numbers animate smoothly from 0 to target within 1.5 seconds
• Ease-out cubic easing is correctly applied
• Animation triggers only when component enters viewport
• Large numbers are formatted with commas
• prefers-reduced-motion displays static values without animation

Testing

• Unit tests added for:
  • Animation trigger via IntersectionObserver
  • Number formatting correctness
  • Reduced motion behavior
• Verified smooth animation performance across browsers
• Ensured test coverage exceeds 90%

Notes

• Improves perceived platform activity and user engagement
• Designed as a reusable component for future dashboard metrics
• Optimized for performance and accessibility

Issues Closed

-Closes #604

Commit

[drips-wave]

@dev-fatima-24 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! 🚀

Learn more about application limits