create-sbc-app 0.1.5 → 0.3.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

@@ -24,7 +24,7 @@ pnpm dev # or npm run dev
 ## CLI Options
 
 ```bash
-Usage: create-sbc-app [project-directory] [options]
+Usage: npx create-sbc-app [project-directory] [options]
 
 Create a new SBC App Kit project with an opinionated template
 
@@ -33,19 +33,27 @@ 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
+  -c, --chain <chain>     Chain to use: baseSepolia, base, or radiusTestnet
   --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
+  $ npx create-sbc-app my-app
+  $ npx create-sbc-app my-app --template react --chain radiusTestnet
+  $ npx create-sbc-app my-app --template react-dynamic --chain base
+  $ npx create-sbc-app my-app --template react-para --api-key your-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
+
+Available Chains:
+  - baseSepolia     Base Sepolia testnet (default)
+  - base            Base mainnet
+  - radiusTestnet   Radius testnet
 ```
 
 ## ✨ Features
@@ -105,7 +113,8 @@ The template includes comprehensive environment configuration:
 ```bash
 # Your SBC API key (get from SBC dashboard)
 VITE_SBC_API_KEY=your_api_key_here
-# "base" or "baseSepolia"
+
+# Supported chains: "baseSepolia" | "base" | "radiusTestnet"
 VITE_CHAIN="baseSepolia"
 ```
 
@@ -136,8 +145,8 @@ cp .env.template .env
 
 # then ensure your .env has the environment variables set up
 
-# "base" or "baseSepolia"
-VITE_CHAIN="baseSepolia" 
+# Supported chains: "baseSepolia" | "base" | "radiusTestnet"
+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
@@ -166,8 +175,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,20 +10,27 @@ 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('-c, --chain <chain>', 'Chain to use: baseSepolia, base, or radiusTestnet')
     .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 --chain radiusTestnet
   $ 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
+
+Available Chains:
+  - baseSepolia     Base Sepolia testnet (default)
+  - base            Base mainnet
+  - radiusTestnet   Radius testnet
 `)
     .action(async (dir, options) => {
     if (options.wallet) {
@@ -32,7 +39,13 @@ 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' }
+    ];
+    const chainChoices = [
+        { title: 'Base Sepolia (testnet)', value: 'baseSepolia' },
+        { title: 'Base (mainnet)', value: 'base' },
+        { title: 'Radius Testnet', value: 'radiusTestnet' }
     ];
     // Use provided argument or prompt for project directory
     let projectDir = dir && dir.trim() ? dir.trim() : '';
@@ -49,7 +62,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,11 +75,31 @@ 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);
         }
     }
+    // Use provided option or prompt for chain
+    let chain = options.chain && ['baseSepolia', 'base', 'radiusTestnet'].includes(options.chain) ? options.chain : '';
+    if (!chain) {
+        const res = await prompts({
+            type: 'select',
+            name: 'chain',
+            message: 'Which chain?',
+            choices: chainChoices,
+            initial: 0
+        });
+        if (res.chain === undefined) {
+            console.log('Chain selection is required.');
+            process.exit(1);
+        }
+        chain = res.chain;
+        if (!chain || !['baseSepolia', 'base', 'radiusTestnet'].includes(chain)) {
+            console.log('Chain 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) {
@@ -94,9 +127,30 @@ Available Templates:
     }
     await copyTemplate(templateDir, targetDir, {
         projectName: projectDir,
-        chain: 'baseSepolia',
+        chain: chain,
         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.5",
+  "version": "0.3.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

@@ -5,15 +5,22 @@ This directory contains ready-to-use templates for quickly starting new projects
 ## Available Templates
 
 - **react/** – Minimal React app with SBC integration (Vite)
+- **react-dynamic/** – React + Dynamic wallet + SBC App Kit (Vite)
+- **react-para/** – React + Para wallet + SBC App Kit (Vite)
 
 ## How to Use a Template
 
 1. **Copy the template directory** you want to use:
 
    ```bash
+   # Plain React template
    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
+
+   # Dynamic wallet template
+   cp -r create-sbc-app/react-dynamic my-dynamic-app
+
+   # Para wallet template
+   cp -r create-sbc-app/react-para my-para-app
    ```
 
 2. **Install dependencies:**
@@ -34,8 +41,8 @@ This directory contains ready-to-use templates for quickly starting new projects
    ```
 
 4. **Customize as needed:**
