create-sbc-app 0.1.5 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Stable Coin Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -33,7 +33,7 @@ Arguments:
 
 Options:
   -V, --version           output the version number
-  -t, --template <type>   Template to use: react, nextjs, or backend
+  -t, --template <type>   Template to use: react, react-dynamic, or react-para
   --api-key <apiKey>      Your SBC API key for immediate configuration
   --wallet <wallet>       Wallet integration (not yet implemented)
   -h, --help             display help for command
@@ -41,11 +41,14 @@ Options:
 Examples:
   $ create-sbc-app my-app
   $ create-sbc-app my-app --template react
-  $ create-sbc-app my-app --template react --api-key your-api-key
+  $ create-sbc-app my-app --template react-dynamic
+  $ create-sbc-app my-app --template react-para
+  # Next.js template removed for now
 
 Available Templates:
-  - react    React + Vite template with SBC integration
-  - nextjs   Next.js template with SBC integration (coming soon)
+  - react           React + Vite template with SBC integration
+  - react-dynamic   React + Vite with Dynamic wallet integration
+  - react-para      React + Vite with Para wallet integration
 ```
 
 ## ✨ Features
@@ -166,8 +169,8 @@ npm run dev
 
 ## 📚 Documentation
 
-- **[SBC API Documentation](https://docs.stablecoin.xyz)** - Complete API reference
-- **[GitHub Repository](https://github.com/stablecoinxyz/app-kit)** - Source code and examples
+- **[SBC Documentation](https://docs.stablecoin.xyz)** - Official docs
+- **[GitHub Repository](https://github.com/stablecoinxyz/app-kit)** - AppKit API Reference. Source code and examples
 
 ## 📄 License
 

package/bin/cli.js

@@ -10,9 +10,9 @@ const program = new Command();
 program
     .name('create-sbc-app')
     .description('Create a new SBC App Kit project with an opinionated template')
-    .version('0.1.0')
+    .version('0.2.0')
     .argument('[project-directory]', 'Directory to create the new app in')
-    .option('-t, --template <template>', 'Template to use: react, nextjs, or backend')
+    .option('-t, --template <template>', 'Template to use: react, react-dynamic, or react-para')
     .option('--api-key <apiKey>', 'Your SBC API key for immediate configuration')
     .option('--wallet <wallet>', 'Wallet integration (not yet implemented)')
     .addHelpText('after', `
@@ -22,8 +22,9 @@ Examples:
   $ create-sbc-app my-app --template react --api-key your-api-key
 
 Available Templates:
