cdp-wallet-onramp-kit/dist/commands/init-project.js

Complete toolkit for Coinbase Developer Platform (CDP) Embedded Wallets and Onramp integration with reusable components, utilities, and documentation

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.initProject = initProject;
const fs_extra_1 = __importDefault(require("fs-extra"));
const path_1 = __importDefault(require("path"));
const chalk_1 = __importDefault(require("chalk"));
function detectProjectStructure(baseDir) {
    const hasSrcDir = fs_extra_1.default.existsSync(path_1.default.join(baseDir, 'src'));
    const hasAppDir = fs_extra_1.default.existsSync(path_1.default.join(baseDir, 'app'));
    const hasSrcApp = fs_extra_1.default.existsSync(path_1.default.join(baseDir, 'src/app'));
    let structure;
    let appPath;
    if (hasSrcApp) {
        structure = 'src/app';
        appPath = 'src/app';
    }
    else if (hasAppDir) {
        structure = 'app';
        appPath = 'app';
    }
    else {
        // Default to app structure for new projects
        structure = 'app';
        appPath = 'app';
    }
    return { hasSrcDir, hasAppDir, appPath, structure };
}
async function initProject(options) {
    const { template, dir } = options;
    const targetDir = path_1.default.resolve(process.cwd(), dir);
    console.log(chalk_1.default.blue(`🚀 Initializing CDP project (${template} template) in ${targetDir}`));
    // Detect project structure
    const projectStructure = detectProjectStructure(targetDir);
    console.log(chalk_1.default.cyan(`📁 Detected project structure: ${projectStructure.structure}`));
    // Ensure target directory exists
    await fs_extra_1.default.ensureDir(targetDir);
    // Copy API route templates
    // In published package, templates are in src/templates, not dist/templates
    const templateDir = path_1.default.join(__dirname, '..', '..', 'src', 'templates');
    const apiDir = path_1.default.join(targetDir, projectStructure.appPath, 'api', 'onramp');
    await fs_extra_1.default.ensureDir(apiDir);
    // Copy session token API route
    const sessionSource = path_1.default.join(templateDir, 'api', 'onramp-session.ts');
    const sessionTarget = path_1.default.join(apiDir, 'session', 'route.ts');
    await fs_extra_1.default.ensureDir(path_1.default.dirname(sessionTarget));
    await fs_extra_1.default.copy(sessionSource, sessionTarget);
    // Copy URL generation API route  
    const urlSource = path_1.default.join(templateDir, 'api', 'onramp-url.ts');
    const urlTarget = path_1.default.join(apiDir, 'url', 'route.ts');
    await fs_extra_1.default.ensureDir(path_1.default.dirname(urlTarget));
    await fs_extra_1.default.copy(urlSource, urlTarget);
    // Create basic component examples
    const componentsDir = path_1.default.join(targetDir, 'components', 'cdp');
    await fs_extra_1.default.ensureDir(componentsDir);
    // Create a basic example component
    const exampleComponent = `"use client";

import { CDPProvider, WalletAuth, OnrampButton } from 'cdp-wallet-onramp-kit';
import { useEvmAddress } from '@coinbase/cdp-hooks';

const cdpConfig = {
  projectId: process.env.NEXT_PUBLIC_CDP_PROJECT_ID!,
  debugging: process.env.NODE_ENV === 'development',
};

const appConfig = {
  name: "My CDP App",
  logoUrl: "/logo.png",
};

function WalletSection() {
  const evmAddress = useEvmAddress();

  return (
    <div className="space-y-4">
      <WalletAuth />
      {evmAddress && (
        <OnrampButton
          walletAddress={evmAddress || undefined}
          defaultAsset="USDC"
          presetFiatAmount={50}
        >
          Buy $50 USDC
        </OnrampButton>
      )}
    </div>
  );
}

export function CDPExample() {
  return (
    <CDPProvider config={cdpConfig} app={appConfig}>
      <WalletSection />
    </CDPProvider>
  );
}
`;
    await fs_extra_1.default.writeFile(path_1.default.join(componentsDir, 'CDPExample.tsx'), exampleComponent);
    // Create environment file template
    const envTemplate = `# CDP Configuration
# Get your project ID from https://portal.cdp.coinbase.com
NEXT_PUBLIC_CDP_PROJECT_ID=your-project-id-here

# Onramp API Keys (server-side only)
# Create these in CDP Portal under API Keys
CDP_API_KEY_PRIVATE_KEY=your-private-key-here
CDP_API_KEY_NAME=your-key-name-here
`;
    await fs_extra_1.default.writeFile(path_1.default.join(targetDir, '.env.example'), envTemplate);
    // Create package.json dependencies addition
    const packageAdditions = {
        dependencies: {
            "@coinbase/cdp-core": "latest",
            "@coinbase/cdp-hooks": "latest",
            "@coinbase/cdp-react": "latest",
            "@coinbase/cdp-sdk": "latest",
            "cdp-wallet-onramp-kit": "^1.0.0",
            "zod": "^3.22.4"
        }
    };
    await fs_extra_1.default.writeFile(path_1.default.join(targetDir, 'cdp-package-additions.json'), JSON.stringify(packageAdditions, null, 2));
    // Create setup instructions
    const setupInstructions = `# CDP Wallet & Onramp Setup

Your project has been initialized with CDP integration files!

## Next Steps

1. **Install Dependencies:**
   \`\`\`bash
   # Add the dependencies from cdp-package-additions.json to your package.json, then:
   npm install
   \`\`\`

2. **Environment Setup:**
   \`\`\`bash
   # Copy the environment template
   cp .env.example .env.local
   
   # Fill in your CDP credentials from https://portal.cdp.coinbase.com
   \`\`\`

3. **CORS Configuration:**
   - Visit https://portal.cdp.coinbase.com/products/embedded-wallets/cors
   - Add your domain (e.g., http://localhost:3000 for development)

4. **Use the Components:**
   \`\`\`tsx
   import { CDPExample } from './components/cdp/CDPExample';
   
   export default function HomePage() {
     return <CDPExample />;
   }
   \`\`\`

## Files Created

- \`app/api/onramp/session/route.ts\` - Session token API
- \`app/api/onramp/url/route.ts\` - URL generation API  
- \`components/cdp/CDPExample.tsx\` - Example component
- \`.env.example\` - Environment variables template
- \`cdp-package-additions.json\` - Required dependencies

## Documentation

Run this command to get comprehensive documentation:
\`\`\`bash
npx cdp-wallet-onramp-kit setup
\`\`\`

Happy building! 🚀
`;
    await fs_extra_1.default.writeFile(path_1.default.join(targetDir, 'CDP_SETUP.md'), setupInstructions);
    console.log(chalk_1.default.green(`✅ Project initialized successfully!`));
    console.log(chalk_1.default.blue(`📖 Read ${path_1.default.join(targetDir, 'CDP_SETUP.md')} for next steps`));
}