@getpara/create-para-app 0.1.0

package/src/integrations/packageJsonHelpers.ts

@@ -0,0 +1,71 @@
+import fs from 'fs-extra';
+import path from 'path';
+
+const EVM_DEPS = ['@getpara/evm-wallet-connectors', '@tanstack/react-query', 'wagmi', '@getpara/react-sdk'];
+const SOLANA_DEPS = [
+  '@getpara/react-sdk',
+  '@getpara/solana-wallet-connectors',
+  '@solana-mobile/wallet-adapter-mobile',
+  '@solana/wallet-adapter-base',
+  '@solana/wallet-adapter-react',
+  '@solana/wallet-adapter-walletconnect',
+  '@solana/web3.js',
+  '@tanstack/react-query',
+];
+const COSMOS_DEPS = [
+  '@getpara/core-sdk',
+  '@getpara/cosmos-wallet-connectors',
+  '@getpara/graz',
+  '@getpara/react-sdk',
+  '@getpara/user-management-client',
+  '@cosmjs/cosmwasm-stargate',
+  '@cosmjs/launchpad',
+  '@cosmjs/proto-signing',
+  '@cosmjs/stargate',
+  '@cosmjs/tendermint-rpc',
+  '@leapwallet/cosmos-social-login-capsule-provider',
+  'long',
+  'starknet',
+];
+const BASE_DEPS = ['@getpara/react-sdk'];
+
+export async function updatePackageJsonDependencies(
+  projectName: string,
+  networks: string[],
+  externalWalletSupport: boolean,
+) {
+  const pkgPath = path.join(projectName, 'package.json');
+  const exists = await fs.pathExists(pkgPath);
+  if (!exists) {
+    return;
+  }
+  const pkgData = await fs.readJSON(pkgPath);
+  pkgData.dependencies = pkgData.dependencies || {};
+  if (!externalWalletSupport) {
+    BASE_DEPS.forEach(dep => {
+      pkgData.dependencies[dep] = pkgData.dependencies[dep] || 'latest';
+    });
+  } else {
+    if (networks.includes('evm')) {
+      EVM_DEPS.forEach(dep => {
+        pkgData.dependencies[dep] = pkgData.dependencies[dep] || 'latest';
+      });
+    }
+    if (networks.includes('solana')) {
+      SOLANA_DEPS.forEach(dep => {
+        pkgData.dependencies[dep] = pkgData.dependencies[dep] || 'latest';
+      });
+    }
+    if (networks.includes('cosmos')) {
+      COSMOS_DEPS.forEach(dep => {
+        pkgData.dependencies[dep] = pkgData.dependencies[dep] || 'latest';
+      });
+    }
+    if (!networks.includes('evm') && !networks.includes('solana') && !networks.includes('cosmos')) {
+      BASE_DEPS.forEach(dep => {
+        pkgData.dependencies[dep] = pkgData.dependencies[dep] || 'latest';
+      });
+    }
+  }
+  await fs.writeJSON(pkgPath, pkgData, { spaces: 2 });
+}

package/src/integrations/sdkSetup.ts

@@ -0,0 +1,13 @@
+import { logInfo } from '../utils/logger.js';
+import { sdkSetupNextjs } from './sdkSetupNextjs.js';
+import { sdkSetupVite } from './sdkSetupVite.js';
+
+export async function runSDKSetup(config) {
+  const { projectName, template } = config;
+  logInfo(`🔌 Integrating Para SDK into project ${projectName}...`);
+  if (template === 'vite-react') {
+    await sdkSetupVite(config);
+  } else {
+    await sdkSetupNextjs(config);
+  }
+}

package/src/integrations/sdkSetupNextjs.ts

