Not starting with status "connecting" when refreshing page and MetaMask has a pending request to connect

First, I want to say how easy it was to plug and play metamask-react. Excellent library to hide the implementation details of interacting with MetaMask. Thank you! 🙌

Summary

When MetaMask has a pending request to connect and the user refreshes the page, metamask-react doesn’t start with “connecting” status but with “notConnected”, and calling connect() fails.

Detailed steps

Testing different edge cases, I came up with one that I’m not sure that it’s accounted for. For context, I’m making a demo project to learn with a test token called “KikiriCoin” (repo). Given a page that offers the user a button “Connect” that, when clicked, executes the connect function of useMetaMask:

Screenshot showing web interface with connect button

1. As a user, open the web page and click Connect. Don’t perform any action on the MetaMask popup, leave the request unresolved.

Screenshot of meta mask connect request

1. Refresh the web page. The MetaMask extension continues having the unresolved request.

Expected (ideally): the status given by useMetaMask is connecting. Actual: the status given by useMetaMask is notConnected.

Screenshot of web interface after refreshing

Screenshot of metamask extension icon, with its pending request

When the user clicks the “Connect” button again, an error is thrown “Request of type ‘wallet_requestPermissions’ already pending for origin http://localhost:3000. Please wait.” with code -32002. At this point, the user is blocked from connecting unless they click the MetaMask extension icon in the browser to approve/cancel the request, or restart the browser.

Screenshot of console log error

Solutions

Fortunately, though, if the user opens the MetaMask extension, accepts the connection request, and refreshes the web page, the status returned by useMetaMask will be connected and things will work seamlessly.

I’m not sure if anything can be done from code to check if there’s a pending request, in order to avoid this situation and inform the user appropriately. Ideally, we’d be able to call a function in window.ethereum to check if there was a pending request, and if that was the case, update the status to “connecting”.

If not, it isn’t the end of the world. I would just inform users to check their MetaMask extension for a pending connection request if I receive the error code -32002. Does that sound like the right approach?

[github-actions[bot]]

🎉 This issue has been resolved in version 2.1.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[guillermodlpa]

Hi @VGLoic. This is great, thanks for looking into it and proposing this solution! Like you explained in the comments, it’s a complex solution to handle this edge case that hopefully would be addressed by MetaMask directly. I’ll spend some time later today manually verifying those changes in my test application, and I’ll confirm it’s all good then.

Thanks for suggesting to push the changes in my branch! No worries, I’ll find another way to contribute 😃 Love this project!