Carte thermique TP/SL d'Hyperliquid
Un tableau de bord accessible via un navigateur en temps réel qui visualise les ordres de déclenchement TP/SL inactifs d'Hyperliquid sous forme de groupes de niveaux de prix, indexés sur les cours acheteur/vendeur en temps réel provenant des flux gRPC de Quicknode Hypercore.
Aperçu
Cette application se connecte à Point de terminaison gRPC « Hyperliquid » de Quicknode pour diffuser en direct les événements liés aux ordres TP/SL (StreamTpslUpdates) et les meilleurs cours acheteur/vendeur (StreamBboBook). Les ordres ouverts sont regroupés en tranches de prix configurables et transmis au navigateur via WebSocket, où une carte thermique basée sur un canevas affiche en temps réel la pression agrégée des déclencheurs à chaque niveau de prix.
L'application intègre un mode démo qui utilise un flux synthétique, ce qui vous permet de découvrir l'interface utilisateur sans avoir à saisir d'identifiants.
Cette application exemple est fournie uniquement à des fins pédagogiques et de démonstration.
Architecture
Navigateur (React + Canvas)
▲
│ WebSocket
│
Serveur HTTP + WebSocket Node.js
│
├── gRPC : StreamTpslUpdates ──┐
│ ├── Point de terminaison gRPC Hyperliquid de Quicknode
└── gRPC : StreamBboBook ──────┘
Fonctionnalités
- Carte thermique TP/SL en temps réel: regroupements par tranches de prix mis à jour en direct à partir des flux gRPC de Quicknode
- Ancrage BBO: cours acheteur et vendeur actuels superposés à la carte thermique pour situer le contexte du marché
- Indicateur de répartition TP/SL: chaque compartiment affiche un petit marqueur vert ou rouge indiquant la part respective du « take-profit » et du « stop-loss »
- Prise en charge de plusieurs actifs: suivez simultanément le BTC, l'ETH, le SOL, le HYPE et tout autre symbole « perp » d'Hyperliquid
- Largeur de godet réglable:
BUCKET_SIZE_PCTadapte la taille du panier en fonction du cours moyen actuel - Mode démo: s'exécute avec des données factices lorsque les identifiants sont manquants ou
DEMO_MODE=true - Critère d'évaluation en matière de santé:
GET /healthrenvoie l'état du serveur et le mode d'exécution actuel au format JSON
Prérequis
- Compte Quicknode avec un point de terminaison Hyperliquid (accès gRPC requis)
- Node.js v18 et versions ultérieures
- pnpm
Structure du projet
proto/
orderbook.proto # Définition du service gRPC
src/
client/
App.tsx # Sélecteur de cryptomonnaie et client WebSocket
HeatmapCanvas.tsx # Rendu de carte thermique basé sur Canvas
main.tsx # Point d'entrée React
styles.css # Styles de l'application
server/
cluster-store.ts # Regroupement des commandes et état BBO
config.ts # Chargement des variables d’environnement
demo.ts # Flux de démonstration synthétique
grpc.ts # Configuration du client gRPC
server.ts # Serveur HTTP + WebSocket
streams.ts # Connexions de flux gRPC en direct
shared/
types.ts # Types TypeScript partagés
Variables d'environnement
Copier .env.example to .env puis saisissez vos identifiants :
# https://your-endpoint.hype-mainnet.quiknode.pro:10000
QUICKNODE_GRPC_ENDPOINT=votre-point-de-terminaison.hype-mainnet.quiknode.pro:10000
QUICKNODE_GRPC_TOKEN=votre-jeton-d'authentification
TARGET_COINS=BTC,ETH,SOL
DEVISE_PAR_DÉFAUT=BTC
TAILLE_DU_BUCKET_EN_POURCENTAGE=0,75
MODE_DE_DÉMONSTRATION=false
PORT=8787
| Variable | Description |
|---|---|
QUICKNODE_GRPC_ENDPOINT | Votre point de terminaison gRPC Quicknode Hyperliquid (hôte:port) |
QUICKNODE_GRPC_TOKEN | Jeton d'authentification pour le point de terminaison gRPC |
TARGET_COINS | Liste, séparée par des virgules, des symboles « perp » d'Hyperliquid à surveiller |
DEFAULT_COIN | Quelle pièce afficher au chargement (doit être dans TARGET_COINS) |
BUCKET_SIZE_PCT | Largeur de la fourchette en pourcentage du cours moyen (par exemple, 0.75 = ~500 $ par lot sur le BTC, à près de 64 000 $) |
MODE_DÉMO | Régler sur vrai pour forcer le mode démo, quelles que soient les informations d'identification fournies |
PORT | Port du serveur HTTP (par défaut : 8787) |
Démarrer
1. Cloner le dépôt
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/hyperliquid-tpsl-heatmap
2. Installer les dépendances
pnpm installer
3. Configurer l'environnement
cp .env.example .env
Ouvrir .env et définir QUICKNODE_GRPC_ENDPOINT et QUICKNODE_GRPC_TOKEN avec vos identifiants de connexion au point de terminaison Quicknode Hyperliquid. Si vous ne les indiquez pas, l'application démarrera automatiquement en mode démo.
4. Lancez l'application
pnpm dev
Ouvrez la page http://localhost:8787 dans votre navigateur.
Aperçu
- Créer une branche du dépôt
- Créer une branche de fonctionnalité :git checkout -b feature/amazing-feature
- Validez vos modifications :git commit -m "Ajout d'une fonctionnalité géniale"
- Publiez votre branche :git push origin feature/amazing-feature
- Créez une Pull Request.
