update `web3modal` to v4 (#1731)

* update hooks and methods

* fix typescript

* options fix

* fix pw test build

* try to fix tests

* more pw test fixes

* update screenshots and fix address verification test

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
\ No newline at end of file

global.d.ts

-import type { WindowProvider } from 'wagmi';
+import type { WalletProvider } from 'types/web3';
 
 type CPreferences = {
   zone: string;
@@ -8,7 +8,7 @@ type CPreferences = {
 
 declare global {
   export interface Window {
-    ethereum?: WindowProvider;
+    ethereum?: WalletProvider | undefined;
     coinzilla_display: Array<CPreferences>;
     ga?: {
       getAll: () => Array<{ get: (prop: string) => string }>;
@@ -27,3 +27,5 @@ declare global {
     }
   }
 }
+
+export {};

icons/blobs/image.svg

 <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g clip-path="url(#a)" fill="currentColor">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.647 1h12.705A2.65 2.65 0 0 1 19 3.647v12.706A2.65 2.65 0 0 1 16.353 19H3.647A2.65 2.65 0 0 1 1 16.353V3.647A2.65 2.65 0 0 1 3.647 1Zm12.705 16.94a1.59 1.59 0 0 0 1.588-1.588l.001-1.87-2.647-2.206-3.192 2.66-5.77-5.246-4.273 4.747v1.915a1.59 1.59 0 0 0 1.588 1.588h12.705ZM15.293 10.9l2.647 2.205.001-9.457a1.59 1.59 0 0 0-1.588-1.588H3.647A1.59 1.59 0 0 0 2.06 3.647v9.208L6.257 8.19l5.874 5.342 3.162-2.634Zm1.06-4.605a2.65 2.65 0 0 1-2.647 2.647 2.65 2.65 0 0 1-2.647-2.648 2.65 2.65 0 0 1 2.647-2.647 2.65 2.65 0 0 1 2.647 2.647Zm-1.059 0a1.59 1.59 0 1 0-1.588 1.588 1.59 1.59 0 0 0 1.588-1.588Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.647 1h12.705A2.65 2.65 0 0 1 19 3.647v12.706A2.65 2.65 0 0 1 16.353 19H3.647A2.65 2.65 0 0 1 1 16.353V3.647A2.65 2.65 0 0 1 3.647 1Zm12.705 16.94a1.59 1.59 0 0 0 1.588-1.588l.001-1.87-2.647-2.206-3.192 2.66-5.77-5.246-4.273 4.747v1.915a1.59 1.59 0 0 0 1.588 1.588h12.705Zm-1.059-7.04 2.647 2.205.001-9.457a1.59 1.59 0 0 0-1.588-1.588H3.647A1.59 1.59 0 0 0 2.06 3.647v9.208L6.257 8.19l5.874 5.342 3.162-2.634Zm1.06-4.605a2.65 2.65 0 0 1-2.647 2.647 2.65 2.65 0 0 1-2.647-2.648 2.65 2.65 0 0 1 2.647-2.647 2.65 2.65 0 0 1 2.647 2.647Zm-1.059 0a1.59 1.59 0 1 0-1.588 1.588 1.59 1.59 0 0 0 1.588-1.588Z"/>
     <path d="M19 3.647h.2-.2Zm-1.06 12.705h-.2.2Zm.001-1.87h.2v-.094l-.072-.06-.128.154Zm-2.647-2.206.128-.153-.128-.107-.128.107.128.153Zm-3.192 2.66-.134.148.129.117.133-.112-.128-.153ZM6.332 9.69l.134-.148-.149-.136-.134.15.148.134Zm-4.273 4.747-.149-.134-.051.057v.077h.2Zm15.881-1.333-.128.154.328.273v-.427h-.2ZM15.293 10.9l.128-.154-.128-.107-.128.107.128.154Zm2.648-7.252h.2-.2ZM2.06 12.855h-.2v.521l.349-.387-.15-.134ZM6.257 8.19l.134-.148-.149-.135-.134.15.149.133Zm5.874 5.342-.134.148.129.117.133-.112-.128-.153ZM16.351.8H3.648v.4h12.705V.8ZM19.2 3.647A2.85 2.85 0 0 0 16.352.8v.4A2.45 2.45 0 0 1 18.8 3.647h.4Zm0 12.706V3.647h-.4v12.706h.4ZM16.353 19.2a2.85 2.85 0 0 0 2.847-2.847h-.4a2.45 2.45 0 0 1-2.447 2.447v.4Zm-12.706 0h12.706v-.4H3.647v.4ZM.8 16.353A2.85 2.85 0 0 0 3.647 19.2v-.4A2.45 2.45 0 0 1 1.2 16.353H.8Zm0-12.706v12.706h.4V3.647H.8ZM3.647.8A2.85 2.85 0 0 0 .8 3.647h.4A2.45 2.45 0 0 1 3.647 1.2V.8ZM17.74 16.352a1.39 1.39 0 0 1-1.388 1.388v.4a1.79 1.79 0 0 0 1.788-1.788h-.4Zm.001-1.87v1.87h.4v-1.87h-.4Zm-2.575-2.052 2.647 2.205.256-.307-2.647-2.205-.256.307Zm-2.936 2.66 3.192-2.66-.256-.307-3.192 2.66.256.306ZM6.197 9.837l5.77 5.246.27-.296-5.771-5.246-.27.296Zm-3.99 4.733L6.48 9.823l-.297-.267-4.273 4.747.298.268Zm.052 1.78v-1.914h-.4v1.915h.4Zm1.388 1.39a1.39 1.39 0 0 1-1.388-1.39h-.4a1.79 1.79 0 0 0 1.788 1.79v-.4Zm12.705 0H3.647v.4h12.705v-.4Zm1.716-4.79-2.647-2.206-.256.307 2.647 2.206.256-.307Zm-.327-9.304v9.457h.4V3.647h-.4ZM16.353 2.26a1.39 1.39 0 0 1 1.388 1.388h.4a1.79 1.79 0 0 0-1.788-1.788v.4Zm-12.706 0h12.706v-.4H3.647v.4ZM2.26 3.647A1.39 1.39 0 0 1 3.647 2.26v-.4A1.79 1.79 0 0 0 1.86 3.647h.4Zm0 9.208V3.647h-.4v9.208h.4Zm3.849-4.798L1.91 12.721l.298.268 4.197-4.664-.297-.268Zm6.158 5.328L6.39 8.043l-.269.296 5.875 5.342.269-.296Zm2.899-2.64-3.162 2.634.256.307 3.162-2.634-.256-.307Zm-1.46-1.604a2.85 2.85 0 0 0 2.848-2.848h-.4a2.45 2.45 0 0 1-2.447 2.448v.4Zm-2.847-2.848a2.85 2.85 0 0 0 2.848 2.848v-.4a2.45 2.45 0 0 1-2.447-2.447h-.4Zm2.848-2.847a2.85 2.85 0 0 0-2.848 2.847h.4a2.45 2.45 0 0 1 2.448-2.447v-.4Zm2.847 2.847a2.85 2.85 0 0 0-2.847-2.847v.4a2.45 2.45 0 0 1 2.447 2.447h.4Zm-2.847-1.387a1.39 1.39 0 0 1 1.388 1.388h.4a1.79 1.79 0 0 0-1.788-1.788v.4Zm-1.389 1.388a1.39 1.39 0 0 1 1.389-1.388v-.4a1.79 1.79 0 0 0-1.789 1.788h.4Zm1.389 1.389a1.39 1.39 0 0 1-1.389-1.389h-.4a1.79 1.79 0 0 0 1.789 1.789v-.4Zm1.388-1.389a1.39 1.39 0 0 1-1.388 1.389v.4a1.79 1.79 0 0 0 1.788-1.789h-.4Z"/>
   </g>
   <defs>

lib/web3/client.ts

@@ -3,7 +3,7 @@ import { createPublicClient, http } from 'viem';
 import currentChain from './currentChain';
 
 export const publicClient = (() => {
-  if (currentChain.rpcUrls.public.http.filter(Boolean).length === 0) {
+  if (currentChain.rpcUrls.default.http.filter(Boolean).length === 0) {
     return;
   }
 

lib/web3/currentChain.ts

-import type { Chain } from 'wagmi';
+import { type Chain } from 'viem';
 
 import config from 'configs/app';
 
-const currentChain: Chain = {
+const currentChain = {
   id: Number(config.chain.id),
   name: config.chain.name ?? '',
-  network: config.chain.name ?? '',
   nativeCurrency: {
     decimals: config.chain.currency.decimals,
     name: config.chain.currency.name ?? '',
     symbol: config.chain.currency.symbol ?? '',
   },
   rpcUrls: {
-    'public': {
-      http: [ config.chain.rpcUrl ?? '' ],
-    },
     'default': {
       http: [ config.chain.rpcUrl ?? '' ],
     },
@@ -25,6 +21,7 @@ const currentChain: Chain = {
       url: config.app.baseUrl,
     },
   },
-};
+  testnet: config.chain.isTestnet,
+} as const satisfies Chain;
 
 export default currentChain;

lib/web3/useProvider.tsx

 import React from 'react';
-import type { WindowProvider } from 'wagmi';
-
-import 'wagmi/window';
 
 import type { WalletType } from 'types/client/wallets';
+import type { WalletProvider } from 'types/web3';
 
 import config from 'configs/app';
 
 const feature = config.features.web3Wallet;
 
 export default function useProvider() {
-  const [ provider, setProvider ] = React.useState<WindowProvider>();
+  const [ provider, setProvider ] = React.useState<WalletProvider>();
   const [ wallet, setWallet ] = React.useState<WalletType>();
 
   const initializeProvider = React.useMemo(() => async() => {

lib/web3/wagmiConfig.ts

+import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';
+import { http } from 'viem';
+import type { CreateConfigParameters } from 'wagmi';
+
+import config from 'configs/app';
+import currentChain from 'lib/web3/currentChain';
+const feature = config.features.blockchainInteraction;
+
+const wagmiConfig = (() => {
+  try {
+    if (!feature.isEnabled) {
+      throw new Error();
+    }
+
+    const chains: CreateConfigParameters['chains'] = [ currentChain ];
+
+    const wagmiConfig = defaultWagmiConfig({
+      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.sidebar.icon.default ].filter(Boolean),
+      },
+      enableEmail: true,
+    });
+
+    return wagmiConfig;
+  } catch (error) {}
+})();
+
+export default wagmiConfig;

package.json

@@ -57,7 +57,7 @@
     "@tanstack/react-query-devtools": "^5.4.3",
     "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",
-    "@web3modal/wagmi": "3.5.0",
+    "@web3modal/wagmi": "4.0.13",
     "bignumber.js": "^9.1.0",
     "blo": "^1.1.1",
     "chakra-react-select": "^4.4.3",
@@ -99,8 +99,8 @@
     "react-scroll": "^1.8.7",
     "swagger-ui-react": "^5.9.0",
     "use-font-face-observer": "^1.2.1",
-    "viem": "1.20.1",
-    "wagmi": "1.4.12",
+    "viem": "2.7.13",
+    "wagmi": "2.5.7",
     "xss": "^1.0.14"
   },
   "devDependencies": {
@@ -148,7 +148,7 @@
     "svgo": "^2.8.0",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.0",
+    "typescript": "5.4.2",
     "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.5.2",
     "ws": "^8.11.0"

playwright-ct.config.ts

@@ -60,17 +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
+          { 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

 import { ChakraProvider } from '@chakra-ui/react';
 import { GrowthBookProvider } from '@growthbook/growthbook-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react';
 import React from 'react';
-import { WagmiConfig } from 'wagmi';
-import { mainnet } from 'wagmi/chains';
+import { WagmiProvider } from 'wagmi';
 
 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';
 
@@ -34,23 +33,6 @@ const defaultAppContext = {
   },
 };
 
-// >>> Web3 stuff
-const chains = [ mainnet ];
-const WALLET_CONNECT_PROJECT_ID = 'PROJECT_ID';
-
-const wagmiConfig = defaultWagmiConfig({
-  chains,
-  projectId: WALLET_CONNECT_PROJECT_ID,
-  enableEmail: true,
-});
-
-createWeb3Modal({
-  wagmiConfig,
-  projectId: WALLET_CONNECT_PROJECT_ID,
-  chains,
-});
-// <<<<
-
 const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props) => {
   const [ queryClient ] = React.useState(() => new QueryClient({
     defaultOptions: {
@@ -67,9 +49,9 @@ const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props
         <SocketProvider url={ withSocket ? `ws://${ app.domain }:${ app.socketPort }` : undefined }>
           <AppContextProvider { ...appContext }>
             <GrowthBookProvider>
-              <WagmiConfig config={ wagmiConfig }>
+              <WagmiProvider config={ wagmiConfig! }>
                 { children }
-              </WagmiConfig>
+              </WagmiProvider>
             </GrowthBookProvider>
           </AppContextProvider>
         </SocketProvider>

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

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

stubs/RPC.ts

@@ -84,6 +84,8 @@ export const GET_BLOCK: GetBlockReturnType<Chain, false, 'latest'> = {
   withdrawals: Array(10).fill(WITHDRAWAL),
   withdrawalsRoot: TX_HASH,
   sealFields: [ '0x00' ],
+  blobGasUsed: BigInt(0),
+  excessBlobGas: BigInt(0),
 };
 
 export const GET_BLOCK_WITH_TRANSACTIONS: GetBlockReturnType<Chain, true, 'latest'> = {

types/utils.ts

@@ -7,3 +7,7 @@ export type ExcludeNull<T> = T extends null ? never : T;
 export type ExcludeUndefined<T> = T extends undefined ? never : T;
 
 export type KeysOfObjectOrNull<T> = keyof ExcludeNull<T>;
+
+/** Combines members of an intersection into a readable type. */
+// https://twitter.com/mattpocockuk/status/1622730173446557697?s=20&t=NdpAcmEFXY01xkqU3KO0Mg
+export type Evaluate<Type> = { [key in keyof Type]: Type[key] } & unknown

types/web3.ts

+// copied from node_modules/@wagmi/core/src/connectors/injected.ts
+import type { EIP1193Provider } from 'viem';
+
+import type { Evaluate } from './utils';
+
+type WalletProviderFlags =
+  | 'isApexWallet'
+  | 'isAvalanche'
+  | 'isBackpack'
+  | 'isBifrost'
+  | 'isBitKeep'
+  | 'isBitski'
+  | 'isBlockWallet'
+  | 'isBraveWallet'
+  | 'isCoinbaseWallet'
+  | 'isDawn'
+  | 'isEnkrypt'
+  | 'isExodus'
+  | 'isFrame'
+  | 'isFrontier'
+  | 'isGamestop'
+  | 'isHyperPay'
+  | 'isImToken'
+  | 'isKuCoinWallet'
+  | 'isMathWallet'
+  | 'isMetaMask'
+  | 'isOkxWallet'
+  | 'isOKExWallet'
+  | 'isOneInchAndroidWallet'
+  | 'isOneInchIOSWallet'
+  | 'isOpera'
+  | 'isPhantom'
+  | 'isPortal'
+  | 'isRabby'
+  | 'isRainbow'
+  | 'isStatus'
+  | 'isTally'
+  | 'isTokenPocket'
+  | 'isTokenary'
+  | 'isTrust'
+  | 'isTrustWallet'
+  | 'isXDEFI'
+  | 'isZerion'
+
+export type WalletProvider = Evaluate<
+EIP1193Provider & {
+  [key in WalletProviderFlags]?: true | undefined
+} & {
+  providers?: Array<WalletProvider> | undefined;
+
+  /** Only exists in MetaMask as of 2022/04/03 */
+  _events?: { connect?: (() => void) | undefined } | undefined;
+
+  /** Only exists in MetaMask as of 2022/04/03 */
+  _state?:
+  | {
+    accounts?: Array<string>;
+    initialized?: boolean;
+    isConnected?: boolean;
+    isPermanentlyDisconnected?: boolean;
+    isUnlocked?: boolean;
+  }
+  | undefined;
+}
+>

ui/address/AddressDetails.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
-import type { WindowProvider } from 'wagmi';
+
+import type { WalletProvider } from 'types/web3';
 
 import * as addressMock from 'mocks/address/address';
 import * as countersMock from 'mocks/address/counters';
@@ -73,7 +74,7 @@ test('token', async({ mount, page }) => {
   await page.evaluate(() => {
     window.ethereum = {
       providers: [ { isMetaMask: true, _events: {} } ],
-    }as WindowProvider;
+    } as WalletProvider;
   });
 
   const component = await mount(

ui/address/contract/ContractWrite.tsx

 import { useRouter } from 'next/router';
 import React from 'react';
-import { useAccount, useWalletClient, useNetwork, useSwitchNetwork } from 'wagmi';
+import { useAccount, useWalletClient, useSwitchChain } from 'wagmi';
 
 import type { SmartContractWriteMethod } from 'types/api/contract';
 
@@ -21,9 +21,8 @@ import { getNativeCoinValue, prepareAbi } from './utils';
 
 const ContractWrite = () => {
   const { data: walletClient } = useWalletClient();
-  const { isConnected } = useAccount();
-  const { chain } = useNetwork();
-  const { switchNetworkAsync } = useSwitchNetwork();
+  const { isConnected, chainId } = useAccount();
+  const { switchChainAsync } = useSwitchChain();
 
   const router = useRouter();
 
@@ -45,14 +44,13 @@ const ContractWrite = () => {
 
   const contractAbi = useContractAbi({ addressHash, isProxy, isCustomAbi });
 
-  // TODO @tom2drum maybe move this inside the form
   const handleMethodFormSubmit = React.useCallback(async(item: SmartContractWriteMethod, args: Array<unknown>) => {
     if (!isConnected) {
       throw new Error('Wallet is not connected');
     }
 
-    if (chain?.id && String(chain.id) !== config.chain.id) {
-      await switchNetworkAsync?.(Number(config.chain.id));
+    if (chainId && String(chainId) !== config.chain.id) {
+      await switchChainAsync?.({ chainId: Number(config.chain.id) });
     }
 
     if (!contractAbi) {
@@ -87,7 +85,7 @@ const ContractWrite = () => {
     });
 
     return { hash };
-  }, [ isConnected, chain, contractAbi, walletClient, addressHash, switchNetworkAsync ]);
+  }, [ isConnected, chainId, contractAbi, walletClient, addressHash, switchChainAsync ]);
 
   const renderItemContent = React.useCallback((item: SmartContractWriteMethod, index: number, id: number) => {
     return (

ui/address/contract/ContractWriteResult.tsx

 import React from 'react';
-import { useWaitForTransaction } from 'wagmi';
+import { useWaitForTransactionReceipt } from 'wagmi';
 
 import type { ResultComponentProps } from './methodForm/types';
 import type { ContractMethodWriteResult } from './types';
@@ -9,7 +9,7 @@ import ContractWriteResultDumb from './ContractWriteResultDumb';
 
 const ContractWriteResult = ({ result, onSettle }: ResultComponentProps<SmartContractWriteMethod>) => {
   const txHash = result && 'hash' in result ? result.hash as `0x${ string }` : undefined;
-  const txInfo = useWaitForTransaction({
+  const txInfo = useWaitForTransactionReceipt({
     hash: txHash,
   });
 

ui/address/contract/ContractWriteResultDumb.pw.tsx

@@ -8,7 +8,7 @@ import ContractWriteResultDumb from './ContractWriteResultDumb';
 test('loading', async({ mount }) => {
   const props = {
     txInfo: {
-      status: 'loading' as const,
+      status: 'pending' as const,
       error: null,
     },
     result: {

ui/address/contract/ContractWriteResultDumb.tsx

@@ -11,7 +11,7 @@ interface Props {
   result: ContractMethodWriteResult;
   onSettle: () => void;
   txInfo: {
-    status: 'loading' | 'success' | 'error' | 'idle';
+    status: 'loading' | 'success' | 'error' | 'idle' | 'pending';
     error: Error | null;
   };
 }
@@ -20,7 +20,7 @@ const ContractWriteResultDumb = ({ result, onSettle, txInfo }: Props) => {
   const txHash = result && 'hash' in result ? result.hash : undefined;
 
   React.useEffect(() => {
-    if (txInfo.status !== 'loading') {
+    if (txInfo.status !== 'pending') {
       onSettle();
     }
   }, [ onSettle, txInfo.status ]);
@@ -55,7 +55,7 @@ const ContractWriteResultDumb = ({ result, onSettle, txInfo }: Props) => {
         );
       }
 
-      case 'loading': {
+      case 'pending': {
         return (
           <>
             <Spinner size="sm" mr={ 3 }/>

ui/address/contract/useWatchAccount.tsx

 import { watchAccount, getAccount } from '@wagmi/core';
 import React from 'react';
+import type { Config } from 'wagmi';
+import { useConfig } from 'wagmi';
 
-export function getWalletAccount() {
+export function getWalletAccount(config: Config) {
   try {
-    return getAccount();
+    return getAccount(config);
   } catch (error) {
     return null;
   }
 }
 
 export default function useWatchAccount() {
-  const [ account, setAccount ] = React.useState(getWalletAccount());
+  const config = useConfig();
+  const [ account, setAccount ] = React.useState(getWalletAccount(config));
 
   React.useEffect(() => {
     if (!account) {
       return;
     }
 
-    return watchAccount(setAccount);
-  }, [ account ]);
+    return watchAccount(config, {
+      onChange(account) {
+        setAccount(account);
+      },
+    });
+  }, [ account, config ]);
 
   return account;
 }

ui/addressVerification/steps/AddressVerificationStepSignature.tsx

@@ -80,15 +80,7 @@ const AddressVerificationStepSignature = ({ address, signingMessage, contractCre
 
   const onSubmit = handleSubmit(onFormSubmit);
 
-  const { signMessage, isLoading: isSigning } = useSignMessage({
-    onSuccess: (data) => {
-      setValue('signature', data);
-      onSubmit();
-    },
-    onError: (error) => {
-      return setError('root', { type: 'SIGNING_FAIL', message: (error as Error)?.message || 'Oops! Something went wrong' });
-    },
-  });
+  const { signMessage, isPending: isSigning } = useSignMessage();
 
   const handleSignMethodChange = React.useCallback((value: typeof signMethod) => {
     setSignMethod(value);
@@ -108,8 +100,16 @@ const AddressVerificationStepSignature = ({ address, signingMessage, contractCre
     }
 
     const message = getValues('message');
-    signMessage({ message });
-  }, [ clearErrors, isConnected, getValues, signMessage, setError ]);
+    signMessage({ message }, {
+      onSuccess: (data) => {
+        setValue('signature', data);
+        onSubmit();
+      },
+      onError: (error) => {
+        return setError('root', { type: 'SIGNING_FAIL', message: (error as Error)?.message || 'Oops! Something went wrong' });
+      },
+    });
+  }, [ clearErrors, isConnected, getValues, signMessage, setError, setValue, onSubmit ]);
 
   const handleManualSignClick = React.useCallback(() => {
     clearErrors('root');
@@ -219,7 +219,7 @@ const AddressVerificationStepSignature = ({ address, signingMessage, contractCre
         { !noWeb3Provider && (
           <RadioGroup onChange={ handleSignMethodChange } value={ signMethod } display="flex" flexDir="column" rowGap={ 4 }>
             <Radio value="wallet">Sign via Web3 wallet</Radio>
-            <Radio value="manually">Sign manually</Radio>
+            <Radio value="manual">Sign manually</Radio>
           </RadioGroup>
         ) }
         { signMethod === 'manual' && <AddressVerificationFieldSignature formState={ formState } control={ control }/> }

ui/marketplace/useMarketplaceWallet.tsx

 import type { TypedData } from 'abitype';
 import { useCallback } from 'react';
 import type { Account, SignTypedDataParameters } from 'viem';
-import { useAccount, useSendTransaction, useSwitchNetwork, useNetwork, useSignMessage, useSignTypedData } from 'wagmi';
+import { useAccount, useSendTransaction, useSwitchChain, useSignMessage, useSignTypedData } from 'wagmi';
 
 import config from 'configs/app';
 import * as mixpanel from 'lib/mixpanel/index';
@@ -9,7 +9,7 @@ import * as mixpanel from 'lib/mixpanel/index';
 type SendTransactionArgs = {
   chainId?: number;
   mode?: 'prepared';
-  to: string;
+  to: `0x${ string }`;
 };
 
 export type SignTypedDataArgs<
@@ -22,12 +22,11 @@ export type SignTypedDataArgs<
 > = SignTypedDataParameters<TTypedData, TPrimaryType, Account>;
 
 export default function useMarketplaceWallet(appId: string) {
-  const { address } = useAccount();
-  const { chain } = useNetwork();
+  const { address, chainId } = useAccount();
   const { sendTransactionAsync } = useSendTransaction();
   const { signMessageAsync } = useSignMessage();
   const { signTypedDataAsync } = useSignTypedData();
-  const { switchNetworkAsync } = useSwitchNetwork({ chainId: Number(config.chain.id) });
+  const { switchChainAsync } = useSwitchChain();
 
   const logEvent = useCallback((event: mixpanel.EventPayload<mixpanel.EventTypes.WALLET_ACTION>['Action']) => {
     mixpanel.logEvent(
@@ -37,16 +36,16 @@ export default function useMarketplaceWallet(appId: string) {
   }, [ address, appId ]);
 
   const switchNetwork = useCallback(async() => {
-    if (Number(config.chain.id) !== chain?.id) {
-      await switchNetworkAsync?.();
+    if (Number(config.chain.id) !== chainId) {
+      await switchChainAsync?.({ chainId: Number(config.chain.id) });
     }
-  }, [ chain, switchNetworkAsync ]);
+  }, [ chainId, switchChainAsync ]);
 
   const sendTransaction = useCallback(async(transaction: SendTransactionArgs) => {
     await switchNetwork();
     const tx = await sendTransactionAsync(transaction);
     logEvent('Send Transaction');
-    return tx.hash;
+    return tx;
   }, [ sendTransactionAsync, switchNetwork, logEvent ]);
 
   const signMessage = useCallback(async(message: string) => {

ui/pages/VerifiedAddresses.pw.tsx

@@ -114,6 +114,7 @@ test('address verification flow', async({ mount, page }) => {
   await page.getByRole('button', { name: /continue/i }).click();
 
   // fill second step
+  await page.getByText('Sign manually').click();
   const signatureInput = page.getByLabel(/signature hash/i);
   await signatureInput.fill(mocks.SIGNATURE);
   await page.getByRole('button', { name: /verify/i }).click();

ui/shared/Web3ModalProvider.tsx

 import { useColorMode } from '@chakra-ui/react';
-import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc';
-import { createWeb3Modal, useWeb3ModalTheme, defaultWagmiConfig } from '@web3modal/wagmi/react';
+import { createWeb3Modal, useWeb3ModalTheme } from '@web3modal/wagmi/react';
 import React from 'react';
-import { configureChains, WagmiConfig } from 'wagmi';
+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';
 import zIndices from 'theme/foundations/zIndices';
 
 const feature = config.features.blockchainInteraction;
 
-const getConfig = () => {
+const init = () => {
   try {
-    if (!feature.isEnabled) {
-      throw new Error();
+    if (!wagmiConfig || !feature.isEnabled) {
+      return;
     }
 
-    const { chains } = configureChains(
-      [ currentChain ],
-      [
-        jsonRpcProvider({
-          rpc: () => ({
-            http: config.chain.rpcUrl || '',
-          }),
-        }),
-      ],
-    );
-
-    const wagmiConfig = defaultWagmiConfig({
-      chains,
-      projectId: feature.walletConnect.projectId,
-      enableEmail: true,
-    });
-
     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,
       },
+      featuredWalletIds: [],
     });
-
-    return { wagmiConfig };
-  } catch (error) {
-    return { };
-  }
+  } catch (error) {}
 };
 
-const { wagmiConfig } = getConfig();
+init();
 
 interface Props {
   children: React.ReactNode;
@@ -78,9 +56,9 @@ const Provider = ({ children, fallback }: Props) => {
   }
 
   return (
-    <WagmiConfig config={ wagmiConfig }>
+    <WagmiProvider config={ wagmiConfig }>
       { children }
-    </WagmiConfig>
+    </WagmiProvider>
   );
 };
 

ui/shared/userOps/UserOpSponsorType.tsx

 import { Tag } from '@chakra-ui/react';
 import React from 'react';
 
-import { UserOpSponsorType } from 'types/api/userOps';
+import type { UserOpSponsorType as TUserOpSponsorType } from 'types/api/userOps';
 
 type Props = {
-  sponsorType: UserOpSponsorType;
+  sponsorType: TUserOpSponsorType;
 }
 
 const UserOpSponsorType = ({ sponsorType }: Props) => {

ui/snippets/footer/Footer.pw.tsx

 import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
-import type { WindowProvider } from 'wagmi';
+
+import type { WalletProvider } from 'types/web3';
 
 import { buildExternalAssetFilePath } from 'configs/app/utils';
 import { FOOTER_LINKS } from 'mocks/config/footerLinks';
@@ -36,7 +37,7 @@ base.describe('with custom links, max cols', () => {
       window.ethereum = {
         isMetaMask: true,
         _events: {},
-      } as WindowProvider;
+      } as WalletProvider;
     });
 
     await page.route(INDEXING_ALERT_API_URL, (route) => route.fulfill({
@@ -95,7 +96,7 @@ base.describe('without custom links', () => {
       window.ethereum = {
         isMetaMask: true,
         _events: {},
-      } as WindowProvider;
+      } as WalletProvider;
     });
     await page.route(BACKEND_VERSION_API_URL, (route) => {
       return route.fulfill({
@@ -118,7 +119,7 @@ base.describe('without custom links', () => {
     await page.evaluate(() => {
       window.ethereum = {
         providers: [ { isMetaMask: true, _events: {} } ],
-      } as WindowProvider;
+      } as WalletProvider;
     });
 
     await page.route(INDEXING_ALERT_API_URL, (route) => route.fulfill({

ui/snippets/walletMenu/useWallet.tsx

 import { useWeb3Modal, useWeb3ModalState } from '@web3modal/wagmi/react';
 import React from 'react';
-import { useAccount, useDisconnect } from 'wagmi';
+import { useAccount, useDisconnect, useAccountEffect } from 'wagmi';
 
 import * as mixpanel from 'lib/mixpanel/index';
 
@@ -38,7 +38,9 @@ export default function useWallet({ source }: Params) {
     disconnect();
   }, [ disconnect ]);
 
-  const { address, isDisconnected } = useAccount({ onConnect: handleAccountConnected });
+  useAccountEffect({ onConnect: handleAccountConnected });
+
+  const { address, isDisconnected } = useAccount();
 
   const isWalletConnected = isClientLoaded && !isDisconnected && address !== undefined;