create-universal-dapp 1.0.0

package/README.md

@@ -0,0 +1,165 @@
+# create-universal-dapp
+
+A CLI tool to scaffold Push Chain applications with your choice of framework and tooling.
+
+## Quick Start
+
+```bash
+npm install -g create-universal-dapp
+create-universal-dapp my-app
+```
+
+Or use npx:
+
+```bash
+npx create-universal-dapp my-app
+```
+
+## Features
+
+- ⚡ **Multiple Frameworks**: Choose between Next.js or Vite (React)
+- 🔧 **ESLint**: Optional code linting setup
+- 📦 **Push Chain Integration**: Pre-configured with @pushchain/core and @pushchain/ui-kit
+- 🚀 **TypeScript**: Full TypeScript support out of the box
+- 🎨 **Styling**: Tailwind CSS set up by default
+
+## Usage
+
+### Interactive Mode
+
+Run the CLI without arguments to enter interactive mode:
+
+```bash
+create-universal-dapp
+```
+
+You'll be prompted to:
+1. Choose your project name
+2. Select a framework (Next.js or Vite)
+3. Enable/disable ESLint
+
+### Command Line Options
+
+```bash
+create-universal-dapp my-app --framework nextjs --eslint
+```
+
+Available options:
+- `-f, --framework <framework>`: Choose 'nextjs' or 'vite'
+- `--eslint / --no-eslint`: Include/exclude ESLint configuration
+
+## Generated Project Structure
+
+### Next.js Project
+```
+my-app/
+├── src/
+│   ├── app/
+│   │   ├── globals.css
+│   │   ├── layout.tsx
+│   │   └── page.tsx
+│   ├── components/
+│   └── lib/
+│       ├── pushchain.tsx    # Push Chain provider
+│       └── utils.ts         # Utility functions
+├── package.json
+├── next.config.js
+├── tsconfig.json
+└── tailwind.config.js
+```
+
+### Vite Project
+```
+my-app/
+├── src/
+│   ├── components/
+│   ├── lib/
+│   │   ├── pushchain.tsx    # Push Chain provider
+│   │   └── utils.ts         # Utility functions
+│   ├── App.tsx
+│   ├── main.tsx
+│   └── index.css
+├── index.html
+├── package.json
+├── vite.config.ts
+├── tsconfig.json
+└── tailwind.config.js
+```
+
+## Push Chain Integration
+
+The generated project includes:
+
+### 1. PushChain Provider
+A React context provider that manages the Push Chain connection:
+
+```typescript
+import { usePushChain } from '@/lib/pushchain'
+
+function MyComponent() {
+  const { pushChain, isConnected, connect, disconnect, error } = usePushChain()
+  
+  // Use Push Chain methods here
+}
+```
+
+### 2. Demo Component
+A working example showing how to:
+- Connect to Push Chain
+- Send messages
+- Handle errors
+- Display connection status
+
+### 3. Environment Variables
+Configure your Push Chain settings:
+
+```env
+# Next.js
+NEXT_PUBLIC_PUSHCHAIN_API_KEY=your_api_key_here
+NEXT_PUBLIC_PUSHCHAIN_NETWORK=testnet
+
+# Vite
+VITE_PUSHCHAIN_API_KEY=your_api_key_here
+VITE_PUSHCHAIN_NETWORK=testnet
+```
+
+## Development
+
+To work on this CLI tool:
+
+```bash
+git clone https://github.com/pushchainxyz/create-universal-dapp
+cd create-universal-dapp
+npm install
+npm run build
+npm link
+```
+
+Then you can test it:
+
+```bash
+create-universal-dapp test-app
+```
+
+## Scripts
+
+- `npm run build` - Build the CLI
+- `npm run dev` - Run in development mode
+- `npm start` - Run the built CLI
+
+## Next Steps
+
+After creating your project:
+
+1. **Configure Environment Variables**: Set up your Push Chain API keys
+2. **Customize the Integration**: Replace example code with your specific Push Chain functionality
+3. **Add Features**: Build upon the generated structure
+4. **Explore Push Chain**: Check out the @pushchain/ui-kit for additional components
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT

package/dist/commands/create.d.ts

@@ -0,0 +1,2 @@
+export declare function createPushApp(projectName?: string, options?: any): Promise<void>;
+//# sourceMappingURL=create.d.ts.map

