Tutorials on Etherscan

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 . Without wasting any time let's build it. I am assuming that you have a basic understanding of reactjs and components. We are using create-react-app as a boilerplate. Follow this link to learn more about it. Open a terminal and run 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. Following packages are required in this project. To make http request we are using axios . 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. Open the public/index.html in the editor. Import the semantic-ui cdn in the head of the index.html . You can check the latest version of semantic-ui from this link . Change the title of the application. 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. The directory structure of the Header 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. To learn more about the Header component, check out the official documentation . Open the header.css and paste the below css. Open the index.js . From the index.js we will export the Header.jsx . 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. The directory structure of the Eth-Overview 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. Open the index.js . From the index.js we will export the Eth-Overview.jsx . The directory structure of the Latest-Blocks Open the Latest-Blocks.jsx in 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. Open the index.js . From the index.js we will export the Latest-Blocks.jsx . The directory structure of the Latest-Txs Open the Latest-Txs.jsx in 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. Open the index.js . From the index.js we will export the Latest-Blocks.jsx . 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.