-   - Update the API key and config in `src/App.tsx` or `app/page.tsx`.
-   - Follow the template’s README for more details.
+   - Update the API key and config in `src/App.tsx`.
+   - Follow each template’s README for specific details and environment variables.
 
 ## Keeping Templates Up to Date
 

package/templates/react/.env.template

@@ -1,5 +1,6 @@
 # SBC App Kit Configuration
-VITE_CHAIN="baseSepolia"
+# Supported chains: "baseSepolia" | "base" | "radiusTestnet"
+VITE_CHAIN="{{chain}}"
 # 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

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

@@ -1,19 +1,32 @@
 import { useState, useEffect, useRef, createContext, useContext } from 'react';
 import { SbcProvider, WalletButton, useSbcApp, useUserOperation } from '@stablecoin.xyz/react';
+import { radiusTestnet, TestSBC_CONTRACT_ADDRESS } from '@stablecoin.xyz/core';
 import { base, baseSepolia } from 'viem/chains';
 import { createPublicClient, http, getAddress, parseSignature, WalletClient, PublicClient } from 'viem';
 import { parseUnits, encodeFunctionData, erc20Abi } from 'viem';
 import './App.css';
 
 // Chain selection helpers
-const chain = (import.meta.env.VITE_CHAIN === 'base') ? base : baseSepolia;
+const getChain = () => {
+  const chainEnv = import.meta.env.VITE_CHAIN;
+  if (chainEnv === 'base') return base;
+  if (chainEnv === 'radiusTestnet') return radiusTestnet;
+  return baseSepolia;
+};
+
+const chain = getChain();
 const rpcUrl = import.meta.env.VITE_RPC_URL;
 
+// Radius testnet uses TestSBC (a test token for development)
+const TEST_SBC_DECIMALS = 6;
+
 const SBC_TOKEN_ADDRESS = (chain) => {
   if (chain.id === baseSepolia.id) {
     return '0xf9FB20B8E097904f0aB7d12e9DbeE88f2dcd0F16';
   } else if (chain.id === base.id) {
     return '0xfdcC3dd6671eaB0709A4C0f3F53De9a333d80798';
+  } else if (chain.id === radiusTestnet.id) {
+    return TestSBC_CONTRACT_ADDRESS;
   }
   throw new Error('Unsupported chain');
 };
@@ -23,15 +36,26 @@ const SBC_DECIMALS = (chain) => {
     return 6;
   } else if (chain.id === base.id) {
     return 18;
+  } else if (chain.id === radiusTestnet.id) {
+    return TEST_SBC_DECIMALS;
   }
   throw new Error('Unsupported chain');
 };
 
+const getTokenSymbol = (chain) => {
+  if (chain.id === radiusTestnet.id) {
+    return 'TestSBC';
+  }
+  return 'SBC';
+};
+
 const chainExplorer = (chain) => {
   if (chain.id === baseSepolia.id) {
     return 'https://sepolia.basescan.org';
   } else if (chain.id === base.id) {
     return 'https://basescan.org';
+  } else if (chain.id === radiusTestnet.id) {
+    return 'https://testnet.radiustech.xyz/testnet/explorer';
   }
   throw new Error('Unsupported chain');
 };
