useTradeFeed

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