2

I am using WAGMI and the Rainbowkit connector for my Dapp. After deploying it on production, I have encountered a strange problem. Sometimes, after refreshing the page or opening it in a new tab, the "connector" and useWalletclient "data" become undefined randomly. I have spent a lot of time digging through the internet but couldn't find any solution. Any hints or suggestions would be greatly appreciated.

import { useEffect, useState } from 'react'

import { useWalletClient, useAccount, useConnect } from 'wagmi'
import Web3 from 'web3'

export const useGetProviderInfo = () => {
  const [active, setActive] = useState(false)
  const { data, isIdle } = useWalletClient()
  console.log('🚀 ~ file: useGetProviderInfo.tsx:9 ~ useGetProviderInfo ~ isIdle:', isIdle)
  const { connect } = useConnect()
  const { address: account, isConnected, connector } = useAccount()
  console.log('🚀 ~ file: useGetProviderInfo.tsx:12 ~ useGetProviderInfo ~ connector:', connector)
  const library = new Web3(data as any)
  // useEffect(() => {
  //   if (isIdle) {
  //     connect()
  //   }
  // }, [isIdle])

  useEffect(() => {
    if (isConnected && library.currentProvider) {
      setActive(true)
    } else {
      setActive(false)
    }
  }, [account, isConnected, library.currentProvider])

  return { library, account, active }
}

Demo: url SendBox: url

Issue on github with video

0

2 Answers 2

0

Maybe you already try to call error from useWalletClient.

It can show the exact problem.

const { data, isIdle, error, isError } = useWalletClient()

useEffect(() => {
  console.log(error.message)
}, [error, isError])
1
  • yap, I tried above solution to find if any errors are returned but error is null Jul 24, 2023 at 7:48
0

Sometimes it is an issue with the render. You can create a new component for the account balance and import it with the client side render.

const Profile = dynamic(() => import("./Profile"), {
  ssr: false,
});

Then in the Profile.tsx component file, you can use the useAccount() import. This worked for me. Hope this helps.

Also, if you, later on, need the address, you may put it in a context globally to access rather than using useAccount() all the time.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.