Detect noWeb3 and networkId on passive mode

[michaelhly]

Hi Noah,

I have two questions:

1. When using the useWeb3Context hook with the provider in passive mode, is it possible for the context to have the networkId? (If I use web3.js, I can always get the networkId with window.web3.currentProvider.networkVersion)

2. When using the useWeb3Context hook with the provider in passive mode, is it possible to detect that my user does not have any web3 object in their window? (If I use web3.js, I can check window.web3 == null

Edit: Oh wait. Did you remove the passive option?

[NoahZinsmeister]

Hi @michaelhly, I did remove the passive mode in v3! Basically, the package is now 'passive' by default, and you always have to manually initialize connectors.

There are some pretty bare-bones examples of this in the docs and codesandbox, but let me know if you have questions about any specific pattern.

As for detecting the network id before initialization, or for checking whether or not a global web3 object exists: I don't think there's any problem doing those kind of checks manually, though ideally it wouldn't be needed. One way to deal with with would be to call setFirstValidConnector with MetaMask as the first argument, and Infura as the second for users without a web3 browser.

const metaMask = new MetaMaskConnector({ supportedNetworks: [1, 4] })
const infura = new NetworkOnlyConnector({ providerURL: '...' })

const connectors = { metaMask, infura }

// now you can call: setFirstValidConnector(['metaMask', 'infura'])

Does that make sense/cover your use cases?

[michaelhly]

Hey, thanks. Let me try out v3 and get back to you.

[NoahZinsmeister]

Hi @michaelhly, closing this issue for now, feel free to reopen if you have any issues with v3!

[michaelhly]

Hi @NoahZinsmeister,

When not connected to the provider, the context object looks like this. My question was is it possible for the context to have whatever provider's networkId that is injected to the browser? Or if any web3 object exists in the browser?

As this is possible with regular web3.js. If my user does not have any sort of web3 provider, I'd like to prompt my user to go download one.

Update: Nevermind, I'm stupid. I can get this information myself with window.ethereum.

[NoahZinsmeister]

Hi @michaelhly!

While you're definitely more than welcome to use window.ethereum (and this might even be optimal depending on your use case), you can also use something like the 'automatic initialization' pattern described below:

In a component below the one where you initialize <Web3Provider ...> (this is necessary so that the context is injected appropriately), you can write something like:

const context = useWeb3Context()
useEffect(() => {
  context.setFirstValidConnector(['metamask', 'infura'])
}, [])

If you've named your connectors 'metamask' and 'infura', this code will attempt to activate web3-react using metamask, and if that fails (probably because the user doesn't have it installed/is on mobile/whatever), then it will fall back to infura.

Does that make sense/cover your use case?

[michaelhly]

Yep. This is good. Thanks!

[NoahZinsmeister]

And if you want to prompt users to download a web3 provider, you'll be able to render that conditionally based on context.active/context.error within the component calling context.setFirstValidConnector.

Final note, I'm working on adding a bunch of other connectors (woo!), so in the near future it will be really easy to connect not only to metamask/infura/walletconnect, but also trezor, ledger, fortmatic, maybe portis, etc.

[michaelhly]

And if you want to prompt users to download a web3 provider, you'll be able to render that conditionally based on context.active/context.error within the component calling context.setFirstValidConnector.

Final note, I'm working on adding a bunch of other connectors (woo!), so in the near future it will be really easy to connect not only to metamask/infura/walletconnect, but also trezor, ledger, fortmatic, maybe portis, etc.

Nice. That would be awesome!