From ab20c2314f77a9158c9e9b3b7dafebc2e58ed779 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Tue, 13 Sep 2022 20:37:10 +0200 Subject: [PATCH] chore: update account, fills and orders subscriptions in data providers --- .../lib/components/mocks/generate-orders.ts | 16 +++ .../__generated__/OrderFields.ts | 126 ------------------ .../__generated__/Orders.ts | 14 +- .../components/order-data-provider/index.ts | 1 - .../order-data-provider.ts | 10 +- .../order-list-manager/order-list-manager.tsx | 36 +++-- .../order-list/order-edit-dialog.tsx | 17 +-- .../order-list/order-list.stories.tsx | 25 +++- .../lib/components/order-list/order-list.tsx | 43 ++++-- .../src/lib/order-hooks/use-order-edit.tsx | 14 +- 10 files changed, 136 insertions(+), 166 deletions(-) delete mode 100644 libs/orders/src/lib/components/order-data-provider/__generated__/OrderFields.ts diff --git a/libs/orders/src/lib/components/mocks/generate-orders.ts b/libs/orders/src/lib/components/mocks/generate-orders.ts index 2125f19b4..c55f781d4 100644 --- a/libs/orders/src/lib/components/mocks/generate-orders.ts +++ b/libs/orders/src/lib/components/mocks/generate-orders.ts @@ -14,6 +14,10 @@ export const generateOrder = ( const order: Orders_party_ordersConnection_edges_node = { __typename: 'Order', id: 'order-id2', + market: { + __typename: 'Market', + id: 'market-id', + }, size: '10', type: OrderType.TYPE_MARKET, status: OrderStatus.STATUS_ACTIVE, @@ -49,6 +53,10 @@ export const generateMockOrders = return [ generateOrder({ id: '066468C06549101DAF7BC51099E1412A0067DC08C246B7D8013C9D0CBF1E8EE7', + market: { + __typename: 'Market', + id: 'c9f5acd348796011c075077e4d58d9b7f1689b7c1c8e030a5e886b83aa96923d', + }, size: '10', type: OrderType.TYPE_LIMIT, status: OrderStatus.STATUS_FILLED, @@ -60,6 +68,10 @@ export const generateMockOrders = }), generateOrder({ id: '48DB6767E4E4E0F649C5A13ABFADE39F8451C27DA828DAF14B7A1E8E5EBDAD99', + market: { + __typename: 'Market', + id: '5a4b0b9e9c0629f0315ec56fcb7bd444b0c6e4da5ec7677719d502626658a376', + }, size: '1', type: OrderType.TYPE_LIMIT, status: OrderStatus.STATUS_FILLED, @@ -71,6 +83,10 @@ export const generateMockOrders = }), generateOrder({ id: '4e93702990712c41f6995fcbbd94f60bb372ad12d64dfa7d96d205c49f790336', + market: { + __typename: 'Market', + id: 'c6f4337b31ed57a961969c3ba10297b369d01b9e75a4cbb96db4fc62886444e6', + }, size: '1', type: OrderType.TYPE_LIMIT, status: OrderStatus.STATUS_FILLED, diff --git a/libs/orders/src/lib/components/order-data-provider/__generated__/OrderFields.ts b/libs/orders/src/lib/components/order-data-provider/__generated__/OrderFields.ts deleted file mode 100644 index ebfd1865a..000000000 --- a/libs/orders/src/lib/components/order-data-provider/__generated__/OrderFields.ts +++ /dev/null @@ -1,126 +0,0 @@ -/* tslint:disable */ -/* eslint-disable */ -// @generated -// This file was automatically generated and should not be edited. - -import { OrderType, Side, OrderStatus, OrderRejectionReason, OrderTimeInForce } from "@vegaprotocol/types"; - -// ==================================================== -// GraphQL fragment: OrderFields -// ==================================================== - -export interface OrderFields_market_tradableInstrument_instrument { - __typename: "Instrument"; - /** - * Uniquely identify an instrument across all instruments available on Vega (string) - */ - id: string; - /** - * A short non necessarily unique code used to easily describe the instrument (e.g: FX:BTCUSD/DEC18) (string) - */ - code: string; - /** - * Full and fairly descriptive name for the instrument - */ - name: string; -} - -export interface OrderFields_market_tradableInstrument { - __typename: "TradableInstrument"; - /** - * An instance of, or reference to, a fully specified instrument. - */ - instrument: OrderFields_market_tradableInstrument_instrument; -} - -export interface OrderFields_market { - __typename: "Market"; - /** - * Market ID - */ - id: string; - /** - * decimalPlaces indicates the number of decimal places that an integer must be shifted by in order to get a correct - * number denominated in the currency of the market. (uint64) - * - * Examples: - * Currency Balance decimalPlaces Real Balance - * GBP 100 0 GBP 100 - * GBP 100 2 GBP 1.00 - * GBP 100 4 GBP 0.01 - * GBP 1 4 GBP 0.0001 ( 0.01p ) - * - * GBX (pence) 100 0 GBP 1.00 (100p ) - * GBX (pence) 100 2 GBP 0.01 ( 1p ) - * GBX (pence) 100 4 GBP 0.0001 ( 0.01p ) - * GBX (pence) 1 4 GBP 0.000001 ( 0.0001p) - */ - decimalPlaces: number; - /** - * positionDecimalPlaces indicates the number of decimal places that an integer must be shifted in order to get a correct size (uint64). - * i.e. 0 means there are no fractional orders for the market, and order sizes are always whole sizes. - * 2 means sizes given as 10^2 * desired size, e.g. a desired size of 1.23 is represented as 123 in this market. - * This sets how big the smallest order / position on the market can be. - */ - positionDecimalPlaces: number; - /** - * An instance of, or reference to, a tradable instrument. - */ - tradableInstrument: OrderFields_market_tradableInstrument; -} - -export interface OrderFields { - __typename: "Order"; - /** - * Hash of the order data - */ - id: string; - /** - * The market the order is trading on (probably stored internally as a hash of the market details) - */ - market: OrderFields_market; - /** - * Type the order type (defaults to PARTY) - */ - type: OrderType | null; - /** - * Whether the order is to buy or sell - */ - side: Side; - /** - * Total number of contracts that may be bought or sold (immutable) (uint64) - */ - size: string; - /** - * The status of an order, for example 'Active' - */ - status: OrderStatus; - /** - * Reason for the order to be rejected - */ - rejectionReason: OrderRejectionReason | null; - /** - * The worst price the order will trade at (e.g. buy for price or less, sell for price or more) (uint64) - */ - price: string; - /** - * The timeInForce of order (determines how and if it executes, and whether it persists on the book) - */ - timeInForce: OrderTimeInForce; - /** - * Number of contracts remaining of the total that have not yet been bought or sold (uint64) - */ - remaining: string; - /** - * Expiration time of this order (ISO-8601 RFC3339+Nano formatted date) - */ - expiresAt: string | null; - /** - * RFC3339Nano formatted date and time for when the order was created (timestamp) - */ - createdAt: string; - /** - * RFC3339Nano time the order was altered - */ - updatedAt: string | null; -} diff --git a/libs/orders/src/lib/components/order-data-provider/__generated__/Orders.ts b/libs/orders/src/lib/components/order-data-provider/__generated__/Orders.ts index 36d0d2681..4b06e35e6 100644 --- a/libs/orders/src/lib/components/order-data-provider/__generated__/Orders.ts +++ b/libs/orders/src/lib/components/order-data-provider/__generated__/Orders.ts @@ -9,12 +9,24 @@ import { Pagination, OrderType, Side, OrderStatus, OrderRejectionReason, OrderTi // GraphQL query operation: Orders // ==================================================== +export interface Orders_party_ordersConnection_edges_node_market { + __typename: "Market"; + /** + * Market ID + */ + id: string; +} + export interface Orders_party_ordersConnection_edges_node { __typename: "Order"; /** * Hash of the order data */ - id: string; + id: string; + /** + * The market the order is trading on (probably stored internally as a hash of the market details) + */ + market: Orders_party_ordersConnection_edges_node_market; /** * The order type */ diff --git a/libs/orders/src/lib/components/order-data-provider/index.ts b/libs/orders/src/lib/components/order-data-provider/index.ts index 13a0cc4e4..3d2555955 100644 --- a/libs/orders/src/lib/components/order-data-provider/index.ts +++ b/libs/orders/src/lib/components/order-data-provider/index.ts @@ -1,4 +1,3 @@ -export * from './__generated__/OrderFields'; export * from './__generated__/OrderSub'; export * from './__generated__/Orders'; export * from './order-data-provider'; diff --git a/libs/orders/src/lib/components/order-data-provider/order-data-provider.ts b/libs/orders/src/lib/components/order-data-provider/order-data-provider.ts index 102e103d1..472394ee0 100644 --- a/libs/orders/src/lib/components/order-data-provider/order-data-provider.ts +++ b/libs/orders/src/lib/components/order-data-provider/order-data-provider.ts @@ -22,6 +22,9 @@ export const ORDERS_QUERY = gql` edges { node { id + market { + id + } type side size @@ -91,9 +94,14 @@ export const update = ( draft.unshift(...draft.splice(index, 1)); } } else if (newer) { + const { marketId, ...order } = node; draft.unshift({ node: { - ...node, + ...order, + market: { + __typename: 'Market', + id: marketId, + }, __typename: 'Order', }, cursor: '', diff --git a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx index 18e38f7e7..66ddbc3a9 100644 --- a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx +++ b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx @@ -7,8 +7,9 @@ import { useCallback, useMemo, useRef } from 'react'; import type { BodyScrollEvent, BodyScrollEndEvent } from 'ag-grid-community'; import type { AgGridReact } from 'ag-grid-react'; +import { marketsProvider } from '@vegaprotocol/market-list'; import { OrderList, ordersDataProvider as dataProvider } from '../'; -import type { OrderFields, Orders_party_ordersConnection_edges } from '../'; +import type { Orders_party_ordersConnection_edges, OrderSub_orders } from '../'; interface OrderListManagerProps { partyId: string; @@ -44,7 +45,7 @@ export const OrderListManager = ({ partyId }: OrderListManagerProps) => { delta, }: { data: (Orders_party_ordersConnection_edges | null)[]; - delta: OrderFields[]; + delta: OrderSub_orders[]; }) => { if (!gridRef.current?.api) { return false; @@ -79,6 +80,14 @@ export const OrderListManager = ({ partyId }: OrderListManagerProps) => { [] ); + const { + data: markets, + error: marketsError, + loading: marketsLoading, + } = useDataProvider({ + dataProvider: marketsProvider, + }); + const { data, error, loading, load, totalCount } = useDataProvider({ dataProvider, update, @@ -107,14 +116,21 @@ export const OrderListManager = ({ partyId }: OrderListManagerProps) => { }; return ( - - + + {markets && ( + + )} ); }; diff --git a/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx b/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx index 8419e5faf..eb961fa86 100644 --- a/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx +++ b/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx @@ -14,15 +14,17 @@ import { Dialog, Icon, } from '@vegaprotocol/ui-toolkit'; +import type { Market } from '@vegaprotocol/market-list'; import { OrderTimeInForce } from '@vegaprotocol/types'; import { useForm } from 'react-hook-form'; -import type { OrderFields } from '../order-data-provider'; +import type { Orders_party_ordersConnection_edges_node } from '../order-data-provider'; interface OrderEditDialogProps { isOpen: boolean; onChange: (isOpen: boolean) => void; - order: OrderFields; + order: Orders_party_ordersConnection_edges_node; onSubmit: (fields: FormFields) => void; + market: Market; } interface FormFields { @@ -34,6 +36,7 @@ export const OrderEditDialog = ({ onChange, order, onSubmit, + market, }: OrderEditDialogProps) => { const headerClassName = 'text-lg font-bold text-black dark:text-white'; const { @@ -42,7 +45,7 @@ export const OrderEditDialog = ({ handleSubmit, } = useForm(); - const step = toDecimal(order.market?.decimalPlaces ?? 0); + const step = toDecimal(market.decimalPlaces); return (

{t(`Market`)}

-

{t(`${order.market.tradableInstrument.instrument.name}`)}

+

{t(`${market.tradableInstrument.instrument.name}`)}

)} {order.type === OrderType.TYPE_LIMIT && order.market && (

{t(`Current price`)}

-

- {addDecimalsFormatNumber(order.price, order.market.decimalPlaces)} -

+

{addDecimalsFormatNumber(order.price, market.decimalPlaces)}

)}
@@ -73,7 +74,7 @@ export const OrderEditDialog = ({ }

diff --git a/libs/orders/src/lib/components/order-list/order-list.stories.tsx b/libs/orders/src/lib/components/order-list/order-list.stories.tsx index 29a473da5..9b996e811 100644 --- a/libs/orders/src/lib/components/order-list/order-list.stories.tsx +++ b/libs/orders/src/lib/components/order-list/order-list.stories.tsx @@ -3,21 +3,37 @@ import { OrderList, OrderListTable } from './order-list'; import { useState } from 'react'; import type { VegaTxState } from '@vegaprotocol/wallet'; import { VegaTransactionDialog, VegaTxStatus } from '@vegaprotocol/wallet'; +import type { Market } from '@vegaprotocol/market-list'; import { generateOrdersArray } from '../mocks'; import { OrderEditDialog } from './order-edit-dialog'; -import type { OrderFields } from '../order-data-provider'; +import type { Orders_party_ordersConnection_edges_node } from '../order-data-provider'; export default { component: OrderList, title: 'OrderList', } as Meta; +const generateMatchingMarkets = ( + orders: Orders_party_ordersConnection_edges_node[] +) => + orders.map( + (order) => + ({ + id: order.market.id, + decimalPlaces: 5, + positionDecimalPlaces: 0, + } as Market) + ); + const Template: Story = (args) => { const cancel = () => Promise.resolve(); return (
{ return; @@ -29,7 +45,8 @@ const Template: Story = (args) => { const Template2: Story = (args) => { const [open, setOpen] = useState(false); - const [editOrder, setEditOrder] = useState(); + const [editOrder, setEditOrder] = + useState(); const cancel = () => { setOpen(!open); return Promise.resolve(); @@ -46,6 +63,9 @@ const Template2: Story = (args) => {
{ setEditOrder(order); @@ -59,6 +79,7 @@ const Template2: Story = (args) => { /> {editOrder && ( { if (!isOpen) setEditOrder(undefined); diff --git a/libs/orders/src/lib/components/order-list/order-list.tsx b/libs/orders/src/lib/components/order-list/order-list.tsx index 53cf3b4c4..4ce7e8bb2 100644 --- a/libs/orders/src/lib/components/order-list/order-list.tsx +++ b/libs/orders/src/lib/components/order-list/order-list.tsx @@ -29,6 +29,7 @@ import type { AgGridReactProps, AgReactUiProps, } from 'ag-grid-react'; +import type { Market } from '@vegaprotocol/market-list'; import { AgGridColumn } from 'ag-grid-react'; import { forwardRef, useState } from 'react'; import type { Orders_party_ordersConnection_edges_node } from '../'; @@ -37,16 +38,22 @@ import BigNumber from 'bignumber.js'; import { useOrderCancel } from '../../order-hooks/use-order-cancel'; import { useOrderEdit } from '../../order-hooks/use-order-edit'; import { OrderEditDialog } from './order-edit-dialog'; -import type { OrderFields } from '../'; import { OrderFeedback } from '../order-feedback'; -type OrderListProps = AgGridReactProps | AgReactUiProps; +type OrderListProps = (AgGridReactProps | AgReactUiProps) & { + markets: Market[]; +}; export const OrderList = forwardRef( (props, ref) => { - const [editOrder, setEditOrder] = useState(null); + const [editOrder, setEditOrder] = + useState(null); const orderCancel = useOrderCancel(); - const orderEdit = useOrderEdit(editOrder); + const market: Market | null = + (editOrder && + props.markets.find((market) => market.id === editOrder.market.id)) || + null; + const orderEdit = useOrderEdit(editOrder, market); return ( <> @@ -79,8 +86,9 @@ export const OrderList = forwardRef( order={orderEdit.updatedOrder} /> - {editOrder && ( + {editOrder && market && ( { if (!isOpen) setEditOrder(null); @@ -104,13 +112,13 @@ type OrderListTableValueFormatterParams = Omit< data: Orders_party_ordersConnection_edges_node | null; }; -type OrderListTableProps = (AgGridReactProps | AgReactUiProps) & { - cancel: (order: OrderFields) => void; - setEditOrder: (order: OrderFields) => void; +type OrderListTableProps = OrderListProps & { + cancel: (order: Orders_party_ordersConnection_edges_node) => void; + setEditOrder: (order: Orders_party_ordersConnection_edges_node) => void; }; export const OrderListTable = forwardRef( - ({ cancel, setEditOrder, ...props }, ref) => { + ({ cancel, setEditOrder, markets, ...props }, ref) => { return ( ( : '-' : ''; return ( - prefix + addDecimal(value, data.market.positionDecimalPlaces) + prefix + + addDecimal( + value, + markets.find((market) => market.id === data.market.id) + ?.positionDecimalPlaces ?? 0 + ) ); }} /> @@ -203,7 +216,9 @@ export const OrderListTable = forwardRef( if (value === undefined || !data || !data.market) { return undefined; } - const dps = data.market.positionDecimalPlaces; + const dps = + markets.find((market) => market.id === data.market.id) + ?.positionDecimalPlaces ?? 0; const size = new BigNumber(data.size); const remaining = new BigNumber(value); const fills = size.minus(remaining); @@ -231,7 +246,11 @@ export const OrderListTable = forwardRef( ) { return '-'; } - return addDecimal(value, data.market.decimalPlaces); + return addDecimal( + value, + markets.find((market) => market.id === data.market.id) + ?.decimalPlaces ?? 0 + ); }} /> { +export const useOrderEdit = ( + order: Orders_party_ordersConnection_edges_node | null, + market: Market | null +) => { const { keypair } = useVegaWallet(); const [updatedOrder, setUpdatedOrder] = @@ -34,7 +38,7 @@ export const useOrderEdit = (order: OrderFields | null) => { const edit = useCallback( async (args: EditOrderArgs) => { - if (!keypair || !order || !order.market) { + if (!keypair || !order || !market) { return; } @@ -47,7 +51,7 @@ export const useOrderEdit = (order: OrderFields | null) => { orderAmendment: { orderId: order.id, marketId: order.market.id, - price: removeDecimal(args.price, order.market.decimalPlaces), + price: removeDecimal(args.price, market.decimalPlaces), timeInForce: order.timeInForce, sizeDelta: 0, expiresAt: order.expiresAt @@ -65,7 +69,7 @@ export const useOrderEdit = (order: OrderFields | null) => { return; } }, - [keypair, send, order, setComplete, waitForOrderEvent] + [keypair, send, order, market, setComplete, waitForOrderEvent] ); return {