Genji

A Next.js Web3 app template.

Features

• ⚡ React 19 - Latest React with improved performance and hydration
• 🎨 Chakra UI v2 - Accessible component library
• 🔗 Web3 Integration - Wallet connection via Reown AppKit
• 💰 Ethereum Support - Send transactions with Ethers.js v6
• 🔗 On-chain Referrals - Smart contract-based referral system
• 💳 Stripe Subscriptions - $1/month subscription system
• 🤖 AI Chat - Integrated Claude AI assistant
• 🔐 Wallet Generator - Secure local wallet creation and message signing
• 🌍 Multi-language - i18n support for 10+ languages
• 📱 Responsive - Mobile-first design
• 🔧 Build Tracking - Real-time build status and version detection

Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• UI: Chakra UI v2, Framer Motion 12
• Web3: Ethers.js v6, Reown AppKit
• Backend: Next.js API routes, Stripe
• AI: Anthropic Claude API
• Build: ESBuild, PNPM

Requirements

• Node.js: 18+ (recommended: 20+)
• PNPM: Latest version
• Environment: Browser with Web3 wallet support

Install

pnpm i

Run

Create a .env file:

cp .env.template .env

Add your own keys in the .env file:

NEXT_PUBLIC_PROJECT_ID=your_reown_project_id  # Get yours at https://cloud.reown.com/
STRIPE_SECRET_KEY=sk_test_your_stripe_key
STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_key
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret
NEXT_PUBLIC_APP_URL=http://localhost:3000
ANTHROPIC_API_KEY=your_claude_api_key
OPERATOR_PRIVATE_KEY=your_operator_wallet_private_key  # For referral contract

Then start the development server:

pnpm dev

Customize Your App

Change the app name and details in these files:

package.json                    # name, version, description
src/app/metadata.ts             # title, description, SEO
src/context/index.tsx           # Web3 metadata
src/components/Header.tsx       # Navigation and branding
src/translations/index.ts       # Multi-language content

Configuration

Web3 Networks

Edit supported networks in src/context/index.tsx:

networks: [
  sepolia, // Default testnet
  optimism,
  base,
  arbitrum,
  // Add or remove networks as needed
]

Reown AppKit Setup

1. Create an account at Reown Dashboard
2. Create a new project
3. Copy your Project ID to .env

Domain Verification

1. Create .well-known/walletconnect.txt in your public folder
2. Add your verification details from Reown dashboard
3. Ensure it's accessible at: your-domain/.well-known/walletconnect.txt

Stripe Integration

1. Create a Stripe account
2. Get your API keys from the Stripe dashboard
3. Set up webhook endpoints for subscription events
4. Add all keys to your .env file

AI Chat Setup

1. Get an Anthropic API key
2. Add to .env as ANTHROPIC_API_KEY
3. Customize the AI behavior in src/app/api/chat/route.ts

Key Features Explained

🔗 On-chain Referrals

• Smart contract deployed on OP Sepolia
• Gasless referral registration via API
• Shareable referral links: /referral/[wallet-address]

🤖 AI Chat

• Powered by Claude (Anthropic)
• Custom system prompts
• API endpoint: /api/chat

🔐 Wallet Generator

• Secure client-side wallet generation
• Encrypted private key storage in IndexedDB
• Message signing and verification
• No private keys leave the browser

💳 Subscriptions

• $1/month via Stripe
• Webhook integration for subscription events
• Wallet-based user identification

🔧 Build Tracking

• Real-time build status monitoring
• Automatic build ID extraction from webpack chunks
• GitHub integration for checking latest commits
• Visual indicators for up-to-date vs outdated builds
• Click to refresh build status
• Tooltip showing current vs latest commit info

🌍 Internationalization

Supports 10 languages:

• English, 中文, हिन्दी, Español, Français
• العربية, বাংলা, Русский, Português, اردو

Development

Build

pnpm build

Lint

pnpm lint

Format

pnpm format

Type Check

npx tsc --noEmit

Deployment

This app can be deployed to:

• Vercel (recommended for Next.js)
• Netlify
• Railway
• Any platform supporting Next.js

Make sure to:

1. Set all environment variables
2. Configure domain verification for Reown
3. Set up Stripe webhooks with your production URL

Architecture

src/
├── app/                   # Next.js 13+ app directory
│   ├── api/               # API routes
│   │   ├── chat/          # AI chat endpoint
│   │   ├── referral/      # Referral system
│   │   └── subscription/  # Stripe integration
│   ├── chat/              # AI chat page
│   ├── referral/          # Referral system
│   ├── subscribe/         # Subscription pages
│   └── wallet/            # Wallet generator
├── components/            # Reusable UI components
├── context/               # React contexts (Web3, i18n)
├── hooks/                 # Custom React hooks
├── translations/          # i18n translations
└── utils/                 # Utility functions
    ├── buildDetector.ts   # Build tracking and GitHub integration
    └── i18n.ts           # Internationalization utilities

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

Documentation References

• React 19 - Latest React features
• Next.js 15 - React framework
• Chakra UI v2 - UI component library
• Ethers.js v6 - Ethereum library
• Reown AppKit - Web3 wallet connection
• Stripe API - Payment processing
• Anthropic Claude - AI integration

Support

Feel free to reach out to Julien on Farcaster, Element, Status, Telegram, Twitter, Discord, or LinkedIn.