Celo Composer

本技能涵盖使用 Celo Composer 通过预配置模板快速搭建 Celo dApp。

适用场景

• - 启动新的 Celo 项目
• 创建 MiniPay 迷你应用
• 搭建 Farcaster 迷你应用
• 需要预配置的 Next.js + Web3 开发环境

快速开始

交互模式

bash
npx @celo/celo-composer@latest create

按提示选择所需选项。

指定项目名称

bash
npx @celo/celo-composer@latest create my-celo-app

非交互模式（使用标志）

bash
npx @celo/celo-composer@latest create my-celo-app \
--template basic \
--wallet-provider rainbowkit \
--contracts hardhat

使用默认配置快速启动

bash
npx @celo/celo-composer@latest create my-celo-app --yes

模板

模板	描述	适用场景
basic	标准 Next.js 14+ dApp	通用 Web3 应用
minipay

移动优先的 MiniPay 应用 | MiniPay 迷你应用 | | farcaster-miniapp | Farcaster SDK + Frame | Farcaster 集成 | | ai-chat | 独立聊天应用 | AI 驱动的 dApp |

创建 MiniPay 应用

bash
npx @celo/celo-composer@latest create -t minipay

创建 Farcaster 迷你应用

bash
npx @celo/celo-composer@latest create -t farcaster-miniapp

配置选项

钱包提供商

提供商	描述
rainbowkit	流行的钱包连接 UI（默认）
thirdweb

thirdweb Connect SDK | | none | 无钱包提供商 |

智能合约

选项	描述
hardhat	Hardhat 开发环境（默认）
foundry

Foundry 开发环境 | | none | 无智能合约 |

项目结构

my-celo-app/
├── apps/
│ ├── web/ # Next.js 应用
│ │ ├── app/ # 应用路由页面
│ │ ├── components/ # React 组件
│ │ └── ...
│ └── contracts/ # 智能合约（如已选择）
│ ├── contracts/ # Solidity 文件
│ ├── scripts/ # 部署脚本
│ └── test/ # 合约测试
├── packages/
│ ├── ui/ # 共享 UI 组件
│ └── utils/ # 共享工具函数
├── pnpm-workspace.yaml # 工作区配置
├── turbo.json # Turborepo 配置
└── package.json

运行项目

bash
cd my-celo-app

安装依赖

pnpm install

启动开发服务器

pnpm dev

构建生产版本

pnpm build

技术栈

• - 框架： Next.js 14+ 带 App Router
• 样式： Tailwind CSS
• 组件： shadcn/ui
• 单体仓库： Turborepo + PNPM 工作区
• 语言： TypeScript
• Web3： viem + wagmi（或 thirdweb）

环境要求

• - Node.js 18.0.0 或更高版本
• PNPM（推荐）或 npm/yarn

合约开发

如果选择了 Hardhat 或 Foundry：

Hardhat

bash

进入合约目录

cd apps/contracts

编译

npx hardhat compile

测试

npx hardhat test

部署到 Celo Sepolia

npx hardhat run scripts/deploy.ts --network celoSepolia

Foundry

bash

进入合约目录

cd apps/contracts

构建

forge build

测试

forge test

部署到 Celo Sepolia

forge script script/Deploy.s.sol --rpc-url https://forno.celo-sepolia.celo-testnet.org --broadcast

环境变量

在 apps/web/ 中创建 .env.local：

bash

钱包连接必需

NEXTPUBLICWCPROJECTID=yourwalletconnectproject_id

可选：Alchemy API 密钥

NEXTPUBLICALCHEMYAPIKEY=youralchemykey

在 apps/contracts/ 中创建 .env：

bash
PRIVATEKEY=yourprivate_key
CELOSCANAPIKEY=yourceloscanapi_key

自定义开发

添加新页面

在 apps/web/app/ 中创建文件：

tsx
// apps/web/app/my-page/page.tsx
export default function MyPage() {
return

;
}

添加组件

添加到 apps/web/components/ 或共享的 packages/ui/：

tsx
// apps/web/components/MyComponent.tsx
export function MyComponent() {
return

;
}

其他资源

• - templates.md - 详细模板文档