vega-frontend-monorepo/apps/trading/components/last-24h-volume/last-24h-volume.tsx

66 lines
1.6 KiB
TypeScript
Raw Normal View History

import type { RefObject } from 'react';
import { useInView } from 'react-intersection-observer';
import {
calcCandleVolume,
marketCandlesProvider,
} from '@vegaprotocol/market-list';
import {
addDecimalsFormatNumber,
useThrottledDataProvider,
useYesterday,
isNumeric,
} from '@vegaprotocol/react-helpers';
import * as Schema from '@vegaprotocol/types';
import { useMemo } from 'react';
import type { Candle } from '@vegaprotocol/market-list';
import { THROTTLE_UPDATE_TIME } from '../constants';
interface Props {
marketId?: string;
positionDecimalPlaces?: number;
formatDecimals?: number;
inViewRoot?: RefObject<Element>;
initialValue?: string;
}
export const Last24hVolume = ({
marketId,
positionDecimalPlaces,
formatDecimals,
inViewRoot,
initialValue,
}: Props) => {
const yesterday = useYesterday();
const [ref, inView] = useInView({ root: inViewRoot?.current });
const variables = useMemo(
() => ({
marketId: marketId,
interval: Schema.Interval.INTERVAL_I1H,
since: new Date(yesterday).toISOString(),
}),
[marketId, yesterday]
);
const { data } = useThrottledDataProvider<Candle[], Candle>(
{
dataProvider: marketCandlesProvider,
variables,
skip: !(inView && marketId),
},
THROTTLE_UPDATE_TIME
);
const candleVolume = data ? calcCandleVolume(data) : initialValue;
return (
<span ref={ref}>
{candleVolume && isNumeric(positionDecimalPlaces)
? addDecimalsFormatNumber(
candleVolume,
positionDecimalPlaces,
formatDecimals
)
: '-'}
</span>
);
};