fix Hydration error on root page

src/app/login/Login.tsx

@@ -1,7 +1,6 @@
 import { Footer } from '@/components/Footer'
 import { Headline } from '@/components/Typography'
 import { cn } from '@/lib/utils'
-import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { useAccount } from 'wagmi'
@@ -10,6 +9,7 @@ import { GetStarted } from './GetStarted'
 import { BG_IMG_CLASSES } from '@/shared/utils'
 import { HeaderText } from '@/components/HeaderText/HeaderText'
 import { DeviceWarning } from '@/components/DeviceWarning'
+
 export const Login = () => {
   const { isConnected, address } = useAccount()
   const [hasMounted, setHasMounted] = useState(false)

src/app/page.tsx

@@ -2,9 +2,22 @@
 import { useAccount } from 'wagmi'
 import { Login } from './login'
 import User from './user/page'
+import { useEffect, useState } from 'react'
 
 export default function Home() {
   const { isConnected } = useAccount()
+  const [hasMounted, setHasMounted] = useState(false)
+
+  useEffect(() => {
+    // This is to prevent Hydration error on client side
+    // because useAccount hook is not available on server side
+    setHasMounted(true)
+  }, [])
+
+  if (!hasMounted) {
+    return null
+  }
+
   if (isConnected) {
     return <User />
   }