Lose web3 instance on refresh

Hi everyone , I’m working with Moralis and React (not specifically with react-moralis hook) and when I refresh my page I miss web3 instance, so i have to logout and login again, how can I avoid this behavior?

you could call Moralis.enableWeb3 to get back the web3 instance

1 Like

How about walletconnect? After I refresh my page, when I call enableWeb3({ provider: ‘walletconnect’}) the QR code modal appears, how can I get the web3 instance again without the QR code modal appearing?

1 Like

I think that you may need to save somewhere that web3 instance, maybe local storage

web3 is a JavaScript object, with functions, not a data object. I can’t serialize it in JSON so can’t save it to local storage

@pearlphoenix your right u cant do that what cryptokid means is to save a referance to web3 session in local storage. Production apps lile uniswap and pancake swap do this by saving a referance to last session in local storage. If local storage has an ref they connect in page load. Its called eager connect. See this repo. Also lool at rhe uniswap v1 legacy interface fo a simpler implementation their old code is much easier to follow. Its well worth forking these repos to see how these guys do things in production you can learn a lot by taking a day or two.

As for walletconnect i find this finicky too. If you go to the likes of uniswap or pancakeswap and referesh the page when connect with any wallet the connector that it defaults back to is always injected. So if your connected with portis, fortmatic and even walletconnect and refresh youll always be loaded in with injected web3 when u refresh.

I had an idea of how to get around this but havent tested it yet so not sure if it will work. You could make two intances of the walletconnect connector. One with qrcode: true and the other with qrcode: false if you conect by clicking the connect button instiate web3 with the walletconnect provider that makes the qr modal pop up. Then save some refernace to the walletconnect session to local strage could simply be localStorage.setItem(provider, "walletconnect)". (this is what pancakeswap does). then on page load if local storage provider item === walletconnect then just activate walleconnectweb3 with the connector where qrcode: false

now ive only thought of this idea have never tried it myself so not sure if it will work. but just know that production apps like usinswap and packcake always default back to injected web3 on page refresh.

1 Like

has anyone found an easier way to keep the web3 instance across refreshs and different pages? I’m quite confused here

1 Like

i know how to do this with web3 react, do you specifically want to do it using morlais im not as familiar with there react hooks. howeevr i think you will be able to get around the issue by calling Moralis.enableWeb3 in a useEffect that runs on page render

Thanks, I think this is finally working.

I put the react hooks in useEffect in the parent component like this:

{enableWeb3, isWeb3Enabled} = useMoralis()

useEffect( async () => {
        await enableWeb3()

And importantly, conditionally render all the child components that need web3 using the isWeb3Enabled boolean. Since useEffect runs after everything is rendered I otherwise kept getting the web3 error from all children.

{isWeb3Enabled && <DoSomething />}
1 Like

Same problem here, is this completely solve yours?

1 Like

When i refresh the page getting this error: Uncaught (in promise) Error: Missing web3 instance, make sure to call Moralis.enableWeb3() or Moralis.authenticate()

On what line you get that error?

After first authentication everything works perfectly without an error but after refreshing page or re-rendering causing this error.

I mean what requires that web3 instance?

You can also enableWeb3 with useEffect

For useChain hook.
I tried with useEffect but still getting same error.

    () => async () => {
      if (isAuthenticated) {
        await enableWeb3();

All imports are done.

You could try to skip that if and call enableWeb3 directly

I tried that too, actually i’m struggling with this problem since morning :frowning:
Without “if” problem didn’t solve…

What is the like that requires web3 then? As in the line that gives you that error with web3

1 Like

I’m going to take a break because my head is burning lol…
I’ll look at it again, thanks for your help.