Accelerating DApp Development with Ethers.js

Today's decentralized application stack often consists of a front end, smart contracts, and a framework to interact with the blockchain. Developers often use Web3.js for interaction with the Ethereum blockchain; however, Web3.js is large, its documentation needs improvement, and is difficult to maintain. Ethers.js is an alternative library that offers all the features of Web3.js in a smaller, well-tested package.

In this tutorial, we use Angular 7.X and Ethers.js to create a simple wallet application and interact with a smart contract deployed on the Ethereum blockchain.

Prerequisites

First, install node.js and Angular. You can find the instructions below:

Before we can do anything with this wallet, we must first connect it to the Ethereum blockchain. We do this using the default web3 provider by Ethers.js.

Update the ngOnInit() {} function in wallet.component.ts to the below:

ngOnInit(){this.provider = ethers.getDefaultProvider('homestead');;}

This code obtains the web3 connection provided by Metamask and makes it ready to use by Ethers.

Sending and Signing Transactions

Next, we create the ability to send a transaction with our application. Ethers.js provides the ability to edit any data within a transaction, such as gas limit and what address you are sending the transaction to. To send a transaction using the wallet, create a send transaction button that uses the sendTransaction method from Ethers.js, as well as some form fields for input on the transaction.

Inside /src/app/wallet/wallet.component.html add the code below inside the two <div>'s

We first create the transaction object, giving where the transaction is going in the to field. value denotes how much ether, in the units Wei by default, is sent to the address mentioned. We use the parseEther util provided by Ethers.js to convert from Ether to Wei. After creating the transaction object, we use our wallet to send the transaction. In this implementation, the console logs the transaction receipt.

Interacting with Smart Contracts

One of the novelties of Ethereum is the creation and use of smart contracts on the blockchain. Dapp development relies on interaction with smart contracts, and Ethers.js has a solution. With Ethers.js, you can interact with a smart contract to exchange tokens with two parties or play one of the many Dapp games.

Take for example this Sample Contract. This contract stores variables by adding it to the blockchain and can read all currently stored variables. Storing values on the Ethereum blockchain is useful for Dapp development, as the storage allows developers to reference variables for interactions such as storing signatures, or keeping track of cryptokittens up for trade. Interacting with this contract with Ethers.js, we create the ABI for it, found here. ABI stands for Application Binary Interface. This interface defines functions found at a smart contract address, and you can use to call functions of a smart contract.

Rerun the application with ng serve --open and you should have a basic, but functioning wallet application.

Next steps

In this tutorial, we created a dapp that creates a wallet, sends a transaction, and interacts with a smart contract. Using Ethers.js, we can interact with the Ethereum blockchain with ease and expand to more complex use cases. Further improvements could be to create a better design, add more wallet integrations, and a separation of concerns between the wallet and contract component. With this demo app, you can now include a wallet app by just including the wallet web component in your dapp.

Ethers.js is a powerful tool and a strong alternative to web3 for dApp development. The small compact library makes creating dApps a breeze, taking all the heavy lifting off of the developer's shoulders and making it easier to focus on the smart contract or website design. For more information on Ethers.js, checkout out the documentation. You can find the final codebase on the master branch here.

Tools for dApp development

This article will introduce you to the relevant tools required for developing a simple dApp. We will introduce tools in the following areas: Smart Contract Programming Languages Web3 Libraries Development frameworks IDEs Development blockchains Ethereum Networks Wallets (Key Stores) SaaS / Cloud Infra Data Storage Smart Contract Programming Languages Because a smart contract is deployed on the blockchain in its bytecode form, any language that comes with an EVM compiler could be used to write a