Rpc block explorer example

[1evi7eo]

Description

This PR introduces a new RPC Block Explorer tool for BNB Smart Chain (BSC), a BNBChain Cookbook demo that explores blocks and transactions via direct JSON-RPC calls. This lightweight block explorer demonstrates how to interact with blockchain data using standard Ethereum-compatible JSON-RPC methods without relying on third-party APIs or services.

Key Features:

• Latest Block: Get the current block number on BSC mainnet using eth_blockNumber RPC method
• Block Search: Find blocks by number (decimal or hex format) or hash, with support for special identifiers (latest, earliest, pending)
• Transaction Details: View full transaction information including gas usage, gas price, value, nonce, input data, and transaction status (success/failed)
• Block Data: Comprehensive block metadata including block number, hash, parent hash, timestamp, gas limit, gas used, miner address, difficulty, size, and all transactions
• Direct RPC Integration: Uses standard JSON-RPC methods (eth_blockNumber, eth_getBlockByNumber, eth_getTransactionByHash, eth_getTransactionReceipt) directly with BSC RPC endpoints
• Value Formatting: Automatic conversion from wei to BNB (18 decimals) and gas price from wei to Gwei for human-readable display
• Real-time Data: Direct queries to BSC mainnet without any intermediate services or caching layers
• RESTful API: Express.js backend with clean API endpoints (/api/latest, /api/block/:input, /api/transaction/:hash)
• User-friendly UI: Modern dark-themed interface with left info pane and right explorer pane for seamless navigation

JSON-RPC Methods Used:

1. eth_blockNumber — Get the latest block number
2. eth_getBlockByNumber — Fetch block data with optional full transaction details
3. eth_getTransactionByHash — Get transaction details by hash
4. eth_getTransactionReceipt — Get transaction status (success/failed) and gas usage

Use Cases:

• Explore BSC blocks and transactions without external block explorers
• Understand how JSON-RPC methods work for blockchain data retrieval
• Educational tool for learning blockchain data structures
• Building custom block explorer interfaces
• Debugging transactions and blocks directly from RPC

Tech Stack:

• TypeScript for type safety and maintainability
• Express.js for HTTP server and RESTful API endpoints
• Direct JSON-RPC calls using native fetch API
• Plain HTML/CSS/JS for frontend with modern dark theme UI
• Vitest for comprehensive unit testing

This implementation provides a complete, production-ready example that demonstrates best practices for direct RPC interaction with BSC, making blockchain data exploration accessible and educational.

Fixes # (issue)

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

• Ran unit tests with npm test to verify all RPC and formatting functions
• Tested hexToNumber and hexToBigInt conversion functions with various hex inputs
• Verified weiToBnb function correctly converts wei to BNB with proper decimal formatting
• Tested weiToGwei function for gas price conversion
• Validated isValidBlockInput function for block number, hash, and special identifier formats
• Tested normalizeBlockInput function converts decimal numbers to hex format correctly
• Verified getLatestBlockNumber function fetches current block number from BSC RPC
• Tested getBlock function with various inputs (decimal number, hex number, hash, "latest")
• Validated getTransaction function retrieves transaction data and status from RPC
• Tested getBlockSummary function returns lightweight block information
• Verified Express API endpoints (/api/latest, /api/block/:input, /api/transaction/:hash) return correct data
• Tested error handling for invalid block inputs, invalid transaction hashes, and RPC failures
• Validated frontend UI correctly displays block data, transaction details, and formatted values
• Tested with real BSC blocks and transactions to verify RPC integration
• Built and tested production build with npm run build && npm start
• Tested on BSC mainnet with real block numbers, hashes, and transaction hashes

Reproduction Steps:

1. Clone the repository and run ./clone-and-run.sh (or manually: npm install, cp .env.example .env, npm run build, npm test, npm start)
2. Open http://localhost:3000 in a browser
3. Click "Get Latest Block" to fetch the current block number on BSC
4. Enter a block number (e.g., 35000000) or hash and click "Search Block" to view block details
5. Click on any transaction hash in the block to view full transaction details
6. Verify all values are correctly formatted (BNB, Gwei) and transaction status is displayed
7. Test with special block identifiers like "latest" to see real-time block data

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[vivixu-cmd]

Congratulations! You have received a Cookbook reward. Please reply with your BSC wallet address.Thanks

[1evi7eo]

Congratulations! You have received a Cookbook reward. Please reply with your BSC wallet address.Thanks

Thank you for the opportunity to contribute!
0x23b23556c3CAA3C582EeE23Fc0D972352FB2a62c