샘플 앱으로 돌아가기
Hyperliquid TP/SL 히트맵
Quicknode Hypercore gRPC 스트림에서 제공하는 실시간 매수/매도 호가를 기준으로, 대기 중인 Hyperliquid TP/SL 트리거 주문을 가격대 클러스터 형태로 시각화하는 실시간 브라우저 대시보드입니다.
프론트엔드 프레임워크/라이브러리:
React
언어:
TypeScript
빌드 도구/개발 서버:
Vite
개요
이 앱은 다음과 연결됩니다. Quicknode의 Hyperliquid gRPC 엔드포인트 TP/SL 발동 순서 이벤트를 실시간으로 스트리밍하기 위해 (StreamTpslUpdates) 및 최고 매수·매도 호가 (StreamBboBook). 미결제 주문은 사용자 정의가 가능한 가격 구간으로 묶여 웹소켓을 통해 브라우저로 전송되며, 브라우저에서는 캔버스 기반의 히트맵을 통해 각 가격 수준별 집계된 트리거 압력을 실시간으로 시각화합니다.
이 앱에는 합성 피드를 사용하는 내장 데모 모드가 포함되어 있으므로, 별도의 인증 정보 없이도 UI를 살펴볼 수 있습니다.
이 예제 앱은 교육 및 시연 목적으로만 제공됩니다.
건축
브라우저 (React + Canvas)
▲
│ WebSocket
│
Node.js HTTP + WebSocket 서버
│
├── gRPC: StreamTpslUpdates ──┐
│ ├── Quicknode Hyperliquid gRPC 엔드포인트
└── gRPC: StreamBboBook ──────┘
주요 기능
- 실시간 TP/SL 히트맵: Quicknode gRPC 스트림을 통해 실시간으로 업데이트되는 가격 구간 클러스터
- BBO 앵커: 시장 상황을 파악할 수 있도록 히트맵 위에 현재 매수·매도 호가를 중첩 표시
- TP/SL 혼합 지표: 각 버킷에는 이익 실현 비율과 손절매 비율을 나타내는 작은 녹색/빨간색 표시기가 표시됩니다.
- 다중 자산 지원: BTC, ETH, SOL, HYPE 및 기타 모든 Hyperliquid 퍼프 심볼을 동시에 모니터링할 수 있습니다.
- 설정 가능한 버킷 폭:
BUCKET_SIZE_PCT현재 중간 가격을 기준으로 버킷 크기를 조정합니다 - 데모 모드: 자격 증명이 없는 경우 합성 피드를 사용하여 실행되거나
DEMO_MODE=true - 건강 관련 결과 지표:
GET /health서버 상태와 현재 실행 모드를 JSON 형식으로 반환합니다.
필수 조건
- Hyperliquid 엔드포인트가 있는 Quicknode 계정 (gRPC 액세스 필요)
- Node.js v18 이상
- pnpm
프로젝트 구조
proto/
orderbook.proto # gRPC 서비스 정의
src/
client/
App.tsx # 코인 선택기 및 WebSocket 클라이언트
HeatmapCanvas.tsx # 캔버스 기반 히트맵 렌더러
main.tsx # React 진입점
styles.css # 앱 스타일
server/
cluster-store.ts # 주문 클러스터링 및 BBO 상태
config.ts # 환경 변수 불러오기
demo.ts # 합성 데모 피드
grpc.ts # gRPC 클라이언트 설정
server.ts # HTTP + WebSocket 서버
streams.ts # 실시간 gRPC 스트림 연결
shared/
types.ts # 공유 TypeScript 타입
환경 변수
복사 .env.example ~에 .env 그리고 로그인 정보를 입력하세요:
# https://your-endpoint.hype-mainnet.quiknode.pro:10000
QUICKNODE_GRPC_ENDPOINT=your-endpoint.hype-mainnet.quiknode.pro:10000
QUICKNODE_GRPC_TOKEN=사용자-인증-토큰
TARGET_COINS=BTC, ETH, SOL
기본 코인=BTC
버킷_크기_비율=0.75
DEMO_MODE=false
PORT=8787
| 변수 | 설명 |
|---|---|
QUICKNODE_GRPC_ENDPOINT | 귀하의 Quicknode Hyperliquid gRPC 엔드포인트 (호스트:포트) |
QUICKNODE_GRPC_TOKEN | gRPC 엔드포인트용 인증 토큰 |
TARGET_COINS | 모니터링할 Hyperliquid 퍼프 심볼의 쉼표로 구분된 목록 |
DEFAULT_COIN | 로딩 시 어떤 코인을 표시할지 (다음 중 하나여야 함) TARGET_COINS) |
BUCKET_SIZE_PCT | 중간 가격 대비 버킷 폭의 백분율 (예: 0.75 = (비트코인 가격이 6만 4천 달러 근처일 때 약 500달러 상당의 벡킷) |
DEMO_MODE | 설정: true 인증 정보와 관계없이 데모 모드를 강제 적용하려면 |
PORT | HTTP 서버 포트 (기본값: 8787) |
시작하기
1. 저장소를 복제하세요
git https://github.com/quiknode-labs/qn-guide-examples.git 복제
cd qn-guide-examples/sample-dapps/hyperliquid-tpsl-heatmap
2. 종속성 설치
pnpm 설치
3. 환경 설정
cp .env.example .env
열기 .env 그리고 설정 QUICKNODE_GRPC_ENDPOINT 그리고 QUICKNODE_GRPC_TOKEN Quicknode Hyperliquid 엔드포인트 인증 정보를 입력하세요. 인증 정보를 입력하지 않으면 앱이 자동으로 데모 모드로 실행됩니다.
4. 앱을 실행하세요
pnpm dev
브라우저에서 http://localhost:8787을 열어주세요.
미리 보기
기여 및 피드백
여러분의 의견을 듣고 싶으며, 이 샘플 앱에 대한 모든 기여를 환영합니다!
문제를 신고하거나 피드백을 공유하려면, 다음에서 GitHub 이슈를 생성해 주세요. qn-가이드-예시 저장소.
기여하시려면 다음 단계를 따르세요:
- 저장소를 포크하기
- 기능 브랜치 생성:git checkout -b feature/amazing-feature
- 변경 사항을 커밋하세요:git commit -m "멋진 기능 추가"
- 브랜치를 푸시하세요:git push origin feature/amazing-feature
- 풀 리퀘스트를 제출하세요.
더 많은 샘플 앱 살펴보기
