55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
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<string>('-');
|
|
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 (
|
|
<HeaderStat heading={t('Volume')} testId="market-volume">
|
|
<div>{marketVolume}</div>
|
|
</HeaderStat>
|
|
);
|
|
};
|