개요
Phoenix는 Solana 영구선물 거래소입니다. 이 대시보드는 Phoenix의 공개 REST 및 WebSocket API를 활용하여 실시간 SOL-PERP 시장 터미널을 구축하는 방법을 보여줍니다. 여기에는 전체 데이터 파이프라인이 포함되며, REST를 통해 과거 캔들 데이터와 정적 시장 설정을 초기화하고, 단일 공유 WebSocket 연결을 통해 6개의 실시간 채널을 구독하며, 실시간 호가창, 거래 내역 및 펀딩 스트립과 함께 대화형 캔들 차트를 표시하는 과정을 다룹니다.
API 키, 서명된 헤더 또는 지갑 연결이 필요하지 않습니다. 모든 데이터는 Phoenix의 공개 소스에서 제공됩니다. perp-api.phoenix.trade 엔드포인트. 대시보드에 온체인 읽기 기능(트랜잭션 내역, 계정 상태)을 추가하려면, 다음을 연결하십시오. Quicknode Solana endpoint.
이 대시보드의 아키텍처를 다루는 전체 가이드 내용은 “Phoenix API를 사용하여 실시간 SOL Perps 대시보드 구축하기”에서 확인할 수 있습니다.
건축
Phoenix REST API (https://perp-api.phoenix.trade)
→ App.tsx 마운트 시 초기 데이터: 과거 캔들 차트 + 정적 시장 설정
Phoenix WebSocket (wss://perp-api.phoenix.trade/v1/ws)
→ PhoenixWebSocket.tsx에서 하나의 공유 연결을 관리
→ 시장 채널 → MarketOverview (헤더 통계)
→ fundingRate 채널 → MarketOverview + 펀딩 스트립
→ 캔들 채널 → PriceChart (OHLCV + 오버레이)
→ 오더북 채널 → Orderbook (최고 매수/매도 호가)
→ trades 채널 → TradeFeed (최근 체결 내역)
→ 거래소 채널 → 연결 상태 배지
REST 전용 → 시장 정보 (수수료, 레버리지 등급, 틱/랏 크기)
주요 기능
- 고정 헤더 바에 표시되는 실시간 시세, 오라클 가격, 24시간 변동률, 24시간 거래량, 미결제약정, 펀딩율
- 표시 가격(녹색)과 오라클 가격(보라색 점선)이 중첩된 캔들스틱 차트; 스프레드가 10bps를 초과할 경우 빨간색으로 강조 표시됨
- 6가지 시간대(1분, 5분, 15분, 1시간, 4시간, 1일) — 전환 시 REST에서 캔들 데이터를 즉시 재초기화합니다.
- 최고 매수 호가와 매도 호가 수준, 누적 거래량 및 스프레드를 보여주는 실시간 L2 주문장
- 거래 내역, 가격, 수량, 명목 가치를 포함한 최근 25건의 체결 내역을 보여주는 실시간 거래 피드
- 차트 하단의 정보란에는 해당 세션 내 금리 변동 내역, 연이율(APR), 다음 결제일까지의 카운트다운이 표시됩니다.
- 수수료, 최대 레버리지, 등급표 및 증거금 요건이 포함된 정적 시장 정보 패널
- 지수적 백오프(최대 15초)를 적용한 WebSocket 재연결
선행 조건
- Node.js 20 이상
- npm 또는 pnpm
프로젝트 구조
src/
├── api.ts # REST 헬퍼 (캔들, 시장 설정)
├── types.ts # 공유 TypeScript 타입
├── App.tsx # 루트 컴포넌트; 마운트 시 REST 데이터 초기화
├── ws/
│ └── PhoenixWebSocket.tsx # WebSocket 제공자 + React 컨텍스트
├── components/
│ ├── ConnectionStatus.tsx # WS 연결 상태 표시기
│ ├── MarketInfo.tsx # 시장 설정 패널 (수수료, 레버리지, 펀딩)
│ ├── MarketOverview.tsx # 헤더 통계 바
│ ├── Orderbook.tsx # 실시간 매수/매도 호가 깊이 표
│ ├── PriceChart.tsx # 펀딩 바가 포함된 캔들 차트
│ └── TradeFeed.tsx # 최근 거래 내역
└── utils/
├── format.ts # 숫자 서식 지정 헬퍼
└── useFundingCountdown.ts # 다음 펀딩 정산까지의 카운트다운 훅
시작하기
1. 저장소를 복제하세요
git https://github.com/quiknode-labs/qn-guide-examples.git 복제
cdsolana
2. 종속성 설치
npm 설치
3. 개발 서버를 시작합니다.
npm run dev
브라우저에서 http://localhost:5173을 열어주세요. 대시보드가 Phoenix에 연결되어 즉시 실시간 데이터 스트리밍을 시작합니다.
환경 변수는 필요하지 않습니다. 대시보드는 Phoenix의 공개 REST 및 WebSocket 엔드포인트에 직접 연결됩니다.
미리 보기
기여 및 피드백
여러분의 의견을 듣고 싶으며, 이 샘플 앱에 대한 모든 기여를 환영합니다!
문제를 신고하거나 피드백을 공유하려면, 다음에서 GitHub 이슈를 생성해 주세요. qn-가이드-예시 저장소.
기여하시려면 다음 단계를 따르세요:
- 저장소를 포크하기
- 기능 브랜치 생성:git checkout -b feature/amazing-feature
- 변경 사항을 커밋하세요:git commit -m "멋진 기능 추가"
- 브랜치를 푸시하세요:git push origin feature/amazing-feature
- 풀 리퀘스트를 제출하세요.
더 많은 샘플 앱 살펴보기
