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

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.

[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