Ga naar de hoofdinhoud
Terug naar voorbeeldapps

HyperCore-bestellingsmonitor

Volg handelsorders op Hyperliquid Core (L1) in realtime met Quicknode Streams en KV Store voor dynamische filtering.

Pictogram ‘Implementeren’
App installeren
GitHub-pictogram
Repo bekijken
Frontend-framework/bibliotheek:
Reageren
Taal:
TypeScript
Bouwtool/ontwikkelingsserver:
Next.js
Voorbeeld van een app-preview

Overzicht

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.

Architectuur​

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

Kenmerken​


  • 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

Vereisten​


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

Projectopbouw​

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

Omgevingsvariabelen​

Kopiëren .env.example naar .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.

Aan de slag​

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

Veelgebruikte opdrachten:

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

Webhook Security and Payload​


  • Eindpunt: 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-eindpunten​


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

Voorbeeld

Voorbeeld

Bijdragen en feedback
We horen graag wat je ervan vindt en staan open voor alle bijdragen aan deze voorbeeldapp!
Om problemen te melden of feedback te geven, maak je een GitHub-issue aan in de qn-gids-voorbeelden repository.
Volg deze stappen om een bijdrage te leveren:
  1. Maak een fork van de repository
  2. Maak een feature-branch aan:
    git checkout -b feature/amazing-feature
  3. Sla je wijzigingen op:
    git commit -m "Geweldige functie toevoegen"
  4. Pushen van je branch:
    git push origin feature/amazing-feature
  5. Dien een pull-verzoek in.
Bekijk meer voorbeeldapps
Hyperliquid-portefeuillevolger
Bouw een realtime portefeuille-tracker die Hyperliquid-posities met onbeperkte looptijd, PnL, margbenutting en de inzet in de vault bijhoudt met behulp van het Hyperliquid-info-eindpunt van Quicknode.
Hyperliquid-portefeuillevolger
Hyperliquid-handelsdashboard
Een dashboard voor realtime transacties met ‘whales’, liquidaties en trending tokens van Hyperliquid, met behulp van Quicknode Hypercore gRPC.
Hyperliquid TP/SL-warmtekaart
Een realtime browserdashboard dat inactieve Hyperliquid TP/SL-triggerorders weergeeft als clusters van prijsniveaus, gekoppeld aan actuele bied- en laatkoersen uit de Quicknode Hypercore gRPC-streams.