Metamask: Disconnected button state doesn’t update when disconnecting, so Metamask doesn’t pop-up when trying to connect back again

Metamask Disconnect Issue: Unresolved State Management in React App

Metamask: Disconnected button state doesn't update when disconnecting, so Metamask doesn't pop-up when trying to connect back again

As a web application built on top of the NFT Smart Contract, our team is eager to provide an exceptional user experience. However, one crucial aspect that has been causing frustration – the disconnect issue with Metamask’s state management.

When users press the “Disconnect” button, they expect their Metamask wallet to automatically reconnect and restore its previous connection settings. Unfortunately, this has not always been the case. This article aims to explain the problem and provide a solution to resolve it.

The Issue: Disconnected Button State Not Updating

Upon investigation, we found that when users press the “Disconnect” button, the state of their Metamask wallet does not automatically reset to its initial state. As a result, attempting to reconnect again fails, with no visible pop-up notification or error message indicating whether the connection was successful.

The Context: NFT Smart Contract and React App

Our application relies on a robust state management system using Redux for managing global state across our components. However, we have encountered an issue related to how Metamask interacts with our store when disconnecting from the wallet.

The Issue in More Detail

Here’s what happens when users try to reconnect:

Upon pressing “Disconnect”, the user is redirected to the Metamask website.

The Metamask Wallet App starts connecting, but due to an error, it remains disconnected from our application.

Our React app attempts to disconnect again, but due to the state not being properly reset, it fails to reconnect.

The Solution: Updating Metamask Connection Status

To resolve this issue, we recommend the following steps:

Step 1: Update Metamask Wallet App

We suggest updating the Metamask Wallet App to include a proper state management system that resets the wallet when disconnecting. This can be achieved by implementing Redux or other state management libraries.

Alternatively, if you are using a custom solution for managing Metamask states, ensure it is properly handled and updates the wallet state correctly.

Step 2: Update React App

To make this change in the React app, we recommend the following:

Update the disconnect function to use the proper state management system from step 1. This will allow our React app to automatically reset the Metamask wallet’s state when disconnecting.

Ensure that any error handling and logic related to reconnecting are updated accordingly.

Example Code: Updated Disconnect Functionality

Here is an example of how you can update your disconnect function in a separate file:


import { connect } from 'react-redux';

import { disconnect } from './actions/metamask';


const mapStateToProps = state => {

  return {};

};


const mapDispatchToProps = dispatch => {

  return { dispatch };

};


export default connect(mapStateToProps, mapDispatchToProps)(MetamaskDisconnect);

In this updated disconnect function:

The dispatch argument is used to call the corresponding action from your Redux store.

We also pass an empty object as a state parameter, which should be removed in the future.

Conclusion

To resolve the disconnect issue with Metamask’s state management in our React app, we recommend updating both the Metamask Wallet App and our React application to properly handle wallet state updates. By following these steps, we can ensure that users of our NFT Smart Contract application receive a seamless user experience when disconnecting from their Metamask wallets.

References

For more information on Redux, Metamask’s API documentation, and connecting your app with the Wallet App, please refer to the official sources: