Market Data Hooks

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

const {
  getPaginatedTradingPairs,
  getTradingPairBySymbol,
  getCandlesticks,
  getMarketMetadata,
  // Perp market helpers
  getPerpMarketConfig,
  getPerpMarketSummary,
  getMarkPrice,
  getIndexPrice,
  getFundingState,
  listFundingHistory,
  getOpenInterest,
  getTraderMetrics,
  getTradeFlow,
  listLiquidationEvents,
  getLiquidationMetrics,
} = useMarket();

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

function FundingCountdown({ tradingPairId }: { tradingPairId: string }) {
  const { getFundingState } = useMarket();
  const [next, setNext] = useState<string | null>(null);
  const [rate, setRate] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    const tick = async () => {
      const state = await getFundingState(tradingPairId);
      if (cancelled) return;
      setNext(state.nextFundingTime);
      setRate(state.currentFundingRate);
    };
    tick();
    const id = setInterval(tick, 15000);
    return () => { cancelled = true; clearInterval(id); };
  }, [tradingPairId, getFundingState]);

  if (!next) return null;
  const msUntil = new Date(next).getTime() - Date.now();
  return (
    <span>
      Funding in {Math.max(0, Math.floor(msUntil / 1000))}s — rate {rate}
    </span>
  );
}

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

const {
  instruments,
  instrumentsByPair,
  subscribed,
  error,
  clearError,
} = useInstruments();

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

function MarketList() {
  const { instruments, error } = useInstruments();

  if (error) return <div>Error: {error.message}</div>;

  const tradable = instruments.filter((instrument) => instrument.isActive);

  return (
    <div>
      <h2>Markets</h2>
      <ul>
        {tradable.map((instrument) => (
          <li key={instrument.tradingPairId}>
            {instrument.symbol} — tick {instrument.tickSize}, step {instrument.quantityStepSize}
            {instrument.maxLeverage ? `, up to ${instrument.maxLeverage}x` : ""}
          </li>
        ))}
      </ul>
    </div>
  );
}

function TickSize({ tradingPairId }: { tradingPairId: string }) {
  const { instrumentsByPair } = useInstruments(tradingPairId);
  const instrument = instrumentsByPair[tradingPairId];

  if (!instrument) return null;
  return <span>Tick size: {instrument.tickSize}</span>;
}

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

function CandlestickChart() {
  const { candlesticks, loading, subscribed, error, clearError } = useOHLCV({
    tradingPairId: "123e4567-e89b-12d3-a456-426614174000",
    tradingMode: "SPOT",
    interval: "1m",
    initialFetchParams: { limit: 100 }
  });

  if (loading) return <p>Loading candlesticks...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <p>OHLCV handler: {subscribed ? 'Registered' : 'Not registered'}</p>
      <p>Candlesticks: {candlesticks.length}</p>
      {candlesticks.map((candle, i) => (
        <div key={i}>
          O: {candle.o} H: {candle.h} L: {candle.l} C: {candle.c} V: {candle.v}
        </div>
      ))}
    </div>
  );
}

interface Candlestick {
  T: number;        // Candle start time (Unix timestamp in milliseconds)
  t: number;        // Candle end time (Unix timestamp in milliseconds)
  o: string;        // Open price
  h: string;        // High price
  l: string;        // Low price
  c: string;        // Close price
  v: string;        // Volume (base token)
  s: string;        // Symbol
  i: string;        // Interval
  n: number;        // Number of trades
  openInterestBase?: string | null;       // One-sided LONG quantity in base-asset units
  openInterestNotional?: string | null;   // Quote notional using the same sample's price
}

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

function PriceChart() {
  const { candlesticks, loading, subscribed } = useOHLCV({
    tradingPairId: "pair-uuid-here",
    tradingMode: "SPOT",
    interval: "5m"
  });

  if (loading) return <div>Loading chart...</div>;

  return (
    <div>
      <div>OHLCV handler: {subscribed ? 'Registered' : 'Not registered'}</div>
      <div>Latest Price: {candlesticks[candlesticks.length - 1]?.c}</div>
    </div>
  );
}

function MultiTimeframeChart() {
  const oneMinute = useOHLCV({
    tradingPairId: "pair-uuid",
    tradingMode: "SPOT",
    interval: "1m"
  });

  const oneHour = useOHLCV({
    tradingPairId: "pair-uuid",
    tradingMode: "SPOT",
    interval: "1h"
  });

  return (
    <div>
      <h3>1m Chart ({oneMinute.candlesticks.length} candles)</h3>
      <h3>1h Chart ({oneHour.candlesticks.length} candles)</h3>
    </div>
  );
}

function HistoricalChart() {
  const endTime = Date.now();
  const startTime = endTime - (24 * 60 * 60 * 1000); // 24 hours ago

  const { candlesticks, loading } = useOHLCV({
    tradingPairId: "pair-uuid",
    tradingMode: "SPOT",
    interval: "1h",
    initialFetchParams: {
      startTime,
      endTime,
      limit: 100
    }
  });

  if (loading) return <div>Loading...</div>;

  return <div>Loaded {candlesticks.length} historical candles</div>;
}

function ChartWithErrorHandling() {
  const { candlesticks, error, clearError, loading } = useOHLCV({
    tradingPairId: "pair-uuid",
    tradingMode: "SPOT",
    interval: "1m"
  });

  if (error) {
    return (
      <div>
        <p>Failed to load chart: {error.message}</p>
        <button onClick={clearError}>Dismiss Error</button>
      </div>
    );
  }

  if (loading) return <div>Loading...</div>;

  return <div>{candlesticks.length} candles loaded</div>;
}