package/dist/commands/create.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/commands/create.ts"],"names":[],"mappings":"AAUA,wBAAsB,aAAa,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,iBAmDtE"}

package/dist/commands/create.js

@@ -0,0 +1,52 @@
+import chalk from 'chalk';
+import ora from 'ora';
+import fs from 'fs-extra';
+import { getProjectOptions } from '../utils/prompts.js';
+import { createNextjsApp } from '../templates/nextjs.js';
+import { createViteApp } from '../templates/vite.js';
+export async function createPushApp(projectName, options) {
+    try {
+        // Get project configuration from user
+        const projectOptions = await getProjectOptions(projectName, options);
+        console.log(chalk.blue('\n📋 Project Configuration:'));
+        console.log(chalk.gray(`   Project Name: ${projectOptions.projectName}`));
+        console.log(chalk.gray(`   Framework: ${projectOptions.framework}`));
+        console.log(chalk.gray(`   ESLint: ${projectOptions.eslint ? 'Yes' : 'No'}`));
+        console.log(chalk.gray(`   Target Directory: ${projectOptions.targetDir}\n`));
+        // Check if directory already exists
+        if (await fs.pathExists(projectOptions.targetDir)) {
+            console.log(chalk.red(`❌ Directory ${projectOptions.projectName} already exists!`));
+            process.exit(1);
+        }
+        // Create project directory
+        const spinner = ora('Creating project directory...').start();
+        await fs.ensureDir(projectOptions.targetDir);
+        spinner.succeed('Project directory created');
+        // Generate project based on framework choice
+        if (projectOptions.framework === 'nextjs') {
+            await createNextjsApp(projectOptions);
+        }
+        else {
+            await createViteApp(projectOptions);
+        }
+        // Skipping auto-install to save time; user will install manually
+        console.log(chalk.green(`
+    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    `));
+        console.log(chalk.green.bold(`                                🎉 SUCCESS! Project Created! 🎉                               `));
+        console.log(chalk.cyan(`                         Your Push Chain Universal App is ready to go!                        `));
+        console.log(chalk.green(`
+    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    `));
+        console.log(chalk.blue.bold('\n🚀 Next Steps:'));
+        console.log(chalk.white(`   cd ${projectOptions.projectName}`));
+        console.log(chalk.white(`   npm install`));
+        console.log(chalk.white(`   npm run dev`));
+        console.log(chalk.green('\n   Happy Building! 🚀✨\n'));
+    }
+    catch (error) {
+        console.error(chalk.red('❌ Error creating project:'), error);
+        process.exit(1);
+    }
+}
+//# sourceMappingURL=create.js.map

