跳转至主要内容
返回示例应用

HyperCore Order Monitor

Track trading orders on Hyperliquid Core (L1) in real-time with Quicknode Streams and KV Store for dynamic filtering.

部署图标
部署应用
GitHub 图标
查看代码库
前端框架/库：
React
语言：
TypeScript
构建工具/开发服务器：
Next.js
示例应用预览

概述

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.

建筑​

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

功能​


  • 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

先决条件​


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

项目结构​

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

环境变量​

复制 .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.

入门指南​

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 先决条件). 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​


  • 终点： 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

预览

预览

投稿与反馈
我们非常希望听到您的反馈，并欢迎大家为这个示例应用做出任何贡献！
如需报告问题或提供反馈，请在 qn-guide-示例 存储库。
如需贡献，请按照以下步骤操作：
  1. 分叉该仓库
  2. 创建一个功能分支：
    git checkout -b feature/amazing-feature
  3. 提交您的更改：
    git commit -m "添加超棒的功能"
  4. 推送您的分支：
    git push origin feature/amazing-feature
  5. 提交一个拉取请求。
探索更多示例应用
Hyperliquid Portfolio Tracker
Build a real-time portfolio tracker that monitors Hyperliquid perpetual positions, PnL, margin utilization, and vault holdings using Quicknode's Hyperliquid info endpoint.
Hyperliquid Portfolio Tracker
Hyperliquid Trading Dashboard
A dashboard for real-time whale trades, liquidations, and trending tokens from Hyperliquid using Quicknode Hypercore gRPC.
Hyperliquid TP/SL Heatmap
A real-time browser dashboard that visualizes resting Hyperliquid TP/SL trigger orders as price-level clusters, anchored against live bid/ask prices from Quicknode Hypercore gRPC streams.