feat(frontend): enable optimistic updates, refactor balance sync, add animations and tests

[ritik4ever]

This PR addresses 4 frontend UX enhancement issues focused on the Dark Mode Theme Engine and Real-time Balance Sync modules.

Changes

#951 - Enable optimistic updates in Dark Mode Theme Engine

• Refactored theme-context.tsx to use useRef for stable theme tracking, eliminating stale closure issues
• Optimistic UI update pattern: state updates immediately, persistence follows, rollback on failure
• Cleaned up duplicate rollback code in the error handler
• Added 7 new tests across theme-context.test.tsx and theme-engine.test.tsx

#952 - Refactor state logic for Real-time Balance Sync

• Added RESET action and reset() method to useBalanceSync
• Used onUpdateRef to prevent stale closure issues in the onUpdate callback
• Cleaned up useCallback dependency arrays

#953 - Implement framer-motion animations for Real-time Balance Sync

• Added container entrance animation, staggered list items, balance value transitions
• Error message animate-in/out, refresh button tap feedback, last-updated fade-in
• Full useReducedMotion() support for accessibility

#954 - Add unit tests for Real-time Balance Sync

• 9 tests covering rendering, balance display, loading, error, empty states, refresh, and ARIA attributes

Testing

• Unit tests pass: npm run test:unit
• Mobile responsive
• Accessibility (a11y) verified
  Closes [Frontend] Enable optimistic updates in Dark Mode Theme Engine #951, Closes [Frontend] Refactor state logic for Real-time Balance Sync #952, Closes [Frontend] Implement framer-motion animations for Real-time Balance Sync #953, Closes [Frontend] Add unit tests for Real-time Balance Sync #954

[vercel]

@ritik4ever is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@ritik4ever 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