Rastreador de Carteiras Hyperliquid
Crie um sistema de acompanhamento de carteira em tempo real que monitorize as posições perpétuas na Hyperliquid, o PnL, a utilização da margem e os ativos detidos no cofre, utilizando o endpoint de informações da Hyperliquid da Quicknode.
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
Características
- 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
- Apresenta dados de negociação numa interface adaptável
- Verifica a base de dados de sondagens a cada 1000 ms para ver se há atualizações
- Gere a troca de carteiras através de pedidos à base de dados
Backend
- Node.js indexer with 500ms polling interval
- Recolhe dados de 5 pontos de acesso diferentes do Hyperliquid
- Armazena dados no PostgreSQL com um tratamento adequado da precisão
- Gere os pedidos de mudança de carteira a partir do front-end
Este guia utiliza intervalos de sondagem agressivos (500 ms para o indexador, 1000 ms para o front-end) para demonstrar atualizações em tempo real. Pode ajustar estes intervalos, se necessário:
- Frontend:
src/Dashboard.tsxlinhas 260-264 - Alterar o1000valor em:const interval = setInterval(async () => {
await fetchData(currentWallet);
}, 1000); - Indexador:
src/indexer/indexer.tslinhas 623-630 - Alterar o500valor em:setInterval(async () => {
await indexer.checkForWalletSwitch();
await indexer.indexData();
}, 500);
Acompanhe a utilização do Quicknode e do Supabase para otimizar os custos.
Base de dados
- Supabase PostgreSQL
- Armazena os dados comerciais em 6 tabelas com precisão financeira (
DECIMALtipos) - Gere a comunicação entre o front-end e o indexador através de
pedidos_de_mudança_de_carteiratabela - Utiliza restrições únicas para evitar entradas duplicadas
Fonte dos dados
- Hiperlíquido
informaçõesponto final através do Quicknode - Fornece dados da conta, posições, saldos em cofre, saldos à vista e delegações
- Devolve dados no formato JSON com números representados por cadeias de caracteres para indicar a precisão
- Acedido através de pedidos HTTP POST com o parâmetro «endereço da carteira»
Arquitetura
┌─────────────────┐
│ Perp Trader │
└─────────┬───────┘
│ 1. Introduza o endereço da carteira
▼
┌─────────────────┐
│ Painel do React │◄─────────────────┐
└─────────┬───────┘ │
│ 2. Armazenar pedido │ 6. Ler e apresentar dados
▼ │
┌─────────────────┐ │
│ Supabase │◄─────────────────┤
│ PostgreSQL │ │
└─────────┬───────┘ │
│ 3. Detetar pedido │ 5. Armazenar dados
▼ │
┌─────────────────┐ │
│ Indexador │──────────────────┘
│ (sondagem a cada 500 ms) │
└─────────┬───────┘
│ 4. Obter dados do HyperCore
▼
┌─────────────────┐
│ Quicknode │
│ Hyperliquid │
│ Endpoint │
└─────────────────┘
O sistema de acompanhamento de carteiras é composto por três componentes que comunicam entre si através de uma base de dados PostgreSQL. O indexador obtém dados do Hyperliquid, armazena-os na base de dados e o front-end consulta a base de dados para os apresentar.
Pré-requisitos
- Quicknode account with Hyperliquid endpoint
- Conta Supabase
- Node.js v20+, npm e um editor de código
- Conceitos básicos de React/TypeScript e API REST
- Conceitos básicos de SQL
- Opcional: Experiência de negociação contínua com liquidez extrema
A Quicknode disponibiliza pontos de acesso dedicados à API do Hyperliquid, que eliminam a necessidade de executar o seu próprio nó:
- Terminais pré-configurados que não requerem configuração
- Gere a gestão de ligações e a transição para o sistema de reserva
- Acesso direto aos dados do HyperCore sem infraestrutura adicional
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 Reagir and change
utilizandopara Vite
- Copy the
VITE_SUPABASE_URLeVITE_SUPABASE_ANON_KEYvalues to your.envfile 1 - Aceda à Editor de SQL, paste the content of
supabase/schema.sql, then click Run
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
.envficheiro
Certifique-se de que remove o existente /evm e acrescentar /info no final do URL do seu ponto de extremidade Quicknode para aceder aos pontos de extremidade de informação do 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.
Resolução de problemas
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.
Pré-visualização
Página Principal
Dashboard View
Saiba mais
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
- Fazer um fork do repositório
- Criar um ramo de funcionalidades:git checkout -b feature/amazing-feature
- Envie as suas alterações:git commit -m "Adicionar uma funcionalidade fantástica"
- Envie o seu branch:git push origin feature/amazing-feature
- Abrir um Pull Request.