Hyperliquid-Handels-Dashboard
Ein Dashboard für Echtzeit-Whale-Trades, Liquidationen und Trend-Token von Hyperliquid unter Verwendung von Quicknodes Hypercore gRPC.

Übersicht
Diese Beispiel-App streamt jeden Handel von Hyperliquid über Quicknodes Hypercore gRPC und filtert dabei Whale-Trades, Liquidationen und Trend-Token heraus. Das bidirektionale gRPC-Streaming liefert Daten mit einer Latenz von weniger als einer Sekunde, ohne dass ein Polling erforderlich ist.
Eine Videoanleitung zur Erstellung der App findest du in unserem Video
Architektur
Quicknode Hypercore gRPC
(jeden Handel streamen)
│
▼
┌─────────────────┐
│ Worker │
│ Filter + Agg │
└────────┬────────┘
│
┌────────────┼────────────┐
▼ ▼ ▼
Großinvestoren Liquidationen Trends
(≥ 50.000 $) (1-Monats-Intervalle)
│ │ │
└────────────┼────────────┘
▼
┌─────────────────┐
│ PostgreSQL │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Next.js │
│ [15 Min./30 Min./1 Std.] │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Dashboard │
└─────────────────┘
Funktionen
- Erkennung von Großgeschäften (Nominalwert≥ 50.000 $, konfigurierbar)
- Verfolgung von Liquidationen mit vollständigen Metadaten (Benutzer, Markpreis, Methode)
- Beliebte Token, sortiert nach Handelsvolumen mit Aufschlüsselung nach Kauf und Verkauf
- Filterung nach Zeitfenstern (15 min, 30 min, 1 h)
- Individuelle Coin-Verfolgung, beliebiger Hyperliquid-Token
- Volumen-Sparklines mit Trendindikatoren
- Deep Links in Explorer zur Handelsüberprüfung
- 1-Minuten-Aggregationsintervalle für effiziente Trendabfragen
Voraussetzungen
- Node.js 20+ ist installiert
- Für eine PostgreSQL-Instanz können Sie eine Plattform wie Aiven um eine gehostete Instanz zu starten. Das benötigen wir für
DATABASE_URL. - Quicknode-Konto mit dem Hypercore-gRPC-Endpunkt. Das benötigen wir für
GRPC_ENDPOINTundAUTH_TOKEN.
Erste Schritte
1. Klonen und installieren
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/hyperliquid-trading-dashboard
npm install
2. PostgreSQL starten
Wenn Sie eine gehostete PostgreSQL-Instanz verwenden, überspringen Sie diesen Schritt.
npm npm db:up ausführen
3. Umgebung konfigurieren
export DATABASE_URL="postgresql://postgres:postgres@localhost:5432/hypercore"
export GRPC_ENDPOINT="your-endpoint.hype-mainnet.quiknode.pro:10000"
export AUTH_TOKEN="dein_quicknode-Token"
Hinweis: Füge diese Befehle einfach mit den entsprechenden Werten in zwei Terminal-Fenster ein. Du benötigst ein Fenster für die Next.js-App und ein weiteres für den Datenbank-Worker.
4. Datenbank initialisieren
npm npm db:push ausführen
5. Starten Sie den Worker
npm Worker ausführen
Dadurch wird der Worker-Prozess gestartet, der:
- Stellt eine Verbindung zu Quicknode HyperCore gRPC her
- Überträgt Live-Handelsveranstaltungen
- Speichert Rohdaten zu Handelsgeschäften und aggregierte Daten in PostgreSQL
- Verfolgt die Aktivitäten der Wale und deren Liquidationen
Du solltest sehen:
Ping ok: { count: 1 }
Ingester running
WHALE_MIN_USD: 50000
6. Starten Sie das Dashboard
npm run dev
Öffnen Sie http://localhost:3000
Datenbank
PostgreSQL mit Prisma ORM. Zwei Tabellen:
Handelsveranstaltung- Einzelne Whale-Trades und LiquidationenTradeAggMinute- Minutengenaue Aggregationen zur Trendanalyse
Häufige Befehle:
npm db:up ausführen # PostgreSQL-Container starten
npm run db:push # Schema anwenden
npm run db:studio # Prisma Studio öffnen
API-Endpunkte
GET /api/whales?coin=BTC&windowMin=15&thresholdUsd=50000- GroßhandelsgeschäfteGET /api/liquidations?windowMin=15- LiquidationenGET /api/trending?windowMin=15- Beliebte KryptowährungenGET /api/sparklines?windowMin=15&coins=BTC,ETH,SOL- Sparklines für das VolumenGET /api/health- Gesundheitscheck
Vorschau

Mehr erfahren
- 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.