Summary

The provided content is a guide on using Ethers.js to interact with the Ethereum Virtual Machine (EVM) within the Remix development environment, highlighting the setup process and the roles of Provider, Signer, and Contract classes in Ethers.js.

Abstract

The article serves as a beginner's guide to Ethers.js, a JavaScript library for interacting with the Ethereum blockchain. It compares Ethers.js to another popular library, web3.js, noting Ethers.js' smaller bundle size and comprehensive documentation. The guide walks through setting up a Remix project, a full-stack React framework, to explore Ethers.js functionalities. It explains the essential components of Ethers.js, such as Provider for network connection, Signer for transaction authorization, and Contract for smart contract interaction. The article also demonstrates how to use these components within Remix, providing code examples and illustrating how to display data using react-json-pretty. The conclusion emphasizes the importance of Ethers.js and web3.js in the development of Web3 applications and the future of the internet.

Opinions

Ethers.js is praised for its smaller bundle size, extensive testing, documentation, and maintenance compared to web3.js.
The author suggests that Ethers.js is a robust tool for Ethereum developers, as evidenced by its growing adoption and the support of a community of contributors.
The article implies a preference for Ethers.js over web3.js due to its more concise data structure and the absence of circular reference issues.
The author expresses optimism about the future of Web3 development, with libraries like Ethers.js and web3.js playing pivotal roles.
The use of Infura as a network provider is recommended, indicating a trust in Infura's infrastructure for Ethereum development.
The author encourages readers to explore further by reading their other Medium articles on web development, suggesting a belief in the value of their contributions to the developer community.

Use Ethers.js to Interact With the Ethereum Virtual Machine in Remix

A beginner’s guide for ethers.js

Ethers.js and web3.js are two JavaScript libraries that allow developers to interact with the Ethereum blockchain. Both of them are open-source libraries that can accomplish the tasks for Ethereum developers.

The following is a diagram of npm trends between ethers.js and web3.js:

Web3.js is built by the Ethereum Foundation, with 281 contributors. The library has been extensively adopted by many projects. We have written an article on how to use web3.js in Remix.

In this article, we take a close look at ethers.js, which was initially developed and maintained by Rick Moore, a Canadian developer. Currently, it has 14 contributors. The library has a smaller bundle size, is well tested, documented, and maintained.

The Working Environment

We use Remix, a full-stack React framework, as a base to explore ethers.js. The following command creates a Remix project:

% npx create-remix my-remix-app
% cd my-remix-app

Set up ethers, along with react-json-pretty:

npm i ethers react-json-pretty

These packages become part of dependencies in package.json:

The Remix working environment is ready to explore ethers.js.

Provider, Signer, and Contract

Provider, Signer, and Contract are three essential classes in ether.js. They are used to communicate with a smart contract.

Provider

Provider is a class that provides a connection to the Ethereum Network. It provides read-only access to the Blockchain and its state.

getDefaultProvider, exported from ethers, can be used to construct a provider. It takes two parameters — the first one is network, which takes one of the following values:

homestead - Homestead (Mainnet)
ropsten - Ropsten (proof-of-work testnet)
rinkeby - Rinkeby (proof-of-authority testnet)
goerli - Görli (clique testnet)
kovan - Kovan (proof-of-authority testnet)

The second parameter is options, which supports the following key/value pairs:

etherscan: ETHERSCAN_API_KEY
infura: INFURA_PROJECT_ID
alchemy: ALCHEMY_API_KEY
pocket: POCKET_APPLICATION_KEY
ankr: ANKR_API_KEY

In the following code, we choose the infura network, along with the INFURA_PROJECT_ID, 57e665ef67b44c4687ad529b8b89397c, created from our web3.js project.

Alternatively, we can crate a provider by importing provides from ethers, and new providers.InfuraProvider with the same parameters.

Signer

Signer is a class that uses a private key to sign messages/transactions to authorize the operations. It is an abstraction of the user’s wallet address. It can be instantiated by the Wallet’s static method.

Contract

Contract is a class that represents a connection to a specific contract on the Ethereum Network.

We can import Contract from ethers, and create an instance with new Contract(daiAddress, daiAbi, provider).

daiAddress is the Ethereum name service. We set it to "dai.tokens.ethers.eth". Dai is a stablecoin cryptocurrency which aims to keep its value as close to one United States dollar (USD) as possible.
daiAbi specifies a contract with an Application Binary Interface (ABI), which describes the methods and events it has. These methods are used to communicate with a contract on-chain (governed contract), and to encode and decode the data.

provider is the connection to the Ethereum Network.

Using Provider, Signer, and Contract in Remix

We use Remix as working environment. app/entry.server.jsx is the first bit of JavaScript that will run when a request hits the server. It loads only the necessary data, but developers need to handle the response. This file renders the React app to a string/stream that is sent as a response to the client.

Here is the modified app/entry.server.jsx, which creates a provider (line 6), a signer (line 11), and a contract (line 33).

These instances are imported to app/routes/index.jsx, the indexed route that is invoked by default.

In line 2, react-json-pretty is imported as JSONPretty, which prettifies JSON data. This component is used at line 60.

In line 3, utils, a utility collection, is imported from ethers.

In line 4, daiContract, provider, signer are imported from app/entry.server.jsx.

The loader function (lines 6–56) is a special API. It is exported to be called on the server before rendering. We use it to show the content of signer, daiContract, and provider.

For signer, we can view private key (line 7), public key (line 11), and address (line 15).

Signing messages can be used for various methods of authentication and off-chain (ungoverned contract) operations, which can be put on-chain if necessary.

In line 19, it signs a string message.

At line 31, it signs a digest hash.

In line 35, it retrieves the contact name.

In line 39, it retrieves the symbol name.

In line 43, it retrieves the balance in BigNumber format, which is an object that safely allows mathematical operations on numbers of any magnitude.

The default unit is Wei, which is the smallest denomination of Ether (ETH), the native cryptocurrency of Ethereum. The following is the conversion rate between different units.

1 Ether = 10³Finney = 10⁶Szabo = 10⁹Gwei = 10¹²Mwei = 10¹⁵Kwei = 10¹⁸Wei

In lines 47–53, the balance is formatted by various units.

In line 55, the loader function is resolved with the provider object.

On line 59, useLoaderData is invoked to retrieve the loaded data, result.

Line 60, JSONPretty shows result on the browser.

Execute the Remix app by npm run dev, and go to the browser window. We see a long list of the provider object.

Collapse the provider object by http://jsonviewer.stack.hu/:

It shows the first-level props and methods.

Comparing to web3.js, the data structure in ethers.js is more concise, and there is no circular reference issue. Otherwise, they accomplish similar operations.

Conclusion

We have shown how to use ethers.js to interact with the Ethereum virtual machine, via Infura.

ethers.js and web3.js are two JavaScript libraries that allow developers to interact with the Ethereum blockchain. Both of them grow exponentially during Web3 development. These JavaScript packages are developed to shape the internet’s future.

Thanks for reading. I hope this was helpful. If you are interested, check out my other Medium articles.