Chain performance monitoring

[1evi7eo]

Description

This PR adds a new BSC Chain Performance Monitoring demo to the cookbook. The application provides real-time monitoring of BNB Smart Chain (BSC) performance metrics through a clean, dark-mode web interface.

The demo fetches live data from a public BSC RPC endpoint and displays:

• Block # — Latest BSC mainnet block number
• Block time — Time between the last two blocks (seconds)
• Gas price — Current gas price in Gwei
• TPS — Transactions per second over recent blocks
• RPC latency — Round-trip time for RPC requests (ms)
• Gas used % — Share of block gas limit used in the latest block

The implementation includes a TypeScript backend with Express server, a responsive frontend with dark theme UI, comprehensive unit tests, and a setup script for easy deployment.

Fixes # (issue)

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• 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?

The application has been tested through:

1. Unit Tests: Comprehensive test suite using Vitest covering:

   • getBlockNumber() — Verifies correct parsing of hex block numbers
   • getBlock() — Tests block retrieval for both "latest" and numeric block numbers
   • getGasPrice() — Validates gas price conversion from hex to BigInt
   • getBlockTime() — Ensures correct calculation of time difference between blocks
   • getRecentTPS() — Verifies TPS calculation over sample blocks
   • getMetrics() — Tests complete metrics aggregation with all required fields
   • createApp() — Validates Express app creation and /api/metrics endpoint

2. Manual Testing:

   • Started the server with npm start and verified it runs on the configured port
   • Tested the /api/metrics endpoint directly via HTTP requests
   • Verified the frontend UI displays metrics correctly and updates on refresh
   • Tested auto-refresh functionality (10-second intervals)
   • Verified error handling when RPC endpoint is unavailable
   • Tested with different sample query parameter values (2-20 blocks)

3. Integration Testing:

   • Verified the complete flow from RPC calls to UI display
   • Tested with the default BSC RPC endpoint (https://bsc-dataseed.bnbchain.org)
   • Confirmed metrics update correctly in real-time

Test Instructions:

cd chain-performance-monitoring
npm install
npm run build
npm test  # Run unit tests
npm start  # Start server and test manually at http://localhost:3000

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