Easy way to add Amberdata.io APIs in your project

In this article, we will see how to play with the Amberdata.io APIs to build an application that talks to the Ethereum Blockchain.

Adding web3data to your project

Create a project folder with 2 files :
‣ index.html
‣ index.js

index.html

You can easily add web3data to your project using a content delivery network. To do so, simply add this script to the header of your main html file.

index.js

The next step is to create an instance of the Web3Data by passing in your API Key.

If you don’t have an API key yet, head over to https://amberdata.io/ to get started.

The application that we are going to build will display information about the latest block mined on the Ethereum mainnet.

web3data makes this task easy by listening to a websocket block event.

"result": {
  "blockchainId": "1c9c969065fcd1cf",
  "number": 7549499,
  "hash": "0x9d5a5b...",
  "parentHash": "0x33b18c...",
  "nonce": 2322883515373825000,
  "miner": "0x04668ec2f57cc15c381b461b9fedab5d451c8f7f",
  "difficulty": 1868847723100634,
  "totalDifficulty": 9794639309953347000000,
  "size": 26080,
  "gasLimit": 8000000,
  "gasUsed": 6716792,
  "timestamp": 1555023036000,
  "timestampNanoseconds": 0,
  "numTransactions": 107,
  "numUncles": 0,
  "reward": 2057342694413545700,
  "transactionHashes": null,
  "optionalProperties": {
    "logsBloom": "0xea0030...",
    "receiptsRoot": "0x4b001f...",
    "sha3Uncles": "0x1dcc4d...",
    "extraData": "0x706f6f...",
    "author": null,
    "transactionsRoot": "0x53d558...",
    "stateRoot": "0x4e9b0e...",
    "mixHash": "0xfeeb1d..."
  }
}

Here is what you can obtain by binding all the data to a front-end:

Please find the full project code on the link below:

TedNIVAN/ETHEREUM_BLOCK_TRACKER