create-sbc-app 0.1.1 → 0.1.2

package/README.md

@@ -1,105 +1,166 @@
 # create-sbc-app
 
-Create a new SBC Account Abstraction application with one command.
+The easiest way to get started with SBC Account Abstraction. Create feature-complete applications with gasless transactions in seconds.
 
 ## Quick Start
 
 ```bash
-# Using npm
-npx create-sbc-app my-sbc-app
-
-# Using yarn
-yarn create sbc-app my-sbc-app
+# Create a new SBC app
+npx create-sbc-app my-app
 
-# Using pnpm
-pnpm create sbc-app my-sbc-app
-```
+# Or specify a template directly
+npx create-sbc-app my-app --template react
 
-## Features
+# Navigate to your app
+cd my-app
 
-- 🚀 **Multiple Templates**: Choose from Next.js, React (Vite), or vanilla JavaScript
-- ⛽ **Gasless Transactions**: Built-in support for gasless transactions via SBC
-- 🔒 **Account Abstraction**: Smart account creation and management
-- 🎨 **Modern Stack**: TypeScript, ESLint, and modern tooling
-- 🌙 **Dark Mode**: Built-in dark mode support
-- 🔧 **Developer Experience**: Hot reloading, debugging tools, and more
+# Install dependencies
+pnpm install # or npm install
 
-## Templates
+# Start development server
+pnpm dev # or npm run dev
+```
 
-### React (Vite)
+## CLI Options
 
-- Lightning-fast development server
-- Modern tooling and DX
-- Minimal configuration
+```bash
+Usage: create-sbc-app [project-directory] [options]
 
-## Options
+Create a new SBC App Kit project with an opinionated template
 
-```bash
-npx create-sbc-app [options]
+Arguments:
+  project-directory        Directory to create the new app in
 
 Options:
-  -t, --template <template>  Template to use (nextjs, react, vanilla) (default: "react")
-  --api-key <key>           SBC API key
-  --skip-install            Skip dependency installation
-  -h, --help               Display help for command
+  -V, --version           output the version number
+  -t, --template <type>   Template to use: react, nextjs, or backend
+  --api-key <apiKey>      Your SBC API key for immediate configuration
+  --wallet <wallet>       Wallet integration (not yet implemented)
+  -h, --help             display help for command
+
+Examples:
+  $ create-sbc-app my-app
+  $ create-sbc-app my-app --template react
+  $ create-sbc-app my-app --template react --api-key your-api-key
+
+Available Templates:
+  - react    React + Vite template with SBC integration
+  - nextjs   Next.js template with SBC integration (coming soon)
 ```
 
-## Development
+## ✨ Features
+
+The React template includes comprehensive, production-ready examples:
+
+### 🔋 Core Functionality
 
-### Setup
+- **Smart Account Management** - Automatic account creation and management
+- **Gasless Transactions** - Send ETH and interact with contracts without gas fees
+- **Gas Estimation** - Preview transaction costs before sending
+- **Batch Transactions** - Send multiple operations in a single transaction
+- **Real-time Balance Tracking** - Monitor account balances and transaction status
+- **Error Handling** - Comprehensive error messages and recovery suggestions
+
+### 🎨 User Experience
+
+- **Modern UI Design** - Beautiful, responsive interfaces
+- **Form Validation** - Real-time address and input validation
+- **Loading States** - Clear feedback during operations
+- **Success/Error Feedback** - Visual confirmation of transaction status
+- **Block Explorer Integration** - Direct links to view transactions
+- **Copy-to-Clipboard** - Easy address and hash copying
+
+### 🛠️ Developer Experience
+
+- **TypeScript Support** - Full type safety
+- **Environment Configuration** - Secure API key and settings management
+- **Debug Logging** - Comprehensive development logging
+- **Hot Reload** - Fast development iteration
+- **Production Ready** - Optimized builds and deployment preparation
+
+## 🚀 React Template
+
+**Best for:** Client-side applications, rapid prototyping, and production use
 
 ```bash
-# Clone the repository
-git clone https://github.com/stablecoinxyz/create-sbc-app.git
-cd create-sbc-app
+npx create-sbc-app my-app
+```
 
