create-sbc-app 0.1.3 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Stable Coin Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -33,7 +33,7 @@ Arguments:
 
 Options:
   -V, --version           output the version number
-  -t, --template <type>   Template to use: react, nextjs, or backend
+  -t, --template <type>   Template to use: react, react-dynamic, or react-para
   --api-key <apiKey>      Your SBC API key for immediate configuration
   --wallet <wallet>       Wallet integration (not yet implemented)
   -h, --help             display help for command
@@ -41,11 +41,14 @@ Options:
 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
+  $ create-sbc-app my-app --template react-dynamic
+  $ create-sbc-app my-app --template react-para
+  # Next.js template removed for now
 
 Available Templates:
-  - react    React + Vite template with SBC integration
-  - nextjs   Next.js template with SBC integration (coming soon)
+  - react           React + Vite template with SBC integration
+  - react-dynamic   React + Vite with Dynamic wallet integration
+  - react-para      React + Vite with Para wallet integration
 ```
 
 ## ✨ Features
@@ -134,8 +137,14 @@ cd my-sbc-app
 # Copy environment template
 cp .env.template .env
 
-# Add your API key
-echo "VITE_SBC_API_KEY=your_actual_api_key" >> .env
+# then ensure your .env has the environment variables set up
+
+# "base" or "baseSepolia"
+VITE_CHAIN="baseSepolia" 
+# Custom RPC URL (optional) - e.g. get one from Alchemey at https://dashboard.alchemy.com/apps
+VITE_RPC_URL=
+# Get your SBC API Key at https://dashboard.stablecoin.xyz
+VITE_SBC_API_KEY=
 ```
 
 ### 3. Start Development
@@ -160,8 +169,8 @@ npm run dev
 
 ## 📚 Documentation
 
