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

Hyperliquid 儀表板

一個Hyperliquid Quicknode HypercoregRPC，展示Hyperliquid 平台上鯨魚交易、強制平倉及熱門代幣的即時儀表板。

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

概覽

此範例應用程式Hyperliquid Quicknode HypercoregRPC streams Hyperliquid 上的streams 交易，並篩選鯨魚交易、強制平倉及熱門代幣。gRPC 串流可在不到一秒的延遲內傳輸資料，且無需進行輪詢。


其他資源

如需觀看關於建立此應用程式的影片教學，請觀看我們的影片

建築​

     Quicknode  gRPC
        (即時串流每筆交易)
                  │
                  ▼
        ┌─────────────────┐
        │     工作節點      │
        │  篩選 + 彙總   │
        └────────┬────────┘
                 │
    ┌────────────┼────────────┐
    ▼            ▼            ▼
 鯨魚    清算   熱門趨勢
 (≥5萬美元)                  (100萬區間)
    │            │            │
    └────────────┼────────────┘
                 ▼
        ┌─────────────────┐
        │    PostgreSQL   │
        └────────┬────────┘
                 │
                 ▼
        ┌─────────────────┐
        │     Next.js     │
        │  [15 分鐘/30 分鐘/1 小時]   │
        └────────┬────────┘
                 │
                 ▼
        ┌─────────────────┐
        │    儀表板    │
        └─────────────────┘

特色​


  • 大額交易偵測（名義金額≥50,000美元，可自訂）
  • 包含完整元資料（使用者、標價、方法）的清算追蹤
  • 依交易次數排序的熱門代幣，並附買賣明細
  • 時間區間篩選（15 分鐘、30 分鐘、1 小時）
  • 自訂代幣追蹤，適用於任何Hyperliquid
  • 帶有趨勢指標的成交量微圖
  • Explorer 的深度連結用於交易驗證
  • 1 分鐘的彙總區間，用於高效執行趨勢查詢

先決條件​


  • 已安裝 Node.js 20 以上版本
  • 一個 PostgreSQL 執行個體，您可以使用類似 Aiven 以啟動一個託管實例。我們需要這個來 DATABASE_URL.
  • Quicknode 搭配 HypercoregRPC endpoint。我們需要這個來 GRPC 以及 AUTH_TOKEN.

開始使用​

1. Clone and install​

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

cdhyperliquid

npm 安裝

2. Start PostgreSQL​

如果您使用的是託管式的 PostgreSQL 實例，請跳過此步驟。

npm 執行 db:up

3. Configure environment​

export DATABASE_URL="postgresql://postgres:postgres@localhost:5432/hypercore"
export GRPC="endpoint.mainnet.quiknode.pro:10000"
export AUTH_TOKEN="您的_quicknode_token"

注意：只需將這些內容連同數值一起貼到兩個終端機視窗中。您需要一個視窗來執行 Next.js 應用程式，另一個則用於資料庫工作程序。

4. Initialize database​

npm 執行 db:push

5. Start the worker​

npm 執行工作程序

這將啟動一個工作程序，該程序會：

  • 連線至Quicknode gRPC
  • Streams 交易活動
  • 將原始交易資料與彙總資料儲存於 PostgreSQL 中
  • 追蹤鯨魚交易活動與清算情況

您應該會看到：

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

6. Start the dashboard​

npm 執行 dev

開啟http://localhost:3000

資料庫​

搭配 Prisma ORM 的 PostgreSQL。兩張資料表：

  • 貿易活動 - 個人鯨魚交易與清算
  • TradeAggMinute - 趨勢分析的每分鐘彙總

常用指令：​

npm 執行 db:up       # 啟動 PostgreSQL 容器
npm 執行 db:push     # 套用資料結構
npm run db:studio   # 開啟 Prisma Studio

API 端點​


  • GET /api/whales?coin=BTC&windowMin=15&thresholdUsd=50000 - 鯨魚交易
  • GET /api/liquidations?windowMin=15 - 清算
  • GET /api/trending?windowMin=15 - 熱門幣種
  • GET /api/sparklines?windowMin=15&coins=BTC,ETH,SOL - 量值微型圖表
  • GET /api/health - 健康檢查

預覽

預覽

了解更多​


貢獻與回饋
我們非常樂意聽取您的意見，並歡迎您為這個範例應用程式提供任何貢獻！
若要回報問題或提供意見回饋，請在 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 追蹤器
利用Quicknode Hyperliquid endpoint，建置一個即時投資組合追蹤工具，用以監控Hyperliquid 、損益（PnL）、保證金使用率以及金庫持倉。
Hyperliquid 追蹤器
HyperCore 訂單監控器
透過Quicknode Streams KV Store 進行動態篩選，即時追蹤Hyperliquid （L1）上的交易訂單。
Hyperliquid 熱力圖
一個即時瀏覽器儀表板，將處於靜態狀態的Hyperliquid 觸發訂單以價格區間clusters視覺化呈現，並以Quicknode gRPC streams提供的即時買賣價作為基準。