Zum Hauptinhalt springen
Zurück zu den Beispiel-Apps

Hyperliquid-Handels-Dashboard

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

Frontend-Framework/Bibliothek:
Next.js
Sprache:
TypeScript
Build-Tool/Entwicklungsserver:
npm
Vorschau der Beispiel-App

Ü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.


Weitere Ressourcen

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_ENDPOINT und AUTH_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 Liquidationen
  • TradeAggMinute - 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äfte
  • GET /api/liquidations?windowMin=15 - Liquidationen
  • GET /api/trending?windowMin=15 - Beliebte Kryptowährungen
  • GET /api/sparklines?windowMin=15&coins=BTC,ETH,SOL - Sparklines für das Volumen
  • GET /api/health - Gesundheitscheck

Vorschau

Vorschau

Mehr erfahren


Beiträge & Feedback
Wir würden uns sehr über Ihr Feedback freuen und begrüßen jeden Beitrag zu dieser Beispiel-App!
Um Probleme zu melden oder Feedback zu geben, eröffne ein GitHub-Issue im qn-Anleitung-Beispiele Repository.
Um einen Beitrag zu leisten, gehen Sie bitte wie folgt vor:
  1. Das Repository forken
  2. Erstelle einen Feature-Branch:
    git checkout -b feature/amazing-feature
  3. Speichere deine Änderungen:
    git commit -m "Tolle Funktion hinzufügen"
  4. Deinen Branch pushen:
    git push origin feature/amazing-feature
  5. Erstelle einen Pull Request.