Account update visualizer (VS Code)

[hgedia]

This topic is to discuss the proposal submitted by @YashBit .Please see below for the details of the proposal and discussion.

16th Oct ,2024
Current status: Under Consideration.
Opened for community discussion on 16th Oct, 2024.

[krish]

Visualize Account Update (Issue #14)

Project Background

The Mina Protocol enables complex transactions resulting in multiple account updates, including token transfers, state changes, and delegation modifications. Currently, developers can view these updates in JSON format using the toPretty() function. However, as transactions become more intricate, the JSON output becomes difficult to interpret, especially for transactions involving multiple accounts or complex smart contract interactions.

This project aims to develop a VSCode extension that integrates with JSON Crack to create a powerful transaction visualization tool that will:

• Generate and visually represent account update JSONs within VSCode
• Allow developers to easily understand transaction structures without network deployment
• Facilitate debugging of complex smart contract interactions
• Leverage JSON Crack’s advanced visualization capabilities

By creating a more intuitive way to visualize and comprehend transaction structures directly within the development environment, this tool will significantly enhance the development experience on the Mina Protocol, addressing a key need identified by the developer community.

Proposal Overview

Problem

Complex transactions in the Mina Protocol result in JSON outputs that are difficult to interpret, especially for transactions involving multiple accounts or intricate smart contract interactions. This hinders developers’ ability to understand and debug their transactions efficiently within their development environment.

Solution

Develop a VSCode extension that integrates with JSON Crack to visually represent account updates and transaction structures. This tool will transform complex JSON outputs into intuitive, interactive graph visualizations directly within VSCode.

Impact

This proposal will significantly enhance the Mina ecosystem by:

1. Improving developer productivity and reducing debugging time by providing in-editor visualization
2. Lowering the barrier to entry for new developers in the Mina ecosystem
3. Enabling more complex and innovative applications by making intricate transactions easier to understand and implement
4. Leveraging the power of JSON Crack to provide advanced visualization features for Mina transactions

Audience

The primary target audience includes:

1. Mina Protocol developers working on smart contracts and complex transactions
2. New developers entering the Mina ecosystem
3. Blockchain explorers and wallet developers in the Mina ecosystem who can adapt this tool for their needs

Architecture & Design

Detailed Design/Architecture

The proposed VSCode extension for Mina Transaction Visualization will integrate with JSON Crack and focus on the following components:

1. State Analyzer:

   • Code Parser: Extracts account states from the code using the VSCode extension.
   • State Transition Detector: Identifies changes between states. We envision it more than just a debugger. The extension would attempt to simulate the txns/account updates while the test runs and/or while the code is being written and print the transitions next to the code with an option to double click and drill down further if needed
   • Relationship Builder: Creates relationships between state variables

2. JSON Crack Integration:

   • Data Formatter: Converts analyzed data into JSON Crack compatible format
   • Visualization Engine: Generates the interactive graph using JSON Crack
   • Export Functions: Allows exporting the visualization as images or data. All attempts would be made to cover probable dev environments.

3. VSCode Extension Interface:

   • WebView: Displays the JSON Crack visualization within VSCode
   • User Interaction Handlers: Manages code selection, analysis triggering, and graph interaction.

Diagram 1: High Level Design of Information Flow

Diagram 2: Example UI

Vision

Our vision for this project is to create a seamless, in-editor transaction visualization tool that significantly improves the Mina development experience. Key aspects of this vision include:

1. Seamless Integration: Providing visualization capabilities directly within VSCode, where developers spend most of their time.
2. Enhanced Detail: Offering comprehensive and easily digestible information about each AccountUpdate and its components.
3. Interactivity: Leveraging JSON Crack’s interactive features for a dynamic exploration of transaction structures.
4. Export Options: Enabling developers to easily share and incorporate transaction visualizations into their documentation and discussions.

By realizing this vision, we aim to improve the developer experience and contribute to the growth of the Mina ecosystem. This VSCode extension will serve as a powerful tool in the Mina development toolkit.

Deliverables

Mid-Point Milestones (1 month):

1. State Analyzer:

   • Completed Code Parser for extracting account states
   • Implemented State Transition Detector
   • Basic Relationship Builder functionality

2. VSCode Extension (Basic Version):

   • Functional VSCode extension with WebView
   • Ability to select code and trigger analysis
   • Basic integration with JSON Crack for visualization

3. JSON Crack Integration (Partial):

   • Data Formatter for converting to JSON Crack format
   • Basic interactive graph generation within VSCode

Project Timeline: 2 Months

Week 1-2:

• Develop State Analyzer components
• Set up VSCode extension project structure

Week 3-4:

• Implement basic VSCode extension functionality
• Begin JSON Crack integration
• Mid-point review and adjustments

Week 5-6:

• Enhance JSON Crack integration with advanced features
• Implement export functionalities
• Comprehensive testing and bug fixes

Final 2 weeks:

• Final polishing of UI/UX within VSCode
• Documentation writing
• Preparation for VSCode Marketplace deployment

Budget Requested: 45,000 MINA

Budget Breakdown:

1. Development Costs: 35,000 MINA

   • State Analyzer Development: 12,000 MINA
   • VSCode Extension Development: 13,000 MINA
   • JSON Crack Integration: 10,000 MINA

2. Testing and Quality Assurance: 5,000 MINA

3. Documentation and Deployment: 3,000 MINA

4. Project Management: 2,000 MINA

Wallet Address:

B62qrF8xMKPPQMCwK2J7Ey47CGy1bKvaKhYNuYURN8qVohr1NJcnhRj

Team Info

Proposer Github: If you have Github profiles that are relevant to this proposal, list them here.

Yash Bharti: YashBit (yash_b) · GitHub

Proposer Experience: If you have relevant experience building zkApps or other dApps, provide that information here. If available, include links.

1. PSE - Ethereum Foundation Grantee
2. Internet Computer Grantee
3. Distributed Systems, Web Dev, ZK
4. Rust, C++, Python, Next JS

Team Members:

1. Krishanu Dhar: ronykris (krish) · GitHub
2. Rute Figueiredo: rutefig (Rute Figueiredo) · GitHub

Risks & Mitigations

1. Technical Complexity: Enhanced parsing of AccountUpdate objects may be more complex than anticipated.

   Mitigation: Begin with thorough analysis of existing code. Prioritize core functionalities and prototype early.

2. Performance Issues: Increased detail in visualization may cause performance bottlenecks.

   Mitigation: Implement progressive rendering and lazy loading. Conduct regular performance testing.

3. Compatibility with Future Mina Updates: Changes to Mina’s transaction structure could break the visualizer.

   Mitigation: Design a modular core engine. Maintain communication with Mina core team. Implement extensive unit testing.

4. Scope Creep: Risk of exceeding the 1.5-month timeline due to feature expansion.

   Mitigation: Clearly define and prioritize features upfront. Use agile methodologies. Be prepared to adjust scope to meet timeline.

By anticipating these risks and implementing mitigations, we aim to ensure smooth development and delivery of the Enhanced Mina Transaction Visualizer within the proposed timeline and budget.

[AlexIvlev]

I find this proposal quite interesting.

It has two main benefits from my perspective:

1. The proposal itself: It should make debugging zkApps much easier by allowing easy identification of state changes. It would be great if events, actions, and possibly some chain information like block height were also displayed.

2. Potential team acquisition: With this proposal implemented, Mina can acquire a team that understands both Mina’s architecture and the structure of VS Code. This team would be able to create additional modules for VS Code, with potential plugins such as unprovable code detection, debugging tools, and more.

The only concern is the team’s experience in development using o1js. If they lack this experience, a mentor with expertise would be necessary, as Mina has some unique features that can take time to master, potentially affecting the proposal’s timeline.

[hgedia]

I am summarising the feedback we have received from developers in the community.

Technical information

The AccountUpdates has different representations depending on where and how we view them
tx object (not JSON) after Mina.transaction is a tree, and there is NO function that serialize it fully. This function should be developed, probably as o1js PR in case there will be private fields not accessible or, other way, access the fields by using any, bypassing o1js controls.

• json received as tx.toJSON()
• json received after sending the tx
• json received after the tx is included into the block
• json in usual node
• json in archive node (miss some fields due to the bug in archive node)
• json in blockberry (mix of two above).

It is important to get errors when sending the tx and link the errors to the specific AccountUpdates.All of the above representations except first are flat arrays, the first is tree with child updates and is more interesting to analyze.It is not enough to visualize the JSON produced by o1js by default.

It would be great to support several standard contracts to mark the type of contracts and accounts in AccountUpdates (like FungibleToken and FungibleTokenAdmin) in visualizations.

State Analyzer:

Code Parser: Extracts account states from the code in VSCode
State Transition Detector: Identifies changes between states
Relationship Builder: Creates relationships between state variables

AccountUpdate building is deep in the o1js code and you wont be able to rebuild AccountUpdates just by analyzing the contract code, you need actually run Mina.transaction to get the forest of AccountUpdates.

Recommendation

It would be better if the team spends some time working with account udpdates to understand the current issue and update the proposal as the solution aimed for VS code might not be feasible. It might be easier to start with balance transfer states & move to zkApp states. We feel the solution improving the JSON output of the update is more helpful than a VS code integration.

[hgedia]

After discussing with the team, this proposal is on hold and the team will be researching designs on the solution in the coming weeks.