cdp-docs-cli 1.0.0

package/src/templates/prompt/INTEGRATION-SUMMARY.md

@@ -0,0 +1,151 @@
+# 🚀 CDP Wallet Integration To-Do List
+
+Your Next.js project needs **Coinbase Developer Platform (CDP) Wallet API v2** integration!
+
+## 📋 Implementation Checklist
+
+### Prerequisites Setup
+- [ ] Verify Node.js 22+ is installed
+- [ ] Confirm Next.js 15+ with App Router is configured
+- [ ] Ensure TypeScript is set up and working
+- [ ] Verify Tailwind CSS is configured
+
+### Dependencies Installation
+- [ ] Install CDP SDK: `npm install @coinbase/cdp-sdk`
+- [ ] Install environment utilities: `npm install dotenv`
+- [ ] Install Ethereum utilities: `npm install viem`
+- [ ] Install styling utilities: `npm install clsx tailwind-merge`
+
+### Environment Configuration
+- [ ] Create `.env.local` in project root
+- [ ] Add `CDP_API_KEY_ID` to environment file
+- [ ] Add `CDP_API_KEY_SECRET` to environment file
+- [ ] Add `CDP_WALLET_SECRET` to environment file
+- [ ] Verify `.env.local` is in `.gitignore`
+
+### Core Files to Create
+
+#### Backend Configuration
+- [ ] Create `src/lib/cdp.ts` - CDP client configuration
+- [ ] Create `src/lib/wallet-utils.ts` - Wallet utility functions
+- [ ] Create `src/lib/utils.ts` - Styling utilities (cn function)
+
+#### React Components & Hooks
+- [ ] Create `src/lib/hooks/use-wallet.ts` - Wallet state management hook
+- [ ] Create `src/components/ui/wallet-dashboard.tsx` - Main dashboard component
+
+#### Examples & Documentation
+- [ ] Create `examples/wallet-demo.ts` - Demo usage example
+- [ ] Create `SETUP-CDP-WALLET.md` - User setup guide
+
+### Main Page Integration
+- [ ] Update `src/app/page.tsx` to use WalletDashboard component
+- [ ] Verify responsive design works correctly
+- [ ] Test error handling and loading states
+
+### CDP API Functions to Implement
+
+#### Account Management
+- [ ] Implement `createOrGetEvmAccount()` function
+- [ ] Implement `importEvmAccount()` function for private key import
+- [ ] Implement `listAccounts()` function with proper pagination handling
+- [ ] Implement `createSolanaAccount()` function
+
+#### Transaction Functions
+- [ ] Implement `requestFaucet()` function for testnet funds
+- [ ] Implement `sendEvmTransaction()` function
+- [ ] Implement `getAccountBalance()` function
+- [ ] Implement `requestSolanaFaucet()` function
+
+#### Smart Account Features (Advanced)
+- [ ] Implement `createSmartAccount()` function
+- [ ] Add gas sponsorship support
+- [ ] Implement batch transaction support
+
+### UI Components to Build
+
+#### Dashboard Layout
+- [ ] Create account creation form
+- [ ] Create private key import form
+- [ ] Create account selection interface
+- [ ] Create balance display component
+
+#### Transaction Interface
+- [ ] Create faucet request button
+- [ ] Create send transaction form
+- [ ] Create transaction history display
+- [ ] Add explorer link integration
+
+#### Error Handling
+- [ ] Implement error message display
+- [ ] Add loading states for all operations
+- [ ] Create validation for form inputs
+- [ ] Add success notifications
+
+### Testing & Validation
+
+#### Development Testing
+- [ ] Run `npm run build` and verify no errors
+- [ ] Test account creation flow
+- [ ] Test private key import functionality
+- [ ] Test faucet request functionality
+- [ ] Test transaction sending
+
+#### Production Readiness
+- [ ] Verify all secrets stay server-side
+- [ ] Confirm no private keys exposed to client
+- [ ] Test error boundaries and edge cases
+- [ ] Validate TypeScript compilation
+- [ ] Check ESLint warnings are resolved
+
+### Documentation & Setup
+
+#### User Documentation
+- [ ] Complete setup instructions for CDP credentials
+- [ ] Document environment variable requirements
+- [ ] Create troubleshooting guide
+- [ ] Add security best practices
+
+#### Developer Documentation
+- [ ] Document all utility functions
+- [ ] Add TypeScript interface definitions
+- [ ] Create integration examples
+- [ ] Document customization options
+
+## 🚨 Critical Issues to Avoid
+
+### TypeScript Safety
+- [ ] Always handle potentially undefined API responses with fallbacks
+- [ ] Use `result.accounts || []` pattern for array responses
+- [ ] Implement proper error type checking
+
+### CDP SDK Integration
+- [ ] Reference official CDP docs for exact API response formats
+- [ ] Handle paginated responses correctly (objects, not arrays)
+- [ ] Use optional chaining (`?.`) for uncertain data structures
+
+### Development Workflow
+- [ ] Run `npm run build` frequently during development
+- [ ] Test TypeScript compilation before committing
+- [ ] Handle unused parameters in mock implementations appropriately
+
+## 🎯 Success Criteria
+
+- [ ] `npm run dev` launches without errors
+- [ ] Dashboard renders at `http://localhost:3000`
+- [ ] Can create and fund accounts via UI
+- [ ] Transactions appear on Base Sepolia explorer
+- [ ] No CDP secrets leaked to client bundle
+- [ ] All TypeScript/ESLint errors resolved
+
+## 🔐 Security Checklist
+
+- [ ] All wallet operations happen server-side
+- [ ] Private keys never exposed to client code
+- [ ] Environment variables properly protected
+- [ ] Server actions secure sensitive operations
+- [ ] No API keys in client bundle
+
+---
+
+**🎯 Goal**: Build a production-ready wallet dashboard with enterprise-grade security using Coinbase's CDP platform for Base, Ethereum, and Solana networks!

