Hyperliquid-portefeuillevolger
Bouw een realtime portefeuille-tracker die Hyperliquid-posities met onbeperkte looptijd, PnL, margbenutting en de inzet in de vault bijhoudt met behulp van het Hyperliquid-info-eindpunt van Quicknode.
Inleiding
Als actieve handelaar op Hyperliquid is een uitgebreide portefeuille-tracker onmisbaar om je posities, winst en verlies (PnL) en margbenutting in realtime bij te houden. In deze handleiding leer je hoe je een krachtige portefeuille-tracker kunt bouwen die elke Hyperliquid-wallet in de gaten houdt met behulp van het Hyperliquid-info-eindpunt van Quicknode.
Deze voorbeeldapp is uitsluitend bedoeld voor educatieve en demonstratiedoeleinden.
Voor een gedetailleerde handleiding over het helemaal zelf opzetten van deze portefeuille-tracker kun je onze uitgebreide handleiding op Quicknode raadplegen
Kenmerken
- Live positievolging: realtime updates over openstaande posities met PnL
- Portefeuilleanalyse: rekeningwaarde, marges en risicokengetallen
- Kluisbeheer: Houd de waarde van de kluis en de sluitingsschema’s bij
- Spot Holdings: Houd de tokensaldi en de waarde in USD bij
- Zoek een willekeurige portemonnee: schakel tussen verschillende handelsrekeningen
Technologiestack
Frontend
- React + TypeScript + Tailwind CSS + shadcn/ui & Radix UI
- Geeft handelsgegevens weer in een responsieve interface
- Controleer de peilingen-database om de 1000 ms op updates
- Regelt het wisselen van portemonnee via databaseverzoeken
Backend
- Node.js-indexer met een polling-interval van 500 ms
- Haal gegevens op van 5 verschillende Hyperliquid-eindpunten
- Slaat gegevens op in PostgreSQL met de juiste precisieafhandeling
- Verwerkt verzoeken om van portemonnee te wisselen vanuit de frontend
In deze handleiding worden korte polling-intervallen gebruikt (500 ms voor de indexer, 1000 ms voor de frontend) om realtime updates te demonstreren. Je kunt deze intervallen indien nodig aanpassen:
- Frontend:
src/Dashboard.tsxregels 260-264 - Wijzig de1000waarde in:const interval = setInterval(async () => {
await fetchData(currentWallet);
}, 1000); - Indexeerder:
src/indexer/indexer.tsregels 623-630 - Wijzig de500waarde in:setInterval(async () => {
await indexer.checkForWalletSwitch();
await indexer.indexData();
}, 500);
Houd je gebruik van Quicknode en Supabase bij om de kosten te optimaliseren.
Database
- Supabase PostgreSQL
- Slaat transactiegegevens op in 6 tabellen met financiële nauwkeurigheid (
DECIMAALsoorten) - Zorgt voor de communicatie tussen de frontend en de indexer via
verzoeken_om_van_portemonnee_te_wisselentabel - Maakt gebruik van unieke beperkingen om dubbele vermeldingen te voorkomen
Gegevensbron
- Hypervloeibaar
infoeindpunt via Quicknode - Biedt accountgegevens, posities, bewaarplaatsbestanden, spot-saldi en delegaties
- Geeft gegevens weer in JSON-formaat, waarbij getallen als tekenreeks worden weergegeven om de nauwkeurigheid te waarborgen
- Toegankelijk via HTTP POST-verzoeken met de parameter ‘wallet address’
Architectuur
┌─────────────────┐
│ Perp Trader │
└─────────┬───────┘
│ 1. Voer het walletadres in
▼
┌─────────────────┐
│ React-dashboard │◄─────────────────┐
└─────────┬───────┘ │
│ 2. Verzoek opslaan │ 6. Gegevens lezen en weergeven
▼ │
┌─────────────────┐ │
│ Supabase │◄─────────────────┤
│ PostgreSQL │ │
└─────────┬───────┘ │
│ 3. Verzoek detecteren │ 5. Gegevens opslaan
▼ │
┌─────────────────┐ │
│ Indexer │──────────────────┘
│ (500 ms poll) │
└─────────┬───────┘
│ 4. HyperCore-gegevens ophalen
▼
┌─────────────────┐
│ Quicknode │
│ Hyperliquid │
│ Eindpunt │
└─────────────────┘
De portefeuille-tracker bestaat uit drie onderdelen die via een PostgreSQL-database met elkaar communiceren. De indexer haalt gegevens op uit Hyperliquid, slaat deze op in de database, en de frontend vraagt de gegevens op uit de database om ze weer te geven.
Vereisten
- Quicknode-account met Hyperliquid-eindpunt
- Supabase-account
- Node.js v20+, npm en een code-editor
- Basisbegrippen van React/TypeScript en REST API’s
- Basisbegrippen van SQL
- Optioneel: een hypervloeibare, ononderbroken handelservaring
Quicknode biedt speciale Hyperliquid API-eindpunten, waardoor het niet meer nodig is om een eigen node te draaien:
- Vooraf geconfigureerde eindpunten waarvoor geen installatie nodig is
- Zorgt voor het beheer van verbindingen en failover
- Directe toegang tot HyperCore-gegevens zonder extra infrastructuur
Snel aan de slag
1. Kloon de repository
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/hyperliquid-portfolio-tracker
2. Omgevingsconfiguratiebestand
cp .env.example .env
3. Supabase-database instellen
-
Maak een nieuw Supabase-account aan of log in op supabase.com
-
Maak een nieuw project aan en klik vervolgens op de knop ‘Verbinden’
- Selecteer in het gedeelte ‘App Frameworks’ Reageren en verandering
met behulp vannaar Vite
- Kopieer de
VITE_SUPABASE_URLenVITE_SUPABASE_ANON_KEYwaarden aan je.envbestand 1 - Ga naar de SQL-editor, plak de inhoud van
supabase/schema.sql, klik vervolgens op Rennen
Hiermee worden alle benodigde tabellen en functies aangemaakt voor het opslaan en ophalen van handelsgegevens.
4. Quicknode instellen
- Maak een gratis proefaccount bij Quicknode aan
- Een Hyperliquid RPC-eindpunt aanmaken
- Kopieer de URL van het eindpunt en plak deze in je
.envbestand
Zorg ervoor dat je de bestaande /evm en voeg toe /info aan het einde van de URL van je Quicknode-eindpunt om toegang te krijgen tot de Hyperliquid-info-eindpunten.
5. Start de applicatie
npm install && npm run dev:both
Hiermee worden zowel de frontend-applicatie als de indexer uitgevoerd. Open je browser op http://localhost:5173 en klik op de knop ‘demowallet’ om de tracker in actie te zien.
Problemen oplossen
Als de indexer niet meer reageert of er geen gegevens worden weergegeven na het doorzoeken van de wallet, start je de indexer gewoon opnieuw op:
npm npm run dev:indexer
Probeer het dan nog eens door een geldig walletadres in te voeren.
Voorbeeld
Hoofdpagina
Dashboardweergave
Meer informatie
Toekomstige verbeteringen
- Waarschuwingen bij liquidatie: gebruikers waarschuwen wanneer posities gevaarlijke marges naderen
- Prestatiegrafieken: Volg de prestaties van je portefeuille in de loop van de tijd met Recharts
- Prijswaarschuwingen: ontvang meldingen via je favoriete meldingsdienst
- Multi-Wallet-dashboard: vergelijk meerdere handelsrekeningen naast elkaar
- Maak een fork van de repository
- Maak een feature-branch aan:git checkout -b feature/amazing-feature
- Sla je wijzigingen op:git commit -m "Geweldige functie toevoegen"
- Pushen van je branch:git push origin feature/amazing-feature
- Dien een pull-verzoek in.