Following my Blockchain’s development workflow, today, I’m proud to release the first version of SmartContract UI – a quick and easy way to interact with blockchain’s data!

TLDR: You can try it here – contract.mph.am, feel free to check and build it for yourself from here – smartcontract-ui.

Screenshot

What is it?

It’s for interacting with the Blockchain, where you can build a request and send it to an ethereum node, to get back the data stored on a smartcontract, or update its data.
Thinking it’s like the Postman app, but if Postman is for Web2.0, I designed SmartContract UI for the Web3 era. So if you’re gonna prepare yourself for the next generation of the Web, it might be an interesting tool for you!

Why I created it?

I was working on some decentralized projects built on top of blockchain technology, which involves interaction with the blockchain’s data, including reading & writing operations on many smart contracts across many different chains, using many different wallets.
For each operation, I’d have to declare the smart contract’s interface, choose the right wallet to sign, and pass the correct arguments for the function call. It’s pretty boring, error-prone, and wasted a lot of time.
So I’ve decided to create a GUI tool to make my life easier! I hope it’s also useful for you!

How I did it?

I choose NextJS because I really love React and Typescript!
For the UI, I picked Material-UI library to quickly build a friendly interface
To handle the data easily, I choose Immer for state data management, and localForage for browser storage.
I prefer EthersJS over Web3JS when interacting with the smart contracts & wallets because it’s more flexible.

Roadmap

I’ve just spent some hours last weekends creating it, so I’m sure there will be many improvements to do. I really like the ideas of Web3 (excepts BS from the media, of course), and I think smart contracts will soonly change the way how we browse webs and use the Internet. So a Smart contract UI tool like this could help us a lot while developing decentralized apps (dApps).
And beside it, I love to create tools for me and the community!