构建一个去中心化投票 DApp：React 前端 + Solana 链上投票程序。在本章中，你既是智能合约开发者，又是前端工程师。
17.1.1 技术选型
| 层 | 技术 | 用途 |
|---|---|---|
| 链 | Solana devnet | 快速出块（~400ms）、低交易成本 |
| 合约 | Rust + Anchor 框架 | 类型安全、自动生成 IDL |
| 前端 | React 18 + Vite | 现代组件化开发 |
| 链交互 | Solana Web3.js | 钱包连接 + 交易发送 |
| 钱包 | Phantom | 测试网 dApp 标准入口 |
架构图
graph TD
User[用户浏览器] --> React[React + Vite]
React --> Wallet[Phantom 钱包]
Wallet --> Solana[Solana devnet]
Solana --> VoteProgram[Rust 投票程序]
VoteProgram --> State[投票状态账户]
style VoteProgram fill:#c8e6c9
style State fill:#e3f2fd17.1.2 Anchor 项目初始化
bash
# 安装依赖
npm install -g @coral-xyz/anchor-cli
solana-cli --version # 确认已安装
anchor init vote-dapp --template react
# 生成 Anchor 工作区：
# ├── programs/vote/ ← 投票智能合约（Rust）
# ├── app/ ← React 前端
# ├── tests/ ← 链上测试
# └── Anchor.toml ← 配置 devnet/clusterAnchor.toml 配置
toml
[features]
seeds = true
[programs.devnet]
vote = "Fg6...<program_id>"
[provider]
cluster = "devnet"
wallet = "/home/user/.config/solana/id.json"17.1.3 项目目录结构
text
vote-dapp/
├── programs/
│ └── vote/
│ ├── src/
│ │ └── lib.rs # 投票合约（Rust / Anchor）
│ ├── Cargo.toml
│ └── Xargo.toml
├── app/
│ ├── src/
│ │ ├── App.tsx # 主入口
│ │ ├── components/
│ │ │ ├── WalletButton.tsx # 连接钱包
│ │ │ ├── VoteCard.tsx # 投票卡片
│ │ │ ├── CreatePollForm.tsx # 创建投票
│ │ │ └── PollList.tsx # 投票列表
│ │ └── hooks/
│ │ └── useVoteProgram.ts # Anchor 交互
│ └── package.json
├── tests/
│ └── vote.ts # 链上测试脚本
└── Anchor.toml17.1.4 核心流程
sequenceDiagram
participant U as 用户
participant Ph as Phantom
participant React as DApp前端
participant Sol as Solana devnet
participant Prog as 投票程序
U->>Ph: 连接钱包
Ph->>React: 返回公钥
U->>React: 创建投票(标题,选项)
React->>Sol: 发送: 初始化投票账户
Sol->>Prog: 执行: create_poll
Prog->>Sol: 创建投票状态账户(PDA)
U->>React: 选择选项 → 投票
React->>Sol: 发送: cast_vote
Sol->>Prog: 验证: 未重复投票
Prog->>Sol: 更新: 选项计数+1
U->>React: 查看结果
Sol->>React: 返回: 投票统计, 前往 → 17.2 连接钱包 |*
评论
0评论加载中…