diff --git a/apps/console-lite-e2e/src/integration/portfolio-page.test.ts b/apps/console-lite-e2e/src/integration/portfolio-page.test.ts index 8b4ca89af..c016d1789 100644 --- a/apps/console-lite-e2e/src/integration/portfolio-page.test.ts +++ b/apps/console-lite-e2e/src/integration/portfolio-page.test.ts @@ -95,8 +95,7 @@ describe('Portfolio page', { tags: '@smoke' }, () => { }); it('data should be properly rendered', () => { - cy.getByTestId('positions-asset-tDAI').should('exist'); - cy.getByTestId('positions-asset-tEURO').should('exist'); + cy.get('.ag-center-cols-container .ag-row').should('have.length', 2); }); }); diff --git a/apps/console-lite/src/app/components/portfolio/positions/positions-asset.tsx b/apps/console-lite/src/app/components/portfolio/positions/positions-asset.tsx deleted file mode 100644 index d50e10b14..000000000 --- a/apps/console-lite/src/app/components/portfolio/positions/positions-asset.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; -import { useRef } from 'react'; -import type { AgGridReact } from 'ag-grid-react'; -import type { Position } from '@vegaprotocol/positions'; -import { PriceFlashCell, t } from '@vegaprotocol/react-helpers'; -import { AssetBalance } from '@vegaprotocol/accounts'; -import { usePositionsData } from '@vegaprotocol/positions'; -import { ConsoleLiteGrid } from '../../console-lite-grid'; -import useColumnDefinitions from './use-column-definitions'; - -interface Props { - partyId: string; - assetSymbol: string; -} - -const getRowId = ({ data }: { data: Position }) => data.marketId; - -const PositionsAsset = ({ partyId, assetSymbol }: Props) => { - const gridRef = useRef(null); - const { data, error, loading, getRows } = usePositionsData( - partyId, - gridRef, - assetSymbol - ); - const { columnDefs, defaultColDef } = useColumnDefinitions(); - return ( - -
-

- {assetSymbol} {t('markets')} -

-
- {assetSymbol} {t('balance')}: - - - -
-
- - ref={gridRef} - domLayout="autoHeight" - classNamesParam="h-auto" - columnDefs={columnDefs} - defaultColDef={defaultColDef} - getRowId={getRowId} - rowModelType={data?.length ? 'infinite' : 'clientSide'} - rowData={data?.length ? undefined : []} - datasource={{ getRows }} - components={{ PriceFlashCell }} - /> -
- ); -}; - -export default PositionsAsset; diff --git a/apps/console-lite/src/app/components/portfolio/positions/positions.tsx b/apps/console-lite/src/app/components/portfolio/positions/positions.tsx index da9de0939..675e24825 100644 --- a/apps/console-lite/src/app/components/portfolio/positions/positions.tsx +++ b/apps/console-lite/src/app/components/portfolio/positions/positions.tsx @@ -1,26 +1,37 @@ import { useOutletContext } from 'react-router-dom'; -import { t } from '@vegaprotocol/react-helpers'; -import { usePositionsAssets } from '@vegaprotocol/positions'; -import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit'; -import PositionsAsset from './positions-asset'; +import { PriceFlashCell } from '@vegaprotocol/react-helpers'; +import { usePositionsData, getRowId } from '@vegaprotocol/positions'; +import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; +import { ConsoleLiteGrid } from '../../console-lite-grid'; +import { useRef } from 'react'; +import type { AgGridReact } from 'ag-grid-react'; +import type { Position } from '@vegaprotocol/positions'; +import { NO_DATA_MESSAGE } from '../../../constants'; + +import useColumnDefinitions from './use-column-definitions'; const Positions = () => { + const gridRef = useRef(null); const { partyId } = useOutletContext<{ partyId: string }>(); - const { data, error, loading, assetSymbols } = usePositionsAssets(partyId); + const { data, error, loading } = usePositionsData(partyId, gridRef); + const { columnDefs, defaultColDef } = useColumnDefinitions(); return ( - - {assetSymbols && assetSymbols.length > 0 && ( -
- {assetSymbols?.map((assetSymbol) => ( - - ))} -
- )} - {assetSymbols?.length === 0 && {t('No data to display')}} + + + ref={gridRef} + domLayout="autoHeight" + classNamesParam="h-auto" + columnDefs={columnDefs} + defaultColDef={defaultColDef} + getRowId={getRowId} + rowData={data || undefined} + components={{ PriceFlashCell }} + /> ); }; diff --git a/libs/market-list/src/lib/components/markets-container/market-list-table.tsx b/libs/market-list/src/lib/components/markets-container/market-list-table.tsx index 94f114b52..e8ef39e0b 100644 --- a/libs/market-list/src/lib/components/markets-container/market-list-table.tsx +++ b/libs/market-list/src/lib/components/markets-container/market-list-table.tsx @@ -1,21 +1,19 @@ import { forwardRef } from 'react'; -import type { - GroupCellRendererParams, - ValueFormatterParams, -} from 'ag-grid-community'; import { PriceFlashCell, addDecimalsFormatNumber, t, toBigNum, } from '@vegaprotocol/react-helpers'; +import type { + VegaValueGetterParams, + VegaValueFormatterParams, + VegaICellRendererParams, + TypedDataAgGrid, +} from '@vegaprotocol/ui-toolkit'; import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit'; import { AgGridColumn } from 'ag-grid-react'; -import type { - AgGridReact, - AgGridReactProps, - AgReactUiProps, -} from 'ag-grid-react'; +import type { AgGridReact } from 'ag-grid-react'; import { MarketTradingMode, AuctionTrigger, @@ -25,18 +23,12 @@ import { import type { MarketWithData } from '../../'; import { useAssetDetailsDialogStore } from '@vegaprotocol/assets'; -type Props = AgGridReactProps | AgReactUiProps; - -type MarketListTableValueFormatterParams = Omit< - ValueFormatterParams, - 'data' | 'value' -> & { - data: MarketWithData; -}; - export const getRowId = ({ data }: { data: { id: string } }) => data.id; -export const MarketListTable = forwardRef((props, ref) => { +export const MarketListTable = forwardRef< + AgGridReact, + TypedDataAgGrid +>((props, ref) => { const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore(); return ( ((props, ref) => { + cellRenderer={({ + value, + }: VegaICellRendererParams< + MarketWithData, + 'tradableInstrument.instrument.product.settlementAsset.symbol' + >) => value && value.length > 0 ? (