Merge pull request #1433 from blockscout/tom2drum/issue-1314

update `Web3Modal` to v3

next.config.js

@@ -31,6 +31,7 @@ const moduleExports = {
       },
     );
     config.resolve.fallback = { fs: false, net: false, tls: false };
+    config.externals.push('pino-pretty', 'lokijs', 'encoding');
 
     return config;
   },

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.1",
+    "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, defaultWagmiConfig } from '@web3modal/wagmi/react';
 import React from 'react';
-import { configureChains, createConfig, WagmiConfig } from 'wagmi';
+import { WagmiConfig } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 
 import type { Props as PageProps } from 'nextjs/getServerSideProps';
@@ -33,17 +33,18 @@ const defaultAppContext = {
 };
 
 // >>> Web3 stuff
-const { publicClient } = configureChains(
-  [ mainnet ],
-  [
-    w3mProvider({ projectId: '' }),
-  ],
-);
+const chains = [ mainnet ];
+const WALLET_CONNECT_PROJECT_ID = 'PROJECT_ID';
 
-const wagmiConfig = createConfig({
-  autoConnect: false,
-  connectors: [ ],
-  publicClient,
+const wagmiConfig = defaultWagmiConfig({
+  chains,
+  projectId: WALLET_CONNECT_PROJECT_ID,
+});
+
+createWeb3Modal({
+  wagmiConfig,
+  projectId: WALLET_CONNECT_PROJECT_ID,
+  chains,
 });
 // <<<<
 

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, defaultWagmiConfig } from '@web3modal/wagmi/react';
 import React from 'react';
 import type { Chain } from 'wagmi';
-import { configureChains, createConfig, WagmiConfig } from 'wagmi';
+import { configureChains, WagmiConfig } from 'wagmi';
 
 import config from 'configs/app';
+import colors from 'theme/foundations/colors';
+import { BODY_TYPEFACE } from 'theme/foundations/typography';
+import zIndices from 'theme/foundations/zIndices';
 
 const feature = config.features.blockchainInteraction;
 
@@ -41,58 +43,71 @@ const getConfig = () => {
       },
     };
 
-    const chains = [ currentChain ];
-
-    const { publicClient } = configureChains(chains, [
-      jsonRpcProvider({
-        rpc: () => ({
-          http: config.chain.rpcUrl || '',
+    const { chains } = configureChains(
+      [ currentChain ],
+      [
+        jsonRpcProvider({
+          rpc: () => ({
+            http: config.chain.rpcUrl || '',
+          }),
         }),
-      }),
-    ]);
-    const wagmiConfig = createConfig({
-      autoConnect: true,
-      connectors: w3mConnectors({ projectId: feature.walletConnect.projectId, chains }),
-      publicClient,
+      ],
+    );
+
+    const wagmiConfig = defaultWagmiConfig({
+      chains,
+      projectId: feature.walletConnect.projectId,
+    });
+
+    createWeb3Modal({
+      wagmiConfig,
+      projectId: feature.walletConnect.projectId,
+      chains,
+      themeVariables: {
+        '--w3m-font-family': `${ BODY_TYPEFACE }, sans-serif`,
+        '--w3m-accent': colors.blue[600],
+        '--w3m-border-radius-master': '2px',
+        '--w3m-z-index': zIndices.modal,
+      },
     });
-    const ethereumClient = new EthereumClient(wagmiConfig, chains);
 
-    return { wagmiConfig, ethereumClient };
+    return { wagmiConfig };
   } catch (error) {
-    return { wagmiConfig: undefined, ethereumClient: undefined };
+    return { };
   }
 };
 
-const { wagmiConfig, ethereumClient } = getConfig();
+const { wagmiConfig } = getConfig();
 
 interface Props {
   children: React.ReactNode;
   fallback?: JSX.Element | (() => JSX.Element);
 }
 
-const Web3ModalProvider = ({ children, fallback }: Props) => {
-  const modalZIndex = useToken<string>('zIndices', 'modal');
-  const web3ModalTheme = useColorModeValue('light', 'dark');
+const Fallback = ({ children, fallback }: Props) => {
+  return typeof fallback === 'function' ? fallback() : (fallback || <>{ children }</>); // eslint-disable-line react/jsx-no-useless-fragment
+};
+
+const Provider = ({ children, fallback }: Props) => {
+  const { colorMode } = useColorMode();
+  const { setThemeMode } = useWeb3ModalTheme();
 
-  if (!wagmiConfig || !ethereumClient || !feature.isEnabled) {
-    return typeof fallback === 'function' ? fallback() : (fallback || <>{ children }</>); // eslint-disable-line react/jsx-no-useless-fragment
+  React.useEffect(() => {
+    setThemeMode(colorMode);
+  }, [ colorMode, setThemeMode ]);
+
+  // not really necessary, but we have to make typescript happy
+  if (!wagmiConfig || !feature.isEnabled) {
+    return <Fallback fallback={ fallback }>{ children }</Fallback>;
   }
 
   return (
-    <>
-      <WagmiConfig config={ wagmiConfig }>
-        { children }
-      </WagmiConfig>
-      <Web3Modal
-        projectId={ feature.walletConnect.projectId }
-        ethereumClient={ ethereumClient }
-        themeMode={ web3ModalTheme }
-        themeVariables={{
-          '--w3m-z-index': modalZIndex,
-        }}
-      />
-    </>
+    <WagmiConfig config={ wagmiConfig }>
+      { children }
+    </WagmiConfig>
   );
 };
 
+const Web3ModalProvider = wagmiConfig && feature.isEnabled ? Provider : Fallback;
+
 export default Web3ModalProvider;

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);