diff --git a/apps/trading/pages/markets/positions.tsx b/apps/trading/pages/markets/positions.tsx new file mode 100644 index 000000000..2c103cc7e --- /dev/null +++ b/apps/trading/pages/markets/positions.tsx @@ -0,0 +1,66 @@ +import { useRef, useCallback } from 'react'; +import { produce } from 'immer'; +import assign from 'assign-deep'; +import { useRouter } from 'next/router'; +import { AsyncRenderer } from '../../components/async-renderer'; +import { PositionsTable, getRowNodeId } from '@vegaprotocol/positions'; +import { useDataProvider } from '@vegaprotocol/react-helpers'; +import { + positions_party_positions, + positionSubscribe_positions, + positionsDataProvider, +} from '@vegaprotocol/graphql'; + +import type { AgGridReact } from 'ag-grid-react'; + +export const Positions = () => { + const { pathname, push } = useRouter(); + const gridRef = useRef(); + const update = useCallback( + (delta: positionSubscribe_positions) => { + const update: positions_party_positions[] = []; + const add: positions_party_positions[] = []; + if (!gridRef.current) { + return false; + } + const rowNode = gridRef.current.api.getRowNode(getRowNodeId(delta)); + if (rowNode) { + const updatedData = produce( + rowNode.data, + (draft: positions_party_positions) => assign(draft, delta) + ); + if (updatedData !== rowNode.data) { + update.push(delta); + } + } else { + add.push(delta); + } + if (update.length || add.length) { + gridRef.current.api.applyTransactionAsync({ + update, + add, + addIndex: 0, + }); + } + return true; + }, + [gridRef] + ); + const { data, error, loading } = useDataProvider< + positions_party_positions, + positionSubscribe_positions + >(positionsDataProvider, update); + return ( + + {(data) => ( + + push(`${pathname}/${id}?portfolio=orders&trade=orderbook`) + } + /> + )} + + ); +}; diff --git a/apps/trading/pages/markets/trade-grid.tsx b/apps/trading/pages/markets/trade-grid.tsx index ae848b06e..95de8f5aa 100644 --- a/apps/trading/pages/markets/trade-grid.tsx +++ b/apps/trading/pages/markets/trade-grid.tsx @@ -6,6 +6,7 @@ import { GridTab, GridTabs } from './grid-tabs'; import { DealTicketContainer } from '../../components/deal-ticket-container'; import { OrderListContainer } from '../..//components/order-list-container'; import { Splash } from '@vegaprotocol/ui-toolkit'; +import { Positions } from './positions'; const Chart = () => ( @@ -17,11 +18,6 @@ const Orderbook = () => (

Orderbook

); -const Positions = () => ( - -

Positions

-
-); const Collateral = () => (

Collateral

diff --git a/libs/market-list/src/lib/market-list-table.tsx b/libs/market-list/src/lib/market-list-table.tsx index cda57e6be..27a5d7a74 100644 --- a/libs/market-list/src/lib/market-list-table.tsx +++ b/libs/market-list/src/lib/market-list-table.tsx @@ -7,19 +7,19 @@ import { AgGridColumn } from 'ag-grid-react'; import type { AgGridReact } from 'ag-grid-react'; interface MarketListTableProps { - markets: Markets_markets[] | null; + data: Markets_markets[]; onRowClicked: (marketId: string) => void; } export const getRowNodeId = (data: { id: string }) => data.id; export const MarketListTable = forwardRef( - ({ markets, onRowClicked }, ref) => { + ({ data, onRowClicked }, ref) => { return ( ( + dataProvider: ( + client: ApolloClient, + callback: (arg: { + data: Data[] | null; + error?: Error; + loading: boolean; + delta?: Delta; + }) => void + ) => () => void, + update: (delta: Delta) => boolean = () => false +) { + const client = useApolloClient(); + const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(undefined); + const initialized = useRef(false); + useEffect(() => { + return dataProvider(client, ({ data, error, loading, delta }) => { + setError(error); + setLoading(loading); + if (!error && !loading) { + if (!initialized.current || !delta || !update(delta)) { + initialized.current = true; + setData(data); + } + } + }); + }, [client, initialized, dataProvider, update]); + return { data, loading, error }; +} diff --git a/libs/react-helpers/src/index.ts b/libs/react-helpers/src/index.ts index 189328d48..efc2cfa4e 100644 --- a/libs/react-helpers/src/index.ts +++ b/libs/react-helpers/src/index.ts @@ -5,5 +5,4 @@ export * from './lib/format'; export * from './lib/grid-cells'; export * from './lib/storage'; -export * from './hooks/use-apply-grid-transaction'; -export * from './hooks/use-theme-switcher'; +export * from './hooks';