Skip to content

asJEI/Monad-World-Tree

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
contracts
contracts
 
 
frontend
frontend
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 

Repository files navigation

Monad World Tree 🌳

链上共生世界树 — 基于 Monad Testnet 的社区共建型 Web3 应用。

每一次链上交互，都是世界树成长的一部分。

用户连接钱包，通过留言、点赞等行为为世界树注入能量；每条留言对应一片链上 Leaf，共同决定世界树的等级与形态。

功能概览

功能 状态 说明
钱包连接 ✅ MetaMask / Rabby / WalletConnect
沉浸式世界树首页 ✅ 单屏场景、HUD、气泡留言、成长动画
链上留言（Leaf） ✅ 调用 LeafBoard.leaveLeaf，每日上限 10 条
点赞互动 ✅ 调用 LeafBoard.likeLeaf，双方获得能量
能量与升级系统 ✅ WorldTree 合约管理等级与贡献者
留言板 / 排行榜 / 个人信息 ✅ /messages /leaderboard /profile
未连接钱包阶段预览 ✅ 可预览 5 个成长阶段视觉效果
成就 / NFT Badge 🚧 UI 占位，链上逻辑待实现

技术栈

前端： React 18 · TypeScript · Vite · Tailwind CSS · wagmi · viem · TanStack Query · React Router

合约： Solidity ^0.8.20 · Hardhat · OpenZeppelin · Monad Testnet (Chain ID 10143)

项目结构

monad-world-tree/
├── frontend/                    # React 前端
│   ├── src/
│   │   ├── components/          # UI 组件（world-tree / leaf / layout / wallet …）
│   │   ├── pages/               # 路由页面
│   │   ├── hooks/               # 链上数据 Hooks
│   │   ├── config/              # wagmi、合约地址配置
│   │   ├── abi/                 # WorldTree / LeafBoard ABI
│   │   └── utils/
│   ├── .env.example
│   └── package.json
│
├── contracts/                   # Hardhat 合约工程
│   ├── contracts/
│   │   ├── WorldTree.sol        # 能量、等级、贡献者
│   │   ├── LeafBoard.sol        # 留言、点赞
│   │   └── interfaces/
│   ├── scripts/
│   │   ├── deploy.ts            # 部署脚本
│   │   └── seed.ts              # 本地演示数据注入
│   ├── deployments/             # 部署记录（按网络保存 JSON）
│   ├── .env.example
│   └── package.json
│
└── README.md

快速开始

前置要求

  • Node.js 18+
  • npm
  • MetaMask 或 Rabby 等 EVM 钱包

1. 克隆并安装依赖

git clone https://github.com/asJEI/Monad-World-Tree.git
cd monad-world-tree

cd contracts && npm install
cd ../frontend && npm install

2. 本地开发（推荐先跑通）

需要 两个终端：

终端 A — 启动本地区块链

cd contracts
npm run node

终端 B — 部署合约并注入演示数据

cd contracts
npm run deploy:local
npm run seed:local

终端 C — 启动前端

cd frontend
cp .env.example .env   # Windows: copy .env.example .env
npm run dev

浏览器访问 http://localhost:3000

本地钱包配置（Hardhat Local）

参数 值
RPC URL http://127.0.0.1:8545
Chain ID 31337
货币符号 ETH

Hardhat 默认账户自带 10000 ETH，可直接用于本地测试。

部署到 Monad 测试网

1. 准备部署钱包

  1. 从 Monad Faucet 领取测试 MON
  2. 在 contracts/ 创建 .env：
MONAD_RPC_URL=https://testnet-rpc.monad.xyz
PRIVATE_KEY=0x你的部署私钥

⚠️ 仅使用测试专用钱包，切勿将 .env 提交到 Git。

2. 部署合约

cd contracts
npm run compile
npm run deploy

部署成功后，地址会写入 contracts/deployments/monadTestnet-10143.json，并在终端输出区块浏览器链接。

3. 配置前端

编辑 frontend/.env：

VITE_MONAD_RPC_URL=https://testnet-rpc.monad.xyz
VITE_MONAD_CHAIN_ID=10143

# 填入纯地址，不要填浏览器链接
VITE_WORLD_TREE_ADDRESS=0x...
VITE_LEAF_BOARD_ADDRESS=0x...

修改 .env 后需 重启 npm run dev。

4. 连接测试网

在钱包中添加 Monad Testnet：

参数 值
RPC URL https://testnet-rpc.monad.xyz
Chain ID 10143
货币符号 MON
区块浏览器 testnet.monadexplorer.com

