From 37aafeebe45f15db7b8356f99df50f0c0929f85c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Thu, 15 Sep 2022 08:19:33 +0200 Subject: [PATCH] chore: update account, fills and orders subscriptions in data providers --- .../order-list/order-edit-dialog.tsx | 8 ++-- .../lib/components/order-list/order-list.tsx | 22 ++++------- libs/trades/src/lib/trades-container.tsx | 38 ++++++++----------- libs/trades/src/lib/trades-data-provider.ts | 14 ++++++- libs/trades/src/lib/trades-table.tsx | 27 +++++++++---- 5 files changed, 61 insertions(+), 48 deletions(-) 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..da09543bc 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 @@ -16,12 +16,12 @@ import { } from '@vegaprotocol/ui-toolkit'; import { OrderTimeInForce } from '@vegaprotocol/types'; import { useForm } from 'react-hook-form'; -import type { OrderFields } from '../order-data-provider'; +import type { OrderWithMarket } from '../order-data-provider'; interface OrderEditDialogProps { isOpen: boolean; onChange: (isOpen: boolean) => void; - order: OrderFields; + order: OrderWithMarket; onSubmit: (fields: FormFields) => void; } @@ -69,13 +69,13 @@ export const OrderEditDialog = ({

{t(`Size`)}

- { + {order.market && ( - } + )}

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 495aaf29b..4e74f2fe6 100644 --- a/libs/orders/src/lib/components/order-list/order-list.tsx +++ b/libs/orders/src/lib/components/order-list/order-list.tsx @@ -101,12 +101,12 @@ type OrderListTableValueFormatterParams = Omit< ValueFormatterParams, 'data' | 'value' > & { - data: Orders_party_ordersConnection_edges_node | null; + data: OrderWithMarket | null; }; type OrderListTableProps = (AgGridReactProps | AgReactUiProps) & { - cancel: (order: OrderFields) => void; - setEditOrder: (order: OrderFields) => void; + cancel: (order: OrderWithMarket) => void; + setEditOrder: (order: OrderWithMarket) => void; }; export const OrderListTable = forwardRef( @@ -131,22 +131,16 @@ export const OrderListTable = forwardRef( cellClass="font-mono text-right" type="rightAligned" cellClassRules={{ - [positiveClassNames]: ({ - data, - }: { - data: Orders_party_ordersConnection_edges_node; - }) => data?.side === Side.SIDE_BUY, - [negativeClassNames]: ({ - data, - }: { - data: Orders_party_ordersConnection_edges_node; - }) => data?.side === Side.SIDE_SELL, + [positiveClassNames]: ({ data }: { data: OrderWithMarket }) => + data?.side === Side.SIDE_BUY, + [negativeClassNames]: ({ data }: { data: OrderWithMarket }) => + data?.side === Side.SIDE_SELL, }} valueFormatter={({ value, data, }: OrderListTableValueFormatterParams & { - value?: Orders_party_ordersConnection_edges_node['size']; + value?: OrderWithMarket['size']; }) => { if (value === undefined || !data || !data.market) { return undefined; diff --git a/libs/trades/src/lib/trades-container.tsx b/libs/trades/src/lib/trades-container.tsx index 274c4efa9..8c2a0fe5d 100644 --- a/libs/trades/src/lib/trades-container.tsx +++ b/libs/trades/src/lib/trades-container.tsx @@ -6,16 +6,13 @@ import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; import type { AgGridReact } from 'ag-grid-react'; import { useCallback, useMemo, useRef } from 'react'; import type { BodyScrollEvent, BodyScrollEndEvent } from 'ag-grid-community'; -import { - MAX_TRADES, - tradesDataProvider as dataProvider, -} from './trades-data-provider'; +import { MAX_TRADES, tradesWithMarketProvider } from './trades-data-provider'; import { TradesTable } from './trades-table'; -import type { TradeFields } from './__generated__/TradeFields'; import type { - TradesVariables, - Trades_market_tradesConnection_edges, -} from './__generated__/Trades'; + TradeWithMarket, + TradeWithMarketEdge, +} from './trades-data-provider'; +import type { TradesVariables } from './__generated__/Trades'; interface TradesContainerProps { marketId: string; @@ -23,9 +20,7 @@ interface TradesContainerProps { export const TradesContainer = ({ marketId }: TradesContainerProps) => { const gridRef = useRef(null); - const dataRef = useRef< - (Trades_market_tradesConnection_edges | null)[] | null - >(null); + const dataRef = useRef(null); const totalCountRef = useRef(undefined); const newRows = useRef(0); const scrolledToTop = useRef(true); @@ -54,8 +49,8 @@ export const TradesContainer = ({ marketId }: TradesContainerProps) => { data, delta, }: { - data: (Trades_market_tradesConnection_edges | null)[]; - delta: TradeFields[]; + data: TradeWithMarketEdge[]; + delta: TradeWithMarket[]; }) => { if (!gridRef.current?.api) { return false; @@ -80,7 +75,7 @@ export const TradesContainer = ({ marketId }: TradesContainerProps) => { data, totalCount, }: { - data: (Trades_market_tradesConnection_edges | null)[]; + data: TradeWithMarketEdge[]; totalCount?: number; }) => { dataRef.current = data; @@ -91,7 +86,7 @@ export const TradesContainer = ({ marketId }: TradesContainerProps) => { ); const { data, error, loading, load, totalCount } = useDataProvider({ - dataProvider, + dataProvider: tradesWithMarketProvider, update, insert, variables, @@ -99,13 +94,12 @@ export const TradesContainer = ({ marketId }: TradesContainerProps) => { totalCountRef.current = totalCount; dataRef.current = data; - const getRows = - makeInfiniteScrollGetRows( - newRows, - dataRef, - totalCountRef, - load - ); + const getRows = makeInfiniteScrollGetRows( + newRows, + dataRef, + totalCountRef, + load + ); const onBodyScrollEnd = (event: BodyScrollEndEvent) => { if (event.top === 0) { diff --git a/libs/trades/src/lib/trades-data-provider.ts b/libs/trades/src/lib/trades-data-provider.ts index 94621ee21..e2b4ddcf7 100644 --- a/libs/trades/src/lib/trades-data-provider.ts +++ b/libs/trades/src/lib/trades-data-provider.ts @@ -75,7 +75,19 @@ const update = ( } else { const firstNode = draft[0]?.node; if (firstNode && node.createdAt >= firstNode.createdAt) { - draft.unshift({ node, cursor: '', __typename: 'TradeEdge' }); + const { marketId, ...nodeData } = node; + draft.unshift({ + node: { + ...nodeData, + __typename: 'Trade', + market: { + __typename: 'Market', + id: marketId, + }, + }, + cursor: '', + __typename: 'TradeEdge', + }); } } }); diff --git a/libs/trades/src/lib/trades-table.tsx b/libs/trades/src/lib/trades-table.tsx index 45a17a723..43c677e79 100644 --- a/libs/trades/src/lib/trades-table.tsx +++ b/libs/trades/src/lib/trades-table.tsx @@ -8,9 +8,10 @@ import { getDateTimeFormat, t, } from '@vegaprotocol/react-helpers'; +import type { IDatasource, IGetRowsParams } from 'ag-grid-community'; import type { CellClassParams, ValueFormatterParams } from 'ag-grid-community'; -import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react'; -import type { Trades_market_tradesConnection_edges_node } from './__generated__/Trades'; +import type { AgGridReactProps } from 'ag-grid-react'; +import type { TradeWithMarket } from './trades-data-provider'; import BigNumber from 'bignumber.js'; export const UP_CLASS = 'text-vega-green-dark dark:text-vega-green'; @@ -37,12 +38,24 @@ const changeCellClass = return ['font-mono text-right', colorClass].join(' '); }; -type Props = AgGridReactProps | AgReactUiProps; +export interface GetRowsParams extends Omit { + successCallback(rowsThisBlock: TradeWithMarket[], lastRow?: number): void; +} + +export interface Datasource extends IDatasource { + getRows(params: GetRowsParams): void; +} + +interface Props extends AgGridReactProps { + rowData?: TradeWithMarket[] | null; + datasource?: Datasource; +} + type TradesTableValueFormatterParams = Omit< ValueFormatterParams, 'data' | 'value' > & { - data: Trades_market_tradesConnection_edges_node | null; + data: TradeWithMarket | null; }; export const TradesTable = forwardRef((props, ref) => { @@ -67,7 +80,7 @@ export const TradesTable = forwardRef((props, ref) => { value, data, }: TradesTableValueFormatterParams & { - value: Trades_market_tradesConnection_edges_node['price']; + value: TradeWithMarket['price']; }) => { if (!data?.market) { return null; @@ -84,7 +97,7 @@ export const TradesTable = forwardRef((props, ref) => { value, data, }: TradesTableValueFormatterParams & { - value: Trades_market_tradesConnection_edges_node['size']; + value: TradeWithMarket['size']; }) => { if (!data?.market) { return null; @@ -100,7 +113,7 @@ export const TradesTable = forwardRef((props, ref) => { valueFormatter={({ value, }: TradesTableValueFormatterParams & { - value: Trades_market_tradesConnection_edges_node['createdAt']; + value: TradeWithMarket['createdAt']; }) => { return value && getDateTimeFormat().format(new Date(value)); }}