{"id":404,"date":"2022-03-21T17:05:55","date_gmt":"2022-03-21T07:05:55","guid":{"rendered":"https:\/\/programmablewealth.com\/?p=404"},"modified":"2022-03-21T17:05:59","modified_gmt":"2022-03-21T07:05:59","slug":"ethersjs-react-tutorial","status":"publish","type":"post","link":"http:\/\/10.0.0.14:32768\/ethersjs-react-tutorial\/","title":{"rendered":"How to Get Started Using Ethers.js With React"},"content":{"rendered":"\n<p><a href=\"https:\/\/reactjs.org\/\" data-type=\"URL\" data-id=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">React<\/a> is a front-end Javascript library that is widely adopted for building web applications.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.ethers.io\/v5\/\" data-type=\"URL\" data-id=\"https:\/\/docs.ethers.io\/v5\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ethers.js<\/a> is a web 3.0 library that can be used for interacting with smart contracts on the Ethereum blockchain and other Ethereum Virtual Machine (EVM) compatible blockchains.<\/p>\n\n\n\n<p>In this tutorial, I will cover how to use Ethers.js with React to build a front-end web application that can:<\/p>\n\n\n\n<ol><li>Connect to a Metamask wallet in the browser<\/li><li>Read the balance of the wallet<\/li><li>Access the current block of the Ethereum network<\/li><li>Listen to updates to the block of the Ethereum network<\/li><li>Read data from a smart contract<\/li><li>Make a write transaction to a smart contract via Metamask<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a React Project with Create React App<\/h2>\n\n\n\n<p>First, we will create a new React project using the <a href=\"https:\/\/github.com\/facebook\/create-react-app\" data-type=\"URL\" data-id=\"https:\/\/github.com\/facebook\/create-react-app\" target=\"_blank\" rel=\"noreferrer noopener\">create-react-app<\/a> utility.<\/p>\n\n\n\n<p>If you don&#8217;t have the create-react-app utility on your computer, you can download it via npm with the following command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g create-react-app<\/code><\/pre>\n\n\n\n<p>We will create a new React project with the name react-ethersjs with the following command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app react-ethersjs<\/code><\/pre>\n\n\n\n<p>Once the project has been created, change the directory into your project and then you can test the app has been successfully created with the command<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>yarn start<\/code><\/pre>\n\n\n\n<p>This should display your web application in a new browser tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"875\" height=\"740\" src=\"http:\/\/10.0.0.14:32768\/wp-content\/uploads\/2022\/03\/image-1.png\" alt=\"\" class=\"wp-image-419\" srcset=\"http:\/\/10.0.0.14:32768\/wp-content\/uploads\/2022\/03\/image-1.png 875w, http:\/\/10.0.0.14:32768\/wp-content\/uploads\/2022\/03\/image-1-300x254.png 300w, http:\/\/10.0.0.14:32768\/wp-content\/uploads\/2022\/03\/image-1-768x650.png 768w\" sizes=\"(max-width: 875px) 100vw, 875px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Install Ethers.js<\/h2>\n\n\n\n<p>Ethers.js is simple to install.<\/p>\n\n\n\n<p>To install using yarn inside the root directory of your React project, run the command<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>yarn add ethers<\/code><\/pre>\n\n\n\n<p>Alternatively, you can install Ethers.js with npm with the following command<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install --save ethers<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">How to Connect to Metamask using Ethers.js<\/h2>\n\n\n\n<p>Metamask is a popular cryptocurrency wallet that is used in browsers as a browser extension or add-on.<\/p>\n\n\n\n<p>It has the ability to interact with decentralized applications (DApps).<\/p>\n\n\n\n<p>In order to connect a Metamask wallet to a React app, we will first create a new React component for connecting Metamask to the React app with Ethers.js.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/programmablewealth\/5d1a709c42ab7a441729961b48822fa8.js\"><\/script><\/p>\n\n\n<p>We will then need to update index.js to replace the reference to App with the Metamask component.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/programmablewealth\/11cbd9d5ba4b874a6112340ccbfed0e8.js\"><\/script><\/p>\n\n\n<p>To use the Ethers.js library in your React project, you will need to add the following import statement above your class definition.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { ethers } from \"ethers\";<\/code><\/pre>\n\n\n\n<p>Then we will create a new function that uses the Ethers.js library to connect to a users&#8217; Metamask wallet within the web browser to the React app.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/programmablewealth\/a2c3512ef128682c29f9f130f7b8245c.js\"><\/script><\/p>\n\n\n<p>Finally, we will add a button to the user interface with the label &#8220;Connect to Metamask&#8221;, that we can use to connect to the user&#8217;s Metamask wallet by creating a Web3Provider using Ethers.js, then getting the connected account address using the eth_requestAccounts method.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/programmablewealth\/fcb1d7aab07f7d66992aa83432741c4d.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">How to Get the ETH Balance of a Metamask Account Using Ethers.js<\/h2>\n\n\n\n<p>To get the ETH balance of a Metamask account using Ethers.js, you can use the getBalance function on the Web3Provider passing the wallet address as a parameter.<\/p>\n\n\n\n<p>The function will return a BigNumber, to display this in ETH units in the user interface, use the utility function formatEther.<\/p>\n\n\n\n<p>I have updated the Metamask class created in the previous section to retrieve the users&#8217; Ethereum balance from their Metamask account using Ethers.js and then display the formatted balance in ETH units in the user interface.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/programmablewealth\/11337bfcb4f7247359de93e738112319.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">How to Get the Current Ethereum Block using Ethers.js<\/h2>\n\n\n\n<p>Ethers.js can be used to get the current Ethereum block number using the getBlockNumber function on the Web3Provider.<\/p>\n\n\n\n<p>You can also listen to new updates to the Ethereum block number using the on function on the Web3Provider in Ethers.js<\/p>\n\n\n\n<p>I have updated the Metamask class to display the current block number and listen to changes in the block number to be updated within the user interface.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/programmablewealth\/51927f8c942a908c9b438f5554531834.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">How to Read Data from Smart Contracts using Ethers.js<\/h2>\n\n\n\n<p>Ethers.js can be used to read data from smart contracts.<\/p>\n\n\n\n<p>Before you will be able to do this, you will need two things.<\/p>\n\n\n\n<ul><li>The smart contract ABI<\/li><li>The smart contract address<\/li><\/ul>\n\n\n\n<p>The term ABI stands for Application Binary Interface (ABI). This is a JSON file that describes the functions and events that are available on a smart contract.<\/p>\n\n\n\n<p>For each function, the ABI describes:<\/p>\n\n\n\n<ul><li>The name of the function<\/li><li>The n<span style=\"color: initial;\">ames and data types of each of the parameter<\/span>s<\/li><li>The return value(s) names and data types<\/li><li>Whether the function is constant<\/li><li>Whether the function is payable<\/li><li>The state mutability of the functions <\/li><\/ul>\n\n\n\n<p>For each event, the ABI describes:<\/p>\n\n\n\n<ul><li>The name of the event<\/li><li>The n<span style=\"color: initial;\">ames and data types of each of the parameter<\/span>s<\/li><li>Whether the event is anonymous<\/li><\/ul>\n\n\n\n<p>This is an example of an Application Binary Interface (ABI) for an ERC20 token.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/programmablewealth\/a044c5973ad6ddf4f36a3cd199fabf44.js\"><\/script><\/p>\n\n\n<p>In our React application, we will be using the ABI above to load the balance of an ERC20 token residing in the users&#8217; Metamask wallet.<\/p>\n\n\n\n<p>We will use the DAI stable coin ERC20 token in our example. The contract address of DAI on the Ethereum network is 0x6B175474E89094C44Da98b954EedeAC495271d0F.<\/p>\n\n\n\n<p>See the code sample below showing how to access the users&#8217; DAI balance and display it in the user interface.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/programmablewealth\/940c652fe24d744447c35b7434ab611a.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">How to Call Writable Functions on Smart Contracts Using Ethers.js<\/h2>\n\n\n\n<p>Ethers.js can also be used within a React application to invoke write functions on a smart contract.<\/p>\n\n\n\n<p>For example, if you want to transfer a certain amount of ERC20 tokens to another wallet address, this can be achieved by calling the transfer function on the smart contract and passing the sender address and the number of token units you want to send.<\/p>\n\n\n\n<p>See the code sample below showing how to initiate a Metamask transaction to send 1 DAI as a donation.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/programmablewealth\/f4c7b93a179f8171a668d077600c35cf.js\"><\/script><\/p>","protected":false},"excerpt":{"rendered":"<p>React is a front-end Javascript library that is widely adopted for building web applications. Ethers.js is a web 3.0 library that can be used for interacting with smart contracts on<\/p>\n","protected":false},"author":1,"featured_media":468,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[9,10],"tags":[],"_links":{"self":[{"href":"http:\/\/10.0.0.14:32768\/wp-json\/wp\/v2\/posts\/404"}],"collection":[{"href":"http:\/\/10.0.0.14:32768\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/10.0.0.14:32768\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32768\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32768\/wp-json\/wp\/v2\/comments?post=404"}],"version-history":[{"count":5,"href":"http:\/\/10.0.0.14:32768\/wp-json\/wp\/v2\/posts\/404\/revisions"}],"predecessor-version":[{"id":483,"href":"http:\/\/10.0.0.14:32768\/wp-json\/wp\/v2\/posts\/404\/revisions\/483"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32768\/wp-json\/wp\/v2\/media\/468"}],"wp:attachment":[{"href":"http:\/\/10.0.0.14:32768\/wp-json\/wp\/v2\/media?parent=404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/10.0.0.14:32768\/wp-json\/wp\/v2\/categories?post=404"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/10.0.0.14:32768\/wp-json\/wp\/v2\/tags?post=404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}