51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { useRef, memo } from 'react';
|
|
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
|
|
import { t } from '@vegaprotocol/react-helpers';
|
|
import type { AgGridReact } from 'ag-grid-react';
|
|
import PositionsTable from './positions-table';
|
|
import type { Position } from './positions-data-providers';
|
|
import { AssetBalance } from '@vegaprotocol/accounts';
|
|
import { usePositionsData } from './use-positions-data';
|
|
|
|
interface PositionsProps {
|
|
partyId: string;
|
|
assetSymbol: string;
|
|
onClose: (position: Position) => void;
|
|
}
|
|
|
|
export const Positions = memo(
|
|
({ partyId, assetSymbol, onClose }: PositionsProps) => {
|
|
const gridRef = useRef<AgGridReact | null>(null);
|
|
const { data, error, loading, getRows } = usePositionsData(
|
|
partyId,
|
|
gridRef,
|
|
assetSymbol
|
|
);
|
|
|
|
return (
|
|
<AsyncRenderer loading={loading} error={error} data={data}>
|
|
<div className="flex justify-between items-center px-4 pt-3 pb-1">
|
|
<h4>
|
|
{assetSymbol} {t('markets')}
|
|
</h4>
|
|
<div className="text-sm text-neutral-500 dark:text-neutral-300">
|
|
{assetSymbol} {t('balance')}:
|
|
<span data-testid="balance" className="pl-1 font-mono">
|
|
<AssetBalance partyId={partyId} assetSymbol={assetSymbol} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<PositionsTable
|
|
domLayout="autoHeight"
|
|
style={{ width: '100%' }}
|
|
ref={gridRef}
|
|
rowModelType={data?.length ? 'infinite' : 'clientSide'}
|
|
rowData={data?.length ? undefined : []}
|
|
datasource={{ getRows }}
|
|
onClose={onClose}
|
|
/>
|
|
</AsyncRenderer>
|
|
);
|
|
}
|
|
);
|