fix: wagmi's useEnsAddress() not working

components/providers/root-provider.tsx

@@ -20,9 +20,7 @@ export default function RootProvider({ children }: RootProviderProps) {
     <XMTPProvider dbVersion={2}>
       <ThemeProvider>
         <QueryClientProvider client={queryClient}>
-          <Privy>
-            <HandleWalletEvents>{children}</HandleWalletEvents>
-          </Privy>
+          <Privy>{children}</Privy>
         </QueryClientProvider>
       </ThemeProvider>
     </XMTPProvider>

integrations/xmtp/xmtp-create-client.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect } from "react"
 import { usePrivy, useWallets } from "@privy-io/react-auth"
-import { usePrivyWagmi } from "@privy-io/wagmi-connector"
 import { useClient } from "@xmtp/react-sdk"
 import { useAccount, useNetwork } from "wagmi"
 

integrations/xmtp/xmtp-start-conversation.tsx

@@ -4,8 +4,8 @@ import {
   useCanMessage,
   useStartConversation,
 } from "@xmtp/react-sdk"
-import { useEnsAddress } from "wagmi"
 
+import useEnsAddress from "@/lib/hooks/use-ens-address"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 
@@ -27,27 +27,15 @@ export const XMTPStartConversation = ({ className }: XMTPStartConversation) => {
     setIsLoading(false)
   }
 
-  const {
-    data: ensResolvedAddress,
-    isLoading: isEnsLoading,
-    isFetching: isEnsFetching,
-    refetch: ensRefetch,
-  } = useEnsAddress({
-    name: peerAddress,
-    chainId: 1,
-    enabled: false,
-  })
+  const { data: ensResolvedAddress, isLoading: isEnsLoading } =
+    useEnsAddress(peerAddress)
 
   const handleAccountChange = async (event: any) => {
     const newPeerAddress: string = event.target.value
     setPeerAddress(event.target.value)
     if (isValidAddress(event.target.value)) {
       await checkAddress(event.target.value)
     }
-    if (newPeerAddress.endsWith(".eth")) {
-      console.log("refetching")
-      await ensRefetch()
-    }
   }
 
   const handleMessageChange = (event: any) => {
@@ -84,16 +72,16 @@ export const XMTPStartConversation = ({ className }: XMTPStartConversation) => {
       await checkAddress(ensResolvedAddress)
     }
 
-    if (ensResolvedAddress && isValidAddress(ensResolvedAddress)) {
+    if (
+      typeof ensResolvedAddress === "string" &&
+      isValidAddress(ensResolvedAddress)
+    ) {
       checkEnsAddress(ensResolvedAddress).catch((err) => console.log(err))
     }
   }, [ensResolvedAddress])
 
   const getFeedbackMessage = () => {
-    if (
-      isLoading ||
-      (peerAddress.endsWith(".eth") && (isEnsLoading || isEnsFetching))
-    ) {
+    if (isLoading || (peerAddress.endsWith(".eth") && isEnsLoading)) {
       return "Finding address on the XMTP network"
     }
 
@@ -105,10 +93,13 @@ export const XMTPStartConversation = ({ className }: XMTPStartConversation) => {
       return "Please enter a valid 0x wallet, or ENS address"
     }
 
+    if (!ensResolvedAddress && peerAddress.endsWith(".eth")) {
+      return "An error occured resolving the address from the ENS"
+    }
+
     if (
       !isLoading &&
       !isEnsLoading &&
-      !isEnsFetching &&
       !peerIsActive &&
       (isValidAddress(peerAddress) || peerAddress.endsWith(".eth"))
     ) {

lib/hooks/use-ens-address.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react"
+import { SetStateAction } from "jotai"
+import { createPublicClient, http } from "viem"
+import { mainnet } from "wagmi"
+
+const client = createPublicClient({
+  chain: mainnet,
+  transport: http(),
+})
+
+export default function useEnsAddress(name: string) {
+  const [resolvedAddress, setResolvedAddress] =
+    useState<SetStateAction<string | null>>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    const updateAddress = async () => {
+      setIsLoading(true)
+      const address = await client.getEnsAddress({ name })
+      setResolvedAddress(address)
+      setIsLoading(false)
+    }
+
+    if (name.endsWith(".eth")) {
+      updateAddress().catch((err) => console.log(err))
+    }
+  }, [name])
+
+  return { data: resolvedAddress, isLoading }
+}