Using Web3.js Library on BNB Smart Chain

Lesson Objectives

By the end of this lesson, you will be able to:

• Use the Web3js library for creating dapps on the BNB Smart Chain with Javascript programming language.
• Use Javascript-based programs to write, compile, deploy, and interact with smart contracts.
• Using Web3.js library to fetch blockchain data;
• Using Nodereal's Meganode API;
• Deploying static pages onto localhost using http-server.

Overview

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.

Demo

We encourage our readers to perform the steps listed for a better understanding. Before jumping into the demo, make sure you have the following softwares installed.

Software Pre-requisites

• 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

2. Clone the BNBChain-Tutorial repository: git clone https://github.com/bnb-chain/bnb-chain-tutorial.git
3. Change the current directory: cd "02-BSC-Block-Explorer"
4. Install all the dependencies (node modules): npm install
5. 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.

6. 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.

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

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

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.

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

4. 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.

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

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.