Detect noWeb3 and networkId on passive mode about web3-react HOT 8 CLOSED

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

from web3-react.

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.

from web3-react.

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?

from web3-react.

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

from web3-react.

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.

from web3-react.

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?

from web3-react.

Yep. This is good. Thanks!

from web3-react.

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!

from web3-react.