-  - react    React + Vite template with SBC integration
-  - nextjs   Next.js template with SBC integration (coming soon)
+  - react           React + Vite template with SBC integration
+  - react-dynamic   React + Vite with Dynamic wallet integration
+  - react-para      React + Vite with Para wallet integration
 `)
     .action(async (dir, options) => {
     if (options.wallet) {
@@ -32,7 +33,8 @@ Available Templates:
     }
     const templateChoices = [
         { title: 'React', value: 'react' },
-        { title: 'Next.js', value: 'nextjs' }
+        { title: 'React (Dynamic wallet)', value: 'react-dynamic' },
+        { title: 'React (Para wallet)', value: 'react-para' }
     ];
     // Use provided argument or prompt for project directory
     let projectDir = dir && dir.trim() ? dir.trim() : '';
@@ -49,7 +51,7 @@ Available Templates:
         projectDir = res.dir.trim();
     }
     // Use provided option or prompt for template
-    let template = options.template && ['react', 'nextjs'].includes(options.template) ? options.template : '';
+    let template = options.template && ['react', 'react-dynamic', 'react-para'].includes(options.template) ? options.template : '';
     if (!template) {
         const res = await prompts({
             type: 'select',
@@ -62,7 +64,7 @@ Available Templates:
             process.exit(1);
         }
         template = res.template; // The value is already what we want from the choices
-        if (!template || !['react', 'nextjs'].includes(template)) {
+        if (!template || !['react', 'react-dynamic', 'react-para'].includes(template)) {
             console.log('Template selection is required.');
             process.exit(1);
         }
@@ -97,6 +99,27 @@ Available Templates:
         chain: 'baseSepolia',
         apiKey: apiKey
     });
+    // Ensure SBC logo exists in public/ for all templates
+    try {
+        const publicDir = path.join(targetDir, 'public');
+        await fs.ensureDir(publicDir);
+        const sourceLogo = path.resolve(__dirname, '../templates/react/public/sbc-logo.png');
+        const destLogo = path.join(publicDir, 'sbc-logo.png');
+        if (!(await fs.pathExists(destLogo)) && (await fs.pathExists(sourceLogo))) {
+            await fs.copy(sourceLogo, destLogo);
+        }
+    }
+    catch { }
+    // If .env.template exists, ensure apiKey placeholder is applied (copyTemplate already replaces)
+    // Also, create a default .env if none exists to make onboarding faster
+    try {
+        const envTemplatePath = path.join(targetDir, '.env.template');
+        const envPath = path.join(targetDir, '.env');
+        if (await fs.pathExists(envTemplatePath) && !(await fs.pathExists(envPath))) {
+            await fs.copy(envTemplatePath, envPath);
+        }
+    }
+    catch { }
     console.log(`\nSuccess! Created ${projectDir} using the ${template} template.`);
     console.log(`\nNext steps:`);
     console.log(`  cd ${projectDir}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sbc-app",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Scaffold a new SBC App Kit project with one command.",
   "bin": {
     "create-sbc-app": "bin/cli.js"
@@ -47,7 +47,6 @@
     "create-app",
     "template",
     "react",
-    "nextjs",
     "vite"
   ],
   "author": "SBC Team",

package/templates/README.md

@@ -12,8 +12,6 @@ This directory contains ready-to-use templates for quickly starting new projects
 
    ```bash
    cp -r create-sbc-app/react my-new-sbc-app
-   # or for Next.js:
-   cp -r create-sbc-app/nextjs my-new-sbc-next-app
    ```
 
 2. **Install dependencies:**

package/templates/react/package.json.template

@@ -11,13 +11,11 @@
   "dependencies": {
     "@stablecoin.xyz/core": "latest",
     "@stablecoin.xyz/react": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "viem": "^2.31.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "viem": "^2.33.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^4.0.0",
     "typescript": "^5.0.0",
     "vite": "^5.0.0"

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

@@ -0,0 +1,7 @@
+# Get your SBC API Key at https://dashboard.stablecoin.xyz
+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
+VITE_RPC_URL=

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

@@ -0,0 +1,24 @@
+# React + Dynamic + SBC App Kit
+
+Gasless transactions on Base using Dynamic SDK with SBC App Kit.
+
+## Quick Start
+
+```bash
+pnpm install
+pnpm dev
+```
+
+## Environment
+
+Create `.env` from `.env.template` and fill in values:
+
+```env
+VITE_SBC_API_KEY={{apiKey}}
+VITE_DYNAMIC_ENVIRONMENT_ID=your_dynamic_env_id
+# Optional
+VITE_CHAIN=baseSepolia # or "base"
+VITE_RPC_URL=
+```
+
+

package/templates/react-dynamic/eslint.config.js.template

@@ -0,0 +1,34 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from '@typescript-eslint/eslint-plugin'
+import tsparser from '@typescript-eslint/parser'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parser: tsparser,
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...tseslint.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
+
+

package/templates/react-dynamic/index.html.template

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}} – SBC + Dynamic</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+  </html>
+
+

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

@@ -0,0 +1,33 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@dynamic-labs/ethereum": "^4.25.7",
+    "@dynamic-labs/ethereum-aa": "^4.25.7",
+    "@dynamic-labs/sdk-react-core": "^4.25.7",
+    "@stablecoin.xyz/core": "latest",
+    "@stablecoin.xyz/react": "latest",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "viem": "^2.33.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}
+
+

