import { DealTicketContainer } from '@vegaprotocol/deal-ticket'; import { MarketInfoContainer, getExpiryDate } 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 } from 'react'; import { DepthChartContainer } from '@vegaprotocol/market-depth'; import { CandlesChartContainer } from '@vegaprotocol/candles-chart'; import { Tab, Tabs, ResizableGrid, ResizableGridPanel, ButtonLink, Link, } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/react-helpers'; import { useAssetDetailsDialogStore } from '@vegaprotocol/assets'; import { useEnvironment } from '@vegaprotocol/environment'; import { Header, HeaderStat } from '../../components/header'; import { AccountsContainer } from '../portfolio/accounts-container'; import { ColumnKind, SelectMarketPopover, } from '../../components/select-market'; import type { OnCellClickHandler } from '../../components/select-market'; import type { SingleMarketFieldsFragment } from '@vegaprotocol/market-list'; import { Last24hPriceChange } from '../../components/last-24h-price-change'; import { MarketMarkPrice } from '../../components/market-mark-price'; import { MarketTradingModeComponent } from '../../components/market-trading-mode'; import { Last24hVolume } from '../../components/last-24h-volume'; const TradingViews = { Candles: CandlesChartContainer, Depth: DepthChartContainer, Ticket: DealTicketContainer, Info: MarketInfoContainer, Orderbook: OrderbookContainer, Trades: TradesContainer, Positions: PositionsContainer, Orders: OrderListContainer, Collateral: AccountsContainer, Fills: FillsContainer, }; type TradingView = keyof typeof TradingViews; type ExpiryLabelProps = { market: SingleMarketFieldsFragment; }; const ExpiryLabel = ({ market }: ExpiryLabelProps) => { const content = getExpiryDate(market); return
{content}
; }; type ExpiryTooltipContentProps = { market: SingleMarketFieldsFragment; explorerUrl?: string; }; const ExpiryTooltipContent = ({ market, explorerUrl, }: ExpiryTooltipContentProps) => { if (market.marketTimestamps.close === null) { const oracleId = market.tradableInstrument.instrument.product .oracleSpecForTradingTermination?.id; return (

{t( 'This market expires when triggered by its oracle, not on a set date.' )}

{explorerUrl && oracleId && ( {t('View oracle specification')} )}
); } return null; }; interface TradeMarketHeaderProps { market: SingleMarketFieldsFragment; onSelect: (marketId: string) => void; } export const TradeMarketHeader = ({ market, onSelect, }: TradeMarketHeaderProps) => { const { VEGA_EXPLORER_URL } = useEnvironment(); const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore(); const symbol = market.tradableInstrument.instrument.product?.settlementAsset?.symbol; const onCellClick: OnCellClickHandler = (e, kind, value) => { if (value && kind === ColumnKind.Asset) { openAssetDetailsDialog(value, e.target as HTMLElement); } }; return (
} > } testId="market-expiry" > {symbol ? (
{ openAssetDetailsDialog(symbol, e.target as HTMLElement); }} > {symbol}
) : null}
); }; interface TradeGridProps { market: SingleMarketFieldsFragment; onSelect: (marketId: string) => void; } const MainGrid = ({ marketId, onSelect, }: { marketId: string; onSelect: (marketId: string) => void; }) => ( { 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; onSelect: (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; }>(TradingViews[view]); if (!Component) { throw new Error(`No component for view: ${view}`); } 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 ( ); })}
); };