* scaffold dealticket package, remove trading views from react-helpers * add deal ticket component, add intent utils, expand dialog and form group styles * add splash component, show market not found message if market doesnt exist * tidy up error handling * add handleError method for vega tx hook * add better testname for provider test, flesh out tests a bit more for deal ticket * Add unit tests for useVegaTransaction and useOrderSubmit hooks * add wrapper component for order dialog styles * add vega styled loader to ui toolkit and use in order dialog * add title prop to order dialog * split limit and market tickets into own files * add button radio component * revert dialog styles * move splash component to ui-toolkit, add story * convert intent to enum * Make button always type=button unless type prop is passed * inline filter logic for tif selector * add date-fns, add datetime to helpers * add order types to wallet package, make price undefined if order type is market * use enums in deal ticket logic * tidy up order state by moving submit and transaction hooks out of deal ticket * add comment for dialog styles * remove decimal from price input * add types package, delete old generated types from trading project * rename types package to graphql * update generate command to point to correct locations * fix use order submit test * BDD and navigation tests passing * Remove commented steps * Steps up to placing order * Date picker and date-fns update * Vega connector wallet tests * Passing up to request sent, updated date picker * Tests for sell orders and errors * Update market feature * Fix failing tests * Update wallet login * Readded tx hash assertion and remaining tests * Add CI wallet import * Update .github/workflows/cypress.yml Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Resolved PR comments * Fix yaml error * Attempt to fix failing tests in CI * Run Cypress in Chrome * Add reload if public key error displayed * Fix wallet name * Add force click and waits * Increase timeout for deal ticket page * Removed network list from yaml and using input error id * Increase timeout to 8 seconds * Re add deleted test id Co-authored-by: Matthew Russell <mattrussell36@gmail.com> Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>
173 lines
4.8 KiB
TypeScript
173 lines
4.8 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 { Splash } from '@vegaprotocol/ui-toolkit';
|
|
import { PositionsContainer } from '@vegaprotocol/positions';
|
|
import type { Market_market } from './__generated__/Market';
|
|
import { t } from '@vegaprotocol/react-helpers';
|
|
|
|
const Chart = () => (
|
|
<Splash>
|
|
<p>{t('Chart')}</p>
|
|
</Splash>
|
|
);
|
|
const Orderbook = () => (
|
|
<Splash>
|
|
<p>{t('Orderbook')}</p>
|
|
</Splash>
|
|
);
|
|
const Collateral = () => (
|
|
<Splash>
|
|
<p>{t('Collateral')}</p>
|
|
</Splash>
|
|
);
|
|
const Trades = () => (
|
|
<Splash>
|
|
<p>{t('Trades')}</p>
|
|
</Splash>
|
|
);
|
|
|
|
const TradingViews = {
|
|
Chart: Chart,
|
|
Ticket: DealTicketContainer,
|
|
Orderbook: Orderbook,
|
|
Orders: OrderListContainer,
|
|
Positions: PositionsContainer,
|
|
Collateral: Collateral,
|
|
Trades: Trades,
|
|
};
|
|
|
|
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_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>
|
|
{t('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 marketId={market.id} />
|
|
</TradeGridChild>
|
|
<TradeGridChild className="row-start-1 row-end-3">
|
|
<GridTabs group="trade">
|
|
<GridTab id="trades" name={t('Trades')}>
|
|
<TradingViews.Trades />
|
|
</GridTab>
|
|
<GridTab id="orderbook" name={t('Orderbook')}>
|
|
<TradingViews.Orderbook />
|
|
</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="collateral" name={t('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 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>
|
|
);
|
|
};
|