Build real-time payment cooldown UI with per-payer state, multi-invoice polling, and accessibility compliance

[Kingsman-99]

Description

Build a production-grade cooldown indicator system for the invoice detail page. It must poll cooldown state for the connected wallet across multiple invoices simultaneously, display an animated countdown, re-enable the pay button exactly when cooldown expires, and meet WCAG 2.1 AA accessibility standards.

Acceptance Criteria

• Create src/components/CooldownBadge.tsx — accepts expiresAt: number | null prop; renders animated countdown (e.g. "Next payment in 4h 30m 12s") updating every second via useInterval
• When expiresAt is null or expired, component renders nothing (no layout shift)
• Invoice detail page (src/app/invoice/[id]/page.tsx) fetches cooldown expiry for the connected wallet on mount and after each successful payment
• Pay button is disabled and has aria-disabled="true" when cooldown is active; aria-label updates to include remaining time
• CooldownBadge has role="status" and aria-live="polite" so screen readers announce updates without interrupting
• Countdown uses DeadlineEngine.getCountdown from the SDK (split-sdk issue Add multi-language support #9)
• On cooldown expiry, button re-enables without page refresh (interval-driven, not polling the chain)
• Unit test for CooldownBadge: renders countdown, clears when expired, does not re-render unnecessarily (use React.memo)
• Passes Lighthouse accessibility audit score >= 90

Context

• Invoice detail page is at src/app/invoice/[id]/page.tsx
• Use useInterval hook — create src/hooks/useInterval.ts if it doesn't exist
• Wallet connection state is available via existing wallet context in the app

[DammyAji]

Hi maintainer, can i work on this issue? I've read the description and i understand the details of what needs to be done. Thank you for your consideration. I look forward to working on this.