package/dist/commands/create.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../../src/commands/create.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,EAAE,MAAM,UAAU,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,WAAoB,EAAE,OAAa;IACrE,IAAI,CAAC;QACH,sCAAsC;QACtC,MAAM,cAAc,GAAG,MAAM,iBAAiB,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;QAErE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAC;QACvD,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,cAAc,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QAC1E,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,iBAAiB,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;QACrE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QAC9E,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,wBAAwB,cAAc,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC;QAE9E,oCAAoC;QACpC,IAAI,MAAM,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC;YAClD,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,eAAe,cAAc,CAAC,WAAW,kBAAkB,CAAC,CAAC,CAAC;YACpF,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC;QAED,2BAA2B;QAC3B,MAAM,OAAO,GAAG,GAAG,CAAC,+BAA+B,CAAC,CAAC,KAAK,EAAE,CAAC;QAC7D,MAAM,EAAE,CAAC,SAAS,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QAC7C,OAAO,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC;QAE7C,6CAA6C;QAC7C,IAAI,cAAc,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;YAC1C,MAAM,eAAe,CAAC,cAAc,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,MAAM,aAAa,CAAC,cAAc,CAAC,CAAC;QACtC,CAAC;QAED,iEAAiE;QAEjE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC;;KAEvB,CAAC,CAAC,CAAC;QACJ,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,gGAAgG,CAAC,CAAC,CAAC;QAChI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,gGAAgG,CAAC,CAAC,CAAC;QAC1H,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC;;KAEvB,CAAC,CAAC,CAAC;QAEJ,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,cAAc,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QAChE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAC3C,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAE3C,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,4BAA4B,CAAC,CAAC,CAAC;IAEzD,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,2BAA2B,CAAC,EAAE,KAAK,CAAC,CAAC;QAC7D,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;AACH,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+import { program } from 'commander';
+import chalk from 'chalk';
+import { createPushApp } from './commands/create.js';
+console.log(chalk.cyan.bold(`
+    $$$$$$\\                        $$\\             $$$$$$\\  $$\\                 $$\\           
+    $$  __$$\\                       $$ |           $$  __$$\\ $$ |                $$\\          
+    $$ /  $$ |$$\\   $$\\  $$$$$$$\\   $$$$$$$\\       $$ /  \\__|$$$$$$$\\   $$$$$$\\  $$ |$$$$$$$\\  
+    $$$$$$$  |$$ |  $$ |$$  _____|  $$  __$$\\      $$ |      $$  __$$\\  \\____$$\\ $$ |$$  __$$\\ 
+    $$  ____/ $$ |  $$ |\\$$$$$$\\    $$ |  $$ |     $$ |      $$ |  $$ | $$$$$$$ |$$ |$$ |  $$ |
+    $$ |      $$ |  $$ | \\____$$\\   $$ |  $$ |     $$ |  $$\\ $$ |  $$ |$$  __$$ |$$ |$$ |  $$ |
+    $$ |      \\$$$$$$  |$$$$$$$  |  $$ |  $$ |     \\$$$$$$  |$$ |  $$ |\\$$$$$$$ |$$ |$$ |  $$ |
+    \\__|       \\______/ \\_______/   \\__|  \\__|      \\______/ \\__|  \\__| \\_______|\\__|\\__|  \\__|
+`));
+program
+    .name('create-universal-dapp')
+    .description('CLI tool to scaffold Push Chain universal applications')
+    .version('1.0.0');
+program
+    .argument('[project-name]', 'name of the project')
+    .option('-f, --framework <framework>', 'framework to use (nextjs or vite)')
+    .option('--eslint', 'include ESLint configuration')
+    .option('--no-eslint', 'skip ESLint configuration')
+    .action(createPushApp);
+program.parse();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;;;;CAS3B,CAAC,CAAC,CAAC;AAEJ,OAAO;KACJ,IAAI,CAAC,uBAAuB,CAAC;KAC7B,WAAW,CAAC,wDAAwD,CAAC;KACrE,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO;KACJ,QAAQ,CAAC,gBAAgB,EAAE,qBAAqB,CAAC;KACjD,MAAM,CAAC,6BAA6B,EAAE,mCAAmC,CAAC;KAC1E,MAAM,CAAC,UAAU,EAAE,8BAA8B,CAAC;KAClD,MAAM,CAAC,aAAa,EAAE,2BAA2B,CAAC;KAClD,MAAM,CAAC,aAAa,CAAC,CAAC;AAEzB,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/dist/templates/nextjs.d.ts

@@ -0,0 +1,3 @@
+import type { ProjectOptions } from '../types/index.js';
+export declare function createNextjsApp(options: ProjectOptions): Promise<void>;
+//# sourceMappingURL=nextjs.d.ts.map

package/dist/templates/nextjs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nextjs.d.ts","sourceRoot":"","sources":["../../src/templates/nextjs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,wBAAsB,eAAe,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,CA6B5E"}

package/dist/templates/nextjs.js

