d0ec016adc
* [#151] Add orderbook * [#151] Add orderbook components * [#151] Add market-depth data provider * [#151] Add orderbook manager * [#151] handle market depth updates in orderbook manager * [#151] Fix PageQueryContainer usage of AsyncRenderer * [#151] Move data handling logig out from orderbook manager * [#151] Use mocked data, fix data issues * [#151] Add compact order book data unit tests * [#151] Add updateData unit tests * [#151] Add updateCompactedData unit tests * [#151] update cummulative vol on update, move data ref handling from effect to manager * [#151] Update cummulative vol on update, fixes * [#151] Optimieze orderbook ag-grid render * [#151] Replace ag-grid with orderbook component * [#151] Use react memo to optimize orderbook rendering * [#151] Fix cummulative vol computation on compacted data update * [#151] Add resolution controls * [#151] Fix cumulative spelling mistake * [#151] Use number instead of string for cumulative values * [#151] Expose restart callback in useDataProvider hook * [#151] Update empty cumulative values * [#151] Add horizontal line under header in orderbook * [#151] reuse orderbook data in market-depth chart * [#151] restart market depth provider on sequenceNumber gap * [#151] use throttle in orderbook and depth-chart * [#151] Add comments, refactor data functions * [#151] Add comments, refactor data functions * [#151] move orderbook and depth-chart libs to market-depth
164 lines
5.1 KiB
TypeScript
164 lines
5.1 KiB
TypeScript
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 { TradesContainer } from '@vegaprotocol/trades';
|
|
import { PositionsContainer } from '@vegaprotocol/positions';
|
|
import { OrderbookContainer } from '@vegaprotocol/market-depth';
|
|
import type { Market_market } from './__generated__/Market';
|
|
import { t } from '@vegaprotocol/react-helpers';
|
|
import { AccountsContainer } from '@vegaprotocol/accounts';
|
|
import { DepthChartContainer } from '@vegaprotocol/market-depth';
|
|
import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
|
|
|
|
const TradingViews = {
|
|
Candles: CandlesChartContainer,
|
|
Depth: DepthChartContainer,
|
|
Ticket: DealTicketContainer,
|
|
Orderbook: OrderbookContainer,
|
|
Orders: OrderListContainer,
|
|
Positions: PositionsContainer,
|
|
Accounts: AccountsContainer,
|
|
Trades: TradesContainer,
|
|
};
|
|
|
|
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_375px_460px] 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>
|
|
{t('Market')}: {market.name}
|
|
</h1>
|
|
</header>
|
|
<TradeGridChild className="col-start-1 col-end-2">
|
|
<GridTabs group="chart">
|
|
<GridTab id="candles" name={t('Candles')}>
|
|
<TradingViews.Candles marketId={market.id} />
|
|
</GridTab>
|
|
<GridTab id="depth" name={t('Depth')}>
|
|
<TradingViews.Depth marketId={market.id} />
|
|
</GridTab>
|
|
</GridTabs>
|
|
</TradeGridChild>
|
|
<TradeGridChild className="row-start-1 row-end-3">
|
|
<TradingViews.Ticket marketId={market.id} />
|
|
</TradeGridChild>
|
|
<TradeGridChild className="row-start-1 row-end-3">
|
|
<GridTabs group="trade">
|
|
<GridTab id="trades" name={t('Trades')}>
|
|
<TradingViews.Trades marketId={market.id} />
|
|
</GridTab>
|
|
<GridTab id="orderbook" name={t('Orderbook')}>
|
|
<TradingViews.Orderbook marketId={market.id} />
|
|
</GridTab>
|
|
</GridTabs>
|
|
</TradeGridChild>
|
|
<TradeGridChild className="col-span-3">
|
|
<GridTabs group="portfolio">
|
|
<GridTab id="orders" name={t('Orders')}>
|
|
<TradingViews.Orders />
|
|
</GridTab>
|
|
<GridTab id="positions" name={t('Positions')}>
|
|
<TradingViews.Positions />
|
|
</GridTab>
|
|
<GridTab id="accounts" name={t('Accounts')}>
|
|
<TradingViews.Accounts />
|
|
</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>('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]">
|
|
<header className="p-8">
|
|
<h1>
|
|
{t('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 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>
|
|
);
|
|
};
|