@@ -73,6 +97,54 @@ const permitAbi = [
 
 function WalletStatus({ onDisconnect }: { onDisconnect: () => void }) {
   const { ownerAddress } = useSbcApp();
+  const [eoaBalances, setEoaBalances] = useState<{ eth: string | null; sbc: string | null }>({ eth: null, sbc: null });
+  const [isLoadingEoaBalances, setIsLoadingEoaBalances] = useState(false);
+
+  // Fetch ETH and TestSBC balances for EOA wallet
+  useEffect(() => {
+    if (!ownerAddress) return;
+
+    const fetchEoaBalances = async () => {
+      setIsLoadingEoaBalances(true);
+      try {
+        const [ethBalance, sbcBalance] = await Promise.all([
+          publicClient.getBalance({ address: ownerAddress as `0x${string}` }),
+          publicClient.readContract({
+            address: SBC_TOKEN_ADDRESS(chain) as `0x${string}`,
+            abi: erc20Abi,
+            functionName: 'balanceOf',
+            args: [ownerAddress as `0x${string}`],
+          })
+        ]);
+        setEoaBalances({ eth: ethBalance.toString(), sbc: (sbcBalance as bigint).toString() });
+      } catch (error) {
+        console.error('Failed to fetch EOA balances:', error);
+        setEoaBalances({ eth: '0', sbc: '0' });
+      } finally {
+        setIsLoadingEoaBalances(false);
+      }
+    };
+
+    fetchEoaBalances();
+  }, [ownerAddress]);
+
+  const formatEthBalance = (balance: string | null): string => {
+    if (!balance) return '0.0000';
+    try {
+      return (Number(balance) / 1e18).toFixed(4);
+    } catch {
+      return '0.0000';
+    }
+  };
+
+  const formatSbcBalance = (balance: string | null): string => {
+    if (!balance) return '0.00';
+    try {
+      return (Number(balance) / Math.pow(10, SBC_DECIMALS(chain))).toFixed(2);
+    } catch {
+      return '0.00';
+    }
+  };
 
   if (!ownerAddress) return null;
 
@@ -94,6 +166,18 @@ function WalletStatus({ onDisconnect }: { onDisconnect: () => void }) {
         <label>Chain:</label>
         <div className="value">{chain.name}</div>
       </div>
+      <div className="info-row">
+        <label>EOA ETH Balance:</label>
+        <div className="value">
+          {isLoadingEoaBalances ? 'Loading...' : `${formatEthBalance(eoaBalances.eth)} ETH`}
+        </div>
+      </div>
+      <div className="info-row">
+        <label>EOA {getTokenSymbol(chain)} Balance:</label>
+        <div className="value">
+          {isLoadingEoaBalances ? 'Loading...' : `${formatSbcBalance(eoaBalances.sbc)} ${getTokenSymbol(chain)}`}
+        </div>
+      </div>
     </div>
   );
 }
@@ -207,9 +291,9 @@ function SmartAccountInfo() {
         <div className="value">{formatEthBalance(account.balance)} ETH</div>
       </div>
       <div className="info-row">
-        <label>SBC Balance:</label>
+        <label>{getTokenSymbol(chain)} Balance:</label>
         <div className="value">
-          {isLoadingBalance ? 'Loading...' : `${formatSbcBalance(sbcBalance)} SBC`}
+          {isLoadingBalance ? 'Loading...' : `${formatSbcBalance(sbcBalance)} ${getTokenSymbol(chain)}`}
         </div>
       </div>
     </div>
@@ -229,7 +313,7 @@ function SendSBCForm() {
     try {
       const ownerChecksum = getAddress(ownerAddress);
       const spenderChecksum = getAddress(account.address);
-      const value = parseUnits('1', SBC_DECIMALS(chain)); // Send 1 SBC
+      const value = parseUnits('1', SBC_DECIMALS(chain)); // Send 1 token
       const deadline = Math.floor(Date.now() / 1000) + 60 * 30; // 30 min
       
       const signature = await getPermitSignature({
@@ -275,7 +359,7 @@ function SendSBCForm() {
 
   return (
     <div className="card">
-      <h3>💸 Send 1 SBC Token</h3>
+      <h3>💸 Send 1 {getTokenSymbol(chain)} Token</h3>
       <div className="form-group">
         <label>Recipient Address</label>
         <input
@@ -289,11 +373,11 @@ function SendSBCForm() {
           <span className="error-text">Invalid Ethereum address</span>
         )}
       </div>
-      
+
       <div className="status-section">
         <div className="info-row">
           <label>Amount:</label>
-          <div className="value">1.00 SBC</div>
+          <div className="value">1.00 {getTokenSymbol(chain)}</div>
         </div>
         <div className="info-row">
           <label>Gas fees:</label>
@@ -310,18 +394,18 @@ function SendSBCForm() {
         disabled={!isFormValid || isLoading || !account}
         className="primary"
       >
-        {isLoading ? 'Waiting for signature...' : 'Send 1 SBC'}
+        {isLoading ? 'Waiting for signature...' : `Send 1 ${getTokenSymbol(chain)}`}
       </button>
 
       {isSuccess && data && (
         <div className="success-message">
           <p>✅ Transaction Successful!</p>
-          <a 
+          <a
             href={`${chainExplorer(chain)}/tx/${data.transactionHash}`}
             target="_blank"
             rel="noopener noreferrer"
           >
-            View on BaseScan: {data.transactionHash}
+            View transaction: {data.transactionHash}
           </a>
         </div>
       )}

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
+# Supported chains: "baseSepolia" | "base" | "radiusTestnet"
+VITE_CHAIN={{chain}}
+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;
+
+