Connection requires some technical preparation that you need to guide new users through. This involves helping them use the right browser, access the right network and in the case of desktop, install MetaMask. But at the same time it doesn't create a great experience to ram this information down a user's throat as soon as they land on your dapp.
dApps are still a new phenomenon so it's important to let your users explore in their own time. Connecting is a commitment and users need to understand the value of it. Let them use all your features that don't require a connection even if they're using an unsupported browser or are on the wrong network.
Asking them to connect before they've even taken a look around is like those irritating sites that ask you to subscribe to their newsletter as soon as you land.
That doesn't mean you can't let your users know that they won't be able to connect should they choose to. Use passive UI that educates but doesn't prevent the user from taking a look around.
Our connection banner persists on a user's screen until they meet the right conditions. However it doesn't prevent the user from doing anything. It will warn a user that:
The network indicator lets a user know which network they're on (or if one is even detected) and whether that's the correct network to be on. A tooltip is available to offer further explanation. You set a required network and it will let the user know when they're not on that network and let them know to switch.
This depends on what kind of experience the user gets while being on the wrong network.
This messaging should persist and never be used in UI that disappears automatically like a Toast message.
For new users they might not even be ready to switch to a correct network. You might need to get them "Web3-ready" first. This isn't a straightforward process so your message needs to map to the user's situation. Bear in mind that users that see messages related to being on the wrong browser or not having MetaMask installed are likely to be new to the space, so will need more instruction.
If they're on a browser that doesn't support Web3 at all, e.g. any traditional mobile browser or a desktop browser like Safari that doesn't support extensions.
If they're on a desktop browser that doesn't have MetaMask installed but supports the extension
If your dapp experience is good on mobile, you may want to direct users to download and use a mobile wallet instead of going through the MetaMask set-up process
If you can detect Web3 but not the required network
These modals should help get the user ready to connect on the right network. Next up there's some stuff new users should know and experienced users should be reminded of...
Navigate the guide