Lose web3 instance on refresh

mirindo_dev · November 30, 2021, 4:31pm

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?

cryptokid · November 30, 2021, 6:03pm

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

pearlphoenix · January 19, 2022, 8:13am

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?

cryptokid · January 19, 2022, 8:16am

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

pearlphoenix · January 19, 2022, 8:50am

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

mcgrane5 · January 19, 2022, 9:23am

@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.

github.com

pancakeswap/pancake-frontend/blob/develop/src/hooks/useEagerConnect.ts

import { useEffect } from 'react'
import { connectorLocalStorageKey, ConnectorNames } from '@pancakeswap/uikit'
import useAuth from 'hooks/useAuth'

const _binanceChainListener = async () =>
  new Promise<void>((resolve) =>
    Object.defineProperty(window, 'BinanceChain', {
      get() {
        return this.bsc
      },
      set(bsc) {
        this.bsc = bsc

        resolve()
      },
    }),
  )

const useEagerConnect = () => {
  const { login } = useAuth()

This file has been truncated. show original

github.com

Uniswap/v1-interface/blob/v1/src/components/Web3ReactManager/index.js

import React, { useState, useEffect } from 'react'
import { useWeb3React } from '@web3-react/core'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'

import { network } from '../../connectors'
import { useEagerConnect, useInactiveListener } from '../../hooks'
import { Spinner } from '../../theme'
import Circle from '../../assets/images/circle.svg'
import { NetworkContextName } from '../../constants'

const MessageWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20rem;
`

const Message = styled.h2`
  color: ${({ theme }) => theme.uniswapPink};

This file has been truncated. show original

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.

omnibrain · March 14, 2022, 5:20pm

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

mcgrane5 · March 15, 2022, 2:24pm

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

omnibrain · March 21, 2022, 2:47pm

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 />}

blockchaindeveloper · March 21, 2022, 3:16pm

Same problem here, is this completely solve yours?

blockchaindeveloper · March 21, 2022, 4:13pm

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

cryptokid · March 21, 2022, 4:15pm

On what line you get that error?

blockchaindeveloper · March 21, 2022, 4:18pm

[Album] imgur.com

blockchaindeveloper · March 21, 2022, 4:20pm

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

cryptokid · March 21, 2022, 4:23pm

I mean what requires that web3 instance?

You can also enableWeb3 with useEffect

blockchaindeveloper · March 21, 2022, 4:31pm

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

useEffect(
    () => async () => {
      if (isAuthenticated) {
        await enableWeb3();
      }
    },
    []
  );

All imports are done.

cryptokid · March 21, 2022, 4:38pm

You could try to skip that if and call enableWeb3 directly

blockchaindeveloper · March 21, 2022, 4:41pm

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

cryptokid · March 21, 2022, 4:42pm

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

blockchaindeveloper · March 21, 2022, 4:44pm

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