Blockchain Explorer
A tool for inspecting and analyzing EVM based blockchains on Ethereum Networks in real time.
See case study
My role
I designed and built the front end of the open-source blockchain explorer, shipping the production interface in HTML with EEx and Sass and a custom component library.
Services
The problem
EVM and Ethereum networks generate blocks and transactions constantly, but developers and users had no open-source way to inspect that activity in a readable interface. They needed to see blocks, transactions, addresses, and token holdings as they happened.
Solution
Blockchain Summary
The summary page is the central hub for activity on the network. It's where users can see vital stats for the network performance and the most recent activity. New blocks and transactions are animated into the UI in real time as they are validated.
Address Transactions
Every address on the blockchain has a dedicated page where all address activity is recorded. Easily browse an address's content and review a complete history of transactions. I used color cues to visually distinguish transaction types and provided links for users to drill into additional content.
Token Transfers
Some token transfers can contain several transfers. I grouped all those transfers into one easy-to-read ledger so the users don't have to dig for them. Each section can also be expanded to a complete list of transfers or condensed to save space, making browsing through the list of transactions easy.
Token Holdings Modal
Each address also has a breakdown of the tokens that the address is holding. The list can be searched to find particular coins if the address has a large number of holdings.
Outcome
The explorer shipped over about 6 months with real-time block and transaction views, address pages, and token holdings, built on a custom component library.
About the client
BlockScout provides a comprehensive, easy-to-use interface for users to view, confirm, and inspect transactions on all EVM (Ethereum Virtual Machine) blockchains
