【Draft】Pod 提案:My first ZK-vote

1. 基础信息

  • 项目名称:my first ZK-vote
  • 负责人@Elon
  • 关联主线

2. 项目描述

What

整个教学网页分为五个部分:

  1. 介绍区块链交易 :介绍一个完整的区块链交易的如何发出并打包上链的,交易中包含什么数据和内容,如何在区块链上查看自己的交易信息;
  2. 介绍ZK-SNARKs的概念,并完整的一次依赖ZKSNAKRs的交易的过程;
  3. 引导用户体验一次完整L2链投票;
  4. 引导用户体验一次通过服务端生成证明提交到链上合约验证的过程;
  5. 对比两者投票过程的不同,gas费用和隐私性的不同;

Why

这个教学网页可以让用户学习到什么是区块链交易,什么是链上投票,什么是ZK,和ZK SNARKs,为后续组织投票上链奠定基础

How

整体采用 React + TypeScript 构建前端,Solidity 编写智能合约,Node.js 实现后端证明生成,结合 Circom/snarkjs 完成零知识证明相关功能

3. 资金申请

  • 联系方式:Wachat : CYL-Elon
  • 申请金额:400 USDT
  • 资金用途:本次申请为一次性激励,用于覆盖产品界面设计、前端开发实现、配置等核心环节的工作成本,保障项目按时落地。

4. Milestone 计划

(Milestone 审核通过后执行)

时长 交付结果

5. 项目需求(可选)

暂无

1 Like

双手支持!

1 Like

我正在做dapp的开发,如果有需要的话可以联系我帮忙制作

教学科普是对的

新的项目描述:

1. 基础信息

  • 项目名称:My First ZK-Vote
  • 负责人@Elon
  • 关联主线

2. 项目描述

What 什么

整个教学网页分为四个部分:

一、什么是区块链交易

  1. 介绍什么是区块链交易(图文描述,需要UI设计)
  • 区块链交易的定义
  • 区块链交易的特点
  • 交易与区块的关系
  1. 交易的生命周期
  • 详细流程详解
  1. 交易的组成部分(卡片展示)
  • 基本字段
  • 特殊交易类型
  • Gas与费用机制
  1. 不同共识下的交易确认差异
  • PoW(如比特币)
  • PoS(如以太坊合并后)
  • Rollup / L2(如 Optimism、zkSync)

二、什么是ZK(引用官方的介绍框架)

1、what is ZK ZK是多少

2、ZK的性质

3、ZK的分类

4、ZK的工作原理(加密机制,算法介绍,主要介绍ZKSNARKS的Groth16方案)

5、区块链上的应用(介绍一些优质项目,引申出投票)

  • 隐私交易 / 隐匿交易金额、交易双方:例如 Zcash 使用 zk-SNARK 来隐藏转账金额与地址信息。 Nervos Network+3Nervos Network+3Chainlink+3隐私交易 / 隐匿交易金额、交易双方:例如 Zcash 使用 zk-SNARK 来隐藏转账金额与地址信息。 Nervos Network 3Nervos Network 3Chainlink 3
  • 链下计算 + 链上验证(可扩展性):如 zk-Rollup 批量交易先在链下聚合计算,再生成一个 ZKP 在主链上验证。
  • 匿名投票 / 身份验证:用户可以证明自己有投票资格 / 身份特征,而不暴露具体身份。
  • 混合公私链 / 跨链验证:可用于验证跨链操作或混合链上链下操作正确性而不暴露细节。
  • 机密合约 / 隐私合约:使合约在执行过程中,部分数据保持私密

三、一次sepolia链上投票

1、页面展示一个投票选项,选择选项投票后提交到sepolia的合约中记录投票数据

2、页面返回交易TX,用户在区块链浏览器可查看投票交易数据

四、一次ZK-SNARKs投票

1、页面端存入数字电路(可用semaphore项目的电路文件),生成信用设置

2、用户选择选项,生成证明,提交sepolia链上(也可以是ZKSync测试链)

3、链上合约验证并统计数据

4、引导用户查看交易数据

Why 为什么

通过图文与交互动画,帮助用户从“理解区块链交易” → “体验普通投票交易” → “理解并体验 ZK 投票”的全过程,可以让用户学习到什么是区块链交易,什么是链上投票,什么是ZK,和ZK SNARKs,为后续组织投票上链奠定基础

How 如何

步骤 功能 前端技术栈 说明
:one: 教学讲解 交易流程讲解(非 3D、滑动交互) React + Framer Motion + D3.js + TailwindCSSReact Framer Motion D3.js 通过滑动(scroll-snap 或 Swiper.js)展示交易从创建到上链的过程。
:two: 钱包连接 用户连接 MetaMask wagmi + viem wagmi viem 引导用户连接钱包,检测网络是否为 Sepolia。
:three: 模拟投票 在 Sepolia 模拟提交投票 ethers.js + wagmi ethers.js wagmi 用户点击投票按钮,执行一次链上交易(Sepolia)。
:four: ZK 证明 客户端生成 ZK 证明 snarkjs + circomlibjs + WebAssembly (WASM)snarkjs circomlibjs WebAssembly (WASM) 用户本地生成 proof.json 与 publicSignals.json,不上传隐私数据。
:five: 证明上传 提交 proof 到 zkSync 验证合约 zkSync SDK + ethers.js + 自写合约zkSync SDK ethers.js 自写合约 调用 zkSync 上部署的验证器合约进行验证。
:six: 结果展示 展示投票结果或验证状态 React + Recharts / Chart.jsReact Recharts / Chart.js 可视化展示每个投票项的结果或用户的验证通过情况。

3. 资金申请

  • 联系方式:Wachat : CYL-Elon
  • 申请金额:暂定(工作量还需讨论)
  • 资金用途:本次申请为一次性激励,用于覆盖产品界面设计、前端开发实现、配置等核心环节的工作成本,保障项目按时落地。

4. Milestone 计划

(Milestone 审核通过后执行)

时长 交付结果
30days 30天 初步demo
15days 15天 测试

5. 项目需求(可选)

建议不要用 ethers.js 了,直接用 viem + wagmi 就行(因为 wagmi 也是 viem 的团队开发的,底层依赖了 viem),两个功能一样的库(etherjs、viem)在一个代码库里,容易造成混乱。而且 viem 是类型安全的,只要传入 abi 能自动解析成正确的类型,在 buildtime 就能找出错误的地方,之后 vibe coding 也不容易错。

很好的建议,我后面会做修改

支持,很好的想法!

感觉最核心的部分还是动画交互的部分。

@CYL12345 你该把研究报告也放过来,加强你做这一部分的权威性。