create-sbc-app 0.1.1

package/README.md

@@ -0,0 +1,105 @@
+# create-sbc-app
+
+Create a new SBC Account Abstraction application with one command.
+
+## Quick Start
+
+```bash
+# Using npm
+npx create-sbc-app my-sbc-app
+
+# Using yarn
+yarn create sbc-app my-sbc-app
+
+# Using pnpm
+pnpm create sbc-app my-sbc-app
+```
+
+## Features
+
+- 🚀 **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
+
+## Templates
+
+### React (Vite)
+
+- Lightning-fast development server
+- Modern tooling and DX
+- Minimal configuration
+
+## Options
+
+```bash
+npx create-sbc-app [options]
+
+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
+```
+
+## Development
+
+### Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/stablecoinxyz/create-sbc-app.git
+cd create-sbc-app
+
+# Install dependencies
+npm install
+
+# Link the package locally
+npm link
+```
+
+### Making Changes
+
+1. Create a new changeset:
+
+   ```bash
+   npm run changeset
+   ```
+
+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
+
+3. Commit your changes and the changeset
+
+### Publishing
+
+1. Update versions and changelogs:
+
+   ```bash
+   npm run version
+   ```
+
+2. Review the changes and commit
+
+3. Publish to npm:
+
+   ```bash
+   npm run release
+   ```
+
+## Contributing
+
+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
+
+## License
+
+MIT © [Stable Coin Inc](https://stablecoin.xyz)

package/bin/cli.js

@@ -0,0 +1,104 @@
+#!/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/bin/copyTemplate.js

@@ -0,0 +1,34 @@
+import fs from 'fs-extra';
+import path from 'path';
+export async function copyTemplate(src, dest, 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/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "create-sbc-app",
+  "version": "0.1.1",
+  "description": "Create a new SBC Account Abstraction application with one command",
+  "type": "commonjs",
+  "bin": {
+    "create-sbc-app": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "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\""
+  },
+  "keywords": [
+    "sbc",
+    "account-abstraction",
+    "ethereum",
+    "cli",
+    "create-app"
+  ],
+  "author": "Stable Coin Inc",
+  "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

@@ -0,0 +1,115 @@
+#!/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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,221 @@
+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

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