@coinbase/create-cdp-app 0.0.24 → 0.0.25

package/dist/index.js

@@ -11,13 +11,22 @@ function prepareAppDirectory(targetDir, shouldOverwrite) {
   }
   return root;
 }
-function customizePackageJson(templateDir, appName) {
+function customizePackageJson(templateDir, appName, includeSdk) {
   const packageJsonPath = path.join(templateDir, "package.json");
   const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
   packageJson.name = appName;
+  if (includeSdk) {
+    packageJson.dependencies["@coinbase/cdp-sdk"] = "latest";
+  }
   return JSON.stringify(packageJson, null, 2) + "\n";
 }
-function customizeEnv(templateDir, projectId, useSmartAccounts) {
+function customizeEnv({
+  templateDir,
+  projectId,
+  useSmartAccounts,
+  apiKeyId,
+  apiKeySecret
+}) {
   const exampleEnvPath = path.join(templateDir, "env.example");
   const exampleEnv = fs.readFileSync(exampleEnvPath, "utf-8");
   let envContent = exampleEnv.replace(/(.*PROJECT_ID=).*(\r?\n|$)/, `$1${projectId}
@@ -30,6 +39,13 @@ function customizeEnv(templateDir, projectId, useSmartAccounts) {
     `$1${accountType}
 `
   );
+  if (apiKeyId && apiKeySecret) {
+    envContent = envContent.replace(/# CDP_API_KEY_ID=.*/, `CDP_API_KEY_ID=${apiKeyId}`);
+    envContent = envContent.replace(
+      /# CDP_API_KEY_SECRET=.*/,
+      `CDP_API_KEY_SECRET=${apiKeySecret}`
+    );
+  }
   return envContent;
 }
 function customizeConfig(templateDir, useSmartAccounts, isNextjs) {
@@ -57,23 +73,45 @@ function customizeConfig(templateDir, useSmartAccounts, isNextjs) {
   }
   return configContent;
 }
-function copyFileSelectively(filePath, destPath, useSmartAccounts) {
+function copyFileSelectively({
+  filePath,
+  destPath,
+  useSmartAccounts,
+  enableOnramp
+}) {
   const stat = fs.statSync(filePath);
   if (stat.isDirectory()) {
-    copyDirSelectively(filePath, destPath, useSmartAccounts);
+    const baseDir = path.basename(filePath);
+    if (!enableOnramp && (baseDir === "api" || baseDir === "lib")) return;
+    copyDirSelectively({ srcDir: filePath, destDir: destPath, useSmartAccounts, enableOnramp });
   } else {
     const fileName = path.basename(filePath);
     if (useSmartAccounts && fileName === "EOATransaction.tsx") return;
     if (!useSmartAccounts && fileName === "SmartAccountTransaction.tsx") return;
+    if (!enableOnramp && ["FundWallet.tsx", "SignedInScreenWithOnramp.tsx"].includes(fileName))
+      return;
+    if (enableOnramp) {
+      if (fileName === "SignedInScreen.tsx") return;
+      if (fileName === "SignedInScreenWithOnramp.tsx") {
+        const newDestPath = destPath.replace("SignedInScreenWithOnramp.tsx", "SignedInScreen.tsx");
+        fs.copyFileSync(filePath, newDestPath);
+        return;
+      }
+    }
     fs.copyFileSync(filePath, destPath);
   }
 }
-function copyDirSelectively(srcDir, destDir, useSmartAccounts) {
+function copyDirSelectively({
+  srcDir,
+  destDir,
+  useSmartAccounts,
+  enableOnramp
+}) {
   fs.mkdirSync(destDir, { recursive: true });
   for (const file of fs.readdirSync(srcDir)) {
     const srcFile = path.resolve(srcDir, file);
     const destFile = path.resolve(destDir, file);
-    copyFileSelectively(srcFile, destFile, useSmartAccounts);
+    copyFileSelectively({ filePath: srcFile, destPath: destFile, useSmartAccounts, enableOnramp });
   }
 }
 function isDirEmpty(dirPath) {
@@ -107,12 +145,30 @@ 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, useSmartAccounts } = await getAppDetails();
+  const {
+    appName,
+    template,
+    targetDirectory,
+    projectId,
+    useSmartAccounts,
+    enableOnramp,
+    apiKeyId,
+    apiKeySecret
+  } = 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, useSmartAccounts);
+  copyTemplateFiles({
+    templateDir,
+    root,
+    appName,
+    projectId,
+    useSmartAccounts,
+    enableOnramp,
+    apiKeyId,
+    apiKeySecret
+  });
   printNextSteps(root);
 }
 async function getAppDetails() {
@@ -164,6 +220,36 @@ async function getAppDetails() {
           ),
           initial: false
         },
+        {
+          type: (_, { template }) => template === "nextjs" ? "confirm" : null,
+          name: "enableOnramp",
+          message: reset(
+            "Enable Coinbase Onramp? (Onramp enables users to buy crypto with fiat) -- NOTE: EXPERIMENTAL FEATURE"
+          ),
+          initial: false
+        },
+        {
+          type: (_, { enableOnramp }) => enableOnramp ? "text" : null,
+          name: "apiKeyId",
+          message: reset("CDP API Key ID (Create at https://portal.cdp.coinbase.com/api-keys):"),
+          validate: (value) => {
+            if (!value) {
+              return "API Key ID is required for Onramp";
+            }
+            return true;
+          }
+        },
+        {
+          type: (_, { enableOnramp }) => enableOnramp ? "password" : null,
+          name: "apiKeySecret",
+          message: reset("CDP API Key Secret (paste your private key - it will be hidden):"),
+          validate: (value) => {
+            if (!value) {
+              return "API Key Secret is required for Onramp";
+            }
+            return true;
+          }
+        },
         {
           type: "confirm",
           name: "corsConfirmation",
@@ -198,7 +284,10 @@ async function getAppDetails() {
       template: result.template,
       targetDirectory: targetDir,
       projectId: result.projectId,
-      useSmartAccounts: result.useSmartAccounts
+      useSmartAccounts: result.useSmartAccounts,
+      enableOnramp: result.enableOnramp,
+      apiKeyId: result.apiKeyId,
+      apiKeySecret: result.apiKeySecret
     };
   } catch (cancelled) {
     if (cancelled instanceof Error) {
@@ -217,25 +306,48 @@ function printNextSteps(appRoot) {
   console.log(`${packageManager} install`);
   console.log(devCommand);
 }
-function copyTemplateFiles(templateDir, root, appName, projectId, useSmartAccounts) {
+function copyTemplateFiles({
+  templateDir,
+  root,
+  appName,
+  projectId,
+  useSmartAccounts,
+  enableOnramp,
+  apiKeyId,
+  apiKeySecret
+}) {
   const writeFileToTarget = (file, content) => {
     const targetPath = path.join(root, fileRenames[file] ?? file);
     if (content) {
       fs.writeFileSync(targetPath, content);
     } else {
-      copyFileSelectively(path.join(templateDir, file), targetPath, useSmartAccounts);
+      copyFileSelectively({
+        filePath: path.join(templateDir, file),
+        destPath: targetPath,
+        useSmartAccounts,
+        enableOnramp
+      });
     }
   };
   const isNextjs = templateDir.includes("nextjs");
   const files = fs.readdirSync(templateDir);
   for (const file of files) {
     if (file === "package.json") {
-      const customizedPackageJson = customizePackageJson(templateDir, appName);
+      const customizedPackageJson = customizePackageJson(templateDir, appName, enableOnramp);
       writeFileToTarget(file, customizedPackageJson);
     } else if (file === "env.example" && projectId) {
       writeFileToTarget(file);
-      const customizedEnv = customizeEnv(templateDir, projectId, useSmartAccounts);
+      const customizedEnv = customizeEnv({
+        templateDir,
+        projectId,
+        useSmartAccounts,
+        apiKeyId,
+        apiKeySecret
+      });
       console.log("Copying CDP Project ID to .env");
+      if (apiKeyId && apiKeySecret) {
+        console.log("Copying CDP API credentials to .env");
+      }
       if (useSmartAccounts) {
         console.log("Configuring Smart Accounts in environment");
       }

package/dist/index.js.map

@@ -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 * @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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"}
+{"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 * @param includeSdk - Whether to include the CDP SDK in the dependencies\n * @returns The customized package.json content\n */\nexport function customizePackageJson(\n  templateDir: string,\n  appName: string,\n  includeSdk?: boolean,\n): string {\n  const packageJsonPath = path.join(templateDir, \"package.json\");\n  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, \"utf-8\"));\n  packageJson.name = appName;\n  if (includeSdk) {\n    packageJson.dependencies[\"@coinbase/cdp-sdk\"] = \"latest\";\n  }\n  return JSON.stringify(packageJson, null, 2) + \"\\n\";\n}\n\n/**\n * Set up the .env file for the new app\n *\n * @param params - The parameters for the function\n * @param params.templateDir - The directory containing the template files\n * @param params.projectId - The CDP Project ID\n * @param params.useSmartAccounts - Whether to enable smart accounts\n * @param params.apiKeyId - The API Key ID\n * @param params.apiKeySecret - The API Key Secret\n * @returns The customized .env content\n */\nexport function customizeEnv({\n  templateDir,\n  projectId,\n  useSmartAccounts,\n  apiKeyId,\n  apiKeySecret,\n}: {\n  templateDir: string;\n  projectId: string;\n  useSmartAccounts?: boolean;\n  apiKeyId?: string;\n  apiKeySecret?: string;\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  // Replace CDP API credentials if provided\n  if (apiKeyId && apiKeySecret) {\n    // Replace the commented API Key ID\n    envContent = envContent.replace(/# CDP_API_KEY_ID=.*/, `CDP_API_KEY_ID=${apiKeyId}`);\n    // Replace the commented API Key Secret\n    envContent = envContent.replace(\n      /# CDP_API_KEY_SECRET=.*/,\n      `CDP_API_KEY_SECRET=${apiKeySecret}`,\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 params - The parameters for the function\n * @param params.filePath - The source path\n * @param params.destPath - The destination path\n * @param params.useSmartAccounts - Whether to use Smart Accounts\n * @param params.enableOnramp - Whether to include Onramp\n */\nexport function copyFileSelectively({\n  filePath,\n  destPath,\n  useSmartAccounts,\n  enableOnramp,\n}: {\n  filePath: string;\n  destPath: string;\n  useSmartAccounts?: boolean;\n  enableOnramp?: boolean;\n}): void {\n  const stat = fs.statSync(filePath);\n  if (stat.isDirectory()) {\n    const baseDir = path.basename(filePath);\n    // skip api and lib directories if Onramp is not enabled\n    if (!enableOnramp && (baseDir === \"api\" || baseDir === \"lib\")) return;\n    // copy the directory\n    copyDirSelectively({ srcDir: filePath, destDir: destPath, useSmartAccounts, enableOnramp });\n  } else {\n    const fileName = path.basename(filePath);\n\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    // Skip Onramp files if the user didn't enable Onramp\n    if (!enableOnramp && [\"FundWallet.tsx\", \"SignedInScreenWithOnramp.tsx\"].includes(fileName))\n      return;\n    // Onramp-specific SignedInScreen\n    if (enableOnramp) {\n      // Skip the default SignedInScreen.tsx file\n      if (fileName === \"SignedInScreen.tsx\") return;\n      // Copy the SignedInScreenWithOnramp.tsx file to SignedInScreen.tsx\n      if (fileName === \"SignedInScreenWithOnramp.tsx\") {\n        const newDestPath = destPath.replace(\"SignedInScreenWithOnramp.tsx\", \"SignedInScreen.tsx\");\n        fs.copyFileSync(filePath, newDestPath);\n        return;\n      }\n    }\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 params - The parameters for the function\n * @param params.srcDir - The source directory path\n * @param params.destDir - The destination directory path\n * @param params.useSmartAccounts - Whether to use Smart Accounts\n * @param params.enableOnramp - Whether to include Onramp\n */\nfunction copyDirSelectively({\n  srcDir,\n  destDir,\n  useSmartAccounts,\n  enableOnramp,\n}: {\n  srcDir: string;\n  destDir: string;\n  useSmartAccounts?: boolean;\n  enableOnramp?: boolean;\n}): 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({ filePath: srcFile, destPath: destFile, useSmartAccounts, enableOnramp });\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  enableOnramp: boolean;\n  apiKeyId?: string;\n  apiKeySecret?: 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 {\n    appName,\n    template,\n    targetDirectory,\n    projectId,\n    useSmartAccounts,\n    enableOnramp,\n    apiKeyId,\n    apiKeySecret,\n  } = 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({\n    templateDir,\n    root,\n    appName,\n    projectId,\n    useSmartAccounts,\n    enableOnramp,\n    apiKeyId,\n    apiKeySecret,\n  });\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: (_, { template }: { template?: string }) =>\n            template === \"nextjs\" ? \"confirm\" : null,\n          name: \"enableOnramp\",\n          message: reset(\n            \"Enable Coinbase Onramp? (Onramp enables users to buy crypto with fiat) -- NOTE: EXPERIMENTAL FEATURE\",\n          ),\n          initial: false,\n        },\n        {\n          type: (_, { enableOnramp }: { enableOnramp?: boolean }) => (enableOnramp ? \"text\" : null),\n          name: \"apiKeyId\",\n          message: reset(\"CDP API Key ID (Create at https://portal.cdp.coinbase.com/api-keys):\"),\n          validate: value => {\n            if (!value) {\n              return \"API Key ID is required for Onramp\";\n            }\n            return true;\n          },\n        },\n        {\n          type: (_, { enableOnramp }: { enableOnramp?: boolean }) =>\n            enableOnramp ? \"password\" : null,\n          name: \"apiKeySecret\",\n          message: reset(\"CDP API Key Secret (paste your private key - it will be hidden):\"),\n          validate: value => {\n            if (!value) {\n              return \"API Key Secret is required for Onramp\";\n            }\n            return true;\n          },\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      enableOnramp: result.enableOnramp,\n      apiKeyId: result.apiKeyId,\n      apiKeySecret: result.apiKeySecret,\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 params - The parameters for the function\n * @param params.templateDir - The directory containing the template files\n * @param params.root - The root directory of the app\n * @param params.appName - The name of the app\n * @param params.projectId - The CDP Project ID\n * @param params.useSmartAccounts - Whether to enable smart accounts\n * @param params.enableOnramp - Whether to include Onramp\n * @param params.apiKeyId - The API Key ID\n * @param params.apiKeySecret - The API Key Secret\n */\nfunction copyTemplateFiles({\n  templateDir,\n  root,\n  appName,\n  projectId,\n  useSmartAccounts,\n  enableOnramp,\n  apiKeyId,\n  apiKeySecret,\n}: {\n  templateDir: string;\n  root: string;\n  appName: string;\n  projectId?: string;\n  useSmartAccounts?: boolean;\n  enableOnramp?: boolean;\n  apiKeyId?: string;\n  apiKeySecret?: 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      copyFileSelectively({\n        filePath: path.join(templateDir, file),\n        destPath: targetPath,\n        useSmartAccounts,\n        enableOnramp,\n      });\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, enableOnramp);\n      writeFileToTarget(file, customizedPackageJson);\n    } else if (file === \"env.example\" && projectId) {\n      writeFileToTarget(file);\n      const customizedEnv = customizeEnv({\n        templateDir,\n        projectId,\n        useSmartAccounts,\n        apiKeyId,\n        apiKeySecret,\n      });\n      console.log(\"Copying CDP Project ID to .env\");\n      if (apiKeyId && apiKeySecret) {\n        console.log(\"Copying CDP API credentials to .env\");\n      }\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

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

package/template-nextjs/README.md

@@ -7,13 +7,18 @@ This project was generated with [`@coinbase/create-cdp-app`](https://coinbase.gi
 ```
 src/
 ├── app/                  # Next.js App Router directory
+│   ├── api/              # API endpoints
+│   │   └── onramp/       # Onramp-related endpoints
+│   │       ├── buy-quote/       # Buy quote generation endpoint for exchange rate and purchase URL
+│   │       └── buy-options/     # Available crypto assets and payment currencies
 │   ├── favicon.ico      # Application favicon
 │   ├── globals.css      # Global styles and theme variables
 │   ├── layout.tsx       # Root layout with providers and global UI
 │   └── page.tsx         # Home page component
 │
-└── components/          # Reusable React components
+├── components/          # Reusable React components
     ├── ClientApp.tsx    # Client-side application wrapper
+    ├── FundWallet.tsx   # Example Fund flow
     ├── Header.tsx       # Navigation header with authentication status
     ├── Icons.tsx        # Reusable icon components
     ├── Loading.tsx      # Loading state component
@@ -21,8 +26,13 @@ src/
     ├── SignInScreen.tsx # Authentication screen with CDP sign-in flow
     ├── SignedInScreen.tsx # Screen displayed after successful authentication
     ├── theme.ts         # Theme configuration and styling constants
-    ├── Transaction.tsx  # Example transaction flow using CDP Hooks
+    ├── Transaction.tsx  # Example transaction flow
     └── UserBalance.tsx  # Component to display user's wallet balance
+│
+└── lib/                 # Shared utilities and helpers
+    ├── cdp-auth.ts      # CDP API authentication utilities
+    ├── onramp-api.ts    # CDP Onramp API utilities
+    └── to-camel-case.ts # Utility for converting snakecase-keyed objects to camelcase-keyed objects
 ```
 
 ## Getting Started
@@ -36,6 +46,18 @@ First, make sure you have your CDP Project ID:
 
 Then, copy the `env.example` file to `.env`, and populate the `NEXT_PUBLIC_CDP_PROJECT_ID` with your project id.
 
+### CDP API credentials (Optional)
+
+If you enabled Onramp during setup, your `.env` file will already contain the CDP API credentials. If you want to add Onramp later:
+
+1. Go to [CDP API Keys](https://portal.cdp.coinbase.com/api-keys) to create an API key
+2. Add the following to your `.env` file:
+   ```
+   CDP_API_KEY_ID=your-api-key-id
+   CDP_API_KEY_SECRET=your-api-key-secret
+   ```
+
+
 Now you can start the development server:
 
 Using npm:
@@ -76,6 +98,7 @@ This template comes with:
 - Built-in TypeScript support
 - ESLint with Next.js configuration
 - Viem for type-safe Ethereum interactions
+- Optional Onramp API integration
 
 ## Learn More
 

package/template-nextjs/env.example

@@ -3,3 +3,7 @@ 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
+
+# CDP API Key
+# CDP_API_KEY_ID=your-api-key-id
+# CDP_API_KEY_SECRET=your-api-key-secret

package/template-nextjs/src/app/api/onramp/buy-options/route.ts

@@ -0,0 +1,90 @@
+import {
+  type unstable_FetchBuyOptions as FetchBuyOptions,
+  type unstable_OnrampBuyOptionsSnakeCaseResponse as OnrampBuyOptionsSnakeCaseResponse,
+} from "@coinbase/cdp-react";
+import { NextRequest, NextResponse } from "next/server";
+
+import { generateCDPJWT, getCDPCredentials, ONRAMP_API_BASE_URL } from "@/lib/cdp-auth";
+import { convertSnakeToCamelCase } from "@/lib/to-camel-case";
+
+type OnrampBuyOptionsResponseRaw = OnrampBuyOptionsSnakeCaseResponse;
+type OnrampBuyOptionsResponse = Awaited<ReturnType<FetchBuyOptions>>;
+
+/**
+ * Fetches available buy options (payment currencies and purchasable assets) for onramp
+ *
+ * @param request - NextRequest object
+ * @returns NextResponse object
+ */
+export async function GET(request: NextRequest) {
+  try {
+    // Validate CDP credentials are configured
+    try {
+      getCDPCredentials();
+    } catch (_error) {
+      return NextResponse.json({ error: "CDP API credentials not configured" }, { status: 500 });
+    }
+
+    /**
+     * Extract query parameters
+     * Note: While the API documentation shows all parameters as optional,
+     * the backend currently requires the 'country' parameter
+     */
+    const searchParams = request.nextUrl.searchParams;
+    const country = searchParams.get("country");
+    const subdivision = searchParams.get("subdivision");
+    const networks = searchParams.get("networks");
+
+    // Build query string
+    const queryParams = new URLSearchParams();
+    if (country) queryParams.append("country", country);
+    if (subdivision) queryParams.append("subdivision", subdivision);
+    if (networks) queryParams.append("networks", networks);
+
+    const queryString = queryParams.toString();
+    const apiPath = "/onramp/v1/buy/options";
+    const fullPath = apiPath + (queryString ? `?${queryString}` : "");
+
+    // Generate JWT for CDP API authentication
+    const jwt = await generateCDPJWT({
+      requestMethod: "GET",
+      requestHost: new URL(ONRAMP_API_BASE_URL).hostname,
+      requestPath: apiPath,
+    });
+
+    // Call CDP API to get buy options
+    const response = await fetch(`${ONRAMP_API_BASE_URL}${fullPath}`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${jwt}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      console.error("CDP API error:", response.statusText);
+      const errorText = await response.text();
+      console.error("Error details:", errorText);
+
+      try {
+        const errorData = JSON.parse(errorText);
+        return NextResponse.json(
+          { error: errorData.message || "Failed to fetch buy options" },
+          { status: response.status },
+        );
+      } catch {
+        return NextResponse.json(
+          { error: "Failed to fetch buy options" },
+          { status: response.status },
+        );
+      }
+    }
+
+    const data: OnrampBuyOptionsResponseRaw = await response.json();
+    const dataCamelCase: OnrampBuyOptionsResponse = convertSnakeToCamelCase(data);
+    return NextResponse.json(dataCamelCase);
+  } catch (error) {
+    console.error("Error fetching buy options:", error);
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}

package/template-nextjs/src/app/api/onramp/buy-quote/route.ts

@@ -0,0 +1,106 @@
+import {
+  type unstable_FetchBuyQuote as FetchBuyQuote,
+  type unstable_OnrampBuyQuoteSnakeCaseResponse as OnrampBuyQuoteSnakeCaseResponse,
+} from "@coinbase/cdp-react";
+import { NextRequest, NextResponse } from "next/server";
+
+import { generateCDPJWT, getCDPCredentials, ONRAMP_API_BASE_URL } from "@/lib/cdp-auth";
+import { convertSnakeToCamelCase } from "@/lib/to-camel-case";
+
+type OnrampBuyQuoteRequest = Parameters<FetchBuyQuote>[0];
+type OnrampBuyQuoteResponseRaw = OnrampBuyQuoteSnakeCaseResponse;
+type OnrampBuyQuoteResponse = Awaited<ReturnType<FetchBuyQuote>>;
+
+/**
+ * Creates a buy quote for onramp purchase
+ *
+ * @param request - Buy quote request parameters
+ * @returns Buy quote with fees and onramp URL
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const body: OnrampBuyQuoteRequest = await request.json();
+
+    // Validate CDP credentials are configured
+    try {
+      getCDPCredentials();
+    } catch (_error) {
+      return NextResponse.json({ error: "CDP API credentials not configured" }, { status: 500 });
+    }
+
+    // Validate required fields
+
+    // Note we don't require the wallet info because this endpoint is used to get an exchange rate. Only the onramp URL requires the wallet info.
+
+    if (
+      !body.purchaseCurrency ||
+      !body.paymentAmount ||
+      !body.paymentCurrency ||
+      !body.paymentMethod ||
+      !body.country
+    ) {
+      return NextResponse.json({ error: "Missing required parameters" }, { status: 400 });
+    }
+
+    // Validate US subdivision requirement
+    if (body.country === "US" && !body.subdivision) {
+      return NextResponse.json({ error: "State/subdivision is required for US" }, { status: 400 });
+    }
+
+    // Generate JWT for CDP API authentication
+    const jwt = await generateCDPJWT({
+      requestMethod: "POST",
+      requestHost: new URL(ONRAMP_API_BASE_URL).hostname,
+      requestPath: "/onramp/v1/buy/quote",
+    });
+
+    // Prepare request body for buy quote API
+    const requestBody = {
+      purchaseCurrency: body.purchaseCurrency,
+      purchaseNetwork: body.purchaseNetwork, // Use the wallet's network
+      paymentAmount: body.paymentAmount,
+      paymentCurrency: body.paymentCurrency,
+      paymentMethod: body.paymentMethod,
+      country: body.country,
+      subdivision: body.subdivision,
+      destinationAddress: body.destinationAddress, // Include to get one-click-buy URL
+    };
+
+    // Call CDP Onramp API to get buy quote and URL
+    const response = await fetch(`${ONRAMP_API_BASE_URL}/onramp/v1/buy/quote`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${jwt}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!response.ok) {
+      console.error("CDP API error:", response.statusText);
+      const errorText = await response.text();
+      console.error("Error details:", errorText);
+
+      try {
+        const errorData = JSON.parse(errorText);
+        return NextResponse.json(
+          { error: errorData.message || "Failed to create buy quote" },
+          { status: response.status },
+        );
+      } catch {
+        return NextResponse.json(
+          { error: "Failed to create buy quote" },
+          { status: response.status },
+        );
+      }
+    }
+
+    // convert response data to camelCase until migration to API v2 which will return camelCase data
+    const data: OnrampBuyQuoteResponseRaw = await response.json();
+    const dataCamelCase: OnrampBuyQuoteResponse = convertSnakeToCamelCase(data);
+    return NextResponse.json(dataCamelCase);
+  } catch (error) {
+    console.error("Error creating buy quote:", error);
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}

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

@@ -1,5 +1,6 @@
 :root {
   --cdp-example-page-bg-color: #eaeaea;
+  --cdp-example-page-bg-alt-color: #eef0f3;
   --cdp-example-bg-overlay-color: rgba(0, 0, 0, 0.25);
   --cdp-example-bg-skeleton-color: rgba(0, 0, 0, 0.1);
   --cdp-example-text-color: #111111;
@@ -30,6 +31,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --cdp-example-page-bg-color: #0a0b0d;
+    --cdp-example-page-bg-alt-color: #333333;
     --cdp-example-bg-overlay-color: rgba(0, 0, 0, 0.25);
     --cdp-example-bg-skeleton-color: rgba(255, 255, 255, 0.1);
     --cdp-example-text-color: #fafafa;
@@ -167,7 +169,7 @@ header .wallet-address {
 }
 
 .main {
-  padding: 0.5rem;
+  padding: 4rem 0.5rem;
   width: 100%;
 }
 
@@ -200,7 +202,7 @@ header .wallet-address {
 
 .smart-badge {
   background-color: rgba(76, 175, 80, 0.15);
-  color: #4CAF50;
+  color: #4caf50;
   border-radius: 12px;
   padding: 0.2rem 0.6rem;
   font-size: 0.7rem;
@@ -220,6 +222,10 @@ header .wallet-address {
   font-size: 0.9rem;
 }
 
+.smart-account-info:last-child {
+  margin-bottom: 0;
+}
+
 .success-message {
   background-color: rgba(76, 175, 80, 0.1);
   border: 1px solid rgba(76, 175, 80, 0.3);
@@ -227,7 +233,7 @@ header .wallet-address {
   padding: 0.75rem;
   margin: 0.5rem 0;
   font-size: 0.9rem;
-  color: var(--cdp-example-success-color, #4CAF50);
+  color: var(--cdp-example-success-color, #4caf50);
 }
 
 .card {
@@ -313,6 +319,24 @@ header .wallet-address {
   min-width: 11.75rem;
 }
 
+.page-heading {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1;
+  margin: 0 0 1.5rem;
+}
+
+.page-divider {
+  width: 60%;
+  margin: 4rem 0;
+}
+
+.small-text {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
 @media (min-width: 540px) {
   .header-inner {
     flex-direction: row;
@@ -332,7 +356,7 @@ header .wallet-address {
   }
 
   .main {
-    padding: 1rem;
+    padding: 4rem 1rem;
   }
 }
 

package/template-nextjs/src/components/FundWallet.tsx

@@ -0,0 +1,49 @@
+import {
+  unstable_FundModal as FundModal,
+  type unstable_FundModalProps as FundModalProps,
+} from "@coinbase/cdp-react";
+import { useCallback } from "react";
+
+import { getBuyOptions, createBuyQuote } from "@/lib/onramp-api";
+
+/**
+ * A component that wraps the FundModal component
+ *
+ * @param props - The props for the FundWallet component
+ * @param props.onSuccess - The callback function to call when the onramp purchase is successful
+ * @returns The FundWallet component
+ */
+export default function FundWallet({ onSuccess }: { onSuccess: () => void }) {
+  const fetchBuyQuote: FundModalProps["fetchBuyQuote"] = useCallback(async params => {
+    return createBuyQuote(params);
+  }, []);
+
+  const fetchBuyOptions: FundModalProps["fetchBuyOptions"] = useCallback(async params => {
+    return getBuyOptions(params);
+  }, []);
+
+  return (
+    <>
+      <FundModal
+        country="US"
+        subdivision="CA"
+        cryptoCurrency="ETH"
+        fiatCurrency="USD"
+        fetchBuyQuote={fetchBuyQuote}
+        fetchBuyOptions={fetchBuyOptions}
+        network="base"
+        presetAmountInputs={[10, 25, 50]}
+        onSuccess={onSuccess}
+      />
+      <p className="small-text">
+        Warning: this will cost real money unless you{" "}
+        <a
+          href="https://docs.cdp.coinbase.com/onramp-&-offramp/developer-guidance/faq#can-i-test-my-onramp-integration-by-creating-mock-buys-and-sends%3F"
+          target="_blank"
+        >
+          enable mock buys and sends
+        </a>
+      </p>
+    </>
+  );
+}

package/template-nextjs/src/components/SignedInScreen.tsx

@@ -50,7 +50,11 @@ export default function SignedInScreen() {
       <main className="main flex-col-container flex-grow">
         <div className="main-inner flex-col-container">
           <div className="card card--user-balance">
-            <UserBalance balance={formattedBalance} />
+            <UserBalance
+              balance={formattedBalance}
+              faucetName="Base Sepolia Faucet"
+              faucetUrl="https://portal.cdp.coinbase.com/products/faucet"
+            />
           </div>
           <div className="card card--transaction">
             {isSignedIn && evmAddress && (

package/template-nextjs/src/components/SignedInScreenWithOnramp.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useEvmAddress, useIsSignedIn } from "@coinbase/cdp-hooks";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  createPublicClient,
+  http,
+  formatEther,
+  type PublicClient,
+  type Transport,
+  type Address,
+} from "viem";
+import { baseSepolia, base } from "viem/chains";
+
+import FundWallet from "@/components/FundWallet";
+import Header from "@/components/Header";
+import Transaction from "@/components/Transaction";
+import UserBalance from "@/components/UserBalance";
+
+/**
+ * Create a viem client to access user's balance on the Base network
+ */
+const client = createPublicClient({
+  chain: base,
+  transport: http(),
+});
+
+/**
+ * Create a viem client to access user's balance on the Base Sepolia network
+ */
+const sepoliaClient = createPublicClient({
+  chain: baseSepolia,
+  transport: http(),
+});
+
+const useBalance = (
+  address: Address | null,
+  client: PublicClient<Transport, typeof base | typeof baseSepolia, undefined, undefined>,
+  poll = false,
+) => {
+  const [balance, setBalance] = useState<bigint | undefined>(undefined);
+
+  const formattedBalance = useMemo(() => {
+    if (balance === undefined) return undefined;
+    return formatEther(balance);
+  }, [balance]);
+
+  const getBalance = useCallback(async () => {
+    if (!address) return;
+    const balance = await client.getBalance({ address });
+    setBalance(balance);
+  }, [address, client]);
+
+  useEffect(() => {
+    if (!poll) {
+      return;
+    }
+    getBalance();
+    const interval = setInterval(getBalance, 500);
+    return () => clearInterval(interval);
+  }, [getBalance, poll]);
+
+  return { balance, formattedBalance, getBalance };
+};
+
+/**
+ * The Signed In screen
+ */
+export default function SignedInScreen() {
+  const { isSignedIn } = useIsSignedIn();
+  const { evmAddress } = useEvmAddress();
+
+  const { formattedBalance, getBalance } = useBalance(evmAddress, client, true);
+  const { formattedBalance: formattedBalanceSepolia, getBalance: getBalanceSepolia } = useBalance(
+    evmAddress,
+    sepoliaClient,
+    true,
+  );
+
+  return (
+    <>
+      <Header />
+      <main className="main flex-col-container flex-grow">
+        <p className="page-heading">Fund your wallet on Base</p>
+        <div className="main-inner flex-col-container">
+          <div className="card card--user-balance">
+            <UserBalance balance={formattedBalance} />
+          </div>
+          <div className="card card--transaction">
+            {isSignedIn && evmAddress && <FundWallet onSuccess={getBalance} />}
+          </div>
+        </div>
+        <hr className="page-divider" />
+        <p className="page-heading">Send a transaction on Base Sepolia</p>
+        <div className="main-inner flex-col-container">
+          <div className="card card--user-balance">
+            <UserBalance
+              balance={formattedBalanceSepolia}
+              faucetName="Base Sepolia Faucet"
+              faucetUrl="https://portal.cdp.coinbase.com/products/faucet"
+            />
+          </div>
+          <div className="card card--transaction">
+            {isSignedIn && evmAddress && (
+              <Transaction balance={formattedBalanceSepolia} onSuccess={getBalanceSepolia} />
+            )}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

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

@@ -108,8 +108,9 @@ export default function SmartAccountTransaction(props: Props) {
                   <p>
                     This example transaction sends a tiny amount of ETH from your wallet to itself.
                   </p>
-                  <p>
-                    Get some from{" "}
+                  <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. Get some from{" "}
                     <a
                       href="https://portal.cdp.coinbase.com/products/faucet"
                       target="_blank"
@@ -118,10 +119,6 @@ export default function SmartAccountTransaction(props: Props) {
                       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 && (

package/template-nextjs/src/components/UserBalance.tsx

@@ -3,6 +3,8 @@ import { LoadingSkeleton } from "@coinbase/cdp-react/components/ui/LoadingSkelet
 
 interface Props {
   balance?: string;
+  faucetUrl?: string;
+  faucetName?: string;
 }
 
 /**
@@ -13,7 +15,7 @@ interface Props {
  * @returns A component that displays the user's balance.
  */
 export default function UserBalance(props: Props) {
-  const { balance } = props;
+  const { balance, faucetUrl, faucetName } = props;
   return (
     <>
       <h2 className="card-title">Available balance</h2>
@@ -27,16 +29,14 @@ export default function UserBalance(props: Props) {
           </span>
         )}
       </p>
-      <p>
-        Get testnet ETH from{" "}
-        <a
-          href="https://portal.cdp.coinbase.com/products/faucet"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Base Sepolia Faucet
-        </a>
-      </p>
+      {faucetUrl && faucetName && (
+        <p>
+          Get testnet ETH from{" "}
+          <a href={faucetUrl} target="_blank" rel="noopener noreferrer">
+            {faucetName}
+          </a>
+        </p>
+      )}
     </>
   );
 }

package/template-nextjs/src/components/theme.ts

@@ -1,6 +1,7 @@
 import { type Theme } from "@coinbase/cdp-react/theme";
 
 export const theme: Partial<Theme> = {
+  "colors-bg-alternate": "var(--cdp-example-page-bg-alt-color)",
   "colors-bg-default": "var(--cdp-example-card-bg-color)",
   "colors-bg-overlay": "var(--cdp-example-bg-overlay-color)",
   "colors-bg-skeleton": "var(--cdp-example-bg-skeleton-color)",

package/template-nextjs/src/lib/cdp-auth.ts

@@ -0,0 +1,48 @@
+import { generateJwt } from "@coinbase/cdp-sdk/auth";
+
+interface CDPAuthConfig {
+  requestMethod: string;
+  requestHost: string;
+  requestPath: string;
+  audience?: string[];
+}
+
+/**
+ * Get CDP API credentials from environment variables
+ *
+ * @throws Error if credentials are not configured
+ */
+export function getCDPCredentials() {
+  const apiKeyId = process.env.CDP_API_KEY_ID;
+  const apiKeySecret = process.env.CDP_API_KEY_SECRET;
+
+  if (!apiKeyId || !apiKeySecret) {
+    throw new Error("CDP API credentials not configured");
+  }
+
+  return { apiKeyId, apiKeySecret };
+}
+
+/**
+ * Generate JWT token for CDP API authentication
+ *
+ * @param config - Configuration for JWT generation
+ * @returns JWT token string
+ */
+export async function generateCDPJWT(config: CDPAuthConfig): Promise<string> {
+  const { apiKeyId, apiKeySecret } = getCDPCredentials();
+
+  return generateJwt({
+    apiKeyId,
+    apiKeySecret,
+    requestMethod: config.requestMethod,
+    requestHost: config.requestHost,
+    requestPath: config.requestPath,
+  });
+}
+
+/**
+ * Base URL for ONRAMP API
+ * Can change to api.cdp.coinbase.com/platform once session token endpoints are supported in v2 API
+ */
+export const ONRAMP_API_BASE_URL = "https://api.developer.coinbase.com";

package/template-nextjs/src/lib/onramp-api.ts

@@ -0,0 +1,66 @@
+import {
+  type unstable_FetchBuyOptions as FetchBuyOptions,
+  type unstable_FetchBuyQuote as FetchBuyQuote,
+} from "@coinbase/cdp-react/components/Fund";
+
+/**
+ * Fetches available buy options for onramp
+ *
+ * @param params - Query parameters for buy options
+ * @returns Buy options including payment currencies and purchasable assets
+ */
+export const getBuyOptions: FetchBuyOptions = async params => {
+  try {
+    const queryParams = new URLSearchParams();
+    queryParams.append("country", params.country);
+    if (params?.subdivision) queryParams.append("subdivision", params.subdivision);
+
+    const queryString = queryParams.toString();
+    const url = `/api/onramp/buy-options${queryString ? `?${queryString}` : ""}`;
+
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || "Failed to fetch buy options");
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("Error fetching buy options:", error);
+    throw error;
+  }
+};
+
+/**
+ * Creates a buy quote for onramp purchase
+ *
+ * @param request - Buy quote request parameters
+ * @returns Buy quote with fees and onramp URL
+ */
+export const createBuyQuote: FetchBuyQuote = async request => {
+  try {
+    const response = await fetch("/api/onramp/buy-quote", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(request),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || "Failed to create buy quote");
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("Error creating buy quote:", error);
+    throw error;
+  }
+};

package/template-nextjs/src/lib/to-camel-case.ts

@@ -0,0 +1,39 @@
+type SnakeToCamelCase<S extends string> = S extends `${infer T}_${infer U}`
+  ? `${T}${Capitalize<SnakeToCamelCase<U>>}`
+  : S;
+
+type CamelizeKeys<T> = T extends readonly unknown[]
+  ? { [K in keyof T]: CamelizeKeys<T[K]> }
+  : T extends object
+    ? {
+        [K in keyof T as SnakeToCamelCase<K & string>]: CamelizeKeys<T[K]>;
+      }
+    : T;
+
+/**
+ * Converts snake_case keys to camelCase in an object or array of objects.
+ *
+ * @param {T} obj - The object, array, or string to convert. (required)
+ * @returns {T} The converted object, array, or string.
+ */
+export const convertSnakeToCamelCase = <T>(obj: T): CamelizeKeys<T> => {
+  if (Array.isArray(obj)) {
+    return obj.map(item => convertSnakeToCamelCase(item)) as CamelizeKeys<T>;
+  }
+
+  if (obj !== null && typeof obj === "object") {
+    return Object.keys(obj).reduce((acc, key) => {
+      const camelCaseKey = toCamelCase(key);
+      (acc as Record<string, unknown>)[camelCaseKey] = convertSnakeToCamelCase(
+        (obj as Record<string, unknown>)[key],
+      );
+      return acc;
+    }, {} as CamelizeKeys<T>);
+  }
+
+  return obj as CamelizeKeys<T>;
+};
+
+const toCamelCase = (str: string) => {
+  return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+};

package/template-react/src/SmartAccountTransaction.tsx

@@ -107,8 +107,9 @@ function SmartAccountTransaction(props: Props) {
                   <p>
                     This example transaction sends a tiny amount of ETH from your wallet to itself.
                   </p>
-                  <p>
-                    Get some from{" "}
+                  <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. Get some from{" "}
                     <a
                       href="https://portal.cdp.coinbase.com/products/faucet"
                       target="_blank"
@@ -117,10 +118,6 @@ function SmartAccountTransaction(props: Props) {
                       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 && (

package/template-react/src/index.css

@@ -1,5 +1,6 @@
 :root {
   --cdp-example-page-bg-color: #eaeaea;
+  --cdp-example-page-bg-alt-color: #eef0f3;
   --cdp-example-bg-overlay-color: rgba(0, 0, 0, 0.25);
   --cdp-example-bg-skeleton-color: rgba(0, 0, 0, 0.1);
   --cdp-example-text-color: #111111;
@@ -30,6 +31,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --cdp-example-page-bg-color: #0a0b0d;
+    --cdp-example-page-bg-alt-color: #333333;
     --cdp-example-bg-overlay-color: rgba(0, 0, 0, 0.25);
     --cdp-example-bg-skeleton-color: rgba(255, 255, 255, 0.1);
     --cdp-example-text-color: #fafafa;
@@ -167,7 +169,7 @@ header .wallet-address {
 }
 
 .main {
-  padding: 0.5rem;
+  padding: 4rem 0.5rem;
   width: 100%;
 }
 
@@ -200,7 +202,7 @@ header .wallet-address {
 
 .smart-badge {
   background-color: rgba(76, 175, 80, 0.15);
-  color: #4CAF50;
+  color: #4caf50;
   border-radius: 12px;
   padding: 0.2rem 0.6rem;
   font-size: 0.7rem;
@@ -220,6 +222,10 @@ header .wallet-address {
   font-size: 0.9rem;
 }
 
+.smart-account-info:last-child {
+  margin-bottom: 0;
+}
+
 .success-message {
   background-color: rgba(76, 175, 80, 0.1);
   border: 1px solid rgba(76, 175, 80, 0.3);
@@ -227,7 +233,7 @@ header .wallet-address {
   padding: 0.75rem;
   margin: 0.5rem 0;
   font-size: 0.9rem;
-  color: var(--cdp-example-success-color, #4CAF50);
+  color: var(--cdp-example-success-color, #4caf50);
 }
 
 .card {
@@ -313,6 +319,24 @@ header .wallet-address {
   min-width: 11.75rem;
 }
 
+.page-heading {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1;
+  margin: 0 0 1.5rem;
+}
+
+.page-divider {
+  width: 60%;
+  margin: 4rem 0;
+}
+
+.small-text {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
 @media (min-width: 540px) {
   .header-inner {
     flex-direction: row;
@@ -332,7 +356,7 @@ header .wallet-address {
   }
 
   .main {
-    padding: 1rem;
+    padding: 4rem 1rem;
   }
 }
 

package/template-react/src/theme.ts

@@ -1,6 +1,7 @@
 import { type Theme } from "@coinbase/cdp-react/theme";
 
 export const theme: Partial<Theme> = {
+  "colors-bg-alternate": "var(--cdp-example-page-bg-alt-color)",
   "colors-bg-default": "var(--cdp-example-card-bg-color)",
   "colors-bg-overlay": "var(--cdp-example-bg-overlay-color)",
   "colors-bg-skeleton": "var(--cdp-example-bg-skeleton-color)",