diff --git a/libs/positions/src/lib/positions-container.tsx b/libs/positions/src/lib/positions-container.tsx index 73ce63e7b..6322f6929 100644 --- a/libs/positions/src/lib/positions-container.tsx +++ b/libs/positions/src/lib/positions-container.tsx @@ -1,69 +1,17 @@ -import { useRef, useCallback, useMemo } from 'react'; -import { produce } from 'immer'; -import merge from 'lodash/merge'; -import { useRouter } from 'next/router'; -import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; -import { useDataProvider } from '@vegaprotocol/react-helpers'; +import { Splash } from '@vegaprotocol/ui-toolkit'; import { useVegaWallet } from '@vegaprotocol/wallet'; -import { PositionSubscribe_positions } from './__generated__/PositionSubscribe'; -import { Positions_party_positions } from './__generated__/Positions'; - -import type { AgGridReact } from 'ag-grid-react'; -import PositionsTable, { getRowNodeId } from './positions-table'; -import { positionsDataProvider } from './positions-data-provider'; +import { PositionsManager } from './positions-manager'; export const PositionsContainer = () => { - const { pathname, push } = useRouter(); - const gridRef = useRef(null); const { keypair } = useVegaWallet(); - const variables = useMemo(() => ({ partyId: keypair?.pub }), [keypair]); - 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) => { - merge(draft, delta); - } - ); - if (updatedData !== rowNode.data) { - update.push(updatedData); - } - } 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, variables); - return ( - - {(data) => ( - - push(`${pathname}/${id}?portfolio=orders&trade=orderbook`) - } - /> - )} - - ); + + if (!keypair) { + return ( + +

Please connect Vega wallet

+
+ ); + } + + return ; }; diff --git a/libs/positions/src/lib/positions-manager.tsx b/libs/positions/src/lib/positions-manager.tsx new file mode 100644 index 000000000..28b790a1f --- /dev/null +++ b/libs/positions/src/lib/positions-manager.tsx @@ -0,0 +1,61 @@ +import { useRef, useCallback, useMemo } from 'react'; +import { produce } from 'immer'; +import merge from 'lodash/merge'; +import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; +import { useDataProvider } from '@vegaprotocol/react-helpers'; +import { PositionSubscribe_positions } from './__generated__/PositionSubscribe'; +import { Positions_party_positions } from './__generated__/Positions'; + +import type { AgGridReact } from 'ag-grid-react'; +import PositionsTable, { getRowNodeId } from './positions-table'; +import { positionsDataProvider } from './positions-data-provider'; + +interface PositionsManagerProps { + partyId: string; +} + +export const PositionsManager = ({ partyId }: PositionsManagerProps) => { + const gridRef = useRef(null); + const variables = useMemo(() => ({ partyId }), [partyId]); + 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) => { + merge(draft, delta); + } + ); + if (updatedData !== rowNode.data) { + update.push(updatedData); + } + } 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, variables); + return ( + + {(data) => } + + ); +}; diff --git a/libs/positions/src/lib/positions-table.spec.tsx b/libs/positions/src/lib/positions-table.spec.tsx index 022895e29..e6a4c426e 100644 --- a/libs/positions/src/lib/positions-table.spec.tsx +++ b/libs/positions/src/lib/positions-table.spec.tsx @@ -54,19 +54,16 @@ const singleRow: Positions_party_positions = { __typename: 'Position', }; const singleRowData = [singleRow]; -const onRowClicked = jest.fn; test('should render successfully', async () => { await act(async () => { - const { baseElement } = render( - - ); + const { baseElement } = render(); expect(baseElement).toBeTruthy(); }); }); test('Render correct columns', async () => { await act(async () => { - render(); + render(); }); const headers = screen.getAllByRole('columnheader'); @@ -82,7 +79,7 @@ test('Render correct columns', async () => { test('Correct formatting applied', async () => { await act(async () => { - render(); + render(); }); const cells = screen.getAllByRole('gridcell'); const expectedValues = [ diff --git a/libs/positions/src/lib/positions-table.tsx b/libs/positions/src/lib/positions-table.tsx index d1dc1ce67..ebe695648 100644 --- a/libs/positions/src/lib/positions-table.tsx +++ b/libs/positions/src/lib/positions-table.tsx @@ -15,7 +15,6 @@ import { MarketTradingMode } from '@vegaprotocol/types'; interface PositionsTableProps { data: Positions_party_positions[] | null; - onRowClicked: (marketId: string) => void; } export const getRowNodeId = (data: { market: { id: string } }) => @@ -47,7 +46,7 @@ interface PositionsTableValueFormatterParams extends ValueFormatterParams { } export const PositionsTable = forwardRef( - ({ data, onRowClicked }, ref) => { + ({ data }, ref) => { const sortedData = useMemo(() => { return compact(data).sort(sortByName); }, [data]); @@ -62,9 +61,6 @@ export const PositionsTable = forwardRef( flex: 1, resizable: true, }} - onRowClicked={({ data }: { data: Positions_party_positions }) => - onRowClicked(getRowNodeId(data)) - } components={{ PriceCell }} > ({ return Something went wrong: {error.message}; } - if (loading || !data) { + if (loading) { return Loading...; } + if (!data) { + return No data; + } + return <>{children(data)}; }