Question: best way to determine if the modal will/will not appear?

[Schwartz10]

Sorry if there's a more appropriate place to ask this question!

I'm trying to develop the following UX on web3Modal:

1. The user comes to site A for the first time
2. The user clicks "connect", sees the web3modal, selects a provider
3. The user's provider is cached
4. The user refreshes the page
5. The user is "auto-connected"

The docs seemed to point to using the cachedProvider property to determine this, but in some cases, cachedProvider returns true, and the modal still appears.

The problem here is that this ends up resulting in some users refreshing their page, and then the metamask popup immediately opening, which is obviously poor UX.

[EdgarBarrantes]

I'd need to test this out with more time, but I'm thinking for your current need you could use something like a useEffect (or equivalent) to listen for the cachedProvider property and call toggleModal() when falsy.

We're currently working on refactoring this library so this is something we'll test out and take into consideration.

[Schwartz10]

Appreciate the quick response!

The problem i'm struggling with is actually in the reverse - I want to know when calling connect will not toggle the modal. I had thought that when cachedProvider is true, the modal would not appear, but that does not always seem to be the case with some user feedback I've gotten from my app.

[EdgarBarrantes]

Oh, got it, you can see the connect method here: https://github.com/Web3Modal/web3modal/blob/master/src/core/index.tsx#L71

But I'm thinking that maybe you're not handling the connection when mounting the app again (on reload) which is prompting the connection request, check the example: https://github.com/Web3Modal/web3modal/blob/master/example/src/App.tsx#L176

[Schwartz10]

But I'm thinking that maybe you're not handling the connection when mounting the app again

This is what I thought too initially, but the problem is that calling this.web3Modal.connect() does open the model sometimes, even when cachedProvider is true. The result is that a user coming to the site will immediately see the popup on page load, which is an unintended behavior.

What i'm specifically looking for is something like:

if (!web3Modal.willToggleOpenOnConnect) {
       web3Modal.connect()
  } else {
      // do nothing because we do not want modal to appear
   }

I specifically do not want to call connect inside componentDidMount if the modal will open - when cachedProvider is true, sometimes the modal still opens.

Thank you again for your help on this specific question.

[sawirricardo]

@Schwartz10 How did you end up doing it? I am facing this too right now

[xzilja]

With stable version 2.0.0 of Web3Modal now released, we are officially dropping support for version 1.x Due to this this issue/pr was marked for closing. It is highly recommended to upgrade as 2.x will be receiving further updates that will enable functionality for some of our newer sdks like auth and push as well as support for WalletConnect v2 (See this post about WalletConnect v1 being deprecated https://medium.com/walletconnect/walletconnect-v1-0-sunset-notice-and-migration-schedule-8af9d3720d2e)

If you need to continue using Web3Modal 1.x and require this feature/fix implemented, we suggest adding it via forking V1 branch.