Skip to content

feat(chart): build TWAP price chart overlay on creator key trading pa… - #1095

Merged
Chucks1093 merged 1 commit into
accesslayerorg:devfrom
timiturn3r:feat/twap-price-chart-overlay-931
Oct 17, 2026
Merged

Chucks1093 merged 1 commit into
accesslayerorg:devfrom
timiturn3r:feat/twap-price-chart-overlay-931

Conversation

@timiturn3r

Copy link
Copy Markdown
Contributor

Summary

  • Added a TWAP (Time-Weighted Average Price) overlay to the bonding curve price chart on the creator key trading page (CreatorDetailPage), allowing users to compare spot price against time-weighted averages.
  • Extended useKeyTwap hook and queryKeys.creators.twap to support fetching both 1h and 24h TWAP windows (TwapWindow type) from backend API with automatic 60-second background polling via React Query (refetchInterval: 60_000).
  • Enhanced BondingCurveChart with an emerald dashed overlay line (stroke="#10b981", strokeDasharray="6 4"), interactive 1H / 24H window toggle buttons, and an overlay visibility toggle (Show / Hide).
  • Updated chart tooltip (CustomTooltip) to display the active TWAP window price and percentage deviation from spot on hover (▼ -X.XX% vs spot / ▲ +X.XX% vs spot).
  • Added graceful fallback handling: when TWAP is unavailable or returns null, the overlay line and legend are hidden and an "Unavailable" indicator is shown without chart flicker or UI disruption.
  • Added comprehensive unit and integration test suites covering useKeyTwap, BondingCurveChart overlay/controls/tooltips, and CreatorDetailPage integration.

Closes #931

Testing

  • pnpm lint
  • pnpm build
  • pnpm test run src/hooks/__tests__/useKeyTwap.test.tsx
  • pnpm test run src/components/common/__tests__/BondingCurveChart.twap.test.tsx
  • pnpm test run src/components/common/__tests__/BondingCurveChart.test.tsx
  • pnpm test run src/components/common/__tests__/BondingCurveChart.mobile.test.tsx
  • pnpm test run src/pages/__tests__/CreatorDetailPage.twapOverlay.integration.test.tsx

Checklist

  • Linked issue or backlog item (Closes #931)
  • Scope is limited to the stated change (TWAP chart overlay, 1h/24h toggle switches, hover tooltip deviation, 60s refetch, graceful unavailable state)
  • Updated docs if behavior or setup changed
  • Added screenshots for UI changes when relevant

…ge (accesslayerorg#931)

- Support 1h and 24h window queries in useKeyTwap with 60s refetchInterval via React Query
- Add TWAP overlay dashed line, 1h/24h toggle controls, and legend to BondingCurveChart
- Update hover tooltip to display TWAP value and percentage deviation from spot
- Support hiding and graceful fallback when TWAP data is unavailable
- Integrate TWAP chart overlay and window state in CreatorDetailPage
- Add unit and integration test suites covering overlay, toggle controls, and tooltip
@drips-wave

drips-wave Bot commented Oct 16, 2026

Copy link
Copy Markdown

@timiturn3r Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@Chucks1093
Chucks1093 merged commit d9fdcc4 into accesslayerorg:dev Oct 17, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build TWAP price chart overlay on creator key trading page

2 participants