Ethereum

Use this prompt with your preferred AI assistant (Claude, ChatGPT, etc.) to automatically add Ethereum/EVM embedded wallet functionality to your existing Civic Auth integration.

Prerequisites

This prompt assumes you already have Civic Auth basic authentication set up in your project. If not, use the React or Next.js prompts first.

How to Use

1. Copy the prompt below
2. Paste it into your AI assistant
3. The assistant will verify your existing Civic Auth setup
4. The assistant will fetch the complete documentation and implement the integration for you

Integration Prompt

# Ethereum/EVM Embedded Wallets Integration Prompt

## Prerequisites Check
Before starting, verify the user has:
1. Existing Civic Auth integration in their React/Next.js project
2. A working Civic Auth Client ID
3. Basic authentication already functional

If any of these are missing, stop and direct them to set up basic Civic Auth first.

## Task
Add Ethereum/EVM embedded wallet functionality to an existing Civic Auth integration.

## Step 1: Fetch the Ethereum Documentation
Use curl to fetch the Ethereum embedded wallets documentation:

curl https://docs.civic.com/web3/ethereum-evm.md

This documentation contains ALL the code examples and instructions needed for Ethereum wallet integration. Do NOT use web search or any other tools - only use curl to fetch this specific URL.

## Step 2: Gather Project Information
Ask the user for the following information if not provided:

**Required Information (gather ALL before starting):**
- ✅ Current framework (React, Next.js, etc.)
- ✅ Build tool (Vite, Create React App, Next.js, or other)
- ✅ Wagmi integration preference (Yes/No - whether to integrate with existing Wagmi setup)
- ✅ Target blockchain networks (Ethereum mainnet, Polygon, etc.)
- ✅ RPC provider preference (Alchemy, Infura, or custom)
- ✅ Which components need wallet functionality
- ✅ Existing Web3 libraries that might conflict

**DO NOT proceed with implementation until you have confirmed ALL of the above information.**

## Step 3: Analyze Current Setup
Before implementing:
1. Examine the existing Civic Auth setup
2. Identify where the CivicAuthProvider is configured
3. Check for any existing Web3/Wagmi dependencies
4. Plan integration points for wallet functionality

## Step 4: Implement Ethereum Embedded Wallets
Using ONLY the documentation fetched via curl:

1. **Install Dependencies**: Add the required @civic/auth-web3 and wagmi packages
2. **Update Provider**: Enhance the existing CivicAuthProvider setup for Web3
3. **Configure Wagmi**: Set up Wagmi configuration with Civic's embeddedWallet connector
4. **Implement Wallet Creation**: Add wallet creation logic for new users
5. **Add Wallet Components**: Create components for wallet interaction (balance, transactions)
6. **Configure Network Settings**: Set up supported chains and RPC endpoints
7. **Handle Chain Switching**: Implement chain switching functionality

## Step 5: Add Wallet Functionality
Implement core wallet features:
- **Check if user has wallet**: Use userHasWallet type guard
- **Create wallet for new users**: Implement createWallet functionality  
- **Display wallet address**: Show the user's Ethereum address
- **Check wallet balance**: Query and display ETH balance
- **Send transactions**: Basic transaction sending capability
- **Chain switching**: Allow users to switch between supported networks
- **Error handling**: Proper error states for wallet operations

## Step 6: Configure Multi-Chain Support (Optional)
If the user needs multiple chains:
- Set up supported chains configuration
- Configure custom RPC endpoints
- Handle chain-specific logic
- Implement proper error handling for unsupported chains

## Important Notes
- Use ONLY curl to fetch the documentation - no web search tools
- The fetched documentation is the ONLY source of truth for this implementation
- All code examples, configuration options, and setup instructions are in that document
- Pay attention to Wagmi version compatibility requirements
- Ensure proper TypeScript types are used (ExistingWeb3UserContext vs NewWeb3UserContext)

## CRITICAL: Wagmi Configuration
The embeddedWallet() connector must be properly configured in your Wagmi setup:

import { embeddedWallet } from '@civic/auth-web3/wagmi'

const config = createConfig({
  connectors: [
    embeddedWallet(), // Civic embedded wallet
    // ... other connectors like MetaMask
  ],
  // ... rest of configuration
})

## Testing Requirements
After implementation, ensure the following works:
1. Existing users can create wallets
2. Users with wallets can see their address and balance
3. Transaction sending works on testnet
4. Chain switching functions properly
5. Wagmi hooks work correctly with Civic wallets
6. Error states display properly

What the AI Assistant Will Do

When you use this prompt, the AI assistant will:

1. Verify prerequisites - confirm basic Civic Auth is already set up
2. Fetch Ethereum documentation using curl from the official docs
3. Analyze your existing setup and plan the integration
4. Install required dependencies for Ethereum/EVM functionality
5. Enhance your auth provider with Web3 capabilities
6. Configure Wagmi with Civic’s embedded wallet connector
7. Implement wallet creation for new users
8. Add wallet components for balance checking and transactions
9. Configure multi-chain support for various EVM networks
10. Handle framework-specific configurations

Supported Networks

Civic Auth embedded wallets support the following EVM-compatible blockchain networks:

• Ethereum (mainnet and testnets)
• Base (Coinbase Layer 2)
• Polygon (MATIC ecosystem)
• BSC (BNB) (Binance Smart Chain)
• Arbitrum One (Ethereum Layer 2)
• Avalanche (AVAX C-Chain)
• Unichain (Uniswap Layer 2)
• Sonic (High-speed blockchain)
• Cronos (Crypto.com Chain)
• OP Mainnet (Optimism Layer 2)
• Linea (ConsenSys zkEVM)
• ZKSync Era (Matter Labs zkEVM)
• Filecoin (Decentralized storage)
• Gnosis (Community-driven chain)
• Rootstock (Bitcoin sidechain)
• Mantle (Modular Layer 2)
• Ronin (Gaming-focused sidechain)
• Celo (Mobile-first blockchain)

Supported Features

• Multi-chain support with easy network switching
• Wagmi integration for React hooks
• Custom RPC endpoints
• Transaction sending and balance checking
• Error handling and user feedback
• Chain-specific configuration

Need help? If you encounter any issues during the AI-assisted integration, you can always fall back to the manual integration guide: Ethereum.

Make sure your AI assistant has the ability to run terminal commands and edit files in your project.