Getting Started with MetaMask Provider API and React

Let’s build a simple React app to integrate with the MetaMask browser extension.

Hey! In this article, we will build a simple React app that connects to the MetaMask browser extension. Then we’ll display the account avatar and balance. All MetaMask functionalities are available through an injected global property: window.ethereum

If you prefer to read the official MetaMask docs, you can find it here.

Alright, let’s dig in!

Connect to MetaMask

The first thing you usually need to do is to connect your MetaMask wallet to your app. Please keep in your mind that you can connect multiple wallets to your app while requesting permission:

Although you can grab multiple connected wallets, I’m going to only grab the first wallet from the array returned from MetaMask ( accounts[0] ) because the first item will be the active one.

Okay, back to business… This is done by requesting the accounts list from MetaMask:

async function handleConnect() {

  // Check to…