@@ -0,0 +1,122 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { logHeader, logSection, logSubsection, logStep } from '../utils/logger.js';
+import { formatWithPrettier } from '../utils/formatting.js';
+import { updatePackageJsonDependencies } from './packageJsonHelpers.js';
+import {
+  getEnvFileContent,
+  getParaClientCode,
+  getWalletProviderCodeNextjs,
+  getHelloParaFile,
+  getHomeFile,
+  getStylesNonTailwind,
+} from './codeGenerators.js';
+
+export async function sdkSetupNextjs(config) {
+  const {
+    projectName,
+    networks,
+    evmSigner,
+    apiKey,
+    noTypescript,
+    noAppRouter,
+    noSrcDir,
+    externalWalletSupport,
+    tailwind,
+    app,
+  } = config;
+
+  const envContent = getEnvFileContent(apiKey, true);
+  const envPath = path.join(projectName, '.env');
+  await fs.outputFile(envPath, envContent);
+
+  const clientDir = path.join(projectName, 'src', 'client');
+  await fs.ensureDir(clientDir);
+  const paraClient = getParaClientCode(true, !noTypescript);
+  {
+    const filePath = path.join(clientDir, `para.${noTypescript ? 'js' : 'ts'}`);
+    const formatted = await formatWithPrettier(paraClient, filePath);
+    await fs.outputFile(filePath, formatted);
+  }
+
+  if (externalWalletSupport) {
+    const compDir = path.join(projectName, 'src', 'components');
+    await fs.ensureDir(compDir);
+    const results = getWalletProviderCodeNextjs(networks, noAppRouter);
+    for (const r of results) {
+      const fileExt = noTypescript ? 'jsx' : 'tsx';
+      const filePath = path.join(compDir, `${r.fileName}.${fileExt}`);
+      const formatted = await formatWithPrettier(r.code, filePath);
+      await fs.outputFile(filePath, formatted);
+    }
+  }
+
+  const componentsDir = path.join(projectName, 'src', 'components');
+  await fs.ensureDir(componentsDir);
+  const helloParaCode = getHelloParaFile(!!tailwind, !noTypescript, true);
+  {
+    const filePath = path.join(componentsDir, `HelloPara.${noTypescript ? 'jsx' : 'tsx'}`);
+    const formatted = await formatWithPrettier(helloParaCode, filePath);
+    await fs.outputFile(filePath, formatted);
+  }
+
+  const homeCode = getHomeFile(!!tailwind, !noTypescript, !!externalWalletSupport);
+  let mainPath = '';
+  if (noAppRouter) {
+    if (noSrcDir) {
+      mainPath = path.join(projectName, 'pages', `index.${noTypescript ? 'jsx' : 'tsx'}`);
+    } else {
+      mainPath = path.join(projectName, 'src', 'pages', `index.${noTypescript ? 'jsx' : 'tsx'}`);
+    }
+  } else {
+    if (noSrcDir) {
+      mainPath = path.join(projectName, 'app', `page.${noTypescript ? 'jsx' : 'tsx'}`);
+    } else {
+      mainPath = path.join(projectName, 'src', 'app', `page.${noTypescript ? 'jsx' : 'tsx'}`);
+    }
+  }
+  const formattedHome = await formatWithPrettier(homeCode, mainPath);
+  await fs.writeFile(mainPath, formattedHome);
+
+  let cssFilePath = '';
+  if (tailwind) {
+    if (app) {
+      cssFilePath = path.join(projectName, 'src', 'app', 'globals.css');
+    } else {
+      cssFilePath = path.join(projectName, 'styles', 'globals.css');
+    }
+    if (!(await fs.pathExists(cssFilePath))) {
+      await fs.outputFile(cssFilePath, '');
+    }
+  } else {
+    if (app) {
+      cssFilePath = path.join(projectName, 'src', 'app', 'globals.css');
+    } else {
+      cssFilePath = path.join(projectName, 'src', 'global.css');
+    }
+    if (!(await fs.pathExists(cssFilePath))) {
+      await fs.outputFile(cssFilePath, '');
+    }
+    const stylesContent = getStylesNonTailwind();
+    const existing = await fs.readFile(cssFilePath, 'utf-8');
+    const appended = `${existing.trim()}\n\n${stylesContent}`;
+    const formattedStyles = await formatWithPrettier(appended, cssFilePath);
+    await fs.writeFile(cssFilePath, formattedStyles);
+  }
+
+  await updatePackageJsonDependencies(projectName, networks, externalWalletSupport);
+  logSection('🛠  Configuration Details:');
+  logSubsection('Project Type', 'nextjs');
+  logSubsection('Supported Networks', networks.join(', ') || 'None');
+  if (networks.includes('evm')) {
+    logSubsection('EVM Signer', evmSigner);
+  }
+  logSubsection('API Key', apiKey);
+
+  logSection('➡️ Next Steps:');
+  logStep(`1. cd ${projectName}`);
+  logStep(`2. Install dependencies if skipped (e.g., "yarn install" or "npm install")`);
+  logStep(`3. Refer to https://docs.getpara.com/integration-guides/create-para-app for further instructions.`);
+
+  logHeader('✅ SDK integration complete with ParaModal usage.');
+}

package/src/integrations/sdkSetupVite.ts

