@getpara/create-para-app 0.6.0 → 2.7.0

package/templates/nextjs/src/components/ui/ConnectCard.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+interface ConnectCardProps {
+  onConnect: () => void;
+}
+
+export function ConnectCard({ onConnect }: ConnectCardProps) {
+  return (
+    <div className="max-w-md mx-auto text-center">
+      <div className="border border-gray-200 rounded-none p-8">
+        <h2 className="text-xl font-semibold mb-4">Connect Your Wallet</h2>
+        <p className="text-gray-600 mb-6">
+          Connect your wallet to sign messages and interact with the app.
+        </p>
+        <button
+          onClick={onConnect}
+          data-testid="auth-connect-button"
+          className="w-full px-6 py-3 text-white bg-black rounded-none hover:bg-gray-800 transition-colors font-medium">
+          Connect with Para
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/src/components/ui/SignMessage.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+interface SignMessageProps {
+  message: string;
+  onSign: () => void;
+  isPending: boolean;
+  error: Error | null;
+  signature?: string;
+}
+
+export function SignMessage({
+  message,
+  onSign,
+  isPending,
+  error,
+  signature,
+}: SignMessageProps) {
+  return (
+    <div className="rounded-none border border-gray-200">
+      <div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
+        <h3 className="text-sm font-medium text-gray-900">Sign Message</h3>
+      </div>
+      <div className="p-6">
+        <div className="mb-4">
+          <p className="text-sm text-gray-500 mb-1">Message to sign</p>
+          <p className="text-lg font-mono text-gray-900">{message}</p>
+        </div>
+
+        <button
+          onClick={onSign}
+          disabled={isPending}
+          className="w-full px-4 py-2 text-white bg-black rounded-none hover:bg-gray-800 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed font-medium">
+          {isPending ? "Signing..." : "Sign Message"}
+        </button>
+
+        {error && (
+          <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-none">
+            <p className="text-sm text-red-600">{error.message}</p>
+          </div>
+        )}
+
+        {signature && (
+          <div className="mt-4">
+            <p className="text-sm text-gray-500 mb-1">Signature</p>
+            <p className="text-xs font-mono text-gray-900 break-all bg-gray-50 p-3 rounded-none">
+              {signature}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/src/components/ui/WalletInfo.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useWallet } from "@getpara/react-sdk";
+
+export function WalletInfo() {
+  const { data: wallet } = useWallet();
+  const address = wallet?.address;
+
+  return (
+    <div className="mb-8 rounded-none border border-gray-200">
+      <div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
+        <h3 className="text-sm font-medium text-gray-900">Connected Wallet</h3>
+      </div>
+      <div className="px-6 py-3">
+        <p className="text-sm text-gray-500">Address</p>
+        <p className="text-lg font-medium text-gray-900 font-mono">
+          {address?.slice(0, 6)}...{address?.slice(-4)}
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/src/hooks/useSignHelloWorld.ts

@@ -0,0 +1,23 @@
+import { useWallet, useSignMessage } from "@getpara/react-sdk";
+
+const HELLO_WORLD_MESSAGE = "Hello World!";
+
+export function useSignHelloWorld() {
+  const { data: wallet } = useWallet();
+  const signMessage = useSignMessage();
+
+  const sign = () =>
+    wallet?.id &&
+    signMessage.signMessage({
+      walletId: wallet.id,
+      messageBase64: btoa(HELLO_WORLD_MESSAGE),
+    });
+
+  return {
+    sign,
+    message: HELLO_WORLD_MESSAGE,
+    isPending: signMessage.isPending,
+    error: signMessage.error,
+    signature: signMessage.data && "signature" in signMessage.data ? signMessage.data.signature : undefined,
+  };
+}

package/templates/nextjs/src/styles/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/nextjs/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/dist/bin/index.js

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-import '../src/index.js';

package/dist/commands/scaffold.js

@@ -1,137 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import chalk from 'chalk';
-import fs from 'fs-extra';
-import { promptInteractive } from '../prompts/interactive.js';
-import { scaffoldNextjs } from '../templates/nextjs.js';
-import { scaffoldViteReact } from '../templates/vite-react.js';
-import { runSDKSetup } from '../integrations/sdkSetup.js';
-import { logInfo, logError, logHeader, logSection, logSubsection } from '../utils/logger.js';
-function validateOptions(options) {
-    if ((options === null || options === void 0 ? void 0 : options.template) && !['nextjs', 'vite-react'].includes(options.template)) {
-        throw new Error(`Invalid template '${options.template}'. Valid templates: nextjs, vite-react.`);
-    }
-    if ((options === null || options === void 0 ? void 0 : options.evmSigner) && !['ethers', 'viem'].includes(options.evmSigner)) {
-        throw new Error(`Invalid EVM signer '${options.evmSigner}'. Valid signers: ethers, viem.`);
-    }
-    if (options === null || options === void 0 ? void 0 : options.networks) {
-        const nets = options.networks.split(',').map(n => n.trim());
-        for (const network of nets) {
-            if (!['evm', 'cosmos', 'solana'].includes(network)) {
-                throw new Error(`Invalid network '${network}'. Valid options: evm, cosmos, solana.`);
-            }
-        }
-    }
-}
-function cleanupProjectDirectory(projectName) {
-    if (!projectName)
-        return;
-    try {
-        if (fs.existsSync(projectName)) {
-            fs.removeSync(projectName);
-        }
-    }
-    catch (_a) { }
-}
-export default function scaffold(positionalProjectName, options) {
-    return __awaiter(this, void 0, void 0, function* () {
-        try {
-            validateOptions(options);
-            const { projectName: cliProjectName, template: cliTemplate, useLatest, noPrompt, noGit, packageManager, skipDeps, typescript = true, eslint = true, tailwind = true, srcDir = true, app = true, networks, evmSigner, externalWallet, apiKey, } = options || {};
-            // For rollback reference
-            const finalProjectName = cliProjectName || positionalProjectName;
-            let config = {
-                projectName: finalProjectName || '',
-                template: cliTemplate || '',
-                networks: [],
-                evmSigner: '',
-                apiKey: apiKey || '',
-                externalWalletSupport: externalWallet,
-                useLatest: !!useLatest,
-                noGit: !!noGit,
-                packageManager: packageManager || 'yarn',
-                skipDeps: !!skipDeps,
-                typescript,
-                eslint,
-                tailwind,
-                srcDir,
-                app,
-            };
-            // Populate networks if provided
-            if (networks) {
-                config.networks = networks.split(',').map(n => n.trim());
-            }
-            if (evmSigner) {
-                config.evmSigner = evmSigner;
-            }
-            // We'll decide if we must prompt
-            const needTemplate = !config.template;
-            const needProjectName = !config.projectName;
-            const needNetworks = !config.networks.length;
-            const needEvmSigner = config.networks.includes('evm') && !config.evmSigner;
-            const needApiKey = !config.apiKey;
-            const shouldPrompt = !noPrompt && (needTemplate || needProjectName || needNetworks || needEvmSigner || needApiKey);
-            if (shouldPrompt) {
-                const answers = yield promptInteractive(config);
-                config.projectName = answers.projectName || `para-${answers.template}-template`;
-                config.template = answers.template;
-                config.networks = answers.networks;
-                config.evmSigner = answers.evmSigner || (answers.networks.includes('evm') ? 'ethers' : '');
-                config.apiKey = answers.apiKey;
-                config.externalWalletSupport = answers.externalWalletSupport;
-            }
-            else {
-                if (!config.projectName) {
-                    const t = cliTemplate || 'nextjs';
-                    config.projectName = `para-${t}-template`;
-                }
-                if (!config.template) {
-                    config.template = 'nextjs';
-                }
-                if (!config.networks.length) {
-                    config.networks = [];
-                }
-                if (!config.evmSigner && config.networks.includes('evm')) {
-                    config.evmSigner = 'ethers';
-                }
-            }
-            if (fs.existsSync(config.projectName)) {
-                throw new Error(`Project folder '${config.projectName}' already exists. Please remove or choose a different name.`);
-            }
-            logHeader(`🚀 Creating a new project named: ${config.projectName}`);
-            logSection('🔧 Project Configuration:');
-            logSubsection('Project Type', config.template);
-            logSubsection('Supported Networks', config.networks.length > 0 ? config.networks.join(', ') : 'None');
-            if (config.networks.includes('evm')) {
-                logSubsection('EVM Signer', config.evmSigner);
-            }
-            logSubsection('API Key', config.apiKey);
-            logSubsection('External Wallet Support', config.externalWalletSupport ? 'Enabled' : 'Disabled');
-            logSubsection('TypeScript', config.typescript ? 'Enabled' : 'Disabled');
-            logSubsection('ESLint', config.eslint ? 'Enabled' : 'Disabled');
-            logSubsection('Tailwind', config.tailwind ? 'Enabled' : 'Disabled');
-            logSubsection('src/ directory', config.srcDir ? 'Enabled' : 'Disabled');
-            logSubsection('App Router', config.app ? 'Enabled' : 'Disabled');
-            if (config.template === 'vite-react') {
-                yield scaffoldViteReact(config);
-            }
-            else {
-                yield scaffoldNextjs(config);
-            }
-            yield runSDKSetup(config);
-            logInfo(chalk.green('✅ Scaffolding complete!'));
-        }
-        catch (error) {
-            logError(`Error: ${error.message || error}`);
-            cleanupProjectDirectory((options === null || options === void 0 ? void 0 : options.projectName) || positionalProjectName || '');
-            process.exit(1);
-        }
-    });
-}