[Frontend] Add real-time claimable amount countdown on stream detail

[ogazboiz]

https://t.me/+DOylgFv1jyJlNzM0

Description

The get_claimable_amount contract view is already called on stream load but the displayed value is static. For a streaming-payment app the claimable amount should tick upward in real time so recipients can see tokens accumulating. This issue adds a client-side interval that recalculates (or polls the API for) the claimable amount every second and updates the display smoothly.

Acceptance Criteria

• Claimable amount on the stream detail page updates every second while the stream is ACTIVE
• The interval is computed client-side using rate_per_second * elapsed_seconds_since_last_checkpoint for zero-latency display, with a periodic API re-sync every 30 s to correct drift
• Counter pauses when the stream is PAUSED or COMPLETED
• Counter stops and cleans up the interval when the component unmounts (no memory leaks)
• Formatted value uses the existing amount-formatting utility (e.g. 7.0000312 XLM)
• A subtle CSS animation (e.g. brief highlight pulse) draws attention to each update tick

Files to Touch

• src/hooks/useClaimableAmount.ts — new hook with local interval + remote sync
• src/app/streams/[id]/page.tsx — wire the hook to the claimable amount display
• src/components/streams/ClaimableAmountDisplay.tsx — extract display into its own component
• src/lib/api/streams.ts — add getClaimableAmount(id) API helper if not present

[K1NGD4VID]

@K1NGD4VID has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

Hi

Please assign me this task. I’ll implement a real-time claimable amount hook with per-second client-side accrual and periodic API resync, integrate it into the stream detail UI with proper lifecycle cleanup and pause conditions, and add a dedicated display component with formatted values and subtle update animation.

ETA: 1–2 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @K1NGD4VID to this issue.

[drips-wave]

Congratulations, @K1NGD4VID! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on April 29, 2026.

🧑‍💻 @K1NGD4VID: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been marked as completed by a Drips Wave moderator for @K1NGD4VID as part of the Stellar Wave Program's 4th Wave 🥳

Moderator's reason: [Auto-assessed] PR #429 provides a complete and high-quality implementation of the requested real-time counter. It correctly includes the 1-second client-side interval, the 30-second API re-sync logic, state handling for paused/active streams, and the visual highlight animation as specified in the acceptance criteria.

😎 @K1NGD4VID: You earned 100 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.

ℹ️ Note: This issue was marked complete via moderation. Points were issued even though the GitHub issue remains open.