-# Install dependencies
-npm install
+**Features:**
 
-# Link the package locally
-npm link
+- Fast development setup
+- Hot module replacement
+- Built-in testing framework
+- Easy deployment to static hosts
+- Modern React patterns and hooks
+
+## 📝 Configuration
+
+### Environment Variables
+
+The template includes comprehensive environment configuration:
+
+#### Required
+
+```bash
+# Your SBC API key (get from SBC dashboard)
+VITE_SBC_API_KEY=your_api_key_here
 ```
 
-### Making Changes
+## 📱 UI Components
+
+The template includes:
+
+- Account information display with copy functionality
+- Transaction forms with validation
+- Gas estimation interfaces
+- Success/error feedback with block explorer links
+- Responsive design with dark mode support
+
+## 🚀 Development Workflow
 
-1. Create a new changeset:
+### 1. Create Your App
 
-   ```bash
-   npm run changeset
-   ```
+```bash
+npx create-sbc-app my-sbc-app
+cd my-sbc-app
+```
 
-2. Follow the prompts to describe your changes
-   - Choose the type of change (major, minor, patch)
-   - Write a description of the changes
-   - Select which packages are affected
+### 2. Set Up Environment
 
-3. Commit your changes and the changeset
+```bash
+# Copy environment template
+cp .env.template .env
 
-### Publishing
+# Add your API key
+echo "VITE_SBC_API_KEY=your_actual_api_key" >> .env
+```
 
-1. Update versions and changelogs:
+### 3. Start Development
+
+```bash
+npm install
+npm run dev
+```
 
-   ```bash
-   npm run version
-   ```
+### 4. Test Features
 
-2. Review the changes and commit
+- Connect and view your smart account
+- Try sending test transactions
+- Experiment with gas estimation
+- Test batch transactions
 
-3. Publish to npm:
+### 5. Customize and Build
 
-   ```bash
-   npm run release
-   ```
+- Modify the UI to match your needs
+- Add your own smart contract interactions
+- Build for production
 
