create-sbc-app 0.1.2 → 0.1.5

package/README.md

@@ -105,6 +105,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"
+VITE_CHAIN="baseSepolia"
 ```
 
 ## 📱 UI Components
@@ -132,8 +134,14 @@ cd my-sbc-app
 # Copy environment template
 cp .env.template .env
 
-# Add your API key
-echo "VITE_SBC_API_KEY=your_actual_api_key" >> .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
+VITE_RPC_URL=
+# Get your SBC API Key at https://dashboard.stablecoin.xyz
+VITE_SBC_API_KEY=
 ```
 
 ### 3. Start Development

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sbc-app",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "Scaffold a new SBC App Kit project with one command.",
   "bin": {
     "create-sbc-app": "bin/cli.js"
@@ -9,7 +9,14 @@
     "build": "tsc",
     "dev": "tsc --watch",
     "start": "node bin/cli.js",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "preversion": "npm run build && npm run test-pack",
+    "test-pack": "npm pack --dry-run",
+    "test-cli": "mkdir -p test-cli && cd test-cli && node ../bin/cli.js test-app --template react && rm -rf test-cli",
+    "prepare-publish": "npm run build && npm run test-pack && npm run test-cli",
+    "publish-patch": "npm run prepare-publish && npm version patch && npm publish",
+    "publish-minor": "npm run prepare-publish && npm version minor && npm publish",
+    "publish-major": "npm run prepare-publish && npm version major && npm publish"
   },
   "type": "module",
   "dependencies": {

package/templates/react/.env.template

@@ -1,2 +1,6 @@
 # SBC App Kit Configuration
+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
 VITE_SBC_API_KEY={{apiKey}}

package/templates/react/README.md.template

@@ -16,11 +16,14 @@ Copy the example environment file and add your SBC API key:
 cp .env.example .env # Optional: for local overrides
 ```
 
-Edit `.env` and add your SBC API key:
+Edit `.env` and add your SBC API key and Chain, with the optional for a custom RPC:
 ```bash
-VITE_SBC_API_KEY=your_api_key_here
-VITE_SBC_CHAIN={{chain}}
-VITE_SBC_DEBUG=true
+# "base" or "baseSepolia"
+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
+VITE_SBC_API_KEY=
 ```
 
 > **Get your API key:** Visit the [SBC Dashboard](https://dashboard.stablecoin.xyz) to create an account and get your API key.

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

@@ -1,15 +1,42 @@
 import { useState, useEffect, useRef, createContext, useContext } from 'react';
 import { SbcProvider, WalletButton, useSbcApp, useUserOperation } from '@stablecoin.xyz/react';
-import { {{chain}} } from 'viem/chains';
+import { base, baseSepolia } from 'viem/chains';
 import { createPublicClient, http, getAddress, parseSignature, WalletClient, PublicClient } from 'viem';
 import { parseUnits, encodeFunctionData, erc20Abi } from 'viem';
 import './App.css';
 
-// SBC Token Configuration
-const SBC_TOKEN_ADDRESS = '0xf9FB20B8E097904f0aB7d12e9DbeE88f2dcd0F16';
-const SBC_DECIMALS = 6;
+// Chain selection helpers
+const chain = (import.meta.env.VITE_CHAIN === 'base') ? base : baseSepolia;
+const rpcUrl = import.meta.env.VITE_RPC_URL;
 
-const publicClient = createPublicClient({ chain: {{chain}}, transport: http() });
+const SBC_TOKEN_ADDRESS = (chain) => {
+  if (chain.id === baseSepolia.id) {
+    return '0xf9FB20B8E097904f0aB7d12e9DbeE88f2dcd0F16';
+  } else if (chain.id === base.id) {
+    return '0xfdcC3dd6671eaB0709A4C0f3F53De9a333d80798';
+  }
+  throw new Error('Unsupported chain');
+};
+
+const SBC_DECIMALS = (chain) => {
+  if (chain.id === baseSepolia.id) {
+    return 6;
+  } else if (chain.id === base.id) {
+    return 18;
+  }
+  throw new Error('Unsupported chain');
+};
+
+const chainExplorer = (chain) => {
+  if (chain.id === baseSepolia.id) {
+    return 'https://sepolia.basescan.org';
+  } else if (chain.id === base.id) {
+    return 'https://basescan.org';
+  }
+  throw new Error('Unsupported chain');
+};
+
+const publicClient = createPublicClient({ chain, transport: http() });
 
 const erc20PermitAbi = [
   ...erc20Abi,
@@ -63,6 +90,10 @@ function WalletStatus({ onDisconnect }: { onDisconnect: () => void }) {
         <label>Connection:</label>
         <div className="value">Connected via wallet extension</div>
       </div>
+      <div className="info-row">
+        <label>Chain:</label>
+        <div className="value">{chain.name}</div>
+      </div>
     </div>
   );
 }
@@ -81,7 +112,7 @@ function SmartAccountInfo() {
       setIsLoadingBalance(true);
       try {
         const balance = await publicClient.readContract({
-          address: SBC_TOKEN_ADDRESS as `0x${string}`,
+          address: SBC_TOKEN_ADDRESS(chain) as `0x${string}`,
           abi: erc20Abi,
           functionName: 'balanceOf',
           args: [account.address as `0x${string}`],
@@ -107,7 +138,7 @@ function SmartAccountInfo() {
         setIsLoadingBalance(true);
         try {
           const balance = await publicClient.readContract({
-            address: SBC_TOKEN_ADDRESS as `0x${string}`,
+            address: SBC_TOKEN_ADDRESS(chain) as `0x${string}`,
             abi: erc20Abi,
             functionName: 'balanceOf',
             args: [account.address as `0x${string}`],
@@ -138,7 +169,7 @@ function SmartAccountInfo() {
   const formatSbcBalance = (balance: string | null): string => {
     if (!balance) return '0.00';
     try {
-      return (Number(balance) / Math.pow(10, SBC_DECIMALS)).toFixed(2);
+      return (Number(balance) / Math.pow(10, SBC_DECIMALS(chain))).toFixed(2);
     } catch {
       return '0.00';
     }
@@ -198,7 +229,7 @@ function SendSBCForm() {
     try {
       const ownerChecksum = getAddress(ownerAddress);
       const spenderChecksum = getAddress(account.address);
-      const value = parseUnits('1', SBC_DECIMALS); // Send 1 SBC
+      const value = parseUnits('1', SBC_DECIMALS(chain)); // Send 1 SBC
       const deadline = Math.floor(Date.now() / 1000) + 60 * 30; // 30 min
       
       const signature = await getPermitSignature({
@@ -207,8 +238,8 @@ function SendSBCForm() {
         owner: ownerChecksum,
         spender: spenderChecksum,
         value,
-        tokenAddress: SBC_TOKEN_ADDRESS,
-        chainId: {{chain}}.id,
+        tokenAddress: SBC_TOKEN_ADDRESS(chain),
+        chainId: chain.id,
         deadline,
       });
 
@@ -231,8 +262,8 @@ function SendSBCForm() {
       
       await sendUserOperation({
         calls: [
-          { to: SBC_TOKEN_ADDRESS as `0x${string}`, data: permitCallData },
-          { to: SBC_TOKEN_ADDRESS as `0x${string}`, data: transferFromCallData },
+          { to: SBC_TOKEN_ADDRESS(chain) as `0x${string}`, data: permitCallData },
+          { to: SBC_TOKEN_ADDRESS(chain) as `0x${string}`, data: transferFromCallData },
         ],
       });
     } catch (err) {
@@ -286,7 +317,7 @@ function SendSBCForm() {
         <div className="success-message">
           <p>✅ Transaction Successful!</p>
           <a 
-            href={`https://sepolia.basescan.org/tx/${data.transactionHash}`}
+            href={`${chainExplorer(chain)}/tx/${data.transactionHash}`}
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -369,7 +400,8 @@ function ThemeToggle() {
 export default function App() {
   const sbcConfig = {
     apiKey: import.meta.env.VITE_SBC_API_KEY || '{{apiKey}}',
-    chain: {{chain}},
+    chain,
+    rpcUrl,
     wallet: 'auto' as const,
     debug: true,
     walletOptions: { autoConnect: false },
@@ -462,7 +494,7 @@ async function getPermitSignature({
       name: tokenName as string,
       version: '1',
       chainId: BigInt(chainId),
-      verifyingContract: SBC_TOKEN_ADDRESS as `0x${string}`,
+      verifyingContract: tokenAddress as `0x${string}`,
     };
     
     const types = {