import { type PinnedAsset } from '@vegaprotocol/accounts'; import { type Market } from '@vegaprotocol/markets'; // TODO: handle oracle banner // import { OracleBanner } from '@vegaprotocol/markets'; import { useState } from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; import classNames from 'classnames'; import { Popover, Splash, VegaIcon, VegaIconNames, } from '@vegaprotocol/ui-toolkit'; import { useT } from '../../lib/use-t'; import { MarketBanner } from '../../components/market-banner'; import { ErrorBoundary } from '../../components/error-boundary'; import { type TradingView } from './trade-views'; import { TradingViews } from './trade-views'; interface TradePanelsProps { market: Market; pinnedAsset?: PinnedAsset; } export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => { const [view, setView] = useState('chart'); const viewCfg = TradingViews[view]; const renderView = () => { const Component = TradingViews[view].component; if (!Component) { throw new Error(`No component for view: ${view}`); } if (!market) return ; // Watch out here, we don't know what component is being rendered // so watch out for clashes in props return ( ; ); }; const renderMenu = () => { if ('menu' in viewCfg || 'settings' in viewCfg) { return (
{'menu' in viewCfg ? : null} {'settings' in viewCfg ? ( } >
) : null}
); } }; return (
{renderMenu()}
{({ width, height }) => (
{renderView()}
)}
{Object.keys(TradingViews) // filter to control available views for the current market // eg only perps should get the funding views .filter((_key) => { const key = _key as TradingView; const perpOnlyViews = ['funding', 'fundingPayments']; if ( market?.tradableInstrument.instrument.product.__typename === 'Perpetual' ) { return true; } if (perpOnlyViews.includes(key)) { return false; } return true; }) .map((_key) => { const key = _key as TradingView; const isActive = view === key; return ( { setView(key); }} /> ); })}
); }; export const NoMarketSplash = () => { const t = useT(); return {t('No market')}; }; const ViewButton = ({ view, isActive, onClick, }: { view: TradingView; isActive: boolean; onClick: () => void; }) => { const label = useViewLabel(view); const className = classNames('py-2 px-4 min-w-[100px] capitalize text-sm', { 'bg-vega-clight-500 dark:bg-vega-cdark-500': isActive, }); return ( ); }; const useViewLabel = (view: TradingView) => { const t = useT(); const labels = { chart: t('Chart'), depth: t('Depth'), liquidity: t('Liquidity'), funding: t('Funding'), fundingPayments: t('Funding Payments'), orderbook: t('Orderbook'), trades: t('Trades'), positions: t('Positions'), activeOrders: t('Active'), closedOrders: t('Closed'), rejectedOrders: t('Rejected'), orders: t('All'), stopOrders: t('Stop'), collateral: t('Collateral'), fills: t('Fills'), }; return labels[view]; };