Scaffold Mina - Tooling

Mina Navigator Proposals
1

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

14, September 2024
Funding Note: This proposal is approved for funding. This will improve developer experience to rapidly build with mina. There are important issues related to design/adoption by @45930 and we hope the team will take this into consideration as they progress and build with a community-centric approach. The risk and impact are both medium and the budget is inline with the work proposed.

23rd, September 2024
Current status: Funded
Opened for community discussion on : 22nd July,2024.

2

Title

Scaffold Mina

Project Background

Scaffold Mina is a starter kit designed to help developers quickly build and deploy Mina zkApps with integrated frontends and smart contracts. It enables developers to get started swiftly with just a few commands, simplifying the initial setup for new developers exploring Mina and assisting existing developers in setting up new projects without the hassle of manual configuration. Additionally, Scaffold Mina offers React hooks that enable easy interaction with smart contracts.

The current version of Scaffold Mina can be found here.

Proposal Overview

Problem: The existing scaffold provided by the zkapp-cli is not optimal for developers aiming to create production-ready projects. It is primarily designed for simple single-page React applications, requiring developers to build additional components for a complete web application from scratch.

Solution: During our participation in the Starter Program, we developed an improved scaffold that abstracts away initial configuration complexities and provides React hooks for seamless integration across applications. In this proposal, we aim to further enhance Scaffold Mina by adding tools to improve both the developer and user experience.

Key enhancements include:

  • MinaJS Integration: We will integrate MinaJS to provide a seamless wallet connection interface compatible with WalletConnect and TypeScript-ready account interactions. Since MinaJS is still in development, we will also contribute to MinaJS as needed for this project. The ultimate goal is to have Scaffold Mina included as part of the MinaJS toolkit, allowing developers to use this scaffold to start a well-structured project that can be easily maintained and expanded.
  • React Hooks & Functions: We will extract the React hooks and functions into standalone modules, making them easily usable in other Mina zkApps. We plan to extract types directly from the o1js smart contracts by leveraging TypeScript, as it is the language used for writing o1js smart contracts. However, if necessary, we will also develop a tool similar to @wagmi/cli to generate hooks and types specifically for the frontend. Weā€™ll keep these tools compatible with MinaJSā€™s architecture, similar to how wagmi is compatible with viem.
  • Lightnet Integration and Burner Wallets: We will integrate Minaā€™s Lightnet for deploying and testing contracts on a local blockchain, along with the block explorer. We will also provide browser-based burner wallets for interacting with Lightnet.
  • General Improvements Based on Community Feedback: While gathering feedback from the community, several improvements and features were suggested for the Scaffold, including a ā€˜Debug Contractsā€™ tab in the frontend, using cached prover keys, the possibility of moving compiling and proving to the cloud, improving the smart contract deployment script, and mobile support. We are also considering adding off-chain storage support, but further research is needed to determine the most viable and standard approach, and whether it can be accomplished within the scope of this proposal.
  • Website and Documentation: We will provide documentation for the developed tools to ensure developers can conveniently utilize them.

We may add or remove features based on feedback from the community and our own experience during development, but such changes will be guided by feedback and confirmation from the Mina developer community, not by personal decisions from our team.

Impact: We believe this project will make it easier for developers to build on Mina, fostering the development of more projects and contributing to the growth of the Mina ecosystem.

Audience: The target audience includes both new developers starting on Mina and existing developers looking to streamline the setup of new projects.

Architecture & Design

Design: The structure of Scaffold Mina draws inspiration from wagmi and viem, tools already familiar to many web3 developers. For this proposal, we will focus on providing these tools for React, given its popularity in the web3 space.

Vision: Our vision is to make these development tools as modular as possible and to follow the architecture of existing web3 tools, creating solutions that are familiar and convenient for web3 developers and users.

Timeline

  • MinaJS integration and providing React hooks: 1 month
  • Lightnet integration and general improvements mentioned in the proposal: 1 month
  • Finalize and improve the tool based on feedback from Mina developers: 1 month

