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.
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 中，并进行正确的精度处理
- 处理来自前端的钱包切换请求
本指南采用较短的轮询间隔（索引器为 500 毫秒，前端为 1000 毫秒）来演示实时更新。如有需要，您可以调整这些间隔：
- 前端：
src/Dashboard.tsx第 260-264 行——将1000值位于：const interval = setInterval(async () => {
await fetchData(currentWallet);
}, 1000); - 索引员：
src/indexer/indexer.ts第 623-630 行——将500值位于：setInterval(async () => {
await indexer.checkForWalletSwitch();
await indexer.indexData();
}, 500);
监控您的 Quicknode 和 Supabase 使用情况，以优化成本。
Database
- Supabase PostgreSQL
- 将交易数据以金融精度存储在 6 张表中（
DECIMAL类型) - 通过以下方式处理前端与索引器之间的通信：
钱包切换请求表格 - 使用唯一约束来防止重复条目
数据来源
- 超流体
信息通过 Quicknode 访问端点 - 提供账户数据、持仓、金库持仓、现货余额和授权信息
- 以 JSON 格式返回数据，其中数值采用字符串形式表示，以保证精度
- 通过带有钱包地址参数的 HTTP POST 请求访问
建筑
┌─────────────────┐
│ 涉案交易员 │
└─────────┬───────┘
│ 1. 输入钱包地址
▼
┌─────────────────┐
│ React 仪表盘 │◄─────────────────┐
└─────────┬───────┘ │
│ 2. 存储请求 │ 6. 读取并显示数据
▼ │
┌─────────────────┐ │
│ Supabase │◄─────────────────┤
│ PostgreSQL │ │
└─────────┬───────┘ │
│ 3. 检测请求 │ 5. 存储数据
▼ │
┌─────────────────┐ │
│ 索引器 │──────────────────┘
│ (500毫秒轮询) │
└─────────┬───────┘
│ 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 数据
快速入门
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 - 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 在您的 Quicknode 端点 URL 末尾添加此内容，即可访问 Hyperliquid 信息端点。
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
- 提交一个拉取请求。