npm - @coinbase/create-cdp-app - Versions diffs - 0.0.22 → 0.0.24 - Mend

@coinbase/create-cdp-app 0.0.22 → 0.0.24

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.

Files changed (15) hide show

package/dist/index.js +79 -12
package/dist/index.js.map +1 -1
package/package.json +1 -1
package/template-nextjs/env.example +2 -0
package/template-nextjs/src/app/globals.css +38 -0
package/template-nextjs/src/components/{Transaction.tsx → EOATransaction.tsx} +6 -4
package/template-nextjs/src/components/Header.tsx +6 -1
package/template-nextjs/src/components/Providers.tsx +2 -0
package/template-nextjs/src/components/SmartAccountTransaction.tsx +181 -0
package/template-react/env.example +3 -0
package/template-react/src/{Transaction.tsx → EOATransaction.tsx} +7 -5
package/template-react/src/Header.tsx +6 -1
package/template-react/src/SmartAccountTransaction.tsx +182 -0
package/template-react/src/config.ts +5 -1
package/template-react/src/index.css +38 -0

package/dist/index.js CHANGED Viewed

@@ -17,27 +17,63 @@ function customizePackageJson(templateDir, appName) {
   packageJson.name = appName;
   return JSON.stringify(packageJson, null, 2) + "\n";
 }
