@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

# 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

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

Advanced Usage

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

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:

# 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