Bump wagmi from 2.19.2 to 3.1.0

package.json

@@ -36,7 +36,7 @@
     "react-router-dom": "^7.10.1",
     "recoil": "^0.7.7",
     "serve": "^14.1.2",
-    "wagmi": "^2.15.6"
+    "wagmi": "^3.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

src/App.tsx

@@ -2,7 +2,7 @@ import { Box } from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
 import { Fragment, useEffect, useState } from "react";
 import { BrowserRouter, useLocation, useNavigate } from "react-router-dom";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 import "@/index.css";
 
 import { ErrorSplash } from "@/components/ErrorSplash";
@@ -27,7 +27,7 @@ const protectedRoutes = [
 function AppContent() {
   const location = useLocation();
   const navigate = useNavigate();
-  const { isConnected, isConnecting } = useAccount();
+  const { isConnected, isConnecting } = useConnection();
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
   const [redirectRoute, setRedirectRoute] = useState<string>("");
 

src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -1,13 +1,13 @@
-import { useEffect } from "react";
+import { ReactNode, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 
 interface ProtectedRouteProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
-  const { isConnected } = useAccount();
+  const { isConnected } = useConnection();
   const navigate = useNavigate();
 
   useEffect(() => {

src/hooks/useConnectedBalance.ts

@@ -1,9 +1,9 @@
 import BigNumber from "bignumber.js";
 import { useMemo } from "react";
-import { useAccount, useBalance } from "wagmi";
+import { useConnection, useBalance } from "wagmi";
 
 export const useConnectedBalance = () => {
-  const { address } = useAccount();
+  const { address } = useConnection();
   const { data: walletBalanceResponse } = useBalance({ address });
 
   return useMemo(() => {

src/hooks/useSendMany.ts

@@ -4,13 +4,13 @@ import {
   useWaitForTransactionReceipt,
   useCapabilities,
   useSendCalls,
-  useAccount,
+  useConnection,
 } from "wagmi";
 
 import { SendManyCall } from "@/types";
 
 export const useSendMany = () => {
-  const { address } = useAccount();
+  const { address } = useConnection();
   const { data: capabilities } = useCapabilities();
   const chainId = useChainId();
   const [txHash, setTxHash] = useState<`0x${string}` | undefined>();

src/hooks/useValidators.ts

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
-import { useAccount, useChainId } from "wagmi";
+import { useConnection, useChainId } from "wagmi";
 
 import { getApiBaseURL } from "@/config/networks";
 import {
@@ -31,7 +31,7 @@ const apiFetch = async (address: string | undefined, chainId: number) => {
 };
 
 export const useValidators = () => {
-  const { address } = useAccount();
+  const { address } = useConnection();
   const chainId = useChainId();
 
   const currentAddress = address ? (address as string) : undefined;

src/modals/Deposit/DepositConfirmModal.tsx

@@ -13,7 +13,7 @@ import {
 } from "@mui/material";
 import BigNumber from "bignumber.js";
 import React, { useEffect, useMemo, useState } from "react";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 
 import {
   CustomModalTable,
@@ -37,7 +37,7 @@ export const DepositConfirmModal: React.FC<DepositConfirmModalProps> = ({
   selectedValidators,
   onConfirm,
 }) => {
-  const { address } = useAccount();
+  const { address } = useConnection();
   const currentWalletBalance = useConnectedBalance();
   const [acknowledged, setAcknowledged] = useState(false);
 

src/modals/Exit/ExitConfirmModal.tsx

@@ -12,7 +12,7 @@ import {
 } from "@mui/material";
 import BigNumber from "bignumber.js";
 import React, { useEffect, useMemo, useState } from "react";
-import { useAccount, useBalance } from "wagmi";
+import { useConnection, useBalance } from "wagmi";
 
 import {
   CustomModalTable,
@@ -40,7 +40,7 @@ export const ExitConfirmModal: React.FC<ExitConfirmModalProps> = ({
   totalExitAmount,
   onConfirm,
 }) => {
-  const { address } = useAccount();
+  const { address } = useConnection();
   const { data: walletBalanceResponse } = useBalance({ address });
   const [confirmationText, setConfirmationText] = useState("");
 

src/pages/Dashboard/Dashboard.tsx

@@ -1,7 +1,7 @@
 import { AccountBalanceWallet as WalletIcon } from "@mui/icons-material";
 import { Box, Typography } from "@mui/material";
 import React from "react";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 
 import { DashboardValidatorsTable } from "@/components/DashboardValidatorsTable";
 import { Meta } from "@/components/Meta";
@@ -10,7 +10,7 @@ import { PendingBalanceCard } from "@/components/PendingBalanceCard";
 import { useValidators } from "@/hooks/useValidators";
 
 const Dashboard: React.FC = () => {
-  const { isConnected } = useAccount();
+  const { isConnected } = useConnection();
   const { data: validatorData } = useValidators();
 
   return (

src/pages/Exit/Exit.tsx

@@ -1,6 +1,6 @@
 import { Box, Typography, Button } from "@mui/material";
 import React, { useState, useMemo } from "react";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 
 import { ExitValidatorTable } from "@/components/ExitValidatorTable";
 import { Meta } from "@/components/Meta";
@@ -14,7 +14,7 @@ import {
 } from "@/modals/Exit";
 
 const Exit: React.FC = () => {
-  const { address } = useAccount();
+  const { address } = useConnection();
   const { allowSendMany } = useSendMany();
   const { data: validatorData } = useValidators();
   const [selectedValidators, setSelectedValidators] = useState<string[]>([]);

src/pages/PartialWithdraw/PartialWithdraw.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography, Button } from "@mui/material";
 import BigNumber from "bignumber.js";
 import React, { useState, useMemo } from "react";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 
 import { Meta } from "@/components/Meta";
 import { PartialWithdrawValidatorTable } from "@/components/PartialWithdrawValidatorTable";
@@ -16,7 +16,7 @@ import {
 import { WithdrawalEntry } from "@/types";
 
 const PartialWithdraw: React.FC = () => {
-  const { address } = useAccount();
+  const { address } = useConnection();
   const { allowSendMany } = useSendMany();
   const { data: validatorData } = useValidators();
   const [entries, setEntries] = useState<WithdrawalEntry[]>([]);

src/pages/TopUp/TopUp.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography, Button } from "@mui/material";
 import BigNumber from "bignumber.js";
 import React, { useState, useMemo } from "react";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 
 import { Meta } from "@/components/Meta";
 import { TopUpValidatorTable } from "@/components/TopUpValidatorTable";
@@ -14,7 +14,7 @@ import {
 import { TopUpEntry } from "@/types";
 
 const TopUp: React.FC = () => {
-  const { address } = useAccount();
+  const { address } = useConnection();
   const currentWalletBalance = useConnectedBalance();
   const [entries, setEntries] = useState<TopUpEntry[]>([]);
   const [showConfirmModal, setShowConfirmModal] = useState(false);

src/routes/index.tsx

@@ -1,5 +1,5 @@
 import { Navigate, Route, Routes } from "react-router-dom";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 
 import Consolidate from "@/pages/Consolidate";
 import Dashboard from "@/pages/Dashboard";
@@ -10,7 +10,7 @@ import TopUp from "@/pages/TopUp";
 import Upgrade from "@/pages/Upgrade";
 
 function Pages() {
-  const { isConnected } = useAccount();
+  const { isConnected } = useConnection();
 
   return (
     <Routes>

src/sections/Header/Header.tsx

@@ -3,10 +3,10 @@
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import React from "react";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 
 const Header: React.FC = () => {
-  const { isConnected } = useAccount();
+  const { isConnected } = useConnection();
 
   return (
     <Box className="flex h-16 items-center justify-between border-b border-divider bg-[#171717] px-3">

src/sections/Sidebar/Sidebar.tsx

@@ -11,7 +11,7 @@ import { Box, List, ListItem, ListItemButton } from "@mui/material";
 import clsx from "clsx";
 import React from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { useAccount } from "wagmi";
+import { useConnection } from "wagmi";
 
 const sidebarItems = [
   { name: "Dashboard", icon: DashboardIcon, path: "/dashboard" },
@@ -26,7 +26,7 @@ const sidebarItems = [
 const Sidebar: React.FC = () => {
   const location = useLocation();
   const navigate = useNavigate();
-  const { isConnected } = useAccount();
+  const { isConnected } = useConnection();
 
   return (
     <Box className="flex h-full w-20 flex-col border-r border-divider bg-background">