import { useCallback, useRef, useState } from 'react'; import throttle from 'lodash/throttle'; import { addDecimalsFormatNumber } from '@vegaprotocol/utils'; import { useDataProvider } from '@vegaprotocol/data-provider'; import type { MarketData } from '@vegaprotocol/markets'; import { marketDataProvider, marketProvider } from '@vegaprotocol/markets'; import { HeaderStat } from '../header'; import * as constants from '../constants'; import { useT } from '../../lib/use-t'; export const MarketVolume = ({ marketId }: { marketId: string }) => { const t = useT(); const [marketVolume, setMarketVolume] = useState('-'); const variables = { marketId }; const { data } = useDataProvider({ dataProvider: marketProvider, variables, skip: !marketId, }); const throttledSetMarketVolume = useRef( throttle((volume: string) => { setMarketVolume(volume); }, constants.THROTTLE_UPDATE_TIME) ).current; const update = useCallback( ({ data: marketData }: { data: MarketData | null }) => { throttledSetMarketVolume( marketData?.indicativeVolume && data?.positionDecimalPlaces !== undefined ? addDecimalsFormatNumber( marketData.indicativeVolume, data.positionDecimalPlaces ) : '-' ); return true; }, [data?.positionDecimalPlaces, throttledSetMarketVolume] ); useDataProvider({ dataProvider: marketDataProvider, update, variables, skip: !marketId || !data, }); return (
{marketVolume}
); };