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-06-22 19:08:12 +00:00
|
|
|
import {
|
|
|
|
DealTicketContainer,
|
|
|
|
MarketInfoContainer,
|
|
|
|
} from '@vegaprotocol/deal-ticket';
|
2022-07-13 14:23:46 +00:00
|
|
|
import { OrderListContainer } from '@vegaprotocol/orders';
|
2022-04-07 13:41:57 +00:00
|
|
|
import { TradesContainer } from '@vegaprotocol/trades';
|
2022-03-29 22:52:51 +00:00
|
|
|
import { PositionsContainer } from '@vegaprotocol/positions';
|
2022-04-26 15:26:28 +00:00
|
|
|
import { OrderbookContainer } from '@vegaprotocol/market-depth';
|
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';
|
2022-04-26 15:26:28 +00:00
|
|
|
import { DepthChartContainer } from '@vegaprotocol/market-depth';
|
2022-04-25 17:34:07 +00:00
|
|
|
import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
|
2022-06-06 16:19:56 +00:00
|
|
|
import { SelectMarketDialog } from '@vegaprotocol/market-list';
|
2022-06-17 14:56:42 +00:00
|
|
|
import {
|
|
|
|
ArrowDown,
|
2022-06-24 03:16:01 +00:00
|
|
|
Tab,
|
|
|
|
Tabs,
|
2022-06-17 14:56:42 +00:00
|
|
|
PriceCellChange,
|
|
|
|
} from '@vegaprotocol/ui-toolkit';
|
2022-06-06 16:19:56 +00:00
|
|
|
import type { CandleClose } from '@vegaprotocol/types';
|
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-25 17:34:07 +00:00
|
|
|
Candles: CandlesChartContainer,
|
|
|
|
Depth: DepthChartContainer,
|
2022-03-28 19:34:45 +00:00
|
|
|
Ticket: DealTicketContainer,
|
2022-07-14 16:03:17 +00:00
|
|
|
Info: MarketInfoContainer,
|
2022-04-26 15:26:28 +00:00
|
|
|
Orderbook: OrderbookContainer,
|
2022-04-07 13:41:57 +00:00
|
|
|
Trades: TradesContainer,
|
2022-07-14 16:03:17 +00:00
|
|
|
Positions: PositionsContainer,
|
|
|
|
Orders: OrderListContainer,
|
|
|
|
Collateral: AccountsContainer,
|
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-06-20 23:52:25 +00:00
|
|
|
interface TradeMarketHeaderProps {
|
2022-03-02 02:08:42 +00:00
|
|
|
market: Market_market;
|
2022-06-20 23:52:25 +00:00
|
|
|
className?: string;
|
2022-03-02 02:08:42 +00:00
|
|
|
}
|
|
|
|
|
2022-06-20 23:52:25 +00:00
|
|
|
export const TradeMarketHeader = ({
|
|
|
|
market,
|
|
|
|
className,
|
|
|
|
}: TradeMarketHeaderProps) => {
|
2022-06-06 16:19:56 +00:00
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const candlesClose: string[] = (market?.candles || [])
|
|
|
|
.map((candle) => candle?.close)
|
|
|
|
.filter((c): c is CandleClose => c !== null);
|
|
|
|
const headerItemClassName = 'whitespace-nowrap flex flex-col';
|
|
|
|
const itemClassName =
|
2022-07-14 16:03:17 +00:00
|
|
|
'font-sans font-normal mb-0 text-black-60 dark:text-white-80 text-ui-small';
|
2022-06-06 16:19:56 +00:00
|
|
|
const itemValueClassName =
|
|
|
|
'capitalize font-sans tracking-tighter text-black dark:text-white text-ui';
|
2022-06-22 19:08:12 +00:00
|
|
|
const headerClassName = classNames(
|
2022-06-20 23:52:25 +00:00
|
|
|
'w-full p-8 bg-white dark:bg-black',
|
|
|
|
className
|
|
|
|
);
|
2022-06-06 16:19:56 +00:00
|
|
|
return (
|
2022-06-22 19:08:12 +00:00
|
|
|
<header className={headerClassName}>
|
2022-06-06 16:19:56 +00:00
|
|
|
<SelectMarketDialog dialogOpen={open} setDialogOpen={setOpen} />
|
|
|
|
<div className="flex flex-col md:flex-row gap-20 md:gap-64 ml-auto mr-8">
|
|
|
|
<button
|
|
|
|
onClick={() => setOpen(!open)}
|
2022-07-14 16:03:17 +00:00
|
|
|
className="shrink-0 text-vega-pink dark:text-vega-yellow font-medium text-h5 flex items-center gap-8 px-4 py-0 h-37 hover:bg-black/10 dark:hover:bg-white/20"
|
2022-06-06 16:19:56 +00:00
|
|
|
>
|
|
|
|
<span className="break-words text-left">{market.name}</span>
|
|
|
|
<ArrowDown color="yellow" borderX={8} borderTop={12} />
|
|
|
|
</button>
|
|
|
|
|
2022-06-29 12:57:42 +00:00
|
|
|
<div
|
|
|
|
data-testid="market-summary"
|
2022-07-14 16:03:17 +00:00
|
|
|
className="flex flex-auto items-start gap-64 overflow-x-auto whitespace-nowrap"
|
2022-06-29 12:57:42 +00:00
|
|
|
>
|
2022-06-06 16:19:56 +00:00
|
|
|
<div className={headerItemClassName}>
|
|
|
|
<span className={itemClassName}>Change (24h)</span>
|
|
|
|
<PriceCellChange
|
|
|
|
candles={candlesClose}
|
|
|
|
decimalPlaces={market.decimalPlaces}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className={headerItemClassName}>
|
|
|
|
<span className={itemClassName}>Volume</span>
|
2022-06-29 12:57:42 +00:00
|
|
|
<span data-testid="trading-volume" className={itemValueClassName}>
|
2022-06-06 16:19:56 +00:00
|
|
|
{market.data && market.data.indicativeVolume !== '0'
|
|
|
|
? market.data.indicativeVolume
|
|
|
|
: '-'}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div className={headerItemClassName}>
|
|
|
|
<span className={itemClassName}>Trading mode</span>
|
2022-06-29 12:57:42 +00:00
|
|
|
<span data-testid="trading-mode" className={itemValueClassName}>
|
|
|
|
{market.tradingMode}
|
|
|
|
</span>
|
2022-06-06 16:19:56 +00:00
|
|
|
</div>
|
|
|
|
<div className={headerItemClassName}>
|
|
|
|
<span className={itemClassName}>State</span>
|
2022-06-29 12:57:42 +00:00
|
|
|
<span data-testid="market-state" className={itemValueClassName}>
|
|
|
|
{market.state}
|
|
|
|
</span>
|
2022-06-06 16:19:56 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-06-20 23:52:25 +00:00
|
|
|
interface TradeGridProps {
|
|
|
|
market: Market_market;
|
|
|
|
}
|
|
|
|
|
2022-03-02 02:08:42 +00:00
|
|
|
export const TradeGrid = ({ market }: TradeGridProps) => {
|
|
|
|
const wrapperClasses = classNames(
|
|
|
|
'h-full max-h-full',
|
2022-07-14 16:03:17 +00:00
|
|
|
'grid gap-x-8 gap-y-4 grid-cols-[1fr_325px_425px] grid-rows-[min-content_1fr_200px]',
|
|
|
|
'bg-black-10 dark:bg-black-70',
|
2022-03-02 02:08:42 +00:00
|
|
|
'text-ui'
|
|
|
|
);
|
2022-06-06 16:19:56 +00:00
|
|
|
|
2022-03-02 02:08:42 +00:00
|
|
|
return (
|
2022-06-06 16:19:56 +00:00
|
|
|
<>
|
|
|
|
<div className={wrapperClasses}>
|
2022-06-20 23:52:25 +00:00
|
|
|
<TradeMarketHeader
|
|
|
|
market={market}
|
2022-06-22 19:08:12 +00:00
|
|
|
className="row-start-1 row-end-2 col-start-1 col-end-4"
|
2022-06-20 23:52:25 +00:00
|
|
|
/>
|
|
|
|
<TradeGridChild className="row-start-2 row-end-3 col-start-1 col-end-2">
|
2022-06-24 03:16:01 +00:00
|
|
|
<Tabs>
|
|
|
|
<Tab id="candles" name={t('Candles')}>
|
2022-06-06 16:19:56 +00:00
|
|
|
<TradingViews.Candles marketId={market.id} />
|
2022-06-24 03:16:01 +00:00
|
|
|
</Tab>
|
|
|
|
<Tab id="depth" name={t('Depth')}>
|
2022-06-06 16:19:56 +00:00
|
|
|
<TradingViews.Depth marketId={market.id} />
|
2022-06-24 03:16:01 +00:00
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
2022-06-06 16:19:56 +00:00
|
|
|
</TradeGridChild>
|
2022-06-22 19:08:12 +00:00
|
|
|
<TradeGridChild className="row-start-2 row-end-3 col-start-2 col-end-3">
|
2022-06-24 03:16:01 +00:00
|
|
|
<Tabs>
|
|
|
|
<Tab id="ticket" name={t('Ticket')}>
|
2022-06-22 19:08:12 +00:00
|
|
|
<TradingViews.Ticket marketId={market.id} />
|
2022-06-24 03:16:01 +00:00
|
|
|
</Tab>
|
|
|
|
<Tab id="info" name={t('Info')}>
|
2022-06-22 19:08:12 +00:00
|
|
|
<TradingViews.Info marketId={market.id} />
|
2022-06-24 03:16:01 +00:00
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
2022-06-06 16:19:56 +00:00
|
|
|
</TradeGridChild>
|
2022-06-22 19:08:12 +00:00
|
|
|
<TradeGridChild className="row-start-2 row-end-3 col-start-3 col-end-4">
|
2022-06-24 03:16:01 +00:00
|
|
|
<Tabs>
|
|
|
|
<Tab id="orderbook" name={t('Orderbook')}>
|
2022-06-06 16:19:56 +00:00
|
|
|
<TradingViews.Orderbook marketId={market.id} />
|
2022-06-24 03:16:01 +00:00
|
|
|
</Tab>
|
2022-07-14 16:03:17 +00:00
|
|
|
<Tab id="trades" name={t('Trades')}>
|
|
|
|
<TradingViews.Trades marketId={market.id} />
|
|
|
|
</Tab>
|
2022-06-24 03:16:01 +00:00
|
|
|
</Tabs>
|
2022-06-06 16:19:56 +00:00
|
|
|
</TradeGridChild>
|
|
|
|
<TradeGridChild className="col-span-3">
|
2022-06-24 03:16:01 +00:00
|
|
|
<Tabs>
|
|
|
|
<Tab id="positions" name={t('Positions')}>
|
2022-06-06 16:19:56 +00:00
|
|
|
<TradingViews.Positions />
|
2022-06-24 03:16:01 +00:00
|
|
|
</Tab>
|
2022-07-14 16:03:17 +00:00
|
|
|
<Tab id="orders" name={t('Orders')}>
|
|
|
|
<TradingViews.Orders />
|
|
|
|
</Tab>
|
|
|
|
<Tab id="accounts" name={t('Collateral')}>
|
|
|
|
<TradingViews.Collateral />
|
2022-06-24 03:16:01 +00:00
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
2022-06-06 16:19:56 +00:00
|
|
|
</TradeGridChild>
|
|
|
|
</div>
|
|
|
|
</>
|
2022-03-02 02:08:42 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
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-04-25 17:34:07 +00:00
|
|
|
const [view, setView] = useState<TradingView>('Candles');
|
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-06-06 16:19:56 +00:00
|
|
|
<TradeMarketHeader market={market} />
|
2022-03-02 02:08:42 +00:00
|
|
|
<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>
|
|
|
|
);
|
|
|
|
};
|