function LivePrice() {
  const { candlesticks, subscribed } = useOHLCV({
    tradingPairId: "pair-uuid",
    tradingMode: "SPOT",
    interval: "1m"
  });

  const latestCandle = candlesticks[candlesticks.length - 1];

  if (!latestCandle) return <div>No data</div>;

  return (
    <div>
      <h2>${latestCandle.c}</h2>
      <p>
        O: {latestCandle.o} H: {latestCandle.h} L: {latestCandle.l}
      </p>
      <p>OHLCV handler: {subscribed ? 'Registered' : 'Not registered'}</p>
    </div>
  );
}

function PriceChange() {
  const { candlesticks } = useOHLCV({
    tradingPairId: "pair-uuid",
    tradingMode: "SPOT",
    interval: "1d"
  });

  const [previousCandle, currentCandle] = candlesticks.slice(-2);
  if (!previousCandle || !currentCandle) return <div>Not enough data</div>;

  const current = parseFloat(currentCandle.c);
  const previous = parseFloat(previousCandle.c);
  const change = ((current - previous) / previous) * 100;

  return (
    <div>
      <p>24h Change: {change.toFixed(2)}%</p>
      <p style={{ color: change >= 0 ? 'green' : 'red' }}>
        ${current.toFixed(2)}
      </p>
    </div>
  );
}

import { useOHLCV } from "@0xmonaco/react";
import { Chart } from "react-chartjs-2";

function TradingViewChart() {
  const { candlesticks, loading } = useOHLCV({
    tradingPairId: "pair-uuid",
    tradingMode: "SPOT",
    interval: "1h",
    initialFetchParams: { limit: 100 }
  });

  if (loading) return <div>Loading chart...</div>;

  const chartData = {
    labels: candlesticks.map(c => new Date(c.T).toLocaleTimeString()),
    datasets: [{
      label: 'Price',
      data: candlesticks.map(c => parseFloat(c.c)),
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  };

  return <Chart type="line" data={chartData} />;
}

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>
  );
}

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

const { book, subscribed, lastResync, error } = useDepth(tradingPairId, tradingMode);

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

function DepthLadder({ tradingPairId }: { tradingPairId: string }) {
  const { book, error } = useDepth(tradingPairId, "SPOT");

  if (error) return <div>Error: {error.message}</div>;
  if (!book) return <div>Loading book...</div>;

  return (
    <div>
      {book.stale && <p>Market data is delayed</p>}
      {book.asks.slice(0, 10).reverse().map((level) => (
        <div key={level.price} style={{ color: "red" }}>{level.quantity} @ {level.price}</div>
      ))}
      {book.bids.slice(0, 10).map((level) => (
        <div key={level.price} style={{ color: "green" }}>{level.quantity} @ {level.price}</div>
      ))}
    </div>
  );
}

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

const { bbo, subscribed, lastResync, error } = useBbo(tradingPairId, tradingMode);

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

function Spread({ tradingPairId }: { tradingPairId: string }) {
  const { bbo } = useBbo(tradingPairId, "MARGIN");
  if (!bbo || bbo.bestBid === null || bbo.bestAsk === null) return <span>—</span>;
  return <span>{bbo.bestBid} / {bbo.bestAsk}</span>;
}

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

const { 
  trades,
  subscribed,
  fetchingInitialState,
  error
} = useTradeFeed(tradingPairId);

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

function TradeFeed() {
  const { getTradingPairBySymbol } = useMarket();
  const [tradingPairId, setTradingPairId] = useState<string | null>(null);
  
  useEffect(() => {
    getTradingPairBySymbol('ETH/USDC').then(pair => {
      setTradingPairId(pair.id);
    });
  }, []);
  
  const { trades, subscribed, error } = useTradeFeed(tradingPairId ?? '');
  
  if (!tradingPairId) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Recent Trades {subscribed ? '(live)' : '(connecting...)'}</h2>
      <ul>
        {trades.map(trade => (
          <li key={trade.data.tradeId}>
            {trade.data.makerSide} {trade.data.quantity} @ {trade.data.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

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

function LiquidationFeed({ tradingPairId }: { tradingPairId: string }) {
  const { events, isLoading, error } = useLiquidationFeed(tradingPairId);

  if (isLoading) return <p>Loading liquidation history…</p>;
  if (error) return <p>Could not load liquidation events: {error.message}</p>;

  return (
    <ol>
      {events.map(({ data }) => (
        <li key={data.eventId}>
          {data.side} {data.positionSize} · {data.markNotional} {data.quoteAssetSymbol} · {data.wallet}
        </li>
      ))}
    </ol>
  );
}

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

const { simulateFees, getMyFeeTier, getFeeSchedule } = useFees();

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

function FeeCalculator() {
  const { getTradingPairBySymbol } = useMarket();
  const { simulateFees } = useFees();
  const [fees, setFees] = useState(null);

  const calculateFees = async () => {
    const pair = await getTradingPairBySymbol('BTC/USDC');

    // LIMIT order — exact fee calculation
    const result = await simulateFees({
      tradingPairId: pair.id,
      side: "BUY",
      price: "50000",
      quantity: "0.1"
    });

    setFees(result);
  };

  return (
    <div>
      <button onClick={calculateFees}>Calculate Fees</button>
      {fees && (
        <div>
          <p>Order Value: ${fees.notional}</p>
          <p>Total Fees: ${fees.totalTakerFees}</p>
          <p>You Pay: ${fees.takerTotalPayment}</p>
          {/* 100% slider — use maxQuantity instead of balance / price */}
          <p>Max quantity you can buy: {fees.maxQuantity}</p>
        </div>
      )}
    </div>
  );
}