more pw test fixes

configs/envs/.env.pw

@@ -51,3 +51,4 @@ NEXT_PUBLIC_STATS_API_HOST=https://localhost:3004
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://localhost:3005
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://localhost:3006
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx

playwright-ct.config.ts

@@ -60,21 +60,26 @@ const config: PlaywrightTestConfig = defineConfig({
         minify: false,
       },
       resolve: {
-        alias: {
+        alias: [
           // There is an issue with building these package using vite that I cannot resolve
           // The solution described here - https://github.com/vitejs/vite/issues/9703#issuecomment-1216662109
           // doesn't seam to work well with our setup
           // so for now we just mock these modules in tests
-          '@metamask/post-message-stream': './playwright/mocks/modules/@metamask/post-message-stream.js',
-          '@metamask/providers': './playwright/mocks/modules/@metamask/providers.js',
+          { find: '@metamask/post-message-stream', replacement: './playwright/mocks/modules/@metamask/post-message-stream.js' },
+          { find: '@metamask/providers', replacement: './playwright/mocks/modules/@metamask/providers.js' },
 
           // '@metamask/sdk imports the browser module as UMD, but @wagmi/connectors expects it to be ESM
           // so we do a little remapping here
-          '@metamask/sdk': './node_modules/@metamask/sdk/dist/browser/es/metamask-sdk.js',
+          { find: '@metamask/sdk', replacement: './node_modules/@metamask/sdk/dist/browser/es/metamask-sdk.js' },
 
           // Mock for growthbook to test feature flags
-          'lib/growthbook/useFeatureValue': './playwright/mocks/lib/growthbook/useFeatureValue.js',
-        },
+          { find: 'lib/growthbook/useFeatureValue', replacement: './playwright/mocks/lib/growthbook/useFeatureValue.js' },
+
+          // The createWeb3Modal() function from web3modal/wagmi/react somehow pollutes the global styles which causes the tests to fail
+          // We don't call this function in TestApp and since we use useWeb3Modal() and useWeb3ModalState() hooks in the code, we have to mock the module
+          // Otherwise it will complain that createWeb3Modal() is no called before the hooks are used
+          { find: /^@web3modal\/wagmi\/react$/, replacement: './playwright/mocks/modules/@web3modal/wagmi/react.js' },
+        ],
       },
       define: {
         'process.env': '__envs', // Port process.env over window.__envs

playwright/TestApp.tsx

@@ -1,16 +1,14 @@
 import { ChakraProvider } from '@chakra-ui/react';
 import { GrowthBookProvider } from '@growthbook/growthbook-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';
 import React from 'react';
-import { http } from 'viem';
 import { WagmiProvider } from 'wagmi';
-import { mainnet } from 'wagmi/chains';
 
 import type { Props as PageProps } from 'nextjs/getServerSideProps';
 
 import { AppContextProvider } from 'lib/contexts/app';
 import { SocketProvider } from 'lib/socket/context';
+import wagmiConfig from 'lib/web3/wagmiConfig';
 import * as app from 'playwright/utils/app';
 import theme from 'theme';
 
@@ -35,24 +33,6 @@ const defaultAppContext = {
   },
 };
 
-// >>> Web3 stuff
-const WALLET_CONNECT_PROJECT_ID = 'PROJECT_ID';
-
-const wagmiConfig = defaultWagmiConfig({
-  chains: [ mainnet ],
-  projectId: WALLET_CONNECT_PROJECT_ID,
-  transports: {
-    [mainnet.id]: http(),
-  },
-  metadata: {
-    name: `Playwright test app explorer`,
-    description: 'Playwright test app explorer',
-    url: app.url,
-    icons: [],
-  },
-});
-// <<<<
-
 const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props) => {
   const [ queryClient ] = React.useState(() => new QueryClient({
     defaultOptions: {
@@ -69,7 +49,7 @@ const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props
         <SocketProvider url={ withSocket ? `ws://${ app.domain }:${ app.socketPort }` : undefined }>
           <AppContextProvider { ...appContext }>
             <GrowthBookProvider>
-              <WagmiProvider config={ wagmiConfig }>
+              <WagmiProvider config={ wagmiConfig! }>
                 { children }
               </WagmiProvider>
             </GrowthBookProvider>

playwright/mocks/modules/@web3modal/wagmi/react.js

@@ -0,0 +1,26 @@
+function useWeb3Modal() {
+  return {
+    open: () => {},
+  };
+}
+
+function useWeb3ModalState() {
+  return {
+    isOpen: false,
+  };
+}
+
+function useWeb3ModalTheme() {
+  return {
+    setThemeMode: () => {},
+  };
+}
+
+function createWeb3Modal() {}
+
+export {
+  createWeb3Modal,
+  useWeb3Modal,
+  useWeb3ModalState,
+  useWeb3ModalTheme,
+};