vega-frontend-monorepo/apps/trading/components/market-mark-price/market-mark-price.tsx
Bartłomiej Głownia 6705eb4398
feat(trading): calculate required margin base on open volume, active … (#2957)
Co-authored-by: mattrussell36 <mattrussell36@users.noreply.github.com>
2023-03-09 10:03:50 +00:00

52 lines
1.4 KiB
TypeScript

import type { RefObject } from 'react';
import { useInView } from 'react-intersection-observer';
import { addDecimalsFormatNumber, isNumeric } from '@vegaprotocol/utils';
import { useThrottledDataProvider } from '@vegaprotocol/react-helpers';
import { PriceCell } from '@vegaprotocol/datagrid';
import { marketDataProvider } from '@vegaprotocol/market-list';
import { THROTTLE_UPDATE_TIME } from '../constants';
interface Props {
marketId?: string;
decimalPlaces?: number;
asPriceCell?: boolean;
inViewRoot?: RefObject<Element>;
initialValue?: string;
}
export const MarketMarkPrice = ({
marketId,
decimalPlaces,
initialValue,
inViewRoot,
asPriceCell,
}: Props) => {
const [ref, inView] = useInView({ root: inViewRoot?.current });
const { data } = useThrottledDataProvider(
{
dataProvider: marketDataProvider,
variables: { marketId: marketId || '' },
skip: !inView,
},
THROTTLE_UPDATE_TIME
);
const marketPrice = data?.markPrice || initialValue;
if (!marketPrice || !isNumeric(decimalPlaces)) {
return <span ref={ref}>-</span>;
}
if (asPriceCell) {
return (
<PriceCell
ref={ref}
value={Number(marketPrice)}
valueFormatted={addDecimalsFormatNumber(marketPrice, decimalPlaces, 2)}
/>
);
}
return (
<span ref={ref}>{addDecimalsFormatNumber(marketPrice, decimalPlaces)}</span>
);
};