VerifyScout

Screenshots

Problem Statement

Phase 1 is a simple way to view verified contracts and verify contracts on BlockScout. The intention long term would be to turn this into a dashboard where a user could add, edit and remove widgets, customising their view on their contracts giving them visibility of through-put and usage of what they are building. Future components could include a bank of widget components with drag and drop functionality, the opportunity to track past verified contracts and personalise the data shown from BlockScout.

Solution

I made this using Next.js, React, Typescript whilst taking advantage of libraries such as React Query and Shadcn. I tested the smart contract verification by creating a simple contract on Remix and running it through the BlockScout tool. First of all I utilised React Query and the BlockScout 'smart-contracts' API to display some of the latest verified transactions. I simply used a .slice() method to display the latest couple of transactions but would look to introduce some simple pagination or only retrieve X number of transactions in the first place. I then moved on to the form to try and verify smart contracts in the dashboard. I setup the form utilising Shadcn components and began hooking it up to the POST request. Here I ran in to some troubles around what the body of the POST should look like and kept retrieving 400 errors so for my demo I am showing the UI and then verifying my smart contract through the BlockScout online tool.