create-sbc-app 0.2.0 → 0.3.1

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
 
@@ -34,21 +34,26 @@ Arguments:
 Options:
   -V, --version           output the version number
   -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-dynamic
-  $ create-sbc-app my-app --template react-para
-  # Next.js template removed for now
+  $ 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
   - 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 (react template only)
 ```
 
 ## ✨ Features
@@ -81,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
 
@@ -89,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
@@ -108,7 +153,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"
 ```
 
@@ -139,9 +185,9 @@ cp .env.template .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
+# Supported chains: "baseSepolia" | "base" | "radiusTestnet"
+VITE_CHAIN="baseSepolia"
+# 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/bin/cli.js

@@ -13,18 +13,24 @@ program
     .version('0.2.0')
     .argument('[project-directory]', 'Directory to create the new app in')
     .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
   - 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) {
@@ -36,6 +42,11 @@ Available Templates:
         { 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() : '';
     if (!projectDir) {
@@ -69,6 +80,26 @@ Available Templates:
             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) {
@@ -96,7 +127,7 @@ Available Templates:
     }
     await copyTemplate(templateDir, targetDir, {
         projectName: projectDir,
-        chain: 'baseSepolia',
+        chain: chain,
         apiKey: apiKey
     });
     // Ensure SBC logo exists in public/ for all templates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sbc-app",
-  "version": "0.2.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,17 +1,75 @@
-# 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/ – 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
 
 1. **Copy the template directory** you want to use:
 
    ```bash
+   # Plain React template
    cp -r create-sbc-app/react my-new-sbc-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:**
@@ -32,8 +90,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/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/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

@@ -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
-# Optional:
-VITE_CHAIN=baseSepolia
+# 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-dynamic/src/App.tsx.template

@@ -2,25 +2,48 @@ import { DynamicContextProvider, useDynamicContext, DynamicUserProfile, DynamicW
 import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';
 import { ZeroDevSmartWalletConnectors } from '@dynamic-labs/ethereum-aa';
 import { useSbcDynamic } from '@stablecoin.xyz/react';
+import { radiusTestnet, TestSBC_CONTRACT_ADDRESS } from '@stablecoin.xyz/core';
 import { baseSepolia, base, type Chain } from 'viem/chains';
 import { createPublicClient, http, getAddress, parseUnits, encodeFunctionData, erc20Abi } from 'viem';
 import { useEffect, useState } from 'react';
 import './App.css';
 
-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: Chain) => {
   if (chain.id === baseSepolia.id) return '0xf9FB20B8E097904f0aB7d12e9DbeE88f2dcd0F16';
   if (chain.id === base.id) return '0xfdcC3dd6671eaB0709A4C0f3F53De9a333d80798';
+  if (chain.id === radiusTestnet.id) return TestSBC_CONTRACT_ADDRESS;
+  throw new Error('Unsupported chain');
+};
+
+const SBC_DECIMALS = (chain: Chain) => {
+  if (chain.id === baseSepolia.id) return 6;
+  if (chain.id === base.id) return 18;
+  if (chain.id === radiusTestnet.id) return TEST_SBC_DECIMALS;
   throw new Error('Unsupported chain');
 };
 
-const SBC_DECIMALS = (chain: Chain) => chain.id === baseSepolia.id ? 6 : 18;
+const getTokenSymbol = (chain: Chain) => {
+  if (chain.id === radiusTestnet.id) return 'TestSBC';
+  return 'SBC';
+};
 
 const chainExplorer = (chain: Chain) => {
   if (chain.id === baseSepolia.id) return 'https://sepolia.basescan.org';
   if (chain.id === base.id) return 'https://basescan.org';
+  if (chain.id === radiusTestnet.id) return 'https://testnet.radiustech.xyz/testnet/explorer';
   return '';
 };
 
@@ -74,7 +97,8 @@ function WalletStatus() {
           })
         ]);
         setBalances({ eth: ethBalance.toString(), sbc: (sbcBalance as bigint).toString() });
-      } catch {
+      } catch (error) {
+        console.error('Failed to fetch EOA balances:', error);
         setBalances({ eth: null, sbc: null });
       }
     })();
@@ -93,10 +117,10 @@ function WalletStatus() {
           <p className="text-xs text-green-600 mb-2">Connected via Dynamic SDK</p>
           <p className="text-xs text-green-600 mb-2"><strong>Chain:</strong> {chain.name} (ID: {chain.id})</p>
           <div className="mt-2 pt-2 border-t border-green-200">
-            <p className="text-xs font-medium text-green-700 mb-1">Wallet Balances:</p>
+            <p className="text-xs font-medium text-green-700 mb-1">EOA Wallet Balances:</p>
             <div className="flex gap-4">
               <span className="text-xs text-green-600"><strong>ETH:</strong> {fmtEth(balances.eth)}</span>
-              <span className="text-xs text-green-600"><strong>SBC:</strong> {fmtSbc(balances.sbc)}</span>
+              <span className="text-xs text-green-600"><strong>{getTokenSymbol(chain)}:</strong> {fmtSbc(balances.sbc)}</span>
             </div>
           </div>
         </div>
@@ -118,7 +142,10 @@ function SmartAccountInfo({ account, refreshAccount, isLoadingAccount, accountEr
           args: [account.address as `0x${string}`],
         });
         setSbcBalance((bal as bigint).toString());
-      } catch { setSbcBalance('0'); }
+      } catch (error) {
+        console.error('Failed to fetch smart account SBC balance:', error);
+        setSbcBalance('0');
+      }
     })();
   }, [account?.address]);
 
@@ -136,13 +163,8 @@ function SmartAccountInfo({ account, refreshAccount, isLoadingAccount, accountEr
         <div className="flex justify-between"><span className="text-purple-700">Smart Account Address:</span><span className="font-mono text-xs text-purple-600 break-all">{account.address}</span></div>
         <div className="flex justify-between"><span className="text-purple-700">Deployed:</span><span className="text-purple-600">{account.isDeployed ? '✅ Yes' : '⏳ On first transaction'}</span></div>
         <div className="flex justify-between"><span className="text-purple-700">Nonce:</span><span className="text-purple-600">{account.nonce}</span></div>
-        <div className="pt-2 border-t border-purple-200">
-          <p className="text-xs font-medium text-purple-700 mb-2">Smart Account Balances:</p>
-          <div className="space-y-1">
-            <div className="flex justify-between"><span className="text-purple-700">ETH:</span><span className="text-purple-600 font-mono text-xs">{fmtEth(account.balance)} ETH</span></div>
-            <div className="flex justify-between"><span className="text-purple-700">SBC:</span><span className="text-purple-600 font-mono text-xs">{fmtSbc(sbcBalance)} SBC</span></div>
-          </div>
-        </div>
+        <div className="flex justify-between"><span className="text-purple-700">ETH Balance:</span><span className="text-purple-600 font-mono text-xs">{fmtEth(account.balance)} ETH</span></div>
+        <div className="flex justify-between"><span className="text-purple-700">{getTokenSymbol(chain)} Balance:</span><span className="text-purple-600 font-mono text-xs">{fmtSbc(sbcBalance)} {getTokenSymbol(chain)}</span></div>
       </div>
       {accountError && <p className="mt-2 text-xs text-red-600">{String(accountError)}</p>}
     </div>
@@ -216,29 +238,29 @@ function TransactionForm({ account, sbcAppKit }: { account: any; sbcAppKit: any
 
   return (
     <div className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
-      <h3 className="font-semibold text-gray-800 mb-4">💸 Send SBC Tokens</h3>
+      <h3 className="font-semibold text-gray-800 mb-4">💸 Send {getTokenSymbol(chain)} Tokens</h3>
       <div className="space-y-4">
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-2">Recipient Address</label>
           <input type="text" value={recipient} onChange={(e) => setRecipient(e.target.value)} placeholder="0x..." className="w-full px-3 py-2 text-xs font-mono border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 border-gray-300" />
         </div>
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">Amount (SBC)</label>
+          <label className="block text-sm font-medium text-gray-700 mb-2">Amount ({getTokenSymbol(chain)})</label>
           <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="1.0" step="0.000001" min="0" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 border-gray-300" />
         </div>
         <div className="p-3 bg-gray-50 rounded">
-          <div className="flex justify-between text-sm"><span>Amount:</span><span className="font-medium">{amount} SBC</span></div>
+          <div className="flex justify-between text-sm"><span>Amount:</span><span className="font-medium">{amount} {getTokenSymbol(chain)}</span></div>
           <div className="flex justify-between text-xs text-gray-600"><span>Gas fees:</span><span>Covered by SBC Paymaster ✨</span></div>
           <div className="flex justify-between text-xs text-gray-600"><span>Signing:</span><span>Your Dynamic wallet will prompt to sign 🖊️</span></div>
         </div>
         <button onClick={sendTx} disabled={!isValid || status==='loading' || !account} className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
-          {status==='loading' ? 'Waiting for signature...' : `Send ${amount} SBC`}
+          {status==='loading' ? 'Waiting for signature...' : `Send ${amount} ${getTokenSymbol(chain)}`}
         </button>
         {status==='success' && result && (
           <div className="p-3 bg-green-50 border border-green-200 rounded">
             <p className="text-sm text-green-800 font-medium">✅ Transaction Submitted</p>
             <p className="text-xs text-green-600 font-mono break-all mt-1">
-              <a href={`${chainExplorer(chain)}/tx/${result.transactionHash}`} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">View on BaseScan: {result.transactionHash}</a>
+              <a href={`${chainExplorer(chain)}/tx/${result.transactionHash}`} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">View transaction: {result.transactionHash}</a>
             </p>
           </div>
         )}

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
-# Optional:
-VITE_CHAIN=baseSepolia
+# 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

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

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Environment, ParaProvider } from '@getpara/react-sdk';
 import '@getpara/react-sdk/styles.css';
 import { useSbcPara } from '@stablecoin.xyz/react';
+import { radiusTestnet, TestSBC_CONTRACT_ADDRESS } from '@stablecoin.xyz/core';
 import { useAccount, useWallet, useSignMessage } from '@getpara/react-sdk';
 import { baseSepolia, base, type Chain } from 'viem/chains';
 import { createPublicClient, http, getAddress, parseUnits, encodeFunctionData, erc20Abi } from 'viem';
@@ -12,15 +13,39 @@ import { buildPermitTypedData, hashPermitTypedData, hex32ToBase64, normalizeSign
 import { usePara } from './hooks/usePara';
 
 const queryClient = new QueryClient();
-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: Chain) => {
   if (chain.id === baseSepolia.id) return '0xf9FB20B8E097904f0aB7d12e9DbeE88f2dcd0F16';
   if (chain.id === base.id) return '0xfdcC3dd6671eaB0709A4C0f3F53De9a333d80798';
+  if (chain.id === radiusTestnet.id) return TestSBC_CONTRACT_ADDRESS;
+  throw new Error('Unsupported chain');
+};
+
+const SBC_DECIMALS = (chain: Chain) => {
+  if (chain.id === baseSepolia.id) return 6;
+  if (chain.id === base.id) return 18;
+  if (chain.id === radiusTestnet.id) return TEST_SBC_DECIMALS;
   throw new Error('Unsupported chain');
 };
-const SBC_DECIMALS = (chain: Chain) => chain.id === baseSepolia.id ? 6 : 18;
+
+const getTokenSymbol = (chain: Chain) => {
+  if (chain.id === radiusTestnet.id) return 'TestSBC';
+  return 'SBC';
+};
+
 const publicClient = createPublicClient({ chain, transport: http(rpcUrl) });
 
 // ERC20 + EIP-2612 nonces helper ABI
@@ -58,7 +83,12 @@ const permitAbi = [
   }
 ] as const;
 
-const chainExplorer = (c: Chain) => c.id === baseSepolia.id ? 'https://sepolia.basescan.org' : 'https://basescan.org';
+const chainExplorer = (c: Chain) => {
+  if (c.id === baseSepolia.id) return 'https://sepolia.basescan.org';
+  if (c.id === base.id) return 'https://basescan.org';
+  if (c.id === radiusTestnet.id) return 'https://testnet.radiustech.xyz/testnet/explorer';
+  return '';
+};
 
 function SmartAccountInfo({ account, refreshAccount, isLoadingAccount, accountError }: any) {
   const [sbcBalance, setSbcBalance] = useState<string | null>(null);
@@ -73,7 +103,10 @@ function SmartAccountInfo({ account, refreshAccount, isLoadingAccount, accountEr
           args: [account.address as `0x${string}`],
         });
         setSbcBalance((bal as bigint).toString());
-      } catch { setSbcBalance('0'); }
+      } catch (error) {
+        console.error('Failed to fetch smart account SBC balance:', error);
+        setSbcBalance('0');
+      }
     })();
   }, [account?.address]);
 
@@ -91,13 +124,8 @@ function SmartAccountInfo({ account, refreshAccount, isLoadingAccount, accountEr
         <div className="flex justify-between"><span className="text-purple-700">Smart Account Address:</span><span className="font-mono text-xs text-purple-600 break-all">{account.address}</span></div>
         <div className="flex justify-between"><span className="text-purple-700">Deployed:</span><span className="text-purple-600">{account.isDeployed ? '✅ Yes' : '⏳ On first transaction'}</span></div>
         <div className="flex justify-between"><span className="text-purple-700">Nonce:</span><span className="text-purple-600">{account.nonce}</span></div>
-        <div className="pt-2 border-t border-purple-200">
-          <p className="text-xs font-medium text-purple-700 mb-2">Smart Account Balances:</p>
-          <div className="space-y-1">
-            <div className="flex justify-between"><span className="text-purple-700">ETH:</span><span className="text-purple-600 font-mono text-xs">{fmtEth(account.balance)} ETH</span></div>
-            <div className="flex justify-between"><span className="text-purple-700">SBC:</span><span className="text-purple-600 font-mono text-xs">{fmtSbc(sbcBalance)} SBC</span></div>
-          </div>
-        </div>
+        <div className="flex justify-between"><span className="text-purple-700">ETH Balance:</span><span className="text-purple-600 font-mono text-xs">{fmtEth(account.balance)} ETH</span></div>
+        <div className="flex justify-between"><span className="text-purple-700">{getTokenSymbol(chain)} Balance:</span><span className="text-purple-600 font-mono text-xs">{fmtSbc(sbcBalance)} {getTokenSymbol(chain)}</span></div>
       </div>
       {accountError && <p className="mt-2 text-xs text-red-600">{String(accountError)}</p>}
     </div>
@@ -186,29 +214,29 @@ function TransactionForm({ account, sbcAppKit }: { account: any; sbcAppKit: any
 
   return (
     <div className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
-      <h3 className="font-semibold text-gray-800 mb-4">💸 Send SBC Tokens</h3>
+      <h3 className="font-semibold text-gray-800 mb-4">💸 Send {getTokenSymbol(chain)} Tokens</h3>
       <div className="space-y-4">
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-2">Recipient Address</label>
           <input type="text" value={recipient} onChange={(e) => setRecipient(e.target.value)} placeholder="0x..." className="w-full px-3 py-2 text-xs font-mono border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 border-gray-300" />
         </div>
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">Amount (SBC)</label>
+          <label className="block text-sm font-medium text-gray-700 mb-2">Amount ({getTokenSymbol(chain)})</label>
           <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="1.0" step="0.000001" min="0" className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 border-gray-300" />
         </div>
         <div className="p-3 bg-gray-50 rounded">
-          <div className="flex justify-between text-sm"><span>Amount:</span><span className="font-medium">{amount} SBC</span></div>
+          <div className="flex justify-between text-sm"><span>Amount:</span><span className="font-medium">{amount} {getTokenSymbol(chain)}</span></div>
           <div className="flex justify-between text-xs text-gray-600"><span>Gas fees:</span><span>Covered by SBC Paymaster ✨</span></div>
           <div className="flex justify-between text-xs text-gray-600"><span>Signing:</span><span>Your wallet will prompt to sign 🖊️</span></div>
         </div>
         <button onClick={sendTx} disabled={!isValid || status==='loading' || !account} className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
-          {status==='loading' ? 'Waiting for signature...' : `Send ${amount} SBC`}
+          {status==='loading' ? 'Waiting for signature...' : `Send ${amount} ${getTokenSymbol(chain)}`}
         </button>
         {status==='success' && result && (
           <div className="p-3 bg-green-50 border border-green-200 rounded">
             <p className="text-sm text-green-800 font-medium">✅ Transaction Submitted</p>
             <p className="text-xs text-green-600 font-mono break-all mt-1">
-              <a href={`${chainExplorer(chain)}/tx/${result.transactionHash}`} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">View on BaseScan: {result.transactionHash}</a>
+              <a href={`${chainExplorer(chain)}/tx/${result.transactionHash}`} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">View transaction: {result.transactionHash}</a>
             </p>
           </div>
         )}

package/templates/react-para/vite.config.ts.template

@@ -43,7 +43,6 @@ function esbuildStripVendorSourcemaps() {
 
 export default defineConfig({
   plugins: [react(), nodePolyfills(), stripVendorSourcemaps()],
-  logLevel: 'error',
   define: { global: 'globalThis' },
   server: { port: 3000 },
   optimizeDeps: {