add query context to tests

playwright/RenderWithChakra.tsx → playwright/TestApp.tsx

 import { ChakraProvider } from '@chakra-ui/react';
 import type { ColorMode } from '@chakra-ui/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 
 import theme from 'theme';
@@ -9,12 +10,23 @@ type Props = {
   colorMode?: ColorMode;
 }
 
-const RenderWithChakra = ({ children, colorMode = 'light' }: Props) => {
+const TestApp = ({ children, colorMode = 'light' }: Props) => {
+  const [ queryClient ] = React.useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: 0,
+      },
+    },
+  }));
+
   return (
     <ChakraProvider theme={{ ...theme, config: { ...theme.config, initialColorMode: colorMode } }}>
-      { children }
+      <QueryClientProvider client={ queryClient }>
+        { children }
+      </QueryClientProvider>
     </ChakraProvider>
   );
 };
 
-export default RenderWithChakra;
+export default TestApp;

ui/shared/AppError/AppError.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import RenderWithChakra from 'playwright/RenderWithChakra';
+import TestApp from 'playwright/TestApp';
 
 import AppError from './AppError';
 
@@ -9,18 +9,18 @@ test.use({ viewport: { width: 900, height: 400 } });
 
 test('status code 404', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <AppError statusCode={ 404 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });
 
 test('status code 500', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <AppError statusCode={ 500 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });

ui/shared/Utilization/Utilization.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import RenderWithChakra from 'playwright/RenderWithChakra';
+import TestApp from 'playwright/TestApp';
 
 import Utilization from './Utilization';
 
@@ -9,36 +9,36 @@ test.use({ viewport: { width: 100, height: 50 } });
 
 test('green color scheme in light mode', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <Utilization value={ 0.423 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });
 
 test('green color scheme in dark mode', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra colorMode="dark">
+    <TestApp colorMode="dark">
       <Utilization value={ 0.423 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });
 
 test('gray color scheme in light mode', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <Utilization value={ 0.423 } colorScheme="gray"/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });
 
 test('gray color scheme in dark mode', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra colorMode="dark">
+    <TestApp colorMode="dark">
       <Utilization value={ 0.423 } colorScheme="gray"/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await expect(component).toHaveScreenshot();
 });

ui/tx/TxDecodedInputData/TxDecodedInputData.pw.tsx

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as mocks from 'mocks/txs/decodedInputData';
-import RenderWithChakra from 'playwright/RenderWithChakra';
+import TestApp from 'playwright/TestApp';
 import { DESKTOP, MOBILE } from 'playwright/viewports';
 
 import TxDecodedInputData from './TxDecodedInputData';
@@ -12,27 +12,27 @@ test.describe('desktop', () => {
 
   test('dark color mode', async({ mount }) => {
     const component = await mount(
-      <RenderWithChakra colorMode="dark">
+      <TestApp colorMode="dark">
         <TxDecodedInputData data={ mocks.withIndexedFields }/>
-      </RenderWithChakra>,
+      </TestApp>,
     );
     await expect(component).toHaveScreenshot();
   });
 
   test('with indexed fields', async({ mount }) => {
     const component = await mount(
-      <RenderWithChakra>
+      <TestApp>
         <TxDecodedInputData data={ mocks.withIndexedFields }/>
-      </RenderWithChakra>,
+      </TestApp>,
     );
     await expect(component).toHaveScreenshot();
   });
 
   test('without indexed fields', async({ mount }) => {
     const component = await mount(
-      <RenderWithChakra>
+      <TestApp>
         <TxDecodedInputData data={ mocks.withoutIndexedFields }/>
-      </RenderWithChakra>,
+      </TestApp>,
     );
     await expect(component).toHaveScreenshot();
   });
@@ -43,27 +43,27 @@ test.describe('mobile', () => {
 
   test('dark color mode', async({ mount }) => {
     const component = await mount(
-      <RenderWithChakra colorMode="dark">
+      <TestApp colorMode="dark">
         <TxDecodedInputData data={ mocks.withIndexedFields }/>
-      </RenderWithChakra>,
+      </TestApp>,
     );
     await expect(component).toHaveScreenshot();
   });
 
   test('with indexed fields', async({ mount }) => {
     const component = await mount(
-      <RenderWithChakra>
+      <TestApp>
         <TxDecodedInputData data={ mocks.withIndexedFields }/>
-      </RenderWithChakra>,
+      </TestApp>,
     );
     await expect(component).toHaveScreenshot();
   });
 
   test('without indexed fields', async({ mount }) => {
     const component = await mount(
-      <RenderWithChakra>
+      <TestApp>
         <TxDecodedInputData data={ mocks.withoutIndexedFields }/>
-      </RenderWithChakra>,
+      </TestApp>,
     );
     await expect(component).toHaveScreenshot();
   });

ui/tx/logs/TxLogItem.pw.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import * as addressMocks from 'mocks/address/address';
 import * as inputDataMocks from 'mocks/txs/decodedInputData';
-import RenderWithChakra from 'playwright/RenderWithChakra';
+import TestApp from 'playwright/TestApp';
 import { DESKTOP, MOBILE } from 'playwright/viewports';
 
 import TxLogItem from './TxLogItem';
@@ -25,7 +25,7 @@ const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee
 
     test('with decoded input data', async({ mount }) => {
       const component = await mount(
-        <RenderWithChakra>
+        <TestApp>
           <TxLogItem
             index={ 42 }
             decoded={ inputDataMocks.withIndexedFields }
@@ -33,14 +33,14 @@ const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee
             topics={ TOPICS }
             data={ DATA }
           />
-        </RenderWithChakra>,
+        </TestApp>,
       );
       await expect(component).toHaveScreenshot();
     });
 
     test('without decoded input data', async({ mount }) => {
       const component = await mount(
-        <RenderWithChakra>
+        <TestApp>
           <TxLogItem
             index={ 42 }
             decoded={ null }
@@ -48,14 +48,14 @@ const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee
             topics={ TOPICS }
             data={ DATA }
           />
-        </RenderWithChakra>,
+        </TestApp>,
       );
       await expect(component).toHaveScreenshot();
     });
 
     test('dark color mode', async({ mount }) => {
       const component = await mount(
-        <RenderWithChakra colorMode="dark">
+        <TestApp colorMode="dark">
           <TxLogItem
             index={ 42 }
             decoded={ inputDataMocks.withIndexedFields }
@@ -63,7 +63,7 @@ const DATA = '0x0000000000000000000000000000000000000000000000000070265bf0112cee
             topics={ TOPICS }
             data={ DATA }
           />
-        </RenderWithChakra>,
+        </TestApp>,
       );
       await expect(component).toHaveScreenshot();
     });

ui/tx/logs/TxLogTopic.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import RenderWithChakra from 'playwright/RenderWithChakra';
+import TestApp from 'playwright/TestApp';
 import { MOBILE } from 'playwright/viewports';
 
 import TxLogTopic from './TxLogTopic';
@@ -10,9 +10,9 @@ test.use({ viewport: MOBILE });
 
 test('address view', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await component.locator('select[aria-label="Data type"]').selectOption('address');
 
@@ -21,9 +21,9 @@ test('address view', async({ mount }) => {
 
 test('hex view', async({ mount }) => {
   const component = await mount(
-    <RenderWithChakra>
+    <TestApp>
       <TxLogTopic hex="0x000000000000000000000000d789a607ceac2f0e14867de4eb15b15c9ffb5859" index={ 42 }/>
-    </RenderWithChakra>,
+    </TestApp>,
   );
   await component.locator('select[aria-label="Data type"]').selectOption('hex');