vega-frontend-monorepo/apps/trading/components/market-trading-mode/market-trading-mode.tsx

82 lines
2.4 KiB
TypeScript
Raw Normal View History

import type { RefObject } from 'react';
import { t } from '@vegaprotocol/i18n';
import { TradingModeTooltip } from '@vegaprotocol/deal-ticket';
import { useInView } from 'react-intersection-observer';
import * as Schema from '@vegaprotocol/types';
import { HeaderStat } from '../header';
import { Tooltip } from '@vegaprotocol/ui-toolkit';
import { useStaticMarketData } from '@vegaprotocol/market-list';
const getTradingModeLabel = (
marketTradingMode?: Schema.MarketTradingMode,
trigger?: Schema.AuctionTrigger
) => {
return (
(marketTradingMode ===
Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
trigger &&
trigger !== Schema.AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
? `${Schema.MarketTradingModeMapping[marketTradingMode]} - ${Schema.AuctionTriggerMapping[trigger]}`
: Schema.MarketTradingModeMapping[
marketTradingMode as Schema.MarketTradingMode
]) || '-'
);
};
interface HeaderStatMarketTradingModeProps {
marketId?: string;
onSelect?: (marketId: string, metaKey?: boolean) => void;
initialTradingMode?: Schema.MarketTradingMode;
initialTrigger?: Schema.AuctionTrigger;
}
export const HeaderStatMarketTradingMode = ({
marketId,
onSelect,
initialTradingMode,
initialTrigger,
}: HeaderStatMarketTradingModeProps) => {
const { data } = useStaticMarketData(marketId);
const marketTradingMode = data?.marketTradingMode ?? initialTradingMode;
const trigger = data?.trigger ?? initialTrigger;
return (
<HeaderStat
heading={t('Trading mode')}
description={
<TradingModeTooltip marketId={marketId} onSelect={onSelect} />
}
testId="market-trading-mode"
>
<div>{getTradingModeLabel(marketTradingMode, trigger)}</div>
</HeaderStat>
);
};
export const MarketTradingMode = ({
marketId,
initialTradingMode,
initialTrigger,
inViewRoot,
}: Omit<HeaderStatMarketTradingModeProps, 'onUpdate'> & {
inViewRoot?: RefObject<Element>;
}) => {
const [ref, inView] = useInView({ root: inViewRoot?.current });
const { data } = useStaticMarketData(marketId, !inView);
return (
<Tooltip
description={
<TradingModeTooltip marketId={marketId} skip={!inView} skipGrid />
}
>
<span ref={ref}>
{getTradingModeLabel(
data?.marketTradingMode ?? initialTradingMode,
data?.trigger ?? initialTrigger
)}
</span>
</Tooltip>
);
};