package/src/templates/prompt/SETUP-CDP-WALLET.md

@@ -0,0 +1,142 @@
+# 🔧 CDP Wallet Setup Guide
+
+Follow these steps to configure your Coinbase Developer Platform (CDP) wallet integration.
+
+## Step 1: Get CDP API Credentials
+
+1. **Visit the CDP Portal**: Go to [https://portal.cdp.coinbase.com/](https://portal.cdp.coinbase.com/)
+
+2. **Sign in** with your Coinbase account or create a new one
+
+3. **Create API Keys**:
+   - Navigate to the "API Keys" section
+   - Click "Create API Key"
+   - Give your key a descriptive name (e.g., "My Wallet App")
+   - Save both the **API Key ID** and **API Key Secret** - you'll need these later
+
+4. **Generate Wallet Secret**:
+   - This is used for signing transactions
+   - Generate a secure random string or use the CDP portal's generator
+   - Keep this secret safe - it's like your master password
+
+## Step 2: Configure Environment Variables
+
+1. **Create Environment File**:
+   ```bash
+   # In your project root, create .env.local
+   touch .env.local
+   ```
+
+2. **Add Your Credentials**:
+   Open `.env.local` and add your CDP credentials:
+   ```bash
+   CDP_API_KEY_ID=your_actual_key_id_here
+   CDP_API_KEY_SECRET=your_actual_key_secret_here
+   CDP_WALLET_SECRET=your_actual_wallet_secret_here
+   ```
+
+   **Replace the placeholder values** with your actual credentials from Step 1.
+
+3. **Verify Security**:
+   - Confirm `.env.local` is in your `.gitignore` file
+   - Never commit this file to version control
+   - Never share these credentials publicly
+
+## Step 3: Test the Integration
+
+1. **Start the Development Server**:
+   ```bash
+   npm run dev
+   ```
+
+2. **Open Your Browser**:
+   - Navigate to [http://localhost:3000](http://localhost:3000)
+   - You should see the CDP Wallet Dashboard
+
+3. **Create Your First Account**:
+   - Enter a name for your account (e.g., "My First Wallet")
+   - Click "Create Account"
+   - You should see your new account appear in the list
+
+4. **Request Test Funds**:
+   - Select your account
+   - Click "Request Test ETH"
+   - Wait a few seconds for the transaction to complete
+   - Your balance should update to show testnet ETH
+
+5. **Send a Test Transaction**:
+   - Enter a recipient address (you can use your own account address)
+   - Enter a small amount (e.g., 0.001)
+   - Click "Send Transaction"
+   - View the transaction on the Base Sepolia explorer
+
+## 🎉 Success Criteria
+
+Your integration is working correctly if:
+
+- ✅ Dashboard loads without errors
+- ✅ You can create new accounts
+- ✅ Faucet requests work and fund your accounts
+- ✅ You can send transactions successfully
+- ✅ Transaction links open on BaseScan explorer
+
+## 🔒 Security Best Practices
+
+- **Never commit** `.env.local` to version control
+- **Use testnet only** for development and testing
+- **Keep your API keys secure** - treat them like passwords
+- **Use different keys** for development vs production
+- **Rotate keys regularly** if building production apps
+
+## 🚨 Troubleshooting
+
+### Environment Variable Issues
+- Ensure `.env.local` is in your project root directory
+- Restart your development server after changing environment variables
+- Double-check there are no extra spaces in your credential values
+
+### API Connection Issues
+- Verify your API credentials are correct
+- Check your internet connection
+- Ensure you're using the correct CDP portal account
+
+### Transaction Failures
+- Make sure your account has sufficient testnet ETH
+- Verify recipient addresses are valid Ethereum addresses
+- Check that you're using reasonable gas amounts
+
+### Build Errors
+- Run `npm run build` to check for TypeScript errors
+- Ensure all dependencies are installed: `npm install`
+- Clear your `.next` cache: `rm -rf .next` then restart
+
+## 📚 Next Steps
+
+Once your basic integration is working:
+
+1. **Explore Advanced Features**:
+   - Smart accounts with gas sponsorship
+   - Batch transactions
+   - Multi-network support (Ethereum, Solana)
+
+2. **Build Custom Features**:
+   - Custom transaction types
+   - Transaction history
+   - Address book functionality
+   - Portfolio tracking
+
+3. **Prepare for Production**:
+   - Set up mainnet credentials
+   - Implement proper error handling
+   - Add comprehensive testing
+   - Security audit your implementation
+
+## 🆘 Need Help?
+
+- **CDP Documentation**: [https://docs.cdp.coinbase.com/](https://docs.cdp.coinbase.com/)
+- **Base Network**: [https://base.org/](https://base.org/)
+- **Support**: Contact Coinbase Developer Support
+
+---
+
+**Happy Building! 🚀**