2022-03-02 02:08:42 +00:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
2022-03-30 09:49:48 +00:00
|
|
|
import type { ReactNode } from 'react';
|
|
|
|
import { useState } from 'react';
|
2022-03-02 02:08:42 +00:00
|
|
|
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';
|
2022-04-08 17:49:45 +00:00
|
|
|
import { ChartContainer } from '../../components/chart-container';
|
2022-04-07 13:41:57 +00:00
|
|
|
import { TradesContainer } from '@vegaprotocol/trades';
|
2022-03-24 18:08:57 +00:00
|
|
|
import { Splash } from '@vegaprotocol/ui-toolkit';
|
2022-03-29 22:52:51 +00:00
|
|
|
import { PositionsContainer } from '@vegaprotocol/positions';
|
2022-03-30 09:49:48 +00:00
|
|
|
import type { Market_market } from './__generated__/Market';
|
2022-03-31 01:08:25 +00:00
|
|
|
import { t } from '@vegaprotocol/react-helpers';
|
2022-04-07 13:41:57 +00:00
|
|
|
import { AccountsContainer } from '@vegaprotocol/accounts';
|
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
|
|
|
|
2022-03-24 18:08:57 +00:00
|
|
|
const Orderbook = () => (
|
|
|
|
<Splash>
|
2022-03-31 01:08:25 +00:00
|
|
|
<p>{t('Orderbook')}</p>
|
2022-03-24 18:08:57 +00:00
|
|
|
</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 = {
|
2022-04-08 17:49:45 +00:00
|
|
|
Chart: ChartContainer,
|
2022-03-28 19:34:45 +00:00
|
|
|
Ticket: DealTicketContainer,
|
|
|
|
Orderbook: Orderbook,
|
|
|
|
Orders: OrderListContainer,
|
2022-03-29 22:52:51 +00:00
|
|
|
Positions: PositionsContainer,
|
2022-04-07 13:41:57 +00:00
|
|
|
Accounts: AccountsContainer,
|
|
|
|
Trades: TradesContainer,
|
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
|
|
|
};
|
2022-03-02 02:08:42 +00:00
|
|
|
|
2022-03-28 19:34:45 +00:00
|
|
|
type TradingView = keyof typeof TradingViews;
|
|
|
|
|
2022-03-02 02:08:42 +00:00
|
|
|
interface TradeGridProps {
|
|
|
|
market: Market_market;
|
|
|
|
}
|
|
|
|
|
|
|
|
export const TradeGrid = ({ market }: TradeGridProps) => {
|
|
|
|
const wrapperClasses = classNames(
|
|
|
|
'h-full max-h-full',
|
2022-04-07 13:41:57 +00:00
|
|
|
'grid gap-[1px] grid-cols-[1fr_375px_460px] grid-rows-[min-content_1fr_200px]',
|
2022-03-11 05:19:44 +00:00
|
|
|
'bg-black-10 dark:bg-white-10',
|
2022-03-02 02:08:42 +00:00
|
|
|
'text-ui'
|
|
|
|
);
|
|
|
|
return (
|
|
|
|
<div className={wrapperClasses}>
|
2022-03-09 16:59:48 +00:00
|
|
|
<header className="col-start-1 col-end-2 row-start-1 row-end-1 p-8">
|
2022-03-31 01:08:25 +00:00
|
|
|
<h1>
|
|
|
|
{t('Market')}: {market.name}
|
|
|
|
</h1>
|
2022-03-02 02:08:42 +00:00
|
|
|
</header>
|
|
|
|
<TradeGridChild className="col-start-1 col-end-2">
|
2022-04-08 17:49:45 +00:00
|
|
|
<TradingViews.Chart marketId={market.id} />
|
2022-03-02 02:08:42 +00:00
|
|
|
</TradeGridChild>
|
|
|
|
<TradeGridChild className="row-start-1 row-end-3">
|
2022-03-29 22:52:51 +00:00
|
|
|
<TradingViews.Ticket marketId={market.id} />
|
2022-03-02 02:08:42 +00:00
|
|
|
</TradeGridChild>
|
|
|
|
<TradeGridChild className="row-start-1 row-end-3">
|
|
|
|
<GridTabs group="trade">
|
2022-03-31 01:08:25 +00:00
|
|
|
<GridTab id="trades" name={t('Trades')}>
|
2022-04-07 13:41:57 +00:00
|
|
|
<TradingViews.Trades marketId={market.id} />
|
2022-03-02 02:08:42 +00:00
|
|
|
</GridTab>
|
2022-03-31 01:08:25 +00:00
|
|
|
<GridTab id="orderbook" name={t('Orderbook')}>
|
2022-03-28 19:34:45 +00:00
|
|
|
<TradingViews.Orderbook />
|
2022-03-02 02:08:42 +00:00
|
|
|
</GridTab>
|
|
|
|
</GridTabs>
|
|
|
|
</TradeGridChild>
|
|
|
|
<TradeGridChild className="col-span-3">
|
|
|
|
<GridTabs group="portfolio">
|
2022-03-31 01:08:25 +00:00
|
|
|
<GridTab id="orders" name={t('Orders')}>
|
2022-03-28 19:34:45 +00:00
|
|
|
<TradingViews.Orders />
|
2022-03-02 02:08:42 +00:00
|
|
|
</GridTab>
|
2022-03-31 01:08:25 +00:00
|
|
|
<GridTab id="positions" name={t('Positions')}>
|
2022-03-28 19:34:45 +00:00
|
|
|
<TradingViews.Positions />
|
2022-03-02 02:08:42 +00:00
|
|
|
</GridTab>
|
2022-04-07 13:41:57 +00:00
|
|
|
<GridTab id="accounts" name={t('Accounts')}>
|
|
|
|
<TradingViews.Accounts />
|
2022-03-02 02:08:42 +00:00
|
|
|
</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);
|
2022-03-02 02:08:42 +00:00
|
|
|
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) => {
|
2022-03-28 19:34:45 +00:00
|
|
|
const [view, setView] = useState<TradingView>('Chart');
|
2022-03-02 02:08:42 +00:00
|
|
|
|
|
|
|
const renderView = () => {
|
2022-03-02 19:20:23 +00:00
|
|
|
const Component = TradingViews[view];
|
2022-03-02 02:08:42 +00:00
|
|
|
|
|
|
|
if (!Component) {
|
|
|
|
throw new Error(`No component for view: ${view}`);
|
|
|
|
}
|
|
|
|
|
2022-03-29 22:52:51 +00:00
|
|
|
return <Component marketId={market.id} />;
|
2022-03-02 02:08:42 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="h-full grid grid-rows-[min-content_1fr_min-content]">
|
2022-03-09 16:59:48 +00:00
|
|
|
<header className="p-8">
|
2022-03-31 01:08:25 +00:00
|
|
|
<h1>
|
|
|
|
{t('Market')}: {market.name}
|
|
|
|
</h1>
|
2022-03-02 02:08:42 +00:00
|
|
|
</header>
|
|
|
|
<div className="h-full">
|
|
|
|
<AutoSizer>
|
|
|
|
{({ width, height }) => (
|
|
|
|
<div style={{ width, height }}>{renderView()}</div>
|
|
|
|
)}
|
|
|
|
</AutoSizer>
|
|
|
|
</div>
|
2022-03-24 18:08:57 +00:00
|
|
|
<div className="flex flex-nowrap gap-4 overflow-x-auto my-4 max-w-full">
|
2022-03-28 19:34:45 +00:00
|
|
|
{Object.keys(TradingViews).map((key) => {
|
2022-03-09 16:59:48 +00:00
|
|
|
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,
|
|
|
|
});
|
2022-03-02 02:08:42 +00:00
|
|
|
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}
|
2022-03-28 19:34:45 +00:00
|
|
|
onClick={() => setView(key as TradingView)}
|
2022-03-02 02:08:42 +00:00
|
|
|
className={className}
|
|
|
|
key={key}
|
|
|
|
>
|
|
|
|
{key}
|
|
|
|
</button>
|
|
|
|
);
|
|
|
|
})}
|
2022-03-09 16:59:48 +00:00
|
|
|
<div className="bg-black-10 dark:bg-white-10 grow"></div>
|
2022-03-02 02:08:42 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|