create-sbc-app 0.4.3 → 0.4.5

package/README.md

@@ -34,14 +34,14 @@ Arguments:
 Options:
   -V, --version           output the version number
   -t, --template <type>   Template to use: react, react-dynamic, react-para, or react-turnkey
-  -c, --chain <chain>     Chain to use: baseSepolia, base, or radiusTestnet
+  -c, --chain <chain>     Chain to use: baseSepolia, base, radiusTestnet, or radius
   --api-key <apiKey>      Your SBC API key for immediate configuration
   --wallet <wallet>       Wallet integration (not yet implemented)
   -h, --help             display help for command
 
 Examples:
   $ npx create-sbc-app my-app
-  $ npx create-sbc-app my-app --template react --chain radiusTestnet
+  $ npx create-sbc-app my-app --template react --chain radius
   $ npx create-sbc-app my-app --template react-dynamic --chain base
   $ npx create-sbc-app my-app --template react-para --api-key your-key
   $ npx create-sbc-app my-app --template react-turnkey --chain base
@@ -56,6 +56,7 @@ Available Chains:
   - baseSepolia     Base Sepolia testnet (default)
   - base            Base mainnet
   - radiusTestnet   Radius testnet (react template only - not supported by Dynamic, Para, or Turnkey)
+  - radius          Radius mainnet (react template only - not supported by Dynamic, Para, or Turnkey)
 ```
 
 ## ✨ Features
@@ -98,7 +99,7 @@ The React template includes comprehensive, production-ready examples:
 npx create-sbc-app my-app
 ```
 
-**Supported Chains:** Base Sepolia, Base, Radius Testnet
+**Supported Chains:** Base Sepolia, Base, Radius Testnet, Radius Mainnet
 
 **Features:**
 - Fast development setup
@@ -134,7 +135,7 @@ npx create-sbc-app my-app --template react-dynamic
 npx create-sbc-app my-app --template react-para
 ```
 
-**Supported Chains:** Base Sepolia, Base (Radius Testnet not supported)
+**Supported Chains:** Base Sepolia, Base, Radius Testnet, Radius
 
 **Features:**
 - Para wallet integration
@@ -184,7 +185,7 @@ The template includes comprehensive environment configuration:
 # Your SBC API key (get from SBC dashboard)
 VITE_SBC_API_KEY=your_api_key_here
 
-# Supported chains: "baseSepolia" | "base" | "radiusTestnet"
+# Supported chains: "baseSepolia" | "base" | "radiusTestnet" | "radius"
 VITE_CHAIN="baseSepolia"
 ```
 
@@ -215,7 +216,7 @@ cp .env.template .env
 
 # then ensure your .env has the environment variables set up
 
-# Supported chains: "baseSepolia" | "base" | "radiusTestnet"
+# Supported chains: "baseSepolia" | "base" | "radiusTestnet" | "radius"
 VITE_CHAIN="baseSepolia"
 # Custom RPC URL (optional) - e.g. get one from Alchemy at https://dashboard.alchemy.com/apps
 VITE_RPC_URL=

package/bin/cli.js

@@ -13,13 +13,13 @@ program
     .version('0.4.0')
     .argument('[project-directory]', 'Directory to create the new app in')
     .option('-t, --template <template>', 'Template to use: react, react-dynamic, react-para, or react-turnkey')
-    .option('-c, --chain <chain>', 'Chain to use: baseSepolia, base, or radiusTestnet')
+    .option('-c, --chain <chain>', 'Chain to use: baseSepolia, base, radiusTestnet, or radius')
     .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 --chain radiusTestnet
+  $ create-sbc-app my-app --template react --chain radius
   $ create-sbc-app my-app --template react --api-key your-api-key
 
 Available Templates:
@@ -32,6 +32,7 @@ Available Chains:
   - baseSepolia     Base Sepolia testnet (default)
   - base            Base mainnet
   - radiusTestnet   Radius testnet
