React moralis package doesn't seem to interface correctly with metamask on load

Technical Issue Reporting
#1

This issue also appears to be apparent in an unmodified version of the Ethereum boiler plate repository.

If my browser is already connected to a wallet, when opening an instance of the ethereum boiler plate application, it does not seem to automatically connect to a wallet / account.
If the user then refreshes the page, the account connects.

#2

you call enableWeb3 on page load and it doesn’t connect to Metamask?

#3

Hello sorry the slow response, I have found a workaround and forgot to respond to this thread.

Steps to reproduce:

  1. run the boiler plate code and connect your wallet to the site.
  2. open a new tab within the current browser with the wallet connected
  3. route to the locally running boilerplate (localhost:3000) in the new tab.
  4. If you open and check metamask, the wallet and account is still connected. However the {address} property from the useMoralis hook will be undefined and the wallet widget at the top right of the boiler plate menu bar will read “Authenticate”.
  5. Furthermore, when I then try to authenticate my wallet through Metamask the process is unsuccessful so I cannot get the boilerplate hooks to recognise the wallet.

As I said, this is an unmodified version of the react ethereum boiler plate repo on my machine.

Workaround:
I realised that on refresh, the wallet then connects. (weather you attempted to connect the wallet again or not).
So when the application loads, if the boilerplate doesn’t register the connected wallet and the user attempts to connect to the wallet, I have forced a window.location.reload(). This successfully works around the issue from a user perspective and results in the useMoralis hooks detecting the connected account.