vega-frontend-monorepo/apps/trading/components/market-trading-mode/market-trading-mode.tsx
Bartłomiej Głownia 25699b6283
feat(#1643): orders table filtering (#2000)
* 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
2022-11-10 11:08:13 -08:00

93 lines
2.7 KiB
TypeScript

import { useCallback, useMemo, useState } from 'react';
import { t, useDataProvider } from '@vegaprotocol/react-helpers';
import type { DealTicketMarketFragment } from '@vegaprotocol/deal-ticket';
import { compileGridData, TradingModeTooltip } from '@vegaprotocol/deal-ticket';
import type { Schema as Types } from '@vegaprotocol/types';
import {
AuctionTrigger,
AuctionTriggerMapping,
MarketTradingModeMapping,
MarketTradingMode,
} from '@vegaprotocol/types';
import type {
MarketData,
MarketDataUpdateFieldsFragment,
SingleMarketFieldsFragment,
} from '@vegaprotocol/market-list';
import { marketDataProvider, marketProvider } from '@vegaprotocol/market-list';
import { HeaderStat } from '../header';
interface Props {
marketId: string;
onSelect: (marketId: string) => void;
}
type TradingModeMarket = Omit<DealTicketMarketFragment, 'depth'>;
export const MarketTradingModeComponent = ({ marketId, onSelect }: Props) => {
const [tradingMode, setTradingMode] =
useState<Types.MarketTradingMode | null>(null);
const [trigger, setTrigger] = useState<Types.AuctionTrigger | null>(null);
const [market, setMarket] = useState<TradingModeMarket | null>(null);
const variables = useMemo(
() => ({
marketId: marketId,
}),
[marketId]
);
const { data } = useDataProvider<SingleMarketFieldsFragment, never>({
dataProvider: marketProvider,
variables,
skip: !marketId,
});
const update = useCallback(
({ data: marketData }: { data: MarketData | null }) => {
if (marketData) {
setTradingMode(marketData.marketTradingMode);
setTrigger(marketData.trigger);
setMarket({
...data,
data: marketData,
} as TradingModeMarket);
}
return true;
},
[data]
);
useDataProvider<MarketData, MarketDataUpdateFieldsFragment>({
dataProvider: marketDataProvider,
update,
variables,
skip: !marketId || !data,
updateOnInit: true,
});
return (
<HeaderStat
heading={t('Trading mode')}
description={
market && (
<TradingModeTooltip
tradingMode={tradingMode}
trigger={trigger}
compiledGrid={compileGridData(market, onSelect)}
/>
)
}
testId="market-trading-mode"
>
<div>
{tradingMode === MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
trigger &&
trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
? `${MarketTradingModeMapping[tradingMode]}
- ${AuctionTriggerMapping[trigger]}`
: MarketTradingModeMapping[tradingMode as Types.MarketTradingMode]}
</div>
</HeaderStat>
);
};