As a one-stop blockchain infrastructure and service provider, NodeReal’s mission is to empower developers by “Make your Web3 Real”. Today, we are excited to announce that we are supporting more powerful Enhanced APIs, starting from NFT, Fungible Tokens, and new Debug APIs.
In this Tutorial, we will provide a step-by-step guide on how to develop a block explorer that uses the Nodereal enhanced API to fetch details from the BNB Smart Chain blockchain for the given transaction hash. The technology stack used in this tutorial includes OpenRPC client, Nodereal’s MegaNode, and http-server. You can also refer to this video tutorial.
What You Will Learn
Through this tutorial, you will learn
- How to use the OpenRPC client to call NodeReal Enhanced API;
- How to use Nodereal’s Enhanced API;
- How to deploy static pages onto localhost using http-server
Target audience
This tutorial aims to provide adequate information to anyone who wants to learn web3 development on BNB Smart Chain.
Prerequisites
- node --version - v16.13.0
- npm --version - 8.1.0
- http-server --version - v14.1.1
Setup
- Clone the repository gh repo clone node-real/BNB-Chain-Tutorials
- Include Nodereal Meganode API Key make sure to include the API URL for the Nodereal Meganode API in the index.html as shown in the figure below.
<script>
async function txDetails(tHash){
var address = tHash
const { RequestManager, HTTPTransport, Client } = window.OpenRpcClient;
const transport = new HTTPTransport("https://bsc-mainnet.nodereal.io/v1/{YOUR-API-KEY}");
const client = new Client(new RequestManager([transport]));
const result = await client.request({method: "nr_getTokenMeta", params: [address]});
console.log(result);
$('tbody').append("<tr><td>" + result.name + "</td><td>" + result.symbol + "</td><td>" + result.tokenType + "</td><td>" + result.decimals);
}
</script>
3. Install http-server npm install -g http-server
4. Run the application http-server
Available Scripts
$ http-server
Structure
.
├── LICENSE
├── README.md
├── img
│ ├── favicon.ico
│ ├── logo.png
│ ├── screenshot.png
│ ├── screenshot2.png
│ └── screenshot3.png
├── index.html
├── js
│ ├── open-rpc-client.js
│ └── web3.min.js
├── list.txt
├── package-lock.json
How it Works
Checklist
- Make sure you have installed all the dependencies using the npm install command.
- Make sure you have installed http-server using the npm install -g http-server command.
- 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 public API key for BSC Testnet. For a complete list of Nodereal Meganode Public API keys, refer here.
How to Use
- Run the application using the command http-server from the root directory of the project.
- Open the browser and navigate to any of the URLs specified by running the above step, for e.g., localhost:8080.
- Paste the address of a token into the input field in our block explorer. You can open the portal of BSCScan, and find a token address.
- Click on the Fetch Details button to fetch details of the transaction.
About NodeReal
NodeReal is a one-stop blockchain infrastructure and service provider that embraces the high-speed blockchain era and empowers developers by “Make your Web3 Real”. We provide scalable, reliable, and efficient blockchain solutions for everyone, aiming to support the adoption, growth, and long-term success of the Web3 ecosystem.
Join Our Community
Join our community to learn more about NodeReal and stay up to date!