diff --git a/apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx b/apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx index a6f19a0f6..3d0eb512a 100644 --- a/apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx +++ b/apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx @@ -32,10 +32,8 @@ const AccountsManager = () => { dataProvider: aggregatedAccountsDataProvider, update, variables, + updateOnInit: true, }); - if (!dataRef.current && data) { - dataRef.current = data; - } const getRows = async ({ successCallback, startRow, diff --git a/apps/trading/pages/portfolio/accounts-container.tsx b/apps/trading/pages/portfolio/accounts-container.tsx index 222af1f40..5182d4032 100644 --- a/apps/trading/pages/portfolio/accounts-container.tsx +++ b/apps/trading/pages/portfolio/accounts-container.tsx @@ -1,8 +1,9 @@ -import { useState } from 'react'; +import { useCallback, useState } from 'react'; import { Button } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/react-helpers'; import { WithdrawalDialogs } from '@vegaprotocol/withdraws'; import { Web3Container } from '@vegaprotocol/web3'; +import type { AssetFieldsFragment } from '@vegaprotocol/assets'; import { useAssetDetailsDialogStore } from '@vegaprotocol/assets'; import { Splash } from '@vegaprotocol/ui-toolkit'; import { useVegaWallet } from '@vegaprotocol/wallet'; @@ -16,6 +17,23 @@ export const AccountsContainer = () => { const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore(); const [assetId, setAssetId] = useState(); + const onClickAsset = useCallback( + (value?: string | AssetFieldsFragment) => { + value && openAssetDetailsDialog(value); + }, + [openAssetDetailsDialog] + ); + + const onClickWithdraw = useCallback((assetId?: string) => { + setWithdrawDialog(true); + setAssetId(assetId); + }, []); + + const onClickDeposit = useCallback((assetId?: string) => { + setDepositDialog(true); + setAssetId(assetId); + }, []); + if (!pubKey) { return ( @@ -30,17 +48,9 @@ export const AccountsContainer = () => {
{ - value && openAssetDetailsDialog(value); - }} - onClickWithdraw={(assetId) => { - setWithdrawDialog(true); - setAssetId(assetId); - }} - onClickDeposit={(assetId) => { - setDepositDialog(true); - setAssetId(assetId); - }} + onClickAsset={onClickAsset} + onClickWithdraw={onClickWithdraw} + onClickDeposit={onClickDeposit} />
diff --git a/apps/trading/pages/portfolio/index.page.tsx b/apps/trading/pages/portfolio/index.page.tsx index 7f8a44a8d..066133b80 100644 --- a/apps/trading/pages/portfolio/index.page.tsx +++ b/apps/trading/pages/portfolio/index.page.tsx @@ -24,7 +24,7 @@ const Portfolio = () => { const wrapperClasses = 'h-full max-h-full flex flex-col'; return (
- + diff --git a/libs/accounts/src/lib/accounts-manager.spec.tsx b/libs/accounts/src/lib/accounts-manager.spec.tsx index d7907df08..8c0609bd7 100644 --- a/libs/accounts/src/lib/accounts-manager.spec.tsx +++ b/libs/accounts/src/lib/accounts-manager.spec.tsx @@ -1,12 +1,11 @@ import { act, render } from '@testing-library/react'; import { AccountManager } from './accounts-manager'; +import * as helpers from '@vegaprotocol/react-helpers'; -const mockReload = jest.fn(); jest.mock('@vegaprotocol/react-helpers', () => ({ ...jest.requireActual('@vegaprotocol/react-helpers'), useDataProvider: jest.fn(() => ({ data: [], - reload: mockReload, })), })); @@ -15,10 +14,14 @@ describe('AccountManager', () => { const { rerender } = render( ); - expect(mockReload).not.toHaveBeenCalled(); + expect( + (helpers.useDataProvider as jest.Mock).mock.calls[0][0].variables.partyId + ).toEqual('partyOne'); await act(() => { rerender(); }); - expect(mockReload).toHaveBeenCalledWith(true); + expect( + (helpers.useDataProvider as jest.Mock).mock.calls[1][0].variables.partyId + ).toEqual('partyTwo'); }); }); diff --git a/libs/accounts/src/lib/accounts-manager.tsx b/libs/accounts/src/lib/accounts-manager.tsx index de22b06b7..1a0581597 100644 --- a/libs/accounts/src/lib/accounts-manager.tsx +++ b/libs/accounts/src/lib/accounts-manager.tsx @@ -2,7 +2,7 @@ import type { Asset } from '@vegaprotocol/assets'; import { useDataProvider } from '@vegaprotocol/react-helpers'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; import type { AgGridReact } from 'ag-grid-react'; -import { useRef, useMemo, useCallback } from 'react'; +import { useRef, useMemo, useCallback, memo } from 'react'; import type { AccountFields } from './accounts-data-provider'; import { aggregatedAccountsDataProvider } from './accounts-data-provider'; import type { GetRowsParams } from './accounts-table'; @@ -15,64 +15,56 @@ interface AccountManagerProps { onClickDeposit?: (assetId?: string) => void; } -export const AccountManager = ({ - onClickAsset, - onClickWithdraw, - onClickDeposit, - partyId, -}: AccountManagerProps) => { - const partyIdRef = useRef(partyId); - const gridRef = useRef(null); - const dataRef = useRef(null); - const variables = useMemo(() => ({ partyId }), [partyId]); - const update = useCallback( - ({ data }: { data: AccountFields[] | null }) => { - dataRef.current = data; - gridRef.current?.api?.refreshInfiniteCache(); - return true; - }, - [gridRef] - ); +export const AccountManager = memo( + ({ + onClickAsset, + onClickWithdraw, + onClickDeposit, + partyId, + }: AccountManagerProps) => { + const gridRef = useRef(null); + const dataRef = useRef(null); + const variables = useMemo(() => ({ partyId }), [partyId]); + const update = useCallback( + ({ data }: { data: AccountFields[] | null }) => { + dataRef.current = data; + gridRef.current?.api?.refreshInfiniteCache(); + return true; + }, + [gridRef] + ); - const { data, loading, error, reload } = useDataProvider< - AccountFields[], - never - >({ - dataProvider: aggregatedAccountsDataProvider, - update, - variables, - }); - if (partyId !== partyIdRef.current) { - reload(true); - partyIdRef.current = partyId; + const { data, loading, error } = useDataProvider({ + dataProvider: aggregatedAccountsDataProvider, + update, + variables, + updateOnInit: true, + }); + const getRows = async ({ + successCallback, + startRow, + endRow, + }: GetRowsParams) => { + const rowsThisBlock = dataRef.current + ? dataRef.current.slice(startRow, endRow) + : []; + const lastRow = dataRef.current?.length ?? -1; + successCallback(rowsThisBlock, lastRow); + }; + return ( + + + + ); } - if (!dataRef.current && data) { - dataRef.current = data; - } - const getRows = async ({ - successCallback, - startRow, - endRow, - }: GetRowsParams) => { - const rowsThisBlock = dataRef.current - ? dataRef.current.slice(startRow, endRow) - : []; - const lastRow = dataRef.current?.length ?? -1; - successCallback(rowsThisBlock, lastRow); - }; - return ( - - - - ); -}; +); -export default AccountManager; +export default memo(AccountManager); diff --git a/libs/fills/src/lib/use-fills-list.spec.ts b/libs/fills/src/lib/use-fills-list.spec.ts index 33bbb7baf..4c2ae605f 100644 --- a/libs/fills/src/lib/use-fills-list.spec.ts +++ b/libs/fills/src/lib/use-fills-list.spec.ts @@ -86,8 +86,9 @@ describe('useFillsList Hook', () => { addNewRows: expect.any(Function), getRows: expect.any(Function), }); + updateMock({ data: mockData }); expect(mockRefreshAgGridApi).not.toHaveBeenCalled(); - updateMock({ data: {} }); + updateMock({ data: mockData }); expect(mockRefreshAgGridApi).toHaveBeenCalled(); }); }); diff --git a/libs/fills/src/lib/use-fills-list.ts b/libs/fills/src/lib/use-fills-list.ts index ae752304b..2b97bdf4d 100644 --- a/libs/fills/src/lib/use-fills-list.ts +++ b/libs/fills/src/lib/use-fills-list.ts @@ -77,11 +77,14 @@ export const useFillsList = ({ partyId, gridRef, scrolledToTop }: Props) => { const { data, error, loading, load, totalCount } = useDataProvider< (TradeEdge | null)[], Trade[] - >({ dataProvider: fillsWithMarketProvider, update, insert, variables }); - if (!dataRef.current && data) { - totalCountRef.current = totalCount; - dataRef.current = data; - } + >({ + dataProvider: fillsWithMarketProvider, + update, + insert, + variables, + updateOnInit: true, + }); + totalCountRef.current = totalCount; const getRows = makeInfiniteScrollGetRows( newRows, diff --git a/libs/orders/src/lib/components/order-list-manager/use-order-list-data.spec.ts b/libs/orders/src/lib/components/order-list-manager/use-order-list-data.spec.ts index 06afe0c3f..816f1ed8d 100644 --- a/libs/orders/src/lib/components/order-list-manager/use-order-list-data.spec.ts +++ b/libs/orders/src/lib/components/order-list-manager/use-order-list-data.spec.ts @@ -8,7 +8,7 @@ import type { IGetRowsParams } from 'ag-grid-community'; const loadMock = jest.fn(); -let mockData = null; +let mockData: Edge[] | null = null; let mockDataProviderData = { data: mockData as (Edge | null)[] | null, error: undefined, @@ -94,8 +94,9 @@ describe('useOrderListData Hook', () => { addNewRows: expect.any(Function), getRows: expect.any(Function), }); + updateMock({ data: mockData, delta: [] }); expect(mockRefreshAgGridApi).not.toHaveBeenCalled(); - updateMock({ data: [], delta: [] }); + updateMock({ data: mockData, delta: [] }); expect(mockRefreshAgGridApi).toHaveBeenCalled(); }); @@ -148,6 +149,10 @@ describe('useOrderListData Hook', () => { endRow: 4, } as unknown as IGetRowsParams; + await waitFor(async () => { + updateMock({ data: mockData }); + }); + await waitFor(async () => { const promise = result.current.getRows(getRowsParams); updateMock({ data: mockNextData, delta: mockDelta }); diff --git a/libs/orders/src/lib/components/order-list-manager/use-order-list-data.ts b/libs/orders/src/lib/components/order-list-manager/use-order-list-data.ts index afce998c5..40b103a6b 100644 --- a/libs/orders/src/lib/components/order-list-manager/use-order-list-data.ts +++ b/libs/orders/src/lib/components/order-list-manager/use-order-list-data.ts @@ -77,11 +77,9 @@ export const useOrderListData = ({ update, insert, variables, + updateOnInit: true, }); - if (!dataRef.current && data) { - totalCountRef.current = totalCount; - dataRef.current = data; - } + totalCountRef.current = totalCount; const getRows = makeInfiniteScrollGetRows( newRows, diff --git a/libs/trades/src/lib/trades-container.tsx b/libs/trades/src/lib/trades-container.tsx index f100f6845..8e618c92e 100644 --- a/libs/trades/src/lib/trades-container.tsx +++ b/libs/trades/src/lib/trades-container.tsx @@ -85,12 +85,9 @@ export const TradesContainer = ({ marketId }: TradesContainerProps) => { update, insert, variables, + updateOnInit: true, }); totalCountRef.current = totalCount; - if (!dataRef.current && data) { - dataRef.current = data; - } - const getRows = makeInfiniteScrollGetRows( newRows, dataRef,