Blocks
Ethereum inside your browser

  • Role: Front-End Developer
  • Tenure: Apr 2020
Blocks project hero image
  • React
  • TypeScript
  • Ethers.js
  • Next
  • Styled Components
  • Jest & Testing Library

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.

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 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 is equally brilliant at creative visual design as he is with the technical side of engineering a modern web app. Whatever task he is working on he will go above and beyond to deliver at a very high quality level. As a fellow UI developer I have learnt a lot from working with him.

Ben Browning
Name
Ben Browning
Role
UX Engineer
Company
Bright
Get in touch