@coinbase/create-cdp-app 0.0.9 → 0.0.11

package/README.md

@@ -43,9 +43,16 @@ The CLI will guide you through the setup process:
 
 Currently, `create-cdp-app` offers the following template:
 
-- **React Components** (`react-components`): A full-featured React application template that includes:
+- **React** (`react`): A React application template that includes:
   - Vite for fast development and building
   - TypeScript for type safety
   - CDP React components for authentication
   - Example transaction components
   - Base Sepolia integration
+- **Next.js** (`nextjs`): A Next.js application template that includes:
+  - Next.js 15 App Router
+  - CDP React components for authentication and wallet management
+  - Example transaction components for Base Sepolia
+  - Built-in TypeScript support
+  - ESLint with Next.js configuration
+  - Viem for type-safe Ethereum interactions

package/dist/index.js

@@ -2,7 +2,7 @@
 import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { reset, blue, red, green } from "kolorist";
+import { reset, blue, green, red } from "kolorist";
 import prompts from "prompts";
 function prepareProjectDirectory(targetDir, shouldOverwrite) {
   const root = path.join(process.cwd(), targetDir);
@@ -20,11 +20,8 @@ function customizePackageJson(templateDir, projectName) {
 function customizeEnv(templateDir, projectId) {
   const exampleEnvPath = path.join(templateDir, "env.example");
   const exampleEnv = fs.readFileSync(exampleEnvPath, "utf-8");
-  const envContent = exampleEnv.replace(
-    /VITE_CDP_PROJECT_ID=.*(\r?\n|$)/,
-    `VITE_CDP_PROJECT_ID=${projectId}
-`
-  );
+  const envContent = exampleEnv.replace(/(.*PROJECT_ID=).*(\r?\n|$)/, `$1${projectId}
+`);
   return envContent;
 }
 function copyFile(filePath, destPath) {
@@ -58,9 +55,14 @@ function detectPackageManager() {
 }
 const TEMPLATES = [
   {
-    name: "react-components",
-    display: "React Components",
+    name: "react",
+    display: "React",
     color: blue
+  },
+  {
+    name: "nextjs",
+    display: "Next.js",
+    color: green
   }
 ];
 const defaultTargetDir = "cdp-app";

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 project directory\n *\n * @param targetDir - The target directory for the project\n * @param shouldOverwrite - Whether to overwrite the existing directory\n * @returns The path to the prepared project directory\n */\nexport function prepareProjectDirectory(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 project\n *\n * @param templateDir - The directory containing the template files\n * @param projectName - The name of the project\n * @returns The customized package.json content\n */\nexport function customizePackageJson(templateDir: string, projectName: string): string {\n  const packageJsonPath = path.join(templateDir, \"package.json\");\n  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, \"utf-8\"));\n  packageJson.name = projectName;\n  return JSON.stringify(packageJson, null, 2) + \"\\n\";\n}\n\n/**\n * Set up the .env file for the new project\n *\n * @param templateDir - The directory containing the template files\n * @param projectId - The 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  const envContent = exampleEnv.replace(\n    /VITE_CDP_PROJECT_ID=.*(\\r?\\n|$)/,\n    `VITE_CDP_PROJECT_ID=${projectId}\\n`,\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 { blue, red, green, reset } from \"kolorist\";\nimport prompts from \"prompts\";\n\nimport {\n  prepareProjectDirectory,\n  isDirEmpty,\n  customizePackageJson,\n  copyFile,\n  customizeEnv,\n  detectPackageManager,\n} from \"./utils.js\";\n\n// Available templates for project creation\nconst TEMPLATES = [\n  {\n    name: \"react-components\",\n    display: \"React Components\",\n    color: blue,\n  },\n];\n\nconst defaultTargetDir = \"cdp-app\";\n\nconst fileRenames: Record<string, string | undefined> = {\n  _gitignore: \".gitignore\",\n};\n\ninterface ProjectOptions {\n  projectName: 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 project\n */\nasync function init(): Promise<void> {\n  const { projectName, template, targetDirectory, projectId } = await getProjectDetails();\n\n  console.log(`\\nScaffolding project in ${targetDirectory}...`);\n\n  const root = prepareProjectDirectory(targetDirectory, false);\n  const templateDir = path.resolve(fileURLToPath(import.meta.url), \"../..\", `template-${template}`);\n\n  copyTemplateFiles(templateDir, root, projectName, projectId);\n  printNextSteps(root);\n}\n\n/**\n * Get project details from command line arguments or prompt the user\n *\n * @returns The project details\n */\nasync function getProjectDetails(): Promise<ProjectOptions> {\n  // Get target directory from command line args (first non-option argument)\n  let targetDir = process.argv[2];\n  const defaultProjectName = targetDir ?? defaultTargetDir;\n\n  try {\n    const result = await prompts(\n      [\n        {\n          type: targetDir ? null : \"text\",\n          name: \"projectName\",\n          message: reset(\"Project name:\"),\n          initial: defaultProjectName,\n          onState: state => {\n            targetDir = String(state.value).trim() || defaultProjectName;\n          },\n        },\n        {\n          type: \"select\",\n          name: \"template\",\n          message: reset(\"Select a 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 || !uuidRegex.test(value)) {\n              return \"Project ID is required\";\n            }\n            return true;\n          },\n          initial: \"\",\n        },\n        {\n          type: \"text\",\n          name: \"corsConfirmation\",\n          message: reset(\n            \"Confirm you have whitelisted 'http://localhost:3000' at https://portal.cdp.coinbase.com/products/embedded-wallets/cors by typing 'y'\",\n          ),\n          validate: value => {\n            if (value !== \"y\") {\n              return \"You must whitelist your app domain for your app to be functional.\";\n            }\n            return true;\n          },\n          initial: \"\",\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      projectName: result.projectName,\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 projectRoot - The root directory of the project\n */\nfunction printNextSteps(projectRoot: string): void {\n  const packageManager = detectPackageManager();\n\n  console.log(green(\"\\nDone. Now run your app:\\n\"));\n  if (projectRoot !== process.cwd()) {\n    console.log(`cd ${path.relative(process.cwd(), projectRoot)}`);\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 project directory\n *\n * @param templateDir - The directory containing the template files\n * @param root - The root directory of the project\n * @param projectName - The name of the project\n * @param projectId - The project ID\n */\nfunction copyTemplateFiles(\n  templateDir: string,\n  root: string,\n  projectName: 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, projectName);\n      writeFileToTarget(file, customizedPackageJson);\n    } else if (file === \"env.example\" && projectId) {\n      const customizedEnv = customizeEnv(templateDir, projectId);\n      writeFileToTarget(file);\n      console.log(\"Copying 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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"}
+{"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 project directory\n *\n * @param targetDir - The target directory for the project\n * @param shouldOverwrite - Whether to overwrite the existing directory\n * @returns The path to the prepared project directory\n */\nexport function prepareProjectDirectory(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 project\n *\n * @param templateDir - The directory containing the template files\n * @param projectName - The name of the project\n * @returns The customized package.json content\n */\nexport function customizePackageJson(templateDir: string, projectName: string): string {\n  const packageJsonPath = path.join(templateDir, \"package.json\");\n  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, \"utf-8\"));\n  packageJson.name = projectName;\n  return JSON.stringify(packageJson, null, 2) + \"\\n\";\n}\n\n/**\n * Set up the .env file for the new project\n *\n * @param templateDir - The directory containing the template files\n * @param projectId - The 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 { blue, red, green, reset } from \"kolorist\";\nimport prompts from \"prompts\";\n\nimport {\n  prepareProjectDirectory,\n  isDirEmpty,\n  customizePackageJson,\n  copyFile,\n  customizeEnv,\n  detectPackageManager,\n} from \"./utils.js\";\n\n// Available templates for project creation\nconst TEMPLATES = [\n  {\n    name: \"react\",\n    display: \"React\",\n    color: blue,\n  },\n  {\n    name: \"nextjs\",\n    display: \"Next.js\",\n    color: green,\n  },\n];\n\nconst defaultTargetDir = \"cdp-app\";\n\nconst fileRenames: Record<string, string | undefined> = {\n  _gitignore: \".gitignore\",\n};\n\ninterface ProjectOptions {\n  projectName: 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 project\n */\nasync function init(): Promise<void> {\n  const { projectName, template, targetDirectory, projectId } = await getProjectDetails();\n\n  console.log(`\\nScaffolding project in ${targetDirectory}...`);\n\n  const root = prepareProjectDirectory(targetDirectory, false);\n  const templateDir = path.resolve(fileURLToPath(import.meta.url), \"../..\", `template-${template}`);\n\n  copyTemplateFiles(templateDir, root, projectName, projectId);\n  printNextSteps(root);\n}\n\n/**\n * Get project details from command line arguments or prompt the user\n *\n * @returns The project details\n */\nasync function getProjectDetails(): Promise<ProjectOptions> {\n  // Get target directory from command line args (first non-option argument)\n  let targetDir = process.argv[2];\n  const defaultProjectName = targetDir ?? defaultTargetDir;\n\n  try {\n    const result = await prompts(\n      [\n        {\n          type: targetDir ? null : \"text\",\n          name: \"projectName\",\n          message: reset(\"Project name:\"),\n          initial: defaultProjectName,\n          onState: state => {\n            targetDir = String(state.value).trim() || defaultProjectName;\n          },\n        },\n        {\n          type: \"select\",\n          name: \"template\",\n          message: reset(\"Select a 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 || !uuidRegex.test(value)) {\n              return \"Project ID is required\";\n            }\n            return true;\n          },\n          initial: \"\",\n        },\n        {\n          type: \"text\",\n          name: \"corsConfirmation\",\n          message: reset(\n            \"Confirm you have whitelisted 'http://localhost:3000' at https://portal.cdp.coinbase.com/products/embedded-wallets/cors by typing 'y'\",\n          ),\n          validate: value => {\n            if (value !== \"y\") {\n              return \"You must whitelist your app domain for your app to be functional.\";\n            }\n            return true;\n          },\n          initial: \"\",\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      projectName: result.projectName,\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 projectRoot - The root directory of the project\n */\nfunction printNextSteps(projectRoot: string): void {\n  const packageManager = detectPackageManager();\n\n  console.log(green(\"\\nDone. Now run your app:\\n\"));\n  if (projectRoot !== process.cwd()) {\n    console.log(`cd ${path.relative(process.cwd(), projectRoot)}`);\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 project directory\n *\n * @param templateDir - The directory containing the template files\n * @param root - The root directory of the project\n * @param projectName - The name of the project\n * @param projectId - The project ID\n */\nfunction copyTemplateFiles(\n  templateDir: string,\n  root: string,\n  projectName: 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, projectName);\n      writeFileToTarget(file, customizedPackageJson);\n    } else if (file === \"env.example\" && projectId) {\n      const customizedEnv = customizeEnv(templateDir, projectId);\n      writeFileToTarget(file);\n      console.log(\"Copying 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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"}

package/package.json

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

package/template-nextjs/README.md

@@ -0,0 +1,85 @@
+# CDP React App
+
+This project was generated with [`@coinbase/create-cdp-app`](https://coinbase.github.io/cdp-web/modules/_coinbase_create-cdp-app.html) using the Next.js template.
+
+## Project Structure
+
+```
+src/
+├── app/                  # Next.js App Router directory
+│   ├── 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
+    ├── ClientApp.tsx    # Client-side application wrapper
+    ├── Header.tsx       # Navigation header with authentication status
+    ├── Icons.tsx        # Reusable icon components
+    ├── Loading.tsx      # Loading state component
+    ├── Providers.tsx    # CDP and theme providers setup
+    ├── 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
+    └── UserBalance.tsx  # Component to display user's wallet balance
+```
+
+## Getting Started
+
+First, make sure you have your CDP Project ID:
+
+1. Sign in or create an account on the [CDP Portal](https://portal.cdp.coinbase.com)
+2. Copy your Project ID from the dashboard
+3. Go to the [Embedded Wallets CORS settings](https://portal.cdp.coinbase.com/products/embedded-wallets/cors)
+4. Click add origin and whitelist `http://localhost:3000` (or wherever your app will run)
+
+Then, copy the `env.example` file to `.env`, and populate the `NEXT_PUBLIC_CDP_PROJECT_ID` with your project id.
+
+Now you can start the development server:
+
+Using npm:
+```bash
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```
+
+Using yarn:
+```bash
+# Install dependencies
+yarn
+
+# Start the development server
+yarn dev
+```
+
+Using pnpm:
+```bash
+# Install dependencies
+pnpm install
+
+# Start the development server
+pnpm dev
+```
+
+Visit [http://localhost:3000](http://localhost:3000) to see your app.
+
+## Features
+
+This template comes with:
+- Next.js 15 App Router
+- CDP React components for authentication and wallet management
+- Example transaction components for Base Sepolia
+- Built-in TypeScript support
+- ESLint with Next.js configuration
+- Viem for type-safe Ethereum interactions
+
+## Learn More
+
+- [CDP Documentation](https://docs.cloud.coinbase.com/cdp/docs)
+- [CDP React Documentation](https://docs.cloud.coinbase.com/cdp/docs/react-components)
+- [CDP Portal](https://portal.cdp.coinbase.com)
+- [Vite Documentation](https://vitejs.dev)

package/template-nextjs/_gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# env files
+.env
+.env.*

package/template-nextjs/env.example

@@ -0,0 +1,3 @@
+# CDP Configuration
+NEXT_PUBLIC_CDP_PROJECT_ID=example-id
+

package/template-nextjs/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

package/template-nextjs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/template-nextjs/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package/template-nextjs/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "cdp-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "15.4.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@coinbase/cdp-react": "latest",
+    "@coinbase/cdp-hooks": "latest",
+    "@coinbase/cdp-core": "latest",
+    "viem": "^2.8.6"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "eslint": "^9.31.0",
+    "eslint-config-next": "15.4.3",
+    "typescript": "~5.8.3"
+  }
+}

package/template-nextjs/public/logo.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+  <circle cx="64" cy="64" r="64" fill="#008080" />
+  <path fill="#FFF"
+    d="M78.91 76.225q.7 0 1.25.54l3.39 3.68q-2.82 3.49-6.93 5.35-4.11 1.85-9.87 1.85-5.15 0-9.26-1.76-4.12-1.76-7.03-4.89-2.91-3.14-4.46-7.49t-1.55-9.51q0-5.21 1.66-9.55 1.66-4.33 4.69-7.47 3.02-3.14 7.21-4.88 4.2-1.74 9.28-1.74 5.06 0 8.98 1.66t6.67 4.35l-2.88 4q-.25.39-.65.67-.4.29-1.11.29-.48 0-.99-.27t-1.12-.67-1.41-.88-1.85-.88q-1.06-.4-2.45-.67-1.39-.28-3.22-.28-3.1 0-5.68 1.11-2.57 1.1-4.43 3.2-1.86 2.09-2.88 5.12-1.02 3.02-1.02 6.89 0 3.91 1.1 6.95t2.99 5.12 4.45 3.18q2.56 1.11 5.5 1.11 1.76 0 3.19-.2 1.42-.19 2.62-.6 1.2-.42 2.27-1.08 1.08-.65 2.13-1.61.32-.29.67-.47.36-.17.74-.17" />
+</svg>

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

@@ -0,0 +1,306 @@
+:root {
+  --cdp-example-page-bg-color: #eaeaea;
+  --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;
+  --cdp-example-text-secondary-color: #757575;
+  --cdp-example-accent-color: #0052ff;
+  --cdp-example-accent-hover-color: #0044d6;
+  --cdp-example-accent-foreground-color: #ffffff;
+  --cdp-example-bg-low-contrast-color: #eeeeee;
+  --cdp-example-card-bg-color: #ffffff;
+  --cdp-example-card-border-color: #dcdcdc;
+  --cdp-example-card-max-width: 30rem;
+  --cdp-example-base-font-size: 16px;
+  --cdp-example-font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+
+  background-color: var(--cdp-example-page-bg-color);
+  color: var(--cdp-example-card-border-color);
+  color-scheme: light dark;
+  font-family: var(--cdp-example-font-family);
+  font-size: var(--cdp-example-base-font-size);
+  font-synthesis: none;
+  font-weight: 400;
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --cdp-example-page-bg-color: #0a0b0d;
+    --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;
+    --cdp-example-text-secondary-color: #8a919e;
+    --cdp-example-accent-color: #578bfa;
+    --cdp-example-accent-hover-color: #3e79f9;
+    --cdp-example-accent-foreground-color: #0a0b0d;
+    --cdp-example-bg-low-contrast-color: #32353d;
+    --cdp-example-card-bg-color: #141519;
+    --cdp-example-card-border-color: #24262a;
+  }
+}
+
+::selection {
+  background-color: color(from var(--cdp-example-accent-color) srgb r g b / 0.3);
+}
+
+html,
+html * {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  min-width: 320px;
+}
+
+body,
+#root,
+#root > div,
+.flex-col-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  place-items: center;
+}
+
+.flex-row-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.sr-only {
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+p {
+  margin: 0;
+}
+
+a {
+  color: var(--cdp-example-accent-color);
+}
+
+a:hover {
+  color: var(--cdp-example-accent-hover-color);
+}
+
+hr {
+  border: 0 solid var(--cdp-example-card-border-color);
+  border-bottom-width: 1px;
+  margin: 1rem 0;
+}
+
+.app {
+  height: 100vh;
+  color: var(--cdp-example-text-color);
+  margin: 0 auto;
+  width: 100%;
+}
+
+header {
+  color: var(--cdp-example-text-color);
+  background-color: var(--cdp-example-card-bg-color);
+  border-bottom: 1px solid var(--cdp-web-colors-border);
+  padding: 0.5rem 1rem;
+  width: 100%;
+}
+
+header .wallet-address {
+  margin-right: 1rem;
+}
+
+.header-inner {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 75rem;
+  text-align: center;
+}
+
+.user-info {
+  justify-content: space-between;
+  width: 100%;
+}
+
+.user-icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 1.25rem;
+  margin-right: 0.25rem;
+  width: auto;
+}
+
+.wallet-address {
+  font-family: monospace;
+  font-size: 0.875rem;
+  word-break: break-all;
+}
+
+.main {
+  padding: 0.5rem;
+  width: 100%;
+}
+
+.main-inner {
+  gap: 1rem;
+  width: 100%;
+}
+
+.main-inner > .card {
+  width: 100%;
+}
+
+.site-title {
+  font-size: 1.2rem;
+  font-weight: 400;
+  line-height: 1.2;
+  margin: 0;
+  margin-bottom: 0.5rem;
+}
+
+.site-title br {
+  display: none;
+}
+
+.card {
+  align-items: center;
+  background-color: var(--cdp-example-card-bg-color);
+  border: 1px solid var(--cdp-web-colors-border);
+  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: space-between;
+  max-width: var(--cdp-example-card-max-width);
+  padding: 2rem 1rem;
+  text-align: center;
+  width: 100%;
+}
+
+.card-title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.loading--balance {
+  border-radius: 9999em;
+  display: inline-block;
+  height: 2.25rem;
+  width: 7rem;
+}
+
+.loading--text {
+  height: 1rem;
+  border-radius: 9999em;
+  margin: 0.25rem 0;
+  width: 20rem;
+}
+
+.loading--btn {
+  border-radius: 9999em;
+  height: 3.5rem;
+  width: 9.375rem;
+}
+
+.user-balance {
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+
+.user-balance .flex-row-container {
+  justify-content: center;
+}
+
+.balance-icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 1.5rem;
+  margin-right: 0.5rem;
+  width: auto;
+}
+
+.copy-address-button {
+  background-color: transparent;
+  border: 0;
+  color: var(--cdp-example-text-color);
+  cursor: pointer;
+  padding: 0;
+}
+
+.copy-address-button:hover .user-icon--user,
+.copy-address-button .user-icon--copy {
+  display: none;
+}
+
+.copy-address-button .user-icon--user,
+.copy-address-button:hover .user-icon--copy {
+  display: inline;
+}
+
+.tx-button {
+  padding-left: 2rem;
+  padding-right: 2rem;
+  min-width: 11.75rem;
+}
+
+@media (min-width: 540px) {
+  .header-inner {
+    flex-direction: row;
+    text-align: left;
+  }
+
+  .user-info {
+    width: auto;
+  }
+
+  .site-title {
+    margin-bottom: 0;
+  }
+
+  .site-title br {
+    display: inline;
+  }
+
+  .main {
+    padding: 1rem;
+  }
+}
+
+@media (min-width: 860px) {
+  :root {
+    --cdp-example-card-max-width: 35rem;
+  }
+
+  .main-inner {
+    align-items: stretch;
+    flex-direction: row;
+  }
+}
+
+@media (min-width: 1920px) {
+  :root {
+    --cdp-base-font-size: 20px;
+  }
+}

package/template-nextjs/src/app/icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+  <circle cx="64" cy="64" r="64" fill="#008080" />
+  <path fill="#FFF"
+    d="M78.91 76.225q.7 0 1.25.54l3.39 3.68q-2.82 3.49-6.93 5.35-4.11 1.85-9.87 1.85-5.15 0-9.26-1.76-4.12-1.76-7.03-4.89-2.91-3.14-4.46-7.49t-1.55-9.51q0-5.21 1.66-9.55 1.66-4.33 4.69-7.47 3.02-3.14 7.21-4.88 4.2-1.74 9.28-1.74 5.06 0 8.98 1.66t6.67 4.35l-2.88 4q-.25.39-.65.67-.4.29-1.11.29-.48 0-.99-.27t-1.12-.67-1.41-.88-1.85-.88q-1.06-.4-2.45-.67-1.39-.28-3.22-.28-3.1 0-5.68 1.11-2.57 1.1-4.43 3.2-1.86 2.09-2.88 5.12-1.02 3.02-1.02 6.89 0 3.91 1.1 6.95t2.99 5.12 4.45 3.18q2.56 1.11 5.5 1.11 1.76 0 3.19-.2 1.42-.19 2.62-.6 1.2-.42 2.27-1.08 1.08-.65 2.13-1.61.32-.29.67-.47.36-.17.74-.17" />
+</svg>

package/template-nextjs/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "CDP Embedded Wallet Demo",
+  description: "A demo of the CDP Embedded Wallet",
+};
+
+/**
+ * Root layout for the Next.js app
+ *
+ * @param props - { object } - The props for the RootLayout component
+ * @param props.children - { React.ReactNode } - The children to wrap
+ * @returns The wrapped children
+ */
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}