Tableau de bord Phoenix Perps
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.
Aperçu
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.
Architecture
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)
Fonctionnalités
- 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)
Prérequis
- Node.js 20 et plus
- npm or pnpm
Structure du projet
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
Démarrer
1. Cloner le dépôt
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/solana/phoenix-dashboard
2. Installer les dépendances
npm installer
3. Démarrer le serveur de développement
npm exécuter en mode développement
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.
Aperçu
- Créer une branche du dépôt
- Créer une branche de fonctionnalité :git checkout -b feature/amazing-feature
- Validez vos modifications :git commit -m "Ajout d'une fonctionnalité géniale"
- Publiez votre branche :git push origin feature/amazing-feature
- Créez une Pull Request.
