Blocks

Blockchain in your browser

Mockup of the Blocks application shown on a tablet device

Blocks is a minimal Ethereum explorer initially built for a technical assessment. After putting together the initial concept I decided to continue extending it as an excuse to try new techniques as well as further familiarise myself with decentralised applications. It features a block overview, transaction list, light / dark themes and shuffle function.

Front-End Developer
Apr 2020
  • React
  • TypeScript
  • Ethers.js
  • React Spring
  • Gatsby
  • Styled Components
  • Jest / Testing Library

Overview

I designed and built the first version of Blocks in early 2020 as part of the technical assessment process at Aragon, I wanted to design a tightly scoped app that was visually exciting and offered opportunities for interesting interactions. While the utility of the app is not comparable to the best of existing tools, it still gave me the opportunity to learn more about the Ethereum and experiment with some new front-end techniques.

An interesting byproduct of this project was being able to receive critique and feedback on my implementation during the assessment, this effectively turned the process into an additional knowledge stream and provided learnings which I could cycle back into the code, further improving it for my own needs. While I invested time above and beyond what is typical, I found it exciting to work on and helpful for professional growth.

Multiple tablet devices showing screens from the Blocks application

Decentralized technology takes some practice

Blocks was originally using Web3.js and a MetaMask provider to fetch block information, this was the simplest way to get started but had big drawbacks – primarily the need to have a wallet installed and connected before being able to fetch data. Migrating to Ethers.js offered a more intuitive, opinionated API while using Infura, Alchemy and Etherscan backed nodes solved the wallet provider problem. That said, many of these concepts were new to me, and while the typical centralised stack is mature and fast, Web3 initially felt cumbersome and difficult to use, which is only made more obvious from the proliferation of excellently documented, low cost data services available with the former.

Another aspect I had to consider was that interacting with a chain directly from a client requires that the front-end handles much of the data massaging and manipulation when a centralised backend service would normally handle this work. I found myself having to be careful not to carelessly perform calculations with standard Number types and make ample use of Big Number formatting libraries to guard against safe range errors.

Tech moves fast though, and we now have fantastic projects such as The Graph offering a data abstraction layer powered by Subgraphs and GraphQL, we even have native support for BigInt directly in the browser, greatly reducing bundle size and standardising around a single API. It's these types of learnings and exposure to new technology that make investing in personal projects rewarding and valuable.

Blocks application screen showing the home page with title and block list
Blocks application screen showing a list of blocks with details
Blocks application screen showing detailed information about a block
Blocks application screen showing a list of transactions associated with a block

Andy has an unparalleled thirst for knowledge which keeps him always on top of his game, self-motivated and not only positively contribute to projects, but guide & motivates other team members too. His ability to absorb the brief and come up with unique and artistic designs whilst conforming to constraints of web is phenomenal.

Yohan Fernando

Senior Software Engineer
Brandwatch