Show switch network modal on sign in by default when user is on unrecognized network

[GriffGreen]

I went to donate to the matching pool and went to click the sign in button at the top... my metamask was connected to zk sync and i got a really weird screen

I would have liked it to ask me to connect to a different network...

[divine-comedian]

When the user tries to connect with an unrecognized network we show them a default modal from web3modal, like the one pictured above. Usually the user needs to click the button that has the chainId on it, but this may not be intuitive enough for them to know where to click.

We do automatically show a clear switch network modal if they are already signed in and switch to an unrecognized network but it can be clicked out of and the user might be lost afterwards.

When the user is connected to the wrong network they can click CONNECT WALLET -> sign in splash page -> sign in with Ethereum -> we should try to show them this modal instead, if they are connected to an unknown network:

OR this one:

We should try to use either of those views and AVOID showing the web3modal view that Griff posted above, since it is pretty unhelpful for the sign in process.

[MohammadPCh]

Thanks @GriffGreen @divine-comedian. I've made some improvements. Can you check this link and confirm if the result is as expected? https://giveth-dapps-v2-git-fix-unsupported-network-modal-givethio.vercel.app/

[divine-comedian]

Tested it out, looks good to me! Let's carry on with bringing this to staging

[MohammadPCh]

It's on the staging now

[maryjaf]

• [ ] 1- The switch network option is removed in the below menu @MohammadPCh

STG:

PROD:

[maryjaf]

• [ ] 2-
• On stg my user is signed and my network is Gnosis
• I change my network to Op mainnet
• As you can see in below screen record, the Switch Network modal is shown but my user is signed out

https://github.com/Giveth/giveth-dapps-v2/assets/111529185/9450c064-3976-43f0-b25a-a86f93213faf