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

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.

Ícone de implementação
Implementar a aplicação
Ícone do GitHub
Ver repositório
Framework/Biblioteca de front-end:
Reagir
Idioma:
TypeScript
Ferramenta de compilação/Servidor de desenvolvimento:
Next.js
Pré-visualização da aplicação de exemplo

Visão geral

Esta aplicação de exemplo permite o acompanhamento em tempo real de ordens de negociação no Hyperliquid Core (L1). Recorre ao Quicknode Streams + Key-Value Store (KV Store) para uma filtragem inteligente e dinâmica, sem necessidade de reiniciar os fluxos. Monitorize os grandes investidores, acompanhe o estado das ordens e receba atualizações em tempo real através de uma interface de utilizador moderna.

Arquitetura​

Núcleo Hiperlíquido (L1)
  -> Quicknode Streams + KV
    -> POST /api/webhook/streams (assinatura verificada)
      -> Upsert no OrderLog + emissão de SSE
        -> Feed de encomendas em tempo real na interface do utilizador

Características​


  • Filtragem de endereços em tempo real através de listas do KV Store
  • Filtragem dinâmica por estado (em aberto, concluído, cancelado, rejeitado, acionado)
  • Filtragem nativa da blockchain ao nível do fluxo
  • Server-Sent Events (SSE) para atualizações em tempo real da interface do utilizador
  • Scripts de configuração do Quicknode Streams (criar + ativar)
  • Adicionar endereços de negociadores em massa
  • Verificação da assinatura do webhook e verificações do carimbo temporal
  • Resolução ENS para endereços Ethereum (opcional)
  • Prisma + armazenamento local SQLite

Pré-requisitos​


  • Node.js 20+ e um gestor de pacotes (pnpm, yarn, npm).
  • Conta Quicknode com acesso a Streams e ao KV Store: Crie uma conta e obtenha o seu Chave da API de administração para QN_API_KEY.
  • URL pública do webhook: Utilize um túnel como ngrok ou implementar a aplicação de forma a que APP_URL é acessível através do Quicknode.
  • Opcional: Ponto de extremidade RPC da rede principal do Ethereum para a resolução de nomes ENS (QN_EVM_ENDPOINT).

Estrutura do projeto​

filtros/
  hl-orders-filter.js     # Filtro Quicknode Streams (HyperCore)
scripts/
  setup-streams.ts        # Cria listas KV + stream (em pausa)
  activate-streams.ts     # Ativa o fluxo por ID
src/
  app/api/                # Rotas da API (webhooks, utilizadores, SSE)
  lib/                    # Auxiliares do Quicknode, webhooks e SSE
  types/                  # Definições do TypeScript
prisma/
  schema.prisma           # Esquema SQLite

Variáveis de ambiente​

Copiar .env.example para .env e preencha:

QN_API_KEY=""                  # Chave API do Quicknode com permissões para Streams + KV
QN_STREAM_SECURITY_TOKEN=""    # Token de segurança do Stream (do script de configuração)
APP_URL="http://localhost:3000" # URL pública da aplicação (ngrok para webhooks locais)
DATABASE_URL="file:./dev.db"   # Base de dados SQLite
QN_EVM_ENDPOINT=""             # Opcional: RPC da Ethereum para resolução do ENS
ADMIN_API_KEY=""               # Opcional para desenvolvimento local, obrigatório para produção

Notas:

  • QN_STREAM_SECURITY_TOKEN é devolvido por configuração:streams.
  • APP_URL tem de estar acessível pelo Quicknode (utilize o ngrok ou um URL implementado).
  • Certifique-se de que a sua chave API tem as permissões para Streams e KV Store ativadas.

Introdução​

1. Instalar as dependências​

pnpm instalar
# npm install
# yarn install

2. Crie o seu ficheiro de ambiente​

cp .env.example .env

3. Adicionar as variáveis necessárias​

Preencha .env (ver Pré-requisitos). Para webhooks locais, exponha a sua aplicação com o ngrok e copie o URL HTTPS para APP_URL:

ngrok http 3000

4. Inicializar a base de dados​

pnpm prisma migrate dev --nome hypercore-order-monitor
pnpm db:seed

O script inicial cria filtros de estado (ativando abrir, preenchido, acionado (por predefinição) e adiciona um endereço de trader de exemplo.

5. Criar fluxos Quicknode + listas KV​

pnpm executar setup:streams

Copie o token de segurança impresso para .env (QN_STREAM_SECURITY_TOKEN).

6. Inicie a aplicação​

pnpm dev

7. Ativar a transmissão​

pnpm executar activate:streams

Abrir http://localhost:3000, adicione os endereços dos negociadores e deverá ver os eventos de ordens em tempo real à medida que os fluxos enviam webhooks.

Base de dados​

O SQLite é utilizado por predefinição. O esquema do Prisma encontra-se em prisma/schema.prisma.

Comandos comuns:

pnpm prisma migrate dev --name <name>
pnpm db:seed
pnpm prisma studio

Segurança e carga útil do Webhook​


  • Ponto final: POST /api/webhook/streams
  • Cabeçalhos obrigatórios: x-qn-nonce, x-qn-timestamp, x-qn-signature
  • A carga útil pode ser comprimida com gzip; o manipulador deteta automaticamente content-encoding: gzip
  • Utilizações da verificação de assinaturas QN_STREAM_SECURITY_TOKEN

Pontos de acesso da API​


Pontos finais públicos:

  • GET /api/health - exame médico
  • GET /api/users - lista de operadores sob vigilância
  • GET /api/statuses - filtros de estado da lista
  • POST /api/webhook/streams - Webhook do Quicknode Streams
  • GET /api/sse - Fluxo de eventos de encomendas da SSE

Terminais protegidos (requerem Authorization: Bearer <ADMIN_API_KEY>):

  • POST /api/users - adicionar um negociador
  • POST /api/users/bulk - adicionar negociantes em massa (limite de 50 endereços)
  • PATCH /api/users?id=... - atualizar o trader
  • DELETE /api/users?id=... - remover o negociador
  • GET /api/orders - listar encomendas com filtros
  • PATCH /api/statuses - atualizar os estados ativos
  • POST /api/statuses/reset - restabelecer as predefinições

Scripts de sincronização​


  • pnpm run sync:statuses - Reconcilia a lista de estados do KV com a base de dados
  • pnpm run sync:users - Reconcilia a lista de utilizadores do KV com a base de dados
  • pnpm run reset:kv - Elimina as listas KV do HyperCore

Pré-visualização

Pré-visualização

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
Painel de Controlo de Negociação Hyperliquid
Um painel para transações de grandes investidores, liquidações e tokens em destaque em tempo real da Hyperliquid, utilizando o Quicknode Hypercore gRPC.
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.