-- **[SBC API Documentation](https://docs.stablecoin.xyz)** - Complete API reference
-- **[GitHub Repository](https://github.com/stablecoinxyz/app-kit)** - Source code and examples
+- **[SBC Documentation](https://docs.stablecoin.xyz)** - Official docs
+- **[GitHub Repository](https://github.com/stablecoinxyz/app-kit)** - AppKit API Reference. Source code and examples
 
 ## 📄 License
 

package/bin/cli.js

@@ -10,9 +10,9 @@ 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')
+    .version('0.2.0')
     .argument('[project-directory]', 'Directory to create the new app in')
-    .option('-t, --template <template>', 'Template to use: react, nextjs, or backend')
+    .option('-t, --template <template>', 'Template to use: react, react-dynamic, or react-para')
     .option('--api-key <apiKey>', 'Your SBC API key for immediate configuration')
     .option('--wallet <wallet>', 'Wallet integration (not yet implemented)')
     .addHelpText('after', `
@@ -22,8 +22,9 @@ Examples:
   $ 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)
+  - react           React + Vite template with SBC integration
+  - react-dynamic   React + Vite with Dynamic wallet integration
+  - react-para      React + Vite with Para wallet integration
 `)
     .action(async (dir, options) => {
     if (options.wallet) {
@@ -32,7 +33,8 @@ Available Templates:
     }
     const templateChoices = [
         { title: 'React', value: 'react' },
-        { title: 'Next.js', value: 'nextjs' }
+        { title: 'React (Dynamic wallet)', value: 'react-dynamic' },
+        { title: 'React (Para wallet)', value: 'react-para' }
     ];
     // Use provided argument or prompt for project directory
     let projectDir = dir && dir.trim() ? dir.trim() : '';
@@ -49,7 +51,7 @@ Available Templates:
         projectDir = res.dir.trim();
     }
     // Use provided option or prompt for template
-    let template = options.template && ['react', 'nextjs'].includes(options.template) ? options.template : '';
+    let template = options.template && ['react', 'react-dynamic', 'react-para'].includes(options.template) ? options.template : '';
     if (!template) {
         const res = await prompts({
             type: 'select',
@@ -62,7 +64,7 @@ Available Templates:
             process.exit(1);
         }
         template = res.template; // The value is already what we want from the choices
-        if (!template || !['react', 'nextjs'].includes(template)) {
+        if (!template || !['react', 'react-dynamic', 'react-para'].includes(template)) {
             console.log('Template selection is required.');
             process.exit(1);
         }
@@ -97,6 +99,27 @@ Available Templates:
         chain: 'baseSepolia',
         apiKey: apiKey
     });
+    // Ensure SBC logo exists in public/ for all templates
+    try {
+        const publicDir = path.join(targetDir, 'public');
+        await fs.ensureDir(publicDir);
+        const sourceLogo = path.resolve(__dirname, '../templates/react/public/sbc-logo.png');
+        const destLogo = path.join(publicDir, 'sbc-logo.png');
+        if (!(await fs.pathExists(destLogo)) && (await fs.pathExists(sourceLogo))) {
+            await fs.copy(sourceLogo, destLogo);
+        }
+    }
+    catch { }
+    // If .env.template exists, ensure apiKey placeholder is applied (copyTemplate already replaces)
+    // Also, create a default .env if none exists to make onboarding faster
+    try {
+        const envTemplatePath = path.join(targetDir, '.env.template');
+        const envPath = path.join(targetDir, '.env');
+        if (await fs.pathExists(envTemplatePath) && !(await fs.pathExists(envPath))) {
+            await fs.copy(envTemplatePath, envPath);
+        }
+    }
+    catch { }
     console.log(`\nSuccess! Created ${projectDir} using the ${template} template.`);
     console.log(`\nNext steps:`);
     console.log(`  cd ${projectDir}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sbc-app",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Scaffold a new SBC App Kit project with one command.",
   "bin": {
     "create-sbc-app": "bin/cli.js"
@@ -47,7 +47,6 @@
     "create-app",
     "template",
     "react",
-    "nextjs",
     "vite"
   ],
   "author": "SBC Team",

package/templates/README.md

@@ -12,8 +12,6 @@ This directory contains ready-to-use templates for quickly starting new projects
 
    ```bash
    cp -r create-sbc-app/react my-new-sbc-app
-   # or for Next.js:
-   cp -r create-sbc-app/nextjs my-new-sbc-next-app
    ```
 
 2. **Install dependencies:**

package/templates/react/.env.template

@@ -1,3 +1,6 @@
 # SBC App Kit Configuration
 VITE_CHAIN="baseSepolia"
+# Custom RPC URL (optional) - e.g. get one from Alchemey at https://dashboard.alchemy.com/apps
+VITE_RPC_URL=
+# Get your SBC API Key at https://dashboard.stablecoin.xyz
 VITE_SBC_API_KEY={{apiKey}}

package/templates/react/README.md.template

@@ -16,11 +16,14 @@ Copy the example environment file and add your SBC API key:
 cp .env.example .env # Optional: for local overrides
 ```
 
-Edit `.env` and add your SBC API key:
+Edit `.env` and add your SBC API key and Chain, with the optional for a custom RPC:
 ```bash
-VITE_SBC_API_KEY=your_api_key_here
-VITE_SBC_CHAIN={{chain}}
-VITE_SBC_DEBUG=true
+# "base" or "baseSepolia"
+VITE_CHAIN="baseSepolia" 
+# Custom RPC URL (optional) - e.g. get one from Alchemey at https://dashboard.alchemy.com/apps
+VITE_RPC_URL=
+# Get your SBC API Key at https://dashboard.stablecoin.xyz
+VITE_SBC_API_KEY=
 ```
 
 > **Get your API key:** Visit the [SBC Dashboard](https://dashboard.stablecoin.xyz) to create an account and get your API key.

package/templates/react/package.json.template

@@ -11,13 +11,11 @@
   "dependencies": {
     "@stablecoin.xyz/core": "latest",
     "@stablecoin.xyz/react": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "viem": "^2.31.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "viem": "^2.33.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^4.0.0",
     "typescript": "^5.0.0",
     "vite": "^5.0.0"

package/templates/react/src/App.tsx.template

@@ -7,6 +7,7 @@ import './App.css';
 
 // Chain selection helpers
 const chain = (import.meta.env.VITE_CHAIN === 'base') ? base : baseSepolia;
+const rpcUrl = import.meta.env.VITE_RPC_URL;
 
 const SBC_TOKEN_ADDRESS = (chain) => {
   if (chain.id === baseSepolia.id) {
@@ -400,6 +401,7 @@ export default function App() {
   const sbcConfig = {
     apiKey: import.meta.env.VITE_SBC_API_KEY || '{{apiKey}}',
     chain,
+    rpcUrl,
     wallet: 'auto' as const,
     debug: true,
     walletOptions: { autoConnect: false },

package/templates/react-dynamic/.env.template

@@ -0,0 +1,7 @@
+# Get your SBC API Key at https://dashboard.stablecoin.xyz
+VITE_SBC_API_KEY={{apiKey}}
+# Get your Dynamic Environment ID at https://app.dynamic.xyz/
+VITE_DYNAMIC_ENVIRONMENT_ID=your_dynamic_env_id
+# Optional:
+VITE_CHAIN=baseSepolia
+VITE_RPC_URL=

package/templates/react-dynamic/README.md.template

@@ -0,0 +1,24 @@
+# React + Dynamic + SBC App Kit
+
+Gasless transactions on Base using Dynamic SDK with SBC App Kit.
+
+## Quick Start
+
+```bash
+pnpm install
+pnpm dev
+```
+
+## Environment
+
+Create `.env` from `.env.template` and fill in values:
+
+```env
+VITE_SBC_API_KEY={{apiKey}}
+VITE_DYNAMIC_ENVIRONMENT_ID=your_dynamic_env_id
+# Optional
+VITE_CHAIN=baseSepolia # or "base"
+VITE_RPC_URL=
+```
+
+

package/templates/react-dynamic/eslint.config.js.template

@@ -0,0 +1,34 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from '@typescript-eslint/eslint-plugin'
+import tsparser from '@typescript-eslint/parser'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parser: tsparser,
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...tseslint.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
+
+

package/templates/react-dynamic/index.html.template

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}} – SBC + Dynamic</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+  </html>
+
+

package/templates/react-dynamic/package.json.template

@@ -0,0 +1,33 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@dynamic-labs/ethereum": "^4.25.7",
+    "@dynamic-labs/ethereum-aa": "^4.25.7",
+    "@dynamic-labs/sdk-react-core": "^4.25.7",
+    "@stablecoin.xyz/core": "latest",
+    "@stablecoin.xyz/react": "latest",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "viem": "^2.33.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}
+
+

package/templates/react-dynamic/postcss.config.js.template

@@ -0,0 +1,8 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+
+

package/templates/react-dynamic/src/App.css.template

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+