ZkProgram default example starter

[ymekuria]

Summary

This PR adds a new ZkPogram default example that is included with projects generated with the zkApp-CLI. This example was also coupled with a new example template UI that demonstrates an end to end flow of generating proofs with a ZkProgram, and settling the state on Mina.

Impact

The previous default example set up the developer community for failure. While this example highlighted the intuitive nature of writing proofs with o1js, it extended the SmartContract class which abstracted away a lot of the complexity of what was happening.

The new example was created using ZkProgram which has more clear inputs, outputs, and behavior. This coupled with the end to end UI example will allow a developer to make more progress on their learning journey by providing an easy to reason about example that can quickly be iterated and rerun.

Changes

• AddZkProgram was created that can generate proofs and update the state
• Add.ts was modified to only verify a proof created by AddZKprogram and settle the state to Mina
• The example default tests Add.tests.ts were modified to test interactions with the AddZkPogram
• The interact.ts was modified to generate proofs with the AddZkProgram and interact with a deployed Add.ts contract that settles the state to Mina
• A new example contract was deployed that is used in the UI https://minascan.io/devnet/account/B62qoptamt2EgyY2UM2WD7UVJRvuuDMxw2cLdENc92iVNm6FwsLX4Fk
• A new example template UI was added that demonstrates an end to end flow of generating proofs with a ZkProgram, and settling the state on Mina.

[45930]

This is great! Thank you for also redeploying a new contract and updating the interact script <3

I left some specific comments. As a general comment, does the new UI only work with next/react? If so, I'd be comfortable removing the not-as-supported frameworks from the options so that users can't accidentally opt into a worse experience. I ran the new code with nuxt and everything works fine, but the UI has no zkapp elements by default.

[ymekuria]

As a general comment, does the new UI only work with next/react? If so, I'd be comfortable removing the not-as-supported frameworks from the options so that users can't accidentally opt into a worse experience. I ran the new code with nuxt and everything works fine, but the UI has no zkapp elements by default.

@45930 We previously did not create UI zkapp interactions with Svelte and Nuxt, so I only added the new ZkProgram interactions to the Next scaffold. Although Svelte and Nuxt are not-as-supported as Next in the CLI and our other examples, we still provide all the necessary configurations for them to work with o1js. I see a few paths forward.

1. Remove Svelte and Nuxt from the scaffold if we decide just adding the necessary configs for o1js in the UI is not adding enough value. This would make it easier to maintain.

2. Add the new zkapp UI interactions to Svelte and Nuxt. This could give more options to the community but I'm not sure what the demand is for this. Antidotally, I hear of devs using Svelte in some of their projects.

3. Leave the Svelte and Nuxt scaffolds without the zkapp UI interactions. Tradeoff of more options, but a worse experience for these two.

I assume you think option 1 is the path forward we should take. Is that correct?

[45930]

@ymekuria I think all options are reasonable. Let me take a quick poll in discord about who is using the zkapp-cli and what UI they are using.