连接钱包并切换到 Monad Testnet 后，即可发布留言、点赞等链上操作。

环境变量说明

contracts/.env

变量 说明
MONAD_RPC_URL Monad 测试网 RPC
PRIVATE_KEY 部署者私钥（带 0x 前缀）

frontend/.env

变量 说明
VITE_MONAD_RPC_URL 前端读取链上数据的 RPC
VITE_MONAD_CHAIN_ID 测试网 Chain ID（10143）
VITE_WORLD_TREE_ADDRESS 测试网 WorldTree 合约地址
VITE_LEAF_BOARD_ADDRESS 测试网 LeafBoard 合约地址
VITE_LOCAL_WORLD_TREE_ADDRESS 本地 Hardhat WorldTree 地址
VITE_LOCAL_LEAF_BOARD_ADDRESS 本地 Hardhat LeafBoard 地址
VITE_WALLETCONNECT_PROJECT_ID 可选，WalletConnect 项目 ID

前端会按当前钱包网络自动选择合约；未连接钱包时，优先读取已配置地址的测试网数据。

区块浏览器验证留言

在 Monad Testnet 发布的留言，可在浏览器中验证：

  1. 从钱包查交易 — 活动记录 → 点击「在区块浏览器中查看」
  2. 从合约查事件 — 打开 LeafBoard 地址 → 查看 LeafPlanted 事件
  3. 读合约状态 — 调用 getLeafCount() / getLeaves() 查看留言列表

交易详情中应包含：

  • Method： leaveLeaf
  • Event： LeafPlanted(leafId, owner, message)
  • 同时触发 WorldTree 的 EnergyAdded 事件（+5 能量）

本地 Hardhat 链上的数据无法在测试网浏览器中查到。

分享给他人访问

localhost:3000 仅本机可用。要分享给其他人，需将前端部署到公网。

Vercel 部署示例

  1. 将代码推送到 GitHub
  2. 在 Vercel 导入仓库
  3. Root Directory 设为 frontend
  4. Build Command： npm run build
  5. Output Directory： dist
  6. 添加与 frontend/.env 相同的环境变量（VITE_ 前缀）
  7. 部署完成后获得公网 URL，例如 https://your-app.vercel.app

他人访问时需要：

  • 钱包添加 Monad Testnet
  • 领取测试 MON 用于 Gas
  • 连接钱包后即可留言

世界树成长阶段

等级 阶段 所需能量
0 种子 Seed 0
1 嫩芽 Sprout 100
2 幼树 Young Tree 500
3 古树 Ancient Tree 2,000
4 世界树 Monad World Tree 10,000

能量来源： 种植 Leaf +5 · 点赞 +2（双方各 +1）

合约说明

合约 职责
WorldTree 全局能量、等级、贡献者统计；授权合约可调用 addEnergy
LeafBoard 留言 CRUD、点赞、每日限额；种植/点赞时向 WorldTree 注入能量

部署脚本会自动完成：WorldTree → LeafBoard → approveContract 授权。

常用命令

# 合约
cd contracts
npm run compile          # 编译
npm run test             # 运行测试
npm run node             # 本地节点
npm run deploy:local     # 部署到 localhost
npm run seed:local       # 注入本地演示 Leaf
npm run deploy           # 部署到 Monad Testnet

# 前端
cd frontend
npm run dev              # 开发服务器 (port 3000)
npm run build            # 生产构建
npm run preview          # 预览构建结果

常见问题

前端显示「合约尚未部署」 → 检查 frontend/.env 中地址是否为纯 0x... 格式（不是浏览器 URL），并重启 dev server。

能看数据但不能发留言 → 钱包需切换到已部署合约的网络（测试网或本地链），且账户有足够 Gas。

本地链数据丢失 → Hardhat 节点重启后链状态重置，需重新执行 deploy:local 和 seed:local。

测试网留言在浏览器查不到 → 确认发留言时钱包连接的是 Monad Testnet，而非 Hardhat Local。

安全说明

  • 切勿将私钥或 .env 提交到代码仓库
  • 部署与测试请使用专用钱包，不要使用存有真实资产的钱包
  • 当前合约为测试网 Demo，部署前请自行审计
  • 测试网代币无真实价值

License

MIT

About

链上共生世界树 — Monad Testnet Web3 dApp with Hardhat contracts and React frontend

monad-world-tree.vercel.app

Resources

Readme
Activity

Stars

2 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages