create-sbc-app 0.1.5 → 0.3.0

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

@@ -0,0 +1,344 @@
+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 { 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 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 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 '';
+};
+
+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 (error) {
+        console.error('Failed to fetch EOA balances:', error);
+        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">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>{getTokenSymbol(chain)}:</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 (error) {
+        console.error('Failed to fetch smart account SBC balance:', error);
+        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="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>
+  );
+}
+
+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 {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 ({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} {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} ${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 transaction: {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
+}
+
+

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

@@ -0,0 +1,15 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+

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

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './App.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
+
+

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

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
+

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

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src"]
+}
+
+

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

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000
+  }
+})
+
+

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

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

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

@@ -0,0 +1,24 @@
+# React + Para + SBC App Kit
+
+Gasless user operation using EIP-2612 permit signed via Para and executed via SBC App Kit.
+
+## Quick Start
+
+```bash
+pnpm install
+pnpm dev
+```
+
+## Environment
+
+Create `.env` from `.env.template`:
+
+```env
+VITE_SBC_API_KEY={{apiKey}}
+VITE_PARA_API_KEY=your_para_api_key
+# Optional
+VITE_CHAIN=baseSepolia # or "base"
+VITE_RPC_URL=
+```
+
+

package/templates/react-para/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-para/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 + Para</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+  </html>
+
+

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

@@ -0,0 +1,35 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@getpara/react-sdk": "2.0.0-alpha.40",
+    "@getpara/viem-v2-integration": "2.0.0-alpha.40",
+    "@tanstack/react-query": "^5.0.0",
+    "wagmi": "^2.0.0",
+    "@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",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.17",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-node-polyfills": "^0.22.0"
+  }
+}
+
+

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

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