跳至主要內容
返回範例應用程式

Hyperliquid Trading Dashboard

A dashboard for real-time whale trades, liquidations, and trending tokens from Hyperliquid using Quicknode's Hypercore gRPC.

部署圖示
部署應用程式
GitHub 圖示
檢視儲存庫
前端框架／函式庫：
Next.js
語言：
TypeScript
建置工具／開發伺服器：
npm
範例應用程式預覽

概覽

This sample app streams every trade from Hyperliquid via Quicknode's Hypercore gRPC and filters for whale trades, liquidations, and trending tokens. gRPC bidirectional streaming delivers data with sub-second latency, with no polling required.


其他資源

For video walkthrough of building the app, check out our video

建築​

      Quicknode Hypercore gRPC
        (stream every trade)
                  │
                  ▼
        ┌─────────────────┐
        │     Worker      │
        │  Filter + Agg   │
        └────────┬────────┘
                 │
    ┌────────────┼────────────┐
    ▼            ▼            ▼
 Whales    Liquidations   Trending
 (≥$50K)                  (1m buckets)
    │            │            │
    └────────────┼────────────┘
                 ▼
        ┌─────────────────┐
        │    PostgreSQL   │
        └────────┬────────┘
                 │
                 ▼
        ┌─────────────────┐
        │     Next.js     │
        │  [15m/30m/1h]   │
        └────────┬────────┘
                 │
                 ▼
        ┌─────────────────┐
        │    Dashboard    │
        └─────────────────┘

特色​


  • Whale trade detection (≥$50K notional, configurable)
  • Liquidation tracking with full metadata (user, mark price, method)
  • Trending tokens ranked by trade count with buy/sell breakdown
  • Time window filtering (15m, 30m, 1h)
  • Custom coin tracking, any Hyperliquid token
  • Volume sparklines with trend indicators
  • Explorer deep links for trade verification
  • 1-minute aggregation buckets for efficient trending queries

先決條件​


  • Node.js 20+ installed
  • A PostgreSQL instance, you can use a platform like Aiven to spin up a hosted instance. We'll need this for DATABASE_URL.
  • Quicknode 帳戶 with Hypercore gRPC endpoint. We'll need this for GRPC_ENDPOINT 以及 AUTH_TOKEN.

開始使用​

1. Clone and install​

git clone https://github.com/quiknode-labs/qn-guide-examples.git

cd qn-guide-examples/sample-dapps/hyperliquid-trading-dashboard

npm install

2. Start PostgreSQL​

If you are using a hosted PostgreSQL instance, skip this step.

npm run db:up

3. Configure environment​

export DATABASE_URL="postgresql://postgres:postgres@localhost:5432/hypercore"
export GRPC_ENDPOINT="your-endpoint.hype-mainnet.quiknode.pro:10000"
export AUTH_TOKEN="your_quicknode_token"

Note: Just paste these with values in two terminal windows. You'll need one window for the Next.js app and another for the database worker.

4. Initialize database​

npm run db:push

5. Start the worker​

npm run worker

This starts the worker process that:

  • Connects to Quicknode HyperCore gRPC
  • Streams live trading events
  • Stores raw trades and aggregated data in PostgreSQL
  • Tracks whale activity and liquidations

You should see:

Ping ok: { count: 1 }
Ingester running
WHALE_MIN_USD: 50000

6. Start the dashboard​

npm run dev

Open http://localhost:3000

資料庫​

PostgreSQL with Prisma ORM. Two tables:

  • TradeEvent - Individual whale trades and liquidations
  • TradeAggMinute - Per-minute aggregations for trending

常用指令：​

npm run db:up       # Start PostgreSQL container
npm run db:push     # Apply schema
npm run db:studio   # Open Prisma Studio

API 端點​


  • GET /api/whales?coin=BTC&windowMin=15&thresholdUsd=50000 - Whale trades
  • GET /api/liquidations?windowMin=15 - Liquidations
  • GET /api/trending?windowMin=15 - Trending coins
  • GET /api/sparklines?windowMin=15&coins=BTC,ETH,SOL - Volume sparklines
  • GET /api/health - Health check

預覽

預覽

了解更多​


貢獻與回饋
我們非常樂意聽取您的意見，並歡迎您為這個範例應用程式提供任何貢獻！
若要回報問題或提供意見回饋，請在 qn-guide-examples 儲存庫。
若要貢獻，請依照以下步驟操作：
  1. 分叉此儲存庫
  2. 建立功能分支：
    git checkout -b feature/amazing-feature
  3. 將您的變更提交：
    git commit -m "新增超棒的功能"
  4. 推送您的分支：
    git push origin feature/amazing-feature
  5. 開啟一個 Pull Request。
探索更多範例應用程式
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
HyperCore Order Monitor
Track trading orders on Hyperliquid Core (L1) in real-time with Quicknode Streams and KV Store for dynamic filtering.
Hyperliquid TP/SL 熱力圖
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.