[assumptaamara]

• closes Add key depth chart to bonding curve price panel #1220

Summary

Adds a Depth tab to the key detail price panel that visualises the
secondary-market order book, so traders can see resting liquidity (buy
orders and sell listings at each price level) before swapping.

What changed

• src/services/keyDepth.service.ts (new) — GET /keys/:keyId/depth?levels=20,
  with a tolerant normaliser that accepts array or price-keyed ladders, XLM or
  stroop prices, and depth/orderBook envelopes.
• src/hooks/useKeyDepth.ts (new) — React Query hook polling every 5s
  (staleTime/refetchInterval).
• src/utils/keyDepthChart.utils.ts (new) — pure chart model: cumulative
  bid/ask ladders, best bid/ask, mid price, spread and spread %, plus a price
  domain symmetric around the mid.
• src/components/common/KeyDepthChart.tsx (new) — mirrored Recharts area
  chart (green bids left, red asks right), mid-price marker and spread badge
  at the centre, summary chips, and loading/empty/error states.
• src/pages/CreatorDetailPage.tsx — price-panel tabs are now driven by a
  PRICE_CHART_TABS list with the new Depth entry.
• src/lib/queryKeys.ts — added queryKeys.creators.depth(creatorId, levels).

Behaviour

• X-axis shows price levels, Y-axis shows cumulative volume.
• The mid price is marked with a dashed line and the spread between the best
  bid and ask is shown at the centre of the plot; the same values are exposed
  as summary chips.
• The 5s refresh updates the chart in place — the skeleton is gated on the
  initial load, so polls never flash or remount the chart.
• Layout adapts at the mobile breakpoint (fewer x-axis ticks, slimmer y-axis
  gutter) and scales with the panel via ResponsiveContainer.

Tests

Added coverage: keyDepth.service.test.ts, keyDepthChart.utils.test.ts,
useKeyDepth.test.tsx, KeyDepthChart.test.tsx and
CreatorDetailPage.depthTab.integration.test.tsx.

Note for review

The endpoint payload shape is inferred from the issue, so the client-side
normaliser is deliberately permissive. If the backend uses different field
names, only keyDepth.service.ts needs to change.

[drips-wave]

@assumptaamara 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