Check if MetaMask is Installed

Before we can access the Ethereum blockchain in our web application, we need to implement two additional features. Firstly, we need to check if a user has installed MetaMask or another wallet plug-in. Otherwise, we won’t be able to send transactions or read blockchain data. If a user doesn't have a wallet plug-in, our application will display a warning prompting the user to install MetaMask first.

Secondly, to access the Ethereum network, we need to connect our application to MetaMask. During the connection process, MetaMask will ask a user if they want to allow our application to access their account in MetaMask. We’ve already seen how the process works when we tried to use ENS in the first chapter, but now we'll see how to implement this.

Since both of these features will be required for any web application using the Ethereum network, we'll dedicate this and the next lesson to implementing them. Once they're ready, we'll be able to use the Auction smart contract from the React application.

Implementing the check

If the MetaMask plug-in is installed, it will add a new field named ethereum to the browser’s global window object. The window object is accessible to all the JavaScript code running in the browser. To check if a wallet plug-in is installed, we need to check that the window.ethereum field is defined.

We'll put this logic in the isWalletPluginInstalled helper function, which will return true if a wallet plug-in is installed or false otherwise: