Zum Hauptinhalt springen
Zurück zu den Beispiel-Apps

HyperCore-Auftragsüberwachung

Verfolgen Sie Handelsaufträge auf Hyperliquid Core (L1) in Echtzeit mit Quicknode Streams und KV Store für dynamische Filterung.

Symbol „Bereitstellen“
App bereitstellen
GitHub-Symbol
Repo anzeigen
Frontend-Framework/Bibliothek:
Reagieren
Sprache:
TypeScript
Build-Tool/Entwicklungsserver:
Next.js
Vorschau der Beispiel-App

Übersicht

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.

Architektur​

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

Funktionen​


  • 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

Voraussetzungen​


  • Node.js 20+ and a package manager (pnpm, yarn, npm).
  • Quicknode-Konto 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).

Projektstruktur​

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

Umgebungsvariablen​

Kopieren .env.example zu .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.

Erste Schritte​

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 Voraussetzungen). 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

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

Datenbank​

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

Häufige Befehle:

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

Webhook Security and Payload​


  • Endpunkt: 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-Endpunkte​


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

Vorschau

Vorschau

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
Hyperliquid-Handels-Dashboard
Ein Dashboard für Echtzeit-Whale-Trades, Liquidationen und Trend-Token von Hyperliquid unter Verwendung von Quicknode Hypercore gRPC.
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.