create-sbc-app 0.3.0 → 0.3.1

package/README.md

@@ -53,7 +53,7 @@ Available Templates:
 Available Chains:
   - baseSepolia     Base Sepolia testnet (default)
   - base            Base mainnet
-  - radiusTestnet   Radius testnet
+  - radiusTestnet   Radius testnet (react template only)
 ```
 
 ## ✨ Features
@@ -86,7 +86,9 @@ The React template includes comprehensive, production-ready examples:
 - **Hot Reload** - Fast development iteration
 - **Production Ready** - Optimized builds and deployment preparation
 
-## 🚀 React Template
+## 🚀 Templates
+
+### React Template (Default)
 
 **Best for:** Client-side applications, rapid prototyping, and production use
 
@@ -94,14 +96,52 @@ The React template includes comprehensive, production-ready examples:
 npx create-sbc-app my-app
 ```
 
-**Features:**
+**Supported Chains:** Base Sepolia, Base, Radius Testnet
 
+**Features:**
 - Fast development setup
 - Hot module replacement
+- Direct wallet connection (MetaMask, Coinbase, WalletConnect)
 - Built-in testing framework
 - Easy deployment to static hosts
 - Modern React patterns and hooks
 
+### React + Dynamic Template
+
+**Best for:** Applications requiring embedded wallets with social logins
+
+```bash
+npx create-sbc-app my-app --template react-dynamic
+```
+
+**Supported Chains:** Base Sepolia, Base (Radius Testnet not supported)
+
+**Features:**
+- Dynamic SDK integration for embedded wallets
+- Social login support (Google, Twitter, Discord, etc.)
+- Email/SMS wallet creation
+- All standard SBC features
+
+**Additional Requirements:** Dynamic Environment ID from [Dynamic Dashboard](https://app.dynamic.xyz/)
+
+### React + Para Template
+
+**Best for:** DeFi applications leveraging EIP-2612 permits
+
+```bash
+npx create-sbc-app my-app --template react-para
+```
+
+**Supported Chains:** Base Sepolia, Base (Radius Testnet not supported)
+
+**Features:**
+- Para wallet integration
+- EIP-2612 permit signatures
+- Gasless token approvals
+- All standard SBC features
+
+**Additional Requirements:** Para API Key from [Para](https://para.xyz/)
+
 ## 📝 Configuration
 
 ### Environment Variables
@@ -147,7 +187,7 @@ cp .env.template .env
 
 # Supported chains: "baseSepolia" | "base" | "radiusTestnet"
 VITE_CHAIN="baseSepolia"
-# Custom RPC URL (optional) - e.g. get one from Alchemey at https://dashboard.alchemy.com/apps
+# Custom RPC URL (optional) - e.g. get one from Alchemy at https://dashboard.alchemy.com/apps
 VITE_RPC_URL=
 # Get your SBC API Key at https://dashboard.stablecoin.xyz
 VITE_SBC_API_KEY=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sbc-app",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Scaffold a new SBC App Kit project with one command.",
   "bin": {
     "create-sbc-app": "bin/cli.js"

package/templates/README.md

@@ -1,12 +1,61 @@
-# create-sbc-app
+# create-sbc-app Templates
 
 This directory contains ready-to-use templates for quickly starting new projects with the SBC App Kit. Each template is a minimal, fully functional app that demonstrates best practices for integrating @stablecoin.xyz/core and @stablecoin.xyz/react.
 
 ## 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)
+### react/ – React + Vite + SBC App Kit (Default)
+
+**Best for:** Applications with custom wallet integrations, rapid prototyping, production use
+
+**Supported Chains:** Base Sepolia, Base, Radius Testnet
+
+**Features:**
+- Direct wallet connection (MetaMask, Coinbase Wallet, WalletConnect)
+- Complete SBC App Kit integration for gasless transactions
+- Full control over wallet connection UI/UX
+- TypeScript support
+- Vite for fast development
+
+**Use when:** You want maximum flexibility and plan to implement your own wallet connection logic or use standard Web3 wallets.
+
+### react-dynamic/ – React + Dynamic + SBC App Kit
+
+**Best for:** Applications requiring embedded wallets with social logins
+
+**Supported Chains:** Base Sepolia, Base (Radius Testnet not supported by Dynamic)
+
+**Features:**
+- Dynamic SDK integration for embedded wallets
+- Social authentication (Google, Twitter, Discord, GitHub, Apple, etc.)
+- Email and SMS wallet creation
+- Seamless onboarding for non-crypto users
+- Multi-chain support (Base and Base Sepolia)
+- All SBC App Kit features
+
+**Use when:** You want to provide the easiest possible onboarding experience with social logins and don't want users to install a wallet extension.
+
+**Additional Requirements:**
+- Dynamic Environment ID (get from https://app.dynamic.xyz/)
+
+### react-para/ – React + Para + SBC App Kit
+
+**Best for:** DeFi applications leveraging EIP-2612 permits and advanced gasless patterns
+
+**Supported Chains:** Base Sepolia, Base (Radius Testnet not supported by Para)
+
+**Features:**
+- Para wallet integration
+- EIP-2612 permit signature support
+- Gasless token approvals
+- Single-step token operations (no separate approval transaction)
+- Advanced meta-transaction patterns
+- All SBC App Kit features
+
+**Use when:** You're building DeFi applications (DEX, lending, staking) and want to optimize the user experience by eliminating approval transactions.
+
+**Additional Requirements:**
+- Para API Key (get from https://para.xyz/)
 
 ## How to Use a Template
 

package/templates/react/README.md.template

@@ -18,12 +18,12 @@ cp .env.example .env # Optional: for local overrides
 
 Edit `.env` and add your SBC API key and Chain, with the optional for a custom RPC:
 ```bash
-# "base" or "baseSepolia"
-VITE_CHAIN="baseSepolia" 
-# Custom RPC URL (optional) - e.g. get one from Alchemey at https://dashboard.alchemy.com/apps
+# Supported chains: "baseSepolia" | "base" | "radiusTestnet"
+VITE_CHAIN={{chain}}
+# Custom RPC URL (optional) - e.g. get one from Alchemy at https://dashboard.alchemy.com/apps
 VITE_RPC_URL=
 # Get your SBC API Key at https://dashboard.stablecoin.xyz
-VITE_SBC_API_KEY=
+VITE_SBC_API_KEY={{apiKey}}
 ```
 
 > **Get your API key:** Visit the [SBC Dashboard](https://dashboard.stablecoin.xyz) to create an account and get your API key.
@@ -108,13 +108,12 @@ This app is configured for **{{chain}}**. To use a different chain:
 
 1. Update `.env`:
    ```bash
-   VITE_SBC_CHAIN=your_chain_here
+   VITE_CHAIN=base          # Base mainnet
+   VITE_CHAIN=baseSepolia   # Base Sepolia testnet
+   VITE_CHAIN=radiusTestnet # Radius testnet
    ```
 
-2. Update the import in `App.tsx`:
-   ```typescript
-   import { yourChain } from 'viem/chains';
-   ```
+2. Restart your development server after changing the chain
 
 ## 📖 Learn More
 

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

@@ -2,6 +2,6 @@
 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"
+# Supported chains: "baseSepolia" | "base"
 VITE_CHAIN={{chain}}
 VITE_RPC_URL=

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

@@ -1,24 +1,142 @@
-# React + Dynamic + SBC App Kit
+# {{projectName}}
 
-Gasless transactions on Base using Dynamic SDK with SBC App Kit.
+React + Vite app with Dynamic wallet integration and SBC App Kit for gasless transactions.
+
+## Overview
+
+This template combines:
+- **Dynamic SDK** - Embedded wallet with social logins (Google, Twitter, Discord, email, SMS)
+- **SBC App Kit** - Account abstraction and gasless transactions
+- **React + Vite** - Fast, modern development experience
+
+Perfect for applications that need a seamless onboarding experience with social authentication and gasless transactions.
 
 ## Quick Start
 
-```bash
-pnpm install
-pnpm dev
-```
+1. **Install dependencies:**
+
+   ```bash
+   pnpm install
+   # or
+   npm install
+   ```
+
+2. **Configure environment:**
+
+   Copy `.env.template` to `.env` and fill in your API keys:
+
+   ```env
+   # Your SBC API key from https://dashboard.stablecoin.xyz
+   VITE_SBC_API_KEY={{apiKey}}
+
+   # Your Dynamic Environment ID from https://app.dynamic.xyz/
+   VITE_DYNAMIC_ENVIRONMENT_ID=your_dynamic_env_id
+
+   # Supported chains: "baseSepolia" | "base"
+   VITE_CHAIN={{chain}}
+
+   # Optional: Custom RPC URL (e.g., from Alchemy)
+   VITE_RPC_URL=
+   ```
+
+3. **Start the development server:**
+
+   ```bash
+   pnpm dev
+   # or
+   npm run dev
+   ```
+
+4. **Open your browser:**
+   Visit [http://localhost:5173](http://localhost:5173) (or the port shown in your terminal).
+
+## Features
+
+### Dynamic Wallet Integration
+- Social logins (Google, Twitter, Discord, GitHub, Apple, etc.)
+- Email and SMS authentication
+- Embedded wallet creation
+- Multi-chain support
+- Customizable authentication UI
 
-## Environment
+### SBC App Kit Integration
+- Automatic smart account creation
+- Gasless transactions
+- Gas estimation and previews
+- Batch transactions
+- Real-time balance tracking
+- Transaction history
 
-Create `.env` from `.env.template` and fill in values:
+### Developer Experience
+- TypeScript support with full type safety
+- Hot module replacement for fast development
+- Environment-based configuration
+- Comprehensive error handling
+- Debug logging
 
+## Getting Your API Keys
+
+### SBC API Key
+1. Visit [https://dashboard.stablecoin.xyz](https://dashboard.stablecoin.xyz)
+2. Sign up or log in
+3. Create a new API key
+4. Add it to your `.env` file as `VITE_SBC_API_KEY`
+
+### Dynamic Environment ID
+1. Visit [https://app.dynamic.xyz/](https://app.dynamic.xyz/)
+2. Create an account and a new project
+3. Copy your Environment ID
+4. Add it to your `.env` file as `VITE_DYNAMIC_ENVIRONMENT_ID`
+5. Configure your allowed authentication methods in the Dynamic dashboard
+
+## Customization
+
+### Modifying Authentication Methods
+Edit the Dynamic configuration in `src/App.tsx`:
+```typescript
+// Configure which authentication methods to enable
+walletConnectors={[EthereumWalletConnectors]}
+```
+
+### Styling
+- Edit `src/App.css` for component styles
+- Edit `src/index.css` for global styles
+- Customize Tailwind configuration in `tailwind.config.js`
+
+### Chain Configuration
+Change the chain in your `.env` file:
 ```env
-VITE_SBC_API_KEY={{apiKey}}
-VITE_DYNAMIC_ENVIRONMENT_ID=your_dynamic_env_id
-# Optional
-VITE_CHAIN=baseSepolia # or "base"
-VITE_RPC_URL=
+VITE_CHAIN=base          # Base mainnet
+VITE_CHAIN=baseSepolia   # Base Sepolia testnet
 ```
 
+**Note:** Radius Testnet is not currently supported by the Dynamic wallet provider. Use the base `react` template for Radius Testnet support.
+
+## Building for Production
+
+```bash
+pnpm build
+# or
+npm run build
+```
+
+The built files will be in the `dist/` directory, ready for deployment to any static host (Vercel, Netlify, Cloudflare Pages, etc.).
+
+## Learn More
+
+- [SBC Documentation](https://docs.stablecoin.xyz)
+- [Dynamic Documentation](https://docs.dynamic.xyz/)
+- [SBC App Kit GitHub](https://github.com/stablecoinxyz/app-kit)
+- [React Documentation](https://react.dev)
+- [Vite Documentation](https://vitejs.dev)
+
+## Support
+
+If you encounter any issues:
+1. Check the [SBC Documentation](https://docs.stablecoin.xyz)
+2. Review the [Dynamic Documentation](https://docs.dynamic.xyz/)
+3. Open an issue on the [SBC App Kit repository](https://github.com/stablecoinxyz/app-kit/issues)
+
+## License
 
+MIT

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

@@ -2,6 +2,6 @@
 VITE_SBC_API_KEY={{apiKey}}
 # Get your Para API Key at https://developer.getpara.com/
 VITE_PARA_API_KEY=your_para_api_key
-# Supported chains: "baseSepolia" | "base" | "radiusTestnet"
+# Supported chains: "baseSepolia" | "base"
 VITE_CHAIN={{chain}}
 VITE_RPC_URL=

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

@@ -1,24 +1,165 @@
-# React + Para + SBC App Kit
+# {{projectName}}
 
-Gasless user operation using EIP-2612 permit signed via Para and executed via SBC App Kit.
+React + Vite app with Para wallet integration and SBC App Kit for advanced gasless transactions using EIP-2612 permits.
+
+## Overview
+
+This template combines:
+- **Para** - Advanced wallet integration with EIP-2612 permit support
+- **SBC App Kit** - Account abstraction and gasless transactions
+- **React + Vite** - Fast, modern development experience
+
+Perfect for applications that need advanced gasless transaction patterns using EIP-2612 permit signatures, enabling token approvals without separate transactions.
+
+## What are EIP-2612 Permits?
+
+EIP-2612 permits allow users to sign approval messages off-chain, eliminating the need for a separate approval transaction. This creates a superior user experience:
+- No approval transaction fees
+- Single-step token operations
+- Enhanced security through time-limited permits
+- Better UX for DeFi interactions
 
 ## Quick Start
 
-```bash
-pnpm install
-pnpm dev
-```
+1. **Install dependencies:**
+
+   ```bash
+   pnpm install
+   # or
+   npm install
+   ```
+
+2. **Configure environment:**
+
+   Copy `.env.template` to `.env` and fill in your API keys:
+
+   ```env
+   # Your SBC API key from https://dashboard.stablecoin.xyz
+   VITE_SBC_API_KEY={{apiKey}}
+
+   # Your Para API key
+   VITE_PARA_API_KEY=your_para_api_key
+
+   # Supported chains: "baseSepolia" | "base"
+   VITE_CHAIN={{chain}}
+
+   # Optional: Custom RPC URL (e.g., from Alchemy)
+   VITE_RPC_URL=
+   ```
+
+3. **Start the development server:**
+
+   ```bash
+   pnpm dev
+   # or
+   npm run dev
+   ```
+
+4. **Open your browser:**
+   Visit [http://localhost:5173](http://localhost:5173) (or the port shown in your terminal).
+
+## Features
+
+### Para Wallet Integration
+- EIP-2612 permit signature support
+- Gasless token approvals
+- Advanced transaction patterns
+- Seamless wallet experience
+- Optimized for DeFi applications
 
-## Environment
+### SBC App Kit Integration
+- Automatic smart account creation
+- Gasless transactions
+- Gas estimation and previews
+- Batch transactions
+- Real-time balance tracking
+- Transaction history
 
-Create `.env` from `.env.template`:
+### Advanced Use Cases
+- Single-step token swaps (no separate approval)
+- Gasless staking operations
+- Permit-based token transfers
+- Enhanced DeFi interactions
+- Meta-transactions with permits
 
+### Developer Experience
+- TypeScript support with full type safety
+- Hot module replacement for fast development
+- Environment-based configuration
+- Comprehensive error handling
+- Debug logging
+
+## Getting Your API Keys
+
+### SBC API Key
+1. Visit [https://dashboard.stablecoin.xyz](https://dashboard.stablecoin.xyz)
+2. Sign up or log in
+3. Create a new API key
+4. Add it to your `.env` file as `VITE_SBC_API_KEY`
+
+### Para API Key
+1. Visit [https://para.xyz](https://para.xyz)
+2. Create an account and register your application
+3. Copy your API key
+4. Add it to your `.env` file as `VITE_PARA_API_KEY`
+
+## Customization
+
+### Styling
+- Edit `src/App.css` for component styles
+- Edit `src/index.css` for global styles
+- Customize Tailwind configuration in `tailwind.config.js`
+
+### Chain Configuration
+Change the chain in your `.env` file:
 ```env
-VITE_SBC_API_KEY={{apiKey}}
-VITE_PARA_API_KEY=your_para_api_key
-# Optional
-VITE_CHAIN=baseSepolia # or "base"
-VITE_RPC_URL=
+VITE_CHAIN=base          # Base mainnet
+VITE_CHAIN=baseSepolia   # Base Sepolia testnet
 ```
 
+**Note:** Radius Testnet is not currently supported by the Para wallet provider. Use the base `react` template for Radius Testnet support.
+
+### Permit Configuration
+Customize permit parameters in your application logic:
+- Deadline (expiration time)
+- Spender address
+- Token amounts
+
+## Building for Production
+
+```bash
+pnpm build
+# or
+npm run build
+```
+
+The built files will be in the `dist/` directory, ready for deployment to any static host (Vercel, Netlify, Cloudflare Pages, etc.).
+
+## Use Cases
+
+This template is ideal for:
+- DeFi applications requiring token approvals
+- DEX interfaces with optimized UX
+- Staking platforms
+- Lending/borrowing protocols
+- Any application benefiting from gasless approvals
+
+## Learn More
+
+- [SBC Documentation](https://docs.stablecoin.xyz)
+- [Para Documentation](https://docs.para.xyz)
+- [EIP-2612 Specification](https://eips.ethereum.org/EIPS/eip-2612)
+- [SBC App Kit GitHub](https://github.com/stablecoinxyz/app-kit)
+- [React Documentation](https://react.dev)
+- [Vite Documentation](https://vitejs.dev)
+
+## Support
+
+If you encounter any issues:
+1. Check the [SBC Documentation](https://docs.stablecoin.xyz)
+2. Review the [Para Documentation](https://docs.para.xyz)
+3. Open an issue on the [SBC App Kit repository](https://github.com/stablecoinxyz/app-kit/issues)
+
+## License
 
+MIT