2022-10-11 12:30:07 +00:00
|
|
|
import { useCallback, useMemo, useState } from 'react';
|
|
|
|
import { t, useDataProvider } from '@vegaprotocol/react-helpers';
|
2022-11-22 08:31:26 +00:00
|
|
|
import type { MarketDealTicket } from '@vegaprotocol/market-list';
|
2022-10-11 12:30:07 +00:00
|
|
|
import { compileGridData, TradingModeTooltip } from '@vegaprotocol/deal-ticket';
|
|
|
|
import type { Schema as Types } from '@vegaprotocol/types';
|
|
|
|
import {
|
|
|
|
AuctionTriggerMapping,
|
|
|
|
MarketTradingModeMapping,
|
2022-11-15 12:31:25 +00:00
|
|
|
Schema,
|
2022-10-11 12:30:07 +00:00
|
|
|
} from '@vegaprotocol/types';
|
|
|
|
import type {
|
|
|
|
MarketData,
|
|
|
|
MarketDataUpdateFieldsFragment,
|
|
|
|
SingleMarketFieldsFragment,
|
|
|
|
} from '@vegaprotocol/market-list';
|
|
|
|
import { marketDataProvider, marketProvider } from '@vegaprotocol/market-list';
|
|
|
|
import { HeaderStat } from '../header';
|
2022-11-30 11:02:59 +00:00
|
|
|
import { Tooltip } from '@vegaprotocol/ui-toolkit';
|
2022-10-11 12:30:07 +00:00
|
|
|
|
|
|
|
interface Props {
|
2022-11-18 17:08:48 +00:00
|
|
|
marketId?: string;
|
|
|
|
onSelect?: (marketId: string) => void;
|
2022-11-30 11:02:59 +00:00
|
|
|
isHeader?: boolean;
|
|
|
|
noUpdate?: boolean;
|
|
|
|
initialMode?: Types.MarketTradingMode;
|
|
|
|
initialTrigger?: Types.AuctionTrigger;
|
2022-10-11 12:30:07 +00:00
|
|
|
}
|
|
|
|
|
2022-11-30 11:02:59 +00:00
|
|
|
export const MarketTradingModeComponent = ({
|
|
|
|
marketId,
|
|
|
|
onSelect,
|
|
|
|
isHeader = false,
|
|
|
|
noUpdate = false,
|
|
|
|
initialMode,
|
|
|
|
initialTrigger,
|
|
|
|
}: Props) => {
|
2022-10-11 12:30:07 +00:00
|
|
|
const [tradingMode, setTradingMode] =
|
2022-11-30 11:02:59 +00:00
|
|
|
useState<Types.MarketTradingMode | null>(initialMode || null);
|
|
|
|
const [trigger, setTrigger] = useState<Types.AuctionTrigger | null>(
|
|
|
|
initialTrigger || null
|
|
|
|
);
|
2022-11-22 08:31:26 +00:00
|
|
|
const [market, setMarket] = useState<MarketDealTicket | null>(null);
|
2022-10-11 12:30:07 +00:00
|
|
|
const variables = useMemo(
|
|
|
|
() => ({
|
|
|
|
marketId: marketId,
|
|
|
|
}),
|
|
|
|
[marketId]
|
|
|
|
);
|
|
|
|
|
|
|
|
const { data } = useDataProvider<SingleMarketFieldsFragment, never>({
|
|
|
|
dataProvider: marketProvider,
|
|
|
|
variables,
|
|
|
|
skip: !marketId,
|
|
|
|
});
|
|
|
|
|
|
|
|
const update = useCallback(
|
2022-11-10 19:08:13 +00:00
|
|
|
({ data: marketData }: { data: MarketData | null }) => {
|
2022-11-30 11:02:59 +00:00
|
|
|
if (!noUpdate && marketData) {
|
2022-11-10 19:08:13 +00:00
|
|
|
setTradingMode(marketData.marketTradingMode);
|
|
|
|
setTrigger(marketData.trigger);
|
|
|
|
setMarket({
|
|
|
|
...data,
|
|
|
|
data: marketData,
|
2022-11-22 08:31:26 +00:00
|
|
|
} as MarketDealTicket);
|
2022-11-10 19:08:13 +00:00
|
|
|
}
|
2022-10-11 12:30:07 +00:00
|
|
|
return true;
|
|
|
|
},
|
2022-11-30 11:02:59 +00:00
|
|
|
[noUpdate, data]
|
2022-10-11 12:30:07 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
useDataProvider<MarketData, MarketDataUpdateFieldsFragment>({
|
|
|
|
dataProvider: marketDataProvider,
|
|
|
|
update,
|
|
|
|
variables,
|
2022-11-30 11:02:59 +00:00
|
|
|
skip: noUpdate || !marketId || !data,
|
2022-10-11 12:30:07 +00:00
|
|
|
});
|
|
|
|
|
2022-11-18 17:08:48 +00:00
|
|
|
const content =
|
2022-11-30 11:02:59 +00:00
|
|
|
(tradingMode === Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
|
2022-11-18 17:08:48 +00:00
|
|
|
trigger &&
|
|
|
|
trigger !== Schema.AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
|
|
|
|
? `${MarketTradingModeMapping[tradingMode]} - ${AuctionTriggerMapping[trigger]}`
|
2022-11-30 11:02:59 +00:00
|
|
|
: MarketTradingModeMapping[tradingMode as Types.MarketTradingMode]) ||
|
|
|
|
'-';
|
2022-11-18 17:08:48 +00:00
|
|
|
|
2022-11-30 11:02:59 +00:00
|
|
|
return isHeader ? (
|
2022-10-11 12:30:07 +00:00
|
|
|
<HeaderStat
|
|
|
|
heading={t('Trading mode')}
|
|
|
|
description={
|
|
|
|
market && (
|
|
|
|
<TradingModeTooltip
|
|
|
|
tradingMode={tradingMode}
|
|
|
|
trigger={trigger}
|
|
|
|
compiledGrid={compileGridData(market, onSelect)}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
2022-10-14 08:15:34 +00:00
|
|
|
testId="market-trading-mode"
|
2022-10-11 12:30:07 +00:00
|
|
|
>
|
2022-11-30 11:02:59 +00:00
|
|
|
<div>{content}</div>
|
2022-10-11 12:30:07 +00:00
|
|
|
</HeaderStat>
|
2022-11-30 11:02:59 +00:00
|
|
|
) : (
|
|
|
|
<Tooltip
|
|
|
|
description={
|
|
|
|
tradingMode &&
|
|
|
|
trigger && (
|
|
|
|
<TradingModeTooltip tradingMode={tradingMode} trigger={trigger} />
|
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<span>{content}</span>
|
|
|
|
</Tooltip>
|
2022-10-11 12:30:07 +00:00
|
|
|
);
|
|
|
|
};
|