Celo Composer

This skill covers using Celo Composer to scaffold Celo dApps with pre-configured templates.

When to Use

• Starting a new Celo project
• Creating a MiniPay Mini App
• Setting up a Farcaster Miniapp
• Need pre-configured Next.js + Web3 setup

Quick Start

Interactive Mode

npx @celo/celo-composer@latest create

Follow the prompts to select your options.

With Project Name

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

Non-Interactive (Flags)

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

Quick Start with Defaults

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

Templates

Create MiniPay App

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

Create Farcaster Miniapp

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

Configuration Options

Wallet Providers

Smart Contracts

Project Structure

my-celo-app/
├── apps/
│   ├── web/              # Next.js application
│   │   ├── app/          # App router pages
│   │   ├── components/   # React components
│   │   └── ...
│   └── contracts/        # Smart contracts (if selected)
│       ├── contracts/    # Solidity files
│       ├── scripts/      # Deployment scripts
│       └── test/         # Contract tests
├── packages/
│   ├── ui/               # Shared UI components
│   └── utils/            # Shared utilities
├── pnpm-workspace.yaml   # Workspace configuration
├── turbo.json            # Turborepo configuration
└── package.json

Running the Project

cd my-celo-app

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

Tech Stack

• Framework: Next.js 14+ with App Router
• Styling: Tailwind CSS
• Components: shadcn/ui
• Monorepo: Turborepo + PNPM workspaces
• Language: TypeScript
• Web3: viem + wagmi (or thirdweb)

Requirements

• Node.js 18.0.0 or higher
• PNPM (recommended) or npm/yarn

Working with Contracts

If you selected Hardhat or Foundry:

Hardhat

# Navigate to contracts
cd apps/contracts

# Compile
npx hardhat compile

# Test
npx hardhat test

# Deploy to Celo Sepolia
npx hardhat run scripts/deploy.ts --network celoSepolia

Foundry

# Navigate to contracts
cd apps/contracts

# Build
forge build

# Test
forge test

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

Environment Variables

Create .env.local in apps/web/:

# Required for wallet connection
NEXT_PUBLIC_WC_PROJECT_ID=your_walletconnect_project_id

# Optional: Alchemy API key
NEXT_PUBLIC_ALCHEMY_API_KEY=your_alchemy_key

Create .env in apps/contracts/:

PRIVATE_KEY=your_private_key
CELOSCAN_API_KEY=your_celoscan_api_key

Customization

Adding New Pages

Create files in apps/web/app/:

// apps/web/app/my-page/page.tsx
export default function MyPage() {
  return \x3Cdiv>My Custom Page\x3C/div>;
}

Adding Components

Add to apps/web/components/ or shared packages/ui/:

// apps/web/components/MyComponent.tsx
export function MyComponent() {
  return \x3Cdiv>My Component\x3C/div>;
}

Additional Resources

• templates.md - Detailed template documentation