import { DealTicketContainer } from '@vegaprotocol/deal-ticket'; import { MarketInfoContainer } from '@vegaprotocol/market-info'; import { OrderbookContainer } from '@vegaprotocol/market-depth'; import { OrderListContainer } from '@vegaprotocol/orders'; import { FillsContainer } from '@vegaprotocol/fills'; import { PositionsContainer } from '@vegaprotocol/positions'; import { TradesContainer } from '@vegaprotocol/trades'; import { LayoutPriority } from 'allotment'; import classNames from 'classnames'; import AutoSizer from 'react-virtualized-auto-sizer'; import { memo, useState } from 'react'; import type { ReactNode, ComponentProps } from 'react'; import { DepthChartContainer } from '@vegaprotocol/market-depth'; import { CandlesChartContainer } from '@vegaprotocol/candles-chart'; import { Tab, Tabs, ResizableGrid, ResizableGridPanel, Splash, } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/react-helpers'; import { AccountsContainer } from '../../components/accounts-container'; import type { SingleMarketFieldsFragment } from '@vegaprotocol/market-list'; import { VegaWalletContainer } from '../../components/vega-wallet-container'; import { TradeMarketHeader } from './trade-market-header'; import { NO_MARKET } from './constants'; import { LiquidityContainer } from '../liquidity/liquidity'; import { useNavigate } from 'react-router-dom'; import { Links, Routes } from '../../pages/client-router'; type MarketDependantView = | typeof CandlesChartContainer | typeof DepthChartContainer | typeof DealTicketContainer | typeof MarketInfoContainer | 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; }; const TradingViews = { Candles: requiresMarket(CandlesChartContainer), Depth: requiresMarket(DepthChartContainer), Liquidity: requiresMarket(LiquidityContainer), Ticket: requiresMarket(DealTicketContainer), Info: requiresMarket(MarketInfoContainer), Orderbook: requiresMarket(OrderbookContainer), Trades: requiresMarket(TradesContainer), Positions: PositionsContainer, Orders: OrderListContainer, Collateral: AccountsContainer, Fills: FillsContainer, }; type TradingView = keyof typeof TradingViews; interface TradeGridProps { market: SingleMarketFieldsFragment | null; onSelect: (marketId: string) => void; } const MainGrid = ({ marketId, onSelect, }: { marketId: string; onSelect?: (marketId: string) => void; }) => { const navigate = useNavigate(); const onMarketClick = (marketId: string) => { navigate(Links[Routes.MARKET](marketId), { replace: true, }); }; return ( { onSelect?.(id); }} /> ); }; const MainGridWrapped = memo(MainGrid); export const TradeGrid = ({ market, onSelect }: TradeGridProps) => { return (
); }; interface TradeGridChildProps { children: ReactNode; } const TradeGridChild = ({ children }: TradeGridChildProps) => { return (
{({ width, height }) =>
{children}
}
); }; interface TradePanelsProps { market: SingleMarketFieldsFragment | null; onSelect: (marketId: string) => void; onMarketClick?: (marketId: string) => void; } export const TradePanels = ({ market, onSelect }: TradePanelsProps) => { const [view, setView] = useState('Candles'); const renderView = () => { const Component = memo<{ marketId: string; onSelect: (marketId: string) => void; onMarketClick?: (marketId: string) => void; }>(TradingViews[view]); if (!Component) { throw new Error(`No component for view: ${view}`); } if (!market) return {NO_MARKET}; return ; }; return (
{({ width, height }) => (
{renderView()}
)}
{Object.keys(TradingViews).map((key) => { const isActive = view === key; const className = classNames('p-4 min-w-[100px] capitalize', { 'text-black dark:text-vega-yellow': isActive, 'bg-neutral-200 dark:bg-neutral-800': isActive, }); return ( ); })}
); };