chore: upgrade wagmi 2 -> 3 with peer dep override

package.json

@@ -45,15 +45,16 @@
     "graphql": "^16.13.2",
     "graphql-request": "^7.1.2",
     "next-themes": "^0.4.6",
-    "porto": "^0.2.28",
+    "ox": ">=0.11.1",
+    "porto": "^0.2.35",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-error-boundary": "^6.0.0",
     "react-jazzicon": "^1.0.4",
     "react-number-format": "^5.4.5",
     "use-debounce": "^10.1.1",
     "viem": "^2.47.6",
-    "wagmi": "^2.17.5",
+    "wagmi": "^3.6.0",
     "zod": "^4"
   },
   "devDependencies": {
@@ -95,6 +96,14 @@
   "pnpm": {
     "overrides": {
       "@graphql-codegen/cli": "^6"
+    },
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "connectkit>wagmi": "3",
+        "@rainbow-me/rainbowkit>wagmi": "3",
+        "@reown/appkit-adapter-wagmi>wagmi": "3",
+        "@reown/appkit-adapter-wagmi>@wagmi/core": "3"
+      }
     }
   }
 }

src/components/pageComponents/home/Examples/demos/TransactionButton/ERC20ApproveAndTransferButton/ERC20ApproveAndTransferButton.tsx

