import type { RefObject } from 'react'; import { useMemo } from 'react'; import { useInView } from 'react-intersection-observer'; import { addDecimalsFormatNumber, PriceCell, useThrottledDataProvider, isNumeric, } from '@vegaprotocol/react-helpers'; import type { MarketData, MarketDataUpdateFieldsFragment, } from '@vegaprotocol/market-list'; import { marketDataProvider } from '@vegaprotocol/market-list'; import { THROTTLE_UPDATE_TIME } from '../constants'; interface Props { marketId?: string; decimalPlaces?: number; asPriceCell?: boolean; inViewRoot?: RefObject; initialValue?: string; } export const MarketMarkPrice = ({ marketId, decimalPlaces, initialValue, inViewRoot, asPriceCell, }: Props) => { const [ref, inView] = useInView({ root: inViewRoot?.current }); const variables = useMemo(() => ({ marketId }), [marketId]); const { data } = useThrottledDataProvider< MarketData, MarketDataUpdateFieldsFragment >( { dataProvider: marketDataProvider, variables, skip: !inView, }, THROTTLE_UPDATE_TIME ); const marketPrice = data?.markPrice || initialValue; if (!marketPrice || !isNumeric(decimalPlaces)) { return -; } if (asPriceCell) { return ( ); } return ( {addDecimalsFormatNumber(marketPrice, decimalPlaces)} ); };