-## Contributing
+## 📚 Documentation
 
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Create a changeset (`npm run changeset`)
-4. Commit your changes (`git commit -am 'Add some amazing feature'`)
-5. Push to the branch (`git push origin feature/amazing-feature`)
-6. Open a Pull Request
+- **[SBC API Documentation](https://docs.stablecoin.xyz)** - Complete API reference
+- **[GitHub Repository](https://github.com/stablecoinxyz/app-kit)** - Source code and examples
 
-## License
+## 📄 License
 
-MIT © [Stable Coin Inc](https://stablecoin.xyz)
+MIT - Built with ❤️ by the SBC team

package/bin/cli.js

@@ -9,10 +9,22 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const program = new Command();
 program
     .name('create-sbc-app')
+    .description('Create a new SBC App Kit project with an opinionated template')
+    .version('0.1.0')
     .argument('[project-directory]', 'Directory to create the new app in')
-    .option('-t, --template <template>', 'Template to use (react, nextjs, backend)')
-    .option('--api-key <apiKey>', 'Your SBC API key')
+    .option('-t, --template <template>', 'Template to use: react, nextjs, or backend')
+    .option('--api-key <apiKey>', 'Your SBC API key for immediate configuration')
     .option('--wallet <wallet>', 'Wallet integration (not yet implemented)')
+    .addHelpText('after', `
+Examples:
+  $ create-sbc-app my-app
+  $ create-sbc-app my-app --template react
+  $ create-sbc-app my-app --template react --api-key your-api-key
+
+Available Templates:
+  - react    React + Vite template with SBC integration
+  - nextjs   Next.js template with SBC integration (coming soon)
+`)
     .action(async (dir, options) => {
     if (options.wallet) {
         console.log('Wallet integration not yet implemented.');
@@ -20,8 +32,7 @@ program
     }
     const templateChoices = [
         { title: 'React', value: 'react' },
-        { title: 'Next.js', value: 'nextjs' },
-        { title: 'Backend', value: 'backend' }
+        { title: 'Next.js', value: 'nextjs' }
     ];
     // Use provided argument or prompt for project directory
     let projectDir = dir && dir.trim() ? dir.trim() : '';
@@ -38,7 +49,7 @@ program
         projectDir = res.dir.trim();
     }
     // Use provided option or prompt for template
-    let template = options.template && ['react', 'nextjs', 'backend'].includes(options.template) ? options.template : '';
+    let template = options.template && ['react', 'nextjs'].includes(options.template) ? options.template : '';
     if (!template) {
         const res = await prompts({
             type: 'select',
@@ -50,8 +61,8 @@ program
             console.log('Template selection is required.');
             process.exit(1);
         }
-        template = templateChoices[res.template]?.value;
-        if (!template) {
+        template = res.template; // The value is already what we want from the choices
+        if (!template || !['react', 'nextjs'].includes(template)) {
             console.log('Template selection is required.');
             process.exit(1);
         }
@@ -93,12 +104,7 @@ program
         console.log(`  # Edit .env and add your SBC API key`);
     }
     console.log(`  pnpm install # or npm install`);
-    if (template === 'backend') {
-        console.log('  pnpm start   # or npm run start');
-    }
-    else {
-        console.log('  pnpm dev     # or npm run dev');
-    }
+    console.log('  pnpm dev     # or npm run dev');
     console.log('\nHappy hacking!');
 });
 program.parse();

package/package.json

@@ -1,54 +1,54 @@
 {
   "name": "create-sbc-app",
-  "version": "0.1.1",
-  "description": "Create a new SBC Account Abstraction application with one command",
-  "type": "commonjs",
+  "version": "0.1.2",
+  "description": "Scaffold a new SBC App Kit project with one command.",
   "bin": {
-    "create-sbc-app": "./bin/cli.js"
+    "create-sbc-app": "bin/cli.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "start": "node bin/cli.js",
+    "prepublishOnly": "npm run build"
+  },
+  "type": "module",
+  "dependencies": {
+    "commander": "^11.0.0",
+    "fs-extra": "^11.1.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "typescript": "^5.8.3"
   },
   "files": [
-    "bin",
-    "src",
-    "templates",
+    "bin/",
+    "templates/",
     "README.md"
   ],
-  "scripts": {
-    "release": "npm run build && changeset publish",
-    "build": "node scripts/prepare-templates.js",
-    "changeset": "changeset",
-    "version": "changeset version",
-    "test": "echo \"No tests yet\""
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stablecoinxyz/create-sbc-app.git"
   },
   "keywords": [
     "sbc",
     "account-abstraction",
     "ethereum",
-    "cli",
-    "create-app"
+    "create-app",
+    "template",
+    "react",
+    "nextjs",
+    "vite"
   ],
-  "author": "Stable Coin Inc",
+  "author": "SBC Team",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/stablecoinxyz/create-sbc-app.git"
-  },
   "bugs": {
     "url": "https://github.com/stablecoinxyz/create-sbc-app/issues"
   },
   "homepage": "https://github.com/stablecoinxyz/create-sbc-app#readme",
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "dependencies": {
-    "chalk": "^4.1.2",
-    "commander": "^12.0.0",
-    "fs-extra": "^11.2.0",
-    "inquirer": "^8.2.6",
-    "ora": "^5.4.1"
-  },
-  "devDependencies": {
-    "@changesets/cli": "^2.27.1"
-  },
   "publishConfig": {
     "access": "public"
   }

package/src/cli.ts

@@ -1,115 +0,0 @@
-#!/usr/bin/env node
-import { Command } from 'commander';
-import prompts from 'prompts';
-import { copyTemplate } from './copyTemplate.js';
-import path from 'path';
-import fs from 'fs-extra';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-const program = new Command();
-
-program
-  .name('create-sbc-app')
-  .argument('[project-directory]', 'Directory to create the new app in')
-  .option('-t, --template <template>', 'Template to use (react, nextjs, backend)')
-  .option('--api-key <apiKey>', 'Your SBC API key')
-  .option('--wallet <wallet>', 'Wallet integration (not yet implemented)')
-  .action(async (dir, options) => {
-    if (options.wallet) {
-      console.log('Wallet integration not yet implemented.');
-      process.exit(0);
-    }
-
-    const templateChoices = [
-      { title: 'React', value: 'react' },
-      { title: 'Next.js', value: 'nextjs' },
-      { title: 'Backend', value: 'backend' }
-    ];
-
-    // Use provided argument or prompt for project directory
-    let projectDir = dir && dir.trim() ? dir.trim() : '';
-    if (!projectDir) {
-      const res = await prompts({
-        type: 'text',
-        name: 'dir',
-        message: 'Project directory:'
-      });
-      if (!res.dir || !res.dir.trim()) {
-        console.log('Project directory is required.');
-        process.exit(1);
-      }
-      projectDir = res.dir.trim();
-    }
-
-    // Use provided option or prompt for template
-    let template = options.template && ['react', 'nextjs', 'backend'].includes(options.template) ? options.template : '';
-    if (!template) {
-      const res = await prompts({
-        type: 'select',
-        name: 'template',
-        message: 'Which template?',
-        choices: templateChoices
-      });
-      if (res.template === undefined) {
-        console.log('Template selection is required.');
-        process.exit(1);
-      }
-      template = templateChoices[res.template]?.value;
-      if (!template) {
-        console.log('Template selection is required.');
-        process.exit(1);
-      }
-    }
-
-    // Use provided option or prompt for API key
-    let apiKey = options.apiKey && options.apiKey.trim() ? options.apiKey.trim() : '';
-    if (!apiKey) {
-      const res = await prompts({
-        type: 'text',
-        name: 'apiKey',
-        message: 'Your SBC API key (or leave empty to set later):'
-      });
-      apiKey = res.apiKey ? res.apiKey.trim() : 'your-sbc-api-key';
-    }
-
-    const targetDir = path.resolve(process.cwd(), projectDir);
-    const templateDir = path.resolve(__dirname, '../templates', template);
-
-    if (fs.existsSync(targetDir)) {
-      const res = await prompts({
-        type: 'confirm',
-        name: 'overwrite',
-        message: `Directory ${projectDir} already exists. Overwrite?`,
-        initial: false
-      });
-      if (!res.overwrite) {
-        console.log('Aborted.');
-        process.exit(0);
-      }
-      await fs.remove(targetDir);
-    }
-
-    await copyTemplate(templateDir, targetDir, {
-      projectName: projectDir,
-      chain: 'baseSepolia',
-      apiKey: apiKey
-    });
-
-    console.log(`\nSuccess! Created ${projectDir} using the ${template} template.`);
-    console.log(`\nNext steps:`);
-    console.log(`  cd ${projectDir}`);
-    if (!options.apiKey && apiKey === 'your-sbc-api-key') {
-      console.log(`  # Edit .env and add your SBC API key`);
-    }
-    console.log(`  pnpm install # or npm install`);
-    if (template === 'backend') {
-      console.log('  pnpm start   # or npm run start');
-    } else {
-      console.log('  pnpm dev     # or npm run dev');
-    }
-    console.log('\nHappy hacking!');
-  });
-
-program.parse(); 

package/src/copyTemplate.ts

@@ -1,42 +0,0 @@
-import fs from 'fs-extra';
-import path from 'path';
-
-interface TemplateVars {
-  projectName: string;
-  chain: string;
-  apiKey: string;
-}
-
-export async function copyTemplate(src: string, dest: string, templateVars: TemplateVars = { projectName: 'my-sbc-app', chain: 'baseSepolia', apiKey: 'your-sbc-api-key' }) {
-  await fs.ensureDir(dest);
-  
-  const items = await fs.readdir(src);
-  
-  for (const item of items) {
-    const srcPath = path.join(src, item);
-    const stat = await fs.stat(srcPath);
-    
-    if (stat.isDirectory()) {
-      // Recursively copy directories
-      const destPath = path.join(dest, item);
-      await copyTemplate(srcPath, destPath, templateVars);
-    } else {
-      let destName = item;
-      if (item.endsWith('.template')) {
-        destName = item.replace(/\.template$/, '');
-        const destPath = path.join(dest, destName);
-        // Only do text replacement for .template files
-        const content = await fs.readFile(srcPath, 'utf-8');
-        const processedContent = content
-          .replace(/\{\{projectName\}\}/g, templateVars.projectName)
-          .replace(/\{\{chain\}\}/g, templateVars.chain)
-          .replace(/\{\{apiKey\}\}/g, templateVars.apiKey);
-        await fs.writeFile(destPath, processedContent);
-      } else {
-        // Copy all other files (including images) as binary
-        const destPath = path.join(dest, destName);
-        await fs.copy(srcPath, destPath);
-      }
-    }
-  }
-} 

package/src/index.js

@@ -1,221 +0,0 @@
-const inquirer = require('inquirer');
-const fs = require('fs-extra');
-const path = require('path');
-const chalk = require('chalk');
-const ora = require('ora');
-const { exec } = require('child_process');
-const { promisify } = require('util');
-
-const execAsync = promisify(exec);
-
-// Chain configuration mapping
-const CHAIN_CONFIG = {
-  baseSepolia: 'baseSepolia',
-  base: 'base'
-};
-
-async function createApp(projectName, options) {
-  console.log(chalk.cyan('🚀 Welcome to SBC App Creator!'));
-  console.log();
-
-  // Interactive prompts if not provided
-  const answers = await inquirer.prompt([
-    {
-      type: 'input',
-      name: 'projectName',
-      message: 'What is your project name?',
-      default: projectName || 'my-sbc-app',
-      when: !projectName,
-      validate: (input) => {
-        if (!input.trim()) return 'Project name is required';
-        if (!/^[a-z0-9-_]+$/i.test(input)) return 'Project name can only contain letters, numbers, hyphens, and underscores';
-        return true;
-      }
-    },
-    {
-      type: 'list',
-      name: 'template',
-      message: 'Which template would you like to use?',
-      choices: [
-        { name: 'Next.js (Recommended)', value: 'nextjs' },
-        { name: 'React', value: 'react' },
-        { name: 'Vanilla JavaScript', value: 'vanilla' }
-      ],
-      when: !options.template
-    },
-    {
-      type: 'input',
-      name: 'apiKey',
-      message: 'Enter your SBC API key (or leave empty to set later):',
-      when: !options.apiKey
-    },
-    {
-      type: 'list',
-      name: 'chain',
-      message: 'Which chain would you like to target?',
-      choices: [
-        { name: 'Base Sepolia (Testnet)', value: 'baseSepolia' },
-        { name: 'Base Mainnet', value: 'base' }
-      ],
-      default: 'baseSepolia'
-    }
-  ]);
-
-  const config = {
-    projectName: projectName || answers.projectName,
-    template: options.template || answers.template,
-    apiKey: options.apiKey || answers.apiKey || 'sbc-your-api-key-here',
-    chain: answers.chain || 'baseSepolia',
-    skipInstall: options.skipInstall || false
-  };
-
-  await scaffoldProject(config);
-}
-
-async function scaffoldProject(config) {
-  const { projectName, template, apiKey, chain, skipInstall } = config;
-  const targetDir = path.join(process.cwd(), projectName);
-
-  // Check if directory exists
-  if (await fs.pathExists(targetDir)) {
-    console.log(chalk.red(`❌ Directory ${projectName} already exists!`));
-    const overwrite = await inquirer.prompt([
-      {
-        type: 'confirm',
-        name: 'overwrite',
-        message: 'Do you want to overwrite it?',
-        default: false
-      }
-    ]);
-    
-    if (!overwrite.overwrite) {
-      console.log(chalk.yellow('Cancelled.'));
-      return;
-    }
-    
-    await fs.remove(targetDir);
-  }
-
-  const spinner = ora('Creating project structure...').start();
-
-  try {
-    // Copy template files
-    const templateDir = path.join(__dirname, '..', 'templates', template);
-    await fs.copy(templateDir, targetDir);
-
-    spinner.text = 'Configuring project...';
-    
-    // Replace template variables
-    await replaceTemplateVariables(targetDir, {
-      projectName,
-      apiKey,
-      chain: CHAIN_CONFIG[chain]
-    });
-
-    if (!skipInstall) {
-      spinner.text = 'Installing dependencies...';
-      
-      // Install dependencies
-      await execAsync('npm install', { cwd: targetDir });
-    }
-
-    spinner.succeed(chalk.green('Project created successfully!'));
-
-    // Success message
-    console.log();
-    console.log(chalk.green(`✅ ${projectName} is ready!`));
-    console.log();
-    
-    if (apiKey === 'sbc-your-api-key-here') {
-      console.log(chalk.yellow('🔑 IMPORTANT: Setup your SBC API key first!'));
-      console.log();
-      console.log('1. Get your API key:');
-      console.log(chalk.cyan('   Visit: https://dashboard.stablecoin.xyz'));
-      console.log();
-      console.log('2. Configure environment variables:');
-      console.log(chalk.cyan(`   cd ${projectName}`));
-      if (template === 'react') {
-        console.log(chalk.cyan('   # Edit the .env file and replace the API key:'));
-        console.log(chalk.cyan('   VITE_SBC_API_KEY=your_real_api_key_here'));
-      } else if (template === 'nextjs') {
-        console.log(chalk.cyan('   # Edit the .env.local file and replace the API key:'));
-        console.log(chalk.cyan('   SBC_API_KEY=your_real_api_key_here'));
-      } else {
-        console.log(chalk.cyan('   # Check your project files for API key configuration'));
-      }
-      console.log();
-      console.log('3. Start the development server:');
-    } else {
-      console.log('Next steps:');
-      console.log(chalk.cyan(`  cd ${projectName}`));
-    }
-    
-    if (skipInstall) {
-      console.log(chalk.cyan('  npm install'));
-    }
-    
-    console.log(chalk.cyan('  npm run dev'));
-    console.log();
-    
-    if (template === 'react') {
-      console.log('🚀 Your React app includes:');
-      console.log('   • Gasless transaction example');
-      console.log('   • Wallet connection component');
-      console.log('   • Balance checking functionality');
-      console.log('   • Complete error handling');
-      console.log('   • Modern Vite + TypeScript setup');
-      console.log();
-      console.log('💡 After connecting your wallet, try the "Send Gasless TX" button!');
-    } else if (template === 'nextjs') {
-      console.log('🚀 Your Next.js app is ready with SBC integration!');
-    } else {
-      console.log('🚀 Your vanilla app is ready with SBC integration!');
-    }
-    
-    console.log();
-    console.log('📚 Documentation: https://docs.stablecoin.xyz');
-    console.log('💬 Community: https://t.me/stablecoin_xyz');
-
-  } catch (error) {
-    spinner.fail('Failed to create project');
-    console.error(chalk.red('Error:', error.message));
-    
-    // Cleanup on failure
-    if (await fs.pathExists(targetDir)) {
-      await fs.remove(targetDir);
-    }
-    process.exit(1);
-  }
-}
-
-async function replaceTemplateVariables(dir, variables) {
-  const walk = async (currentPath) => {
-    const items = await fs.readdir(currentPath);
-    
-    for (const item of items) {
-      const fullPath = path.join(currentPath, item);
-      const stat = await fs.stat(fullPath);
-      
-      if (stat.isDirectory()) {
-        await walk(fullPath);
-      } else if (item.endsWith('.template')) {
-        let content = await fs.readFile(fullPath, 'utf8');
-        
-        // Replace variables
-        Object.entries(variables).forEach(([key, value]) => {
-          const regex = new RegExp(`{{${key}}}`, 'g');
-          content = content.replace(regex, value);
-        });
-        
-        // Remove .template extension
-        const newPath = fullPath.replace('.template', '');
-        await fs.writeFile(newPath, content);
-        await fs.remove(fullPath);
-      }
-    }
-  };
-  
-  await walk(dir);
-}
-
-module.exports = createApp; 

package/src/types/prompts.d.ts

@@ -1,3 +0,0 @@
-declare module 'prompts' {
-  export default function prompts(options: any): any;
-}