create-sbc-app 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -33,7 +33,7 @@ Arguments:
33
33
 
34
34
  Options:
35
35
  -V, --version output the version number
36
- -t, --template <type> Template to use: react, react-dynamic, or react-para
36
+ -t, --template <type> Template to use: react, react-dynamic, react-para, or react-turnkey
37
37
  -c, --chain <chain> Chain to use: baseSepolia, base, or radiusTestnet
38
38
  --api-key <apiKey> Your SBC API key for immediate configuration
39
39
  --wallet <wallet> Wallet integration (not yet implemented)
@@ -44,16 +44,18 @@ Examples:
44
44
  $ npx create-sbc-app my-app --template react --chain radiusTestnet
45
45
  $ npx create-sbc-app my-app --template react-dynamic --chain base
46
46
  $ npx create-sbc-app my-app --template react-para --api-key your-key
47
+ $ npx create-sbc-app my-app --template react-turnkey --chain base
47
48
 
48
49
  Available Templates:
49
50
  - react React + Vite template with SBC integration
50
51
  - react-dynamic React + Vite with Dynamic wallet integration
51
52
  - react-para React + Vite with Para wallet integration
53
+ - react-turnkey React + Vite + Express backend with Turnkey embedded wallets
52
54
 
53
55
  Available Chains:
54
56
  - baseSepolia Base Sepolia testnet (default)
55
57
  - base Base mainnet
56
- - radiusTestnet Radius testnet
58
+ - radiusTestnet Radius testnet (react template only - not supported by Dynamic, Para, or Turnkey)
57
59
  ```
58
60
 
59
61
  ## ✨ Features
@@ -86,7 +88,9 @@ The React template includes comprehensive, production-ready examples:
86
88
  - **Hot Reload** - Fast development iteration
87
89
  - **Production Ready** - Optimized builds and deployment preparation
88
90
 
89
- ## 🚀 React Template
91
+ ## 🚀 Templates
92
+
93
+ ### React Template (Default)
90
94
 
91
95
  **Best for:** Client-side applications, rapid prototyping, and production use
92
96
 
@@ -94,14 +98,80 @@ The React template includes comprehensive, production-ready examples:
94
98
  npx create-sbc-app my-app
95
99
  ```
96
100
 
97
- **Features:**
101
+ **Supported Chains:** Base Sepolia, Base, Radius Testnet
98
102
 
103
+ **Features:**
99
104
  - Fast development setup
100
105
  - Hot module replacement
106
+ - Direct wallet connection (MetaMask, Coinbase, WalletConnect)
101
107
  - Built-in testing framework
102
108
  - Easy deployment to static hosts
103
109
  - Modern React patterns and hooks
104
110
 
