Hyperliquid-Portfolio-Tracker
Entwickeln Sie einen Echtzeit-Portfolio-Tracker, der mithilfe des Hyperliquid-Info-Endpunkts von Quicknode die unbefristeten Positionen, den PnL, die Margin-Auslastung und die Bestände im Vault von Hyperliquid überwacht.
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.
Diese Beispiel-App dient ausschließlich zu Bildungs- und Demonstrationszwecken.
For an in-depth guide on implementing this portfolio tracker from scratch, check out our comprehensive guide on Quicknode
Funktionen
- 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
- Zeigt Handelsdaten in einer responsiven Benutzeroberfläche an
- Die Datenbank wird alle 1000 ms auf Aktualisierungen überprüft
- Erledigt den Wechsel der Wallet über Datenbankabfragen
Backend
- Node.js indexer with 500ms polling interval
- Ruft Daten von 5 verschiedenen Hyperliquid-Endpunkten ab
- Speichert Daten in PostgreSQL unter Berücksichtigung der korrekten Genauigkeit
- Verarbeitet Anfragen zum Wechseln der Wallet vom Frontend aus
In dieser Anleitung werden kurze Abfrageintervalle (500 ms für den Indexer, 1000 ms für das Frontend) verwendet, um Echtzeit-Aktualisierungen zu veranschaulichen. Sie können diese Intervalle bei Bedarf anpassen:
- Frontend:
src/Dashboard.tsxZeilen 260–264 – Ändere die1000Wert in:const interval = setInterval(async () => {
await fetchData(currentWallet);
}, 1000); - Indexer:
src/indexer/indexer.tsZeilen 623–630 – Ändere die500Wert in:setInterval(async () => {
await indexer.checkForWalletSwitch();
await indexer.indexData();
}, 500);
Überwachen Sie Ihre Quicknode- und Supabase-Nutzung, um die Kosten zu optimieren.
Datenbank
- Supabase PostgreSQL
- Speichert Handelsdaten in 6 Tabellen mit finanzieller Genauigkeit (
DEZIMALTypen) - Wickelt die Kommunikation zwischen Frontend und Indexer über
wallet_switch_requestsTabelle - Verwendet Eindeutigkeitsprüfungen, um doppelte Einträge zu verhindern
Datenquelle
- Hyperflüssigkeit
InfoEndpunkt über Quicknode - Stellt Kontodaten, Positionen, Tresorbestände, Spot-Guthaben und Bevollmächtigungen bereit
- Gibt Daten im JSON-Format zurück, wobei Zahlen als Zeichenfolgen mit genauer Angabe der Genauigkeit dargestellt werden
- Zugriff über HTTP-POST-Anfragen mit dem Parameter „Wallet-Adresse“
Architektur
┌─────────────────┐
│ Perp Trader │
└─────────┬───────┘
│ 1. Wallet-Adresse eingeben
▼
┌─────────────────┐
│ React-Dashboard │◄─────────────────┐
└─────────┬───────┘ │
│ 2. Anfrage speichern │ 6. Daten lesen und anzeigen
▼ │
┌─────────────────┐ │
│ Supabase │◄─────────────────┤
│ PostgreSQL │ │
└─────────┬───────┘ │
│ 3. Anfrage erkennen │ 5. Daten speichern
▼ │
┌─────────────────┐ │
│ Indexer │──────────────────┘
│ (500 ms Abfrage) │
└─────────┬───────┘
│ 4. HyperCore-Daten abrufen
▼
┌─────────────────┐
│ Quicknode │
│ Hyperliquid │
│ Endpunkt │
└─────────────────┘
Der Portfolio-Tracker besteht aus drei Komponenten, die über eine PostgreSQL-Datenbank miteinander kommunizieren. Der Indexer ruft Daten aus Hyperliquid ab, speichert sie in der Datenbank, und das Frontend fragt die Datenbank zur Anzeige ab.
Voraussetzungen
- Quicknode account with Hyperliquid endpoint
- Supabase-Konto
- Node.js v20+, npm und ein Code-Editor
- Grundlegende Konzepte zu React/TypeScript und REST-APIs
- Grundlegende SQL-Konzepte
- Optional: Ununterbrochenes Handelserlebnis mit Hyperliquid
Quicknode stellt dedizierte Hyperliquid-API-Endpunkte bereit, sodass Sie keinen eigenen Knoten betreiben müssen:
- Vorkonfigurierte Endgeräte, die keine Einrichtung erfordern
- Übernimmt die Verbindungsverwaltung und das Failover
- Direkter Zugriff auf HyperCore-Daten ohne zusätzliche Infrastruktur
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 Reagieren and change
unter Verwendung vonzu Vite
- Copy the
VITE_SUPABASE_URLundVITE_SUPABASE_ANON_KEYvalues to your.envfile 1 - Navigieren Sie zu der SQL-Editor, 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
.envDatei
Stellen Sie sicher, dass Sie die vorhandene /evm und füge hinzu /info am Ende Ihrer Quicknode-Endpunkt-URL, um Zugriff auf die Hyperliquid-Info-Endpunkte zu erhalten.
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.
Fehlerbehebung
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.
Vorschau
Startseite
Dashboard View
Mehr erfahren
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
- Das Repository forken
- Erstelle einen Feature-Branch:git checkout -b feature/amazing-feature
- Speichere deine Änderungen:git commit -m "Tolle Funktion hinzufügen"
- Deinen Branch pushen:git push origin feature/amazing-feature
- Erstelle einen Pull Request.