130 lines
3.8 KiB
TypeScript
130 lines
3.8 KiB
TypeScript
import classNames from 'classnames';
|
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
|
import { useState, ReactNode } from 'react';
|
|
import { TradingView, TradingViews } from '@vegaprotocol/react-helpers';
|
|
import { Market_market } from './__generated__/Market';
|
|
import { GridTab, GridTabs } from './grid-tabs';
|
|
|
|
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 (
|
|
<div className={wrapperClasses}>
|
|
<header className="col-start-1 col-end-2 row-start-1 row-end-1 p-8">
|
|
<h1>Market: {market.name}</h1>
|
|
</header>
|
|
<TradeGridChild className="col-start-1 col-end-2">
|
|
<TradingViews.chart />
|
|
</TradeGridChild>
|
|
<TradeGridChild className="row-start-1 row-end-3">
|
|
<TradingViews.ticket />
|
|
</TradeGridChild>
|
|
<TradeGridChild className="row-start-1 row-end-3">
|
|
<GridTabs group="trade">
|
|
<GridTab name="trades">
|
|
<pre>{JSON.stringify(market.trades, null, 2)}</pre>
|
|
</GridTab>
|
|
<GridTab name="orderbook">
|
|
<TradingViews.orderbook />
|
|
</GridTab>
|
|
</GridTabs>
|
|
</TradeGridChild>
|
|
<TradeGridChild className="col-span-3">
|
|
<GridTabs group="portfolio">
|
|
<GridTab name="orders">
|
|
<TradingViews.orders />
|
|
</GridTab>
|
|
<GridTab name="positions">
|
|
<TradingViews.positions />
|
|
</GridTab>
|
|
<GridTab name="collateral">
|
|
<TradingViews.collateral />
|
|
</GridTab>
|
|
</GridTabs>
|
|
</TradeGridChild>
|
|
</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>('chart');
|
|
|
|
const renderView = () => {
|
|
const Component = TradingViews[view];
|
|
|
|
if (!Component) {
|
|
throw new Error(`No component for view: ${view}`);
|
|
}
|
|
|
|
return <Component />;
|
|
};
|
|
|
|
return (
|
|
<div className="h-full grid grid-rows-[min-content_1fr_min-content]">
|
|
<header className="p-8">
|
|
<h1>Market: {market.name}</h1>
|
|
</header>
|
|
<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">
|
|
{Object.keys(TradingViews).map((key: TradingView) => {
|
|
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
|
|
onClick={() => setView(key)}
|
|
className={className}
|
|
key={key}
|
|
>
|
|
{key}
|
|
</button>
|
|
);
|
|
})}
|
|
<div className="bg-black-10 dark:bg-white-10 grow"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|