111
+ ### React + Dynamic Template
112
+
113
+ **Best for:** Applications requiring embedded wallets with social logins
114
+
115
+ ```bash
116
+ npx create-sbc-app my-app --template react-dynamic
117
+ ```
118
+
119
+ **Supported Chains:** Base Sepolia, Base (Radius Testnet not supported)
120
+
121
+ **Features:**
122
+ - Dynamic SDK integration for embedded wallets
123
+ - Social login support (Google, Twitter, Discord, etc.)
124
+ - Email/SMS wallet creation
125
+ - All standard SBC features
126
+
127
+ **Additional Requirements:** Dynamic Environment ID from [Dynamic Dashboard](https://app.dynamic.xyz/)
128
+
129
+ ### React + Para Template
130
+
131
+ **Best for:** DeFi applications leveraging EIP-2612 permits
132
+
133
+ ```bash
134
+ npx create-sbc-app my-app --template react-para
135
+ ```
136
+
137
+ **Supported Chains:** Base Sepolia, Base (Radius Testnet not supported)
138
+
139
+ **Features:**
140
+ - Para wallet integration
141
+ - EIP-2612 permit signatures
142
+ - Gasless token approvals
143
+ - All standard SBC features
144
+
145
+ **Additional Requirements:** Para API Key from [Para](https://para.xyz/)
146
+
147
+ ### React + Turnkey Template
148
+
149
+ **Best for:** Production applications requiring embedded wallets with biometric authentication and backend infrastructure
150
+
151
+ ```bash
152
+ npx create-sbc-app my-app --template react-turnkey
153
+ ```
154
+
155
+ **Supported Chains:** Base Sepolia, Base (Radius Testnet not supported)
156
+
157
+ **Features:**
158
+ - Turnkey embedded wallet integration with passkey authentication
159
+ - Express backend server for secure Turnkey API operations
160
+ - Two authentication methods: biometric passkeys (Face ID/Touch ID) or wallet connection (MetaMask/Coinbase)
161
+ - Account history and multi-account management
162
+ - Full-stack development with `dev:fullstack` script
163
+ - ERC-4337 smart accounts with gasless transactions
164
+ - All standard SBC features
165
+
166
+ **Additional Requirements:**
167
+ - Turnkey Organization ID and API Keys from [Turnkey Dashboard](https://app.turnkey.com)
168
+ - Backend deployment for production use (Railway, Render, Vercel, etc.)
169
+
170
+ **Architecture:**
171
+ - Frontend: React + Vite (port 5173)
172
+ - Backend: Express server (port 3001)
173
+ - Runs both services concurrently with `npm run dev:fullstack`
174
+
105
175
  ## 📝 Configuration
106
176
 
107
177
  ### Environment Variables
@@ -147,7 +217,7 @@ cp .env.template .env
147
217
 
148
218
  # Supported chains: "baseSepolia" | "base" | "radiusTestnet"
149
219
  VITE_CHAIN="baseSepolia"
150
- # Custom RPC URL (optional) - e.g. get one from Alchemey at https://dashboard.alchemy.com/apps
220
+ # Custom RPC URL (optional) - e.g. get one from Alchemy at https://dashboard.alchemy.com/apps
151
221
  VITE_RPC_URL=
152
222
  # Get your SBC API Key at https://dashboard.stablecoin.xyz
153
223
  VITE_SBC_API_KEY=
package/bin/cli.js CHANGED
@@ -10,9 +10,9 @@ const program = new Command();
10
10
  program
11
11
  .name('create-sbc-app')
12
12
  .description('Create a new SBC App Kit project with an opinionated template')
13
- .version('0.2.0')
13
+ .version('0.4.0')
14
14
  .argument('[project-directory]', 'Directory to create the new app in')
15
- .option('-t, --template <template>', 'Template to use: react, react-dynamic, or react-para')
15
+ .option('-t, --template <template>', 'Template to use: react, react-dynamic, react-para, or react-turnkey')
16
16
  .option('-c, --chain <chain>', 'Chain to use: baseSepolia, base, or radiusTestnet')
17
17
  .option('--api-key <apiKey>', 'Your SBC API key for immediate configuration')
18
18
  .option('--wallet <wallet>', 'Wallet integration (not yet implemented)')
@@ -26,6 +26,7 @@ Available Templates:
26
26
  - react React + Vite template with SBC integration
27
27
  - react-dynamic React + Vite with Dynamic wallet integration
28
28
  - react-para React + Vite with Para wallet integration
29
+ - react-turnkey React + Vite + Express backend with Turnkey embedded wallets
29
30
 
30
31
  Available Chains:
31
32
  - baseSepolia Base Sepolia testnet (default)
@@ -40,7 +41,8 @@ Available Chains:
40
41
  const templateChoices = [
41
42
  { title: 'React', value: 'react' },
42
43
  { title: 'React (Dynamic wallet)', value: 'react-dynamic' },
43
- { title: 'React (Para wallet)', value: 'react-para' }
44
+ { title: 'React (Para wallet)', value: 'react-para' },
45
+ { title: 'React (Turnkey embedded wallet + Backend)', value: 'react-turnkey' }
44
46
  ];
45
47
  const chainChoices = [
46
48
  { title: 'Base Sepolia (testnet)', value: 'baseSepolia' },
@@ -62,7 +64,7 @@ Available Chains:
62
64
  projectDir = res.dir.trim();
63
65
  }
64
66
  // Use provided option or prompt for template
65
- let template = options.template && ['react', 'react-dynamic', 'react-para'].includes(options.template) ? options.template : '';
67
+ let template = options.template && ['react', 'react-dynamic', 'react-para', 'react-turnkey'].includes(options.template) ? options.template : '';
66
68
  if (!template) {
67
69
  const res = await prompts({
68
70
  type: 'select',
@@ -75,7 +77,7 @@ Available Chains:
75
77
  process.exit(1);
76
78
  }
77
79
  template = res.template; // The value is already what we want from the choices
78
- if (!template || !['react', 'react-dynamic', 'react-para'].includes(template)) {
80
+ if (!template || !['react', 'react-dynamic', 'react-para', 'react-turnkey'].includes(template)) {
79
81
  console.log('Template selection is required.');
80
82
  process.exit(1);
81
83
  }
@@ -100,6 +102,12 @@ Available Chains:
100
102
  process.exit(1);
101
103
  }
102
104
  }
105
+ // Validate template + chain compatibility
106
+ if (['react-dynamic', 'react-para', 'react-turnkey'].includes(template) && chain === 'radiusTestnet') {
107
+ console.log(`\nError: The ${template} template does not support radiusTestnet.`);
108
+ console.log('Please use baseSepolia or base chain instead.\n');
109
+ process.exit(1);
110
+ }
103
111
  // Use provided option or prompt for API key
104
112
  let apiKey = options.apiKey && options.apiKey.trim() ? options.apiKey.trim() : '';
105
113
  if (!apiKey) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-sbc-app",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Scaffold a new SBC App Kit project with one command.",
5
5
  "bin": {
6
6
  "create-sbc-app": "bin/cli.js"
@@ -1,12 +1,61 @@
1
- # create-sbc-app
1
+ # create-sbc-app Templates
2
2
 
3
3
  This directory contains ready-to-use templates for quickly starting new projects with the SBC App Kit. Each template is a minimal, fully functional app that demonstrates best practices for integrating @stablecoin.xyz/core and @stablecoin.xyz/react.
4
4
 
5
5
  ## Available Templates
6
6
 
7
- - **react/**Minimal React app with SBC integration (Vite)
8
- - **react-dynamic/** – React + Dynamic wallet + SBC App Kit (Vite)
9
- - **react-para/** React + Para wallet + SBC App Kit (Vite)
7
+ ### react/ – React + Vite + SBC App Kit (Default)
8
+
9
+ **Best for:** Applications with custom wallet integrations, rapid prototyping, production use
10
+
11
+ **Supported Chains:** Base Sepolia, Base, Radius Testnet
12
+
13
+ **Features:**
14
+ - Direct wallet connection (MetaMask, Coinbase Wallet, WalletConnect)
15
+ - Complete SBC App Kit integration for gasless transactions
16
+ - Full control over wallet connection UI/UX
17
+ - TypeScript support
18
+ - Vite for fast development
19
+
20
+ **Use when:** You want maximum flexibility and plan to implement your own wallet connection logic or use standard Web3 wallets.
21
+
22
+ ### react-dynamic/ – React + Dynamic + SBC App Kit
23
+
24
+ **Best for:** Applications requiring embedded wallets with social logins
25
+
26
+ **Supported Chains:** Base Sepolia, Base (Radius Testnet not supported by Dynamic)
27
+
28
+ **Features:**
29
+ - Dynamic SDK integration for embedded wallets
30
+ - Social authentication (Google, Twitter, Discord, GitHub, Apple, etc.)
31
+ - Email and SMS wallet creation
32
+ - Seamless onboarding for non-crypto users
33
+ - Multi-chain support (Base and Base Sepolia)
34
+ - All SBC App Kit features
35
+
36
+ **Use when:** You want to provide the easiest possible onboarding experience with social logins and don't want users to install a wallet extension.
37
+
38
+ **Additional Requirements:**
39
+ - Dynamic Environment ID (get from https://app.dynamic.xyz/)
40
+
41
+ ### react-para/ – React + Para + SBC App Kit
42
+
43
+ **Best for:** DeFi applications leveraging EIP-2612 permits and advanced gasless patterns
44
+
45
+ **Supported Chains:** Base Sepolia, Base (Radius Testnet not supported by Para)
46
+
47
+ **Features:**
48
+ - Para wallet integration
49
+ - EIP-2612 permit signature support
50
+ - Gasless token approvals
51
+ - Single-step token operations (no separate approval transaction)
52
+ - Advanced meta-transaction patterns
53
+ - All SBC App Kit features
54
+
55
+ **Use when:** You're building DeFi applications (DEX, lending, staking) and want to optimize the user experience by eliminating approval transactions.
56
+
57
+ **Additional Requirements:**
58
+ - Para API Key (get from https://para.xyz/)
10
59
 
11
60
  ## How to Use a Template
12
61
 
@@ -18,12 +18,12 @@ cp .env.example .env # Optional: for local overrides
18
18
 
19
19
  Edit `.env` and add your SBC API key and Chain, with the optional for a custom RPC:
20
20
  ```bash
21
- # "base" or "baseSepolia"
22
- VITE_CHAIN="baseSepolia"
23
- # Custom RPC URL (optional) - e.g. get one from Alchemey at https://dashboard.alchemy.com/apps
21
+ # Supported chains: "baseSepolia" | "base" | "radiusTestnet"
22
+ VITE_CHAIN={{chain}}
23
+ # Custom RPC URL (optional) - e.g. get one from Alchemy at https://dashboard.alchemy.com/apps
24
24
  VITE_RPC_URL=
25
25
  # Get your SBC API Key at https://dashboard.stablecoin.xyz
26
- VITE_SBC_API_KEY=
26
+ VITE_SBC_API_KEY={{apiKey}}
27
27
  ```
28
28
 
29
29
  > **Get your API key:** Visit the [SBC Dashboard](https://dashboard.stablecoin.xyz) to create an account and get your API key.
@@ -108,13 +108,12 @@ This app is configured for **{{chain}}**. To use a different chain:
108
108
 
109
109
  1. Update `.env`:
110
110
  ```bash
111
- VITE_SBC_CHAIN=your_chain_here
111
+ VITE_CHAIN=base # Base mainnet
112
+ VITE_CHAIN=baseSepolia # Base Sepolia testnet
113
+ VITE_CHAIN=radiusTestnet # Radius testnet
112
114
  ```
113
115
 
114
- 2. Update the import in `App.tsx`:
115
- ```typescript
116
- import { yourChain } from 'viem/chains';
117
- ```
116
+ 2. Restart your development server after changing the chain
118
117
 
119
118
  ## 📖 Learn More
120
119
 
@@ -2,6 +2,6 @@
2
2
  VITE_SBC_API_KEY={{apiKey}}
3
3
  # Get your Dynamic Environment ID at https://app.dynamic.xyz/
4
4
  VITE_DYNAMIC_ENVIRONMENT_ID=your_dynamic_env_id
5
- # Supported chains: "baseSepolia" | "base" | "radiusTestnet"
5
+ # Supported chains: "baseSepolia" | "base"
6
6
  VITE_CHAIN={{chain}}
7
7
  VITE_RPC_URL=
@@ -1,24 +1,142 @@
1
- # React + Dynamic + SBC App Kit
1
+ # {{projectName}}
2
2
 
3
- Gasless transactions on Base using Dynamic SDK with SBC App Kit.
3
+ React + Vite app with Dynamic wallet integration and SBC App Kit for gasless transactions.
4
+
5
+ ## Overview
6
+
7
+ This template combines:
8
+ - **Dynamic SDK** - Embedded wallet with social logins (Google, Twitter, Discord, email, SMS)
9
+ - **SBC App Kit** - Account abstraction and gasless transactions
10
+ - **React + Vite** - Fast, modern development experience
11
+
12
+ Perfect for applications that need a seamless onboarding experience with social authentication and gasless transactions.
4
13
 
5
14
  ## Quick Start
6
15
 
7
- ```bash
8
- pnpm install
9
- pnpm dev
10
- ```
16
+ 1. **Install dependencies:**
17
+
18
+ ```bash
19
+ pnpm install
20
+ # or
21
+ npm install
22
+ ```
23
+
24
+ 2. **Configure environment:**
25
+
26
+ Copy `.env.template` to `.env` and fill in your API keys:
27
+
28
+ ```env
29
+ # Your SBC API key from https://dashboard.stablecoin.xyz
30
+ VITE_SBC_API_KEY={{apiKey}}
31
+
32
+ # Your Dynamic Environment ID from https://app.dynamic.xyz/
33
+ VITE_DYNAMIC_ENVIRONMENT_ID=your_dynamic_env_id
34
+
35
+ # Supported chains: "baseSepolia" | "base"
36
+ VITE_CHAIN={{chain}}
37
+
38
+ # Optional: Custom RPC URL (e.g., from Alchemy)
39
+ VITE_RPC_URL=
40
+ ```
41
+
42
+ 3. **Start the development server:**
43
+
44
+ ```bash
45
+ pnpm dev
46
+ # or
47
+ npm run dev
48
+ ```
49
+
50
+ 4. **Open your browser:**
51
+ Visit [http://localhost:5173](http://localhost:5173) (or the port shown in your terminal).
52
+
53
+ ## Features
54
+
55
+ ### Dynamic Wallet Integration
56
+ - Social logins (Google, Twitter, Discord, GitHub, Apple, etc.)
57
+ - Email and SMS authentication
58
+ - Embedded wallet creation
59
+ - Multi-chain support
60
+ - Customizable authentication UI
11
61
 
12
- ## Environment
62
+ ### SBC App Kit Integration
63
+ - Automatic smart account creation
64
+ - Gasless transactions
65
+ - Gas estimation and previews
66
+ - Batch transactions
67
+ - Real-time balance tracking
68
+ - Transaction history
13
69
 
14
- Create `.env` from `.env.template` and fill in values:
70
+ ### Developer Experience
71
+ - TypeScript support with full type safety
72
+ - Hot module replacement for fast development
73
+ - Environment-based configuration
74
+ - Comprehensive error handling
75
+ - Debug logging
15
76
 
77
+ ## Getting Your API Keys
78
+
79
+ ### SBC API Key
80
+ 1. Visit [https://dashboard.stablecoin.xyz](https://dashboard.stablecoin.xyz)
81
+ 2. Sign up or log in
82
+ 3. Create a new API key
83
+ 4. Add it to your `.env` file as `VITE_SBC_API_KEY`
84
+
85
+ ### Dynamic Environment ID
86
+ 1. Visit [https://app.dynamic.xyz/](https://app.dynamic.xyz/)
87
+ 2. Create an account and a new project
88
+ 3. Copy your Environment ID
89
+ 4. Add it to your `.env` file as `VITE_DYNAMIC_ENVIRONMENT_ID`
90
+ 5. Configure your allowed authentication methods in the Dynamic dashboard
91
+
92
+ ## Customization
93
+
94
+ ### Modifying Authentication Methods
95
+ Edit the Dynamic configuration in `src/App.tsx`:
96
+ ```typescript
97
+ // Configure which authentication methods to enable
98
+ walletConnectors={[EthereumWalletConnectors]}
99
+ ```
100
+
101
+ ### Styling
102
+ - Edit `src/App.css` for component styles
103
+ - Edit `src/index.css` for global styles
104
+ - Customize Tailwind configuration in `tailwind.config.js`
105
+
106
+ ### Chain Configuration
107
+ Change the chain in your `.env` file:
16
108
  ```env
17
- VITE_SBC_API_KEY={{apiKey}}
18
- VITE_DYNAMIC_ENVIRONMENT_ID=your_dynamic_env_id
19
- # Optional
20
- VITE_CHAIN=baseSepolia # or "base"
21
- VITE_RPC_URL=
109
+ VITE_CHAIN=base # Base mainnet
110
+ VITE_CHAIN=baseSepolia # Base Sepolia testnet
22
111
  ```
23
112
 
113
+ **Note:** Radius Testnet is not currently supported by the Dynamic wallet provider. Use the base `react` template for Radius Testnet support.
114
+
115
+ ## Building for Production
116
+
117
+ ```bash
118
+ pnpm build
119
+ # or
120
+ npm run build
121
+ ```
122
+
123
+ The built files will be in the `dist/` directory, ready for deployment to any static host (Vercel, Netlify, Cloudflare Pages, etc.).
124
+
125
+ ## Learn More
126
+
127
+ - [SBC Documentation](https://docs.stablecoin.xyz)
128
+ - [Dynamic Documentation](https://docs.dynamic.xyz/)
129
+ - [SBC App Kit GitHub](https://github.com/stablecoinxyz/app-kit)
130
+ - [React Documentation](https://react.dev)
131
+ - [Vite Documentation](https://vitejs.dev)
132
+
133
+ ## Support
134
+
135
+ If you encounter any issues:
136
+ 1. Check the [SBC Documentation](https://docs.stablecoin.xyz)
137
+ 2. Review the [Dynamic Documentation](https://docs.dynamic.xyz/)
138
+ 3. Open an issue on the [SBC App Kit repository](https://github.com/stablecoinxyz/app-kit/issues)
139
+
140
+ ## License
24
141
 
142
+ MIT
@@ -2,6 +2,6 @@
2
2
  VITE_SBC_API_KEY={{apiKey}}
3
3
  # Get your Para API Key at https://developer.getpara.com/
4
4
  VITE_PARA_API_KEY=your_para_api_key
5
- # Supported chains: "baseSepolia" | "base" | "radiusTestnet"
5
+ # Supported chains: "baseSepolia" | "base"
6
6
  VITE_CHAIN={{chain}}
7
7
  VITE_RPC_URL=
@@ -1,24 +1,165 @@
1
- # React + Para + SBC App Kit
1
+ # {{projectName}}
2
2
 
3
- Gasless user operation using EIP-2612 permit signed via Para and executed via SBC App Kit.
3
+ React + Vite app with Para wallet integration and SBC App Kit for advanced gasless transactions using EIP-2612 permits.
4
+
5
+ ## Overview
6
+
7
+ This template combines:
8
+ - **Para** - Advanced wallet integration with EIP-2612 permit support
9
+ - **SBC App Kit** - Account abstraction and gasless transactions
10
+ - **React + Vite** - Fast, modern development experience
11
+
12
+ Perfect for applications that need advanced gasless transaction patterns using EIP-2612 permit signatures, enabling token approvals without separate transactions.
13
+
14
+ ## What are EIP-2612 Permits?
15
+
16
+ EIP-2612 permits allow users to sign approval messages off-chain, eliminating the need for a separate approval transaction. This creates a superior user experience:
17
+ - No approval transaction fees
18
+ - Single-step token operations
19
+ - Enhanced security through time-limited permits
20
+ - Better UX for DeFi interactions
4
21
 
5
22
  ## Quick Start
6
23
 
7
- ```bash
8
- pnpm install
9
- pnpm dev
10
- ```
24
+ 1. **Install dependencies:**
25
+
26
+ ```bash
27
+ pnpm install
28
+ # or
29
+ npm install
30
+ ```
31
+
32
+ 2. **Configure environment:**
33
+
34
+ Copy `.env.template` to `.env` and fill in your API keys:
35
+
36
+ ```env
37
+ # Your SBC API key from https://dashboard.stablecoin.xyz
38
+ VITE_SBC_API_KEY={{apiKey}}
39
+
40
+ # Your Para API key
41
+ VITE_PARA_API_KEY=your_para_api_key
42
+
43
+ # Supported chains: "baseSepolia" | "base"
44
+ VITE_CHAIN={{chain}}
45
+
46
+ # Optional: Custom RPC URL (e.g., from Alchemy)
47
+ VITE_RPC_URL=
48
+ ```
49
+
50
+ 3. **Start the development server:**
51
+
52
+ ```bash
53
+ pnpm dev
54
+ # or
55
+ npm run dev
56
+ ```
57
+
58
+ 4. **Open your browser:**
59
+ Visit [http://localhost:5173](http://localhost:5173) (or the port shown in your terminal).
60
+
61
+ ## Features
62
+
63
+ ### Para Wallet Integration
64
+ - EIP-2612 permit signature support
65
+ - Gasless token approvals
66
+ - Advanced transaction patterns
67
+ - Seamless wallet experience
68
+ - Optimized for DeFi applications
11
69
 
12
- ## Environment
70
+ ### SBC App Kit Integration
71
+ - Automatic smart account creation
72
+ - Gasless transactions
73
+ - Gas estimation and previews
74
+ - Batch transactions
75
+ - Real-time balance tracking
76
+ - Transaction history
13
77
 
14
- Create `.env` from `.env.template`:
78
+ ### Advanced Use Cases
79
+ - Single-step token swaps (no separate approval)
80
+ - Gasless staking operations
81
+ - Permit-based token transfers
82
+ - Enhanced DeFi interactions
83
+ - Meta-transactions with permits
15
84
 
85
+ ### Developer Experience
86
+ - TypeScript support with full type safety
87
+ - Hot module replacement for fast development
88
+ - Environment-based configuration
89
+ - Comprehensive error handling
90
+ - Debug logging
91
+
92
+ ## Getting Your API Keys
93
+
94
+ ### SBC API Key
95
+ 1. Visit [https://dashboard.stablecoin.xyz](https://dashboard.stablecoin.xyz)
96
+ 2. Sign up or log in
97
+ 3. Create a new API key
98
+ 4. Add it to your `.env` file as `VITE_SBC_API_KEY`
99
+
100
+ ### Para API Key
101
+ 1. Visit [https://para.xyz](https://para.xyz)
102
+ 2. Create an account and register your application
103
+ 3. Copy your API key
104
+ 4. Add it to your `.env` file as `VITE_PARA_API_KEY`
105
+
106
+ ## Customization
107
+
108
+ ### Styling
109
+ - Edit `src/App.css` for component styles
110
+ - Edit `src/index.css` for global styles
111
+ - Customize Tailwind configuration in `tailwind.config.js`
112
+
113
+ ### Chain Configuration
114
+ Change the chain in your `.env` file:
16
115
  ```env
17
- VITE_SBC_API_KEY={{apiKey}}
18
- VITE_PARA_API_KEY=your_para_api_key
19
- # Optional
20
- VITE_CHAIN=baseSepolia # or "base"
21
- VITE_RPC_URL=
116
+ VITE_CHAIN=base # Base mainnet
117
+ VITE_CHAIN=baseSepolia # Base Sepolia testnet
22
118
  ```
23
119
 
120
+ **Note:** Radius Testnet is not currently supported by the Para wallet provider. Use the base `react` template for Radius Testnet support.
121
+
122
+ ### Permit Configuration
123
+ Customize permit parameters in your application logic:
124
+ - Deadline (expiration time)
125
+ - Spender address
126
+ - Token amounts
127
+
128
+ ## Building for Production
129
+
130
+ ```bash
131
+ pnpm build
132
+ # or
133
+ npm run build
134
+ ```
135
+
136
+ The built files will be in the `dist/` directory, ready for deployment to any static host (Vercel, Netlify, Cloudflare Pages, etc.).
137
+
138
+ ## Use Cases
139
+
140
+ This template is ideal for:
141
+ - DeFi applications requiring token approvals
142
+ - DEX interfaces with optimized UX
143
+ - Staking platforms
144
+ - Lending/borrowing protocols
145
+ - Any application benefiting from gasless approvals
146
+
147
+ ## Learn More
148
+
149
+ - [SBC Documentation](https://docs.stablecoin.xyz)
150
+ - [Para Documentation](https://docs.para.xyz)
151
+ - [EIP-2612 Specification](https://eips.ethereum.org/EIPS/eip-2612)
152
+ - [SBC App Kit GitHub](https://github.com/stablecoinxyz/app-kit)
153
+ - [React Documentation](https://react.dev)
154
+ - [Vite Documentation](https://vitejs.dev)
155
+
156
+ ## Support
157
+
158
+ If you encounter any issues:
159
+ 1. Check the [SBC Documentation](https://docs.stablecoin.xyz)
160
+ 2. Review the [Para Documentation](https://docs.para.xyz)
161
+ 3. Open an issue on the [SBC App Kit repository](https://github.com/stablecoinxyz/app-kit/issues)
162
+
163
+ ## License
24
164
 
165
+ MIT
@@ -0,0 +1,26 @@
1
+ # SBC API Key (get from https://dashboard.stablecoin.xyz)
2
+ VITE_SBC_API_KEY={{apiKey}}
3
+
4
+ # Chain Configuration (baseSepolia or base)
5
+ VITE_CHAIN={{chain}}
6
+
7
+ # Turnkey Configuration (Frontend - Public, safe to expose)
8
+ VITE_TURNKEY_API_BASE_URL=https://api.turnkey.com
9
+ VITE_TURNKEY_RPID=localhost
10
+ VITE_BACKEND_URL=http://localhost:3001
11
+
12
+ # Turnkey Backend Configuration (Server - KEEP SECRET!)
13
+ # Get these from https://app.turnkey.com → Settings → API Keys
14
+ TURNKEY_API_BASE_URL=https://api.turnkey.com
15
+ TURNKEY_ORGANIZATION_ID=your_org_id_here
16
+ TURNKEY_API_PUBLIC_KEY=your_public_key_here
17
+ TURNKEY_API_PRIVATE_KEY=your_private_key_here
18
+
19
+ # Backend Server Port
20
+ PORT=3001
21
+
22
+ # Optional: Custom RPC URL
23
+ # VITE_RPC_URL=https://base-sepolia.g.alchemy.com/v2/YOUR_KEY
24
+
25
+ # Note: This example uses passkeyClient approach (official Turnkey pattern)
26
+ # You do NOT need Auth Proxy Config ID or authProxyConfigId