25699b6283
* feat(#1643): add grid set filter, amend filters in orders table * feat(#1643): strictly type variables in orders data provider * feat(#1643): add date range param to orders query * feat(#1643): add date range filter * feat(#1643): handle data provider updates after variables change in ag-grid infinite row model * feat(#1643): fix unit tests * feat(#1643): use DateRangeFilter in positions table instead of agDateColumnFilter * feat(#1643): add date range filter support to orders data provider * feat(#1643): fix update functions * feat(#1643): remove sortable from orders list columns * chore: remove console.log
93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import {
|
|
calcCandleVolume,
|
|
marketCandlesProvider,
|
|
marketProvider,
|
|
} from '@vegaprotocol/market-list';
|
|
import {
|
|
addDecimalsFormatNumber,
|
|
t,
|
|
useDataProvider,
|
|
useYesterday,
|
|
} from '@vegaprotocol/react-helpers';
|
|
import { Interval } from '@vegaprotocol/types';
|
|
import throttle from 'lodash/throttle';
|
|
import { useCallback, useMemo, useRef, useState } from 'react';
|
|
|
|
import * as constants from '../constants';
|
|
import { HeaderStat } from '../header';
|
|
|
|
import type {
|
|
SingleMarketFieldsFragment,
|
|
Candle,
|
|
} from '@vegaprotocol/market-list';
|
|
export const Last24hVolume = ({ marketId }: { marketId: string }) => {
|
|
const [candleVolume, setCandleVolume] = useState<string>();
|
|
const yesterday = useYesterday();
|
|
// Cache timestamp for yesterday to prevent full unmount of market page when
|
|
// a rerender occurs
|
|
const yTimestamp = useMemo(() => {
|
|
return new Date(yesterday).toISOString();
|
|
}, [yesterday]);
|
|
|
|
const marketVariables = useMemo(
|
|
() => ({
|
|
marketId: marketId,
|
|
}),
|
|
[marketId]
|
|
);
|
|
|
|
const variables = useMemo(
|
|
() => ({
|
|
marketId: marketId,
|
|
interval: Interval.INTERVAL_I1H,
|
|
since: yTimestamp,
|
|
}),
|
|
[marketId, yTimestamp]
|
|
);
|
|
|
|
const { data, error } = useDataProvider<SingleMarketFieldsFragment, never>({
|
|
dataProvider: marketProvider,
|
|
variables: marketVariables,
|
|
skip: !marketId,
|
|
});
|
|
|
|
const throttledSetCandles = useRef(
|
|
throttle((data: Candle[]) => {
|
|
setCandleVolume(calcCandleVolume(data));
|
|
}, constants.DEBOUNCE_UPDATE_TIME)
|
|
).current;
|
|
const update = useCallback(
|
|
({ data }: { data: Candle[] | null }) => {
|
|
if (data) {
|
|
throttledSetCandles(data);
|
|
}
|
|
return true;
|
|
},
|
|
[throttledSetCandles]
|
|
);
|
|
|
|
useDataProvider<Candle[], Candle>({
|
|
dataProvider: marketCandlesProvider,
|
|
update,
|
|
variables,
|
|
skip: !marketId || !data,
|
|
updateOnInit: true,
|
|
});
|
|
|
|
return (
|
|
<HeaderStat
|
|
heading={t('Volume (24h)')}
|
|
testId="market-volume"
|
|
description={
|
|
error && candleVolume && data?.positionDecimalPlaces
|
|
? t('The total amount of assets traded in the last 24 hours.')
|
|
: null
|
|
}
|
|
>
|
|
{!error && candleVolume && data?.positionDecimalPlaces
|
|
? addDecimalsFormatNumber(candleVolume, data.positionDecimalPlaces)
|
|
: '-'}
|
|
</HeaderStat>
|
|
);
|
|
};
|