DApp development with ethers.js

The ethers.js library is an alternative to both web3.js and EthereumJS and is designed to make it easier to interact with Ethereum Blockchain. It aims to be highly maintained, flexible, complete and compact library to interact with Ethereum Blockchain. Currently, the codebase of ethers.js looks more structured and maintained as compared to web3.js.

In this article, we will learn how to write a DApp using ethers.js. It will be followed by more advanced articles related to ethers.js.

In this article, we will create a simple EthereumBank. In this EthereumBank the users can perform the following actions-:

1. Deposit ethers
2. Withdraw their ethers
3. Check their account balance

This post is divided into the following 4 sections-:

1. Setting up the development environment
2. Developing the Smart Contract
3. Deploying the smart contract to locally running test node(ganache)
4. Interacting with the contract using ethers.js and nodejs

1. Setting up the development environment

The setup instructions are tested on Ubuntu 16.04 LTS. But they should work fine for macOS as well.

Open a new terminal.

> sudo apt-get update
> curl -sL https://deb.nodesource.com/setup_8.x -o nodesource_setup.sh
> sudo bash nodesource_setup.sh
> sudo apt-get install nodejs
> npm install -g ganache-cli
> npm install -g solc@0.5.7
> ganache-cli

This will install nodejs, solcjs , ganache-cli and will start ganache-cli on port 8545.

DO NOT CLOSE THE ABOVE TERMINAL.

Open a new terminal and perform these steps

> cd ~
> mkdir -p tutorial/ethers/01
> cd tutorial/ethers/01
> npm init
> npm install ethers fs --save

The above commands will do the following-:

1. Create a new directory tutorial/ethers/01. From now we will call this directory our working directory
2. Initialize the nodejs project inside our working directory
3. Install ethers.js and fs node packages

2. Developing the Smart Contract

Now create EthereumBank.sol file in the working directory with the below contents.

EthereumBank contract allows users to deposit and withdraw ethers. It also provides a function to check the balance of a user. Please read inline comments.

3. Deploying the smart contract to the local node

To deploy EthereumBank smart contract we will have to follow these steps-:

1. Compile the contract
2. Deploy the contract on the local node

Now let’s compile our contract. Follow the commands below to compile our contract. Run these commands inside the working directory.

> solcjs --bin --abi EthereumBank.sol

The above command will compile your EthereumBank contract and the compiler will output 2 files. Let’s have a look at them-:

1. EthereumBank_sol_EthereumBank.bin- This is the compiled byte code of your contract and will be deployed to the blockchain.
2. EthereumBank_sol_EthereumBank.abi- This file contains the template of the contract. It is required whenever you want to interact with the deployed contract

Now let’s deploy our compiled contract on the blockchain, in our case local ganache node. Before running the next steps please ensure that a ganache instance is running in your terminal.

Now go to your working directory and create index.js file with the below contents.

This will initialize the network provider to connect to the local node. We are using JsonRpcProvider to achieve that. Now we need to add the compiled bytecode and abi files.

Now we have provider, bytecode and abi files for the contract. The next step will be to initialize the signer/wallet which will be used to deploy the contract. Once we have the signer we will initialize the contract factory and will deploy the contract.

Please, create a new method deploy() within your index.js file with the following contents.

Now let’s stop writing code and execute what we have written so far. Please execute below commands in the terminal inside your working directory.

> node index.js
> 0x0C731D36AFE0B16aFe9F3D01C65E761C05047C7D

Running above command will print an Ethereum address in the console. This is the address of the contract which we just deployed. So finally we are able to deploy our EthereumBank contract using ethers.js.

4. Interacting with the contract

Now we will interact with our deployed contract. As we know our contract has the following 3 methods-:

1. deposit
2. withdraw
3. getUserBalance

We will call each one of these methods using ethers.js. Please create interactWithBank method within your index.js file with the following contents.

The code within the interactWithBank method does the following-:

1. Deploy the contract (line- 28)
2. Connects to the deployed contract using contract address, abi and current provider (line- 30)
3. Setup the wallet using which call to the smart contract will be made(line- 31)
4. Connects the wallet to the contract(line- 33)
5. Fetches balance of the user/address from the contract. Please note that here we have not provided any user/address to the method. The address associated with the wallet set in the previous step will be considered and balance of that particular user/address will be returned(line- 35)

Now let’s test our code by running the below mentioned command in the terminal inside our working directory.

> node index.js
> 0

Running above command will return 0 as the user has not deposited any ethers in the bank so far. Now let’s deposit some ethers in the bank for the user. Please update the interactWithBank with the below contents.

The additional code in interactWithBank method does the following-:

1. Set up an additional parameter for the contract which specifies the amount of ethers to send with the call. The user wants to deposit 1 ETHER and hence we have set the value to be 1.0 ETH. The contract can accept more additional parameters which include- gasLimit, gasPrice, nonce, chainId.(line- 39–41)
2. Sends the transaction to deposit ethers by calling the deposit method of the contract. It will return the entire transaction object, you can print it out to see what is there in that object(line- 42)
3. Prints the hash of the transaction(line- 43)
4. Fetches the balance of user/address(line- 45)
5. Prints the balance on console(line- 46)

Now let’s test our code by running below mentioned command in the terminal inside our working directory.

> node index.js
> 0
> 0xb2a7f5b927f8adbed371c876765410c2d04dcf8bf56e21b38c6f82427a3ff959
> 1.0

Running the above mentioned command will print the following on the console-:

1. Initial balance of the user which is 0
2. The hash of the deposit transaction
3. The new balance of the user which is 1.0

Now let’s withdraw some ethers from the bank for the user. Please update the interactWithBank with the below contents.

The additional code in interactWithBank method does the following-:

1. Sends the transaction to withdraw ethers by calling the withdraw method of the contract. In this method, we are passing a parameter which tells the bank how much ethers to withdraw. In our case, it is 0.9 ETH. It will return the entire transaction object, you can print it out to see what is there in that object(line- 48)
2. Prints the hash of the transaction(line- 49)
3. Fetches the balance of user/address(line- 51)
4. Prints the balance on console(line- 52)

Now let’s test our code by running below mentioned command in the terminal inside our working directory.

> node index.js
> 0
> 0x8481ea0adcf7fb97ce16cd0918f3c3dedc88de0b8349c5400d78d0f9d47a93cf
> 1.0
> 0xbe62055c99d186a0b6e27cc6ac0271ffb46ebafac5a643c1605bb59485e8551b
> 0.1

Running the above mentioned command will print the following on the console-:

1. Initial balance of the user which is 0
2. The hash of the deposit transaction
3. The new balance of the user which is 1.0
4. The hash of the withdraw transaction
5. The new balance of the user which is 0.1

Thanks for reading the article. I hope it was useful for you.

If you are looking out for Blockchain consulting or development services then reach out to us at info@ginete.in or drop your query on our website.