useOrderbook

import { useOrderbook } from "@0xmonaco/react";

const { 
  orderbook,
  subscribed,
  error,
  clearError
} = useOrderbook(tradingPairId, tradingMode, magnitude, quotationMode, depth?);

import { useOrderbook, useMarket } from "@0xmonaco/react";
import { useEffect, useState } from "react";

function OrderbookDisplay() {
  const { getTradingPairBySymbol } = useMarket();
  const [tradingPairId, setTradingPairId] = useState<string | null>(null);
  
  useEffect(() => {
    getTradingPairBySymbol('BTC/USDC').then(pair => {
      setTradingPairId(pair.id);
    });
  }, []);
  
  const { orderbook, subscribed, error } = useOrderbook(
    tradingPairId ?? '',
    'SPOT',
    1,        // Group by $1 price levels
    'BASE',   // Show quantities in base token
    20        // 20 levels each side
  );
  
  if (!tradingPairId) return <div>Loading pair...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!orderbook) return <div>Loading orderbook...</div>;
  
  return (
    <div>
      <h2>Orderbook {subscribed ? '(live)' : '(connecting...)'}</h2>
      <p>Spread: ${(Number(orderbook.bestAsk) - Number(orderbook.bestBid)).toFixed(2)}</p>
      
      <div style={{ display: 'flex', gap: '2rem' }}>
        <div>
          <h3>Bids</h3>
          {orderbook.bids.slice(0, 10).map((level, i) => (
            <div key={i} style={{ color: 'green' }}>
              {level.quantity} @ ${level.price}
            </div>
          ))}
        </div>
        
        <div>
          <h3>Asks</h3>
          {orderbook.asks.slice(0, 10).map((level, i) => (
            <div key={i} style={{ color: 'red' }}>
              {level.quantity} @ ${level.price}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}