Ir diretamente para o conteúdo principal
Voltar às aplicações de exemplo

Painel de Controlo de Negociação Hyperliquid

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

Ícone de implementação
Implementar a aplicação
Ícone do GitHub
Ver repositório
Framework/Biblioteca de front-end:
Next.js
Idioma:
TypeScript
Ferramenta de compilação/Servidor de desenvolvimento:
npm
Pré-visualização da aplicação 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.


Recursos adicionais

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    │
        └─────────────────┘

Características​


  • 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

Pré-requisitos​


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

Introdução​

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

Base de dados​

PostgreSQL with Prisma ORM. Two tables:

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

Comandos comuns:​

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

Pontos de acesso da 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

Pré-visualização

Pré-visualização

Saiba mais​


Contribuições e comentários
Adoraríamos receber os vossos comentários e agradecemos quaisquer contribuições para esta aplicação de exemplo!
Para comunicar problemas ou partilhar comentários, abra uma issue no GitHub na qn-guia-exemplos repositório.
Para contribuir, siga estes passos:
  1. Fazer um fork do repositório
  2. Criar um ramo de funcionalidades:
    git checkout -b feature/amazing-feature
  3. Envie as suas alterações:
    git commit -m "Adicionar uma funcionalidade fantástica"
  4. Envie o seu branch:
    git push origin feature/amazing-feature
  5. Abrir um Pull Request.
Explore mais aplicações de exemplo
Rastreador de Carteiras Hyperliquid
Crie um sistema de acompanhamento de carteira em tempo real que monitorize as posições perpétuas na Hyperliquid, o PnL, a utilização da margem e os ativos detidos no cofre, utilizando o endpoint de informações da Hyperliquid da Quicknode.
Rastreador de Carteiras Hyperliquid
Monitor de Encomendas HyperCore
Acompanhe as ordens de negociação no Hyperliquid Core (L1) em tempo real com o Quicknode Streams e o KV Store para uma filtragem dinâmica.
Mapa de calor TP/SL do Hyperliquid
Um painel de controlo no navegador em tempo real que visualiza as ordens de ativação de TP/SL inativas do Hyperliquid como agrupamentos de níveis de preço, referenciados em relação aos preços de compra/venda em tempo real provenientes dos fluxos gRPC do Quicknode Hypercore.