@@ -0,0 +1,87 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { logHeader, logSection, logSubsection, logStep, logInfo } from '../utils/logger.js';
+import { formatWithPrettier } from '../utils/formatting.js';
+import { updatePackageJsonDependencies } from './packageJsonHelpers.js';
+import {
+  getEnvFileContent,
+  getParaClientCode,
+  getWalletProviderCodeVite,
+  getHelloParaFile,
+  getHomeFile,
+  getStylesNonTailwind,
+} from './codeGenerators.js';
+
+export async function sdkSetupVite(config) {
+  const { projectName, networks, evmSigner, apiKey, noTypescript, noSrcDir, externalWalletSupport, tailwind } = config;
+
+  const envContent = getEnvFileContent(apiKey, false);
+  const envPath = path.join(projectName, '.env');
+  await fs.outputFile(envPath, envContent);
+
+  const clientDir = path.join(projectName, 'src', 'client');
+  await fs.ensureDir(clientDir);
+  const paraClient = getParaClientCode(false, !noTypescript);
+  {
+    const filePath = path.join(clientDir, `para.${noTypescript ? 'js' : 'ts'}`);
+    const formatted = await formatWithPrettier(paraClient, filePath);
+    await fs.outputFile(filePath, formatted);
+  }
+
+  if (externalWalletSupport) {
+    const compDir = path.join(projectName, 'src', 'components');
+    await fs.ensureDir(compDir);
+    const providerCode = getWalletProviderCodeVite(networks);
+    const filePath = path.join(compDir, `ParaWalletsProvider.${noTypescript ? 'jsx' : 'tsx'}`);
+    const formatted = await formatWithPrettier(providerCode, filePath);
+    await fs.outputFile(filePath, formatted);
+  }
+
+  const compDir = path.join(projectName, 'src', 'components');
+  await fs.ensureDir(compDir);
+  const helloParaCode = getHelloParaFile(!!tailwind, !noTypescript, false);
+  {
+    const filePath = path.join(compDir, `HelloPara.${noTypescript ? 'jsx' : 'tsx'}`);
+    const formatted = await formatWithPrettier(helloParaCode, filePath);
+    await fs.outputFile(filePath, formatted);
+  }
+
+  const homeCode = getHomeFile(!!tailwind, !noTypescript, !!externalWalletSupport);
+  const mainFileDir = noSrcDir ? projectName : path.join(projectName, 'src');
+  const mainFilePath = path.join(mainFileDir, `App.${noTypescript ? 'jsx' : 'tsx'}`);
+  const exists = await fs.pathExists(mainFilePath);
+  if (!exists) {
+    logInfo(`Could not find ${mainFilePath} to replace.`);
+  } else {
+    const formatted = await formatWithPrettier(homeCode, mainFilePath);
+    await fs.writeFile(mainFilePath, formatted);
+  }
+
+  if (!tailwind) {
+    const indexCssPath = path.join(projectName, 'src', 'index.css');
+    const existsCss = await fs.pathExists(indexCssPath);
+    if (!existsCss) {
+      await fs.outputFile(indexCssPath, '');
+    }
+    const existing = await fs.readFile(indexCssPath, 'utf-8');
+    const newStyles = `${existing.trim()}\n\n${getStylesNonTailwind()}`;
+    const formattedStyles = await formatWithPrettier(newStyles, indexCssPath);
+    await fs.writeFile(indexCssPath, formattedStyles);
+  }
+
+  await updatePackageJsonDependencies(projectName, networks, externalWalletSupport);
+  logSection('🛠  Configuration Details:');
+  logSubsection('Project Type', 'vite-react');
+  logSubsection('Supported Networks', networks.join(', ') || 'None');
+  if (networks.includes('evm')) {
+    logSubsection('EVM Signer', evmSigner);
+  }
+  logSubsection('API Key', apiKey);
+
+  logSection('➡️ Next Steps:');
+  logStep(`1. cd ${projectName}`);
+  logStep(`2. Install dependencies if skipped (e.g., "yarn install" or "npm install")`);
+  logStep(`3. Refer to https://docs.getpara.com/integration-guides/create-para-app for further instructions.`);
+
+  logHeader('✅ SDK integration complete with ParaModal usage.');
+}

package/src/prompts/interactive.ts

