vega-frontend-monorepo/apps/trading/pages/markets/trade-grid.tsx

173 lines
4.8 KiB
TypeScript
Raw Normal View History

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';
2022-03-29 22:52:51 +00:00
import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
import { OrderListContainer } from '@vegaprotocol/order-list';
import { Splash } from '@vegaprotocol/ui-toolkit';
2022-03-29 22:52:51 +00:00
import { PositionsContainer } from '@vegaprotocol/positions';
import type { Market_market } from './__generated__/Market';
import { t } from '@vegaprotocol/react-helpers';
Feat/63 Deal ticket (#82) * 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 * use intent shadow helper * remove date-fns and format manually, update submit button error to use input-error * remove stray console.log
2022-03-17 19:35:46 +00:00
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>
);
Feat/63 Deal ticket (#82) * 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 * use intent shadow helper * remove date-fns and format manually, update submit button error to use input-error * remove stray console.log
2022-03-17 19:35:46 +00:00
const TradingViews = {
Chart: Chart,
Ticket: DealTicketContainer,
Orderbook: Orderbook,
Orders: OrderListContainer,
2022-03-29 22:52:51 +00:00
Positions: PositionsContainer,
Collateral: Collateral,
Trades: Trades,
Feat/63 Deal ticket (#82) * 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 * use intent shadow helper * remove date-fns and format manually, update submit button error to use input-error * remove stray console.log
2022-03-17 19:35:46 +00:00
};
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]',
2022-03-11 05:19:44 +00:00
'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">
2022-03-29 22:52:51 +00:00
<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) => {
2022-03-11 05:19:44 +00:00
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 = () => {
2022-03-02 19:20:23 +00:00
const Component = TradingViews[view];
if (!Component) {
throw new Error(`No component for view: ${view}`);
}
2022-03-29 22:52:51 +00:00
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
Test/deal ticket tests (#161) * 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>
2022-04-04 15:11:27 +00:00
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>
);
};