import classNames from 'classnames'; import AutoSizer from 'react-virtualized-auto-sizer'; import type { ReactNode } from 'react'; import { useState } from 'react'; import { GridTab, GridTabs } from './grid-tabs'; import { DealTicketContainer } from '@vegaprotocol/deal-ticket'; import { OrderListContainer } from '@vegaprotocol/order-list'; import { Splash } from '@vegaprotocol/ui-toolkit'; import { PositionsContainer } from '@vegaprotocol/positions'; import type { Market_market } from './__generated__/Market'; import { t } from '@vegaprotocol/react-helpers'; const Chart = () => (

{t('Chart')}

); const Orderbook = () => (

{t('Orderbook')}

); const Collateral = () => (

{t('Collateral')}

); const Trades = () => (

{t('Trades')}

); const TradingViews = { Chart: Chart, Ticket: DealTicketContainer, Orderbook: Orderbook, Orders: OrderListContainer, Positions: PositionsContainer, Collateral: Collateral, Trades: Trades, }; type TradingView = keyof typeof TradingViews; interface TradeGridProps { market: Market_market; } export const TradeGrid = ({ market }: TradeGridProps) => { const wrapperClasses = classNames( 'h-full max-h-full', 'grid gap-[1px] grid-cols-[1fr_325px_325px] grid-rows-[min-content_1fr_200px]', 'bg-black-10 dark:bg-white-10', 'text-ui' ); return (

{t('Market')}: {market.name}

); }; interface TradeGridChildProps { children: ReactNode; className?: string; } const TradeGridChild = ({ children, className }: TradeGridChildProps) => { const gridChildClasses = classNames('bg-white dark:bg-black', className); return (
{({ width, height }) => (
{children}
)}
); }; interface TradePanelsProps { market: Market_market; } export const TradePanels = ({ market }: TradePanelsProps) => { const [view, setView] = useState('Chart'); const renderView = () => { const Component = TradingViews[view]; if (!Component) { throw new Error(`No component for view: ${view}`); } return ; }; return (

{t('Market')}: {market.name}

{({ width, height }) => (
{renderView()}
)}
{Object.keys(TradingViews).map((key) => { const isActive = view === key; const className = classNames('py-4', 'px-12', 'capitalize', { 'text-black dark:text-vega-yellow': isActive, 'bg-white dark:bg-black': isActive, 'text-black dark:text-white': !isActive, 'bg-black-10 dark:bg-white-10': !isActive, }); return ( ); })}
); };