@@ -0,0 +1,113 @@
+import inquirer, { DistinctQuestion } from 'inquirer';
+
+interface InteractiveAnswers {
+  projectName: string;
+  networks: string[];
+  evmSigner?: string;
+  externalWalletSupport: boolean;
+  apiKey: string;
+  template: string;
+}
+
+export async function promptInteractive(config: {
+  projectName?: string;
+  template?: string;
+  networks?: string[];
+  evmSigner?: string;
+  externalWalletSupport?: boolean;
+  apiKey?: string;
+}): Promise<InteractiveAnswers> {
+  const template = config.template || 'nextjs';
+  const defaultName = config.projectName || `para-${template}-template`;
+
+  const questions: DistinctQuestion<InteractiveAnswers>[] = [];
+
+  if (!config.template) {
+    questions.push({
+      type: 'list',
+      name: 'template',
+      message: 'Select a project type:',
+      choices: ['nextjs', 'vite-react'],
+      default: 'nextjs',
+    });
+  }
+
+  if (!config.projectName) {
+    questions.push({
+      type: 'input',
+      name: 'projectName',
+      message: 'Enter your project name:',
+      default: answers => {
+        const selectedTemplate = answers.template || config.template || 'nextjs';
+        return `para-${selectedTemplate}-template`;
+      },
+    });
+  }
+
+  if (!config.networks || !config.networks.length) {
+    questions.push({
+      type: 'checkbox',
+      name: 'networks',
+      message: 'Select supported networks:',
+      choices: [
+        { name: 'EVM', value: 'evm' },
+        { name: 'Cosmos', value: 'cosmos' },
+        { name: 'Solana', value: 'solana' },
+      ],
+    });
+  }
+
+  if (config.networks && config.networks.includes('evm') && !config.evmSigner) {
+    questions.push({
+      type: 'list',
+      name: 'evmSigner',
+      message: 'Select signer for EVM:',
+      choices: ['ethers', 'viem'],
+      default: 'ethers',
+    });
+  }
+
+  if (config.externalWalletSupport === undefined) {
+    questions.push({
+      type: 'confirm',
+      name: 'externalWalletSupport',
+      message: 'Enable external wallet support?',
+      default: false,
+      when: answers => {
+        const nets = answers.networks || config.networks;
+        return Array.isArray(nets) && nets.length > 0;
+      },
+    });
+  }
+
+  if (!config.apiKey) {
+    questions.push({
+      type: 'input',
+      name: 'apiKey',
+      message: 'Enter your API key:',
+      validate: input => (input ? true : 'API key cannot be empty'),
+    });
+  }
+
+  if (!questions.length) {
+    return {
+      projectName: config.projectName || defaultName,
+      template,
+      networks: config.networks || [],
+      evmSigner: config.evmSigner,
+      externalWalletSupport: !!config.externalWalletSupport,
+      apiKey: config.apiKey || '',
+    };
+  }
+
+  const answers = await inquirer.prompt<InteractiveAnswers>(questions);
+
+  return {
+    template: answers.template || template,
+    projectName: answers.projectName || config.projectName || defaultName,
+    networks: answers.networks || config.networks || [],
+    evmSigner: answers.evmSigner || config.evmSigner,
+    externalWalletSupport: answers.externalWalletSupport ?? config.externalWalletSupport ?? false,
+    apiKey: answers.apiKey || config.apiKey || '',
+  };
+}

package/src/templates/nextjs.ts

@@ -0,0 +1,54 @@
+import { execCommand } from '../utils/exec.js';
+import { logInfo } from '../utils/logger.js';
+
+export async function scaffoldNextjs(config) {
+  logInfo(`🔧 Scaffolding Next.js app for project ${config.projectName}...`);
+  const versionTag = config.useLatest ? 'latest' : 'latest';
+
+  // Start with these flags for a default Next.js TS, ESLint, Tailwind, src, app setup
+  const baseFlags = new Set(['--typescript', '--eslint', '--tailwind', '--src-dir', '--app', '--no-turbopack', '--yes']);
+
+  // If user wants no typescript => remove --typescript, add --javascript
+  if (!config.typescript) {
+    baseFlags.delete('--typescript');
+    baseFlags.add('--javascript');
+  }
+  if (!config.eslint) {
+    baseFlags.delete('--eslint');
+  }
+  if (!config.tailwind) {
+    baseFlags.delete('--tailwind');
+  }
+  if (!config.srcDir) {
+    baseFlags.delete('--src-dir');
+  }
+  if (!config.app) {
+    baseFlags.delete('--app');
+  }
+
+  let cmd = `npx create-next-app@${versionTag} ${config.projectName}`;
+  for (const f of baseFlags) {
+    cmd += ` ${f}`;
+  }
+
+  if (config.noGit) {
+    cmd += ' --no-git';
+  }
+  if (config.skipDeps) {
+    cmd += ' --skip-install';
+  }
+  if (config.packageManager && config.packageManager !== 'yarn') {
+    if (config.packageManager === 'npm') {
+      cmd += ' --use-npm';
+    } else if (config.packageManager === 'pnpm') {
+      cmd += ' --use-pnpm';
+    } else if (config.packageManager === 'bun') {
+      // create-next-app doesn't have a built-in --use-bun, we might skip or log a warning
+      logInfo('Warning: create-next-app does not officially support "--use-bun". Using npm instead.');
+      cmd += ' --use-npm';
+    }
+  }
+
+  logInfo(`💻 Executing command: ${cmd}`);
+  await execCommand(cmd);
+}

