Phoenix Perps Dashboard
A real-time SOL perpetual futures dashboard built with React and TypeScript, powered by Phoenix's public REST and WebSocket API. No API key required.
개요
Phoenix is a Solana-native perpetuals exchange. This dashboard demonstrates how to build a live SOL-PERP market terminal using Phoenix's public REST and WebSocket API covering the full data pipeline: seeding historical candles and static market config via REST, subscribing to six real-time channels over a single shared WebSocket connection, and rendering an interactive candlestick chart alongside a live orderbook, trade feed, and funding strip.
No API key, signed headers, or wallet connection is required. All data comes from Phoenix's public perp-api.phoenix.trade endpoints. To extend the dashboard with onchain reads (transaction history, account state), connect a Quicknode Solana RPC endpoint.
The full guide covering this dashboard's architecture is available at Build a Real-Time SOL Perps Dashboard with the Phoenix API.
건축
Phoenix REST API (https://perp-api.phoenix.trade)
→ App.tsx seeds on mount: historical candles + static market config
Phoenix WebSocket (wss://perp-api.phoenix.trade/v1/ws)
→ PhoenixWebSocket.tsx manages one shared connection
→ market channel → MarketOverview (header stats)
→ fundingRate channel → MarketOverview + funding strip
→ candles channel → PriceChart (OHLCV + overlays)
→ orderbook channel → Orderbook (top bid/ask levels)
→ trades channel → TradeFeed (recent fills)
→ exchange channel → ConnectionStatus badge
REST only → MarketInfo (fees, leverage tiers, tick/lot size)
주요 기능
- Live mark price, oracle price, 24h change, 24h volume, open interest, and funding rate in a sticky header bar
- Candlestick chart with mark price (green) and oracle price (purple dashed) overlays; spread highlighted red when it exceeds 10 bps
- Six timeframes (1m, 5m, 15m, 1h, 4h, 1d) — switching re-seeds candles from REST immediately
- Real-time L2 orderbook showing top bid and ask levels with cumulative size and spread
- Live trade feed showing the 25 most recent fills with side, price, size, and notional value
- Funding strip below the chart tracking session-local rate history, annualized APR, and countdown to next settlement
- Static market info panel with fees, max leverage, tier table, and margin requirements
- WebSocket reconnection with exponential backoff (up to 15 seconds)
필수 조건
- Node.js 20+
- npm or pnpm
프로젝트 구조
src/
├── api.ts # REST helpers (candles, market config)
├── types.ts # Shared TypeScript types
├── App.tsx # Root component; seeds REST data on mount
├── ws/
│ └── PhoenixWebSocket.tsx # WebSocket provider + React context
├── components/
│ ├── ConnectionStatus.tsx # WS connection state indicator
│ ├── MarketInfo.tsx # Market config panel (fees, leverage, funding)
│ ├── MarketOverview.tsx # Header stats bar
│ ├── Orderbook.tsx # Live bid/ask depth table
│ ├── PriceChart.tsx # Candlestick chart with funding strip
│ └── TradeFeed.tsx # Recent trade prints
└── utils/
├── format.ts # Number formatting helpers
└── useFundingCountdown.ts # Countdown hook for next funding settlement
시작하기
1. 저장소를 복제하세요
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/solana/phoenix-dashboard
2. 종속성 설치
npm 설치
3. Start the development server
npm run dev
Open http://localhost:5173 in your browser. The dashboard will connect to Phoenix and begin streaming live data immediately.
No environment variables are required. The dashboard connects directly to Phoenix's public REST and WebSocket endpoints.
미리 보기
- 저장소를 포크하기
- 기능 브랜치 생성:git checkout -b feature/amazing-feature
- 변경 사항을 커밋하세요:git commit -m "멋진 기능 추가"
- 브랜치를 푸시하세요:git push origin feature/amazing-feature
- 풀 리퀘스트를 제출하세요.
