ContracTx

Web app for visually exploring Ethereum smart contracts
Role: UX/UI design, frontend development
View source on GitHub

Summary

Tools for exploring Ethereum smart contracts (e.g. Etherscan) do not offer elegant data visualizations. ContracTx seeks to solve this by presenting user-friendly charts for any smart contract. Max Wolff developed a backend and API to pull data from Etherscan's transaction logs and approached me to design and develop an interface.

Process

I began by creating a Figma prototype with empty states for the charts. The idea for a dark analytics interface was inspired by the Bootstrap Dashboard theme's fluid layout. The higher contrast and light shadows also bring the charts forward since they are the primary focal point of the interface. It was important to include an example as a call to action within the empty charts. The example case serves as a primary entry point to interaction since many users are new to this tool and blockchain in general and may not have an Ethereum address to explore on hand. I chose the popular CryptoKitties game as the example since it provides a lot of volume and many functions to explore.

After mocking up a two-chart layout in Figma, I took the project to code to create a React app on top of the API. We decided to use Highstock from Highcharts inside each chart component to graph data sampled from Etherscan transactions. The top chart graphs the last month of functions called for the contract. The bottom chart graphs the usage of the contract as a percentage of total Ethereum traffic. The order of the charts was switched after determining that users were more interested in exploring contract functions. The charts were styled using Highcharts JavaScript options and colors for the multiple series in the top chart were sourced from Flat UI Colors.

The last step was to include some instructions on how to use the app. A sidebar menu provides a basic overview for the utility and provides the same CryptoKitties example case as another entry point for chart exploration interactions. The sidebar also offers a guide for more advanced usage so that users can explore other contracts of their choice. The menu exposes the endpoint for API requests so that developers can gather data for their own use. Lastly, a colophon summarizes some of the project details.

Outcome

The app never received an official launch, but was deployed to Heroku and shared amongst a small group of developers for light usage. This ultimately turned out to be a learning project where I improved my skills with React, learned how to create a frontend that interacts with an API for a useful outcome, and worked on my JavaScript skills to implement Highcharts. The project also acted as a launchpad for Max to enter the ETHDenver hackathon and start a blockchain company called Marble. We subsequently worked together on a branding project and launch for the company (case study here).