create-fogo-app 1.0.0

package/README.md

@@ -0,0 +1,109 @@
+# create-fogo-app
+
+Scaffold a production-ready Fogo dApp with Sessions SDK in seconds.
+
+## 🚀 Quick Start
+
+```bash
+npx create-fogo-app my-fogo-app
+cd my-fogo-app
+npm install
+npm run dev
+```
+
+## 📦 What's Included
+
+- **Next.js 14** with App Router and TypeScript
+- **Fogo Sessions SDK** pre-configured for gasless transactions
+- **Solana Wallet Adapters** (Phantom, Solflare, etc.)
+- **TailwindCSS** + **shadcn/ui** for beautiful UI
+- **SPL Memo Demo** to showcase session key signing
+
+## 🎯 Features
+
+- ✅ Zero-friction setup - just run and start building
+- ✅ Gasless transactions via Fogo Sessions
+- ✅ Session key management out of the box
+- ✅ Modern, responsive UI components
+- ✅ TypeScript for type safety
+- ✅ Production-ready configuration
+
+## 📖 Usage
+
+### Create a New Project
+
+```bash
+# Interactive mode
+npx create-fogo-app
+
+# With project name
+npx create-fogo-app my-awesome-dapp
+```
+
+### Configure Your App
+
+After creating your project:
+
+1. Update `.env` with your paymaster details:
+
+   ```env
+   NEXT_PUBLIC_PAYMASTER_URL=your-paymaster-url
+   NEXT_PUBLIC_SPONSOR_PUBLIC_KEY=your-sponsor-key
+   ```
+
+2. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+3. Start developing:
+   ```bash
+   npm run dev
+   ```
+
+## 🏗️ What Gets Scaffolded
+
+```
+my-fogo-app/
+├── app/
+│   ├── layout.tsx          # Root layout with Fogo providers
+│   ├── page.tsx            # Home page with demo
+│   ├── providers.tsx       # Fogo Sessions + Wallet setup
+│   └── globals.css         # Global styles
+├── components/
+│   ├── ui/                 # shadcn/ui components
+│   ├── SessionButton.tsx   # Session management
+│   └── MemoDemo.tsx        # SPL Memo demo
+├── hooks/
+│   └── useFogoSession.ts   # Custom session hook
+├── lib/
+│   └── utils.ts            # Utilities
+├── .env.example            # Environment template
+├── next.config.ts          # Next.js config
+├── tailwind.config.ts      # Tailwind config
+└── package.json
+```
+
+## 🔧 Requirements
+
+- Node.js 18 or higher
+- npm, yarn, or pnpm
+
+## 📚 Learn More
+
+- [Fogo Documentation](https://fogo.io/docs)
+- [Fogo Sessions SDK](https://github.com/fogo-foundation/sessions-sdk)
+- [Example Apps](https://github.com/fogo-foundation/sessions-example-vite)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please open an issue or submit a PR.
+
+## 📄 License
+
+MIT
+
+---
+
+Built with 🔥 by the Fogo community

package/bin/cli.js

@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+
+import { Command } from "commander";
+import prompts from "prompts";
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+import chalk from "chalk";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const program = new Command();
+
+program
+  .name("create-fogo-app")
+  .description("Scaffold a production-ready Fogo dApp with Sessions SDK")
+  .version("1.0.0")
+  .argument("[project-name]", "Name of your project")
+  .action(async (projectName) => {
+    console.log(chalk.bold.cyan("\n🔥 Welcome to create-fogo-app!\n"));
+
+    // Prompt for project name if not provided
+    if (!projectName) {
+      const response = await prompts({
+        type: "text",
+        name: "projectName",
+        message: "What is your project named?",
+        initial: "my-fogo-app",
+        validate: (value) => {
+          if (!value) return "Project name is required";
+          if (!/^[a-z0-9-_]+$/.test(value)) {
+            return "Project name can only contain lowercase letters, numbers, hyphens, and underscores";
+          }
+          return true;
+        },
+      });
+
+      if (!response.projectName) {
+        console.log(chalk.red("\n❌ Project creation cancelled\n"));
+        process.exit(1);
+      }
+
+      projectName = response.projectName;
+    }
+
+    const targetDir = path.join(process.cwd(), projectName);
+
+    // Check if directory already exists
+    if (fs.existsSync(targetDir)) {
+      console.log(
+        chalk.red(`\n❌ Directory "${projectName}" already exists!\n`)
+      );
+      process.exit(1);
+    }
+
+    console.log(
+      chalk.blue(`\n📦 Creating project in ${chalk.bold(targetDir)}...\n`)
+    );
+
+    try {
+      // Copy template directory
+      const templateDir = path.join(__dirname, "..", "template");
+      await fs.copy(templateDir, targetDir);
+
+      // Update package.json with project name
+      const packageJsonPath = path.join(targetDir, "package.json");
+      const packageJson = await fs.readJson(packageJsonPath);
+      packageJson.name = projectName;
+      await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+
+      // Copy .env.example to .env
+      const envExamplePath = path.join(targetDir, ".env.example");
+      const envPath = path.join(targetDir, ".env");
+      if (fs.existsSync(envExamplePath)) {
+        await fs.copy(envExamplePath, envPath);
+      }
+
+      console.log(chalk.green("✅ Project created successfully!\n"));
+      console.log(chalk.bold("Next steps:\n"));
+      console.log(chalk.cyan(`  cd ${projectName}`));
+      console.log(chalk.cyan("  npm install"));
+      console.log(chalk.cyan("  npm run dev\n"));
+      console.log(chalk.yellow("⚠️  Important:"));
+      console.log(
+        chalk.yellow(
+          "  Update .env with your Paymaster URL and Sponsor Public Key\n"
+        )
+      );
+      console.log(chalk.magenta("📚 Learn more: https://fogo.io/docs\n"));
+    } catch (error) {
+      console.log(chalk.red(`\n❌ Error creating project: ${error.message}\n`));
+      process.exit(1);
+    }
+  });
+
+program.parse();

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "create-fogo-app",
+  "version": "1.0.0",
+  "description": "CLI to scaffold a Fogo dApp with Sessions SDK pre-configured",
+  "type": "module",
+  "bin": {
+    "create-fogo-app": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "keywords": [
+    "fogo",
+    "solana",
+    "web3",
+    "blockchain",
+    "sessions",
+    "dapp",
+    "cli",
+    "scaffold"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.0.0",
+    "fs-extra": "^11.2.0",
+    "prompts": "^2.4.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/template/.env.example

@@ -0,0 +1,10 @@
+# Fogo RPC Endpoint (Testnet - zero friction for development)
+NEXT_PUBLIC_FOGO_RPC_URL=https://testnet.fogo.io
+
+# Uncomment for Mainnet (requires FluxRPC or custom endpoint)
+# NEXT_PUBLIC_FOGO_RPC_URL=https://your-mainnet-rpc-url.com
+
+# Paymaster Configuration
+# Update these values with your actual paymaster details
+NEXT_PUBLIC_PAYMASTER_URL=https://paymaster.testnet.fogo.io
+NEXT_PUBLIC_SPONSOR_PUBLIC_KEY=YourSponsorPublicKeyHere

package/template/README.md

@@ -0,0 +1,121 @@
+# Fogo Sessions dApp
+
+A production-ready Next.js application with Fogo Sessions SDK pre-configured for gasless transactions.
+
+## 🚀 Features
+
+- **Gasless Transactions**: Users interact without paying gas fees
+- **Session Keys**: One-time approval for seamless UX
+- **SPL Memo Demo**: "Say GM" button demonstrates session key signing
+- **Wallet Integration**: Supports Phantom, Solflare, and all Solana wallets
+- **Modern Stack**: Next.js 14, TypeScript, TailwindCSS, shadcn/ui
+
+## 📋 Prerequisites
+
+- Node.js 18+ installed
+- A Solana wallet (Phantom, Solflare, etc.)
+- Fogo testnet tokens (for testing)
+
+## 🛠️ Getting Started
+
+### 1. Install Dependencies
+
+```bash
+npm install
+```
+
+### 2. Configure Environment
+
+Copy `.env.example` to `.env` and update the values:
+
+```env
+NEXT_PUBLIC_FOGO_RPC_URL=https://testnet.fogo.io
+NEXT_PUBLIC_PAYMASTER_URL=https://paymaster.testnet.fogo.io
+NEXT_PUBLIC_SPONSOR_PUBLIC_KEY=YourSponsorPublicKeyHere
+```
+
+> **Important**: You need to set up a paymaster sponsor account. Visit [Fogo Documentation](https://fogo.io/docs) for instructions.
+
+### 3. Run Development Server
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+## 🎮 How to Use
+
+1. **Connect Wallet**: Click the wallet button to connect your Solana wallet
+2. **Establish Session**: Click "Establish Session" to create a session key (one-time approval)
+3. **Say GM**: Click "Say GM 👋" to send a memo transaction without a wallet popup!
+
+The transaction is signed by your session key in the background and sent via the paymaster.
+
+## 📁 Project Structure
+
+```
+├── app/
+│   ├── layout.tsx          # Root layout with providers
+│   ├── page.tsx            # Home page
+│   ├── providers.tsx       # Fogo Sessions & Wallet providers
+│   └── globals.css         # Global styles
+├── components/
+│   ├── ui/                 # shadcn/ui components
+│   ├── SessionButton.tsx   # Session management UI
+│   └── MemoDemo.tsx        # SPL Memo demo
+├── hooks/
+│   └── useFogoSession.ts   # Custom session hook
+└── lib/
+    └── utils.ts            # Utility functions
+```
+
+## 🔑 Key Concepts
+
+### Fogo Sessions
+
+Fogo Sessions enable a Web2-like UX in Web3 by:
+
+- Creating temporary session keys with scoped permissions
+- Allowing transactions without repeated wallet approvals
+- Enabling gasless transactions via paymasters
+
+### Session Flow
+
+1. User connects main wallet
+2. App requests session with specific limits
+3. User approves once
+4. Session key signs transactions in background
+5. Paymaster covers gas fees
+
+## 🚢 Deployment
+
+### Build for Production
+
+```bash
+npm run build
+npm start
+```
+
+### Deploy to Vercel
+
+```bash
+npx vercel
+```
+
+Make sure to add environment variables in your Vercel project settings.
+
+## 📚 Learn More
+
+- [Fogo Documentation](https://fogo.io/docs)
+- [Fogo Sessions SDK](https://github.com/fogo-foundation/sessions-sdk)
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Solana Web3.js](https://solana-labs.github.io/solana-web3.js/)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📄 License
+
+MIT

package/template/app/globals.css

@@ -0,0 +1,62 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Solana Wallet Adapter Styles */
+@import "@solana/wallet-adapter-react-ui/styles.css";

package/template/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { Providers } from "./providers";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Fogo Sessions dApp",
+  description: "Experience gasless transactions with Fogo Sessions",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/template/app/page.tsx

@@ -0,0 +1,95 @@
+import { SessionButton } from '@/components/SessionButton';
+import { MemoDemo } from '@/components/MemoDemo';
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-gradient-to-b from-background to-muted/20">
+      <div className="container mx-auto px-4 py-16">
+        <div className="max-w-4xl mx-auto space-y-12">
+          {/* Hero Section */}
+          <div className="text-center space-y-4">
+            <h1 className="text-5xl font-bold bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent">
+              Welcome to Fogo Sessions
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              Experience the future of Web3 UX with gasless transactions powered by session keys
+            </p>
+          </div>
+
+          {/* Demo Cards */}
+          <div className="grid md:grid-cols-2 gap-6">
+            <SessionButton />
+            <MemoDemo />
+          </div>
+
+          {/* How It Works */}
+          <div className="bg-card border rounded-lg p-8 space-y-6">
+            <h2 className="text-2xl font-semibold">How It Works</h2>
+            
+            <div className="grid gap-4">
+              <div className="flex gap-4">
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
+                  1
+                </div>
+                <div>
+                  <h3 className="font-semibold mb-1">Connect Your Wallet</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Use any Solana-compatible wallet (Phantom, Solflare, etc.)
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex gap-4">
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
+                  2
+                </div>
+                <div>
+                  <h3 className="font-semibold mb-1">Establish a Session</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Approve once to create a temporary session key with scoped permissions
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex gap-4">
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
+                  3
+                </div>
+                <div>
+                  <h3 className="font-semibold mb-1">Interact Seamlessly</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Click "Say GM" and watch the transaction complete without any wallet popup!
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex gap-4">
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
+                  4
+                </div>
+                <div>
+                  <h3 className="font-semibold mb-1">Gasless Transactions</h3>
+                  <p className="text-sm text-muted-foreground">
+                    The paymaster covers gas fees, and your session key signs in the background
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Tech Stack */}
+          <div className="text-center space-y-4">
+            <h3 className="text-lg font-semibold text-muted-foreground">Built With</h3>
+            <div className="flex flex-wrap justify-center gap-4 text-sm">
+              <span className="px-4 py-2 bg-muted rounded-full">Next.js 14</span>
+              <span className="px-4 py-2 bg-muted rounded-full">Fogo Sessions SDK</span>
+              <span className="px-4 py-2 bg-muted rounded-full">TypeScript</span>
+              <span className="px-4 py-2 bg-muted rounded-full">TailwindCSS</span>
+              <span className="px-4 py-2 bg-muted rounded-full">Solana Web3.js</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

package/template/app/providers.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { FogoSessionProvider } from '@fogo/sessions-sdk-react';
+import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
+import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
+import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
+import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';
+import { useMemo } from 'react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const endpoint = process.env.NEXT_PUBLIC_FOGO_RPC_URL || 'https://testnet.fogo.io';
+  
+  const wallets = useMemo(
+    () => [
+      new PhantomWalletAdapter(),
+      new SolflareWalletAdapter(),
+    ],
+    []
+  );
+
+  return (
+    <ConnectionProvider endpoint={endpoint}>
+      <WalletProvider wallets={wallets} autoConnect>
+        <WalletModalProvider>
+          <FogoSessionProvider
+            endpoint={endpoint}
+            paymasterUrl={process.env.NEXT_PUBLIC_PAYMASTER_URL || ''}
+            sponsor={process.env.NEXT_PUBLIC_SPONSOR_PUBLIC_KEY || ''}
+            domain={typeof window !== 'undefined' ? window.location.origin : ''}
+            tokens={[]}
+            defaultRequestedLimits={{}}
+          >
+            {children}
+          </FogoSessionProvider>
+        </WalletModalProvider>
+      </WalletProvider>
+    </ConnectionProvider>
+  );
+}

package/template/components/MemoDemo.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { useFogoSession } from '@/hooks/useFogoSession';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useConnection } from '@solana/wallet-adapter-react';
+import { TransactionMessage, VersionedTransaction, PublicKey } from '@solana/web3.js';
+import { useState } from 'react';
+import { MessageSquare, Loader2, CheckCircle2, XCircle } from 'lucide-react';
+
+export function MemoDemo() {
+  const { sessionPublicKey, sendTransaction, payer } = useFogoSession();
+  const { connection } = useConnection();
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [message, setMessage] = useState('');
+  const [signature, setSignature] = useState('');
+
+  const handleSayGM = async () => {
+    if (!sessionPublicKey || !payer) {
+      setStatus('error');
+      setMessage('Please establish a session first');
+      return;
+    }
+
+    try {
+      setStatus('loading');
+      setMessage('Sending memo...');
+      
+      // SPL Memo Program ID
+      const MEMO_PROGRAM_ID = new PublicKey('MemoSq4gqABAXKb96qnH8TysNcWxMyWCqXgDLGmfcHr');
+      
+      // Create memo instruction
+      const memoInstruction = {
+        programId: MEMO_PROGRAM_ID,
+        keys: [],
+        data: Buffer.from('Hello Fogo! 🔥', 'utf-8'),
+      };
+
+      // Get recent blockhash
+      const { blockhash } = await connection.getLatestBlockhash();
+
+      // Build transaction with session key as signer
+      const messageV0 = new TransactionMessage({
+        payerKey: payer,
+        recentBlockhash: blockhash,
+        instructions: [memoInstruction],
+      }).compileToV0Message();
+
+      const transaction = new VersionedTransaction(messageV0);
+      
+      // Send via paymaster (no wallet popup!)
+      const sig = await sendTransaction(transaction);
+      
+      setStatus('success');
+      setMessage('Memo sent successfully! No wallet popup needed 🎉');
+      setSignature(sig);
+    } catch (error: any) {
+      setStatus('error');
+      setMessage(`Error: ${error.message || 'Failed to send memo'}`);
+      console.error('Memo transaction error:', error);
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <MessageSquare className="h-5 w-5" />
+          Say GM Demo
+        </CardTitle>
+        <CardDescription>
+          Send a memo transaction using your session key (gasless!)
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <Button 
+          onClick={handleSayGM} 
+          disabled={!sessionPublicKey || status === 'loading'}
+          className="w-full"
+          size="lg"
+        >
+          {status === 'loading' ? (
+            <>
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              Sending...
+            </>
+          ) : (
+            <>
+              Say GM 👋
+            </>
+          )}
+        </Button>
+
+        {status !== 'idle' && (
+          <div className={`p-4 rounded-md ${
+            status === 'success' ? 'bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800' :
+            status === 'error' ? 'bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800' :
+            'bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800'
+          }`}>
+            <div className="flex items-start gap-2">
+              {status === 'success' && <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400 mt-0.5" />}
+              {status === 'error' && <XCircle className="h-5 w-5 text-red-600 dark:text-red-400 mt-0.5" />}
+              {status === 'loading' && <Loader2 className="h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5 animate-spin" />}
+              <div className="flex-1">
+                <p className={`text-sm font-medium ${
+                  status === 'success' ? 'text-green-900 dark:text-green-100' :
+                  status === 'error' ? 'text-red-900 dark:text-red-100' :
+                  'text-blue-900 dark:text-blue-100'
+                }`}>
+                  {message}
+                </p>
+                {signature && (
+                  <p className="text-xs mt-2 font-mono break-all text-green-700 dark:text-green-300">
+                    Signature: {signature.slice(0, 16)}...{signature.slice(-16)}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {!sessionPublicKey && (
+          <p className="text-sm text-muted-foreground text-center">
+            Connect your wallet and establish a session to try this demo
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/template/components/SessionButton.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useWallet } from '@solana/wallet-adapter-react';
+import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
+import { useFogoSession } from '@/hooks/useFogoSession';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Wallet, Key, CheckCircle2 } from 'lucide-react';
+
+export function SessionButton() {
+  const { connected } = useWallet();
+  const { sessionPublicKey, establishSession, endSession } = useFogoSession();
+
+  const handleEstablishSession = async () => {
+    try {
+      await establishSession();
+    } catch (error) {
+      console.error('Failed to establish session:', error);
+    }
+  };
+
+  const handleEndSession = async () => {
+    try {
+      await endSession();
+    } catch (error) {
+      console.error('Failed to end session:', error);
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Wallet className="h-5 w-5" />
+          Session Management
+        </CardTitle>
+        <CardDescription>
+          Connect your wallet and establish a session for gasless transactions
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex flex-col gap-2">
+          <WalletMultiButton className="!bg-primary !rounded-md" />
+          
+          {connected && !sessionPublicKey && (
+            <Button onClick={handleEstablishSession} className="w-full">
+              <Key className="h-4 w-4 mr-2" />
+              Establish Session
+            </Button>
+          )}
+
+          {sessionPublicKey && (
+            <div className="space-y-2">
+              <div className="flex items-center gap-2 text-sm text-green-600 dark:text-green-400">
+                <CheckCircle2 className="h-4 w-4" />
+                <span>Session Active</span>
+              </div>
+              <p className="text-xs text-muted-foreground font-mono break-all">
+                {sessionPublicKey.toBase58()}
+              </p>
+              <Button 
+                onClick={handleEndSession} 
+                variant="outline" 
+                className="w-full"
+              >
+                End Session
+              </Button>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/template/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/template/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/template/components/ui/package-additions.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "tailwindcss-animate": "^1.0.7",
+    "@radix-ui/react-slot": "^1.0.2"
+  }
+}

package/template/hooks/useFogoSession.ts

@@ -0,0 +1,23 @@
+'use client';
+
+import { useSession } from '@fogo/sessions-sdk-react';
+import { useWallet } from '@solana/wallet-adapter-react';
+
+export function useFogoSession() {
+  const { connected, publicKey } = useWallet();
+  const session = useSession();
+
+  const establishSession = async (requestedLimits = {}) => {
+    if (!connected) {
+      throw new Error('Please connect your wallet first');
+    }
+    await session.establish(requestedLimits);
+  };
+
+  return {
+    ...session,
+    establishSession,
+    isWalletConnected: connected,
+    walletAddress: publicKey?.toBase58(),
+  };
+}

package/template/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/template/next.config.ts

@@ -0,0 +1,15 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  webpack: (config) => {
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      fs: false,
+      net: false,
+      tls: false,
+    };
+    return config;
+  },
+};
+
+export default nextConfig;

package/template/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@fogo/sessions-sdk-react": "latest",
+    "@solana/wallet-adapter-base": "^0.9.23",
+    "@solana/wallet-adapter-react": "^0.15.35",
+    "@solana/wallet-adapter-react-ui": "^0.9.35",
+    "@solana/wallet-adapter-wallets": "^0.19.32",
+    "@solana/web3.js": "^1.95.0",
+    "next": "14.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0",
+    "lucide-react": "^0.344.0",
+    "tailwindcss-animate": "^1.0.7",
+    "@radix-ui/react-slot": "^1.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5",
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.0"
+  }
+}

package/template/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/template/tailwind.config.ts

@@ -0,0 +1,79 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+
+export default config;

package/template/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "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": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}