Ir diretamente para o conteúdo principal
Voltar aos aplicativos de exemplo

Hyperliquid Trading Dashboard

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

Author
Perfil de Sahil Sen
Sahil Sen
Ícone de implantação
Implantar aplicativo
Ícone do GitHub
Ver Repositório
Framework/Biblioteca de Frontend:
Next.js
Idioma:
TypeScript
Servidor de ferramentas de compilação/desenvolvimento:
npm
Pré-visualização do aplicativo de exemplo

Visão geral

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.


Additional Resources

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

Arquitetura​

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

Recursos​


  • 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

Prerequisites​


  • 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 account with Hypercore gRPC endpoint. We'll need this for GRPC_ENDPOINT e AUTH_TOKEN.

Primeiro passos​

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

Database​

PostgreSQL with Prisma ORM. Two tables:

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

Common commands:​

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

API Endpoints​


  • 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

Pré-visualização

Pré-visualização

Saiba mais​


Contribuições e feedback
Gostaríamos de receber seu feedback e contribuições para este aplicativo de exemplo!
Para relatar problemas ou enviar feedback, abra uma issue no GitHub em qn-guide-examples repositório.
Para contribuir, siga estas etapas:
  1. Fazer fork do repositório
  2. Criar uma branch de funcionalidades:
    git checkout -b feature/amazing-feature
  3. Faça commit das suas alterações:
    git commit -m "Add amazing feature"
  4. Faça push da sua branch:
    git push origin feature/amazing-feature
  5. Abrir um Pull Request.
Explorar mais aplicativos de exemplo
Hyperliquid Portfolio Tracker
Crie um rastreador de carteira em tempo real que monitore posições perpétuas da Hyperliquid, PnL, utilização de margem e ativos em cofres usando o endpoint de informações Hyperliquid da QuickNode.
Hyperliquid Portfolio Tracker
Monitor de ordens HyperCore
Track trading orders on Hyperliquid Core (L1) in real-time with Quicknode Streams and KV Store for dynamic filtering.
Mapa de calor TP/SL da Hyperliquid
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.