BLOCKCHAIN
Connecting DApp to Metamask Wallet and Using of Ethers Library
A complete beginner guide to connect your dapp with the metamask wallet and using ethers.js library in 2021
This article will walk you through connecting your decentralized application (DApp) to the metamask wallet and using the ethers.js library after several break changes to metamask provider API were made as of January 2021.
What motivated me to write this article was, once I was facing the same issue of connecting my simple dapp to metamask. I searched through the web but, some solutions were outdated, some were incomplete. So I tried my best to put together information from metamask and ethers.js documentation and other different forums.
Firstly, let us discuss few terminologies that we have used.
What is DApp?
DApp’s are decentralized applications built on a decentralized network that combines a smart contract running on the decentralized peer-to-peer network. Unlike other applications whose backend code is running on the centralized server.
DApp consists of frontend code (user interface), smart contracts running on the blockchain platform (peer-to-peer network) and backend code to interact with the smart contracts.
What is Metamask?
Metamask is one of the web browser-based Ethereum wallets created to meet the needs of secure and usable Ethereum-based websites. It allows users to manage accounts and their keys in different ways, also comes pre-loaded with a fast connection to Ethereum blockchain and several test networks. Read more about metamask here.
What is Ethers.JS?
The ethers.js is a javascript library that aims to be a complete and compact library for interacting with the Ethereum Blockchain and its ecosystem. Both frontend and backend code can use this library. Read more about ethers.js and its documentation here.
In January of 2021, Metamask made several break changes to their provider API. One of the main changes was the removal of the injected window.web3 into web pages and replacing it by the window.ethereum. Even many of the legacy provider API methods, properties and events were deprecated or replaced.
Check here for more of the metamask break changes and its provider migration guide.
You can also check in the below article why were these changes made.
In most parts, we will be using the metamask injected window.ethereum API and in few cases will use ethers.js library.
So, let us get started with the tutorial.
1. Check metamask extension installed
Here, we are checking if the metamask extension is installed in the web browser. If installed, it will print metamask is installed, or else it will alert the user to install the metamask extension.
2. Check metamask connected with the network
Now let us check metamask provider can make an RPC request to the current ethereum chain.
Here, we are checking that metamask is connected with the available ethereum network using the isMetamaskConnected function. If connected, it will print the network id and chain id by calling the getNetworkId and getChainId functions. It will also call the connectToAccount() function. Else if disconnected, the user must connect with the available network to make an RPC request.
Now you will be thinking about the connectToAccount() function. In next section I will talk about it.
3. Connect to metamask account
After successfully checking that the metamask is installed and connected, now we will connect our dapp with the metamask wallet account.
In this section, I will talk about the connectToAccount() function as said earlier.
Here, we are creating a function connectToAccount that requests a metamask account to connect with our dapp. If you have multiple accounts in the metamask wallet, you can choose which account to connect or connect with all accounts at once.
This function makes it reusable in other parts of the code rather than rewriting it. We are already calling this function when checking metamask is connected to the network. We will see the implementation of this function in other parts of the code also.
4. Get account address and balance
Once our dapp is connected successfully with the account, we will get the account address and balance.
- Get account address
Here, we create a function getAccount that returns the account address of one of the connected account(s) to our dapp.
This function makes it reusable in other parts of the code rather than rewriting it.
- Get account balance
Here, we create a function getBalance to get the balance of the connected metamask account. It checks the return value of the getAccount() function is not empty, then only returns its balance in ETH, or else it returns a message connect to account first. Here, we retrieve the balance using ethers.js library.
This is the only function in this tutorial where we are using the ethers.js library but, there are many different use cases where you can utilize this library. This function makes it reusable in other parts of the code rather than rewriting it.
5. Create a connect button in DApp
Here, we are implementing the logic behind the connect button. When clicked, it requests the metamask account to connect with the dapp and then displays the account address and balance.
Note: We are already requesting metamask to connect the account with our dapp when loading the web page. But, if our dapp is disconnected from the metamask account, then this button reconnects the dapp with the metamask account.
This is how our dapp looks after connecting with the metamask wallet account.
Code repository
The complete source code has been upload to my GitHub repository. Check it out or clone from here 👇.
Summary
So far, we have discussed how to connect our dapp with the metamask wallet account and display basic information such as chainId, networkId, account address and balance. Before we connect with the account, we have to follow few steps, such as checking metamask extension is installed and connected with the available ethereum network. Once these conditions get fulfilled, then we request metamask to connect our dapp with the account.
The End!
Thank you for reading!
I hope you enjoyed and found this article helpful and informative 📝. If yes, give it a 👏, share it and tweet it 💬 to reach the broader community.
Comment down for any suggestions or improvements.
Follow Jugal Kamdar on Github, LinkedIn, Twitter and Medium to check out for upcoming articles.
