feat: using `useAccountAddress` to replace `wagmi.useAccount`

src/components/common/CommentInput.tsx

@@ -1,6 +1,5 @@
 import { Note, Profile } from "~/lib/types"
-import { useAccount } from "wagmi"
-import { useGetCurrentUserSites } from "~/queries/site"
+import { useGetCurrentUserSites, useAccountAddress } from "~/queries/site"
 import { Avatar } from "~/components/ui/Avatar"
 import { Input } from "~/components/ui/Input"
 import { Button } from "~/components/ui/Button"
@@ -17,7 +16,7 @@ export const CommentInput: React.FC<{
   pageId?: string
   originalId?: string
 }> = ({ pageId, originalId }) => {
-  const { address } = useAccount()
+  const address = useAccountAddress()
   const userSites = useGetCurrentUserSites()
   const { show: openConnectModal } = useConnectModal()
   const commentPage = useCommentPage()

src/components/common/FollowingButton.tsx

@@ -2,7 +2,6 @@ import { useRouter } from "next/router"
 import { SITE_URL } from "~/lib/env"
 import { Button } from "~/components/ui/Button"
 import type { Variant } from "~/components/ui/Button"
-import { useAccount } from "wagmi"
 import { useEffect, useState } from "react"
 import toast from "react-hot-toast"
 import {
@@ -10,6 +9,7 @@ import {
   useSubscribeToSite,
   useUnsubscribeFromSite,
   useGetCurrentUserSites,
+  useAccountAddress,
 } from "~/queries/site"
 import { useConnectModal } from "@crossbell/connect-kit"
 import clsx from "clsx"
@@ -21,7 +21,7 @@ export const FollowingButton: React.FC<{
   size?: "sm" | "xl"
   loadingStatusChange?: (status: boolean) => void
 }> = ({ siteId, variant, className, size, loadingStatusChange }) => {
-  const { address } = useAccount()
+  const address = useAccountAddress()
   const subscribeToSite = useSubscribeToSite()
   const unsubscribeFromSite = useUnsubscribeFromSite()
   const { show: openConnectModal } = useConnectModal()

src/components/common/Reactions.tsx

@@ -8,8 +8,7 @@ import {
   useGetMints,
   useCheckMint,
 } from "~/queries/page"
-import { useGetCurrentUserSites } from "~/queries/site"
-import { useAccount } from "wagmi"
+import { useGetCurrentUserSites, useAccountAddress } from "~/queries/site"
 import { useConnectModal } from "@crossbell/connect-kit"
 import { useState, useEffect } from "react"
 import { Button } from "../ui/Button"
@@ -32,7 +31,7 @@ export const Reactions: React.FC<{
   const unlikePage = useUnlikePage()
   const mintPage = useMintPage()
 
-  const { address } = useAccount()
+  const address = useAccountAddress()
   const { show: openConnectModal } = useConnectModal()
   const [likeProgress, setLikeProgress] = useState(false)
   const [mintProgress, setMintProgress] = useState(false)

src/components/dashboard/DashboardLayout.tsx

@@ -7,8 +7,7 @@ import { getSiteLink } from "~/lib/helpers"
 import { SEOHead } from "../common/SEOHead"
 import { UniLink } from "../ui/UniLink"
 import { DashboardSidebar } from "./DashboardSidebar"
-import { useGetCurrentUserSites } from "~/queries/site"
-import { useAccount } from "wagmi"
+import { useGetCurrentUserSites, useAccountAddress } from "~/queries/site"
 import { ConnectButton } from "~/components/common/ConnectButton"
 import { useGetNotifications, useGetSite, useIsOperators } from "~/queries/site"
 import { getStorage } from "~/lib/storage"
@@ -26,7 +25,7 @@ export function DashboardLayout({
   const subdomain = router.query.subdomain as string
   const site = useGetSite(subdomain)
 
-  const { address } = useAccount()
+  const address = useAccountAddress()
 
   const userSite = useGetCurrentUserSites()
 

src/pages/dashboard/new-site.tsx

@@ -6,22 +6,20 @@ import { SEOHead } from "~/components/common/SEOHead"
 import { Button } from "~/components/ui/Button"
 import { Input } from "~/components/ui/Input"
 import { APP_NAME, OUR_DOMAIN } from "~/lib/env"
-import { useAccount, useBalance } from "wagmi"
-import { useCreateSite } from "~/queries/site"
+import { useCreateSite, useAccountAddress } from "~/queries/site"
 import { BigNumber } from "ethers"
 import { UniLink } from "~/components/ui/UniLink"
 import { useGetCurrentUserSites } from "~/queries/site"
 import { getSite } from "~/models/site.model"
+import { useAccountBalance } from "@crossbell/connect-kit"
 
 export default function NewSitePage() {
   const router = useRouter()
   const createSite = useCreateSite()
 
   const [addressIn, setAddressIn] = useState<string>("")
-  const { address } = useAccount()
-  const { data: balance } = useBalance({
-    address: address,
-  })
+  const address = useAccountAddress()
+  const { balance } = useAccountBalance()
   const [balanceFormatted, setBalanceFormatted] = useState<string>("")
 
   const [InsufficientBalance, setInsufficientBalance] = useState<boolean>(true)
@@ -37,7 +35,7 @@ export default function NewSitePage() {
   }, [userSites, router])
 
   useEffect(() => {
-    if (balance !== undefined) {
+    if (balance) {
       setBalanceFormatted(balance.formatted)
       if (
         BigNumber.from(balance.value).gt(

src/pages/index.tsx

@@ -4,7 +4,6 @@ import { DashboardIcon } from "~/components/icons/DashboardIcon"
 import { MainLayout } from "~/components/main/MainLayout"
 import { UniLink } from "~/components/ui/UniLink"
 import { FLY_REGION } from "~/lib/env.server"
-import { useAccount } from "wagmi"
 import { LoveIcon } from "~/components/icons/LoveIcon"
 import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
 import { LaughIcon } from "~/components/icons/LaughIcon"
@@ -17,7 +16,7 @@ import { Link, Element } from "react-scroll"
 import { Image } from "~/components/ui/Image"
 import { dehydrate, QueryClient } from "@tanstack/react-query"
 import { prefetchGetSites } from "~/queries/site.server"
-import { useGetSites } from "~/queries/site"
+import { useGetSites, useAccountAddress } from "~/queries/site"
 import showcase from "../../showcase.json"
 import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
 import { useGetCurrentUserSites, useSubscribeToSites } from "~/queries/site"
@@ -38,7 +37,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
 export default function Home({ region }: { region: string | null }) {
   const [addressIn, setAddressIn] = useState<string>("")
-  const { address } = useAccount()
+  const address = useAccountAddress()
   const { show: openConnectModal } = useConnectModal()
   const router = useRouter()
   const showcaseSites = useGetSites(showcase)

src/queries/site.ts

@@ -15,12 +15,16 @@ export const useGetUserSites = (address?: string) => {
   })
 }
 
-export const useGetCurrentUserSites = () => {
+export function useAccountAddress() {
   const account = useAccountState((s) => s.computed.account)
 
-  return useGetUserSites(
-    account?.type === "email" ? account.email : account?.address,
-  )
+  return account?.type === "email" ? account.email : account?.address
+}
+
+export const useGetCurrentUserSites = () => {
+  const address = useAccountAddress()
+
+  return useGetUserSites(address)
 }
 
 export const useGetSite = (input: string) => {