npm package: @gryffindors/create-dapp
Description: CLI tool to create Gryffindors DApps with Yellow Network integration
Author: Gryffindors Team
Latest version: 1.0.19

# @gryffindors/create-dapp

🧙‍♂️ CLI tool to create Gryffindors DApps with Yellow Network integration - the fastest way to build decentralized applications with Yellow Network.

## Quick Start

### Create a new DApp

```bash
# With npm
npx @gryffindors/create-dapp my-awesome-dapp

# With Bun (fastest)
bunx @gryffindors/create-dapp my-awesome-dapp

# With Yarn
yarn create @gryffindors/dapp my-awesome-dapp

# With pnpm
pnpm create @gryffindors/dapp my-awesome-dapp
```

### Interactive mode

```bash
npx @gryffindors/create-dapp
# Follow the prompts to configure your project
```

### Advanced Usage

```bash
npx @gryffindors/create-dapp [project-name] [options]

Options:
  -t, --template <template>  Template to use (default: "nextjs-ts-tailwind")
  --skip-install            Skip installing dependencies
  --skip-git                Skip initializing git repository
  -h, --help                Display help for command
```

## What's Included

The generated DApp includes:

- ⚡ **Next.js 15** with App Router
- 🔷 **TypeScript** for type safety
- 🎨 **Tailwind CSS v4** with dark theme
- 🧙‍♂️ **@gryffindors/yellow SDK** for Yellow Network integration
- 🔗 **Wagmi v2** for wallet connections
- 🦊 **MetaMask** connector pre-configured
- 📱 **Responsive dark UI** with modern design
- 🔐 **EIP-712 authentication** built-in
- 🚀 **Bun support** for faster development
- 📦 **Pre-built components** ready to use

## Features

### 🔥 Core Functionality
- **Wallet Connection**: MetaMask integration with Wagmi
- **Yellow Network**: Full session management and authentication
- **Channel Operations**: Deposit, withdraw, and transfer assets
- **Real-time Updates**: Live balance and transaction status
- **Multi-token Support**: USDC, USDT, DAI, WETH, WMATIC
- **Cross-chain Ready**: Polygon mainnet support

### 🛠️ Developer Experience
- **TypeScript First**: Full type safety and IntelliSense
- **Pre-built Components**: Ready-to-use UI components
- **Custom Hooks**: Simplified state management
- **Error Handling**: Comprehensive error boundaries
- **Dark Theme**: Modern dark UI with Tailwind CSS v4
- **Package Manager Agnostic**: Works with npm, yarn, pnpm, and bun

### 🎨 UI Components Included

#### Core Components
- `WalletConnector` - Connect/disconnect wallet with status
- `ChannelManager` - Complete channel management interface
- `TransferForm` - Send assets through Yellow Network
- `BalanceDisplay` - Show user balances with real-time updates
- `YellowAuthenticator` - Handle Yellow Network authentication
- `QuickDeposit` - One-click deposit interface
- `ChannelStatus` - Display channel connection status

#### Usage Examples

```tsx
import { 
  WalletConnector, 
  ChannelManager, 
  TransferForm,
  BalanceDisplay 
} from '@gryffindors/yellow';

function MyDApp() {
  return (
    <div className="min-h-screen bg-black text-white">
      <WalletConnector />
      <BalanceDisplay />
      <ChannelManager 
        tokenAddress="0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174"
        tokenSymbol="USDC"
      />
      <TransferForm />
    </div>
  );
}
```

## Templates

### nextjs-ts-tailwind (Default)
- **Next.js 15** with App Router and TypeScript
- **Tailwind CSS v4** with dark theme configuration
- **@gryffindors/yellow SDK** fully integrated
- **Wagmi v2** wallet connection setup
- **Pre-built UI components** with dark theme
- **Responsive design** optimized for mobile and desktop
- **Bun support** with lockfile included

### Project Structure
```
my-gryffindors-dapp/
├── app/
│   ├── layout.tsx          # Root layout with providers
│   ├── page.tsx            # Main dashboard with all components
│   ├── providers.tsx       # Wagmi and React Query setup
│   └── globals.css         # Tailwind and custom styles
├── public/                 # Static assets
├── next.config.ts          # Next.js configuration
├── tailwind.config.js      # Tailwind CSS v4 config
├── tsconfig.json          # TypeScript configuration
└── package.json           # Dependencies and scripts
```

## Development

To work on this CLI tool:

```bash
# Clone the repository
git clone <repo-url>
cd create-gryffindors-dapp

# Install dependencies
npm install

# Build the CLI
npm run build

# Test locally
npm run test
```

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## License

MIT