Add a TWAP price display on the key detail page alongside the bonding curve spot price

[Chucks1093]

Summary

The spot price can be manipulated by a single large trade. Displaying the TWAP price alongside the spot price on the key detail page would give buyers a more reliable price reference before committing to a purchase.

Scope

• Fetch the TWAP price from GET /keys/:keyId/twap?window=24h on key detail page load
• Display the TWAP price below the spot price with a label 'TWAP (24h)'
• Show a tooltip explaining: 'Time-weighted average price over the past 24 hours. Less sensitive to short-term manipulation.'
• Colour the TWAP label green if the spot price is above TWAP and red if below
• Show a loading skeleton for the TWAP value while it fetches

Acceptance Criteria

• TWAP price displayed with correct label and value
• Tooltip shown on hover of the TWAP label
• Green label when spot is above TWAP, red when below
• Loading skeleton shown while fetching
• TWAP hidden when the endpoint returns null (insufficient data)

ETA: 12 hours

---

Coordinate on Telegram

[Tobi-8]

please maintainer, i have the experience to solve this issue, be generous and assign me

[Tobi-8]

please maintainer, i have the experience to solve this issue, be generous and assign me

[HassanKorey]

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

pls assign

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

[mayborn005]

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

Hello @maintainer, I'd love to work on this issue. I'll keep the implementation simple, clean, and well-tested.

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

[drips-wave]

Congratulations, @mayborn005! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @mayborn005: 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 🌊

[mayborn005]

@maintainers I fixed the verification TypeScript failure in PR #852 by adding the optional co-creator payout fields to the shared model, matching the existing creator detail API usage.