Fix/injected connector

[karczuRF]

Summary

Fixes #624 #683 #699

Bug Description
Activation of the Injected Connector (which is used with MetaMask and Coinbase wallets) results in displaying pop-ups from both wallets at the same time when the user has both extensions installed. Activation of the Caoinbase wallet doesn't cause the problem.

More details can be found as the description of solved issues mentioned above.

To Test

1. Install MetaMask and Coinbase Wallet chrome extensions.

• Button shows 'connect wallet'
• Non of the wallet is connected automatically

2. Click the "Connect Wallet" button.

• If MetaMask is selected only MetaMask popup should be displayed
• If Coinbase is selected only Coinbase popup should be displayed

3. Proceed with connection process until wallet is Connected and address can be seen

• the button in upper right corner and eg bridge button works as expected and open wallet list to be selected
  

• connect manually with unsupported network (eg Kovan) - switching from unsupported to supported network (eg. Mainnet) works as expected

• try any transaction, like swap - works as expected and correct wallet popup is shown

4. Click the "Disconnect Wallet" button and connect with different one.

• only one popup appears and allows for connection
• switching networks and transactions flow work as expected
• important! addresses are different after wallet switching and matches to the wallets addresses appropriately
  
  

5. Disconnect wallet manually. This HAS TO BE DONE MANUALLY and it's not the same as "Disconnect wallet" on our app (this is for purpose and it's not the bug!). To disconnect manually use Metamask and Coinbase wallet app as shown below.
   Try connect to the wallet again and Reject transaction.
   
   

• Error modal should be shown
  

• "Try again" button works as expected and allow to try again

• Closing modal and trying to activate another wallet works as expected

6. Any "randomly" usage the app and wallets to test edge cases will be appreciated :)

[netlify]

✅ Deploy Preview for tender-kalam-456245 ready!

Name	Link
🔨 Latest commit	d94a27b
🔍 Latest deploy log	https://app.netlify.com/sites/tender-kalam-456245/deploys/623cf4c20e71dd0008d36d7f
😎 Deploy Preview	https://deploy-preview-817--tender-kalam-456245.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[niemam29]

Still there are some problems - sometimes when user wants to connect coinbase wallet both of them are trying to connect and two popups are displayed. It occurs pretty often - either on the first try or as in the record below after connecting and disconnecting wallets. @karczuRF

screen-capture.2.mp4

[karczuRF]

Still there are some problems - sometimes when user wants to connect coinbase wallet both of them are trying to connect and two popups are displayed. It occurs pretty often - either on the first try or as in the record below after connecting and disconnecting wallets. @karczuRF

That's interesting, because I wasn't able to reproduce this. I can't see the problem. I'll wait then until someone else can confirm what you showed above.

[niemam29]

After computer restart there is no such bug - that is propably non reproductive error. For me looks good now, but would be perfect if some other QA take a deep look at this @MilanVojnovic95 @kingalg

[MilanVojnovic95]

Found a new bug.
I installed the Conbase wallet and connected to Swapr for the first time but after that it is not possible to connect the Metamask weallet whenever I try to connect to the Metamask wallet I get the message 'Error connecting.'
And when I click on 'Try Again' the same situation happens.
I do not receive any notifications on the Metamask that I should accept the connection.
Connecting to Coinbase Wallet is successful.
And there is no problem with calling a wallet that is selected in the 'Connect wallet' option for me.

@karczuRF
After installing Coinbase I went straight to the Swapr (without Metamask or some other wallet already connected) to connect and
after successful connection I was trying to switch networks and it was all ok.
Then I disconnected Coinbase wallet and tried to connect with Metamask and then
I get that error mentioned before, so I tried with hard refresh but that made no difference.

For this testing I was using Brave browser.

[karczuRF]

For this testing I was using Brave browser.

@MilanVojnovic95 thanks for testing! As I thought the problem you've found is because of Brave browser. Brave wallet "overrides" MetaMask and error occures, because action has to be done with Brave wallet, please see scr below.

For Brave wallet the issue is already created and I'll handle that asap: #649

Until Brave wallet is implemented it's possible to use Brave browser with MetaMask by disabling Brave wallet as default option.

I'll add temporary fix for that problem although I believe to solve all wallet related problems Brave and Tally wallets need to be implemented as well as package update, but it's another issue.

[adamazad]

Hey @karczuRF, what is the status of this PR?

[karczuRF]

Hey @karczuRF, what is the status of this PR?

It's suspended, because of two things:

1. I've been asking but didn't get the answer which version of web3-react package should be used. At the moment we use v6, but it's not gonna be maintained anymore and it's suggested by the author moving to v8. The thing is v8 is described as beta version, that's why I have doubts and would be good if someone could approve upgrade. Anyway I would do that, because a lot of issues I'm trying to fix with this PR are already solved and also Brave problems should be fixed with package upgrade.
2. Still waiting for Tally wallet to be merged. As long as it's not, I can't fully test and fix problems caused by multiple wallets, which was discussed under Tally PR - Add Tally wallet #652

[karczuRF]

Current status changed to draft, because as it was discussed to best solution is to upgrade web3-react. Also no need to wait for Tally Wallet merge now.

[karczuRF]

This will be closed with #1330.