ハイパーリキッド・ポートフォリオ・トラッカー
QuicknodeのHyperliquid情報エンドポイントを使用して、Hyperliquidの永久先物ポジション、PnL、証拠金使用率、およびVaultの保有資産を監視するリアルタイムのポートフォリオトラッカーを構築します。
はじめに
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.
This example app is provided for educational and demonstration purposes only.
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
- レスポンシブなインターフェースで取引データを表示します
- 1000ミリ秒ごとに投票データベースを照会して更新を確認する
- データベースへのリクエストを通じて、ウォレットの切り替えを処理する
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つのテーブルに、財務上の精度で格納しています（
DECIMAL（種類） - フロントエンドとインデクサー間の通信を、以下を介して処理します
wallet_switch_requests表 - 一意性制約を使用して、重複するエントリを防ぐ
データソース
- ハイパーリキッド
情報Quicknode経由のエンドポイント - 口座データ、ポジション、保管資産、スポット残高、および委任情報を提供します
- 精度を表す数値を文字列として含むJSON形式のデータを返す
- ウォレットアドレスをパラメータとして指定したHTTP POSTリクエストを介してアクセスします
建築
┌─────────────────┐
│ 犯人トレーダー │
└─────────┬───────┘
│ 1. ウォレットアドレスを入力
▼
┌─────────────────┐
│ Reactダッシュボード │◄─────────────────┐
└─────────┬───────┘ │
│ 2. リクエストの保存 │ 6. データの読み取りと表示
▼ │
┌─────────────────┐ │
│ Supabase │◄─────────────────┤
│ PostgreSQL │ │
└─────────┬───────┘ │
│ 3. リクエストの検出 │ 5. データの保存
▼ │
┌─────────────────┐ │
│ インデクサー │──────────────────┘
│ (500ms ポーリング) │
└─────────┬───────┘
│ 4. HyperCoreデータの取得
▼
┌─────────────────┐
│ Quicknode │
│ Hyperliquid │
│ エンドポイント │
└─────────────────┘
ポートフォリオ・トラッカーは、PostgreSQLデータベースを介して通信を行う3つのコンポーネントで構成されています。インデクサーはHyperliquidからデータを取得してデータベースに格納し、フロントエンドは表示のためにデータベースにクエリを実行します。
前提条件
- Quicknode account with Hyperliquid endpoint
- Supabaseアカウント
- Node.js v20以降、npm、およびコードエディタ
- React/TypeScriptおよびREST APIの基本概念
- SQLの基本概念
- オプション：ハイパーリキッドによる永久取引体験
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
using～へ Vite
- をコピーして
VITE_SUPABASE_URLそしてVITE_SUPABASE_ANON_KEYvalues to your.envfile 1 - Navigate to the 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 そして、以下を追加します /info 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
- プルリクエストを作成してください。