-function customizeEnv(templateDir, projectId) {
+function customizeEnv(templateDir, projectId, useSmartAccounts) {
   const exampleEnvPath = path.join(templateDir, "env.example");
   const exampleEnv = fs.readFileSync(exampleEnvPath, "utf-8");
-  const envContent = exampleEnv.replace(/(.*PROJECT_ID=).*(\r?\n|$)/, `$1${projectId}
+  let envContent = exampleEnv.replace(/(.*PROJECT_ID=).*(\r?\n|$)/, `$1${projectId}
 `);
+  const accountType = useSmartAccounts ? "evm-smart" : "evm-eoa";
+  const prefix = templateDir.includes("nextjs") ? "NEXT_PUBLIC_" : "VITE_";
+  envContent = envContent.replace(
+    new RegExp(`(${prefix}CDP_CREATE_ACCOUNT_TYPE=).*(\r?
+|$)`),
+    `$1${accountType}
+`
+  );
   return envContent;
 }
-function copyFile(filePath, destPath) {
+function customizeConfig(templateDir, useSmartAccounts, isNextjs) {
+  if (!useSmartAccounts) return null;
+  const configFileName = isNextjs ? "src/components/Providers.tsx" : "src/config.ts";
+  const configPath = path.join(templateDir, configFileName);
+  if (!fs.existsSync(configPath)) return null;
+  let configContent = fs.readFileSync(configPath, "utf-8");
+  if (isNextjs) {
+    configContent = configContent.replace(
+      /const CDP_CONFIG: Config = \{[\s\S]*?\};/,
+      `const CDP_CONFIG: Config = {
+  projectId: process.env.NEXT_PUBLIC_CDP_PROJECT_ID ?? "",
+  createAccountOnLogin: process.env.NEXT_PUBLIC_CDP_CREATE_ACCOUNT_TYPE === "evm-smart" ? "evm-smart" : "evm-eoa",
+};`
+    );
+  } else {
+    configContent = configContent.replace(
+      /export const CDP_CONFIG: Config = \{[\s\S]*?\};/,
+      `export const CDP_CONFIG: Config = {
+  projectId: import.meta.env.VITE_CDP_PROJECT_ID,
+  createAccountOnLogin: import.meta.env.VITE_CDP_CREATE_ACCOUNT_TYPE === "evm-smart" ? "evm-smart" : "evm-eoa",
+};`
+    );
+  }
+  return configContent;
+}
+function copyFileSelectively(filePath, destPath, useSmartAccounts) {
   const stat = fs.statSync(filePath);
   if (stat.isDirectory()) {
-    copyDir(filePath, destPath);
+    copyDirSelectively(filePath, destPath, useSmartAccounts);
   } else {
+    const fileName = path.basename(filePath);
+    if (useSmartAccounts && fileName === "EOATransaction.tsx") return;
+    if (!useSmartAccounts && fileName === "SmartAccountTransaction.tsx") return;
     fs.copyFileSync(filePath, destPath);
   }
 }
-function copyDir(srcDir, destDir) {
+function copyDirSelectively(srcDir, destDir, useSmartAccounts) {
   fs.mkdirSync(destDir, { recursive: true });
   for (const file of fs.readdirSync(srcDir)) {
     const srcFile = path.resolve(srcDir, file);
     const destFile = path.resolve(destDir, file);
-    copyFile(srcFile, destFile);
+    copyFileSelectively(srcFile, destFile, useSmartAccounts);
   }
 }
 function isDirEmpty(dirPath) {
@@ -71,12 +107,12 @@ const fileRenames = {
 };
 const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 async function init() {
-  const { appName, template, targetDirectory, projectId } = await getAppDetails();
+  const { appName, template, targetDirectory, projectId, useSmartAccounts } = await getAppDetails();
   console.log(`
 Scaffolding app in ${targetDirectory}...`);
   const root = prepareAppDirectory(targetDirectory);
   const templateDir = path.resolve(fileURLToPath(import.meta.url), "../..", `template-${template}`);
-  copyTemplateFiles(templateDir, root, appName, projectId);
+  copyTemplateFiles(templateDir, root, appName, projectId, useSmartAccounts);
   printNextSteps(root);
 }
 async function getAppDetails() {
@@ -120,6 +156,14 @@ async function getAppDetails() {
           },
           initial: ""
         },
+        {
+          type: "confirm",
+          name: "useSmartAccounts",
+          message: reset(
+            "Enable Smart Accounts? (Smart Accounts enable gasless transactions and improved UX):"
+          ),
+          initial: false
+        },
         {
           type: "confirm",
           name: "corsConfirmation",
@@ -153,7 +197,8 @@ async function getAppDetails() {
       appName: result.appName,
       template: result.template,
       targetDirectory: targetDir,
-      projectId: result.projectId
+      projectId: result.projectId,
+      useSmartAccounts: result.useSmartAccounts
     };
   } catch (cancelled) {
     if (cancelled instanceof Error) {
@@ -172,29 +217,51 @@ function printNextSteps(appRoot) {
   console.log(`${packageManager} install`);
   console.log(devCommand);
 }
-function copyTemplateFiles(templateDir, root, appName, projectId) {
+function copyTemplateFiles(templateDir, root, appName, projectId, useSmartAccounts) {
   const writeFileToTarget = (file, content) => {
     const targetPath = path.join(root, fileRenames[file] ?? file);
     if (content) {
       fs.writeFileSync(targetPath, content);
     } else {
-      copyFile(path.join(templateDir, file), targetPath);
+      copyFileSelectively(path.join(templateDir, file), targetPath, useSmartAccounts);
     }
   };
+  const isNextjs = templateDir.includes("nextjs");
   const files = fs.readdirSync(templateDir);
   for (const file of files) {
     if (file === "package.json") {
       const customizedPackageJson = customizePackageJson(templateDir, appName);
       writeFileToTarget(file, customizedPackageJson);
     } else if (file === "env.example" && projectId) {
-      const customizedEnv = customizeEnv(templateDir, projectId);
       writeFileToTarget(file);
+      const customizedEnv = customizeEnv(templateDir, projectId, useSmartAccounts);
       console.log("Copying CDP Project ID to .env");
+      if (useSmartAccounts) {
+        console.log("Configuring Smart Accounts in environment");
+      }
       writeFileToTarget(".env", customizedEnv);
     } else {
       writeFileToTarget(file);
     }
   }
+  if (useSmartAccounts) {
+    const configFileName = isNextjs ? "src/components/Providers.tsx" : "src/config.ts";
+    const customizedConfig = customizeConfig(templateDir, useSmartAccounts, isNextjs);
+    if (customizedConfig) {
+      console.log("Configuring Smart Accounts in application config");
+      writeFileToTarget(configFileName, customizedConfig);
+    }
+  }
+  const transactionFileName = isNextjs ? "src/components/Transaction.tsx" : "src/Transaction.tsx";
+  const transactionContent = generateTransactionComponent(useSmartAccounts);
+  writeFileToTarget(transactionFileName, transactionContent);
+}
+function generateTransactionComponent(useSmartAccounts) {
+  if (useSmartAccounts) {
+    return `export { default } from "./SmartAccountTransaction";`;
+  } else {
+    return `export { default } from "./EOATransaction";`;
+  }
 }
 init().catch((e) => {
   console.error(e);

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../src/utils.ts","../src/index.ts"],"sourcesContent":["import fs from \"node:fs\";\nimport path from \"node:path\";\n\n/*\n Prepare the app directory\n \n @param targetDir - The target directory for the app\n * @param shouldOverwrite - Whether to overwrite the existing directory\n * @returns The path to the prepared app directory\n /\nexport function prepareAppDirectory(targetDir: string, shouldOverwrite: boolean): string {\n const root = path.join(process.cwd(), targetDir);\n\n if (shouldOverwrite) {\n emptyDir(root);\n } else if (!fs.existsSync(root)) {\n fs.mkdirSync(root, { recursive: true });\n }\n\n return root;\n}\n\n/\n Customize package.json for the new app\n \n @param templateDir - The directory containing the template files\n * @param appName - The name of the app\n * @returns The customized package.json content\n /\nexport function customizePackageJson(templateDir: string, appName: string): string {\n const packageJsonPath = path.join(templateDir, \"package.json\");\n const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, \"utf-8\"));\n packageJson.name = appName;\n return JSON.stringify(packageJson, null, 2) + \"\\n\";\n}\n\n/\n Set up the .env file for the new app\n \n @param templateDir - The directory containing the template files\n * @param projectId - The CDP Project ID\n * @returns The customized .env content\n /\nexport function customizeEnv(templateDir: string, projectId: string): string {\n const exampleEnvPath = path.join(templateDir, \"env.example\");\n const exampleEnv = fs.readFileSync(exampleEnvPath, \"utf-8\");\n // Replace the project ID in the env file\n const envContent = exampleEnv.replace(/(.PROJECT_ID=).(\\r?\\n\|$)/, `$1${projectId}\\n`);\n return envContent;\n}\n\n/\n Copy a file or directory recursively\n \n @param filePath - The source path\n * @param destPath - The destination path\n /\nexport function copyFile(filePath: string, destPath: string): void {\n const stat = fs.statSync(filePath);\n if (stat.isDirectory()) {\n copyDir(filePath, destPath);\n } else {\n fs.copyFileSync(filePath, destPath);\n }\n}\n\n/\n Copy a directory recursively\n \n @param srcDir - The source directory path\n * @param destDir - The destination directory path\n /\nfunction copyDir(srcDir: string, destDir: string): void {\n fs.mkdirSync(destDir, { recursive: true });\n for (const file of fs.readdirSync(srcDir)) {\n const srcFile = path.resolve(srcDir, file);\n const destFile = path.resolve(destDir, file);\n copyFile(srcFile, destFile);\n }\n}\n\n/\n Check if a directory is empty\n \n @param dirPath - The path to the directory\n * @returns True if the directory is empty, false otherwise\n /\nexport function isDirEmpty(dirPath: string): boolean {\n const files = fs.readdirSync(dirPath);\n return files.length === 0 \|\| (files.length === 1 && files[0] === \".git\");\n}\n\n/\n Empty a directory while preserving .git\n \n @param dirPath - The path to the directory\n /\nfunction emptyDir(dirPath: string): void {\n if (!fs.existsSync(dirPath)) {\n return;\n }\n for (const file of fs.readdirSync(dirPath)) {\n if (file === \".git\") {\n continue;\n }\n fs.rmSync(path.resolve(dirPath, file), { recursive: true, force: true });\n }\n}\n\n/\n Detect which package manager invoked the create command\n \n @returns The detected package manager or 'pnpm' as default\n /\nexport function detectPackageManager(): \"npm\" \| \"pnpm\" \| \"yarn\" {\n const userAgent = process.env.npm_config_user_agent;\n\n if (userAgent) {\n if (userAgent.startsWith(\"yarn\")) return \"yarn\";\n if (userAgent.startsWith(\"pnpm\")) return \"pnpm\";\n if (userAgent.startsWith(\"npm\")) return \"npm\";\n }\n\n return \"npm\"; // Default to npm if we can't detect\n}\n","#!/usr/bin/env node\n\nimport fs from \"node:fs\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport { red, green, reset } from \"kolorist\";\nimport prompts from \"prompts\";\n\nimport {\n prepareAppDirectory,\n isDirEmpty,\n customizePackageJson,\n copyFile,\n customizeEnv,\n detectPackageManager,\n} from \"./utils.js\";\n\n// Available templates for app creation\nconst TEMPLATES = [\n {\n name: \"react\",\n display: \"React Single Page App\",\n color: green,\n },\n {\n name: \"nextjs\",\n display: \"Next.js Full Stack App\",\n color: green,\n },\n];\n\nconst defaultTargetDir = \"cdp-app\";\n\nconst fileRenames: Record<string, string \| undefined> = {\n _gitignore: \".gitignore\",\n};\n\ninterface AppOptions {\n appName: string;\n template: string;\n targetDirectory: string;\n projectId: string;\n}\n\nconst uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;\n\n/\n Initialize a new CDP app\n /\nasync function init(): Promise<void> {\n const { appName, template, targetDirectory, projectId } = await getAppDetails();\n\n console.log(`\\nScaffolding app in ${targetDirectory}...`);\n\n const root = prepareAppDirectory(targetDirectory, false);\n const templateDir = path.resolve(fileURLToPath(import.meta.url), \"../..\", `template-${template}`);\n\n copyTemplateFiles(templateDir, root, appName, projectId);\n printNextSteps(root);\n}\n\n/\n Get app details from command line arguments or prompt the user\n \n @returns The app details\n /\nasync function getAppDetails(): Promise<AppOptions> {\n // Get target directory from command line args (first non-option argument)\n let targetDir = process.argv[2];\n const defaultAppName = targetDir ?? defaultTargetDir;\n\n try {\n const result = await prompts(\n [\n {\n type: targetDir ? null : \"text\",\n name: \"appName\",\n message: reset(\"App Name:\"),\n initial: defaultAppName,\n onState: state => {\n targetDir = String(state.value).trim() \|\| defaultAppName;\n },\n },\n {\n type: \"select\",\n name: \"template\",\n message: reset(\"Template:\"),\n initial: 0,\n choices: TEMPLATES.map(template => ({\n title: template.color(template.display \|\| template.name),\n value: template.name,\n })),\n },\n {\n type: \"text\",\n name: \"projectId\",\n message: reset(\n \"CDP Project ID (Find your project ID at https://portal.cdp.coinbase.com/projects/overview):\",\n ),\n validate: value => {\n if (!value) {\n return \"Project ID is required\";\n } else if (!uuidRegex.test(value)) {\n return \"Project ID must be a valid UUID\";\n }\n return true;\n },\n initial: \"\",\n },\n {\n type: \"confirm\",\n name: \"corsConfirmation\",\n message: reset(\n \"Confirm you have whitelisted 'http://localhost:3000' at https://portal.cdp.coinbase.com/products/embedded-wallets/domains:\",\n ),\n initial: true,\n },\n {\n type: () => (!fs.existsSync(targetDir) \|\| isDirEmpty(targetDir) ? null : \"confirm\"),\n name: \"overwrite\",\n message: () =>\n (targetDir === \".\" ? \"Current directory\" : `Target directory \"${targetDir}\"`) +\n \" is not empty. Remove existing files and continue?\",\n },\n {\n type: (_, { overwrite }: { overwrite?: boolean }) => {\n if (overwrite === false) {\n throw new Error(red(\"✖\") + \" Operation cancelled\");\n }\n return null;\n },\n name: \"overwriteChecker\",\n },\n ],\n {\n onCancel: () => {\n throw new Error(red(\"✖\") + \" Operation cancelled\");\n },\n },\n );\n\n return {\n appName: result.appName,\n template: result.template,\n targetDirectory: targetDir,\n projectId: result.projectId,\n };\n } catch (cancelled: unknown) {\n if (cancelled instanceof Error) {\n console.log(cancelled.message);\n }\n process.exit(0);\n }\n}\n\n/\n Print next steps for the user\n \n @param appRoot - The root directory of the app\n /\nfunction printNextSteps(appRoot: string): void {\n const packageManager = detectPackageManager();\n\n console.log(green(\"\\nDone. Now run your app:\\n\"));\n if (appRoot !== process.cwd()) {\n console.log(`cd ${path.relative(process.cwd(), appRoot)}`);\n }\n const devCommand = packageManager === \"npm\" ? \"npm run dev\" : `${packageManager} dev`;\n console.log(`${packageManager} install`);\n console.log(devCommand);\n}\n\n/\n Copy template files to the app directory\n \n @param templateDir - The directory containing the template files\n * @param root - The root directory of the app\n * @param appName - The name of the app\n * @param projectId - The CDP Project ID\n */\nfunction copyTemplateFiles(\n templateDir: string,\n root: string,\n appName: string,\n projectId?: string,\n): void {\n const writeFileToTarget = (file: string, content?: string) => {\n const targetPath = path.join(root, fileRenames[file] ?? file);\n if (content) {\n fs.writeFileSync(targetPath, content);\n } else {\n copyFile(path.join(templateDir, file), targetPath);\n }\n };\n\n const files = fs.readdirSync(templateDir);\n for (const file of files) {\n if (file === \"package.json\") {\n const customizedPackageJson = customizePackageJson(templateDir, appName);\n writeFileToTarget(file, customizedPackageJson);\n } else if (file === \"env.example\" && projectId) {\n const customizedEnv = customizeEnv(templateDir, projectId);\n writeFileToTarget(file);\n console.log(\"Copying CDP Project ID to .env\");\n writeFileToTarget(\".env\", customizedEnv);\n } else {\n writeFileToTarget(file);\n }\n }\n}\n\ninit().catch(e => {\n console.error(e);\n process.exit(1);\n});\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../src/utils.ts","../src/index.ts"],"sourcesContent":["import fs from \"node:fs\";\nimport path from \"node:path\";\n\n/*\n Prepare the app directory\n \n @param targetDir - The target directory for the app\n * @param shouldOverwrite - Whether to overwrite the existing directory\n * @returns The path to the prepared app directory\n /\nexport function prepareAppDirectory(targetDir: string, shouldOverwrite: boolean): string {\n const root = path.join(process.cwd(), targetDir);\n\n if (shouldOverwrite) {\n emptyDir(root);\n } else if (!fs.existsSync(root)) {\n fs.mkdirSync(root, { recursive: true });\n }\n\n return root;\n}\n\n/\n Customize package.json for the new app\n \n @param templateDir - The directory containing the template files\n * @param appName - The name of the app\n * @returns The customized package.json content\n /\nexport function customizePackageJson(templateDir: string, appName: string): string {\n const packageJsonPath = path.join(templateDir, \"package.json\");\n const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, \"utf-8\"));\n packageJson.name = appName;\n return JSON.stringify(packageJson, null, 2) + \"\\n\";\n}\n\n/\n Set up the .env file for the new app\n \n @param templateDir - The directory containing the template files\n * @param projectId - The CDP Project ID\n * @param useSmartAccounts - Whether to enable smart accounts\n * @returns The customized .env content\n /\nexport function customizeEnv(\n templateDir: string,\n projectId: string,\n useSmartAccounts?: boolean,\n): string {\n const exampleEnvPath = path.join(templateDir, \"env.example\");\n const exampleEnv = fs.readFileSync(exampleEnvPath, \"utf-8\");\n\n let envContent = exampleEnv.replace(/(.PROJECT_ID=).(\\r?\\n\|$)/, `$1${projectId}\\n`);\n\n // Set the account type based on user choice\n const accountType = useSmartAccounts ? \"evm-smart\" : \"evm-eoa\";\n const prefix = templateDir.includes(\"nextjs\") ? \"NEXT_PUBLIC_\" : \"VITE_\";\n envContent = envContent.replace(\n new RegExp(`(${prefix}CDP_CREATE_ACCOUNT_TYPE=).(\\r?\\n\|$)`),\n `$1${accountType}\\n`,\n );\n\n return envContent;\n}\n\n/*\n Customize configuration files for smart accounts\n \n @param templateDir - The directory containing the template files\n * @param useSmartAccounts - Whether to enable smart accounts\n * @param isNextjs - Whether this is a Next.js template\n * @returns The customized config content\n /\nexport function customizeConfig(\n templateDir: string,\n useSmartAccounts: boolean,\n isNextjs: boolean,\n): string \| null {\n if (!useSmartAccounts) return null;\n\n const configFileName = isNextjs ? \"src/components/Providers.tsx\" : \"src/config.ts\";\n const configPath = path.join(templateDir, configFileName);\n\n if (!fs.existsSync(configPath)) return null;\n\n let configContent = fs.readFileSync(configPath, \"utf-8\");\n\n if (isNextjs) {\n // For Next.js Providers.tsx\n configContent = configContent.replace(\n /const CDP_CONFIG: Config = \\{[\\s\\S]?\\};/,\n `const CDP_CONFIG: Config = {\n projectId: process.env.NEXT_PUBLIC_CDP_PROJECT_ID ?? \"\",\n createAccountOnLogin: process.env.NEXT_PUBLIC_CDP_CREATE_ACCOUNT_TYPE === \"evm-smart\" ? \"evm-smart\" : \"evm-eoa\",\n};`,\n );\n } else {\n // For React config.ts\n configContent = configContent.replace(\n /export const CDP_CONFIG: Config = \\{[\\s\\S]?\\};/,\n `export const CDP_CONFIG: Config = {\n projectId: import.meta.env.VITE_CDP_PROJECT_ID,\n createAccountOnLogin: import.meta.env.VITE_CDP_CREATE_ACCOUNT_TYPE === \"evm-smart\" ? \"evm-smart\" : \"evm-eoa\",\n};`,\n );\n }\n\n return configContent;\n}\n\n/\n Copy a file or directory recursively\n \n @param filePath - The source path\n * @param destPath - The destination path\n /\nexport function copyFile(filePath: string, destPath: string): void {\n const stat = fs.statSync(filePath);\n if (stat.isDirectory()) {\n copyDir(filePath, destPath);\n } else {\n fs.copyFileSync(filePath, destPath);\n }\n}\n\n/\n Copy a file or directory recursively with selective filtering for transaction components\n \n @param filePath - The source path\n * @param destPath - The destination path\n * @param useSmartAccounts - Whether to use Smart Accounts\n /\nexport function copyFileSelectively(\n filePath: string,\n destPath: string,\n useSmartAccounts?: boolean,\n): void {\n const stat = fs.statSync(filePath);\n if (stat.isDirectory()) {\n copyDirSelectively(filePath, destPath, useSmartAccounts);\n } else {\n const fileName = path.basename(filePath);\n // Skip transaction components that don't match the user's choice\n if (useSmartAccounts && fileName === \"EOATransaction.tsx\") return;\n if (!useSmartAccounts && fileName === \"SmartAccountTransaction.tsx\") return;\n\n fs.copyFileSync(filePath, destPath);\n }\n}\n\n/\n Copy a directory recursively\n \n @param srcDir - The source directory path\n * @param destDir - The destination directory path\n /\nfunction copyDir(srcDir: string, destDir: string): void {\n fs.mkdirSync(destDir, { recursive: true });\n for (const file of fs.readdirSync(srcDir)) {\n const srcFile = path.resolve(srcDir, file);\n const destFile = path.resolve(destDir, file);\n copyFile(srcFile, destFile);\n }\n}\n\n/\n Copy a directory recursively with selective filtering\n \n @param srcDir - The source directory path\n * @param destDir - The destination directory path\n * @param useSmartAccounts - Whether to use Smart Accounts\n /\nfunction copyDirSelectively(srcDir: string, destDir: string, useSmartAccounts?: boolean): void {\n fs.mkdirSync(destDir, { recursive: true });\n for (const file of fs.readdirSync(srcDir)) {\n const srcFile = path.resolve(srcDir, file);\n const destFile = path.resolve(destDir, file);\n copyFileSelectively(srcFile, destFile, useSmartAccounts);\n }\n}\n\n/\n Check if a directory is empty\n \n @param dirPath - The path to the directory\n * @returns True if the directory is empty, false otherwise\n /\nexport function isDirEmpty(dirPath: string): boolean {\n const files = fs.readdirSync(dirPath);\n return files.length === 0 \|\| (files.length === 1 && files[0] === \".git\");\n}\n\n/\n Empty a directory while preserving .git\n \n @param dirPath - The path to the directory\n /\nfunction emptyDir(dirPath: string): void {\n if (!fs.existsSync(dirPath)) {\n return;\n }\n for (const file of fs.readdirSync(dirPath)) {\n if (file === \".git\") {\n continue;\n }\n fs.rmSync(path.resolve(dirPath, file), { recursive: true, force: true });\n }\n}\n\n/\n Detect which package manager invoked the create command\n \n @returns The detected package manager or 'pnpm' as default\n /\nexport function detectPackageManager(): \"npm\" \| \"pnpm\" \| \"yarn\" {\n const userAgent = process.env.npm_config_user_agent;\n\n if (userAgent) {\n if (userAgent.startsWith(\"yarn\")) return \"yarn\";\n if (userAgent.startsWith(\"pnpm\")) return \"pnpm\";\n if (userAgent.startsWith(\"npm\")) return \"npm\";\n }\n\n return \"npm\"; // Default to npm if we can't detect\n}\n","#!/usr/bin/env node\n\nimport fs from \"node:fs\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport { red, green, reset } from \"kolorist\";\nimport prompts from \"prompts\";\n\nimport {\n prepareAppDirectory,\n isDirEmpty,\n customizePackageJson,\n copyFileSelectively,\n customizeEnv,\n customizeConfig,\n detectPackageManager,\n} from \"./utils.js\";\n\n// Available templates for app creation\nconst TEMPLATES = [\n {\n name: \"react\",\n display: \"React Single Page App\",\n color: green,\n },\n {\n name: \"nextjs\",\n display: \"Next.js Full Stack App\",\n color: green,\n },\n];\n\nconst defaultTargetDir = \"cdp-app\";\n\nconst fileRenames: Record<string, string \| undefined> = {\n _gitignore: \".gitignore\",\n};\n\ninterface AppOptions {\n appName: string;\n template: string;\n targetDirectory: string;\n projectId: string;\n useSmartAccounts: boolean;\n}\n\nconst uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;\n\n/\n Initialize a new CDP app\n /\nasync function init(): Promise<void> {\n const { appName, template, targetDirectory, projectId, useSmartAccounts } = await getAppDetails();\n\n console.log(`\\nScaffolding app in ${targetDirectory}...`);\n\n const root = prepareAppDirectory(targetDirectory, false);\n const templateDir = path.resolve(fileURLToPath(import.meta.url), \"../..\", `template-${template}`);\n\n copyTemplateFiles(templateDir, root, appName, projectId, useSmartAccounts);\n printNextSteps(root);\n}\n\n/\n Get app details from command line arguments or prompt the user\n \n @returns The app details\n /\nasync function getAppDetails(): Promise<AppOptions> {\n // Get target directory from command line args (first non-option argument)\n let targetDir = process.argv[2];\n const defaultAppName = targetDir ?? defaultTargetDir;\n\n try {\n const result = await prompts(\n [\n {\n type: targetDir ? null : \"text\",\n name: \"appName\",\n message: reset(\"App Name:\"),\n initial: defaultAppName,\n onState: state => {\n targetDir = String(state.value).trim() \|\| defaultAppName;\n },\n },\n {\n type: \"select\",\n name: \"template\",\n message: reset(\"Template:\"),\n initial: 0,\n choices: TEMPLATES.map(template => ({\n title: template.color(template.display \|\| template.name),\n value: template.name,\n })),\n },\n {\n type: \"text\",\n name: \"projectId\",\n message: reset(\n \"CDP Project ID (Find your project ID at https://portal.cdp.coinbase.com/projects/overview):\",\n ),\n validate: value => {\n if (!value) {\n return \"Project ID is required\";\n } else if (!uuidRegex.test(value)) {\n return \"Project ID must be a valid UUID\";\n }\n return true;\n },\n initial: \"\",\n },\n {\n type: \"confirm\",\n name: \"useSmartAccounts\",\n message: reset(\n \"Enable Smart Accounts? (Smart Accounts enable gasless transactions and improved UX):\",\n ),\n initial: false,\n },\n {\n type: \"confirm\",\n name: \"corsConfirmation\",\n message: reset(\n \"Confirm you have whitelisted 'http://localhost:3000' at https://portal.cdp.coinbase.com/products/embedded-wallets/domains:\",\n ),\n initial: true,\n },\n {\n type: () => (!fs.existsSync(targetDir) \|\| isDirEmpty(targetDir) ? null : \"confirm\"),\n name: \"overwrite\",\n message: () =>\n (targetDir === \".\" ? \"Current directory\" : `Target directory \"${targetDir}\"`) +\n \" is not empty. Remove existing files and continue?\",\n },\n {\n type: (_, { overwrite }: { overwrite?: boolean }) => {\n if (overwrite === false) {\n throw new Error(red(\"✖\") + \" Operation cancelled\");\n }\n return null;\n },\n name: \"overwriteChecker\",\n },\n ],\n {\n onCancel: () => {\n throw new Error(red(\"✖\") + \" Operation cancelled\");\n },\n },\n );\n\n return {\n appName: result.appName,\n template: result.template,\n targetDirectory: targetDir,\n projectId: result.projectId,\n useSmartAccounts: result.useSmartAccounts,\n };\n } catch (cancelled: unknown) {\n if (cancelled instanceof Error) {\n console.log(cancelled.message);\n }\n process.exit(0);\n }\n}\n\n/\n Print next steps for the user\n \n @param appRoot - The root directory of the app\n /\nfunction printNextSteps(appRoot: string): void {\n const packageManager = detectPackageManager();\n\n console.log(green(\"\\nDone. Now run your app:\\n\"));\n if (appRoot !== process.cwd()) {\n console.log(`cd ${path.relative(process.cwd(), appRoot)}`);\n }\n const devCommand = packageManager === \"npm\" ? \"npm run dev\" : `${packageManager} dev`;\n console.log(`${packageManager} install`);\n console.log(devCommand);\n}\n\n/\n Copy template files to the app directory\n \n @param templateDir - The directory containing the template files\n * @param root - The root directory of the app\n * @param appName - The name of the app\n * @param projectId - The CDP Project ID\n * @param useSmartAccounts - Whether to enable smart accounts\n /\nfunction copyTemplateFiles(\n templateDir: string,\n root: string,\n appName: string,\n projectId?: string,\n useSmartAccounts?: boolean,\n): void {\n const writeFileToTarget = (file: string, content?: string) => {\n const targetPath = path.join(root, fileRenames[file] ?? file);\n if (content) {\n fs.writeFileSync(targetPath, content);\n } else {\n copyFileSelectively(path.join(templateDir, file), targetPath, useSmartAccounts);\n }\n };\n\n const isNextjs = templateDir.includes(\"nextjs\");\n\n const files = fs.readdirSync(templateDir);\n for (const file of files) {\n if (file === \"package.json\") {\n const customizedPackageJson = customizePackageJson(templateDir, appName);\n writeFileToTarget(file, customizedPackageJson);\n } else if (file === \"env.example\" && projectId) {\n writeFileToTarget(file);\n const customizedEnv = customizeEnv(templateDir, projectId, useSmartAccounts);\n console.log(\"Copying CDP Project ID to .env\");\n if (useSmartAccounts) {\n console.log(\"Configuring Smart Accounts in environment\");\n }\n writeFileToTarget(\".env\", customizedEnv);\n } else {\n writeFileToTarget(file);\n }\n }\n\n // Handle smart account configuration in config files\n if (useSmartAccounts) {\n const configFileName = isNextjs ? \"src/components/Providers.tsx\" : \"src/config.ts\";\n const customizedConfig = customizeConfig(templateDir, useSmartAccounts, isNextjs);\n if (customizedConfig) {\n console.log(\"Configuring Smart Accounts in application config\");\n writeFileToTarget(configFileName, customizedConfig);\n }\n }\n\n // Generate the appropriate Transaction.tsx component\n const transactionFileName = isNextjs ? \"src/components/Transaction.tsx\" : \"src/Transaction.tsx\";\n const transactionContent = generateTransactionComponent(useSmartAccounts);\n writeFileToTarget(transactionFileName, transactionContent);\n}\n\n/\n Generate the appropriate Transaction component based on account type\n \n @param useSmartAccounts - Whether to use Smart Accounts\n * @returns The generated Transaction component content\n */\nfunction generateTransactionComponent(useSmartAccounts?: boolean): string {\n if (useSmartAccounts) {\n return `export { default } from \"./SmartAccountTransaction\";`;\n } else {\n return `export { default } from \"./EOATransaction\";`;\n }\n}\n\ninit().catch(e => {\n console.error(e);\n process.exit(1);\n});\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/create-cdp-app",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/template-nextjs/env.example CHANGED Viewed

@@ -1,3 +1,5 @@
 # CDP Configuration
 NEXT_PUBLIC_CDP_PROJECT_ID=example-id
+# Account type: "evm-eoa" for regular accounts, "evm-smart" for Smart Accounts (gasless transactions and improved UX)
+NEXT_PUBLIC_CDP_CREATE_ACCOUNT_TYPE=evm-eoa

package/template-nextjs/src/app/globals.css CHANGED Viewed

@@ -180,6 +180,12 @@ header .wallet-address {
   width: 100%;
 }
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
 .site-title {
   font-size: 1.2rem;
   font-weight: 400;
@@ -192,6 +198,38 @@ header .wallet-address {
   display: none;
 }
+.smart-badge {
+  background-color: rgba(76, 175, 80, 0.15);
+  color: #4CAF50;
+  border-radius: 12px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+  border: 1px solid rgba(76, 175, 80, 0.3);
+  display: inline-block;
+}
+.smart-account-info {
+  background-color: rgba(76, 175, 80, 0.1);
+  border: 1px solid rgba(76, 175, 80, 0.3);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  margin: 0.5rem 0;
+  font-size: 0.9rem;
+}
+.success-message {
+  background-color: rgba(76, 175, 80, 0.1);
+  border: 1px solid rgba(76, 175, 80, 0.3);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  margin: 0.5rem 0;
+  font-size: 0.9rem;
+  color: var(--cdp-example-success-color, #4CAF50);
+}
 .card {
   align-items: center;
   background-color: var(--cdp-example-card-bg-color);

package/template-nextjs/src/components/{Transaction.tsx → EOATransaction.tsx} RENAMED Viewed

@@ -13,14 +13,14 @@ interface Props {
 }
 /**
- * This component demonstrates how to send an EVM transaction using the CDP hooks.
+ * This component demonstrates how to send an EVM transaction using EOA (Externally Owned Accounts).
  *
- * @param {Props} props - The props for the Transaction component.
+ * @param {Props} props - The props for the EOATransaction component.
  * @param {string} [props.balance] - The user's balance.
  * @param {() => void} [props.onSuccess] - A function to call when the transaction is successful.
  * @returns A component that displays a transaction form and a transaction hash.
  */
-export default function Transaction(props: Props) {
+export default function EOATransaction(props: Props) {
   const { balance, onSuccess } = props;
   const { evmAddress } = useEvmAddress();
   const [transactionHash, setTransactionHash] = useState("");
@@ -93,7 +93,9 @@ export default function Transaction(props: Props) {
               )}
               {!hasBalance && (
                 <>
-                  <p>You need ETH to send a transaction, but you have none.</p>
+                  <p>
+                    This example transaction sends a tiny amount of ETH from your wallet to itself.
+                  </p>
                   <p>
                     Get some from{" "}
                     <a

package/template-nextjs/src/components/Header.tsx CHANGED Viewed

@@ -30,10 +30,15 @@ export default function Header() {
     return () => clearTimeout(timeout);
   }, [isCopied]);
+  const isSmartAccountsEnabled = process.env.NEXT_PUBLIC_CDP_CREATE_ACCOUNT_TYPE === "evm-smart";
   return (
     <header>
       <div className="header-inner">
-        <h1 className="site-title">CDP Next.js StarterKit</h1>
+        <div className="title-container">
+          <h1 className="site-title">CDP Next.js StarterKit</h1>
+          {isSmartAccountsEnabled && <span className="smart-badge">SMART</span>}
+        </div>
         <div className="user-info flex-row-container">
           {evmAddress && (
             <button

package/template-nextjs/src/components/Providers.tsx CHANGED Viewed

@@ -11,6 +11,8 @@ interface ProvidersProps {
 const CDP_CONFIG: Config = {
   projectId: process.env.NEXT_PUBLIC_CDP_PROJECT_ID ?? "",
+  createAccountOnLogin:
+    process.env.NEXT_PUBLIC_CDP_CREATE_ACCOUNT_TYPE === "evm-smart" ? "evm-smart" : "evm-eoa",
 };
 const APP_CONFIG: AppConfig = {

package/template-nextjs/src/components/SmartAccountTransaction.tsx ADDED Viewed

@@ -0,0 +1,181 @@
+import { useCurrentUser, useSendUserOperation } from "@coinbase/cdp-hooks";
+import { Button } from "@coinbase/cdp-react/components/ui/Button";
+import { LoadingSkeleton } from "@coinbase/cdp-react/components/ui/LoadingSkeleton";
+import { useMemo, useState } from "react";
+interface Props {
+  balance?: string;
+  onSuccess?: () => void;
+}
+/**
+ * This component demonstrates how to send a gasless transaction using Smart Accounts.
+ *
+ * @param {Props} props - The props for the SmartAccountTransaction component.
+ * @param {string} [props.balance] - The user's balance (not required for gasless transactions).
+ * @param {() => void} [props.onSuccess] - A function to call when the transaction is successful.
+ * @returns A component that displays a Smart Account transaction form and result.
+ */
+export default function SmartAccountTransaction(props: Props) {
+  const { balance, onSuccess } = props;
+  const { currentUser } = useCurrentUser();
+  const { sendUserOperation, data, error, status } = useSendUserOperation();
+  const [userOperationHash, setUserOperationHash] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const smartAccount = currentUser?.evmSmartAccounts?.[0];
+  const hasBalance = useMemo(() => {
+    return balance && balance !== "0";
+  }, [balance]);
+  const handleSendUserOperation = async () => {
+    if (!smartAccount) return;
+    try {
+      setErrorMessage("");
+      setUserOperationHash("");
+      const result = await sendUserOperation({
+        evmSmartAccount: smartAccount,
+        network: "base-sepolia",
+        calls: [
+          {
+            to: smartAccount, // Send to yourself for testing
+            value: 1000000000000n, // 0.000001 ETH in wei
+            data: "0x", // Empty data for simple transfer
+          },
+        ],
+        useCdpPaymaster: true, // Use the free CDP paymaster to cover the gas fees
+      });
+      setUserOperationHash(result.userOperationHash);
+    } catch (err) {
+      setErrorMessage(err instanceof Error ? err.message : "Unknown error occurred");
+    }
+  };
+  const handleReset = () => {
+    setUserOperationHash("");
+    setErrorMessage("");
+  };
+  const isLoading = status === "pending";
+  const isSuccess = status === "success" && data;
+  const hasError = error || errorMessage;
+  return (
+    <>
+      {balance === undefined && (
+        <>
+          <h2 className="card-title">Send a gasless transaction</h2>
+          <LoadingSkeleton className="loading--text" />
+          <LoadingSkeleton className="loading--btn" />
+        </>
+      )}
+      {balance !== undefined && (
+        <>
+          {hasError && !isSuccess && (
+            <>
+              <h2 className="card-title">Oops</h2>
+              <p>{error?.message || errorMessage}</p>
+              <Button className="tx-button" onClick={handleReset} variant="secondary">
+                Reset and try again
+              </Button>
+            </>
+          )}
+          {!hasError && !isSuccess && !isLoading && (
+            <>
+              <h2 className="card-title">Send a gasless transaction</h2>
+              {hasBalance && smartAccount && (
+                <>
+                  <p>Send 0.000001 ETH to yourself on Base Sepolia with no gas fees!</p>
+                  <p className="smart-account-info">
+                    ✨ <strong>Smart Account Benefits:</strong> No gas fees, better UX, and enhanced
+                    security
+                  </p>
+                  <Button
+                    className="tx-button"
+                    onClick={handleSendUserOperation}
+                    disabled={isLoading}
+                  >
+                    Send Gasless Transaction
+                  </Button>
+                </>
+              )}
+              {!hasBalance && (
+                <>
+                  <p>
+                    This example transaction sends a tiny amount of ETH from your wallet to itself.
+                  </p>
+                  <p>
+                    Get some from{" "}
+                    <a
+                      href="https://portal.cdp.coinbase.com/products/faucet"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Base Sepolia Faucet
+                    </a>
+                  </p>
+                  <p className="smart-account-info">
+                    ℹ️ <strong>Note:</strong> Even though this is a gasless transaction, you still
+                    need ETH in your account to send it.
+                  </p>
+                </>
+              )}
+              {!smartAccount && (
+                <>
+                  <p>No Smart Account found. Please ensure you created a Smart Account.</p>
+                </>
+              )}
+            </>
+          )}
+          {isLoading && (
+            <>
+              <h2 className="card-title">Sending gasless transaction...</h2>
+              <p>Your transaction is being processed...</p>
+              {userOperationHash && (
+                <p>
+                  User Operation Hash:{" "}
+                  <code>
+                    {userOperationHash.slice(0, 6)}...{userOperationHash.slice(-4)}
+                  </code>
+                </p>
+              )}
+              <LoadingSkeleton className="loading--btn" />
+            </>
+          )}
+          {isSuccess && data && (
+            <>
+              <h2 className="card-title">Gasless transaction sent</h2>
+              <p>
+                Transaction hash:{" "}
+                <a
+                  href={`https://sepolia.basescan.org/tx/${data.transactionHash}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {data.transactionHash?.slice(0, 6)}...{data.transactionHash?.slice(-4)}
+                </a>
+              </p>
+              <p className="success-message">
+                ✅ <strong>Success!</strong> Your gasless transaction was completed with no fees.
+              </p>
+              <Button
+                variant="secondary"
+                className="tx-button"
+                onClick={() => {
+                  handleReset();
+                  onSuccess?.();
+                }}
+              >
+                Send another gasless transaction
+              </Button>
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+}

package/template-react/env.example CHANGED Viewed

@@ -1,3 +1,6 @@
 # CDP Configuration
 VITE_CDP_PROJECT_ID=example-id
+# Account type: "evm-eoa" for regular accounts, "evm-smart" for Smart Accounts (gasless transactions and improved UX)
+VITE_CDP_CREATE_ACCOUNT_TYPE=evm-eoa

package/template-react/src/{Transaction.tsx → EOATransaction.tsx} RENAMED Viewed

@@ -13,14 +13,14 @@ interface Props {
 }
 /**
- * This component demonstrates how to send an EVM transaction using the CDP hooks.
+ * This component demonstrates how to send an EVM transaction using EOA (Externally Owned Accounts).
  *
- * @param {Props} props - The props for the Transaction component.
+ * @param {Props} props - The props for the EOATransaction component.
  * @param {string} [props.balance] - The user's balance.
  * @param {() => void} [props.onSuccess] - A function to call when the transaction is successful.
  * @returns A component that displays a transaction form and a transaction hash.
  */
-function Transaction(props: Props) {
+function EOATransaction(props: Props) {
   const { balance, onSuccess } = props;
   const { evmAddress } = useEvmAddress();
   const [transactionHash, setTransactionHash] = useState("");
@@ -93,7 +93,9 @@ function Transaction(props: Props) {
               )}
               {!hasBalance && (
                 <>
-                  <p>You need ETH to send a transaction, but you have none.</p>
+                  <p>
+                    This example transaction sends a tiny amount of ETH from your wallet to itself.
+                  </p>
                   <p>
                     Get some from{" "}
                     <a
@@ -132,4 +134,4 @@ function Transaction(props: Props) {
   );
 }
-export default Transaction;
+export default EOATransaction;

package/template-react/src/Header.tsx CHANGED Viewed

@@ -29,10 +29,15 @@ function Header() {
     return () => clearTimeout(timeout);
   }, [isCopied]);
+  const isSmartAccountsEnabled = import.meta.env.VITE_CDP_CREATE_ACCOUNT_TYPE === "evm-smart";
   return (
     <header>
       <div className="header-inner">
-        <h1 className="site-title">CDP React StarterKit</h1>
+        <div className="title-container">
+          <h1 className="site-title">CDP React StarterKit</h1>
+          {isSmartAccountsEnabled && <span className="smart-badge">SMART</span>}
+        </div>
         <div className="user-info flex-row-container">
           {evmAddress && (
             <button

package/template-react/src/SmartAccountTransaction.tsx ADDED Viewed

@@ -0,0 +1,182 @@
+import { useCurrentUser, useSendUserOperation } from "@coinbase/cdp-hooks";
+import { Button } from "@coinbase/cdp-react/components/ui/Button";
+import { LoadingSkeleton } from "@coinbase/cdp-react/components/ui/LoadingSkeleton";
+import { useMemo, useState } from "react";
+interface Props {
+  balance?: string;
+  onSuccess?: () => void;
+}
+/**
+ * This component demonstrates how to send a gasless transaction using Smart Accounts.
+ *
+ * @param {Props} props - The props for the SmartAccountTransaction component.
+ * @param {string} [props.balance] - The user's balance (not required for gasless transactions).
+ * @param {() => void} [props.onSuccess] - A function to call when the transaction is successful.
+ * @returns A component that displays a Smart Account transaction form and result.
+ */
+function SmartAccountTransaction(props: Props) {
+  const { balance, onSuccess } = props;
+  const { currentUser } = useCurrentUser();
+  const { sendUserOperation, data, error, status } = useSendUserOperation();
+  const [userOperationHash, setUserOperationHash] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const smartAccount = currentUser?.evmSmartAccounts?.[0];
+  const hasBalance = useMemo(() => {
+    return balance && balance !== "0";
+  }, [balance]);
+  const handleSendUserOperation = async () => {
+    if (!smartAccount) return;
+    try {
+      setErrorMessage("");
+      setUserOperationHash("");
+      const result = await sendUserOperation({
+        evmSmartAccount: smartAccount,
+        network: "base-sepolia",
+        calls: [
+          {
+            to: smartAccount, // Send to yourself for testing
+            value: 1000000000000n, // 0.000001 ETH in wei
+            data: "0x", // Empty data for simple transfer
+          },
+        ],
+      });
+      setUserOperationHash(result.userOperationHash);
+    } catch (err) {
+      setErrorMessage(err instanceof Error ? err.message : "Unknown error occurred");
+    }
+  };
+  const handleReset = () => {
+    setUserOperationHash("");
+    setErrorMessage("");
+  };
+  const isLoading = status === "pending";
+  const isSuccess = status === "success" && data;
+  const hasError = error || errorMessage;
+  return (
+    <>
+      {balance === undefined && (
+        <>
+          <h2 className="card-title">Send a gasless transaction</h2>
+          <LoadingSkeleton className="loading--text" />
+          <LoadingSkeleton className="loading--btn" />
+        </>
+      )}
+      {balance !== undefined && (
+        <>
+          {hasError && !isSuccess && (
+            <>
+              <h2 className="card-title">Oops</h2>
+              <p>{error?.message || errorMessage}</p>
+              <Button className="tx-button" onClick={handleReset} variant="secondary">
+                Reset and try again
+              </Button>
+            </>
+          )}
+          {!hasError && !isSuccess && !isLoading && (
+            <>
+              <h2 className="card-title">Send a gasless transaction</h2>
+              {hasBalance && smartAccount && (
+                <>
+                  <p>Send 0.000001 ETH to yourself on Base Sepolia with no gas fees!</p>
+                  <p className="smart-account-info">
+                    ✨ <strong>Smart Account Benefits:</strong> No gas fees, better UX, and enhanced
+                    security
+                  </p>
+                  <Button
+                    className="tx-button"
+                    onClick={handleSendUserOperation}
+                    disabled={isLoading}
+                  >
+                    Send Gasless Transaction
+                  </Button>
+                </>
+              )}
+              {!hasBalance && (
+                <>
+                  <p>
+                    This example transaction sends a tiny amount of ETH from your wallet to itself.
+                  </p>
+                  <p>
+                    Get some from{" "}
+                    <a
+                      href="https://portal.cdp.coinbase.com/products/faucet"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Base Sepolia Faucet
+                    </a>
+                  </p>
+                  <p className="smart-account-info">
+                    ℹ️ <strong>Note:</strong> Even though this is a gasless transaction, you still
+                    need ETH in your account to send it.
+                  </p>
+                </>
+              )}
+              {!smartAccount && (
+                <>
+                  <p>No Smart Account found. Please ensure you created a Smart Account.</p>
+                </>
+              )}
+            </>
+          )}
+          {isLoading && (
+            <>
+              <h2 className="card-title">Sending gasless transaction...</h2>
+              <p>Your transaction is being processed...</p>
+              {userOperationHash && (
+                <p>
+                  User Operation Hash:{" "}
+                  <code>
+                    {userOperationHash.slice(0, 6)}...{userOperationHash.slice(-4)}
+                  </code>
+                </p>
+              )}
+              <LoadingSkeleton className="loading--btn" />
+            </>
+          )}
+          {isSuccess && data && (
+            <>
+              <h2 className="card-title">Gasless transaction sent</h2>
+              <p>
+                Transaction hash:{" "}
+                <a
+                  href={`https://sepolia.basescan.org/tx/${data.transactionHash}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {data.transactionHash?.slice(0, 6)}...{data.transactionHash?.slice(-4)}
+                </a>
+              </p>
+              <p className="success-message">
+                ✅ <strong>Success!</strong> Your gasless transaction was completed with no fees.
+              </p>
+              <Button
+                variant="secondary"
+                className="tx-button"
+                onClick={() => {
+                  handleReset();
+                  onSuccess?.();
+                }}
+              >
+                Send another gasless transaction
+              </Button>
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+}
+export default SmartAccountTransaction;

package/template-react/src/config.ts CHANGED Viewed

@@ -1,7 +1,11 @@
 import { type Config } from "@coinbase/cdp-hooks";
 import { type AppConfig } from "@coinbase/cdp-react";
-export const CDP_CONFIG: Config = { projectId: import.meta.env.VITE_CDP_PROJECT_ID };
+export const CDP_CONFIG: Config = {
+  projectId: import.meta.env.VITE_CDP_PROJECT_ID,
+  createAccountOnLogin:
+    import.meta.env.VITE_CDP_CREATE_ACCOUNT_TYPE === "evm-smart" ? "evm-smart" : "evm-eoa",
+};
 export const APP_CONFIG: AppConfig = {
   name: "CDP React StarterKit",

package/template-react/src/index.css CHANGED Viewed

@@ -180,6 +180,12 @@ header .wallet-address {
   width: 100%;
 }
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
 .site-title {
   font-size: 1.2rem;
   font-weight: 400;
@@ -192,6 +198,38 @@ header .wallet-address {
   display: none;
 }
+.smart-badge {
+  background-color: rgba(76, 175, 80, 0.15);
+  color: #4CAF50;
+  border-radius: 12px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+  border: 1px solid rgba(76, 175, 80, 0.3);
+  display: inline-block;
+}
+.smart-account-info {
+  background-color: rgba(76, 175, 80, 0.1);
+  border: 1px solid rgba(76, 175, 80, 0.3);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  margin: 0.5rem 0;
+  font-size: 0.9rem;
+}
+.success-message {
+  background-color: rgba(76, 175, 80, 0.1);
+  border: 1px solid rgba(76, 175, 80, 0.3);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  margin: 0.5rem 0;
+  font-size: 0.9rem;
+  color: var(--cdp-example-success-color, #4CAF50);
+}
 .card {
   align-items: center;
   background-color: var(--cdp-example-card-bg-color);