Advanced

 

How to use Web3.js Library on BSC to Fetch Blockchain Data

In this tutorial, we will explore how to use the Web3.js library to interact with the Binance Smart Chain (BSC) network. Web3.js is a popular JavaScript library for communicating with Ethereum-based blockchain networks. In this tutorial, we will demonstrate how to use it in conjunction with the BSC network, to read and write data to the blockchain, as well as call smart contract functions. Whether you are a beginner or an experienced developer, this tutorial will provide you with a step-by-step guide on how to get started with Web3.js on BSC, and how to build a simple application to showcase its capabilities. By the end of this tutorial, you will have a solid understanding of how to use the Web3.js library on Binance Smart Chain and how to build decentralized applications (dApps) on this blockchain network.

Designed for anyone wanting to learn development on the BNB Smart Chain, this tutorial provides a step-by-step guide on how to use the 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

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

Clone the BNBChain-Tutorial repository: git clone https://github.com/bnb-chain/bnb-chain-tutorial.git

Change the current directory: cd "02-BSC-Block-Explorer"

Install all the dependencies (node modules): npm install

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.

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.

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

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

How to Use

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.

Paste this transaction hash into the input field in our block explorer.

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

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.

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.

With this, you complete this workshop successfully!!