package/src/templates/vite-react.ts

@@ -0,0 +1,33 @@
+import { execCommand } from '../utils/exec.js';
+import { logInfo } from '../utils/logger.js';
+
+export async function scaffoldViteReact(config) {
+  logInfo(`🔧 Scaffolding Vite React app for project ${config.projectName}...`);
+  const versionTag = config.useLatest ? 'latest' : 'latest';
+
+  const templateName = config.typescript ? 'react-ts' : 'react';
+
+  let cmd = '';
+  if (config.packageManager === 'yarn') {
+    cmd = `yarn create vite ${config.projectName} --template ${templateName}`;
+  } else if (config.packageManager === 'npm') {
+    cmd = `npm create vite@${versionTag} ${config.projectName} --template ${templateName}`;
+  } else if (config.packageManager === 'pnpm') {
+    cmd = `pnpm dlx create-vite@${versionTag} ${config.projectName} --template ${templateName}`;
+  } else if (config.packageManager === 'bun') {
+    logInfo('Warning: "bun create vite" not officially tested. Using npm create instead.');
+    cmd = `npm create vite@${versionTag} ${config.projectName} --template ${templateName}`;
+  } else {
+    cmd = `npm create vite@${versionTag} ${config.projectName} --template ${templateName}`;
+  }
+
+  if (config.noGit) {
+    cmd += ' --no-git';
+  }
+  if (config.skipDeps) {
+    cmd += ' --skip-install';
+  }
+
+  logInfo(`💻 Executing command: ${cmd}`);
+  await execCommand(cmd);
+}

package/src/utils/exec.ts

@@ -0,0 +1,6 @@
+import { execa } from 'execa';
+
+export async function execCommand(command: string) {
+  const [cmd, ...args] = command.split(' ');
+  await execa(cmd, args, { stdio: 'inherit' });
+}

package/src/utils/formatting.ts

@@ -0,0 +1,18 @@
+import prettier from 'prettier';
+
+export async function formatWithPrettier(code: string, filePath: string): Promise<string> {
+  let parser = 'babel';
+  if (filePath.endsWith('.ts')) {
+    parser = 'typescript';
+  } else if (filePath.endsWith('.tsx')) {
+    parser = 'babel-ts';
+  } else if (filePath.endsWith('.js')) {
+    parser = 'babel';
+  } else if (filePath.endsWith('.jsx')) {
+    parser = 'babel';
+  }
+  return prettier.format(code, {
+    parser,
+    singleQuote: true,
+  });
+}

package/src/utils/logger.ts

@@ -0,0 +1,25 @@
+import chalk from 'chalk';
+
+export function logHeader(message: string) {
+  console.log(chalk.bold.magentaBright(`\n${message}\n`));
+}
+
+export function logSection(message: string) {
+  console.log(chalk.bold.cyanBright(`\n${message}`));
+}
+
+export function logSubsection(key: string, value: string) {
+  console.log(chalk.green(`${key}: `) + chalk.white(`${value}`));
+}
+
+export function logStep(step: string) {
+  console.log(chalk.yellow(step));
+}
+
+export function logInfo(message: string) {
+  console.log(chalk.cyanBright(`- ${message}`));
+}
+
+export function logError(message: string) {
+  console.error(chalk.redBright(`❌ ${message}`));
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext", // your override for ESM
+    "resolveJsonModule": true,
+    "declaration": false,
+    "outDir": "./dist",
+    "rootDir": "./src", // <--- Add this line
+    "lib": ["dom"]
+  },
+  "include": ["src/**/*.ts"],
+  "ts-node": {
+    "esm": true,
+    "compilerOptions": {
+      "module": "ESNext"
+    }
+  }
+}