update `Web3Modal` to v3

Fixes #1314

nextjs/csp/policies/walletConnect.ts

@@ -2,6 +2,8 @@ import type CspDev from 'csp-dev';
 
 import config from 'configs/app';
 
+import { KEY_WORDS } from '../utils';
+
 export function walletConnect(): CspDev.DirectiveDescriptor {
   if (!config.features.blockchainInteraction.isEnabled) {
     return {};
@@ -9,11 +11,13 @@ export function walletConnect(): CspDev.DirectiveDescriptor {
 
   return {
     'connect-src': [
+      '*.web3modal.com',
       '*.walletconnect.com',
       'wss://relay.walletconnect.com',
       'wss://www.walletlink.org',
     ],
     'img-src': [
+      KEY_WORDS.BLOB,
       '*.walletconnect.com',
     ],
   };

package.json

@@ -53,8 +53,7 @@
     "@tanstack/react-query-devtools": "^5.4.3",
     "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",
-    "@web3modal/ethereum": "^2.6.2",
-    "@web3modal/react": "^2.6.2",
+    "@web3modal/wagmi": "3.5.0",
     "bignumber.js": "^9.1.0",
     "blo": "^1.1.1",
     "chakra-react-select": "^4.4.3",
@@ -92,8 +91,8 @@
     "react-scroll": "^1.8.7",
     "swagger-ui-react": "^5.9.0",
     "use-font-face-observer": "^1.2.1",
-    "viem": "^1.1.8",
-    "wagmi": "^1.3.3",
+    "viem": "1.20.0",
+    "wagmi": "1.4.12",
     "xss": "^1.0.14"
   },
   "devDependencies": {

playwright/TestApp.tsx

 import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { w3mProvider } from '@web3modal/ethereum';
+import { createWeb3Modal } from '@web3modal/wagmi/react';
 import React from 'react';
 import { configureChains, createConfig, WagmiConfig } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
 
 import type { Props as PageProps } from 'nextjs/getServerSideProps';
 
@@ -33,18 +34,26 @@ const defaultAppContext = {
 };
 
 // >>> Web3 stuff
-const { publicClient } = configureChains(
+const { publicClient, chains } = configureChains(
   [ mainnet ],
-  [
-    w3mProvider({ projectId: '' }),
-  ],
+  [],
 );
 
 const wagmiConfig = createConfig({
   autoConnect: false,
-  connectors: [ ],
+  connectors: [
+    new WalletConnectConnector({
+      options: { projectId: 'xxx' },
+    }),
+  ],
   publicClient,
 });
+
+createWeb3Modal({
+  wagmiConfig,
+  projectId: 'xxx',
+  chains,
+});
 // <<<<
 
 const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props) => {

ui/address/contract/ContractConnectWallet.tsx

 import { Alert, Button, Flex } from '@chakra-ui/react';
-import { useWeb3Modal } from '@web3modal/react';
+import { useWeb3Modal, useWeb3ModalState } from '@web3modal/wagmi/react';
 import React from 'react';
 import { useAccount, useDisconnect } from 'wagmi';
 
@@ -8,7 +8,8 @@ import * as mixpanel from 'lib/mixpanel/index';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 const ContractConnectWallet = () => {
-  const { open, isOpen } = useWeb3Modal();
+  const { open } = useWeb3Modal();
+  const { open: isOpen } = useWeb3ModalState();
   const { disconnect } = useDisconnect();
   const isMobile = useIsMobile();
   const [ isModalOpening, setIsModalOpening ] = React.useState(false);

ui/addressVerification/steps/AddressVerificationStepSignature.tsx

 import { Alert, Box, Button, chakra, Flex, Link, Radio, RadioGroup } from '@chakra-ui/react';
-import { useWeb3Modal } from '@web3modal/react';
+import { useWeb3Modal } from '@web3modal/wagmi/react';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';

ui/shared/Web3ModalProvider.tsx

-import { useColorModeValue, useToken } from '@chakra-ui/react';
+import { useColorMode } from '@chakra-ui/react';
 import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc';
-import { EthereumClient, w3mConnectors } from '@web3modal/ethereum';
-import { Web3Modal } from '@web3modal/react';
+import { createWeb3Modal, useWeb3ModalTheme } from '@web3modal/wagmi/react';
 import React from 'react';
 import type { Chain } from 'wagmi';
 import { configureChains, createConfig, WagmiConfig } from 'wagmi';
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
 
 import config from 'configs/app';
 
@@ -41,29 +41,48 @@ const getConfig = () => {
       },
     };
 
-    const chains = [ currentChain ];
-
-    const { publicClient } = configureChains(chains, [
+    const { publicClient, webSocketPublicClient, chains } = configureChains(
+      [ currentChain ],
+      [
         jsonRpcProvider({
           rpc: () => ({
             http: config.chain.rpcUrl || '',
           }),
         }),
-    ]);
+      ],
+    );
+
     const wagmiConfig = createConfig({
       autoConnect: true,
-      connectors: w3mConnectors({ projectId: feature.walletConnect.projectId, chains }),
+      connectors: [
+        new WalletConnectConnector({
+          chains,
+          options: { projectId: feature.walletConnect.projectId, showQrModal: false },
+        }),
+      ],
       publicClient,
+      webSocketPublicClient,
     });
-    const ethereumClient = new EthereumClient(wagmiConfig, chains);
 
-    return { wagmiConfig, ethereumClient };
+    createWeb3Modal({
+      wagmiConfig,
+      projectId: feature.walletConnect.projectId,
+      chains,
+      themeVariables: {
+        '--w3m-font-family': 'Inter, sans-serif',
+        '--w3m-accent': '#2B6CB0', // blue.400
+        '--w3m-border-radius-master': '2px',
+        '--w3m-z-index': 1400,
+      },
+    });
+
+    return { wagmiConfig };
   } catch (error) {
-    return { wagmiConfig: undefined, ethereumClient: undefined };
+    return { };
   }
 };
 
-const { wagmiConfig, ethereumClient } = getConfig();
+const { wagmiConfig } = getConfig();
 
 interface Props {
   children: React.ReactNode;
@@ -71,27 +90,23 @@ interface Props {
 }
 
 const Web3ModalProvider = ({ children, fallback }: Props) => {
-  const modalZIndex = useToken<string>('zIndices', 'modal');
-  const web3ModalTheme = useColorModeValue('light', 'dark');
+  const { colorMode } = useColorMode();
+  const { setThemeMode } = useWeb3ModalTheme();
+
+  React.useEffect(() => {
+    if (wagmiConfig && feature.isEnabled) {
+      setThemeMode(colorMode);
+    }
+  }, [ colorMode, setThemeMode ]);
 
-  if (!wagmiConfig || !ethereumClient || !feature.isEnabled) {
+  if (!wagmiConfig || !feature.isEnabled) {
     return typeof fallback === 'function' ? fallback() : (fallback || <>{ children }</>); // eslint-disable-line react/jsx-no-useless-fragment
   }
 
   return (
-    <>
     <WagmiConfig config={ wagmiConfig }>
       { children }
     </WagmiConfig>
-      <Web3Modal
-        projectId={ feature.walletConnect.projectId }
-        ethereumClient={ ethereumClient }
-        themeMode={ web3ModalTheme }
-        themeVariables={{
-          '--w3m-z-index': modalZIndex,
-        }}
-      />
-    </>
   );
 };
 

ui/snippets/walletMenu/useWallet.tsx

-import { useWeb3Modal } from '@web3modal/react';
+import { useWeb3Modal, useWeb3ModalState } from '@web3modal/wagmi/react';
 import React from 'react';
 import { useAccount, useDisconnect } from 'wagmi';
 
 import * as mixpanel from 'lib/mixpanel/index';
 
 export default function useWallet() {
-  const { open, isOpen } = useWeb3Modal();
+  const { open } = useWeb3Modal();
+  const { open: isOpen } = useWeb3ModalState();
   const { disconnect } = useDisconnect();
   const [ isModalOpening, setIsModalOpening ] = React.useState(false);
   const [ isClientLoaded, setIsClientLoaded ] = React.useState(false);