Zum Hauptinhalt springen
Zurück zu den Beispiel-Apps

Hyperliquid TP/SL-Heatmap

Ein Echtzeit-Browser-Dashboard, das ruhende Hyperliquid-TP/SL-Trigger-Aufträge als Preisniveau-Cluster visualisiert, die an den aktuellen Geld- und Briefkursen aus den Quicknode Hypercore gRPC-Streams ausgerichtet sind.

GitHub-Symbol
Repo anzeigen
Frontend-Framework/Bibliothek:
Reagieren
Sprache:
TypeScript
Build-Tool/Entwicklungsserver:
Vite
Vorschau der Beispiel-App

Übersicht

Diese App stellt eine Verbindung her zu Der Hyperliquid-gRPC-Endpunkt von Quicknode um TP/SL-Auslöseereignisse live zu streamen (StreamTpslUpdates) sowie die besten Geld- und Briefkurse (StreamBboBook). Offene Orders werden in konfigurierbare Preisintervalle gruppiert und über WebSocket an den Browser übertragen, wo eine Canvas-basierte Heatmap den aggregierten Auslösedruck auf jeder Preisstufe in Echtzeit darstellt.

Die App verfügt über einen integrierten Demo-Modus, der einen synthetischen Feed verwendet, sodass Sie die Benutzeroberfläche ohne Anmeldedaten erkunden können.

Diese Beispiel-App dient ausschließlich zu Bildungs- und Demonstrationszwecken.

Architektur​

Browser (React + Canvas)
        ▲
        │  WebSocket
        │
Node.js HTTP + WebSocket-Server
        │
        ├── gRPC: StreamTpslUpdates ──┐
        │                             ├── Quicknode Hyperliquid gRPC-Endpunkt
        └── gRPC: StreamBboBook ──────┘

Funktionen​


  • Echtzeit-TP/SL-Heatmap: Preisbereichs-Cluster, die live aus Quicknode-gRPC-Streams aktualisiert werden
  • BBO-Anker: Aktuelle Geld- und Briefkurse, die zur Veranschaulichung der Marktlage auf der Heatmap eingeblendet werden
  • TP/SL-Mix-Anzeige: In jedem Feld wird ein kleiner grüner bzw. roter Marker angezeigt, der den Anteil von Take-Profit bzw. Stop-Loss angibt
  • Unterstützung mehrerer Vermögenswerte: Überwachen Sie BTC, ETH, SOL, HYPE und alle anderen Hyperliquid-Perp-Symbole gleichzeitig
  • Einstellbare Schaufelbreite: BUCKET_SIZE_PCT skaliert die Eimergröße im Verhältnis zum aktuellen Mittelpreis
  • Demo-Modus: wird mit einem synthetischen Feed ausgeführt, wenn Anmeldedaten fehlen oder DEMO_MODE=true
  • Gesundheitsendpunkt: GET /health Gibt den Serverstatus und den aktuellen Betriebsmodus als JSON zurück

Voraussetzungen​


  • Quicknode-Konto mit einem Hyperliquid-Endpunkt (gRPC-Zugriff erforderlich)
  • Node.js v18+
  • pnpm

Projektstruktur​

proto/
  orderbook.proto           # gRPC-Dienstdefinition
src/
  client/
    App.tsx                 # Coin-Auswahl und WebSocket-Client
    HeatmapCanvas.tsx       # Canvas-basierter Heatmap-Renderer
    main.tsx                # React-Einstiegspunkt
    styles.css              # App-Stile
  server/
    cluster-store.ts        # Clusterbildung von Bestellungen und BBO-Zustand
    config.ts               # Laden von Umgebungsvariablen
    demo.ts                 # Synthetischer Demo-Feed
    grpc.ts                 # gRPC-Client-Einrichtung
    server.ts               # HTTP- und WebSocket-Server
    streams.ts              # Live-gRPC-Stream-Verbindungen
  shared/
    types.ts                # Gemeinsame TypeScript-Typen

Umgebungsvariablen​

Kopieren .env.example zu .env und geben Sie Ihre Anmeldedaten ein:

# https://your-endpoint.hype-mainnet.quiknode.pro:10000
QUICKNODE_GRPC_ENDPOINT=Ihr-Endpunkt.hype-mainnet.quiknode.pro:10000
QUICKNODE_GRPC_TOKEN=Ihr-Auth-Token
TARGET_COINS=BTC,ETH,SOL
DEFAULT_COIN=BTC
BUCKET_SIZE_PCT=0,75
DEMO_MODE=false
PORT=8787
VariableBeschreibung
QUICKNODE_GRPC_ENDPOINTIhr Quicknode Hyperliquid gRPC-Endpunkt (Host:Port)
QUICKNODE_GRPC_TOKENAuthentifizierungstoken für den gRPC-Endpunkt
TARGET_COINSDurch Kommas getrennte Liste der zu überwachenden Hyperliquid-Perp-Symbole
DEFAULT_COINWelche Münze soll beim Laden angezeigt werden (muss in TARGET_COINS)
BUCKET_SIZE_PCTSpanne in Prozent des Mittelkurses (z. B. 0.75 = ~500 $ bei BTC nahe 64.000 $)
DEMO_MODUSEinstellen auf wahr um den Demo-Modus unabhängig von den Anmeldedaten zu erzwingen
HAFENHTTP-Server-Port (Standard: 8787)

Erste Schritte​

1. Das Repo klonen​

git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/hyperliquid-tpsl-heatmap

2. Abhängigkeiten installieren​

pnpm installieren

3. Umgebung konfigurieren​

cp .env.example .env

Öffnen .env und festlegen QUICKNODE_GRPC_ENDPOINT und QUICKNODE_GRPC_TOKEN mit Ihren Anmeldedaten für den Quicknode Hyperliquid-Endpunkt. Wenn Sie diese weglassen, wird die App automatisch im Demo-Modus gestartet.

4. Starten Sie die App​

pnpm dev

Öffnen Sie http://localhost:8787 in Ihrem Browser.

Vorschau

Vorschau auf das Hyperliquid-Dashboard „TP/SL-Heatmap“
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.
Entdecken Sie weitere Beispiel-Apps
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.
Hyperliquid-Portfolio-Tracker
HyperCore-Auftragsüberwachung
Verfolgen Sie Handelsaufträge auf Hyperliquid Core (L1) in Echtzeit mit Quicknode Streams und KV Store für dynamische Filterung.
Hyperliquid-Handels-Dashboard
Ein Dashboard für Echtzeit-Whale-Trades, Liquidationen und Trend-Token von Hyperliquid unter Verwendung von Quicknode Hypercore gRPC.