Connecting and interacting via Ethers.js

In this article, we'll cover the installation of Ethers.js, use it to connect to a web3 provider and interact with a smart contract.

Ethers.js is an excellent choice for individuals who are fairly new to dApp and blockchain development due to its user-friendly nature. Its ease of use makes it highly accessible, attracting numerous emerging companies and projects. Compared to alternative libraries like web3.js, ethers.js stands out for its exceptional performance capabilities within the browser environment.

Installing Ethers.js library

npm install --save ethers

Adding required imports

This import statement makes the Ethers.js library available for use in your code:

import { ethers } from 'ethers';

Exported Contract Application Binary Interface (ABI)

The Contract Application Binary Interface (ABI) is a specification that describes the functions and events of a smart contract. Before interacting with a deployed smart contract, you need to obtain its ABI. Assuming you have the ABI saved in an abi.json file in your project directory, you can import it as follows:

import abi from "./abi.json";

Make sure to replace './abi.json' with the correct path to your ABI file.

Connecting with network

To connect your dApp with a wallet provider, you have two options: Web3Provider or JsonRpcProvider.

const provider = new ethers.providers.Web3Provider(window.ethereum);
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
//accounts return list of Your's wallet accounts

In this code, provider is created using Web3Provider and is connected to the injected Web3 provider in the browser, such as MetaMask. The eth_requestAccounts method prompts the user to connect their wallet and returns a list of the user's accounts.

Using JsonRpcProvider:

const url = 'ADD_YOUR_ETHEREUM_NODE_URL'; 
const provider = new ethers.JsonRpcProvider(url); 

Retrieving the Current Block Number

The code line below retrieves the current block number from the blockchain:

var blockNumber = provider.getBlockNumber()

In Kyoto and other EVM-blockchain networks, blocks are created sequentially and contain a set of transactions. Each block is identified by a unique block number. The block number represents the position of a block in the blockchain's history.

If you want to know more about the getBlockNumber()function, follow this link.

Connecting and interacting with smart contracts

To connect with smart contracts and run view functions use:

const contract = new ethers.Contract(contractAddress, abi, provider);
const returnedValue = await contract.functionName();
//contractAddress - address of deployed smartcontract you want to connect
//functionName - function in smartcontract that you want to call

To connect with smartcontract and execute functions use:

const signer = provider.getSigner();
const contract = new ethers.Contract(contractAddress, abi, signer);
const tx = await contract.functionName(param1, param2);
//param1, param2 - parameters in called smartcotract function

More information you can find here: https://docs.ethers.org/v5/getting-started/

or

https://www.quicknode.com/guides/ethereum-development/getting-started/connecting-to-blockchains/how-to-connect-to-ethereum-network-with-ethersjs