+  - radius          Radius mainnet
 `)
     .action(async (dir, options) => {
     if (options.wallet) {
@@ -47,7 +48,8 @@ Available Chains:
     const chainChoices = [
         { title: 'Base Sepolia (testnet)', value: 'baseSepolia' },
         { title: 'Base (mainnet)', value: 'base' },
-        { title: 'Radius Testnet', value: 'radiusTestnet' }
+        { title: 'Radius Testnet', value: 'radiusTestnet' },
+        { title: 'Radius (mainnet)', value: 'radius' }
     ];
     // Use provided argument or prompt for project directory
     let projectDir = dir && dir.trim() ? dir.trim() : '';
@@ -83,7 +85,7 @@ Available Chains:
         }
     }
     // Use provided option or prompt for chain
-    let chain = options.chain && ['baseSepolia', 'base', 'radiusTestnet'].includes(options.chain) ? options.chain : '';
+    let chain = options.chain && ['baseSepolia', 'base', 'radiusTestnet', 'radius'].includes(options.chain) ? options.chain : '';
     if (!chain) {
         const res = await prompts({
             type: 'select',
@@ -97,14 +99,14 @@ Available Chains:
             process.exit(1);
         }
         chain = res.chain;
-        if (!chain || !['baseSepolia', 'base', 'radiusTestnet'].includes(chain)) {
+        if (!chain || !['baseSepolia', 'base', 'radiusTestnet', 'radius'].includes(chain)) {
             console.log('Chain selection is required.');
             process.exit(1);
         }
     }
     // Validate template + chain compatibility
-    if (['react-dynamic', 'react-para', 'react-turnkey'].includes(template) && chain === 'radiusTestnet') {
-        console.log(`\nError: The ${template} template does not support radiusTestnet.`);
+    if (['react-dynamic', 'react-turnkey'].includes(template) && (chain === 'radiusTestnet' || chain === 'radius')) {
+        console.log(`\nError: The ${template} template does not support ${chain}.`);
         console.log('Please use baseSepolia or base chain instead.\n');
         process.exit(1);
     }

package/package.json

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

package/templates/react/.env.template

@@ -1,5 +1,5 @@
 # SBC App Kit Configuration
-# Supported chains: "baseSepolia" | "base" | "radiusTestnet"
+# Supported chains: "baseSepolia" | "base" | "radiusTestnet" | "radius"
 VITE_CHAIN="{{chain}}"
 # Custom RPC URL (optional) - e.g. get one from Alchemey at https://dashboard.alchemy.com/apps
 VITE_RPC_URL=

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

@@ -1,6 +1,6 @@
 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 { radiusTestnet, radius, SBC_CONTRACT_ADDRESS_RADIUS } 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';
@@ -11,22 +11,20 @@ const getChain = () => {
   const chainEnv = import.meta.env.VITE_CHAIN;
   if (chainEnv === 'base') return base;
   if (chainEnv === 'radiusTestnet') return radiusTestnet;
+  if (chainEnv === 'radius') return radius;
   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;
+  } else if (chain.id === radiusTestnet.id || chain.id === radius.id) {
+    return SBC_CONTRACT_ADDRESS_RADIUS;
   }
   throw new Error('Unsupported chain');
 };
@@ -36,18 +34,13 @@ const SBC_DECIMALS = (chain) => {
     return 6;
   } else if (chain.id === base.id) {
     return 18;
-  } else if (chain.id === radiusTestnet.id) {
-    return TEST_SBC_DECIMALS;
+  } else if (chain.id === radiusTestnet.id || chain.id === radius.id) {
+    return 6; // SBC token on Radius has 6 decimals
   }
   throw new Error('Unsupported chain');
 };
 
-const getTokenSymbol = (chain) => {
-  if (chain.id === radiusTestnet.id) {
-    return 'TestSBC';
-  }
-  return 'SBC';
-};
+const getTokenSymbol = () => 'SBC';
 
 const chainExplorer = (chain) => {
   if (chain.id === baseSepolia.id) {
@@ -56,6 +49,8 @@ const chainExplorer = (chain) => {
     return 'https://basescan.org';
   } else if (chain.id === radiusTestnet.id) {
     return 'https://testnet.radiustech.xyz/testnet/explorer';
+  } else if (chain.id === radius.id) {
+    return 'https://network.radiustech.xyz';
   }
   throw new Error('Unsupported chain');
 };

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

@@ -2,7 +2,7 @@ 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 { radiusTestnet, radius, SBC_CONTRACT_ADDRESS_RADIUS } 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';
@@ -12,38 +12,34 @@ const getChain = () => {
   const chainEnv = import.meta.env.VITE_CHAIN;
   if (chainEnv === 'base') return base;
   if (chainEnv === 'radiusTestnet') return radiusTestnet;
+  if (chainEnv === 'radius') return radius;
   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;
+  if (chain.id === radiusTestnet.id || chain.id === radius.id) return SBC_CONTRACT_ADDRESS_RADIUS;
   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;
+  if (chain.id === radiusTestnet.id || chain.id === radius.id) return 6;
   throw new Error('Unsupported chain');
 };
 
-const getTokenSymbol = (chain: Chain) => {
-  if (chain.id === radiusTestnet.id) return 'TestSBC';
-  return 'SBC';
-};
+const getTokenSymbol = () => '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';
+  if (chain.id === radius.id) return 'https://network.radiustech.xyz';
   return '';
 };
 

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

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

@@ -2,7 +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 { radiusTestnet, radius, SBC_CONTRACT_ADDRESS_RADIUS } 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';
@@ -18,33 +18,28 @@ const getChain = () => {
   const chainEnv = import.meta.env.VITE_CHAIN;
   if (chainEnv === 'base') return base;
   if (chainEnv === 'radiusTestnet') return radiusTestnet;
+  if (chainEnv === 'radius') return radius;
   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;
+  if (chain.id === radiusTestnet.id || chain.id === radius.id) return SBC_CONTRACT_ADDRESS_RADIUS;
   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;
+  if (chain.id === radiusTestnet.id || chain.id === radius.id) return 6;
   throw new Error('Unsupported chain');
 };
 
-const getTokenSymbol = (chain: Chain) => {
-  if (chain.id === radiusTestnet.id) return 'TestSBC';
-  return 'SBC';
-};
+const getTokenSymbol = () => 'SBC';
 
 const publicClient = createPublicClient({ chain, transport: http(rpcUrl) });
 
@@ -86,10 +81,14 @@ const permitAbi = [
 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';
+  if (c.id === radiusTestnet.id) return 'https://testnet.radiustech.xyz';
+  if (c.id === radius.id) return 'https://network.radiustech.xyz';
   return '';
 };
 
+const isRadiusChain = (c: Chain) => c.id === radiusTestnet.id || c.id === radius.id;
+const nativeCurrencyLabel = (c: Chain) => isRadiusChain(c) ? 'RUSD' : 'ETH';
+
 function SmartAccountInfo({ account, refreshAccount, isLoadingAccount, accountError }: any) {
   const [sbcBalance, setSbcBalance] = useState<string | null>(null);
   useEffect(() => {
@@ -124,7 +123,7 @@ 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="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">{nativeCurrencyLabel(chain)} Balance:</span><span className="text-purple-600 font-mono text-xs">{fmtEth(account.balance)} {nativeCurrencyLabel(chain)}</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>}

package/templates/react-para/src/utils/permit.ts.template

@@ -5,11 +5,10 @@ export type PermitTypedData = {
   domain: {
     name: string;
     version: string;
-    chainId: bigint;
+    chainId: number;
     verifyingContract: `0x${string}`;
   };
   types: {
-    EIP712Domain: Array<{ name: string; type: string }>;
     Permit: Array<{ name: string; type: string }>;
   };
   message: {
@@ -37,16 +36,10 @@ export function buildPermitTypedData(params: {
     domain: {
       name: tokenName,
       version: '1',
-      chainId: BigInt(chainId),
+      chainId: chainId,
       verifyingContract: tokenAddress,
     },
     types: {
-      EIP712Domain: [
-        { name: 'name', type: 'string' },
-        { name: 'version', type: 'string' },
-        { name: 'chainId', type: 'uint256' },
-        { name: 'verifyingContract', type: 'address' },
-      ],
       Permit: [
         { name: 'owner', type: 'address' },
         { name: 'spender', type: 'address' },

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

@@ -1656,17 +1656,11 @@ async function getPermitSignature({
     const domain = {
       name: tokenName as string,
       version: '1',
-      chainId: BigInt(chainId),
+      chainId: chainId,
       verifyingContract: SBC_TOKEN_ADDRESS(chain) as `0x${string}`,
     };
 
     const types = {
-      EIP712Domain: [
-        { name: 'name', type: 'string' },
-        { name: 'version', type: 'string' },
-        { name: 'chainId', type: 'uint256' },
-        { name: 'verifyingContract', type: 'address' },
-      ],
       Permit: [
         { name: 'owner', type: 'address' },
         { name: 'spender', type: 'address' },