package/templates/react-dynamic/postcss.config.js.template

@@ -0,0 +1,8 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+
+

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

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+

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

@@ -0,0 +1,322 @@
+import { DynamicContextProvider, useDynamicContext, DynamicUserProfile, DynamicWidget } from '@dynamic-labs/sdk-react-core';
+import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';
+import { ZeroDevSmartWalletConnectors } from '@dynamic-labs/ethereum-aa';
+import { useSbcDynamic } from '@stablecoin.xyz/react';
+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 rpcUrl = import.meta.env.VITE_RPC_URL;
+
+const SBC_TOKEN_ADDRESS = (chain: Chain) => {
+  if (chain.id === baseSepolia.id) return '0xf9FB20B8E097904f0aB7d12e9DbeE88f2dcd0F16';
+  if (chain.id === base.id) return '0xfdcC3dd6671eaB0709A4C0f3F53De9a333d80798';
+  throw new Error('Unsupported chain');
+};
+
+const SBC_DECIMALS = (chain: Chain) => chain.id === baseSepolia.id ? 6 : 18;
+
+const chainExplorer = (chain: Chain) => {
+  if (chain.id === baseSepolia.id) return 'https://sepolia.basescan.org';
+  if (chain.id === base.id) return 'https://basescan.org';
+  return '';
+};
+
+const publicClient = createPublicClient({ chain, transport: http(rpcUrl) });
+
+// ERC20 + EIP-2612 nonces helper ABI
+const erc20PermitAbi = [
+  ...erc20Abi,
+  {
+    "inputs": [
+      { "internalType": "address", "name": "owner", "type": "address" }
+    ],
+    "name": "nonces",
+    "outputs": [
+      { "internalType": "uint256", "name": "", "type": "uint256" }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  }
+] as const;
+
+// Wrapper to render DynamicWidget only after SDK is ready
+const DynamicWidgetWrapper = () => {
+  const { sdkHasLoaded } = useDynamicContext();
+  if (!sdkHasLoaded) return null;
+  return <DynamicWidget />;
+};
+
+// Wrapper to render DynamicUserProfile only after SDK is ready
+const DynamicUserProfileWrapper = () => {
+  const { sdkHasLoaded } = useDynamicContext();
+  if (!sdkHasLoaded) return null;
+  return <DynamicUserProfile />;
+};
+
+function WalletStatus() {
+  const { primaryWallet } = useDynamicContext();
+  const [balances, setBalances] = useState<{ eth: string | null; sbc: string | null }>({ eth: null, sbc: null });
+
+  useEffect(() => {
+    if (!primaryWallet?.address) return;
+    (async () => {
+      try {
+        const [ethBalance, sbcBalance] = await Promise.all([
+          publicClient.getBalance({ address: primaryWallet.address as `0x${string}` }),
+          publicClient.readContract({
+            address: SBC_TOKEN_ADDRESS(chain) as `0x${string}`,
+            abi: erc20Abi,
+            functionName: 'balanceOf',
+            args: [primaryWallet.address as `0x${string}`],
+          })
+        ]);
+        setBalances({ eth: ethBalance.toString(), sbc: (sbcBalance as bigint).toString() });
+      } catch {
+        setBalances({ eth: null, sbc: null });
+      }
+    })();
+  }, [primaryWallet?.address]);
+
+  if (!primaryWallet) return null;
+  const fmtEth = (v: string | null) => v ? (Number(v) / 1e18).toFixed(4) : '0.0000';
+  const fmtSbc = (v: string | null) => v ? (Number(v) / Math.pow(10, SBC_DECIMALS(chain))).toFixed(4) : '0.0000';
+
+  return (
+    <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
+      <div className="flex justify-between items-start mb-3">
+        <div className="flex-1">
+          <h3 className="font-semibold text-green-800 mb-1">✅ Dynamic Wallet Connected</h3>
+          <p className="text-xs text-green-600 font-mono break-all mb-2">EOA: {primaryWallet.address}</p>
+          <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>
+            <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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SmartAccountInfo({ account, refreshAccount, isLoadingAccount, accountError }: any) {
+  const [sbcBalance, setSbcBalance] = useState<string | null>(null);
+  useEffect(() => {
+    if (!account?.address) return;
+    (async () => {
+      try {
+        const bal = await publicClient.readContract({
+          address: SBC_TOKEN_ADDRESS(chain) as `0x${string}`,
+          abi: erc20Abi,
+          functionName: 'balanceOf',
+          args: [account.address as `0x${string}`],
+        });
+        setSbcBalance((bal as bigint).toString());
+      } catch { setSbcBalance('0'); }
+    })();
+  }, [account?.address]);
+
+  if (!account) return null;
+  const fmtEth = (v: string | null) => v ? (Number(v) / 1e18).toFixed(6) : '0.000000';
+  const fmtSbc = (v: string | null) => v ? (Number(v) / Math.pow(10, SBC_DECIMALS(chain))).toFixed(2) : '0.00';
+
+  return (
+    <div className="mb-6 p-4 bg-purple-50 border border-purple-200 rounded-lg">
+      <div className="flex justify-between items-center mb-2">
+        <h3 className="font-semibold text-purple-800">🔐 Smart Account Status</h3>
+        <button onClick={refreshAccount} disabled={isLoadingAccount} className="text-xs bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700 disabled:opacity-50">{isLoadingAccount ? '🔄 Refreshing...' : '🔄 Refresh'}</button>
+      </div>
+      <div className="space-y-2 text-sm">
+        <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>
+      {accountError && <p className="mt-2 text-xs text-red-600">{String(accountError)}</p>}
+    </div>
+  );
+}
+
+function TransactionForm({ account, sbcAppKit }: { account: any; sbcAppKit: any }) {
+  const [recipient, setRecipient] = useState('');
+  const [amount, setAmount] = useState('1');
+  const [status, setStatus] = useState<'idle'|'loading'|'success'|'error'>('idle');
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<any>(null);
+  const isValid = recipient && /^0x[a-fA-F0-9]{40}$/.test(recipient) && parseFloat(amount) > 0;
+
+  const sendTx = async () => {
+    if (!isValid || !account || !sbcAppKit) return;
+    try {
+      setStatus('loading'); setError(null);
+      const owner = sbcAppKit.getOwnerAddress();
+      const value = parseUnits(amount, SBC_DECIMALS(chain));
+      const deadline = Math.floor(Date.now() / 1000) + 60 * 30;
+      const { publicClient: pc, walletClient: wc } = (sbcAppKit as any);
+      const [nonce, tokenName] = await Promise.all([
+        pc.readContract({ address: SBC_TOKEN_ADDRESS(chain) as `0x${string}`, abi: erc20PermitAbi, functionName: 'nonces', args: [owner] }),
+        pc.readContract({ address: SBC_TOKEN_ADDRESS(chain), abi: erc20Abi, functionName: 'name' })
+      ]);
+      const domain = { name: tokenName as string, version: '1', chainId: chain.id, verifyingContract: SBC_TOKEN_ADDRESS(chain) };
+      const types = { Permit: [
+        { name: 'owner', type: 'address' },
+        { name: 'spender', type: 'address' },
+        { name: 'value', type: 'uint256' },
+        { name: 'nonce', type: 'uint256' },
+        { name: 'deadline', type: 'uint256' },
+      ] } as const;
+      const message = { owner, spender: account.address, value, nonce, deadline: BigInt(deadline) } as const;
+      const signature = await wc.signTypedData({ domain, types, primaryType: 'Permit', message });
+      const { r, s, v } = (await import('viem')).parseSignature(signature);
+      const permitData = encodeFunctionData({
+        abi: [{ name: 'permit', type: 'function', inputs: [
+          { name: 'owner', type: 'address' },
+          { name: 'spender', type: 'address' },
+          { name: 'value', type: 'uint256' },
+          { name: 'deadline', type: 'uint256' },
+          { name: 'v', type: 'uint8' },
+          { name: 'r', type: 'bytes32' },
+          { name: 's', type: 'bytes32' }
+        ] }],
+        functionName: 'permit',
+        args: [owner, account.address, value, BigInt(deadline), v, r, s]
+      });
+      const transferFromData = encodeFunctionData({
+        abi: erc20Abi,
+        functionName: 'transferFrom',
+        args: [owner, recipient as `0x${string}`, value]
+      });
+      const res = await sbcAppKit.sendUserOperation({
+        calls: [
+          { to: SBC_TOKEN_ADDRESS(chain) as `0x${string}`, data: permitData },
+          { to: SBC_TOKEN_ADDRESS(chain) as `0x${string}`, data: transferFromData }
+        ]
+      });
+      setResult(res);
+      setStatus('success');
+    } catch (e: any) {
+      setError(e?.message || 'Transaction failed');
+      setStatus('error');
+    }
+  };
+
+  if (!account) return null;
+
+  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>
+      <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>
+          <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-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`}
+        </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>
+            </p>
+          </div>
+        )}
+        {status==='error' && error && (
+          <div className="p-3 bg-red-50 border border-red-200 rounded">
+            <p className="text-sm text-red-800 font-medium">❌ Transaction Failed</p>
+            <p className="text-xs text-red-600 mt-1">{error}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DynamicApp() {
+  const { primaryWallet } = useDynamicContext();
+  const { sbcAppKit, isInitialized, error, account, isLoadingAccount, accountError, refreshAccount } = useSbcDynamic({
+    apiKey: import.meta.env.VITE_SBC_API_KEY,
+    chain,
+    primaryWallet,
+    rpcUrl,
+    debug: true
+  });
+
+  return (
+    <>
+      <div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+        <h3 className="font-semibold text-blue-800 mb-2">🔗 Connect to Dynamic</h3>
+        <p className="text-sm text-blue-600 mb-3">
+          Connect your wallet or sign in with email to create a smart account with Dynamic
+        </p>
+        <DynamicWidgetWrapper />
+      </div>
+      {primaryWallet && isInitialized && (
+        <>
+          <WalletStatus />
+          <SmartAccountInfo account={account} refreshAccount={refreshAccount} isLoadingAccount={isLoadingAccount} accountError={accountError} />
+          <TransactionForm account={account} sbcAppKit={sbcAppKit} />
+        </>
+      )}
+      {error && <div className="error">{error.message}</div>}
+    </>
+  );
+}
+
+export default function App() {
+  return (
+    <DynamicContextProvider
+      settings={{
+        environmentId: import.meta.env.VITE_DYNAMIC_ENVIRONMENT_ID || '',
+        walletConnectors: [EthereumWalletConnectors, ZeroDevSmartWalletConnectors],
+      }}
+    >
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-2xl mx-auto px-4">
+          <div className="text-center mb-8">
+            <h1 className="text-3xl font-bold text-gray-900 mb-2 flex items-center justify-center gap-3">
+              <img src="/sbc-logo.png" alt="SBC Logo" width={36} height={36} />
+              SBC (Dynamic) Integration
+            </h1>
+            <p className="text-gray-600">Gasless transactions with Dynamic SDK integration</p>
+          </div>
+
+          <DynamicApp />
+
+          <DynamicUserProfileWrapper />
+
+          <div className="mt-8 text-center text-xs text-gray-500">
+            <p>
+              Powered by{' '}
+              <a href="https://github.com/stablecoinxyz/app-kit" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">SBC AppKit</a>
+              {' '}• Dynamic SDK integration
+            </p>
+          </div>
+        </div>
+      </div>
+    </DynamicContextProvider>
+  );
+}
+
+

package/templates/react-dynamic/src/env.d.ts.template

@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SBC_API_KEY: string
+  readonly VITE_DYNAMIC_ENVIRONMENT_ID: string
+  readonly VITE_CHAIN?: string
+  readonly VITE_RPC_URL?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+