Create your own Etherscan with React in 5 minutes

Photo by Radek Grzybowski on Unsplash

In this tutorial, we'll create a simple single-page etherscan in reactjs. For the clean UI, we are going to use the amazing semantic-ui-react which is the official react integration for semantic-ui.

You can find the complete code in the github.

Without wasting any time let's build it.


Prerequisite#

  • nodejs

  • Code editor -- (I am using VS Code)


I am assuming that you have a basic understanding of reactjs and components.

Create a react project#

We are using create-react-app as a boilerplate. Follow this link to learn more about it.

Open a terminal and run

If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.

etherscan-react is the name of the project. You can name it anything you like.

Once it is installed, open the terminal in the project and run npm start.

Go to localhost:3000. You can see the boilerplate homepage.

Now, our react boilerplate is ready.


Install Dependencies#

Following packages are required in this project.

semantic-ui-react: #

Semantic UI React is the official React integration for Semantic UI .

axios:#

To make http request we are using axios.


Etherscan API#

We are going to use Etherscan API to get the ethereum blockchain data like the latest block details, transaction detail, ether price etc.

Follow this link to register for an Etherscan account. Sign in if you already registered.

Go to the API-Keys section on the left side.

Create a new api key token. Give eth-react as the app name. You can give it any name.

Note down the API-KEY.


Set up the semantic-ui-react#

Open the public/index.html in the editor.

Import the semantic-ui cdn in the headof the index.html.

You can check the latest version of semantic-ui from this link.

Change the title of the application.


Let's start the fun part, the coding#

Open the project in your favourite code editor. I am using VS Code.

Create a components folder inside the src. Inside the components create the following components.

  • Eth-Overview: The overview of the ethereum blockchain such as ether price, latest block no., difficulty, and market cap.

  • Header: Simple header of the application.

  • Latest-Blocks: This component will fetch the latest 5 blocks.

  • Latest-Txs: This component will fetch all the transactions in the latest block.


The directory structure of the Header

Header.jsx#

Open the Header.jsx in the editor and paste the below code.

Here we are creating a function component by name AppDashboard and then we are exporting it at line 16.

  • Line 3: We are using the Header component from the semantic-ui-react.

  • Line 9-11: We are using a specific header block. asis a props, which defines how the content inside it looks like. The Ethereum is the heading for the dashboard.

To learn more about the Headercomponent, check out the official documentation.

header.css#

Open the header.css and paste the below css.

In the header.css we are directly overriding the semantic-ui.css. This is not recommended. This is just for demonstration that we can change it.

index.js#

Open the index.js . From the index.js we will export the Header.jsx.


app.js#

Instead of updating the app.js at once, we'll update as it required.

Now, Open the app.js in the editor and paste the below code.

Open the terminal in the project's root directory and run npm start.

Go to browser, you will see the Header.


Eth-Overview#

The directory structure of the Eth-Overview

Eth-Overview.jsx#

Open the Eth-Overview.jsx in the editor and paste the below code.

Don't panic, let me breakdown the code for you so that you can understand.

  • Line 4: Importing Grid component for the dashboard layout. There are 2 rows, the first row will show the etherpricein USD and Bitcoin. The second row is for the latest blocks and the latest transactions. Card component is used to show the ether price, difficulty, latest block and market cap. Iconcomponent is for the icons we require in the dashboard, such as $.

  • Line 5: LatestBlockscomponent will return the table of latest 5 blocks using the etherscan api. latestBlocknumber will send as param to this component.

  • Line 6: LatestTxscomponent will return the last 5 transactions of the latest block. blockNo (latestBlock) in hex format will be sent as a param.

  • Line 9: For testing purpose you can paste your api key and check the functionality. But it is recommended to get the api key from the environment variable.

  • Line 11: endpoint for all the requests.

  • Line 26: ComponentDidMountis a special function in the react, which will run first for that particular component. You can think of it as a constructor of the component. The comments explained everything in the code. It is fetching and calculating the basic information like ether price, latest block, difficulty and market cap.

  • Line 92: The getLatestBlocksmethod will render the LatestBlockscomponent.

  • Line 98: The getLatestTxsmethod will render the LatestTxscomponent.

index.js#

Open the index.js . From the index.js we will export the Eth-Overview.jsx.


Latest-Blocks#

The directory structure of the Latest-Blocks

Latest-Blocks.jsx#

Open the Latest-Blocks.jsxin the code editor and paste the below code.

This component will fetch the latest 5 blocks from the etherscan and returns the table. You can increase the no. of blocks to fetch inline 29.


index.js#

Open the index.js . From the index.js we will export the Latest-Blocks.jsx.


Latest-Txs#

The directory structure of the Latest-Txs

Latest-Txs.jsx#

Open the Latest-Txs.jsxin the code editor and paste the below code.

This component will fetch the latest 5 transactions of the latest block from the etherscan and returns the table. You can increase the no. of transactions to fetch inline 36.


index.js#

Open the index.js . From the index.js we will export the Latest-Blocks.jsx.


app.js#

Now, Open the app.js in the editor and paste the below code.

Open the terminal in the project's root directory and run npm start.

Go to the browser and run localhost:3000.

Congratulations, you just created your own etherscan dashboard.

Now, you can integrate other etherscan api and add more feature to your etherscan dashboard.

You can find the complete code in the GitHub.

Check out my other articles and tutorials on my blog.

If you like my work and want to support me. You can buy me a coffee.