Aller directement au contenu principal
Retour aux exemples d'applications

Moniteur de commandes HyperCore

Suivez en temps réel les ordres de négociation sur Hyperliquid (L1) grâce à Quicknode Streams KV Store, qui permettent un filtrage dynamique.

Icône de déploiement
Déployer l'application
Icône GitHub
Consulter le dépôt
Framework/bibliothèque front-end :
Réagir
Langue :
TypeScript
Outil de compilation/serveur de développement :
Next.js
Aperçu de l'application d'exemple

Présentation générale

This sample app enables real-time tracking of trading orders on Hyperliquid Core (L1). It leverages Quicknode Streams + Key-Value Store (KV Store) for intelligent, dynamic filtering without requiring stream restarts. Monitor whale traders, track order statuses, and receive live updates through a modern UI.

Architecture​

Hyperliquid Core (L1)
  -> Quicknode Streams + KV
    -> POST /api/webhook/streams (signature verified)
      -> OrderLog upsert + SSE emit
        -> Live UI order feed

Caractéristiques​


  • Real-time address filtering via KV Store lists
  • Dynamic status filtering (open, filled, cancelled, rejected, triggered)
  • Blockchain-native filtering at the stream level
  • Server-Sent Events (SSE) for live UI updates
  • Quicknode Streams setup scripts (create + activate)
  • Bulk add trader addresses
  • Webhook signature verification and timestamp checks
  • ENS resolution for Ethereum addresses (optional)
  • Prisma + SQLite local storage

Conditions préalables​


  • Node.js 20+ and a package manager (pnpm, yarn, npm).
  • Quicknode account with Streams and KV Store access: Create an account, and get your Admin API key for QN_API_KEY.
  • Public webhook URL: Use a tunnel like ngrok or deploy the app so APP_URL is reachable by Quicknode.
  • Optional: Ethereum mainnet RPC endpoint for ENS name resolution (QN_EVM_ENDPOINT).

Structure du projet​

filters/
  hl-orders-filter.js     # Quicknode Streams filter (HyperCore)
scripts/
  setup-streams.ts        # Creates KV lists + stream (paused)
  activate-streams.ts     # Activates stream by id
src/
  app/api/                # API routes (webhooks, users, SSE)
  lib/                    # Quicknode, webhook, SSE helpers
  types/                  # TypeScript definitions
prisma/
  schema.prisma           # SQLite schema

Environment Variables​

Copier .env.example à .env and fill in:

QN_API_KEY=""                  # Quicknode API key with Streams + KV permissions
QN_STREAM_SECURITY_TOKEN=""    # Stream security token (from setup script)
APP_URL="http://localhost:3000" # Public app URL (ngrok for local webhooks)
DATABASE_URL="file:./dev.db"   # SQLite DB
QN_EVM_ENDPOINT=""             # Optional: Ethereum RPC for ENS resolution
ADMIN_API_KEY=""               # Optional for local dev, required for production

Notes:

  • QN_STREAM_SECURITY_TOKEN is returned by setup:streams.
  • APP_URL must be reachable by Quicknode (use ngrok or a deployed URL).
  • Ensure your API key has both Streams and KV Store permissions enabled.

Pour commencer​

1. Install dependencies​

pnpm install
# npm install
# yarn install

2. Create your env file​

cp .env.example .env

3. Add required variables​

Fill in .env (see Conditions préalables). For local webhooks, expose your app with ngrok and copy the HTTPS URL into APP_URL:

ngrok http 3000

4. Initialize the database​

pnpm prisma migrate dev --name hypercore-order-monitor
pnpm db:seed

The seed script creates status filters (enabling open, filled, triggered by default) and adds a sample trader address.

5. Create Quicknode Streams + KV lists​

pnpm run setup:streams

Copy the printed security token into .env (QN_STREAM_SECURITY_TOKEN).

6. Start the app​

pnpm dev

7. Activate the stream​

pnpm run activate:streams

Open http://localhost:3000, add trader addresses, and you should see live order events as streams deliver webhooks.

Database​

SQLite is used by default. Prisma schema is in prisma/schema.prisma.

Common commands:

pnpm prisma migrate dev --name <name>
pnpm db:seed
pnpm prisma studio

Webhook Security and Payload​


  • Endpoint: POST /api/webhook/streams
  • Headers required: x-qn-nonce, x-qn-timestamp, x-qn-signature
  • Payload can be gzip compressed; the handler auto-detects content-encoding: gzip
  • Signature verification uses QN_STREAM_SECURITY_TOKEN

API Endpoints​


Public endpoints:

  • GET /api/health - health check
  • GET /api/users - list monitored traders
  • GET /api/statuses - list status filters
  • POST /api/webhook/streams - Quicknode Streams webhook
  • GET /api/sse - SSE stream of order events

Protected endpoints (require Authorization: Bearer <ADMIN_API_KEY>):

  • POST /api/users - add a trader
  • POST /api/users/bulk - bulk add traders (50 address limit)
  • PATCH /api/users?id=... - update trader
  • DELETE /api/users?id=... - remove trader
  • GET /api/orders - list orders with filters
  • PATCH /api/statuses - update enabled statuses
  • POST /api/statuses/reset - reset to defaults

Synchronization Scripts​


  • pnpm run sync:statuses - Reconciles KV status list with database
  • pnpm run sync:users - Reconciles KV user list with database
  • pnpm run reset:kv - Deletes HyperCore KV lists

Aperçu

Aperçu

Contributions et commentaires
Nous serions ravis de connaître votre avis et nous vous invitons à contribuer à cette application d'exemple !
Pour signaler des problèmes ou faire part de vos commentaires, créez un ticket GitHub dans le qn-guide-exemples référentiel.
Pour contribuer, procédez comme suit :
  1. Créer une branche du dépôt
  2. Créer une branche de fonctionnalité :
    git checkout -b feature/amazing-feature
  3. Validez vos modifications :
    git commit -m "Ajout d'une fonctionnalité géniale"
  4. Publiez votre branche :
    git push origin feature/amazing-feature
  5. Créez une demande de fusion.
Découvrez d'autres exemples d'applications
Outil de suivi Hyperliquid
Développez un outil de suivi de portefeuille en temps réel qui surveille les positions Hyperliquid , le PnL, l'utilisation de la marge et les avoirs en coffre-fort à l'aide endpoint Hyperliquid Quicknode.
Outil de suivi Hyperliquid
Tableau de bord Hyperliquid
Un tableau de bord permettant de suivre en temps réel les transactions importantes, les liquidations et les jetons tendance sur Hyperliquid Quicknode gRPC.
Carte thermique Hyperliquid
Un tableau de bord accessible via un navigateur en temps réel qui visualise les ordres de déclenchement Hyperliquid inactifs Hyperliquid sous forme de clusters de niveaux de prix, indexés sur les cours acheteur/vendeur en temps réel provenantstreams gRPC Quicknode .