Ga naar de hoofdinhoud
Terug naar voorbeeldapps

Hyperliquid

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

Author
Profiel van Sahil Sen
Sahil Sen
Pictogram ‘Implementeren’
App implementeren
GitHub-pictogram
Repo bekijken
Frontend-framework/bibliotheek:
Next.js
Taal:
TypeScript
Bouwtool/ontwikkelingsserver:
npm
Voorbeeld van een app-preview

Overzicht

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.


Aanvullende bronnen

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

Architectuur​

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

Kenmerken​


  • 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

Vereisten​


  • 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 en AUTH_TOKEN.

Aan de slag​

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. De omgeving configureren​

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

Database​

PostgreSQL with Prisma ORM. Two tables:

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

Veelgebruikte opdrachten:​

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

API-eindpunten​


  • 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

Voorbeeld

Voorbeeld

Meer informatie​


Bijdragen en feedback
We horen graag wat je ervan vindt en staan open voor alle bijdragen aan deze voorbeeldapp!
Als je problemen wilt melden of feedback wilt geven, maak dan een GitHub-issue aan in de qn-handleiding-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. Pusht je branch:
    git push origin feature/amazing-feature
  5. Dien een pull-verzoek in.
Bekijk meer voorbeeldapps
Hyperliquid volger
Bouw een realtime portefeuille-tracker die Hyperliquid -posities Hyperliquid , PnL, margegebruik en de inzet in de vault bijhoudt met behulp van endpoint Hyperliquid endpoint Quicknode.
Hyperliquid volger
HyperCore-bestelmonitor
Volg handelsorders op Hyperliquid (L1) in realtime met Quicknode Streams KV Store voor dynamische filtering.
Hyperliquid -warmtekaart
Een realtime browserdashboard dat inactieve Hyperliquid triggerorders weergeeft als clusters van prijsniveaus, gekoppeld aan actuele bied- en laatkoersen uitstreams Quicknode gRPC streams.