fix(WalletStatusBadge): resolve status display and contrast issues (#888)

[bamiebot-maker]

Description

Resolves #888.

Problem

1. When transient network re-synchronization (networkStatus === 'connecting') was in progress, WalletStatusBadge was falling back to rendering the green "Connected" status dot without any status label.
2. Text-to-background contrast ratios for the status labels failed WCAG 2.1 AA requirements (>= 4.5:1) against bg-surface-2 in dark mode.
3. Automated unit tests were missing coverage for transitions across all four network lifecycle states (disconnected -> connecting -> connected -> error).

Solution & Implementation

• Transient Reconnection Handling: Added connecting state to STATUS_STYLES with a pulsating yellow indicator (bg-yellow-400 motion-safe:animate-pulse) and "Reconnecting..." label. Also factors in isSwitchingNetwork during active transitions.
• Error State Support: Added error state to STATUS_STYLES with a distinct red dot (bg-red) and "Error" label.
• WCAG 2.1 AA Contrast Calibration: Updated text tokens to guarantee contrast ratios >= 4.5:1 against dark mode bg-surface-2 (#1c1c1c):
  • connecting: text-yellow-400 (~10.85:1 contrast)
  • degraded: text-warning (#fdba74, ~9.67:1 contrast)
  • offline / error: text-red-400 (#f87171, ~5.85:1 contrast)
  • Disconnected / connecting hint: text-ink-2 (#999999, ~5.56:1 contrast)
• Lifecycle Transition and Contrast Unit Tests: Expanded src/components/WalletStatusBadge.test.tsx to test:
  • Reconnection state rendering yellow dot + "Reconnecting..." label and accessible ARIA attributes
  • Error state rendering red dot + "Error" label
  • Sequential transitions through all four lifecycle states (disconnected -> connecting -> connected -> error)
  • Automated mathematical validation that all status color tokens satisfy WCAG 2.1 AA contrast requirements (>= 4.5:1)

Acceptance Criteria Checklist

• Reconnection state renders a distinct non-connected badge.
• All status color combinations pass WCAG 2.1 AA contrast requirements.
• WalletStatusBadge.test.tsx tests all four network lifecycle states.

[drips-wave]

@bamiebot-maker 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