HyperLiquid Development: Professional Trading Infrastructure for DeFi

// Efficient order book with virtualized rendering
import { useVirtualizer } from '@tanstack/react-virtual';

const OrderBook = ({ market }) => {
  const [orderBook, setOrderBook] = useState({ bids: [], asks: [] });
  const parentRef = useRef(null);

  // WebSocket updates at high frequency
  useEffect(() => {
    const ws = new WebSocket(`wss://api.hyperliquid.xyz/ws`);

    ws.onmessage = (event) => {
      const update = JSON.parse(event.data);

      // Efficient aggregation - batch updates
      setOrderBook(prev => ({
        bids: aggregateLevels(prev.bids, update.bids),
        asks: aggregateLevels(prev.asks, update.asks)
      }));
    };

    return () => ws.close();
  }, [market]);

  // Virtualized rendering for large order books
  const rowVirtualizer = useVirtualizer({
    count: orderBook.bids.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 24, // Row height
    overscan: 10 // Render extra rows for smooth scrolling
  });

  // Maintain 60fps even with hundreds of updates/second
  return (
    <div ref={parentRef} className="h-96 overflow-auto">
      {rowVirtualizer.getVirtualItems().map(virtualRow => {
        const level = orderBook.bids[virtualRow.index];
        return (
          <OrderBookRow
            key={virtualRow.key}
            price={level.price}
            size={level.size}
            style={{ height: virtualRow.size }}
          />
        );
      })}
    </div>
  );
};

// Enterprise-grade WebSocket with reconnection
class HyperLiquidWebSocket {
  constructor() {
    this.ws = null;
    this.reconnectAttempts = 0;
    this.maxReconnectDelay = 30000;
    this.heartbeatInterval = null;
  }

  connect() {
    this.ws = new WebSocket('wss://api.hyperliquid.xyz/ws');

    this.ws.onopen = () => {
      console.log('Connected to HyperLiquid');
      this.reconnectAttempts = 0;
      this.startHeartbeat();

      // Resubscribe to previous channels
      this.resubscribe();
    };

    this.ws.onclose = () => {
      this.stopHeartbeat();
      this.reconnect();
    };

    this.ws.onerror = (error) => {
      console.error('WebSocket error:', error);
      this.ws.close();
    };

    this.ws.onmessage = (event) => {
      this.handleMessage(JSON.parse(event.data));
    };
  }

  reconnect() {
    // Exponential backoff with jitter
    const delay = Math.min(
      1000 * Math.pow(2, this.reconnectAttempts) + Math.random() * 1000,
      this.maxReconnectDelay
    );

    setTimeout(() => {
      this.reconnectAttempts++;
      this.connect();
    }, delay);
  }

  startHeartbeat() {
    this.heartbeatInterval = setInterval(() => {
      if (this.ws?.readyState === WebSocket.OPEN) {
        this.ws.send(JSON.stringify({ method: 'ping' }));
      }
    }, 30000); // 30s heartbeat
  }

  stopHeartbeat() {
    if (this.heartbeatInterval) {
      clearInterval(this.heartbeatInterval);
    }
  }
}