@cipherops/evm-ui-starter

A powerful CLI tool for creating beautiful Web3 applications with multiple wallet providers and design styles.

🚀 Quick Start

# Create a new project
npx @cipherops/evm-ui-starter init my-web3-app

# Navigate to your project
cd my-web3-app

# Start developing
npm run dev

✨ Features

• 5 Wallet Providers: Privy, Reown (WalletConnect), Dynamic, RainbowKit, Coinbase CDP
• 5 Design Styles: Minimal, Glassmorphism, Neumorphism, Cyberpunk, Material
• Selective Component Installation: Add only the components you need
• Wagmi + Viem Integration: Modern Web3 development stack with proper publicClient/walletClient
• TypeScript Ready: Full TypeScript support out of the box
• Component Library: Comprehensive set of Web3 UI components
• Smart Contract Support: Built-in utilities for contract interactions with simulation
• Blockchain Logos: Automatic logo resolution for 15+ major chains
• Token Logos: CDN-based token logos with fallback support
• Real-time USD Prices: CoinGecko integration for live price conversions
• Price Change Tracking: 24h price change indicators

📦 Components

Wallet Components

• connect-wallet - Main wallet connection component
• account-avatar - User avatar with ENS support
• address-display - Ethereum address display
• balance-display - Token balance display
• chain-switcher - Network switching component

Token Components

• token-icon - Token logo display
• token-balance - Individual token balance
• token-list - List of user tokens
• token-selector - Token selection dropdown
• nft-card - NFT display card

Transaction Components

• transaction-button - Transaction execution button
• gas-estimator - Gas fee estimation
• transaction-modal - Transaction confirmation modal
• transaction-history - Transaction history list
• transaction-toast - Transaction notifications

🎨 Design Styles

• Minimal: Clean and simple design
• Glassmorphism: Modern glass-like effects
• Neumorphism: Soft UI with subtle shadows
• Cyberpunk: Futuristic neon-themed design
• Material: Google Material Design inspired

🔗 Wallet Providers

• Privy: Social login with embedded wallets
• Reown: Multi-wallet connection protocol (WalletConnect v2)
• Dynamic: Advanced wallet management platform
• RainbowKit: Beautiful wallet connection modal
• Coinbase CDP: Coinbase Developer Platform with smart wallet support

📋 Commands

Initialize a new project

npx @cipherops/evm-ui-starter init [project-name] [options]

Options:
  -s, --style <style>     Design style (minimal, glassmorphism, neumorphism, cyberpunk, material)
  -w, --wallet <provider> Wallet provider (privy, reown, dynamic, rainbowkit, coinbase-cdp)
  -t, --template <type>   Project template (nextjs)

Add components

npx @cipherops/evm-ui-starter add <component> [options]

Options:
  -s, --style <style>     Override design style
  -w, --wallet <provider> Override wallet provider

Examples:
  npx @cipherops/evm-ui-starter add connect-wallet
  npx @cipherops/evm-ui-starter add token-list --style=cyberpunk

Setup wallet provider

npx @cipherops/evm-ui-starter setup wallet <provider>

Examples:
  npx @cipherops/evm-ui-starter setup wallet privy
  npx @cipherops/evm-ui-starter setup wallet rainbowkit
  npx @cipherops/evm-ui-starter setup wallet coinbase-cdp

Change design style

npx @cipherops/evm-ui-starter style <style-name>

Examples:
  npx @cipherops/evm-ui-starter style glassmorphism
  npx @cipherops/evm-ui-starter style cyberpunk

List available components

npx @cipherops/evm-ui-starter list [category] [options]

Options:
  -a, --all      Show all categories
  -d, --detailed Show detailed information

Examples:
  npx @cipherops/evm-ui-starter list
  npx @cipherops/evm-ui-starter list wallet --detailed
  npx @cipherops/evm-ui-starter list --all

🛠 Development Pattern

This starter follows the wagmi + viem pattern for optimal Web3 development:

• wagmi for React hooks, account management, and read operations
• viem for transaction execution using publicClient + walletClient

import { useWallet } from '@/hooks/useWallet'

function MyComponent() {
  const { writeContract, publicClient, walletClient } = useWallet()
  
  const handleTransaction = async () => {
    // Simulate and execute transaction
    const hash = await writeContract({
      address: '0x...',
      abi: contractAbi,
      functionName: 'transfer',
      args: [recipient, amount]
    })
  }
}

🔧 Configuration

Environment Variables

Different wallet providers require different environment variables:

Privy:

NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id

Reown (WalletConnect):

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id

Dynamic:

NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID=your_environment_id

RainbowKit:

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id

Coinbase CDP:

# No environment variables required for basic Coinbase Wallet integration
# For advanced CDP features, refer to https://docs.cdp.coinbase.com

Customization

• Modify lib/design-styles.ts to customize design styles
• Update lib/wagmi-config.ts to configure supported chains
• Customize components in the components/ directory

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for details.

📄 License

MIT License - see the LICENSE file for details.

🔗 Links

• Documentation
• Examples
• Issues

Built with ❤️ by CipherOps