@coinbase/create-cdp-app 0.0.36 → 0.0.37

package/README.md

@@ -34,14 +34,16 @@ yarn create @coinbase/cdp-app@latest
 
 The CLI will guide you through the setup process:
 1. Enter your project name (defaults to "cdp-app")
-2. Select a template (currently supports "React Components")
+2. Select a template (React, Next.js, or React Native)
 3. Enter your CDP Project ID
-4. Confirm you have whitelisted your app domain on the CDP Portal
-5. Confirm directory overwrite if needed
+4. Select account type (EVM EOA, EVM Smart Accounts, or Solana)
+5. Configure Onramp (Next.js only)
+6. Confirm you have whitelisted your app domain on the CDP Portal
+7. Confirm directory overwrite if needed
 
 ## Available Templates
 
-Currently, `create-cdp-app` offers the following template:
+Currently, `create-cdp-app` offers the following templates:
 
 - **React** (`react`): A React application template that includes:
   - Vite for fast development and building
@@ -56,6 +58,12 @@ Currently, `create-cdp-app` offers the following template:
   - Built-in TypeScript support
   - ESLint with Next.js configuration
   - Viem for type-safe Ethereum interactions
+- **React Native** (`react-native`): A React Native with Expo template that includes:
+  - Expo SDK for cross-platform mobile development
+  - CDP React Native components for authentication
+  - Example transaction components
+  - TypeScript support
+  - Support for both iOS and Android
 
 ## Command-Line Arguments
 
@@ -66,14 +74,19 @@ You can also pass command-line arguments to pre-configure the setup process.
 | `<directory>` | Optional. The name of the directory to create the project in. Defaults to `cdp-app`. |
 | `--template <name>` | Specifies the project template to use. Options: `react`, `nextjs`, `react-native`. |
 | `--project-id <id>` | Your CDP Project ID from the portal. |
-| `--smart-accounts` | Enables Smart Accounts for the project. |
-| `--no-smart-accounts` | Disables Smart Accounts for the project. |
+| `--account-type <type>` | Specifies the account type to configure. Options: `evm-eoa` (default), `evm-smart`, `solana`. |
 | `--onramp` | Enables Coinbase Onramp. <br>**Note:** This is only compatible with the `nextjs` template. If no template is specified, `nextjs` will be used automatically. If an incompatible template (e.g., `react`) is specified, this flag will be ignored and Onramp will be disabled. |
 | `--no-onramp` | Disables Coinbase Onramp. |
 
-### Example
+### Examples
 
 ```bash
-# Create a Next.js app with a specific Project ID and Smart Accounts + Onramp enabled
-npm create @coinbase/cdp-app@latest my-next-app --template nextjs --project-id YOUR_PROJECT_ID --smart-accounts --onramp
+# Create a Next.js app with EVM Smart Accounts and Onramp enabled
+npm create @coinbase/cdp-app@latest my-next-app --template nextjs --project-id YOUR_PROJECT_ID --account-type evm-smart --onramp
+
+# Create a React app with Solana support
+npm create @coinbase/cdp-app@latest my-solana-app --template react --project-id YOUR_PROJECT_ID --account-type solana
+
+# Create a React Native app with regular EVM accounts (default)
+npm create @coinbase/cdp-app@latest my-mobile-app --template react-native --project-id YOUR_PROJECT_ID --account-type evm-eoa
 ```

package/dist/index.js

