vega-frontend-monorepo/apps/trading/components/market-mark-price/market-mark-price.tsx
Radosław Szpiech be9e1ee84b
Market page test refactor (#1741)
* fix: markets fixed test with new mock

* test: market summary tests refactored

* fix: fix undefined row.price issue

* chore: comments adressed

Co-authored-by: Madalina Raicu <madalina@raygroup.uk>
2022-10-14 10:15:34 +02:00

61 lines
1.7 KiB
TypeScript

import { useCallback, useMemo, useRef, useState } from 'react';
import throttle from 'lodash/throttle';
import {
addDecimalsFormatNumber,
t,
useDataProvider,
} from '@vegaprotocol/react-helpers';
import type {
MarketData,
MarketDataUpdateFieldsFragment,
SingleMarketFieldsFragment,
} from '@vegaprotocol/market-list';
import { marketDataProvider, marketProvider } from '@vegaprotocol/market-list';
import { HeaderStat } from '../header';
import * as constants from '../constants';
export const MarketMarkPrice = ({ marketId }: { marketId: string }) => {
const [marketPrice, setMarketPrice] = useState<string | null>(null);
const variables = useMemo(
() => ({
marketId: marketId,
}),
[marketId]
);
const { data } = useDataProvider<SingleMarketFieldsFragment, never>({
dataProvider: marketProvider,
variables,
skip: !marketId,
});
const throttledSetMarketPrice = useRef(
throttle((price: string) => {
setMarketPrice(price);
}, constants.DEBOUNCE_UPDATE_TIME)
).current;
const update = useCallback(
({ data: marketData }: { data: MarketData }) => {
throttledSetMarketPrice(
marketData.markPrice && data?.decimalPlaces
? addDecimalsFormatNumber(marketData.markPrice, data.decimalPlaces)
: '-'
);
return true;
},
[data?.decimalPlaces, throttledSetMarketPrice]
);
useDataProvider<MarketData, MarketDataUpdateFieldsFragment>({
dataProvider: marketDataProvider,
update,
variables,
skip: !marketId || !data,
updateOnInit: true,
});
return (
<HeaderStat heading={t('Price')} testId="market-price">
<div>{marketPrice}</div>
</HeaderStat>
);
};