Clarified instructions for local node info (issue #2411)

This commit is contained in:
xalava 2024-02-16 15:48:09 +01:00
parent 4730031dd7
commit 038722d4ab
3 changed files with 14 additions and 11 deletions

View File

@ -1,23 +1,27 @@
## Local Node Info ## Local Node Info
To start, we will create a simple page that displays basic information from our local node. To get started, we will create a simple web page that displays basic information from our local node.
### Instructions ### Instructions
Create a web page, `localNodeInfo.html` that loads an ethereum library, connects to a local node at `http://localhost:8545` and displays basic information : Create a web page called `localNodeInfo.html` that does the following:
- In an element with (`id`=`chainId`), the number ID of the current network 1. Loads an Ethereum library, such as `ethers.js` or `web3.js`.
- In an element with `blockNumber` as `id` the number of blocks in the chain 2. Connects to a local Ethereum node at `http://localhost:8545`.
3. Displays the following information on the page:
- The ID of the current network in an element with `chainId` as `id`.
- The number of blocks in the chain in an element with `blockNumber` as `id`.
![image](networkInfo.png)
![image](network-infos.png)
### Hint ### Hint
You can use any library such as `ethers.js` or `web3.js` to connect to your local node. 🚫 Please be aware that the test environment restricts internet access for security reasons. Therefore, you need to download the library and import it locally.
Automated tests check for elements with specific IDs, the design is up to you. 🎨 Automated tests only check for the content of elements with specific IDs; the rest of the design is up to you.
Minimal structure: 🎁 Here is a minimal example structure for the HTML file:
```HTML ```HTML
<!DOCTYPE html> <!DOCTYPE html>
@ -25,7 +29,7 @@ Minimal structure:
<span id="chainId"></span> <span id="chainId"></span>
<span id="blockNumber"></span> <span id="blockNumber"></span>
<script src="XXX"></script> <script src="./XXX"></script>
<script type="module"> <script type="module">
// Your code // Your code
</script> </script>
@ -34,6 +38,5 @@ Minimal structure:
``` ```
### Notions ### Notions
- [ethers Provider transaction-methods](https://docs.ethers.io/v5/api/providers/provider/#Provider--network-methods) - [ethers Provider transaction-methods](https://docs.ethers.io/v5/api/providers/provider/#Provider--network-methods)
- [web3](https://web3js.readthedocs.io/en/v1.3.4/web3-eth.html) - [web3 providers](https://docs.web3js.org/guides/web3_providers_guide/)

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB