create-sbc-app 0.2.0 → 0.3.0

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
 ```
 
 ## ✨ Features
@@ -108,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"
 ```
 
@@ -139,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

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.0",
   "description": "Scaffold a new SBC App Kit project with one command.",
   "bin": {
     "create-sbc-app": "bin/cli.js"

package/templates/README.md

@@ -5,13 +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
+
+   # 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 +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/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" | "radiusTestnet"
+VITE_CHAIN={{chain}}
 VITE_RPC_URL=

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" | "radiusTestnet"
+VITE_CHAIN={{chain}}
 VITE_RPC_URL=

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: {