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

147 lines
4.3 KiB
TypeScript
Raw Normal View History

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
import { Market_market } from '@vegaprotocol/graphql';
import classNames from 'classnames';
import AutoSizer from 'react-virtualized-auto-sizer';
import { useState, ReactNode } from 'react';
import { GridTab, GridTabs } from './grid-tabs';
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
import { DealTicketContainer } from '../../components/deal-ticket-container';
Feat/84 Order list (#89) * 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 * add button radio component * revert dialog styles * move splash component to ui-toolkit, add story * convert intent to enum * add date-fns, add datetime to helpers * add order types to wallet package, make price undefined if order type is market * tidy up order state by moving submit and transaction hooks out of deal ticket * add types package, delete old generated types from trading project * rename types package to graphql * add order list container and order list component * add test setup for useOrders * add test for use-orders hook * tidy unnecessary diff * regen types and use them in order-list, also change to use applytransaction hook for orderlist grid * make order table columns resizable * make market table not have highlightable cells, use splash for orders errors and loading states, unit test for orderlist container * add tests for order list table * show rejection reason and expires at depending on status and tif * add decimal places to query * only update row if data has changed, add test coverage * add setup tests file to avoid importing jest-dom for every test, add async-renderer component to handle fetch ui logic * install all of lodash but import individually to get tree shaking * add setup tests file for orderlist package * add missing fields to use orders spec mock order * fix act warnings in index page test * fix casing of app import * remove react-singleton-hook, simplify side formatting * fix linting errors
2022-03-23 19:08:10 +00:00
import { OrderListContainer } from '../..//components/order-list-container';
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 = () => <div>TODO: Chart</div>;
const Orderbook = () => <div>TODO: Orderbook</div>;
const Positions = () => <div>TODO: Positions</div>;
const Collateral = () => <div>TODO: Collateral</div>;
type TradingView = keyof typeof TradingViews;
const TradingViews = {
chart: Chart,
ticket: DealTicketContainer,
orderbook: Orderbook,
Feat/84 Order list (#89) * 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 * add button radio component * revert dialog styles * move splash component to ui-toolkit, add story * convert intent to enum * add date-fns, add datetime to helpers * add order types to wallet package, make price undefined if order type is market * tidy up order state by moving submit and transaction hooks out of deal ticket * add types package, delete old generated types from trading project * rename types package to graphql * add order list container and order list component * add test setup for useOrders * add test for use-orders hook * tidy unnecessary diff * regen types and use them in order-list, also change to use applytransaction hook for orderlist grid * make order table columns resizable * make market table not have highlightable cells, use splash for orders errors and loading states, unit test for orderlist container * add tests for order list table * show rejection reason and expires at depending on status and tif * add decimal places to query * only update row if data has changed, add test coverage * add setup tests file to avoid importing jest-dom for every test, add async-renderer component to handle fetch ui logic * install all of lodash but import individually to get tree shaking * add setup tests file for orderlist package * add missing fields to use orders spec mock order * fix act warnings in index page test * fix casing of app import * remove react-singleton-hook, simplify side formatting * fix linting errors
2022-03-23 19:08:10 +00:00
orders: OrderListContainer,
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
positions: Positions,
collateral: Collateral,
};
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>Market: {market.name}</h1>
</header>
<TradeGridChild className="col-start-1 col-end-2">
2022-03-02 19:20:23 +00:00
<TradingViews.chart />
</TradeGridChild>
<TradeGridChild className="row-start-1 row-end-3">
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
<TradingViews.ticket market={market} />
</TradeGridChild>
<TradeGridChild className="row-start-1 row-end-3">
<GridTabs group="trade">
<GridTab name="trades">
<pre>{JSON.stringify(market.trades, null, 2)}</pre>
</GridTab>
<GridTab name="orderbook">
2022-03-02 19:20:23 +00:00
<TradingViews.orderbook />
</GridTab>
</GridTabs>
</TradeGridChild>
<TradeGridChild className="col-span-3">
<GridTabs group="portfolio">
<GridTab name="orders">
2022-03-02 19:20:23 +00:00
<TradingViews.orders />
</GridTab>
<GridTab name="positions">
2022-03-02 19:20:23 +00:00
<TradingViews.positions />
</GridTab>
<GridTab name="collateral">
2022-03-02 19:20:23 +00:00
<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) => {
2022-03-02 19:20:23 +00:00
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}`);
}
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
return <Component market={market} />;
};
return (
<div className="h-full grid grid-rows-[min-content_1fr_min-content]">
<header className="p-8">
<h1>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">
2022-03-02 19:20:23 +00:00
{Object.keys(TradingViews).map((key: TradingView) => {
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
onClick={() => setView(key)}
className={className}
key={key}
>
{key}
</button>
);
})}
<div className="bg-black-10 dark:bg-white-10 grow"></div>
</div>
</div>
);
};