In an effort to make my dApp more user-friendly, especially for onboarding, I'm trying to guide new users into installing Metamask.
If no web3 provider is present, I show the user a "Create your wallet" button. When they click on it, they are headed to Metamask.io in a new tab.
The trouble arises when they install Metamask and go back to my dApp. There doesn't seem to be a way of detecting if a web3 provider is installed without reloading. I can't just programmatically reload the whole page, and asking my disengaged potential user to reload feels like very bad UX.
Basically it checks every second if you have a web3 provider. Since it can't run without a webserver, I put it online so you can quickly test it.
If I don't have Metamask installed, I get the expected message:
But after I install it and go back to this page, the same message keeps appearing:
Only after a refresh does my snippet detect metamask:
I can't be the only one facing onboarding issues with web3 providers. What workarounds have you thought of?