Hyperliquid-handelsdashboard
Een dashboard voor realtime transacties met ‘whales’, liquidaties en trending tokens van Hyperliquid, waarbij gebruik wordt gemaakt van Quicknode’s Hypercore gRPC.
Overzicht
Deze voorbeeldapp streamt elke transactie van Hyperliquid via Quicknode’s Hypercore gRPC en filtert op transacties van ‘whales’, liquidaties en trending tokens. Dankzij de bidirectionele gRPC-streaming worden gegevens geleverd met een latentie van minder dan een seconde, zonder dat er polling nodig is.
Bekijk onze video voor een stapsgewijze uitleg over het bouwen van de app
Architectuur
Quicknode Hypercore gRPC
(elke transactie streamen)
│
▼
┌─────────────────┐
│ Worker │
│ Filter + Agg │
└────────┬────────┘
│
┌────────────┼────────────┐
▼ ▼ ▼
Grote spelers Liquidaties Trending
(≥$50K) (1m buckets)
│ │ │
└────────────┼────────────┘
▼
┌─────────────────┐
│ PostgreSQL │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Next.js │
│ [15m/30m/1h] │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Dashboard │
└─────────────────┘
Kenmerken
- Detectie van walvishandel (nominaal bedrag≥ 50.000 dollar, instelbaar)
- Volging van liquidaties met volledige metagegevens (gebruiker, referentieprijs, methode)
- Populaire tokens gerangschikt op basis van het aantal transacties, met een uitsplitsing naar kopen en verkopen
- Filtering op tijdsinterval (15 min, 30 min, 1 uur)
- Aangepaste muntvolging, elk Hyperliquid-token
- Sparklines met trendindicatoren
- Deep links in Explorer voor handelsverificatie
- Aggregatie-intervallen van 1 minuut voor efficiënte trendanalyses
Vereisten
- Node.js 20+ is geïnstalleerd
- Voor een PostgreSQL-instantie kun je een platform gebruiken zoals Aiven om een gehoste instantie op te starten. Dit hebben we nodig voor
DATABASE_URL. - Quicknode-account met het Hypercore gRPC-eindpunt. Dit hebben we nodig voor
GRPC_ENDPOINTenAUTH_TOKEN.
Aan de slag
1. Klonen en installeren
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
Als je een gehoste PostgreSQL-instantie gebruikt, sla deze stap dan over.
npm npm run db:up
3. De omgeving configureren
export DATABASE_URL="postgresql://postgres:postgres@localhost:5432/hypercore"
export GRPC_ENDPOINT="uw-eindpunt.hype-mainnet.quiknode.pro:10000"
export AUTH_TOKEN="je_quicknode-token"
Opmerking: Plak deze gewoon met de juiste waarden in twee terminalvensters. Je hebt één venster nodig voor de Next.js-app en een ander voor de database-worker.
4. De database initialiseren
npm npm run db:push
5. Start de worker
npm run worker
Hiermee wordt het werkproces gestart dat:
- Maakt verbinding met Quicknode HyperCore gRPC
- Live-uitzendingen van handelsevenementen
- Slaat ruwe transactiegegevens en geaggregeerde gegevens op in PostgreSQL
- Houdt de activiteit van walvissen en liquidaties bij
Je zou het volgende moeten zien:
Ping ok: { count: 1 }
Ingester running
WHALE_MIN_USD: 50000
6. Start het dashboard
npm run dev
Database
PostgreSQL met Prisma ORM. Twee tabellen:
TradeEvent- Individuele transacties en liquidaties van walvissenTradeAggMinute- Aggregaties per minuut voor trends
Veelgebruikte opdrachten:
npm run db:up # PostgreSQL-container starten
npm run db:push # Schema toepassen
npm run db:studio # Prisma Studio openen
API-eindpunten
GET /api/whales?coin=BTC&windowMin=15&thresholdUsd=50000- Transacties met walvissenGET /api/liquidations?windowMin=15- LiquidatiesGET /api/trending?windowMin=15- Populaire cryptomuntenGET /api/sparklines?windowMin=15&coins=BTC,ETH,SOL- Sparklines voor volumesGET /api/health- Gezondheidscontrole
Voorbeeld
Meer informatie
- Maak een fork van de repository
- Maak een feature-branch aan:git checkout -b feature/amazing-feature
- Sla je wijzigingen op:git commit -m "Geweldige functie toevoegen"
- Pushen van je branch:git push origin feature/amazing-feature
- Dien een pull-verzoek in.