@@ -49,7 +49,7 @@ const ERC20ApproveAndTransferButton: FC<Props> = ({
   transaction,
 }) => {
   const { address } = useWeb3StatusConnected()
-  const { writeContractAsync } = useWriteContract()
+  const { mutateAsync: writeContractAsync } = useWriteContract()
   const { isWalletConnected, walletChainId } = useWeb3Status()
 
   const { data: allowance, refetch: getAllowance } = useSuspenseReadErc20Allowance({

src/components/pageComponents/home/Examples/demos/TransactionButton/ERC20ApproveAndTransferButton/MintUSDC.tsx

@@ -7,7 +7,7 @@ import { getContract } from '@/src/constants/contracts/contracts'
 
 export default function MintUSDC({ onSuccess }: { onSuccess: () => void }) {
   const { address } = useWeb3StatusConnected()
-  const { writeContractAsync } = useWriteContract()
+  const { mutateAsync: writeContractAsync } = useWriteContract()
   const aaveContract = getContract('AaveFaucet', sepolia.id)
   const aaveUSDC = '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8'
 

src/components/pageComponents/home/Examples/demos/TransactionButton/ERC20ApproveAndTransferButton/index.tsx

@@ -58,7 +58,7 @@ const ABIExample = [
  */
 const ERC20ApproveAndTransferButton = withSuspense(() => {
   const { address } = useWeb3StatusConnected()
-  const { writeContractAsync } = useWriteContract()
+  const { mutateAsync: writeContractAsync } = useWriteContract()
 
   const { data: balance, refetch: refetchBalance } = useSuspenseReadErc20BalanceOf({
     address: tokenUSDC_sepolia.address as Address,

src/components/pageComponents/home/Examples/demos/TransactionButton/NativeToken.tsx

@@ -16,7 +16,7 @@ import { useWeb3StatusConnected } from '@/src/components/sharedComponents/Wallet
 const NativeToken = () => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const { address } = useWeb3StatusConnected()
-  const { sendTransactionAsync } = useSendTransaction()
+  const { mutateAsync: sendTransactionAsync } = useSendTransaction()
   const [minedMessage, setMinedMessage] = useState<string | ReactElement>()
 
   const handleOnMined = (receipt: TransactionReceipt) => {

src/components/sharedComponents/SignButton.test.tsx

@@ -37,7 +37,7 @@ vi.mock('@/src/providers/TransactionNotificationProvider', () => ({
 vi.mock('wagmi', () => ({
   useSignMessage: vi.fn(() => ({
     isPending: false,
-    signMessageAsync: mockSignMessageAsync,
+    mutateAsync: mockSignMessageAsync,
   })),
 }))
 

src/components/sharedComponents/SignButton.tsx

@@ -55,7 +55,7 @@ const SignButton: FC<SignButtonProps> = ({
     useWalletStatus({ chainId })
   const { watchSignature } = useTransactionNotification()
 
-  const { isPending, signMessageAsync } = useSignMessage({
+  const { isPending, mutateAsync: signMessageAsync } = useSignMessage({
     mutation: {
       onSuccess(data) {
         onSign?.(data)

src/components/sharedComponents/SwitchNetwork.test.tsx

@@ -1,6 +1,6 @@
 import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import SwitchNetwork, { type Networks } from './SwitchNetwork'
 
 const system = createSystem(defaultConfig)
@@ -10,6 +10,7 @@ vi.mock('@/src/hooks/useWeb3Status', () => ({
 }))
 
 vi.mock('wagmi', () => ({
+  useChains: vi.fn(),
   useSwitchChain: vi.fn(),
 }))
 
@@ -30,13 +31,16 @@ function defaultWeb3Status(overrides = {}) {
   }
 }
 
+function defaultChains() {
+  return [
+    { id: 1, name: 'Ethereum' },
+    { id: 137, name: 'Polygon' },
+  ]
+}
+
 function defaultSwitchChain() {
   return {
-    chains: [
-      { id: 1, name: 'Ethereum' },
-      { id: 137, name: 'Polygon' },
-    ],
-    switchChain: vi.fn(),
+    mutate: vi.fn(),
   }
 }
 
@@ -49,6 +53,11 @@ function renderSwitchNetwork(networks = mockNetworks) {
 }
 
 describe('SwitchNetwork', () => {
+  beforeEach(() => {
+    // biome-ignore lint/suspicious/noExplicitAny: partial mock
+    vi.mocked(wagmiModule.useChains).mockReturnValue(defaultChains() as any)
+  })
+
   it('shows "Select a network" when wallet chain does not match any network', () => {
     vi.mocked(useWeb3StatusModule.useWeb3Status).mockReturnValue(
       // biome-ignore lint/suspicious/noExplicitAny: partial mock

src/components/sharedComponents/SwitchNetwork.tsx

@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react'
 import * as chains from 'viem/chains'
-import { useSwitchChain } from 'wagmi'
+import { useChains, useSwitchChain } from 'wagmi'
 import DropdownButton from '@/src/components/sharedComponents/ui/DropdownButton'
 import { MenuContent, MenuItem } from '@/src/components/sharedComponents/ui/Menu'
 import { useWeb3Status } from '@/src/hooks/useWeb3Status'
@@ -50,7 +50,8 @@ interface SwitchNetworkProps extends ComponentPropsWithoutRef<'div'> {
 const SwitchNetwork: FC<SwitchNetworkProps> = ({ networks }: SwitchNetworkProps) => {
   const findChain = (chainId: number) => Object.values(chains).find((chain) => chain.id === chainId)
 
-  const { chains: configuredChains, switchChain } = useSwitchChain()
+  const configuredChains = useChains()
+  const { mutate: switchChain } = useSwitchChain()
   const { isWalletConnected, walletChainId, walletClient } = useWeb3Status()
   const [networkItem, setNetworkItem] = useState<NetworkItem>()
 

src/components/sharedComponents/TokenInput/useTokenInput.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { getAddress } from 'viem'
-import { useAccount, usePublicClient } from 'wagmi'
+import { useConnection, usePublicClient } from 'wagmi'
 import { useErc20Balance } from '@/src/hooks/useErc20Balance'
 import type { Token } from '@/src/types/token'
 import { isNativeToken } from '@/src/utils/address'
@@ -48,7 +48,7 @@ export function useTokenInput(token?: Token) {
     setTokenSelected(token)
   }, [token])
 
-  const { address: userWallet } = useAccount()
+  const { address: userWallet } = useConnection()
   const { balance, balanceError, isLoadingBalance } = useErc20Balance({
     address: userWallet ? getAddress(userWallet) : undefined,
     token: selectedToken,

src/hooks/useOPL1CrossDomainMessengerProxy.ts

@@ -142,7 +142,7 @@ export function useL1CrossDomainMessengerProxy({
   walletAddress: Address
 }): () => Promise<Hash> {
   const contract = getContract('OPL1CrossDomainMessengerProxy', fromChain.id)
-  const { writeContractAsync } = useWriteContract()
+  const { mutateAsync: writeContractAsync } = useWriteContract()
 
   return useCallback(async () => {
     const { gas: l2Gas, message } = await l2ContractCallInfo({

src/hooks/useWeb3Status.test.ts

@@ -9,18 +9,18 @@ const mockDisconnect = vi.fn()
 const mockSwitchChain = vi.fn()
 
 vi.mock('wagmi', () => ({
-  useAccount: vi.fn(() => ({
+  useConnection: vi.fn(() => ({
     address: undefined,
     chainId: undefined,
     isConnected: false,
     isConnecting: false,
   })),
   useChainId: vi.fn(() => 1),
-  useSwitchChain: vi.fn(() => ({ isPending: false, switchChain: mockSwitchChain })),
+  useSwitchChain: vi.fn(() => ({ isPending: false, mutate: mockSwitchChain })),
   usePublicClient: vi.fn(() => undefined),
   useWalletClient: vi.fn(() => ({ data: undefined })),
   useBalance: vi.fn(() => ({ data: undefined })),
-  useDisconnect: vi.fn(() => ({ disconnect: mockDisconnect })),
+  useDisconnect: vi.fn(() => ({ mutate: mockDisconnect })),
 }))
 
 vi.mock('@/src/hooks/useWalletStatus', () => ({
@@ -45,7 +45,7 @@ import { WalletStatusVerifier } from '@/src/components/sharedComponents/WalletSt
 const { useWalletStatus } = await import('@/src/hooks/useWalletStatus')
 const mockedUseWalletStatus = vi.mocked(useWalletStatus)
 
-type MockAccount = ReturnType<typeof wagmi.useAccount>
+type MockAccount = ReturnType<typeof wagmi.useConnection>
 type MockSwitchChain = ReturnType<typeof wagmi.useSwitchChain>
 
 describe('useWeb3Status', () => {
@@ -68,7 +68,7 @@ describe('useWeb3Status', () => {
       isConnected: true,
       isConnecting: false,
     } as unknown as MockAccount
-    vi.mocked(wagmi.useAccount).mockReturnValueOnce(mock)
+    vi.mocked(wagmi.useConnection).mockReturnValueOnce(mock)
     const { result } = renderHook(() => useWeb3Status())
     expect(result.current.isWalletConnected).toBe(true)
     expect(result.current.address).toBe('0xabc123')
@@ -81,7 +81,7 @@ describe('useWeb3Status', () => {
       isConnected: true,
       isConnecting: false,
     } as unknown as MockAccount
-    vi.mocked(wagmi.useAccount).mockReturnValueOnce(mock)
+    vi.mocked(wagmi.useConnection).mockReturnValueOnce(mock)
     vi.mocked(wagmi.useChainId).mockReturnValueOnce(1)
     const { result } = renderHook(() => useWeb3Status())
     expect(result.current.isWalletSynced).toBe(true)
@@ -94,7 +94,7 @@ describe('useWeb3Status', () => {
       isConnected: true,
       isConnecting: false,
     } as unknown as MockAccount
-    vi.mocked(wagmi.useAccount).mockReturnValueOnce(mock)
+    vi.mocked(wagmi.useConnection).mockReturnValueOnce(mock)
     vi.mocked(wagmi.useChainId).mockReturnValueOnce(1)
     const { result } = renderHook(() => useWeb3Status())
     expect(result.current.isWalletSynced).toBe(false)
@@ -143,7 +143,7 @@ describe('useWeb3StatusConnected', () => {
       switchChain: vi.fn(),
     })
 
-    vi.mocked(wagmi.useAccount).mockReturnValueOnce({
+    vi.mocked(wagmi.useConnection).mockReturnValueOnce({
       address: '0xdeadbeef' as Address,
       chainId: 1,
       isConnected: true,

src/hooks/useWeb3Status.tsx

@@ -3,9 +3,9 @@ import {
   type UseBalanceReturnType,
   type UsePublicClientReturnType,
   type UseWalletClientReturnType,
-  useAccount,
   useBalance,
   useChainId,
+  useConnection,
   useDisconnect,
   usePublicClient,
   useSwitchChain,
@@ -95,13 +95,13 @@ export const useWeb3Status = () => {
     chainId: walletChainId,
     isConnected: isWalletConnected,
     isConnecting: connectingWallet,
-  } = useAccount()
+  } = useConnection()
   const appChainId = useChainId() as ChainsIds
-  const { isPending: switchingChain, switchChain } = useSwitchChain()
+  const { isPending: switchingChain, mutate: switchChain } = useSwitchChain()
   const readOnlyClient = usePublicClient()
   const { data: walletClient } = useWalletClient()
   const { data: balance } = useBalance()
-  const { disconnect } = useDisconnect()
+  const { mutate: disconnect } = useDisconnect()
 
   const isWalletSynced = isWalletConnected && walletChainId === appChainId