[Feature]: Pre-selection of network on WalletConnect session request

[tfalencar]

Is your request related to a problem?

With WalletConnect the Dapp tells the wallet which network to connect to on establishing the connection.

Currently, when onboard library is configured, even if chainId of 1 is not even specified, a walletconnect session request is sent with chainId of '1' (Ethereum mainnet) instead of whatever is specified in the "chains" array. The problem with this approach is that then yet another request needs to be sent for the user to authorise "switching networks", which is quite bad UX. Modern / good mobile wallets allows simultaneous connections of different dapps to multiple networks at the same time, by keeping track of which dapp is connected to which chainId. The widespread "metamask standard" is bad even for browsers: imagine having 5 dapps in 5 tabs, and having to switch networks every-time a tab in the browser is switched - makes no sense at all, so it is good that walletconnect doesn't follow the metamask approach and we should allow this.

Feature Description

As a user from the onboard library, I'd like to specify the networks my dapp supports like this:

const onboard = Onboard({
wallets: [walletConnect],
chains: [
{
id: '0xA',
token: 'ETH',
label: 'Optimism',
rpcUrl: '....'
}
]}
});

And have the walletconnect session request dialog on the mobile wallet side (iOS or Android) to already make the request to connect to the proper network. One solution for when there is support for multiple networks, is for Onboard to send the walletconnect session request with the first item in the array, as the "default" network for the request.

Alternative Solutions

Here's another dapp describing a similar issue: gnosis/cowswap#1973

Anything else?

Screenshot of the desired result on the mobile wallet side (as example, rainbow wallet was used):

[lnbc1QWFyb24]

Just did some digging in to this and I believe that we can set a chainId when connecting the session by changing this line here to : this.connector.createSession({chainId: parseInt(chains[0].id, 16)}) and that would connect to the first chain in the chains array passed in on init. We will need to check what WalletConnect does on that call if the chain is not supported by the wallet and handle that accordingly.

[tfalencar]

I'm doing a bit of guessing here, but I think what happens if the wallet doesn't support said network will be wallet-specific. What I would do is inform the user about this and potentially reject the connection from the wallet side.

[lnbc1QWFyb24]

Yeah that would make sense. We'll let you know once we have some progress on this.

[mahmud-bn]

@tfalencar
Thanks for bringing this up. The associated PR has been merged and released with the latest version of @web3-onboard/walletconnect - 2.0.4

[ArshiaDhiman]

Having issues with WalletConnect not connecting to the first ChainId specified. I upgraded WalletConnect module and used this

const wallet_connect = walletConnectModule({ connectFirstChainId: true });

Is there anything I am missing to fix the issue of providing the correct chain when connecting?

Thanks 😄

[lnbc1QWFyb24]

@mahmud-bn could you take a look at this ☝️

[ArshiaDhiman]

Thanks, just thought I would specify that I am using @web3-onboard/react.
I still get a message on the screen asking to switch networks without walletconnect connecting to the specified chain.
Thanks a lot 😃
This is the versions I'm using
"@web3-onboard/gnosis": "^2.0.5", "@web3-onboard/injected-wallets": "^2.0.7", "@web3-onboard/ledger": "^2.1.4", "@web3-onboard/react": "^2.1.7", "@web3-onboard/walletconnect": "^2.0.5"

[mahmud-bn]

Hi @ArshiaDhiman,

I'm afraid I've not been able to successfully fully replicate the issue you described above.

Do you mind sharing your web3Onboard init setup and perhaps your react framework so I can decipher what the issue is?

Thanks