feat: implement useSyncAccountWithUserStore hook for account synchronization

Author: ErwanDecoster

src/hooks/useWatchAccount.ts src/hooks/useSyncAccountWithUserStore.tssrc/hooks/useWatchAccount.ts renamed to src/hooks/useSyncAccountWithUserStore.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useAccount } from 'wagmi';
 import useUserStore from '@/stores/useUser.store';
 
-export function useWatchAccount() {
+export function useSyncAccountWithUserStore() {
   const { connector, status, address, chain, isConnected } = useAccount();
   const { setConnector, setIsConnected, setAddress, setChainId } =
     useUserStore();
@@ -13,5 +13,15 @@ export function useWatchAccount() {
     setIsConnected(isConnected);
     setAddress(address);
     setChainId(chain?.id);
-  }, [connector, status, address, chain]);
+  }, [
+    connector,
+    status,
+    address,
+    chain,
+    isConnected,
+    setConnector,
+    setIsConnected,
+    setAddress,
+    setChainId,
+  ]);
 }

src/routes/__root.tsx

@@ -2,14 +2,14 @@ import { createRootRoute, Outlet } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
 import { Footer } from '@/components/Footer';
 import { Navbar } from '@/components/navbar/NavBar';
-import { useWatchAccount } from '@/hooks/useWatchAccount';
+import { useSyncAccountWithUserStore } from '@/hooks/useSyncAccountWithUserStore';
 
 export const Route = createRootRoute({
   component: Root,
 });
 
 function Root() {
-  useWatchAccount();
+  useSyncAccountWithUserStore();
 
   return (
     <div className="mx-auto mb-20 w-full px-6 md:px-10 lg:px-20">