import type { ComponentProps } from 'react'; import { Splash } from '@vegaprotocol/ui-toolkit'; import { DepthChartContainer } from '@vegaprotocol/market-depth'; import { CandlesChartContainer, CandlesMenu, } from '@vegaprotocol/candles-chart'; import { Filter, OpenOrdersMenu } from '@vegaprotocol/orders'; import { NO_MARKET } from './constants'; import { TradesContainer } from '../../components/trades-container'; import { OrderbookContainer } from '../../components/orderbook-container'; import { FillsContainer } from '../../components/fills-container'; import { PositionsContainer } from '../../components/positions-container'; import { AccountsContainer } from '../../components/accounts-container'; import { LiquidityContainer } from '../../components/liquidity-container'; import type { OrderContainerProps } from '../../components/orders-container'; import { OrdersContainer } from '../../components/orders-container'; import { StopOrdersContainer } from '../../components/stop-orders-container'; import { AccountsMenu } from '../../components/accounts-menu'; import { PositionsMenu } from '../../components/positions-menu'; type MarketDependantView = | typeof CandlesChartContainer | typeof DepthChartContainer | typeof OrderbookContainer | typeof TradesContainer; type MarketDependantViewProps = ComponentProps; const requiresMarket = (View: MarketDependantView) => { const WrappedComponent = (props: MarketDependantViewProps) => props.marketId ? : {NO_MARKET}; WrappedComponent.displayName = `RequiresMarket(${View.name})`; return WrappedComponent; }; export type TradingView = keyof typeof TradingViews; export const TradingViews = { candles: { label: 'Candles', component: requiresMarket(CandlesChartContainer), menu: CandlesMenu, }, depth: { label: 'Depth', component: requiresMarket(DepthChartContainer), }, liquidity: { label: 'Liquidity', component: requiresMarket(LiquidityContainer), }, orderbook: { label: 'Orderbook', component: requiresMarket(OrderbookContainer), }, trades: { label: 'Trades', component: requiresMarket(TradesContainer), }, positions: { label: 'Positions', component: PositionsContainer, menu: PositionsMenu, }, activeOrders: { label: 'Active', component: (props: OrderContainerProps) => ( ), menu: OpenOrdersMenu, }, closedOrders: { label: 'Closed', component: (props: OrderContainerProps) => ( ), }, rejectedOrders: { label: 'Rejected', component: (props: OrderContainerProps) => ( ), }, orders: { label: 'All', component: OrdersContainer, menu: OpenOrdersMenu, }, stopOrders: { label: 'Stop', component: StopOrdersContainer, }, collateral: { label: 'Collateral', component: AccountsContainer, menu: AccountsMenu, }, fills: { label: 'Fills', component: FillsContainer }, };