Simple ways to connect your React app to MetaMask

Why MetaMask

MetaMask was created to meet the needs of Ethereum-based websites. It handles account management and connects the user to the blockchain.

Install the Metamask browser extension from here. Once MetaMask is installed and running (make sure you back up your Secret Recovery Phrase)

App overview

In this example we will create a simple component in React with a “Connect to Wallet” button which on click will interact with our Metamask wallet to retrieve wallet address and user account balance.

Return a button with the connectWallet function as the onClick handler

Ethereum Provider

MetaMask injects a global API into websites visited by its users at window.ethereum. This API allows websites to request users' Ethereum accounts, read data from blockchains the user is connected to. The presence of the provider object indicates an Ethereum user.

We will use window.ethereum object using the following steps:

• Detect the Ethereum provider (window.ethereum)
• Detect which Ethereum network the user is connected to
• Get the user’s Ethereum account and account balance

First we add a check to see if Metamask is installed, if yes then we request the account address.

The eth_requestAccounts is an array of a single, hexadecimal Ethereum address string. The request causes a MetaMask popup to appear which will trigger the user to login to their MetaMask wallet if no account is connected to the app or site address… If the MetaMask wallet is already connected to the app, then it will not alert you and just grab the account that is currently selected.

If ethereum object is found we connect and retrieve user account address

eth_getBalance

This returns the balance of the account of given address. So I have added a function getAccountBalance which uses the eth_getBalance to retrieve the balance of current user account. We will call this function after we get our current user account.

After this our application should be able to display the current user account address and balance amount for that account.

After clicking on the connect wallet button successfully connected to MetaMask

Connect wallet using ethers.js

The ethers.js is a compact library for interacting with the Ethereum Blockchain and its ecosystem. For more information read the documentation here

You can add ethers in your React app using the command below and import it to your component.

npm install --save ethers

• A Provider (in ethers) is a class which provides an abstraction for a connection to the Ethereum Network. It provides read-only access to the Blockchain and its status.
• A Web3Provider wraps a standard Web3 provider, which is what MetaMask injects as window.ethereum into each page
• MetaMask requires requesting permission to connect users accounts:

await provider.send(“eth_requestAccounts”, []);

Get user balance and format ethers

Added functionality for getting the account balance in useEffect which will change if the current user account changes

1. provider.getBalance( address [ , blockTag = latest ] ) ⇒Promise< BigNumber>

Returns the balance of address as of the blockTag block height.

2. ethers.utils.formatEther( value ) ⇒ string

Ether.js provides a utility for formating Ether value which I have used to format our account balance.

Succesfully connected wallet using ether.js

Conclusion

That’s it for now! In this simple way we can connect MetaMask with your decentralized application. For convenience purposes here is the full open source link to this project on GitHub

If you have any questions, please feel free to contact me via LinkedIn

Happy coding!