Migrate from `web3modal` to `reown` (#2321)

* migrate from `web3modal` to `reown`

Fixes #2316

* bump up package versions

lib/web3/useWallet.ts

-import { useWeb3Modal, useWeb3ModalState } from '@web3modal/wagmi/react';
+import { useAppKit, useAppKitState } from '@reown/appkit/react';
 import React from 'react';
 import { useDisconnect, useAccountEffect } from 'wagmi';
 
@@ -10,8 +10,8 @@ interface Params {
 }
 
 export default function useWeb3Wallet({ source }: Params) {
-  const { open: openModal } = useWeb3Modal();
-  const { open: isOpen } = useWeb3ModalState();
+  const { open: openModal } = useAppKit();
+  const { open: isOpen } = useAppKitState();
   const { disconnect } = useDisconnect();
   const [ isOpening, setIsOpening ] = React.useState(false);
   const [ isClientLoaded, setIsClientLoaded ] = React.useState(false);

lib/web3/wagmiConfig.ts

-import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
 import { http } from 'viem';
-import { createConfig, type CreateConfigParameters } from 'wagmi';
+import { createConfig } from 'wagmi';
 
 import config from 'configs/app';
 import currentChain from 'lib/web3/currentChain';
 const feature = config.features.blockchainInteraction;
 
-const wagmiConfig = (() => {
-  const chains: CreateConfigParameters['chains'] = [ currentChain ];
+const wagmi = (() => {
+  const chains = [ currentChain ];
 
   if (!feature.isEnabled) {
     const wagmiConfig = createConfig({
@@ -19,31 +19,21 @@ const wagmiConfig = (() => {
       batch: { multicall: { wait: 100 } },
     });
 
-    return wagmiConfig;
+    return { config: wagmiConfig, adapter: null };
   }
 
-  const wagmiConfig = defaultWagmiConfig({
-    chains,
+  const wagmiAdapter = new WagmiAdapter({
+    networks: chains,
     multiInjectedProviderDiscovery: true,
     transports: {
       [currentChain.id]: http(),
     },
     projectId: feature.walletConnect.projectId,
-    metadata: {
-      name: `${ config.chain.name } explorer`,
-      description: `${ config.chain.name } explorer`,
-      url: config.app.baseUrl,
-      icons: [ config.UI.navigation.icon.default ].filter(Boolean),
-    },
-    auth: {
-      email: true,
-      socials: [],
-    },
     ssr: true,
     batch: { multicall: { wait: 100 } },
   });
 
-  return wagmiConfig;
+  return { config: wagmiAdapter.wagmiConfig, adapter: wagmiAdapter };
 })();
 
-export default wagmiConfig;
+export default wagmi;

nextjs/csp/policies/walletConnect.ts

@@ -16,6 +16,7 @@ export function walletConnect(): CspDev.DirectiveDescriptor {
       '*.walletconnect.com',
       '*.walletconnect.org',
       'wss://relay.walletconnect.com',
+      'wss://relay.walletconnect.org',
       'wss://www.walletlink.org',
     ],
     'frame-ancestors': [

package.json

@@ -62,12 +62,13 @@
     "@opentelemetry/semantic-conventions": "1.22.0",
     "@rollbar/react": "0.12.0-beta",
     "@scure/base": "1.1.9",
+    "@reown/appkit": "1.6.0",
+    "@reown/appkit-adapter-wagmi": "1.6.0",
     "@slise/embed-react": "^2.2.0",
     "@tanstack/react-query": "5.55.4",
     "@tanstack/react-query-devtools": "5.55.4",
     "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",
-    "@web3modal/wagmi": "5.1.7",
     "airtable": "^0.12.2",
     "bignumber.js": "^9.1.0",
     "blo": "^1.1.1",
@@ -113,8 +114,8 @@
     "swagger-ui-react": "^5.9.0",
     "use-font-face-observer": "^1.2.1",
     "valibot": "0.38.0",
-    "viem": "2.21.5",
-    "wagmi": "2.12.10",
+    "viem": "2.21.54",
+    "wagmi": "2.14.0",
     "xss": "^1.0.14"
   },
   "devDependencies": {

playwright-ct.config.ts

@@ -84,7 +84,7 @@ const config: PlaywrightTestConfig = defineConfig({
           // 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' },
+          { find: /^@reown\/appkit\/react$/, replacement: './playwright/mocks/modules/@reown/appkit/react.js' },
 
           { find: '/playwright/index.ts', replacement: './playwright/index.ts' },
           { find: '/playwright/envs.js', replacement: './playwright/envs.js' },

playwright/mocks/modules/@web3modal/wagmi/react.js → playwright/mocks/modules/@reown/appkit/react.js

-function useWeb3Modal() {
+function useAppKit() {
   return {
     open: () => {},
   };
 }
 
-function useWeb3ModalState() {
+function useAppKitState() {
   return {
     isOpen: false,
   };
 }
 
-function useWeb3ModalTheme() {
+function useAppKitTheme() {
   return {
     setThemeMode: () => {},
   };
 }
 
-function createWeb3Modal() {}
+function createAppKit() {}
 
 export {
-  createWeb3Modal,
-  useWeb3Modal,
-  useWeb3ModalState,
-  useWeb3ModalTheme,
+  createAppKit,
+  useAppKit,
+  useAppKitState,
+  useAppKitTheme,
 };

ui/addressVerification/steps/AddressVerificationStepSignature.tsx

 import { Alert, Box, Button, chakra, Flex, Link, Radio, RadioGroup } from '@chakra-ui/react';
-import { useWeb3Modal } from '@web3modal/wagmi/react';
+import { useAppKit } from '@reown/appkit/react';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -35,7 +35,7 @@ interface Props extends AddressVerificationFormFirstStepFields, AddressCheckStat
 const AddressVerificationStepSignature = ({ address, signingMessage, contractCreator, contractOwner, onContinue, noWeb3Provider }: Props) => {
   const [ signMethod, setSignMethod ] = React.useState<SignMethod>(noWeb3Provider ? 'manual' : 'wallet');
 
-  const { open: openWeb3Modal } = useWeb3Modal();
+  const { open: openWeb3Modal } = useAppKit();
   const { isConnected } = useAccount();
 
   const formApi = useForm<Fields>({

ui/shared/Web3ModalProvider.tsx

 import { useColorMode } from '@chakra-ui/react';
-import { createWeb3Modal, useWeb3ModalTheme } from '@web3modal/wagmi/react';
+import { createAppKit, useAppKitTheme } from '@reown/appkit/react';
 import React from 'react';
 import { WagmiProvider } from 'wagmi';
 
 import config from 'configs/app';
+import currentChain from 'lib/web3/currentChain';
 import wagmiConfig from 'lib/web3/wagmiConfig';
 import colors from 'theme/foundations/colors';
 import { BODY_TYPEFACE } from 'theme/foundations/typography';
@@ -13,13 +14,27 @@ const feature = config.features.blockchainInteraction;
 
 const init = () => {
   try {
-    if (!feature.isEnabled) {
+    if (!feature.isEnabled || !wagmiConfig.adapter) {
       return;
     }
 
-    createWeb3Modal({
-      wagmiConfig,
+    createAppKit({
+      adapters: [ wagmiConfig.adapter ],
+      networks: [ currentChain ],
+      metadata: {
+        name: `${ config.chain.name } explorer`,
+        description: `${ config.chain.name } explorer`,
+        url: config.app.baseUrl,
+        icons: [ config.UI.navigation.icon.default ].filter(Boolean),
+      },
       projectId: feature.walletConnect.projectId,
+      features: {
+        analytics: false,
+        email: true,
+        socials: [],
+        onramp: false,
+        swaps: false,
+      },
       themeVariables: {
         '--w3m-font-family': `${ BODY_TYPEFACE }, sans-serif`,
         '--w3m-accent': colors.blue[600],
@@ -28,8 +43,6 @@ const init = () => {
       },
       featuredWalletIds: [],
       allowUnsupportedChain: true,
-      enableOnramp: false,
-      enableSwaps: false,
     });
   } catch (error) {}
 };
@@ -42,7 +55,7 @@ interface Props {
 
 const DefaultProvider = ({ children }: Props) => {
   return (
-    <WagmiProvider config={ wagmiConfig }>
+    <WagmiProvider config={ wagmiConfig.config }>
       { children }
     </WagmiProvider>
   );
@@ -50,7 +63,7 @@ const DefaultProvider = ({ children }: Props) => {
 
 const Web3ModalProvider = ({ children }: Props) => {
   const { colorMode } = useColorMode();
-  const { setThemeMode } = useWeb3ModalTheme();
+  const { setThemeMode } = useAppKitTheme();
 
   React.useEffect(() => {
     setThemeMode(colorMode);