@@ -0,0 +1,406 @@
+import fs from 'fs-extra';
+import path from 'path';
+import ora from 'ora';
+export async function createNextjsApp(options) {
+    const spinner = ora('Setting up Next.js project...').start();
+    try {
+        // Create package.json
+        await createNextjsPackageJson(options);
+        // Create Next.js configuration files
+        await createNextjsConfig(options);
+        // Create source structure
+        await createNextjsSourceFiles(options);
+        // Create Push Chain integration files
+        await createPushChainIntegration(options);
+        // Create ESLint config if requested
+        if (options.eslint) {
+            await createESLintConfig(options);
+        }
+        // Create Tailwind config (Tailwind-only setup)
+        await createTailwindConfig(options);
+        spinner.succeed('Next.js project structure created');
+    }
+    catch (error) {
+        spinner.fail('Failed to create Next.js project');
+        throw error;
+    }
+}
+async function createNextjsPackageJson(options) {
+    const packageJson = {
+        name: options.projectName,
+        version: "0.1.0",
+        private: true,
+        scripts: {
+            dev: "next dev",
+            build: "next build",
+            start: "next start",
+            lint: options.eslint ? "next lint" : undefined
+        },
+        dependencies: {
+            react: "^18.3.1",
+            "react-dom": "^18.3.1",
+            next: "^14.0.0",
+            "@pushchain/ui-kit": "^1.1.33"
+        },
+        devDependencies: {
+            typescript: "^5.2.2",
+            "@types/node": "^20.8.0",
+            "@types/react": "^18.2.33",
+            "@types/react-dom": "^18.2.14",
+            tailwindcss: "^3.3.0",
+            autoprefixer: "^10.4.16",
+            postcss: "^8.4.31"
+        }
+    };
+    // Remove undefined values
+    Object.keys(packageJson.scripts).forEach(key => {
+        const scripts = packageJson.scripts;
+        if (scripts[key] === undefined) {
+            delete scripts[key];
+        }
+    });
+    await fs.writeJSON(path.join(options.targetDir, 'package.json'), packageJson, { spaces: 2 });
+}
+async function createNextjsConfig(options) {
+    // Next.js config
+    const nextConfig = `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Add any Next.js config options here
+}
+
+module.exports = nextConfig`;
+    await fs.writeFile(path.join(options.targetDir, 'next.config.js'), nextConfig);
+    // TypeScript config
+    const tsConfig = {
+        compilerOptions: {
+            target: "es5",
+            lib: ["dom", "dom.iterable", "es6"],
+            allowJs: true,
+            skipLibCheck: true,
+            strict: true,
+            forceConsistentCasingInFileNames: true,
+            noEmit: true,
+            esModuleInterop: true,
+            module: "esnext",
+            moduleResolution: "bundler",
+            resolveJsonModule: true,
+            isolatedModules: true,
+            jsx: "preserve",
+            incremental: true,
+            plugins: [
+                {
+                    name: "next"
+                }
+            ],
+            baseUrl: ".",
+            paths: {
+                "@/*": ["./src/*"]
+            }
+        },
+        include: ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+        exclude: ["node_modules"]
+    };
+    await fs.writeJSON(path.join(options.targetDir, 'tsconfig.json'), tsConfig, { spaces: 2 });
+}
+async function createNextjsSourceFiles(options) {
+    // Create src directory structure
+    const srcDir = path.join(options.targetDir, 'src');
+    const appDir = path.join(srcDir, 'app');
+    await fs.ensureDir(appDir);
+    // Create app layout
+    const layout = `import './globals.css'
+import { Inter } from 'next/font/google'
+import { PushChainProviders } from '@/providers/PushChainProviders'
+import type { Metadata } from 'next'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '${options.projectName}',
+  description: 'A Push Chain application built with Next.js - enabling universal blockchain access and shared state management.',
+  keywords: ['Push Chain', 'blockchain', 'Web3', 'universal wallet', 'Next.js'],
+  authors: [{ name: '${options.projectName} Team' }],
+  creator: '${options.projectName}',
+  publisher: '${options.projectName}',
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false,
+  },
+  metadataBase: new URL('https://your-domain.com'), // Replace with your actual domain
+  openGraph: {
+    title: '${options.projectName}',
+    description: 'A Push Chain application built with Next.js',
+    url: 'https://your-domain.com', // Replace with your actual URL
+    siteName: '${options.projectName}',
+    locale: 'en_US',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: '${options.projectName}',
+    description: 'A Push Chain application built with Next.js',
+    creator: '@your_twitter_handle', // Replace with your Twitter handle
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <PushChainProviders>
+          {children}
+        </PushChainProviders>
+      </body>
+    </html>
+  )
+}`;
+    await fs.writeFile(path.join(appDir, 'layout.tsx'), layout);
+    // Create main page
+    const page = `'use client'
+
+import { PushUniversalAccountButton, usePushWalletContext } from '@pushchain/ui-kit'
+
+export default function Home() {
+  const { universalAccount } = usePushWalletContext();
+
+  console.log("universalAccount", universalAccount);
+
+  return (
+    <main className="min-h-screen bg-white text-gray-900 p-8">
+      <div className="container mx-auto max-w-4xl">
+        <div className="text-center mb-8">
+          <h1 className="text-4xl font-bold mb-4">
+            Welcome to ${options.projectName}
+          </h1>
+          <p className="text-lg text-gray-600 mb-8">
+            Your Push Chain application is ready to go!
+          </p>
+        </div>
+
+        <div className="max-w-2xl mx-auto border rounded-lg shadow-sm p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-2xl font-semibold">Push Chain Integration</h2>
+            <span className={"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold text-white " + (universalAccount ? 'bg-green-500' : 'bg-gray-500')}>
+              {universalAccount ? 'Connected' : 'Not Connected'}
+            </span>
+          </div>
+
+          <div className="flex justify-center mb-6">
+            <PushUniversalAccountButton />
+          </div>
+
+          {universalAccount && (
+            <div className="mt-6 p-4 bg-gray-100 rounded-lg">
+              <h3 className="font-semibold mb-2">Account Details:</h3>
+              <pre className="text-sm overflow-auto">
+                {JSON.stringify(universalAccount, null, 2)}
+              </pre>
+            </div>
+          )}
+
+          <div className="text-sm text-gray-600 mt-6">
+            <p className="font-medium">Next steps:</p>
+            <ul className="list-disc list-inside space-y-1 mt-2">
+              <li>Configure your Push Chain settings in providers/PushChainProviders.tsx</li>
+              <li>Customize the app metadata in app/layout.tsx</li>
+              <li>Add your chain configuration and RPC URLs</li>
+              <li>Explore the @pushchain/ui-kit for more components</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}`;
+    await fs.writeFile(path.join(appDir, 'page.tsx'), page);
+    // Create global CSS (Tailwind directives only)
+    const globalCss = `@tailwind base;
+@tailwind components;
+@tailwind utilities;`;
+    await fs.writeFile(path.join(appDir, 'globals.css'), globalCss);
+}
+async function createPushChainIntegration(options) {
+    // Create providers directory
+    const providersDir = path.join(options.targetDir, 'src', 'providers');
+    await fs.ensureDir(providersDir);
+    // Create PushChainProviders.tsx following your pattern but with Next.js specific comments
+    const pushchainProviders = `'use client'
+
+import {
+  PushUI,
+  PushUniversalWalletProvider,
+  type AppMetadata,
+  type ProviderConfigProps,
+} from "@pushchain/ui-kit";
+
+/**
+ * PushChainProviders Component for Next.js
+ * 
+ * This component wraps your entire Next.js application with Push Chain's Universal Wallet Provider.
+ * It configures the wallet connection options, network settings, and app metadata.
+ * 
+ * Configuration Guide:
+ * - network: Choose between MAINNET, TESTNET, or DEV
+ * - login: Configure authentication methods (email, google, wallet)
+ * - modal: Customize the UI appearance and behavior
+ * - chainConfig: Add your custom RPC endpoints
+ * - appMetadata: Brand your app with logo, title, and description
+ * 
+ * Next.js Specific Notes:
+ * - This component uses 'use client' directive for client-side functionality
+ * - Environment variables should be prefixed with NEXT_PUBLIC_ for client access
+ * - Metadata is also configured in app/layout.tsx for SEO
+ */
+
+const PushChainProviders = ({ children }: { children: React.ReactNode }) => {
+  // Wallet configuration - customize these settings for your app
+  const walletConfig: ProviderConfigProps = {
+    // Network selection: MAINNET for production, TESTNET for development
+    network: PushUI.CONSTANTS.PUSH_NETWORK.TESTNET,
+    
+    // Login options - enable/disable authentication methods
+    login: {
+      email: true,        // Allow email authentication
+      google: true,       // Allow Google OAuth
+      wallet: {
+        enabled: true,    // Allow wallet connection (MetaMask, etc.)
+      },
+      appPreview: true,   // Show app preview in login modal
+    },
+    
+    // Modal UI customization
+    modal: {
+      // Layout: SPLIT (side-by-side) or STACKED (vertical)
+      loginLayout: PushUI.CONSTANTS.LOGIN.LAYOUT.SPLIT,
+      
+      // Connected wallet display: HOVER (on hover) or FULL (always visible)
+      connectedLayout: PushUI.CONSTANTS.CONNECTED.LAYOUT.HOVER,
+      
+      // Show app preview in modals
+      appPreview: true,
+      
+      // Background interaction when modal is open: BLUR or NONE
+      connectedInteraction: PushUI.CONSTANTS.CONNECTED.INTERACTION.BLUR,
+    },
+    
+    // Chain configuration - add your custom RPC endpoints here
+    chainConfig: {
+      rpcUrls: {
+        // Ethereum Sepolia testnet (for testing)
+        "eip155:11155111": ["https://sepolia.gateway.tenderly.co/"],
+        
+        // Add more chains as needed:
+        // "eip155:1": ["https://mainnet.infura.io/v3/YOUR_PROJECT_ID"], // Ethereum Mainnet
+        // "eip155:137": ["https://polygon-rpc.com/"], // Polygon
+        // "eip155:42161": ["https://arb1.arbitrum.io/rpc"], // Arbitrum
+        // "eip155:10": ["https://mainnet.optimism.io"], // Optimism
+        // "eip155:8453": ["https://mainnet.base.org"], // Base
+      },
+    },
+  };
+
+  // App metadata - customize with your app's branding
+  const appMetadata: AppMetadata = {
+    // Your app's logo URL (can be a URL or base64 data URI)
+    logoUrl: "https://avatars.githubusercontent.com/u/64157541?v=4",
+    
+    // Your app's display name
+    title: "${options.projectName}",
+    
+    // Brief description of your app (shown in wallet connection prompts)
+    description:
+      "Push Chain is a shared state L1 blockchain that allows all chains to unify, enabling apps of any chain to be accessed by users of any chain.",
+  };
+
+  return (
+    <PushUniversalWalletProvider config={walletConfig} app={appMetadata}>
+      {children}
+    </PushUniversalWalletProvider>
+  );
+};
+
+export { PushChainProviders };`;
+    await fs.writeFile(path.join(providersDir, 'PushChainProviders.tsx'), pushchainProviders);
+    // Create .env.local file for Next.js with configuration notes
+    const envFile = `# Push Chain Configuration for Next.js
+# 
+# This file contains environment variables for your Push Chain application.
+# In Next.js, client-side variables must be prefixed with NEXT_PUBLIC_
+#
+# IMPORTANT: Never commit sensitive API keys to version control!
+# This file (.env.local) is automatically ignored by Git.
+
+# Push Chain Network Configuration
+# Options: mainnet, testnet, dev
+NEXT_PUBLIC_PUSHCHAIN_NETWORK=testnet
+
+# Optional: Custom API endpoints (if you have specific requirements)
+# NEXT_PUBLIC_PUSHCHAIN_API_ENDPOINT=https://your-custom-endpoint.com
+
+# Optional: App-specific configuration
+# NEXT_PUBLIC_APP_NAME=${options.projectName}
+# NEXT_PUBLIC_APP_VERSION=1.0.0
+
+# Server-side only variables (without NEXT_PUBLIC_ prefix)
+# These are only available in API routes and server components
+# PRIVATE_API_KEY=your_private_key_here`;
+    await fs.writeFile(path.join(options.targetDir, '.env.local'), envFile);
+}
+async function createESLintConfig(options) {
+    const eslintConfig = {
+        extends: [
+            "next/core-web-vitals",
+            "@typescript-eslint/recommended"
+        ],
+        parser: "@typescript-eslint/parser",
+        plugins: ["@typescript-eslint"],
+        rules: {
+            "@typescript-eslint/no-unused-vars": "warn",
+            "@typescript-eslint/no-explicit-any": "warn"
+        }
+    };
+    await fs.writeJSON(path.join(options.targetDir, '.eslintrc.json'), eslintConfig, { spaces: 2 });
+}
+async function createTailwindConfig(options) {
+    const tailwindConfig = `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}`;
+    await fs.writeFile(path.join(options.targetDir, 'tailwind.config.js'), tailwindConfig);
+    // PostCSS config
+    const postcssConfig = `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}`;
+    await fs.writeFile(path.join(options.targetDir, 'postcss.config.js'), postcssConfig);
+}
+// Removed shadcn config and components for Tailwind-only setup
+//# sourceMappingURL=nextjs.js.map