useMarket

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

const {
  getPaginatedTradingPairs,
  getTradingPairBySymbol,
  getCandlesticks,
  getMarketMetadata,
  // Perp market helpers
  getPerpMarketConfig,
  getPerpMarketSummary,
  getMarkPrice,
  getIndexPrice,
  getFundingState,
  listFundingHistory,
  getOpenInterest,
} = 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>
  );
}