useOHLCV

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
}

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