On page load, not connected

[Dellybro]

I can't seem to figure out how to keep a wallet connected on page refresh.

Thanks

[supermars01]

connect("injected");

[Dellybro]

@supermars01 this doesn't seem to work for me, i call wallet.connect('injected') on my useEffect and the wallet account is null, but status is connected

[l3wi]

Yeah I get the same on hard reload. Account wont update

 // Check to see if we've set a provider in local Storage and connect
  const initProvider = async () => {
    if (provider) {
      console.log('Provider Found:', provider)
      await connect(provider)
      registerProvider(ethereum)
    }
  }
  
  // Once loaded, handoff provider & connect to wallet
  useEffect(() => {
    initProvider()
  }, [])

[l3wi]

@Dellybro Okay found a hacky way to make it work.

Watch for the status to become connected and if the account is still null, call await connect() again

[eth0izzle]

The best way to do this is when the user first connects to a wallet, i.e. after you have called wallet.connect() and wallet.status === "connected", save the value of wallet.connector in to local storage.

I'm using Gatsby so I'm overriding wrapPageElement with;

const Web3Connect = ({ children }) => {
    const wallet = useWallet()

    useEffect(() => {
        const cachedProvider = getItem(CACHED_PROVIDER_KEY)
        if (cachedProvider !== null) {
            wallet.connect("injected")
        }
    }, [])

    return children
}

const wrapPageElement = ({ element }) => <Web3Connect>{element}</Web3Connect>

[Turing-bei]

I also encountered this problem. Can I only reconnect after each page refresh?

[bluedragon1120]

I have same issue.

[bluedragon1120]

The best way to do this is when the user first connects to a wallet, i.e. after you have called wallet.connect() and wallet.status === "connected", save the value of wallet.connector in to local storage.

I'm using Gatsby so I'm overriding wrapPageElement with;

const Web3Connect = ({ children }) => {
    const wallet = useWallet()

    useEffect(() => {
        const cachedProvider = getItem(CACHED_PROVIDER_KEY)
        if (cachedProvider !== null) {
            wallet.connect("injected")
        }
    }, [])

    return children
}

const wrapPageElement = ({ element }) => <Web3Connect>{element}</Web3Connect>

Did you solve this problem?

[roxworks]

Ok, here's what worked for me.

Only call wallet.connect in ONE file. I did it in my main layout script that surrounds everything else.

In every other file, do something like this:

const wallet = useWallet();
useEffect(() => {
  if(wallet.status === 'connected') {
    doStuff();
  }
}, [wallet.status]);