TLDR
ChainstackProvider
in ethers.js lets you connect to multiple blockchains (Ethereum, Polygon, Arbitrum, etc.) with minimal setup.ethers.js recently added support for ChainstackProvider
. This allows you to leverage Chainstack nodes in ethers out of the box. This tutorial will guide you through setting up a Next.js project, integrating ethers.js with ChainstackProvider
building a fully functional DApp that cretrieves wallet balances from multiple blockchain networks.
Learn more about ChainstackProvider
and the supported chains on the ethers ChainstackProvider Documentation.
ethers.js is a JavaScript library designed to interact with EVM blockchains. It provides a lightweight and easy-to-use API for connecting to various blockchains, making transactions, interacting with smart contracts, and handling cryptographic functions. Due to its simplicity, flexibility, and robust features, Ethers.js is popular among developers, making it a go-to choice for building Ethereum-based applications.
Spinning up a DApp with ChainstackProvider
is so simple that you only need an IDE and Node.js installed. Install Node.js from the official website if you don’t have it yet.
Find the repository for this DApp on the Chainstack Labs GitHub and see a functioning and deployed version of the DApp: Multi-chain wallet balance aggregator DApp
At this stage, let’s go ahead and set up the Next.js project; create a new directory for your DApp and run the command to initialize Next.js:
This project uses Next 14; select the following options during the setup:
Then, move into the newly created project and install the ethers library. To have access to the ChainstackProvider
you need to at least ethers V6.12.0
.
At this point, you are ready to code.
ChainstackProvider
?Let’s briefly talk about the ChainstackProvider
. It provides a very convenient way to spin up DApps and prototypes but keep in mind that the endpoints used are heavily throttled and will not be suitable for a production environment. The good news is that ChainstackProvider
supports your own Chainstack nodes as well; you just need to deploy a Global Node from the Chainstack console and initialize the provider with the node authorization key.
Follow these steps to sign up on Chainstack, deploy a node, and find your endpoint credentials:
You must deploy a Global Node to use the authorization key in ChainstackProvider
.
Once deployed, your node RPC ULR will look like this:
Now you can add the AUTH_KEY
to the ChainstackProvider
instance:
Check out the supported chains on the ethers ChainstackProvider Documentation.
To achieve this functionality, ywork with two main components:
Frontend UI (page.js):
Backend API (route.js):
Focusing on these two components streamlines the development process and demonstrates the simplicity of integrating ethers.js with ChainstackProvider
in a Next.js project.
Let’s first work on the UI. Once your project is initialized, go to ...src/app/page.js
and paste the following code:
page.js
The page.js
file is responsible for the user interface of your DApp. It allows users to input their Ethereum wallet address and fetches the wallet balances from multiple blockchain networks by interacting with your backend API. Here’s a simple breakdown of the important parts:
You import useState
from React for managing state within the component and ethers
from the ethers.js library to validate Ethereum addresses.
You define several state variables:
walletAddress
to store the user-inputted wallet address.balances
to store the fetched balances.loading
to indicate the loading state while fetching data.error
to display any errors that occur during the fetching process.This function handles the balance-checking process and calls the API that uses ethers and the ChainstackProvider
, you take care of that in the following section:
POST
request to the /api/balances
endpoint with the wallet address.balances
state or sets an error message if the request fails.The UI consists of:
This simple breakdown focuses on the key functionality: interacting with the backend API to fetch and display wallet balances. Next, you get into the backend logic in route.js
to understand how the balances are retrieved from multiple blockchain networks using ChainstackProvider.
Now let’s work on the heart of the DApp, the API endpoint using the ChainstackProvider
to fetch data from the chains.
In src/app
create a new directory for the API route. The final path will be ...src/app/api/balances/route.ts
.
Create each directory, api
, balances
, and then the route.js
file in it. Once you have route.js
paste this code into it:
route.ts
The route.ts
file handles the backend logic for your DApp. It interacts with multiple blockchain networks using ChainstackProvider
to fetch the wallet balances. Here’s a detailed breakdown of the important parts of the code:
You import the ethers library, which provides the necessary tools to interact with Ethereum and other blockchain networks.
You create an object providers
that holds instances of ChainstackProvider
for each supported blockchain network. This allows you to connect to Ethereum, Polygon, BNB Smart Chain, and Arbitrum networks.
The getBalance
function takes a network name and a wallet address as parameters. It uses the corresponding provider to fetch the balance of the given wallet address and converts the balance from wei
to ether
using ethers.formatEther
.
The getAllBalances
function takes a wallet address as a parameter. It iterates over all the networks defined in the providers
object, fetches the balance for each network using the getBalance
function, and stores the results in the balances
object.
The POST
function handles incoming POST requests to your API endpoint:
walletAddress
from the request body.walletAddress
is missing; it returns a 400 status with an error message.getAllBalances
function to fetch the balances for all networks.The route.ts
file handles the backend logic for your DApp. It connects to multiple blockchain networks using theChainstackProvider
to fetch the wallet balances and returns the results to the front end. This is a good way to keep your endpoints secure, as the front end does not call the RPC node directly but calls something similar to a proxy server instead.
And now you have a complete DApp; it was indeed super easy with the ChainstackProvider
. Now, to run it, simply start the development server:
Your DApp is now running on http://localhost:3000
. You can use this address to test it: 0x95aD61b0a150d79219dCF64E1E6Cc01f0B64C4cE
.
In this tutorial, you’ve walked through creating a multi-chain wallet balance aggregator DApp using Ethers.js and ChainstackProvider
. By integrating these powerful tools into a Next.js project, you’ve seen for yourself how easy it is to fetch and display wallet balances from multiple blockchain networks. This project showcases the simplicity and efficiency of using ChainstackProvider to interact with various blockchain networks, making it an excellent choice for developers looking to build decentralized applications.
TLDR
ChainstackProvider
in ethers.js lets you connect to multiple blockchains (Ethereum, Polygon, Arbitrum, etc.) with minimal setup.ethers.js recently added support for ChainstackProvider
. This allows you to leverage Chainstack nodes in ethers out of the box. This tutorial will guide you through setting up a Next.js project, integrating ethers.js with ChainstackProvider
building a fully functional DApp that cretrieves wallet balances from multiple blockchain networks.
Learn more about ChainstackProvider
and the supported chains on the ethers ChainstackProvider Documentation.
ethers.js is a JavaScript library designed to interact with EVM blockchains. It provides a lightweight and easy-to-use API for connecting to various blockchains, making transactions, interacting with smart contracts, and handling cryptographic functions. Due to its simplicity, flexibility, and robust features, Ethers.js is popular among developers, making it a go-to choice for building Ethereum-based applications.
Spinning up a DApp with ChainstackProvider
is so simple that you only need an IDE and Node.js installed. Install Node.js from the official website if you don’t have it yet.
Find the repository for this DApp on the Chainstack Labs GitHub and see a functioning and deployed version of the DApp: Multi-chain wallet balance aggregator DApp
At this stage, let’s go ahead and set up the Next.js project; create a new directory for your DApp and run the command to initialize Next.js:
This project uses Next 14; select the following options during the setup:
Then, move into the newly created project and install the ethers library. To have access to the ChainstackProvider
you need to at least ethers V6.12.0
.
At this point, you are ready to code.
ChainstackProvider
?Let’s briefly talk about the ChainstackProvider
. It provides a very convenient way to spin up DApps and prototypes but keep in mind that the endpoints used are heavily throttled and will not be suitable for a production environment. The good news is that ChainstackProvider
supports your own Chainstack nodes as well; you just need to deploy a Global Node from the Chainstack console and initialize the provider with the node authorization key.
Follow these steps to sign up on Chainstack, deploy a node, and find your endpoint credentials:
You must deploy a Global Node to use the authorization key in ChainstackProvider
.
Once deployed, your node RPC ULR will look like this:
Now you can add the AUTH_KEY
to the ChainstackProvider
instance:
Check out the supported chains on the ethers ChainstackProvider Documentation.
To achieve this functionality, ywork with two main components:
Frontend UI (page.js):
Backend API (route.js):
Focusing on these two components streamlines the development process and demonstrates the simplicity of integrating ethers.js with ChainstackProvider
in a Next.js project.
Let’s first work on the UI. Once your project is initialized, go to ...src/app/page.js
and paste the following code:
page.js
The page.js
file is responsible for the user interface of your DApp. It allows users to input their Ethereum wallet address and fetches the wallet balances from multiple blockchain networks by interacting with your backend API. Here’s a simple breakdown of the important parts:
You import useState
from React for managing state within the component and ethers
from the ethers.js library to validate Ethereum addresses.
You define several state variables:
walletAddress
to store the user-inputted wallet address.balances
to store the fetched balances.loading
to indicate the loading state while fetching data.error
to display any errors that occur during the fetching process.This function handles the balance-checking process and calls the API that uses ethers and the ChainstackProvider
, you take care of that in the following section:
POST
request to the /api/balances
endpoint with the wallet address.balances
state or sets an error message if the request fails.The UI consists of:
This simple breakdown focuses on the key functionality: interacting with the backend API to fetch and display wallet balances. Next, you get into the backend logic in route.js
to understand how the balances are retrieved from multiple blockchain networks using ChainstackProvider.
Now let’s work on the heart of the DApp, the API endpoint using the ChainstackProvider
to fetch data from the chains.
In src/app
create a new directory for the API route. The final path will be ...src/app/api/balances/route.ts
.
Create each directory, api
, balances
, and then the route.js
file in it. Once you have route.js
paste this code into it:
route.ts
The route.ts
file handles the backend logic for your DApp. It interacts with multiple blockchain networks using ChainstackProvider
to fetch the wallet balances. Here’s a detailed breakdown of the important parts of the code:
You import the ethers library, which provides the necessary tools to interact with Ethereum and other blockchain networks.
You create an object providers
that holds instances of ChainstackProvider
for each supported blockchain network. This allows you to connect to Ethereum, Polygon, BNB Smart Chain, and Arbitrum networks.
The getBalance
function takes a network name and a wallet address as parameters. It uses the corresponding provider to fetch the balance of the given wallet address and converts the balance from wei
to ether
using ethers.formatEther
.
The getAllBalances
function takes a wallet address as a parameter. It iterates over all the networks defined in the providers
object, fetches the balance for each network using the getBalance
function, and stores the results in the balances
object.
The POST
function handles incoming POST requests to your API endpoint:
walletAddress
from the request body.walletAddress
is missing; it returns a 400 status with an error message.getAllBalances
function to fetch the balances for all networks.The route.ts
file handles the backend logic for your DApp. It connects to multiple blockchain networks using theChainstackProvider
to fetch the wallet balances and returns the results to the front end. This is a good way to keep your endpoints secure, as the front end does not call the RPC node directly but calls something similar to a proxy server instead.
And now you have a complete DApp; it was indeed super easy with the ChainstackProvider
. Now, to run it, simply start the development server:
Your DApp is now running on http://localhost:3000
. You can use this address to test it: 0x95aD61b0a150d79219dCF64E1E6Cc01f0B64C4cE
.
In this tutorial, you’ve walked through creating a multi-chain wallet balance aggregator DApp using Ethers.js and ChainstackProvider
. By integrating these powerful tools into a Next.js project, you’ve seen for yourself how easy it is to fetch and display wallet balances from multiple blockchain networks. This project showcases the simplicity and efficiency of using ChainstackProvider to interact with various blockchain networks, making it an excellent choice for developers looking to build decentralized applications.