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));
}}