vega-frontend-monorepo/apps/trading/pages/markets/positions.tsx
2022-03-29 19:31:00 +02:00

72 lines
2.2 KiB
TypeScript

import { useRef, useCallback, useMemo } from 'react';
import { produce } from 'immer';
import merge from 'lodash/merge';
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 { useVegaWallet } from '@vegaprotocol/wallet';
import type { AgGridReact } from 'ag-grid-react';
export const Positions = () => {
const { pathname, push } = useRouter();
const gridRef = useRef<AgGridReact | null>(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<Positions_party_positions>(
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 (
<AsyncRenderer loading={loading} error={error} data={data}>
{(data) => (
<PositionsTable
ref={gridRef}
data={data}
onRowClicked={(id) =>
push(`${pathname}/${id}?portfolio=orders&trade=orderbook`)
}
/>
)}
</AsyncRenderer>
);
};