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

[ogazboiz]

Telegram (ask questions / claim the issue here first): https://t.me/+DOylgFv1jyJlNzM0

Labels: frontend, Stellar Wave

The claimable amount on the stream detail page is fetched once and then just sits there, which looks broken for a streaming-payment product.

We already call get_claimable_amount on load. What's missing is a ticking display. The cleanest approach is to compute the value locally from rate_per_second * elapsed_seconds_since_last_checkpoint so it updates instantly, then re-sync against the API every 30s so it doesn't drift. Only tick while the stream is ACTIVE.

What the fix has to hold to

• Local counter is display-only; the API stays the source of truth via periodic re-sync
• Interval clears on unmount so we don't leak timers
• No ticking while PAUSED or COMPLETED

Done when

• Claimable amount updates every second while the stream is ACTIVE
• Value is computed client-side (rate_per_second * elapsed) with an API re-sync every 30s
• Counter pauses on PAUSED/COMPLETED and cleans up its interval on unmount
• Uses the existing amount-formatting util (e.g. 7.0000312 XLM)
• Small highlight pulse on each tick
• Tests + lint pass, CI green

Where to start
New src/hooks/useClaimableAmount.ts holds the interval + remote sync. Pull the display out into src/components/streams/ClaimableAmountDisplay.tsx and wire it up in src/app/streams/[id]/page.tsx. Add getClaimableAmount(id) to src/lib/api/streams.ts if it isn't there yet. Small frontend change, mostly hook + cleanup logic.

[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.