Visual Blockchain Designer/Explorer

A desktop app that allows users to visually design, explore, and debug smart contracts

Crypto enthusiast with a background in Flutter. My mentor and advisor is the CTO for a top Cardano DeFi project.

The Problem

Understanding existing smart contract protocols is tough.

Unlike smart contracts written in Solidity that resemble traditional API invocations, smart contract protocols in Cardano look more like event driven architectures where each transaction represents a transition of the underlying state. Without a sherpa to guide understanding, trying to make sense of what a protocol is doing from the mountain of transactions it generates is a significant undertaking.

In the early days of the web, the ability to view-source was that Sherpa. Developers could look at a web page and understand the code that generated that page simply by viewing the source. Want to understand how that cool page did something? View source.

This tool hopes to be that Sherpa. The tool will allow developers to look at the blockchain and understand how protocols are working and then to design new protocols of their own and share their ideas with others.

Communicating a new protocol can be just as tough

Smart contract protocols begin with the team writing a lite paper or a white paper, outlining the flow and goals of the project. Going from a lite paper or white paper to communicating with a team that spans across diverse skills and backgrounds, keeping everyone on the same page, is a challenge.

Teams also need ways to communicate their projects with outside parties such as investors and auditors. Auditors are already very expensive, so concise, consistent, and coherent communication is essential to smooth out that process. A misunderstanding can cost a company a lot in terms of both money and time.

Currently, every team has created their own way of communicating their protocols with each other and to outside parties, and each time someone new is brought up to speed teams have to teach their style of communication on top of their protocols. A common format can smooth out and speed up this process.

Debugging can feel like navigating a maze

Current tools for navigating the Cardano blockchain are difficult to set up for private blockchains. In order for developers to watch their transactions on their private test networks, there are a litany of tools they have to incorporate to crack open the black box of smart contracts.

Smart contracts on the Cardano network will use NFTs as "passports", leveraging the certified uniqueness of the NFT to ensure that the UTXO entering the smart contract's transaction cascade is the correct one, protecting against adversaries from interfering and stealing the funds. (For a more detailed description of how NFTs can protect against bad actors, please refer to the following article.)

https://medium.com/dcspark/every-eutxo-dapp-will-use-nfts-and-heres-why-fd87e6a8c9a6

There are currently no tools that can follow these tokens along smart contracts, essentially creating a black box scenario for developers to have to debug based solely on whether their test transactions are successful or not.

Proposed Solution

Discover smart contracts on the blockchain

As both a desktop program and a web app, will distill down transaction and protocol information into a visual, graphical representation of how funds flow between UTXOs and transactions. It will be able to graphically lay out the myriad of transactions that make up a smart contract protocol so that it is easier to understand at a glance. Using the app, a person will be able to "walk" the blockchain, following the flow of ADA through various transactions.

The user will be able to select a UTXO or transaction, referred to as a "node", and see all the relevant information about the node displayed on a properties pop-up. Then, using arrow keys, mouse, or touch depending on the platform, the user can traverse the graph and auto populate the graph in the direction the user takes.

Related transactions, such as those part of a smart contract protocol, can be labelled or color coded for easy identification.

Design new smart contracts

In design mode, teams will be able to visually lay out their smart contracts, including how tokens will be handled and passed along the various transaction routes. Users will be able to create an interactive experience for their teams and outside parties, allowing for easier communication around their specific goals instead of wasting time trying to understand the protocols.

A unified form of communication will allow more teams to collaborate and bring this technology to areas beyond the tech sector. Simplifying smart contracts with visual cues leaves more time for problem solving.

A database of common protocols can also be created as a starting point for teams to build from rather than having businesses have to build their idea from scratch.

Debug smart contracts on private networks

As a desktop application along with a graphQL interface, developers will be able to connect to their private networks and debug their smart contracts as they build them. The interactive interface will help teams watch how NFT "passports" get transferred through each transaction, making sure the coins flow in how they are intended.

It will also parse the CBOR data in each transaction and display that information in a properties panel on the screen. Developers can navigate between transactions to confirm that tokens are being passed and processed correctly.

Advantages

A visual representation of transactions and smart contracts demystifies how data and tokens are passed along the Cardano network.

This visual representation will make creating new protocols, debugging nascent protocols, and exploring currently running protocols much easier and allow teams to be on the same page during all stages of development.

In design mode, businesses and developers can manually create their protocols, using the graphs to more easily communicate ideas and foster better understanding between everyone involved. Beyond simply laying out the graph, they will be able to indicate details about how NFTs are handled and tokens are passed along.

To share designs, businesses will be able to print out the graph to share directly with others or deploy the interactive graphs to a simple website for others to access.

Since it can run on your desktop, it will allow developers to visually navigate their own private networks while developing smart contracts and other protocols. Seeing details about a transaction at each step will allow for faster debugging and clear communication among their teams.

What Has Already Been Done

I have already created a macOS desktop platform for exploring the Cardano blockchain or designing one's own transaction flow.

In explore mode, a user can input the hash transaction into the text bar and then, currently using the BlockFrost API, the app populates the screen with all the related UTXO's or transactions as a series of representative symbols (nodes) and directional links. The resulting graph, following the lead of Plutus pioneers, will be read left to right to represent the flow of tokens through these nodes.

The user can currently visualize transactions, showing all the UTXO inputs and outputs. They can also "hike" the blockchain, one transaction at a time using data displayed from each UTXO.

In design mode, the user can drag and drop transactions and UTXO symbols from an icon palette, then draw links between the two to represent the direction of ADA flow between the nodes.

**PROOF OF CONCEPT**

I have launched a website prototype of my application, allowing users to walk to Cardano testnet. It is currently preloaded with a MinSwap transaction. 
This prototype is not suitable for mobile. Please use on a laptop or desktop browser.

YouTube walk through:
https://youtu.be/2lHNeUW-0J4

Prototype website:
https://manzano.studio/

Defining Success

3 Months In:

• Beta desktop app available for Mac, Linux, and Windows

• Aim for a late November launch

• Prototype public web app available as well, for mainnet and testnet

• Visually traverse the blockchain

• Be able to connect to private test nets

• Display data within the transactions

• Print designed graphs as PDF

• Import and export files

• Professional design/ UX

6 Months in:

• Have a registry of NFTs for popular smart contracts
• Ability to download files to share between team members
• Host smart contract graphs on a community website for sharing and collaboration
• Reach half the Twitter followers of CardanoScan
• 250 downloads of the desktop app
• Complete public web app version

12 Months In:

• Allow user of custom icons and backgrounds for teams to personalize their protocols
• Have a password protected website for teams to share smart contrast as they get built
• Be the leading blockchain exploration platform
• Over 5,000 downloads

Funding Request

• 34k - Development costs ~4mo
• 6k - Public Test
• 4k - Designer
• 6k - Hosting - 6 months (mainnet and testnet)

Total funding request:

$50,000