하이퍼리퀴드 포트폴리오 추적기
Quicknode의 Hyperliquid 정보 엔드포인트를 사용하여 Hyperliquid의 무기한 포지션, PnL, 마진 사용률 및 금고 보유량을 모니터링하는 실시간 포트폴리오 추적기를 구축하세요.
Introduction
As a perpetual trader on Hyperliquid, having a comprehensive portfolio tracker is essential for monitoring your positions, PnL, and margin utilization in real-time. This guide shows you how to build a powerful portfolio tracker that monitors any Hyperliquid wallet using Quicknode's Hyperliquid info endpoint.
이 예제 앱은 교육 및 시연 목적으로만 제공됩니다.
For an in-depth guide on implementing this portfolio tracker from scratch, check out our comprehensive guide on Quicknode
주요 기능
- Live Position Tracking: Real-time updates on perpetual positions with PnL
- Portfolio Analytics: Account value, margin usage, and risk metrics
- Vault Management: Track vault value and lock-up schedules
- Spot Holdings: Monitor token balances and USD values
- Search For Any Wallet: Switch between different trading accounts
Tech Stack
Frontend
- React + TypeScript + Tailwind CSS + shadcn/ui & Radix UI
- 반응형 인터페이스를 통해 거래 데이터를 표시합니다
- 1000ms마다 여론조사 데이터베이스를 확인하여 업데이트 여부를 확인합니다.
- 데이터베이스 요청을 통해 지갑 전환을 처리합니다.
Backend
- Node.js indexer with 500ms polling interval
- 5개의 서로 다른 Hyperliquid 엔드포인트에서 데이터를 가져옵니다.
- PostgreSQL에 데이터를 저장할 때 정밀도를 적절히 처리합니다.
- 프론트엔드에서 들어오는 지갑 전환 요청을 처리합니다
이 가이드에서는 실시간 업데이트를 시연하기 위해 짧은 폴링 간격(인덱서 500ms, 프론트엔드 1000ms)을 사용합니다. 필요에 따라 이 간격을 조정할 수 있습니다:
- 프론트엔드:
src/Dashboard.tsx260~264행 - 다음을 변경합니다.1000값:const interval = setInterval(async () => {
await fetchData(currentWallet);
}, 1000); - 색인 작성자:
src/indexer/indexer.ts623~630행 - 다음을 변경합니다.500값:setInterval(async () => {
await indexer.checkForWalletSwitch();
await indexer.indexData();
}, 500);
Quicknode 및 Supabase 사용량을 모니터링하여 비용을 최적화하세요.
Database
- Supabase PostgreSQL
- 재무 정밀도로 데이터를 6개의 테이블에 저장합니다 (
소수유형) - 다음 방식을 통해 프론트엔드와 인덱서 간의 통신을 처리합니다.
지갑 전환 요청표 - 중복 입력을 방지하기 위해 고유 제약 조건을 사용합니다.
데이터 출처
- 초유동체
정보Quicknode를 통한 엔드포인트 - 계정 데이터, 포지션, 금고 보유 자산, 현물 잔고 및 위임 정보를 제공합니다.
- 정밀도를 나타내는 숫자를 문자열로 처리하여 JSON 형식의 데이터를 반환합니다.
- 지갑 주소 매개변수를 포함한 HTTP POST 요청을 통해 액세스됩니다.
건축
┌─────────────────┐
│ Perp Trader │
└─────────┬───────┘
│ 1. 지갑 주소 입력
▼
┌─────────────────┐
│ React 대시보드 │◄─────────────────┐
└─────────┬───────┘ │
│ 2. 요청 저장 │ 6. 데이터 읽기 및 표시
▼ │
┌─────────────────┐ │
│ Supabase │◄─────────────────┤
│ PostgreSQL │ │
└─────────┬───────┘ │
│ 3. 요청 감지 │ 5. 데이터 저장
▼ │
┌─────────────────┐ │
│ 인덱서 │──────────────────┘
│ (500ms 폴링) │
└─────────┬───────┘
│ 4. HyperCore 데이터 가져오기
▼
┌─────────────────┐
│ Quicknode │
│ Hyperliquid │
│ 엔드포인트 │
└─────────────────┘
포트폴리오 추적기는 PostgreSQL 데이터베이스를 통해 통신하는 세 가지 구성 요소로 이루어져 있습니다. 인덱서는 Hyperliquid에서 데이터를 가져와 데이터베이스에 저장하고, 프론트엔드는 표시를 위해 데이터베이스에 쿼리를 실행합니다.
필수 조건
- Quicknode account with Hyperliquid endpoint
- Supabase 계정
- Node.js v20 이상, npm, 코드 편집기
- React/TypeScript 및 REST API의 기본 개념
- SQL의 기본 개념
- 선택 사항: 하이퍼리퀴드(Hyperliquid)의 무제한 거래 경험
Quicknode는 사용자가 직접 노드를 실행할 필요가 없도록 하는 전용 Hyperliquid API 엔드포인트를 제공합니다:
- 별도의 설정 없이 바로 사용할 수 있는 사전 구성된 엔드포인트
- 연결 관리 및 장애 조치 기능을 처리합니다.
- 추가 인프라 없이 HyperCore 데이터에 직접 액세스
Quick Start
1. Clone the Repository
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/hyperliquid-portfolio-tracker
2. Setup Environment File
cp .env.example .env
3. Supabase Database Setup
-
Create a new Supabase account or login at supabase.com
-
Create a new project, then click the Connect button
- In the App Frameworks section, select React and change
~를 사용하여~에 Vite
- Copy the
VITE_SUPABASE_URL그리고VITE_SUPABASE_ANON_KEYvalues to your.envfile 1 - 다음으로 이동하십시오. SQL 편집기, paste the content of
supabase/schema.sql, then click 실행
This creates all necessary tables and functions for storing and fetching trading data.
4. Quicknode Setup
- Create a free trial Quicknode account
- Create a Hyperliquid RPC endpoint
- Copy the endpoint URL and paste it to your
.env파일
기존의 것을 반드시 제거하십시오. /evm 그리고 다음을 추가합니다 /정보 Hyperliquid 정보 엔드포인트에 액세스하려면 Quicknode 엔드포인트 URL 끝에 다음을 추가하십시오.
5. Start the Application
npm install && npm run dev:both
This runs both the frontend application and the indexer. Open your browser at http://localhost:5173 and use the demo wallet button to see the tracker in action.
문제 해결
If the indexer stops responding or no data appears after wallet search, simply re-run the indexer:
npm run dev:indexer
Then search again by inputting a valid wallet address.
미리 보기
메인 페이지
Dashboard View
자세히 알아보기
Future Improvements
- Liquidation Warnings: Alert users when positions approach dangerous margin levels
- Performance Charts: Track portfolio performance over time with Recharts
- Price Alerts: Send notifications using your favorite notification service
- Multi-Wallet Dashboard: Compare multiple trading accounts side-by-side
- 저장소를 포크하기
- 기능 브랜치 생성:git checkout -b feature/amazing-feature
- 변경 사항을 커밋하세요:git commit -m "멋진 기능 추가"
- 브랜치를 푸시하세요:git push origin feature/amazing-feature
- 풀 리퀘스트를 제출하세요.