Build a Hyperliquid Real-Time Dashboard

From API to Dashboard — Our Process

1. Requirements. We scope the markets, metrics, and widgets you need: trades, order book depth, funding, PnL, risk.
2. Integration. We connect REST for snapshots/history and WebSockets for live ticks. We add retries, backoff, and schema guards.
3. Data shaping. We normalise, cache, and prepare series ready for charting and KPIs.
4. UX & charts. Clean, high-contrast UI with candlesticks, depth, and performance panels.

Connect to Hyperliquid APIs

Use REST for snapshots and historical queries, and WebSockets for true real-time updates. Below are illustrative snippets (adjust endpoints/signing per your environment and latest docs).

const ws = new WebSocket("wss://api.hyperliquid.xyz/ws");
ws.onopen = () => {
  ws.send(JSON.stringify({
    type: "subscribe",
    channels: ["trades:BTC-USD"]
  }));
};
ws.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  // push into state / chart buffer
};

import crypto from "crypto";
import fetch from "node-fetch";

const API_KEY = process.env.HL_API_KEY;
const API_SECRET = process.env.HL_API_SECRET;

async function getAccount() {
  const endpoint = "/v1/account";
  const ts = Date.now();
  const sign = crypto
    .createHmac("sha256", API_SECRET)
    .update(`${ts}${endpoint}`)
    .digest("hex");

  const res = await fetch("https://api.hyperliquid.xyz" + endpoint, {
    headers: {
      "HL-API-KEY": API_KEY,
      "HL-API-SIGN": sign,
      "HL-API-TIMESTAMP": String(ts),
    },
  });
  return res.json();
}

"use client";
import { useMemo } from "react";
type Point = { x: number; y: number };
export default function PriceLine({ points }: { points: Point[] }) {
  const d = useMemo(() => points.map(p => `${p.x},${p.y}`).join(" "), [points]);
  // Replace with your preferred chart lib; this is a tiny SVG line for demo.
  return (
    <svg viewBox="0 0 100 40" className="w-full h-32">
      <polyline
        points={d}
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
      />
    </svg>
  );
}

Need candlesticks, depth, or PnL? We’ll wire your preferred charting stack (Recharts, TradingView widget, etc.) and stream in the right series with batching and backpressure.

Use Cases

FAQ