Budget & milestones

  • Deliverables & Mid-Point milestones: We will deliver the developed tools at each milestone as outlined in the timeline section.
  • Project Timeline: 3M
  • Budget Requested: 72,000 MINA
  • Wallet Address: B62qs1fVSySq8fAMmLumRwhnFQxhgKSyKqBzuHp8LX1VASWERJKSSoV B62qn3bDNBvWm4HoY7x7UfuLxPYrsMoeeppwevPjDehhLLcdCRp3AMq

Team Info

Risks & Mitigations

Since we already have the foundation for the Scaffold project, the risk involved in further development is minimal. The main potential risk lies in unforeseen challenges when adding features and integrating tools. To mitigate this, we have already vetted the tools we plan to integrate and will maintain regular communication with the Mina developers community in case we encounter any challenges.

2 Likes
3

I like this idea, as Iā€™m a huge fan/user of the Scaffold-ETH repo(s). If executed well, it can be a great tool to use for building on Mina during hackathons. I am excited to use this in the future.

Where/how do you gather the community feedback? Iā€™m building my own Scaffold fork at the moment (unrelated to Mina), so Iā€™m curious to see how you are doing things.

2 Likes
4

Your existing site is pretty cool!

For the features and impact of this new proposal, do you think thereā€™s a lot of appetite for these tools? You mentioned gathering some community feedback; could you share it here?

I think thereā€™s actually a ton of opportunity for tools built to complement o1js and Mina that will be useful. Especially in a context like a hackathon or a developer workshop. Are you aiming to actually productize in that space, or are you developing features more for your own practice and to explore the space a little bit?

5

Thanks so much for your attention and support :slightly_smiling_face: @arjanjohan @45930

For the initial feedback while writing the proposal, @hgedia connected me with some Mina developers privately, but Iā€™m willing to connect with more developers.

Also, for anyone reading this post, please feel free to share any feedback or ideas you have regarding the scaffold project here, in the GitHub issues, or you can message me privately via Telegram or Discord (username: TheMonkeyCoder).

Iā€™m aiming to develop this as a starter kit for developers who want to start building a new project on Mina, but exploring the space and becoming more involved with the Mina community are also my goals.

6

There are a lot of projects with a similar goal, but AFAIK, they donā€™t have strong developer adoption. I think if youā€™re serious about building a product that people will use and trust, you should more research and understand this problem: Why do so many developers agree that getting started with Mina is hard, but platforms aimed at developers getting started are not used?

Personally, I agree that this is an interesting problem space, but your proposal to address 5 bullet points in 3 months seems like it will only scratch the surface on a broad range of issues instead of solving one thing really well. I donā€™t understand the unique part of your project that will be better than the existing documentation for onboarding new developers.

That said, thereā€™s definitely room in navigators for learning projects. Thereā€™s value in producing stuff like ā€œhow to use o1js in a react hookā€ examples for other people to use. I think the work you present sounds interesting and worth pursuing. Iā€™m just trying to understand whatā€™s more important in this proposal: the impact that it has on actual zkapp developers using it? Or the list of deliverables that you plan to build whether or not developers use them?

1 Like
7

This proposal is approved for funding. This will improve developer experience to rapidly build with mina. There are important issues related to design/adoption by @45930 and we hope the team will take this into consideration as they progress and build with a community centric approach. The risk and impact are both medium and the budget is inline with the work proposed.

8

Would you please share these projects? I could only find the scaffold project in the zkapp-cli which is not suitable for starting a project. The entire front-end logic is written in a single function in a single component here, so the developers still need to think about everything from scratch when they want to start a project with multiple pages and components.

I actually experienced this feeling of ā€˜getting started with Mina is hardā€™ myself, and in my opinion the main reason is the lack of complete end-to-end examples. As a developer, itā€™s essential to have examples to reference in order to check whether youā€™re doing things right or wrong, and to see a correctly working piece of code when youā€™re stuck. I remember when I started developing on Ethereum in 2021, the Uniswap Interface repository was one that many developers, including myself, referred to while building their projects. Many web3 front-end projects were copying large chunks of code and modules from this repository.

My goal is to provide a complete example that developers can start building upon, while also following the structure of wagmi to make the developer interface similar to what web3 developers are already using.

Definitely the first one

1 Like