Create and deploy an Ethereum Blockchain Explorer to GitHub Pages
Tags: ethereum, cryptocurrency, crypto, blockchain
Published: 2021-01-07 08:17:28

---
title: Create and deploy an Ethereum Blockchain Explorer to GitHub Pages
published: true
date: 2020-12-28 06:52:52 UTC
tags: ethereum,cryptocurrency,crypto,blockchain
canonical_url: https://medium.com/coinmonks/create-and-deploy-an-ethereum-blockchain-explorer-to-github-pages-30800f5b167b
---

#### Ethereum Blockchain Explorer

#### Use WebAssembly and dotnet to create an Ethereum Blockchain Explorer

![](https://cdn-images-1.medium.com/max/1024/1*XBh-tDFDPaWGpKFptQY6-A.jpeg)<figcaption><a href="https://pixabay.com/photos/money-coin-finance-ether-ethereum-5511316/">Money Coin Finance — Free photo on Pixabay</a></figcaption>

Blockchain Explorers are like search engines for Cryptocurrencies and the Blockchain. It allows users to access information about transactions, blocks and addresses. They are very powerful and are used daily by users.

The most popular Blockchain Explorer for Ethereum is [Etherscan](https://etherscan.io/) where we get real time analytics on Ethereum.

[Ethereum (ETH) Blockchain Explorer (etherscan.io)](https://etherscan.io/)

In this article we will build and deploy a Blockchain Explorer in order to get information about the Ethereum Blockchain. We will build a client-side application that runs directly in the browser via WebAssembly. In order to do that, we are going to use Blazor WebAssembly. We will then automate the deployment of our application to GitHub Pages with GitHub Actions.

### Building the Blockchain Explorer

First, we need to create our Blazor WebAssembly application. In order to do that, run the following cli command:

dotnet new blazorwasm -o Your-Project-Name

Now, we add the library that will allow us to get data from Ethereum, the [Nethereum](https://nethereum.com/). It is an open source .NET integration library for blockchain. To add the library to your project:

dotnet add package Nethereum.Web3 --version 3.8.0

We will create a service class to encapsulate all the logic of interacting with Ethereum. This class will be called EthereumService and will receive as construction injection the IWeb3 interface:

{% gist https://gist.github.com/strykerin/dff042ab8f0899ea348fb2356c4d1ce9 %}

In order to obtain the implementation of the IWeb3 interface in runtime, we will need to add it to the Dependency Injection container. We will also add the EthereumService class to the DI container so the pages we will create can get data from the Blockchain using this class.

In the Program.cs class:

{% gist https://gist.github.com/strykerin/46d16470d8e9c19a25f4197e6c203456 %}

Note that when we instantiate the Web3 class, we need the URL from the Infura mainnet with your API Key. If you don’t have one, you can go to [Infura](https://infura.io/) website and create an account.

> [Infura interacts with the Ethereum blockchain and runs nodes on behalf of its users.](https://decrypt.co/resources/what-is-infura)

### Creating our First page

Now we will create our first page, the index.razor. We will inject two services to this page, the IEthereumService in order to get data from Ethereum and NavigationManager in order to navigate to others pages.

{% gist https://gist.github.com/strykerin/4c32ead522868fc066aa025fd929cb64 %}

On this page we will want to display the following information:

- The latest block number
- The latest blocks
- The latest transactions

To get the latest block number when we the page renders, we will override the method OnInitializedAsync():

{% gist https://gist.github.com/strykerin/72567f0ff278d9af1e071af4cdf60d20 %}

When we finish to get the latest block number, we can now display it in the page:

{% gist https://gist.github.com/strykerin/59591c624f734c46aa716b90f4aec2e5 %}

The method in EthereumService class that gets the latest block number:

{% gist https://gist.github.com/strykerin/eceb9ad6158ab17ed54889330cdac8fa %}

### Get Latest Blocks and Transactions

Blazor applications are built using components. Components include a self-contained piece of the user interface and the logic necessary to get the data or respond to UI events.

We will create a razor component (LatestBlocksAndTransactions.razor) to encapsulate the User Interface that is responsible of getting the latest 5 Ethereum blocks and the 5 latest approved transactions.

This component will receive as parameter the latest block number. The Index.razor will render this component and pass this parameter by declaring them using the HTML element syntax:

{% gist https://gist.github.com/strykerin/1f8d21a36f835bb50c3fb77db2285465 %}

This created LatestBlocksAndTransactions component will now get the data from the last 5 blocks:

{% gist https://gist.github.com/strykerin/d2276362afe2f394508d7b92bf38bf91 %}

and then render it on the page:

{% gist https://gist.github.com/strykerin/98260072dc5d63f61c0b1d281f168061 %}

### Block Page

This page will contain information about a block. We will receive as a parameter for this page the BlockNumber. With this information, we can search for the desired block and its transactions by overriding the OnInitializedAsync() method and calling the GetBlockInfomethod from IEthereumService:

{% gist https://gist.github.com/strykerin/f17c0e9cac1fa72e87315626ee36cfbf %}

The field \_hasLoaded was created because when the page renders there is still no information about the block and the transactions that it contains. We will only display the block’s information when we get the data from Ethereum. So after we successfully get the data, we set the \_hasLoaded to true and we can display this information as seen below:

{% gist https://gist.github.com/strykerin/4b9b2b088fda6970c7967a7deb61c955 %}

### Address Page

On this page we will display two information for the Address:

- The Balance in Ether
- The transactions From/To this Address on the last 10 blocks

In order to get the balance for an address, we call the GetBalancemethod from the Web3 class:

{% gist https://gist.github.com/strykerin/2a50fafcf5ce4b5d71e47cb430e97dbd %}

To get the transactions From/To the Address, we will iterate over each block and verify the transactions. To keep things simple, we will iterate over the last 10 blocks and verify among the transactions if the Address was the source or the destination:

{% gist https://gist.github.com/strykerin/1dab77c830cadfd39643cdc655e756c4 %}

### Deploy to GitHub Pages with GitHub Actions

Since the publish output of a Blazor WebAssembly project are static files, we can deploy the application to static site hosts such as Azure Static Web Apps and GitHub Pages. We will automate the deployment of our Blockchain Explorer to GitHub Pages with GitHub Actions.

In order to create a GitHub Actions, go to your repository, navigate to your Actions tab then click on the link “set up a workflow yourself”. GitHub will display a template of a YAML file with instructions on how to build and deploy the application.

For our Blazor WebAssembly application, the created workflow YAML file to deploy our Blockchain Explorer can be found below:

{% gist https://gist.github.com/strykerin/521d60d9ae0980cb30e4640effd2c842 %}

There is a great article by Niels Swimberghe about [how to deploy ASP.NET Blazor WebAssembly to GitHub Pages](https://swimburger.net/blog/dotnet/how-to-deploy-aspnet-blazor-webassembly-to-github-pages). It has a video and a step by step guide on how to deploy a Blazor WebAssembly application to GitHub Pages and how to solve the problems when doing so. The link can be found on the references section below.

### Conclusion

In this article we have created an Ethereum Blockchain Explorer using the new Blazor WebAssembly framework. We also have published this application to GitHub Pages using GitHub Actions.

The source code for this application and the URL for the deployed app can be found below:

[strykerin/Ethereum-Blockchain-Explorer (github.com)](https://github.com/strykerin/Ethereum-Blockchain-Explorer)

[EthereumBlockchainExplorer (strykerin.github.io)](https://strykerin.github.io/Ethereum-Blockchain-Explorer/)

### References

[strykerin/Ethereum-Blockchain-Explorer (github.com)](https://github.com/strykerin/Ethereum-Blockchain-Explorer)

[EthereumBlockchainExplorer (strykerin.github.io)](https://strykerin.github.io/Ethereum-Blockchain-Explorer/)

[Blockchain Explorer Tutorial — What Is A Blockchain Explorer? (softwaretestinghelp.com)](https://www.softwaretestinghelp.com/blockchain-explorer-tutorial/)

[What is Blazor WebAssembly? — Learn | Microsoft Docs](https://docs.microsoft.com/en-us/learn/modules/build-blazor-webassembly-visual-studio-code/2-understand-blazor-webassembly)

[What Is Infura? | The Beginner’s Guide — Decrypt](https://decrypt.co/resources/what-is-infura)

[Ethereum API | IPFS API Gateway | ETH Nodes as a Service | Infura](https://infura.io/)

[Create and use ASP.NET Core Razor components | Microsoft Docs](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0)

[How to deploy ASP.NET Blazor WebAssembly to GitHub Pages (swimburger.net)](https://swimburger.net/blog/dotnet/how-to-deploy-aspnet-blazor-webassembly-to-github-pages)

#### Also, Read

- [Learn about Ethereum and Web3](https://blog.coincodecap.com/go/learn)
- [Crypto Trading Bots](https://medium.com/coinmonks/crypto-trading-bot-c2ffce8acb2a)
- [3Commas Review](https://medium.com/coinmonks/3commas-review-an-excellent-crypto-trading-bot-2020-1313a58bec92)
- [AAX Exchange Review](https://medium.com/coinmonks/aax-exchange-review-2021-67c5ea09330c) | Referral Code, Trading Fee, Pros and Cons
- [Deribit Review](https://medium.com/coinmonks/deribit-review-options-fees-apis-and-testnet-2ca16c4bbdb2) | Options, Fees, APIs and Testnet
- [FTX Crypto Exchange Review](https://medium.com/coinmonks/ftx-crypto-exchange-review-53664ac1198f)
- [NGRAVE ZERO review](https://medium.com/coinmonks/ngrave-zero-review-c465cf8307fc)
- [Bybit Exchange Review](https://medium.com/coinmonks/bybit-exchange-review-dbd570019b71)
- [3Commas vs Cryptohopper](https://medium.com/coinmonks/cryptohopper-vs-3commas-vs-shrimpy-a2c16095b8fe)
- The Best Bitcoin [Hardware wallet](https://medium.com/coinmonks/the-best-cryptocurrency-hardware-wallets-of-2020-e28b1c124069?source=friends_link&sk=324dd9ff8556ab578d71e7ad7658ad7c)
- [Crypto Copy Trading Platforms](https://medium.com/coinmonks/top-10-crypto-copy-trading-platforms-for-beginners-d0c37c7d698c)
- Best [monero wallet](https://blog.coincodecap.com/best-monero-wallets)
- [ledger nano s vs x](https://blog.coincodecap.com/ledger-nano-s-vs-x)
- [Bitsgap vs 3Commas vs Quadency](https://blog.coincodecap.com/bitsgap-3commas-quadency)
- The Best [Crypto Tax Software](https://medium.com/coinmonks/best-crypto-tax-tool-for-my-money-72d4b430816b)
- [Best Crypto Trading Platforms](https://medium.com/coinmonks/the-best-crypto-trading-platforms-in-2020-the-definitive-guide-updated-c72f8b874555)
- Best [Crypto Lending Platforms](https://medium.com/coinmonks/top-5-crypto-lending-platforms-in-2020-that-you-need-to-know-a1b675cec3fa)
- [Ledger Nano S vs Trezor one vs Trezor T vs Ledger Nano X](https://blog.coincodecap.com/ledger-nano-s-vs-trezor-one-ledger-nano-x-trezor-t)
- [BlockFi vs Celsius](https://medium.com/coinmonks/blockfi-vs-celsius-vs-hodlnaut-8a1cc8c26630) vs Hodlnaut
- [Bitsgap review](https://medium.com/coinmonks/bitsgap-review-a-crypto-trading-bot-that-makes-easy-money-a5d88a336df2) — A Crypto Trading Bot That Makes Easy Money
- [Quadency Review](https://medium.com/coinmonks/quadency-review-a-crypto-trading-automation-platform-3068eaa374e1)- A Crypto Trading Bot Made For Professionals
- [PrimeXBT Review](https://medium.com/coinmonks/primexbt-review-88e0815be858) | Leverage Trading, Fee and Covesting
- [Altrady review](https://blog.coincodecap.com/altrady-reivew)
- [Ellipal Titan Review](https://medium.com/coinmonks/ellipal-titan-review-85e9071dd029)
- [SecuX Stone Review](https://blog.coincodecap.com/secux-stone-hardware-wallet-review)
- [BlockFi Review](https://medium.com/coinmonks/blockfi-review-53096053c097) | Earn up to 8.6% interests on your Crypto
- [Coinrule review](https://blog.coincodecap.com/coinrule-review-a-perfect-trading-bot)
- [Best Blockchain Analysis Tools](https://bitquery.io/blog/best-blockchain-analysis-tools-and-software)
- [Crypto arbitrage](https://medium.com/coinmonks/crypto-arbitrage-guide-how-to-make-money-as-a-beginner-62bfe5c868f6) guide: How to make money as a beginner
- Best [Crypto Charting Tool](https://medium.com/coinmonks/what-are-the-best-charting-platforms-for-cryptocurrency-trading-85aade584d80)
- What are the [best books to learn about Bitcoin](https://medium.com/coinmonks/what-are-the-best-books-to-learn-bitcoin-409aeb9aff4b)?

> [Get Best Software Deals Directly In Your Inbox](https://medium.com/coinmonks/newsletters/coinmonks)

[![](https://cdn-images-1.medium.com/max/584/1*BoDnKUyK8p4hitHAJZ5Pdw.png)](https://medium.com/coinmonks/newsletters/coinmonks)

* * *