@@ -25,7 +25,7 @@ function customizePackageJson(templateDir, appName, includeSdk) {
 function customizeEnv({
   templateDir,
   projectId,
-  useSmartAccounts,
+  accountType,
   apiKeyId,
   apiKeySecret
 }) {
@@ -33,7 +33,6 @@ function customizeEnv({
   const exampleEnv = fs.readFileSync(exampleEnvPath, "utf-8");
   let envContent = exampleEnv.replace(/(.*PROJECT_ID=).*(\r?\n|$)/, `$1${projectId}
 `);
-  const accountType = useSmartAccounts ? "smart" : "eoa";
   let prefix;
   if (templateDir.includes("nextjs")) {
     prefix = "NEXT_PUBLIC_";
@@ -42,12 +41,32 @@ function customizeEnv({
   } else {
     prefix = "VITE_";
   }
-  envContent = envContent.replace(
-    new RegExp(`(${prefix}CDP_CREATE_ETHEREUM_ACCOUNT_TYPE=).*(\r?
+  if (accountType === "solana") {
+    envContent = envContent.replace(
+      new RegExp(`${prefix}CDP_CREATE_ETHEREUM_ACCOUNT_TYPE=.*(\r?
+|$)`, "g"),
+      ""
+    );
+    envContent = envContent.replace(
+      new RegExp(`(${prefix}CDP_CREATE_SOLANA_ACCOUNT=).*(\r?
 |$)`),
-    `$1${accountType}
+      `$1true
 `
-  );
+    );
+  } else {
+    const ethereumType = accountType === "evm-smart" ? "smart" : "eoa";
+    envContent = envContent.replace(
+      new RegExp(`(${prefix}CDP_CREATE_ETHEREUM_ACCOUNT_TYPE=).*(\r?
+|$)`),
+      `$1${ethereumType}
+`
+    );
+    envContent = envContent.replace(
+      new RegExp(`${prefix}CDP_CREATE_SOLANA_ACCOUNT=.*(\r?
+|$)`, "g"),
+      ""
+    );
+  }
   if (apiKeyId && apiKeySecret) {
     envContent = envContent.replace(/# CDP_API_KEY_ID=.*/, `CDP_API_KEY_ID=${apiKeyId}`);
     envContent = envContent.replace(
@@ -57,50 +76,103 @@ function customizeEnv({
   }
   return envContent;
 }
-function customizeConfig(templateDir, useSmartAccounts, isNextjs) {
-  if (!useSmartAccounts) return null;
+function customizeConfig(templateDir, accountType, isNextjs) {
+  if (accountType === "evm-eoa") return null;
   const configFileName = isNextjs ? "src/components/Providers.tsx" : "src/config.ts";
   const configPath = path.join(templateDir, configFileName);
   if (!fs.existsSync(configPath)) return null;
   let configContent = fs.readFileSync(configPath, "utf-8");
   if (isNextjs) {
+    const ethereumConfig = accountType !== "solana" ? `
+  ethereum: {
+    createOnLogin: process.env.NEXT_PUBLIC_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart" ? "smart" : "eoa",
+  },` : "";
+    const solanaConfig = accountType === "solana" ? `
+  solana: {
+    createOnLogin: process.env.NEXT_PUBLIC_CDP_CREATE_SOLANA_ACCOUNT === "true" ? true : false,
+  },` : "";
     configContent = configContent.replace(
       /const CDP_CONFIG: Config = \{[\s\S]*?\};/,
       `const CDP_CONFIG: Config = {
-  projectId: process.env.NEXT_PUBLIC_CDP_PROJECT_ID ?? "",
-  ethereum: {
-    createOnLogin: process.env.NEXT_PUBLIC_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart" ? "smart" : "eoa",
-  },
+  projectId: process.env.NEXT_PUBLIC_CDP_PROJECT_ID ?? "",${ethereumConfig}${solanaConfig}
+  appName: "CDP Next.js StarterKit",
+  appLogoUrl: "http://localhost:3000/logo.svg",
+  authMethods: ["email", "sms"],
 };`
     );
   } else {
+    const ethereumConfig = accountType !== "solana" ? `
+  ethereum: {
+    createOnLogin: import.meta.env.VITE_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart" ? "smart" : "eoa",
+  },` : "";
+    const solanaConfig = accountType === "solana" ? `
+  solana: {
+    createOnLogin: import.meta.env.VITE_CDP_CREATE_SOLANA_ACCOUNT === "true" ? true : false,
+  },` : "";
     configContent = configContent.replace(
       /export const CDP_CONFIG: Config = \{[\s\S]*?\};/,
       `export const CDP_CONFIG: Config = {
-  projectId: import.meta.env.VITE_CDP_PROJECT_ID,
-  ethereum: {
-    createOnLogin: import.meta.env.VITE_CDP_CREATE_ETHEREUM_ACCOUNT_TYPE === "smart" ? "smart" : "eoa",
-  },
+  projectId: import.meta.env.VITE_CDP_PROJECT_ID,${ethereumConfig}${solanaConfig}
+  appName: "CDP React StarterKit",
+  appLogoUrl: "http://localhost:3000/logo.svg",
+  authMethods: ["email", "sms"],
 };`
     );
   }
   return configContent;
 }
+function customizeSignedInScreen(templateDir, accountType, isNextjs, fileName = "SignedInScreen.tsx") {
+  const signedInScreenPath = isNextjs ? path.join(templateDir, `src/components/${fileName}`) : path.join(templateDir, `src/${fileName}`);
+  let content = fs.readFileSync(signedInScreenPath, "utf-8");
+  let componentPath;
+  if (fileName === "SignedInScreenWithOnramp.tsx") {
+    if (accountType === "evm-smart") {
+      componentPath = "@/components/SmartAccountTransaction";
+    } else {
+      componentPath = "@/components/EOATransaction";
+    }
+  } else {
+    if (accountType === "solana") {
+      componentPath = isNextjs ? "@/components/SolanaTransaction" : "./SolanaTransaction";
+    } else if (accountType === "evm-smart") {
+      componentPath = isNextjs ? "@/components/SmartAccountTransaction" : "./SmartAccountTransaction";
+    } else {
+      componentPath = isNextjs ? "@/components/EOATransaction" : "./EOATransaction";
+    }
+  }
+  const componentImport = `const TransactionComponent = lazy(() => import("${componentPath}"));`;
+  if (isNextjs) {
+    content = content.replace(
+      /\/\/ Dynamically (import components based on configuration|determine component path \(Onramp only supports EVM\))[\s\S]*?const TransactionComponent = lazy\(\(\) => (\{[\s\S]*?\}|import\(\/\* @vite-ignore \*\/ getComponentPath\(\)\))\);/,
+      componentImport
+    );
+  } else {
+    content = content.replace(
+      /\/\/ Dynamically determine component path to avoid Vite static analysis[\s\S]*?const TransactionComponent = lazy\(\(\) => import\(\/\* @vite-ignore \*\/ getComponentPath\(\)\)\);/,
+      componentImport
+    );
+  }
+  return content;
+}
 function copyFileSelectively({
   filePath,
   destPath,
-  useSmartAccounts,
+  accountType,
   enableOnramp
 }) {
   const stat = fs.statSync(filePath);
   if (stat.isDirectory()) {
     const baseDir = path.basename(filePath);
     if (!enableOnramp && (baseDir === "api" || baseDir === "lib")) return;
-    copyDirSelectively({ srcDir: filePath, destDir: destPath, useSmartAccounts, enableOnramp });
+    copyDirSelectively({ srcDir: filePath, destDir: destPath, accountType, enableOnramp });
   } else {
     const fileName = path.basename(filePath);
-    if (useSmartAccounts && fileName === "EOATransaction.tsx") return;
-    if (!useSmartAccounts && fileName === "SmartAccountTransaction.tsx") return;
+    if (accountType === "evm-smart" && fileName === "EOATransaction.tsx") return;
+    if (accountType === "evm-smart" && fileName === "SolanaTransaction.tsx") return;
+    if (accountType === "evm-eoa" && fileName === "SmartAccountTransaction.tsx") return;
+    if (accountType === "evm-eoa" && fileName === "SolanaTransaction.tsx") return;
+    if (accountType === "solana" && fileName === "EOATransaction.tsx") return;
+    if (accountType === "solana" && fileName === "SmartAccountTransaction.tsx") return;
     if (!enableOnramp && ["FundWallet.tsx", "SignedInScreenWithOnramp.tsx"].includes(fileName))
       return;
     if (enableOnramp) {
@@ -117,14 +189,14 @@ function copyFileSelectively({
 function copyDirSelectively({
   srcDir,
   destDir,
-  useSmartAccounts,
+  accountType,
   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({ filePath: srcFile, destPath: destFile, useSmartAccounts, enableOnramp });
+    copyFileSelectively({ filePath: srcFile, destPath: destFile, accountType, enableOnramp });
   }
 }
 function isDirEmpty(dirPath) {
@@ -219,6 +291,23 @@ const TEMPLATES = [
   }
 ];
 const TEMPLATE_NAMES = TEMPLATES.map((template) => template.name);
+const ACCOUNT_TYPES = [
+  {
+    value: "evm-eoa",
+    title: "EVM EOA (Regular Accounts)",
+    description: "Traditional Ethereum-compatible accounts"
+  },
+  {
+    value: "evm-smart",
+    title: "EVM Smart Accounts",
+    description: "Account abstraction with gasless transactions and improved UX"
+  },
+  {
+    value: "solana",
+    title: "Solana Accounts",
+    description: "Native Solana blockchain accounts"
+  }
+];
 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 getAppDetails() {
   const argv = minimist(process.argv.slice(2));
@@ -227,7 +316,7 @@ async function getAppDetails() {
   let templateFromArgs = void 0;
   let projectIdFromArgs = void 0;
   let enableOnrampFromArgs = void 0;
-  const useSmartAccountsFromArgs = argv["smart-accounts"];
+  let accountTypeFromArgs = void 0;
   if (argv.template) {
     if (!TEMPLATE_NAMES.includes(argv.template)) {
       console.log(
@@ -248,6 +337,18 @@ async function getAppDetails() {
       projectIdFromArgs = argv["project-id"];
     }
   }
+  if (argv["account-type"]) {
+    const validAccountTypes = ACCOUNT_TYPES.map((type) => type.value);
+    if (!validAccountTypes.includes(argv["account-type"])) {
+      console.log(
+        yellow(
+          `✖ Invalid account type provided: "${argv["account-type"]}". Please choose from: ${validAccountTypes.join(", ")}.`
+        )
+      );
+    } else {
+      accountTypeFromArgs = argv["account-type"];
+    }
+  }
   if (argv["onramp"] !== void 0) {
     if (!argv["onramp"]) {
       enableOnrampFromArgs = false;
@@ -301,15 +402,18 @@ async function getAppDetails() {
           initial: ""
         },
         {
-          type: useSmartAccountsFromArgs !== void 0 ? null : "confirm",
-          name: "useSmartAccounts",
-          message: reset(
-            "Enable Smart Accounts? (Smart Accounts enable gasless transactions and improved UX):"
-          ),
-          initial: false
+          type: accountTypeFromArgs ? null : "select",
+          name: "accountType",
+          message: reset("Account Type:"),
+          initial: 0,
+          choices: ACCOUNT_TYPES.map((accountType) => ({
+            title: accountType.title,
+            description: accountType.description,
+            value: accountType.value
+          }))
         },
         {
-          type: (_, { template }) => enableOnrampFromArgs !== void 0 || (templateFromArgs || template) !== "nextjs" ? null : "confirm",
+          type: (_, { template, accountType }) => enableOnrampFromArgs !== void 0 || (templateFromArgs || template) !== "nextjs" || (accountTypeFromArgs || accountType) === "solana" ? null : "confirm",
           name: "enableOnramp",
           message: reset("Enable Coinbase Onramp? (Onramp enables users to buy crypto with fiat):"),
           initial: false
@@ -370,7 +474,7 @@ async function getAppDetails() {
       template: templateFromArgs || result.template,
       targetDirectory: targetDir,
       projectId: projectIdFromArgs || result.projectId,
-      useSmartAccounts: useSmartAccountsFromArgs ?? result.useSmartAccounts,
+      accountType: accountTypeFromArgs || result.accountType,
       enableOnramp: enableOnrampFromArgs ?? result.enableOnramp ?? false,
       apiKeyId: result.apiKeyId,
       apiKeySecret: result.apiKeySecret
@@ -391,7 +495,7 @@ async function init() {
     template,
     targetDirectory,
     projectId,
-    useSmartAccounts,
+    accountType,
     enableOnramp,
     apiKeyId,
     apiKeySecret
@@ -405,7 +509,7 @@ Scaffolding app in ${targetDirectory}...`);
     root,
     appName,
     projectId,
-    useSmartAccounts,
+    accountType,
     enableOnramp,
     apiKeyId,
     apiKeySecret
@@ -432,7 +536,7 @@ function copyTemplateFiles({
   root,
   appName,
   projectId,
-  useSmartAccounts,
+  accountType,
   enableOnramp,
   apiKeyId,
   apiKeySecret
@@ -445,7 +549,7 @@ function copyTemplateFiles({
       copyFileSelectively({
         filePath: path.join(templateDir, file),
         destPath: targetPath,
-        useSmartAccounts,
+        accountType,
         enableOnramp
       });
     }
@@ -463,7 +567,7 @@ function copyTemplateFiles({
       const customizedEnv = customizeEnv({
         templateDir,
         projectId,
-        useSmartAccounts,
+        accountType,
         apiKeyId,
         apiKeySecret
       });
@@ -471,8 +575,10 @@ function copyTemplateFiles({
       if (apiKeyId && apiKeySecret) {
         console.log("Copying CDP API credentials to .env");
       }
-      if (useSmartAccounts) {
+      if (accountType === "evm-smart") {
         console.log("Configuring Smart Accounts in environment");
+      } else if (accountType === "solana") {
+        console.log("Configuring Solana accounts in environment");
       }
       writeFileToTarget(".env", customizedEnv);
     } else if (file === "app.json" && isReactNative && (reactNativeCustomizations == null ? void 0 : reactNativeCustomizations.appJson)) {
@@ -481,21 +587,35 @@ function copyTemplateFiles({
       writeFileToTarget(file);
     }
   }
-  if (useSmartAccounts && !isReactNative) {
+  if (accountType !== "evm-eoa" && !isReactNative) {
     const configFileName = isNextjs ? "src/components/Providers.tsx" : "src/config.ts";
-    const customizedConfig = customizeConfig(templateDir, useSmartAccounts, isNextjs);
+    const customizedConfig = customizeConfig(templateDir, accountType, isNextjs);
     if (customizedConfig) {
-      console.log("Configuring Smart Accounts in application config");
+      if (accountType === "evm-smart") {
+        console.log("Configuring Smart Accounts in application config");
+      } else if (accountType === "solana") {
+        console.log("Configuring Solana accounts in application config");
+      }
       writeFileToTarget(configFileName, customizedConfig);
     }
   }
   if (isReactNative) {
-    const transactionContent = generateTransactionComponent(useSmartAccounts);
+    const transactionContent = generateTransactionComponent(accountType);
     writeFileToTarget("Transaction.tsx", transactionContent);
   } else {
-    const transactionFileName = isNextjs ? "src/components/Transaction.tsx" : "src/Transaction.tsx";
-    const transactionContent = generateTransactionComponent(useSmartAccounts);
-    writeFileToTarget(transactionFileName, transactionContent);
+    const signedInScreenFileName = isNextjs ? "src/components/SignedInScreen.tsx" : "src/SignedInScreen.tsx";
+    const customizedSignedInScreen = customizeSignedInScreen(templateDir, accountType, isNextjs);
+    writeFileToTarget(signedInScreenFileName, customizedSignedInScreen);
+    if (isNextjs) {
+      const onrampFileName = "src/components/SignedInScreenWithOnramp.tsx";
+      const customizedOnrampScreen = customizeSignedInScreen(
+        templateDir,
+        accountType,
+        isNextjs,
+        "SignedInScreenWithOnramp.tsx"
+      );
+      writeFileToTarget(onrampFileName, customizedOnrampScreen);
+    }
   }
   if (isReactNative && reactNativeCustomizations) {
     if (reactNativeCustomizations.infoPlist) {
@@ -545,9 +665,11 @@ function copyTemplateFiles({
     }
   }
 }
-function generateTransactionComponent(useSmartAccounts) {
-  if (useSmartAccounts) {
+function generateTransactionComponent(accountType) {
+  if (accountType === "evm-smart") {
     return `export { default } from "./SmartAccountTransaction";`;
+  } else if (accountType === "solana") {
+    return `export { default } from "./SolanaTransaction";`;
   } else {
     return `export { default } from "./EOATransaction";`;
   }