Migrate from wagmi v1 -> wagmi v2, web3modal v3 -> v4, viem v1 -> v2

package.json

@@ -22,10 +22,10 @@
     "@sentry/react": "^7.104.0",
     "@shutter-network/shutter-crypto": "^1.0.1",
     "@snapshot-labs/snapshot.js": "^0.7.3",
+    "@tanstack/react-query": "^5.28.4",
     "@ukstv/jazzicon-react": "^1.0.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "@walletconnect/ethereum-provider": "^2.11.0",
-    "@web3modal/wagmi": "^3.5.7",
+    "@web3modal/wagmi": "^4.1.1",
     "axios": "^0.27.2",
     "classnames": "^2.3.1",
     "date-fns": "^2.29.3",
@@ -48,10 +48,10 @@
     "react-toastify": "^9.0.8",
     "remark-gfm": "^4.0.0",
     "remove-markdown": "^0.5.0",
-    "viem": "^1.21",
+    "viem": "^2.8.12",
     "vite": "^5.1.0",
     "vite-plugin-node-polyfills": "^0.21.0",
-    "wagmi": "^1.4.11",
+    "wagmi": "^2.5.11",
     "yup": "^1"
   },
   "scripts": {

src/components/DaoCreator/formComponents/AzoriusNFTDetail.tsx

@@ -2,7 +2,7 @@ import { Flex, Box, Text } from '@chakra-ui/react';
 import { ethers } from 'ethers';
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { erc721ABI } from 'wagmi';
+import { erc721Abi } from 'viem';
 import useDisplayName from '../../../hooks/utils/useDisplayName';
 import { useEthersProvider } from '../../../providers/Ethers/hooks/useEthersProvider';
 import { BigNumberValuePair, ERC721TokenConfig } from '../../../types';
@@ -37,7 +37,7 @@ export default function AzoriusNFTDetail({
       setLoading(true);
       try {
         if (nft.tokenAddress && ethers.utils.isAddress(nft.tokenAddress)) {
-          const tokenContract = new ethers.Contract(nft.tokenAddress, erc721ABI, provider);
+          const tokenContract = new ethers.Contract(nft.tokenAddress, erc721Abi, provider);
           const [name, symbol] = await Promise.all([tokenContract.name(), tokenContract.symbol()]);
           setTokenDetails({
             name,

src/components/DaoCreator/formComponents/AzoriusTokenDetails.tsx

@@ -3,7 +3,7 @@ import { LabelWrapper } from '@decent-org/fractal-ui';
 import { BigNumber, constants, ethers, utils } from 'ethers';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { erc20ABI } from 'wagmi';
+import { erc20Abi } from 'viem';
 import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import { createAccountSubstring } from '../../../hooks/utils/useDisplayName';
 import { useEthersProvider } from '../../../providers/Ethers/hooks/useEthersProvider';
@@ -51,7 +51,7 @@ export function AzoriusTokenDetails(props: ICreationStepProps) {
     const importError = errors?.erc20Token?.tokenImportAddress;
     if (importAddress && !importError && utils.isAddress(importAddress)) {
       const isVotesToken = await checkVotesToken(importAddress);
-      const tokenContract = new ethers.Contract(importAddress, erc20ABI, provider);
+      const tokenContract = new ethers.Contract(importAddress, erc20Abi, provider);
       const name: string = await tokenContract.name();
       const symbol: string = await tokenContract.symbol();
       const decimals: number = await tokenContract.decimals();

src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx

@@ -1,6 +1,6 @@
 import { Box, Flex, Select, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { useSwitchNetwork } from 'wagmi';
+import { useSwitchChain, useAccount } from 'wagmi';
 import {
   supportedChains,
   useNetworkConfig,
@@ -12,9 +12,11 @@ import {
 export function MenuItemNetwork() {
   const { t } = useTranslation('menu');
   const { chainId } = useNetworkConfig();
-  const { switchNetwork } = useSwitchNetwork();
+  const { isConnected } = useAccount();
+  const { switchChain } = useSwitchChain();
 
-  if (!switchNetwork) {
+  // TODO: Allow switching chains even when account is not connected
+  if (!isConnected) {
     return null;
   }
 
@@ -43,7 +45,7 @@ export function MenuItemNetwork() {
           cursor="pointer"
           onChange={async e => {
             e.preventDefault();
-            switchNetwork(Number(e.target.value));
+            switchChain({chainId: Number(e.target.value)});
           }}
           value={chainId}
         >

src/components/ui/modals/ForkProposalTemplateModal.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Divider } from '@chakra-ui/react';
 import { ChangeEventHandler, useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useNetwork } from 'wagmi';
+import { useAccount } from 'wagmi';
 import { DAO_ROUTES } from '../../../constants/routes';
 import useSubmitProposal from '../../../hooks/DAO/proposal/useSubmitProposal';
 import { useIsSafe } from '../../../hooks/safe/useIsSafe';
@@ -31,7 +31,7 @@ export default function ForkProposalTemplateModal({
   const { t } = useTranslation('proposalTemplate');
   const navigate = useNavigate();
   const signerOrProvider = useSignerOrProvider();
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
   const {
     node: { proposalTemplatesHash },
   } = useFractal();

src/components/ui/modals/WrapToken.tsx

@@ -4,7 +4,8 @@ import { BigNumber, Contract } from 'ethers';
 import { Formik, FormikProps } from 'formik';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { erc20ABI, useAccount } from 'wagmi';
+import { erc20Abi } from 'viem';
+import { useAccount } from 'wagmi';
 import * as Yup from 'yup';
 import { logError } from '../../../helpers/errorLogging';
 import { useERC20LinearToken } from '../../../hooks/DAO/loaders/governance/useERC20LinearToken';
@@ -56,7 +57,7 @@ export function WrapToken({ close }: { close: () => void }) {
       return;
     const baseTokenContract = new Contract(
       azoriusGovernance.votesToken.underlyingTokenData.address,
-      erc20ABI,
+      erc20Abi,
       signer,
     );
     try {

src/hooks/DAO/loaders/useFractalNode.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@apollo/client';
 import { utils } from 'ethers';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useNetwork } from 'wagmi';
+import { useAccount } from 'wagmi';
 import { DAOQueryDocument, DAOQueryQuery } from '../../../../.graphclient';
 import { useSubgraphChainName } from '../../../graphql/utils';
 import { useFractal } from '../../../providers/App/AppProvider';
@@ -125,7 +125,7 @@ export const useFractalNode = ({ daoAddress }: { daoAddress?: string }) => {
     [action, safeAPI, lookupModules, fetchSafeInfo, requestWithRetries],
   );
 
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
   const chainId = chain ? chain.id : disconnectedChain.id;
   useEffect(() => {
     if (daoAddress && chainId + daoAddress !== currentValidSafe.current) {

src/hooks/DAO/useSearchDao.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNetwork } from 'wagmi';
+import { useAccount } from 'wagmi';
 import { disconnectedChain } from '../../providers/NetworkConfig/NetworkConfigProvider';
 import { useIsSafe } from '../safe/useIsSafe';
 import useAddress from '../utils/useAddress';
@@ -13,7 +13,7 @@ export const useSearchDao = () => {
   const { address, isValidAddress, isAddressLoading } = useAddress(searchString);
   const { isSafe, isSafeLoading } = useIsSafe(address);
   const { t } = useTranslation('dashboard');
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
 
   useEffect(() => {
     setIsLoading(isAddressLoading === true || isSafeLoading === true);

src/hooks/schemas/DAOCreate/useDAOCreateTests.ts

@@ -1,7 +1,7 @@
 import { BigNumber, ethers, utils } from 'ethers';
 import { useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { erc20ABI } from 'wagmi';
+import { erc20Abi } from 'viem';
 import { AnyObject } from 'yup';
 import { logError } from '../../../helpers/errorLogging';
 import { useEthersProvider } from '../../../providers/Ethers/hooks/useEthersProvider';
@@ -138,7 +138,7 @@ export function useDAOCreateTests() {
       test: async function (address: string | undefined) {
         if (address && utils.isAddress(address)) {
           try {
-            const tokenContract = new ethers.Contract(address, erc20ABI, provider);
+            const tokenContract = new ethers.Contract(address, erc20Abi, provider);
             const [name, symbol, decimals] = await Promise.all([
               tokenContract.name(),
               tokenContract.symbol(),

src/hooks/utils/useAddress.ts

@@ -1,6 +1,6 @@
 import { ethers } from 'ethers';
 import { useEffect, useState } from 'react';
-import { useNetwork } from 'wagmi';
+import { useAccount } from 'wagmi';
 import { supportsENS } from '../../helpers';
 import { useEthersProvider } from '../../providers/Ethers/hooks/useEthersProvider';
 import { couldBeENS } from '../../utils/url';
@@ -14,7 +14,7 @@ const useAddress = (addressInput: string | undefined) => {
   const [isValidAddress, setIsValidAddress] = useState<boolean>();
   const [isAddressLoading, setIsAddressLoading] = useState<boolean>(false);
   const { setValue, getValue } = useLocalStorage();
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
 
   useEffect(() => {
     setIsAddressLoading(true);

src/pages/DAOController.tsx

@@ -3,7 +3,7 @@ import { theme } from '@decent-org/fractal-ui';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet } from 'react-router-dom';
-import { useNetwork } from 'wagmi';
+import { useAccount } from 'wagmi';
 import useDAOController from '../hooks/DAO/useDAOController';
 import useDAOMetadata from '../hooks/DAO/useDAOMetadata';
 import { useFractal } from '../providers/App/AppProvider';
@@ -13,7 +13,7 @@ import {
 } from '../providers/NetworkConfig/NetworkConfigProvider';
 
 function InvalidSafe() {
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
   const { t } = useTranslation('common');
   return (
     <Center
@@ -63,7 +63,7 @@ export default function DAOController() {
   const { node } = useFractal();
   const { nodeLoading, errorLoading } = useDAOController();
   const daoMetadata = useDAOMetadata();
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
   const activeTheme = useMemo(() => {
     if (daoMetadata && daoMetadata.bodyBackground) {
       return extendTheme({

src/pages/HomePage.tsx

@@ -3,7 +3,7 @@ import { Center, VStack, Text, Button, Flex, Box } from '@chakra-ui/react';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useNetwork } from 'wagmi';
+import { useAccount } from 'wagmi';
 import { mainnet, sepolia } from 'wagmi/chains';
 import { AppFooter } from '../components/pages/AppHome/AppFooter';
 import { CTABox } from '../components/pages/AppHome/CTABox';
@@ -95,7 +95,7 @@ export default function HomePage() {
     }
   }, [daoAddress, action]);
 
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
   const features = FEATURED_DAOS.get(chain ? chain.id : disconnectedChain.id);
 
   return (

src/providers/NetworkConfig/NetworkConfigProvider.tsx

@@ -1,5 +1,6 @@
 import { Context, createContext, ReactNode, useContext, useEffect, useState } from 'react';
-import { Chain, useNetwork } from 'wagmi';
+import { Chain } from 'viem';
+import { useAccount } from 'wagmi';
 import { NetworkConfig } from '../../types/network';
 import { isProd } from '../../utils';
 import { sepoliaConfig, mainnetConfig } from './networks';
@@ -31,7 +32,7 @@ const getNetworkConfig = (chainId: number) => {
 };
 
 export function NetworkConfigProvider({ children }: { children: ReactNode }) {
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
   const [config, setConfig] = useState<NetworkConfig>(
     getNetworkConfig(chain?.id || disconnectedChain.id),
   );

src/providers/NetworkConfig/web3-modal.config.ts

@@ -1,40 +1,18 @@
-import { defaultWagmiConfig } from '@web3modal/wagmi/react';
-import { Chain, configureChains } from 'wagmi';
-import { hardhat, sepolia, mainnet } from 'wagmi/chains';
-import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
+import { QueryClient } from '@tanstack/react-query'
+import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
+import {  http } from 'wagmi';
+import { hardhat, sepolia, mainnet, Chain } from 'wagmi/chains';
 import { supportedChains } from './NetworkConfigProvider';
 
-const supportedWagmiChains = supportedChains.map(config => config.wagmiChain);
+export const supportedWagmiChains = supportedChains.map(config => config.wagmiChain);
 
 // allows connection to localhost only in development mode.
 if (import.meta.env.VITE_APP_TESTING_ENVIRONMENT) {
   supportedWagmiChains.unshift(hardhat);
 }
 
-export const { chains, publicClient } = configureChains(supportedWagmiChains, [
-  jsonRpcProvider({
-    rpc: (chain: Chain) => {
-      const publicNodeNetworkUrl = `ethereum-${chain.name}.publicnode.com`;
-      if (chain.id === mainnet.id) {
-        return {
-          http: `https://eth-mainnet.g.alchemy.com/v2/${import.meta.env.VITE_APP_ALCHEMY_MAINNET_API_KEY}`,
-          webSocket: `wss://eth-mainnet.g.alchemy.com/v2/${import.meta.env.VITE_APP_ALCHEMY_MAINNET_API_KEY}`,
-        };
-      } else if (chain.id === sepolia.id) {
-        return {
-          http: `https://eth-sepolia.g.alchemy.com/v2/${import.meta.env.VITE_APP_ALCHEMY_SEPOLIA_API_KEY}`,
-          webSocket: `wss://eth-sepolia.g.alchemy.com/v2/${import.meta.env.VITE_APP_ALCHEMY_SEPOLIA_API_KEY}`,
-        };
-      }
-      return {
-        http: `https://${publicNodeNetworkUrl}`,
-        webSocket: `wss://${publicNodeNetworkUrl}`,
-      };
-    },
-  }),
-]);
-
 export const walletConnectProjectId = import.meta.env.VITE_APP_WALLET_CONNECT_PROJECT_ID;
+export const queryClient = new QueryClient();
 
 const wagmiMetadata = {
   name: import.meta.env.VITE_APP_NAME,
@@ -44,8 +22,13 @@ const wagmiMetadata = {
   icons: [`${import.meta.env.VITE_APP_SITE_URL}favicon.icon`],
 };
 
+
 export const wagmiConfig = defaultWagmiConfig({
-  chains: supportedWagmiChains,
+  chains: supportedWagmiChains as [Chain, ...Chain[]],
   projectId: walletConnectProjectId,
   metadata: wagmiMetadata,
+  transports: {
+    [mainnet.id]: http(`https://eth-mainnet.g.alchemy.com/v2/${import.meta.env.VITE_APP_ALCHEMY_MAINNET_API_KEY}`),
+    [sepolia.id]: http(`https://eth-sepolia.g.alchemy.com/v2/${import.meta.env.VITE_APP_ALCHEMY_SEPOLIA_API_KEY}`)
+  }
 });

src/providers/Providers.tsx

@@ -1,20 +1,21 @@
 import { ApolloProvider } from '@apollo/client';
 import { ChakraProvider } from '@chakra-ui/react';
+import { QueryClientProvider } from '@tanstack/react-query'
 import { createWeb3Modal } from '@web3modal/wagmi/react';
 import { ReactNode, useEffect } from 'react';
 import { ToastContainer } from 'react-toastify';
-import { WagmiConfig } from 'wagmi';
+import { WagmiProvider } from 'wagmi';
 import { theme } from '../assets/theme';
 import { ErrorFallback } from '../components/ui/utils/ErrorFallback';
 import graphQLClient from '../graphql';
 import { FractalErrorBoundary, initErrorLogging } from '../helpers/errorLogging';
 import { AppProvider } from './App/AppProvider';
 import EthersContextProvider from './Ethers';
 import { NetworkConfigProvider } from './NetworkConfig/NetworkConfigProvider';
-import { wagmiConfig, chains, walletConnectProjectId } from './NetworkConfig/web3-modal.config';
+import { wagmiConfig, walletConnectProjectId, queryClient } from './NetworkConfig/web3-modal.config';
 
 if (walletConnectProjectId) {
-  createWeb3Modal({ wagmiConfig, projectId: walletConnectProjectId, chains });
+  createWeb3Modal({ wagmiConfig, projectId: walletConnectProjectId });
 }
 
 export default function Providers({ children }: { children: ReactNode }) {
@@ -29,7 +30,8 @@ export default function Providers({ children }: { children: ReactNode }) {
     >
       <FractalErrorBoundary fallback={<ErrorFallback />}>
         <ApolloProvider client={graphQLClient}>
-          <WagmiConfig config={wagmiConfig}>
+          <WagmiProvider config={wagmiConfig}>
+          <QueryClientProvider client={queryClient}>
             <NetworkConfigProvider>
               <EthersContextProvider>
                 <AppProvider>
@@ -43,7 +45,8 @@ export default function Providers({ children }: { children: ReactNode }) {
                 </AppProvider>
               </EthersContextProvider>
             </NetworkConfigProvider>
-          </WagmiConfig>
+            </QueryClientProvider>
+          </WagmiProvider>
         </ApolloProvider>
       </FractalErrorBoundary>
     </ChakraProvider>