fixed formatting

apps/explorer/src/app/routes/validators/validators-page.tsx

@@ -176,25 +176,14 @@ export const ValidatorsPage = () => {
               const validatorName =
                 v.name && v.name.length > 0 ? v.name : truncateMiddle(v.id);
               return (
-                <li className="mb-5" key={v.id}>
+                <li className="mb-5 relative" key={v.id}>
                   <div
                     data-testid="validator-tile"
                     validator-id={v.id}
-                    className="border border-vega-light-200 dark:border-vega-dark-200 rounded p-2 overflow-hidden relative flex gap-2 items-start justify-between"
+                    className="border border-vega-light-200 dark:border-vega-dark-200 rounded p-2 overflow-hidden"
                   >
-                    {v.avatarUrl && (
-                      <div className="w-20">
-                        <ExternalLink href={validatorPage}>
-                          <img
-                            className="w-full"
-                            src={v.avatarUrl}
-                            alt={validatorName}
-                          />
-                        </ExternalLink>
-                      </div>
-                    )}
                     <div className="w-full">
-                      <h2 className="font-alpha text-2xl">
+                      <h2 className="font-alpha text-2xl leading-[60px]">
                         <ExternalLink href={validatorPage}>
                           {validatorName}
                         </ExternalLink>
@@ -315,6 +304,23 @@ export const ValidatorsPage = () => {
                             </div>
                           </div>
                         </KeyValueTableRow>
+                        {v.avatarUrl && (
+                          <KeyValueTableRow>
+                            <div>{t('Avatar')}</div>
+                            <div>
+                              <ExternalLink
+                                href={validatorPage}
+                                className="mx-auto"
+                              >
+                                <img
+                                  className="max-w-[75px] md:max-w-[200px] max-h-[80px]"
+                                  src={v.avatarUrl}
+                                  alt={validatorName}
+                                />
+                              </ExternalLink>
+                            </div>
+                          </KeyValueTableRow>
+                        )}
                       </KeyValueTable>
                     </div>
                   </div>

apps/trading/client-pages/portfolio/deposits-container.tsx

@@ -25,8 +25,7 @@ export const DepositsContainer = () => {
       <div className="h-full relative">
         <DepositsTable
           rowData={data || []}
-          suppressLoadingOverlay
-          suppressNoRowsOverlay
+          noRowsOverlayComponent={() => null}
           ref={gridRef}
           {...bottomPlaceholderProps}
         />

apps/trading/client-pages/portfolio/withdrawals-container.tsx

@@ -24,8 +24,7 @@ export const WithdrawalsContainer = () => {
         <WithdrawalsTable
           data-testid="withdrawals-history"
           rowData={data}
-          suppressLoadingOverlay
-          suppressNoRowsOverlay
+          noRowsOverlayComponent={() => null}
         />
         <div className="pointer-events-none absolute inset-0">
           <AsyncRenderer

libs/accounts/src/lib/accounts-manager.spec.tsx

@@ -15,29 +15,51 @@ jest.mock('@vegaprotocol/react-helpers', () => ({
 }));
 
 describe('AccountManager', () => {
-  describe('when rerender', () => {
-    beforeEach(() => {
-      mockedUseDataProvider
-        .mockImplementationOnce((args) => {
-          return {
-            data: [],
-          };
-        })
-        .mockImplementationOnce((args) => {
-          return {
-            data: [
-              { asset: { id: 'a1' }, party: { id: 't1' } },
-              { asset: { id: 'a2' }, party: { id: 't2' } },
-            ],
-          };
-        });
-    });
+  beforeEach(() => {
+    mockedUseDataProvider
+      .mockImplementationOnce((args) => {
+        return {
+          data: [],
+        };
+      })
+      .mockImplementationOnce((args) => {
+        return {
+          data: [
+            { asset: { id: 'a1' }, party: { id: 't1' } },
+            { asset: { id: 'a2' }, party: { id: 't2' } },
+          ],
+        };
+      });
+  });
 
-    afterEach(() => {
-      jest.clearAllMocks();
+  it('change partyId should reload data provider', async () => {
+    const { rerender } = render(
+      <AccountManager
+        partyId="partyOne"
+        onClickAsset={jest.fn}
+        isReadOnly={false}
+      />
+    );
+    expect(
+      (helpers.useDataProvider as jest.Mock).mock.calls[0][0].variables.partyId
+    ).toEqual('partyOne');
+    await act(() => {
+      rerender(
+        <AccountManager
+          partyId="partyTwo"
+          onClickAsset={jest.fn}
+          isReadOnly={false}
+        />
+      );
     });
+    expect(
+      (helpers.useDataProvider as jest.Mock).mock.calls[1][0].variables.partyId
+    ).toEqual('partyTwo');
+  });
 
-    it('change partyId should reload data provider', async () => {
+  it('update method should return proper result', async () => {
+    let rerenderer: (ui: React.ReactElement) => void;
+    await act(() => {
       const { rerender } = render(
         <AccountManager
           partyId="partyOne"
@@ -45,67 +67,13 @@ describe('AccountManager', () => {
           isReadOnly={false}
         />
       );
-      expect(
-        (helpers.useDataProvider as jest.Mock).mock.calls[0][0].variables
-          .partyId
-      ).toEqual('partyOne');
-      await act(() => {
-        rerender(
-          <AccountManager
-            partyId="partyTwo"
-            onClickAsset={jest.fn}
-            isReadOnly={false}
-          />
-        );
-      });
-      expect(
-        (helpers.useDataProvider as jest.Mock).mock.calls[1][0].variables
-          .partyId
-      ).toEqual('partyTwo');
+      rerenderer = rerender;
     });
-
-    it('update method should return proper result', async () => {
-      let rerenderer: (ui: React.ReactElement) => void;
-      await act(() => {
-        const { rerender } = render(
-          <AccountManager
-            partyId="partyOne"
-            onClickAsset={jest.fn}
-            isReadOnly={false}
-          />
-        );
-        rerenderer = rerender;
-      });
-      await waitFor(() => {
-        expect(screen.getByText('No accounts')).toBeInTheDocument();
-      });
-      await act(() => {
-        rerenderer(
-          <AccountManager
-            partyId="partyOne"
-            onClickAsset={jest.fn}
-            isReadOnly={false}
-          />
-        );
-      });
-
-      const container = document.querySelector('.ag-center-cols-container');
-      await waitFor(() => {
-        expect(container).toBeInTheDocument();
-      });
-      expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
-    });
-  });
-
-  it('splash loading should be displayed', async () => {
-    mockedUseDataProvider.mockImplementation((args) => {
-      return {
-        loading: true,
-        data: null,
-      };
+    await waitFor(() => {
+      expect(screen.getByText('No accounts')).toBeInTheDocument();
     });
     await act(() => {
-      render(
+      rerenderer(
         <AccountManager
           partyId="partyOne"
           onClickAsset={jest.fn}
@@ -113,15 +81,11 @@ describe('AccountManager', () => {
         />
       );
     });
+
+    const container = document.querySelector('.ag-center-cols-container');
     await waitFor(() => {
-      expect(
-        screen.getByText(
-          (content, element) =>
-            Boolean(
-              element?.className.endsWith('flex items-center justify-center')
-            ) && content.startsWith('Loading')
-        )
-      ).toBeInTheDocument();
+      expect(container).toBeInTheDocument();
     });
+    expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
   });
 });

libs/accounts/src/lib/accounts-manager.tsx

@@ -60,8 +60,7 @@ export const AccountManager = ({
         onClickDeposit={onClickDeposit}
         onClickWithdraw={onClickWithdraw}
         isReadOnly={isReadOnly}
-        suppressLoadingOverlay
-        suppressNoRowsOverlay
+        noRowsOverlayComponent={() => null}
         pinnedAsset={pinnedAsset}
         getRowHeight={getRowHeight}
         {...bottomPlaceholderProps}

libs/positions/src/lib/positions-manager.tsx

@@ -1,8 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useRef } from 'react';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import type { Position } from '../';
 import { usePositionsData, PositionsTable } from '../';
-import type { FilterChangedEvent } from 'ag-grid-community';
 import type { AgGridReact } from 'ag-grid-react';
 import * as Schema from '@vegaprotocol/types';
 import { useVegaTransactionStore } from '@vegaprotocol/wallet';
@@ -23,7 +22,6 @@ export const PositionsManager = ({
   noBottomPlaceholder,
 }: PositionsManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
-  const [dataCount, setDataCount] = useState(0);
   const { data, error, loading, reload } = usePositionsData(
     partyId,
     gridRef,
@@ -69,12 +67,7 @@ export const PositionsManager = ({
     gridRef,
     setId,
   });
-  useEffect(() => {
-    setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
-  }, [data]);
-  const onFilterChanged = useCallback((event: FilterChangedEvent) => {
-    setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
-  }, []);
+
   return (
     <div className="h-full relative">
       <PositionsTable
@@ -82,10 +75,8 @@ export const PositionsManager = ({
         ref={gridRef}
         onMarketClick={onMarketClick}
         onClose={onClose}
-        suppressLoadingOverlay
-        suppressNoRowsOverlay
+        noRowsOverlayComponent={() => null}
         isReadOnly={isReadOnly}
-        onFilterChanged={onFilterChanged}
         {...(noBottomPlaceholder ? null : bottomPlaceholderProps)}
       />
       <div className="pointer-events-none absolute inset-0">
@@ -94,7 +85,7 @@ export const PositionsManager = ({
           error={error}
           data={data}
           noDataMessage={t('No positions')}
-          noDataCondition={(data) => !dataCount}
+          noDataCondition={(data) => !(data && data.length)}
           reload={reload}
         />
       </div>