286 lines
9.4 KiB
TypeScript
286 lines
9.4 KiB
TypeScript
import classNames from 'classnames';
|
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
|
import type { ReactNode } from 'react';
|
|
import { useState } from 'react';
|
|
import {
|
|
DealTicketContainer,
|
|
MarketInfoContainer,
|
|
} from '@vegaprotocol/deal-ticket';
|
|
import { OrderListContainer } from '@vegaprotocol/orders';
|
|
import { TradesContainer } from '@vegaprotocol/trades';
|
|
import { PositionsContainer } from '@vegaprotocol/positions';
|
|
import { OrderbookContainer } from '@vegaprotocol/market-depth';
|
|
import type { Market_market } from './__generated__/Market';
|
|
import {
|
|
addDecimalsFormatNumber,
|
|
formatLabel,
|
|
t,
|
|
} from '@vegaprotocol/react-helpers';
|
|
import { AccountsContainer } from '@vegaprotocol/accounts';
|
|
import { DepthChartContainer } from '@vegaprotocol/market-depth';
|
|
import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
|
|
import { SelectMarketDialog } from '@vegaprotocol/market-list';
|
|
import {
|
|
ArrowDown,
|
|
Tab,
|
|
Tabs,
|
|
PriceCellChange,
|
|
} from '@vegaprotocol/ui-toolkit';
|
|
import type { CandleClose } from '@vegaprotocol/types';
|
|
import { AuctionTrigger } from '@vegaprotocol/types';
|
|
import { MarketTradingMode } from '@vegaprotocol/types';
|
|
import { Allotment, LayoutPriority } from 'allotment';
|
|
import 'allotment/dist/style.css';
|
|
|
|
const TradingViews = {
|
|
Candles: CandlesChartContainer,
|
|
Depth: DepthChartContainer,
|
|
Ticket: DealTicketContainer,
|
|
Info: MarketInfoContainer,
|
|
Orderbook: OrderbookContainer,
|
|
Trades: TradesContainer,
|
|
Positions: PositionsContainer,
|
|
Orders: OrderListContainer,
|
|
Collateral: AccountsContainer,
|
|
};
|
|
|
|
type TradingView = keyof typeof TradingViews;
|
|
|
|
interface TradeMarketHeaderProps {
|
|
market: Market_market;
|
|
className?: string;
|
|
}
|
|
|
|
export const TradeMarketHeader = ({
|
|
market,
|
|
className,
|
|
}: TradeMarketHeaderProps) => {
|
|
const [open, setOpen] = useState(false);
|
|
const candlesClose: string[] = (market?.candles || [])
|
|
.map((candle) => candle?.close)
|
|
.filter((c): c is CandleClose => c !== null);
|
|
const headerItemClassName = 'whitespace-nowrap flex flex-col';
|
|
const itemClassName =
|
|
'font-sans font-normal mb-0 text-black-60 dark:text-white-80 text-ui-small';
|
|
const itemValueClassName =
|
|
'font-sans tracking-tighter text-black dark:text-white text-ui';
|
|
const headerClassName = classNames(
|
|
'w-full p-8 bg-white dark:bg-black',
|
|
className
|
|
);
|
|
return (
|
|
<header className={headerClassName}>
|
|
<SelectMarketDialog dialogOpen={open} setDialogOpen={setOpen} />
|
|
<div className="flex flex-col md:flex-row gap-20 md:gap-64 ml-auto mr-8">
|
|
<button
|
|
onClick={() => setOpen(!open)}
|
|
className="shrink-0 text-vega-pink dark:text-vega-yellow font-medium text-h5 flex items-center gap-8 px-4 py-0 h-37 hover:bg-black/10 dark:hover:bg-white/20"
|
|
>
|
|
<span className="break-words text-left">{market.name}</span>
|
|
<ArrowDown color="yellow" borderX={8} borderTop={12} />
|
|
</button>
|
|
|
|
<div
|
|
data-testid="market-summary"
|
|
className="flex flex-auto items-start gap-64 overflow-x-auto whitespace-nowrap"
|
|
>
|
|
<div className={headerItemClassName}>
|
|
<span className={itemClassName}>Change (24h)</span>
|
|
<PriceCellChange
|
|
candles={candlesClose}
|
|
decimalPlaces={market.decimalPlaces}
|
|
/>
|
|
</div>
|
|
<div className={headerItemClassName}>
|
|
<span className={itemClassName}>Volume</span>
|
|
<span data-testid="trading-volume" className={itemValueClassName}>
|
|
{market.data && market.data.indicativeVolume !== '0'
|
|
? addDecimalsFormatNumber(
|
|
market.data.indicativeVolume,
|
|
market.positionDecimalPlaces
|
|
)
|
|
: '-'}
|
|
</span>
|
|
</div>
|
|
<div className={headerItemClassName}>
|
|
<span className={itemClassName}>Trading mode</span>
|
|
<span data-testid="trading-mode" className={itemValueClassName}>
|
|
{market.tradingMode === MarketTradingMode.MonitoringAuction &&
|
|
market.data?.trigger &&
|
|
market.data.trigger !== AuctionTrigger.Unspecified
|
|
? `${formatLabel(
|
|
market.tradingMode
|
|
)} - ${market.data?.trigger.toLowerCase()}`
|
|
: formatLabel(market.tradingMode)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
interface TradeGridProps {
|
|
market: Market_market;
|
|
}
|
|
|
|
export const TradeGrid = ({ market }: TradeGridProps) => {
|
|
const wrapperClasses = classNames(
|
|
'h-full max-h-full',
|
|
'flex flex-col',
|
|
'bg-black-10 dark:bg-black-70',
|
|
'text-ui'
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<div className={wrapperClasses}>
|
|
<TradeMarketHeader market={market} />
|
|
<Allotment vertical={true}>
|
|
<Allotment.Pane>
|
|
<Allotment proportionalLayout={false} minSize={200}>
|
|
<Allotment.Pane priority={LayoutPriority.High} minSize={200}>
|
|
<TradeGridChild className="h-full px-4">
|
|
<Tabs>
|
|
<Tab id="candles" name={t('Candles')}>
|
|
<TradingViews.Candles marketId={market.id} />
|
|
</Tab>
|
|
<Tab id="depth" name={t('Depth')}>
|
|
<TradingViews.Depth marketId={market.id} />
|
|
</Tab>
|
|
</Tabs>
|
|
</TradeGridChild>
|
|
</Allotment.Pane>
|
|
<Allotment.Pane
|
|
priority={LayoutPriority.Low}
|
|
preferredSize={375}
|
|
minSize={200}
|
|
>
|
|
<TradeGridChild className="h-full px-4">
|
|
<Tabs>
|
|
<Tab id="ticket" name={t('Ticket')}>
|
|
<TradingViews.Ticket marketId={market.id} />
|
|
</Tab>
|
|
<Tab id="info" name={t('Info')}>
|
|
<TradingViews.Info marketId={market.id} />
|
|
</Tab>
|
|
</Tabs>
|
|
</TradeGridChild>
|
|
</Allotment.Pane>
|
|
<Allotment.Pane
|
|
priority={LayoutPriority.Low}
|
|
preferredSize={460}
|
|
minSize={200}
|
|
>
|
|
<TradeGridChild className="h-full px-4">
|
|
<Tabs>
|
|
<Tab id="orderbook" name={t('Orderbook')}>
|
|
<TradingViews.Orderbook marketId={market.id} />
|
|
</Tab>
|
|
<Tab id="trades" name={t('Trades')}>
|
|
<TradingViews.Trades marketId={market.id} />
|
|
</Tab>
|
|
</Tabs>
|
|
</TradeGridChild>
|
|
</Allotment.Pane>
|
|
</Allotment>
|
|
</Allotment.Pane>
|
|
<Allotment.Pane
|
|
snap={true}
|
|
priority={LayoutPriority.Low}
|
|
preferredSize={200}
|
|
minSize={200}
|
|
>
|
|
<TradeGridChild className="h-full">
|
|
<Tabs>
|
|
<Tab id="positions" name={t('Positions')}>
|
|
<TradingViews.Positions />
|
|
</Tab>
|
|
<Tab id="orders" name={t('Orders')}>
|
|
<TradingViews.Orders />
|
|
</Tab>
|
|
<Tab id="accounts" name={t('Collateral')}>
|
|
<TradingViews.Collateral />
|
|
</Tab>
|
|
</Tabs>
|
|
</TradeGridChild>
|
|
</Allotment.Pane>
|
|
</Allotment>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
interface TradeGridChildProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const TradeGridChild = ({ children, className }: TradeGridChildProps) => {
|
|
const gridChildClasses = classNames('bg-white dark:bg-black', className);
|
|
return (
|
|
<section className={gridChildClasses}>
|
|
<AutoSizer>
|
|
{({ width, height }) => (
|
|
<div style={{ width, height }} className="overflow-auto">
|
|
{children}
|
|
</div>
|
|
)}
|
|
</AutoSizer>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
interface TradePanelsProps {
|
|
market: Market_market;
|
|
}
|
|
|
|
export const TradePanels = ({ market }: TradePanelsProps) => {
|
|
const [view, setView] = useState<TradingView>('Candles');
|
|
|
|
const renderView = () => {
|
|
const Component = TradingViews[view];
|
|
|
|
if (!Component) {
|
|
throw new Error(`No component for view: ${view}`);
|
|
}
|
|
|
|
return <Component marketId={market.id} />;
|
|
};
|
|
|
|
return (
|
|
<div className="h-full grid grid-rows-[min-content_1fr_min-content]">
|
|
<TradeMarketHeader market={market} />
|
|
<div className="h-full">
|
|
<AutoSizer>
|
|
{({ width, height }) => (
|
|
<div style={{ width, height }}>{renderView()}</div>
|
|
)}
|
|
</AutoSizer>
|
|
</div>
|
|
<div className="flex flex-nowrap gap-4 overflow-x-auto my-4 max-w-full">
|
|
{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 (
|
|
<button
|
|
data-testid={key}
|
|
onClick={() => setView(key as TradingView)}
|
|
className={className}
|
|
key={key}
|
|
>
|
|
{key}
|
|
</button>
|
|
);
|
|
})}
|
|
<div className="bg-black-10 dark:bg-white-10 grow"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|