Published on

Improving NextJS Ethereum Explorer: Contract UI Improvements

Improving NextJS Ethereum Explorer: Contract UI Improvements

We continued to work on Ethereum Contract Explorer, a comprehensive tool for exploring Ethereum contracts and their associated data. With this project, I aim to provide users with an easy to use interface for exploring Ethereum contracts.

During the last week we focused on building a better UI for a contract page of explorer. In particular, we built a comprehensive modal for functions, current state, events, constructor, views, fallbacks and payables.

What is a modal?

A modal is a graphical user interface element that appears on top of the rest of the content on a screen and requires the user to interact with it before they can proceed with other actions. It typically serves to get the user's attention and prompt them to make a decision or provide information before continuing with a task. Modals can vary in size and content, from simple alerts or confirmation messages to more complex forms for data entry.

New NextJS Explorer Interface

The contract interface was also improved to provide more detailed information about the contract such as the code, current states, events, contract balance and functions.

Functions modal

Additionally, we added 10 latest transactions for the contract and improved the UI to display the correct amount of ethereum and number of tokens in the contract.

NextJS Ethereum Explorer interface: part 1
NextJS Ethereum Explorer interface: part 2