Skip to main content

Using Web3.js Library on BNB Smart Chain

Designed for anyone wanting to learn development on the BNB Smart Chain, this tutorial provides a step-by-step guide on how to use web3.js library along with Nodereal API to fetch transaction details from the BNB Smart Chain blockchain for the given transaction hash. The technology stack used in this tutorial includes Web3.js, Nodereal MegaNode, and http-server.

Learning Takeaways:​

This tutorial will help you gain knowledge on the following learning points:

  • Using Web3.js library to fetch blockchain data;
  • Using Nodereal’s Meganode API;
  • Deploying static pages onto localhost using http-server.

Technology Stack Details​

  • node v16.13.0
  • npm v8.1.0
  • Web3.js
  • http-server

Setting up the development environment​

  1. Install http-server: npm install -g http-server

image

  1. Clone the BNBChain-Tutorial repository: git clone https://github.com/bnb-chain/bnb-chain-tutorial.git
  2. Change the current directory: cd "02-BSC-Block-Explorer"
  3. Install all the dependencies (node modules): npm install
  4. Before running the application, make sure that you have included the HTTP link for the Nodereal Meganode API in the index.html as shown in the figure below.

image

  1. For this project, we have used the BSC Testnet public API key, as shown in the figure below. For a complete list of Nodereal Meganode Public API keys, refer here.

image

  1. Run the application by using the command http-server from the project directory.

image

  1. Open your web browser and navigate to any of the ports indicated by the http-server command.

image

How to Use​

  1. Since we have used the HTTP reference of Nodereal’s Meganode API for BSC testnet, open BSCscan for Testnet, and copy the transaction hash of any transaction of your choice.
  2. Paste this transaction hash into the input field in our block explorer.

image

  1. Click on the Fetch Details button to fetch details of this transaction.

image

  1. You can also display other details from the received transaction receipt by changing the code block shown in the figure below as we have displayed the minimum.

image

  1. The received transaction receipt has several fields as shown in the figure below.

image

Conclusion​

In this tutorial, we developed a dapp that has both backend and front-end integration that uses Web3.js library that can be used for fetching details of transactions on the BSC testnet by given a transaction hash. The tech stack includes Web3.js, Nodereal MegaNode, and http-server. Check out our GitHub for more tutorials on how to develop on BSC. If you have any questions or are stuck, reach out to us on our Discord Channel.