feat: show 24h TWAP price on key detail page

[mayborn005]

Closes #827

Summary

Displays the 24-hour time-weighted average price alongside the spot price on the key detail page, so buyers have a less manipulable reference before purchasing.

Changes

• src/services/course.service.ts — getKeyTwap(keyId, window='24h') calls GET /keys/:keyId/twap?window=24h.
• src/hooks/useKeyTwap.ts — React Query hook (60s stale, no retry).
• src/lib/queryKeys.ts — creators.twap.
• src/pages/CreatorDetailPage.tsx — renders the TWAP card with:
  • Label TWAP (24h) and an info tooltip ("Time-weighted average key price over the last 24 hours.").
  • Loading skeleton while fetching.
  • Green TWAP label/delta when the spot price is above TWAP, red when below.
  • The card is hidden entirely when the endpoint returns null/no price (insufficient data).

Notes

• Uses the existing formatDisplayKeyPrice for display.
• CI/lint: the code is JSX + hooks consistent with the existing page; please run the frontend lint/build in CI.

[mayborn005]

✅ TWAP (24h) is now shown alongside the spot price with colour-coded comparison and a loading skeleton. @accesslayerorg this PR resolves issue #827.