starkzap-starter 0.1.0

package/scripts/create-starkzap-app.mjs

@@ -0,0 +1,1749 @@
+#!/usr/bin/env node
+
+/**
+ * create-starkzap-app
+ * Interactive CLI to scaffold a Starkzap starter project
+ *
+ * Usage:
+ *   npx create-starkzap-app
+ *   npx create-starkzap-app my-app
+ */
+
+import { createRequire } from "module";
+import { execSync } from "child_process";
+import { existsSync, mkdirSync, writeFileSync, cpSync } from "fs";
+import { join, resolve } from "path";
+import { createInterface } from "readline";
+import { fileURLToPath } from "url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+// ─── Colours ──────────────────────────────────────────────────────────────────
+const c = {
+  reset:  "\x1b[0m",
+  bold:   "\x1b[1m",
+  dim:    "\x1b[2m",
+  cyan:   "\x1b[36m",
+  green:  "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue:   "\x1b[34m",
+  magenta:"\x1b[35m",
+  red:    "\x1b[31m",
+  white:  "\x1b[37m",
+  gray:   "\x1b[90m",
+};
+
+const bold   = (s) => `${c.bold}${s}${c.reset}`;
+const cyan   = (s) => `${c.cyan}${s}${c.reset}`;
+const green  = (s) => `${c.green}${s}${c.reset}`;
+const yellow = (s) => `${c.yellow}${s}${c.reset}`;
+const blue   = (s) => `${c.blue}${s}${c.reset}`;
+const gray   = (s) => `${c.gray}${s}${c.reset}`;
+const red    = (s) => `${c.red}${s}${c.reset}`;
+const dim    = (s) => `${c.dim}${s}${c.reset}`;
+
+// ─── Prompts ──────────────────────────────────────────────────────────────────
+function createReadline() {
+  return createInterface({ input: process.stdin, output: process.stdout });
+}
+
+async function prompt(question) {
+  const rl = createReadline();
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+
+async function select(question, options) {
+  console.log(`\n${bold(question)}`);
+  options.forEach((opt, i) => {
+    console.log(`  ${cyan(`[${i + 1}]`)} ${opt.label}  ${gray(opt.hint ?? "")}`);
+  });
+
+  while (true) {
+    const answer = await prompt(`\n${gray("›")} `);
+    const num = parseInt(answer, 10);
+    if (num >= 1 && num <= options.length) {
+      return options[num - 1];
+    }
+    console.log(red(`  Please enter a number between 1 and ${options.length}`));
+  }
+}
+
+async function confirm(question, defaultYes = true) {
+  const hint = defaultYes ? gray("[Y/n]") : gray("[y/N]");
+  const answer = await prompt(`${bold(question)} ${hint} `);
+  if (answer === "") return defaultYes;
+  return answer.toLowerCase().startsWith("y");
+}
+
+// ─── Banner ───────────────────────────────────────────────────────────────────
+function printBanner() {
+  console.clear();
+  console.log(`
+${c.bold}${c.blue}  ███████╗████████╗ █████╗ ██████╗ ██╗  ██╗███████╗ █████╗ ██████╗ ${c.reset}
+${c.bold}${c.blue}  ██╔════╝╚══██╔══╝██╔══██╗██╔══██╗██║ ██╔╝╚══███╔╝██╔══██╗██╔══██╗${c.reset}
+${c.bold}${c.cyan}  ███████╗   ██║   ███████║██████╔╝█████╔╝   ███╔╝ ███████║██████╔╝${c.reset}
+${c.bold}${c.cyan}  ╚════██║   ██║   ██╔══██║██╔══██╗██╔═██╗  ███╔╝  ██╔══██║██╔═══╝ ${c.reset}
+${c.bold}${c.white}  ███████║   ██║   ██║  ██║██║  ██║██║  ██╗███████╗██║  ██║██║     ${c.reset}
+${c.bold}${c.white}  ╚══════╝   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═╝     ${c.reset}
+
+  ${bold("create-starkzap-app")} ${dim("— Scaffold your Starknet app in seconds")}
+  ${gray("Built on Starknet · Powered by Starkzap SDK")}
+`);
+}
+
+// ─── Summary box ──────────────────────────────────────────────────────────────
+function printSummary(config) {
+  const walletLabel = config.framework.id === "expo"
+    ? "Privy (Expo — @privy-io/expo)"
+    : config.wallet === "privy"
+      ? "Privy (social/email login)"
+      : "Cartridge Controller (passkey/social)";
+
+  console.log(`
+${c.bold}${c.blue}  ┌─────────────────────────────────────────┐${c.reset}
+${c.bold}${c.blue}  │         Your project config              │${c.reset}
+${c.bold}${c.blue}  ├─────────────────────────────────────────┤${c.reset}
+${c.bold}${c.blue}  │${c.reset}  ${dim("Project")}     ${bold(config.projectName.padEnd(27))}${c.bold}${c.blue}│${c.reset}
+${c.bold}${c.blue}  │${c.reset}  ${dim("Framework")}   ${cyan(config.framework.label.padEnd(27))}${c.bold}${c.blue}│${c.reset}
+${c.bold}${c.blue}  │${c.reset}  ${dim("Wallet")}      ${green(walletLabel.padEnd(27))}${c.bold}${c.blue}│${c.reset}
+${c.bold}${c.blue}  │${c.reset}  ${dim("Network")}     ${yellow(config.network.padEnd(27))}${c.bold}${c.blue}│${c.reset}
+${c.bold}${c.blue}  │${c.reset}  ${dim("TypeScript")}  ${config.typescript ? green("Yes") : gray("No")} ${" ".repeat(24)}${c.bold}${c.blue}│${c.reset}
+${c.bold}${c.blue}  └─────────────────────────────────────────┘${c.reset}`);
+}
+
+// ─── File generators ──────────────────────────────────────────────────────────
+
+function genPackageJson(config) {
+  const isNextjs = config.framework.id.startsWith("nextjs");
+  const isVite   = config.framework.id === "vite-react";
+
+  const deps = {
+    starkzap: "latest",
+    starknet: "^6.11.0",
+    clsx: "^2.1.1",
+    "tailwind-merge": "^2.3.0",
+  };
+
+  if (isNextjs) {
+    deps.next = "^14.2.0";
+    deps.react = "^18.3.0";
+    deps["react-dom"] = "^18.3.0";
+  } else {
+    deps.react = "^18.3.0";
+    deps["react-dom"] = "^18.3.0";
+  }
+
+  if (config.wallet === "privy") {
+    deps["@privy-io/react-auth"] = "^1.80.0";
+    deps["@privy-io/node"] = "^1.10.0";
+  } else {
+    deps["@cartridge/controller"] = "latest";
+  }
+
+  const devDeps = {
+    typescript: "^5",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    tailwindcss: "^3.4.0",
+    autoprefixer: "^10.4.0",
+    postcss: "^8.4.0",
+  };
+
+  if (isNextjs) {
+    devDeps["@types/node"] = "^20";
+    devDeps.eslint = "^8";
+    devDeps["eslint-config-next"] = "14.2.0";
+  } else {
+    devDeps["@vitejs/plugin-react"] = "^4.3.0";
+    devDeps.vite = "^5.4.0";
+    devDeps["vite-tsconfig-paths"] = "^5.0.0";
+  }
+
+  const scripts = isNextjs
+    ? { dev: "next dev", build: "next build", start: "next start", lint: "next lint", "type-check": "tsc --noEmit" }
+    : { dev: "vite", build: "tsc && vite build", preview: "vite preview", "type-check": "tsc --noEmit" };
+
+  return JSON.stringify({ name: config.projectName, version: "0.1.0", private: true, scripts, dependencies: deps, devDependencies: devDeps }, null, 2);
+}
+
+function genEnvExample(config) {
+  const privyLines = config.wallet === "privy"
+    ? `
+# ── Privy ─────────────────────────────────────────────────────
+# Get from https://privy.io → App Settings
+NEXT_PUBLIC_PRIVY_APP_ID=
+PRIVY_APP_SECRET=          # server-side only, never expose to browser`
+    : `
+# ── Cartridge ─────────────────────────────────────────────────
+# No extra keys needed — Cartridge handles auth natively`;
+
+  return `# ─────────────────────────────────────────────────────────────────
+# Starkzap Starter — Environment Variables
+# Copy to .env.local and fill in your values.
+# NEVER commit .env.local to source control.
+# ─────────────────────────────────────────────────────────────────
+
+# Network: "sepolia" (testnet) or "mainnet"
+NEXT_PUBLIC_STARKNET_NETWORK=${config.network}
+
+# Your Starknet RPC endpoint
+# Free options: https://starknet-sepolia.public.blastapi.io
+#               https://free-rpc.nethermind.io/sepolia-juno
+NEXT_PUBLIC_STARKNET_RPC_URL=https://starknet-sepolia.public.blastapi.io
+${privyLines}
+
+# ── AVNU Paymaster (gasless) ───────────────────────────────────
+# Optional — leave blank to skip gas sponsorship
+NEXT_PUBLIC_AVNU_API_KEY=
+
+# ── App ───────────────────────────────────────────────────────
+NEXT_PUBLIC_APP_NAME=My Starkzap App
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+`;
+}
+
+function genStarkzapLib(config) {
+  const walletImport = config.wallet === "privy"
+    ? `import { StarkZap } from "starkzap";`
+    : `import { StarkZap } from "starkzap";\nimport "@cartridge/controller";`;
+
+  return `/**
+ * lib/starkzap.ts — Single SDK instance, import anywhere.
+ */
+${walletImport}
+
+export type Network = "mainnet" | "sepolia";
+
+export const network: Network =
+  (process.env.NEXT_PUBLIC_STARKNET_NETWORK as Network) ?? "sepolia";
+
+const rpcUrl = process.env.NEXT_PUBLIC_STARKNET_RPC_URL;
+
+export const sdk = new StarkZap({
+  network,
+  ...(rpcUrl ? { rpcUrl } : {}),
+});
+`;
+}
+
+function genUseWalletPrivy() {
+  return `"use client";
+/**
+ * hooks/useWallet.ts — Privy social/email wallet connection.
+ *
+ * Users sign in with email, Google, Apple — no seed phrases needed.
+ * Keys are managed server-side by Privy.
+ *
+ * Docs: https://docs.starknet.io/build/starkzap/wallets/privy
+ */
+
+import { useState, useCallback } from "react";
+import { PrivySigner, OnboardStrategy, accountPresets } from "starkzap";
+import { sdk } from "@/lib/starkzap";
+
+export type WalletState = {
+  wallet: Awaited<ReturnType<typeof sdk.connectWallet>> | null;
+  address: string | null;
+  isConnecting: boolean;
+  isReady: boolean;
+  error: string | null;
+  connect: () => Promise<void>;
+  disconnect: () => void;
+};
+
+export function useWallet(): WalletState {
+  const [wallet, setWallet]       = useState<WalletState["wallet"]>(null);
+  const [address, setAddress]     = useState<string | null>(null);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isReady, setIsReady]     = useState(false);
+  const [error, setError]         = useState<string | null>(null);
+
+  const connect = useCallback(async () => {
+    setIsConnecting(true);
+    setError(null);
+
+    try {
+      // 1. Get the Privy access token (from your Privy React provider)
+      //    Replace this with: const { getAccessToken } = usePrivy();
+      const accessToken = await getPrivyAccessToken(); // implement this
+
+      // 2. Ask your backend to create or retrieve the user's Starknet wallet
+      const walletRes = await fetch("/api/wallet/starknet", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: \`Bearer \${accessToken}\`,
+        },
+      });
+      const { wallet: privyWallet } = await walletRes.json();
+
+      // 3. Connect via SDK onboard (recommended) or PrivySigner directly
+      const onboard = await sdk.onboard({
+        strategy: OnboardStrategy.Privy,
+        accountPreset: accountPresets.argentXV050,
+        privy: {
+          resolve: async () => ({
+            walletId: privyWallet.id,
+            publicKey: privyWallet.publicKey,
+            serverUrl: "/api/wallet/sign", // your signing endpoint
+          }),
+        },
+        deploy: "if_needed",
+      });
+
+      const connectedWallet = onboard.wallet;
+      setWallet(connectedWallet);
+      setAddress(privyWallet.address);
+      setIsReady(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Connection failed");
+    } finally {
+      setIsConnecting(false);
+    }
+  }, []);
+
+  const disconnect = useCallback(() => {
+    setWallet(null);
+    setAddress(null);
+    setIsReady(false);
+    setError(null);
+  }, []);
+
+  return { wallet, address, isConnecting, isReady, error, connect, disconnect };
+}
+
+// ── Placeholder — replace with your Privy hook ───────────────
+async function getPrivyAccessToken(): Promise<string> {
+  // In a real app: const { getAccessToken } = usePrivy(); return getAccessToken();
+  throw new Error("Implement getPrivyAccessToken using usePrivy() hook");
+}
+`;
+}
+
+function genUseWalletCartridge() {
+  return `"use client";
+/**
+ * hooks/useWallet.ts — Cartridge Controller wallet connection.
+ *
+ * Users sign in with Google, Twitter, or passkey (Face ID / Touch ID).
+ * Policy-matching transactions are automatically gasless (sponsored by Cartridge).
+ *
+ * Docs: https://docs.starknet.io/build/starkzap/wallets/cartridge
+ */
+
+import { useState, useCallback } from "react";
+import { OnboardStrategy } from "starkzap";
+import { sdk } from "@/lib/starkzap";
+
+export type WalletState = {
+  wallet: Awaited<ReturnType<typeof sdk.connectWallet>> | null;
+  address: string | null;
+  isConnecting: boolean;
+  isReady: boolean;
+  error: string | null;
+  connect: () => Promise<void>;
+  disconnect: () => void;
+};
+
+/**
+ * Define which contracts/methods Cartridge will sponsor.
+ * Only transactions matching these policies are gasless.
+ * Edit this list to match your app's contracts.
+ */
+const CARTRIDGE_POLICIES = [
+  {
+    // STRK transfers — gasless
+    target: "0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d",
+    method: "transfer",
+  },
+  // Add your contract addresses here:
+  // { target: "0xYOUR_CONTRACT", method: "your_method" },
+];
+
+export function useWallet(): WalletState {
+  const [wallet, setWallet]       = useState<WalletState["wallet"]>(null);
+  const [address, setAddress]     = useState<string | null>(null);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isReady, setIsReady]     = useState(false);
+  const [error, setError]         = useState<string | null>(null);
+
+  const connect = useCallback(async () => {
+    setIsConnecting(true);
+    setError(null);
+
+    try {
+      // Cartridge opens a popup for social/passkey login.
+      // Users approve policies once — matching txs are gasless after that.
+      const onboard = await sdk.onboard({
+        strategy: OnboardStrategy.Cartridge,
+        cartridge: {
+          policies: CARTRIDGE_POLICIES,
+        },
+        deploy: "if_needed",
+      });
+
+      const connectedWallet = onboard.wallet;
+      const userAddress     = await connectedWallet.getAddress();
+
+      setWallet(connectedWallet);
+      setAddress(userAddress);
+      setIsReady(true);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Connection failed";
+      // Guide users if popup was blocked
+      if (msg.toLowerCase().includes("popup")) {
+        setError("Popup was blocked. Please allow popups for this site and try again.");
+      } else {
+        setError(msg);
+      }
+    } finally {
+      setIsConnecting(false);
+    }
+  }, []);
+
+  const disconnect = useCallback(() => {
+    setWallet(null);
+    setAddress(null);
+    setIsReady(false);
+    setError(null);
+  }, []);
+
+  return { wallet, address, isConnecting, isReady, error, connect, disconnect };
+}
+`;
+}
+
+function genPrivyApiRoute() {
+  return `/**
+ * app/api/wallet/starknet/route.ts
+ *
+ * Creates or retrieves a Privy-managed Starknet wallet for a user.
+ * Called client-side after Privy authentication.
+ *
+ * POST /api/wallet/starknet
+ * Body: { userId?: string }
+ */
+
+import { NextResponse } from "next/server";
+import { PrivyClient } from "@privy-io/node";
+
+const privy = new PrivyClient({
+  appId: process.env.PRIVY_APP_ID!,
+  appSecret: process.env.PRIVY_APP_SECRET!,
+});
+
+export async function POST(req: Request) {
+  try {
+    const { userId } = await req.json();
+
+    // Server-managed wallet (no user_id) — backend signs, no JWT needed.
+    // To link to a Privy user, pass user_id here.
+    const wallet = await privy.wallets().create({
+      chain_type: "starknet",
+      ...(userId ? { user_id: userId } : {}),
+    });
+
+    return NextResponse.json({
+      wallet: {
+        id: wallet.id,
+        address: wallet.address,
+        publicKey: wallet.public_key,
+      },
+    });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Failed to create wallet";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+`;
+}
+
+function genPrivySignRoute() {
+  return `/**
+ * app/api/wallet/sign/route.ts
+ *
+ * Signs a transaction hash using the Privy server-side signer.
+ * Private keys NEVER leave Privy's infrastructure.
+ *
+ * POST /api/wallet/sign
+ * Body: { walletId: string, hash: string }
+ */
+
+import { NextResponse } from "next/server";
+import { PrivyClient } from "@privy-io/node";
+
+const privy = new PrivyClient({
+  appId: process.env.PRIVY_APP_ID!,
+  appSecret: process.env.PRIVY_APP_SECRET!,
+});
+
+export async function POST(req: Request) {
+  try {
+    const { walletId, hash } = await req.json();
+
+    if (!walletId || !hash) {
+      return NextResponse.json(
+        { error: "walletId and hash are required" },
+        { status: 400 }
+      );
+    }
+
+    const result = await privy.wallets().rawSign(walletId, {
+      params: { hash },
+    });
+
+    return NextResponse.json({ signature: result.signature });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Signing failed";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+`;
+}
+
+function genNextConfig(config) {
+  const transpile = config.wallet === "cartridge"
+    ? `["starkzap", "@cartridge/controller"]`
+    : `["starkzap"]`;
+
+  return `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ${transpile},
+};
+
+export default nextConfig;
+`;
+}
+
+function genViteConfig() {
+  return `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+  define: {
+    // Required for Starknet.js in Vite
+    global: "globalThis",
+  },
+  resolve: {
+    alias: {
+      "@": "/src",
+    },
+  },
+});
+`;
+}
+
+function genReadme(config) {
+  const walletSection = config.wallet === "privy"
+    ? `### Privy (Social Login)
+
+Users sign in with **email, Google, or Apple** — no seed phrase or wallet extension needed. Keys are managed server-side by Privy; private keys never reach your frontend.
+
+**Required env vars:**
+\`\`\`env
+NEXT_PUBLIC_PRIVY_APP_ID=your-privy-app-id
+PRIVY_APP_SECRET=your-privy-app-secret   # server-side only
+\`\`\`
+
+Get these from [privy.io](https://privy.io) → Create an app → Settings.
+
+**How it works:**
+1. User clicks Connect → your Privy auth flow runs
+2. Frontend gets access token → calls \`/api/wallet/starknet\` (already scaffolded)
+3. Backend creates wallet via Privy → returns walletId + publicKey
+4. Starkzap's \`OnboardStrategy.Privy\` wires the signer together
+5. Transactions are signed server-side via \`/api/wallet/sign\`
+
+See \`src/hooks/useWallet.ts\` and \`src/app/api/wallet/\` for the full implementation.`
+    : `### Cartridge Controller (Passkey / Social Login)
+
+Users sign in with **Google, Twitter, or biometrics** (Face ID, Touch ID, Windows Hello). A Cartridge popup handles auth — no extension needed.
+
+**No extra env vars needed** — Cartridge handles auth natively.
+
+**How policies work:**
+Edit the \`CARTRIDGE_POLICIES\` array in \`src/hooks/useWallet.ts\` to define which contracts/methods Cartridge will sponsor. Users approve these once on connect — all matching transactions are then automatically gasless.
+
+\`\`\`ts
+const CARTRIDGE_POLICIES = [
+  { target: "0xYOUR_CONTRACT", method: "your_method" },
+];
+\`\`\`
+
+**Note:** If a popup is blocked, guide users to allow popups for your domain.`;
+
+  const framework = config.framework.id;
+
+  return `# ⚡ ${config.projectName}
+
+Scaffolded with **create-starkzap-app** — a ${config.framework.label} starter for building on Starknet with the [Starkzap SDK](https://docs.starknet.io/build/starkzap/overview).
+
+## Stack
+
+| | |
+|---|---|
+| **Framework** | ${config.framework.label} |
+| **Wallet** | ${config.wallet === "privy" ? "Privy (social/email login)" : "Cartridge Controller (passkey/social)"} |
+| **Network** | ${config.network} |
+| **SDK** | Starkzap v2 |
+| **Styling** | Tailwind CSS |
+| **Language** | TypeScript |
+
+## Getting Started
+
+### 1. Install dependencies
+
+\`\`\`bash
+npm install
+\`\`\`
+
+### 2. Set up environment variables
+
+\`\`\`bash
+cp .env.example .env.local
+\`\`\`
+
+Fill in your values — see \`.env.example\` for descriptions.
+
+### 3. Run locally
+
+\`\`\`bash
+npm run dev
+\`\`\`
+
+Open [http://localhost:3000](http://localhost:3000).
+
+---
+
+## Wallet Setup
+
+${walletSection}
+
+---
+
+## Project Structure
+
+\`\`\`
+src/
+├── app/
+│   ├── layout.tsx              # Root layout
+│   ├── page.tsx                # Demo page
+│   ├── globals.css             # Global styles
+│   └── api/wallet/             # ${config.wallet === "privy" ? "Privy signing endpoints" : "(not used with Cartridge)"}
+├── components/
+│   ├── wallet/
+│   │   ├── WalletButton.tsx    # Connect/disconnect button
+│   │   └── TokenBalanceCard.tsx
+│   └── payment/
+│       └── PaymentForm.tsx     # Gasless send form
+├── hooks/
+│   ├── useWallet.ts            # ${config.wallet === "privy" ? "Privy" : "Cartridge"} connection
+│   ├── useTokenBalance.ts      # Live ERC-20 balances
+│   └── useGaslessTransfer.ts   # Gasless transfer hook
+└── lib/
+    ├── starkzap.ts             # SDK instance
+    └── utils.ts                # Helpers
+\`\`\`
+
+---
+
+## Adding Features
+
+### Token Swap
+
+\`\`\`ts
+import { AvnuSwapProvider, getPresets, Amount } from "starkzap";
+const { STRK, USDC } = getPresets(wallet.getChainId());
+const tx = await wallet.swap({ tokenIn: STRK, tokenOut: USDC, amountIn: Amount.parse("10", STRK) });
+await tx.wait();
+\`\`\`
+
+### STRK Staking
+
+\`\`\`ts
+const pools = await wallet.staking().getPools();
+const tx = await wallet.staking().stake({ pool: pools[0], amount: Amount.parse("100", STRK) });
+await tx.wait();
+\`\`\`
+
+---
+
+## Deployment
+
+\`\`\`bash
+# Vercel (recommended)
+npx vercel
+
+# Manual
+npm run build && npm start
+\`\`\`
+
+Set \`NEXT_PUBLIC_STARKNET_NETWORK=mainnet\` in your production env.
+
+---
+
+## Resources
+
+- [Starkzap Docs](https://docs.starknet.io/build/starkzap/overview)
+- [Starkzap GitHub](https://github.com/keep-starknet-strange/starkzap)
+- ${config.wallet === "privy" ? "[Privy Docs](https://docs.privy.io)" : "[Cartridge Docs](https://docs.cartridge.gg/controller/overview)"}
+- [Starkscan Explorer](https://${config.network === "mainnet" ? "" : "sepolia."}starkscan.co)
+
+---
+
+Built with [Starkzap SDK](https://docs.starknet.io/build/starkzap/overview) · Deployed on **Starknet ${config.network}**
+`;
+}
+
+// ─── Expo generators ─────────────────────────────────────────────────────────
+
+function genExpoPackageJson(config) {
+  return JSON.stringify({
+    name: config.projectName,
+    version: "0.1.0",
+    main: "expo-router/entry",
+    scripts: {
+      start: "expo start",
+      android: "expo start --android",
+      ios: "expo start --ios",
+      "type-check": "tsc --noEmit",
+    },
+    dependencies: {
+      "starkzap-native": "latest",
+      starkzap: "latest",
+      starknet: "^6.11.0",
+      expo: "~51.0.0",
+      "expo-router": "~3.5.0",
+      "expo-status-bar": "~1.12.1",
+      "react-native": "0.74.5",
+      react: "18.2.0",
+      "@privy-io/expo": "^0.5.0",
+      "react-native-get-random-values": "~1.11.0",
+      "fast-text-encoding": "^1.0.6",
+      buffer: "^6.0.3",
+      "@ethersproject/shims": "^5.7.0",
+      clsx: "^2.1.1",
+    },
+    devDependencies: {
+      typescript: "^5",
+      "@types/react": "~18.2.79",
+      "@types/react-native": "^0.73.0",
+      "@babel/core": "^7.24.0",
+    },
+  }, null, 2);
+}
+
+function genExpoMetroConfig() {
+  return `// metro.config.js
+const { getDefaultConfig } = require("expo/metro-config");
+const { withStarkzap } = require("starkzap-native/metro");
+
+const config = getDefaultConfig(__dirname);
+
+// withStarkzap injects required polyfills and resolver handling
+// for starkzap-native dependencies automatically.
+module.exports = withStarkzap(config);
+`;
+}
+
+function genExpoAppJson(config) {
+  return JSON.stringify({
+    expo: {
+      name: config.projectName,
+      slug: config.projectName,
+      version: "1.0.0",
+      orientation: "portrait",
+      scheme: config.projectName.toLowerCase().replace(/\s+/g, "-"),
+      userInterfaceStyle: "dark",
+      ios: { supportsTablet: true, bundleIdentifier: `com.starkzap.${config.projectName}` },
+      android: { adaptiveIcon: { backgroundColor: "#04060f" }, package: `com.starkzap.${config.projectName}` },
+      plugins: ["expo-router"],
+      experiments: { typedRoutes: true },
+    },
+  }, null, 2);
+}
+
+function genExpoBabelConfig() {
+  return `module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+  };
+};
+`;
+}
+
+function genExpoTsConfig() {
+  return JSON.stringify({
+    extends: "expo/tsconfig.base",
+    compilerOptions: {
+      strict: true,
+      paths: { "@/*": ["./*"] },
+    },
+    include: ["**/*.ts", "**/*.tsx", ".expo/types/**/*.d.ts", "expo-env.d.ts"],
+  }, null, 2);
+}
+
+function genExpoEnvExample(config) {
+  return `# ─────────────────────────────────────────────────────────────────
+# Starkzap Expo Starter — Environment Variables
+# Copy to .env and fill in your values.
+# NEVER commit .env to source control.
+# ─────────────────────────────────────────────────────────────────
+
+# Network: "sepolia" (testnet) or "mainnet"
+EXPO_PUBLIC_STARKNET_NETWORK=${config.network}
+
+# Free RPC endpoints:
+# Blast:   https://starknet-sepolia.public.blastapi.io
+EXPO_PUBLIC_STARKNET_RPC_URL=https://starknet-sepolia.public.blastapi.io
+
+# ── Privy ─────────────────────────────────────────────────────────
+# Get from https://privy.io → Create app → Expo/React Native
+# Important: create an Expo app in Privy, NOT a Next.js app
+EXPO_PUBLIC_PRIVY_APP_ID=
+
+# ── AVNU Paymaster (gasless) ──────────────────────────────────────
+# Optional — leave blank to skip gas sponsorship
+EXPO_PUBLIC_AVNU_API_KEY=
+`;
+}
+
+function genExpoStarkzapLib(config) {
+  return `/**
+ * lib/starkzap.ts — Single Starkzap SDK instance for Expo.
+ *
+ * Import from "starkzap-native" (not "starkzap") in React Native projects.
+ * The API is identical — starkzap-native adds Metro polyfills on top.
+ */
+import { StarkZap } from "starkzap-native";
+
+export type Network = "mainnet" | "sepolia";
+
+export const network: Network =
+  (process.env.EXPO_PUBLIC_STARKNET_NETWORK as Network) ?? "sepolia";
+
+const rpcUrl = process.env.EXPO_PUBLIC_STARKNET_RPC_URL;
+
+export const sdk = new StarkZap({
+  network,
+  ...(rpcUrl ? { rpcUrl } : {}),
+});
+`;
+}
+
+function genExpoUseWallet() {
+  return `/**
+ * hooks/useWallet.ts — Privy wallet connection for Expo (React Native).
+ *
+ * Uses @privy-io/expo — the mobile Privy SDK.
+ * Users sign in with email, Google, or Apple — no seed phrases needed.
+ *
+ * Docs: https://docs.starknet.io/build/starkzap/react-native
+ *       https://docs.privy.io/reference/react-native-sdk
+ */
+
+import { useState, useCallback } from "react";
+import { usePrivy } from "@privy-io/expo";
+import { OnboardStrategy, accountPresets } from "starkzap-native";
+import { sdk } from "@/lib/starkzap";
+
+export type WalletState = {
+  wallet: Awaited<ReturnType<typeof sdk.connectWallet>> | null;
+  address: string | null;
+  isConnecting: boolean;
+  isReady: boolean;
+  error: string | null;
+  connect: () => Promise<void>;
+  disconnect: () => void;
+};
+
+/**
+ * Your backend signing endpoint URL.
+ * This must be a deployed server — it signs Starknet tx hashes using your
+ * Privy server SDK (same /api/wallet/sign pattern as web, just hosted separately).
+ *
+ * For local dev, you can run an Express server on your machine and use
+ * ngrok to expose it: https://ngrok.com
+ */
+const SIGNING_SERVER_URL = process.env.EXPO_PUBLIC_SIGNING_SERVER_URL ?? "https://your-api.example.com/api/wallet/sign";
+const WALLET_SERVER_URL  = process.env.EXPO_PUBLIC_WALLET_SERVER_URL  ?? "https://your-api.example.com/api/wallet/starknet";
+
+export function useWallet(): WalletState {
+  const { getAccessToken, logout } = usePrivy();
+
+  const [wallet, setWallet]             = useState<WalletState["wallet"]>(null);
+  const [address, setAddress]           = useState<string | null>(null);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isReady, setIsReady]           = useState(false);
+  const [error, setError]               = useState<string | null>(null);
+
+  const connect = useCallback(async () => {
+    setIsConnecting(true);
+    setError(null);
+
+    try {
+      // 1. Get Privy access token from the Expo Privy hook
+      const accessToken = await getAccessToken();
+      if (!accessToken) throw new Error("Not authenticated — call privy.login() first");
+
+      // 2. Ask your backend for (or create) the user's Starknet wallet
+      const walletRes = await fetch(WALLET_SERVER_URL, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: \`Bearer \${accessToken}\`,
+        },
+      });
+      if (!walletRes.ok) throw new Error("Failed to get wallet from server");
+      const { wallet: privyWallet } = await walletRes.json();
+
+      // 3. Connect with Starkzap via Privy onboard strategy
+      //    deploy: "if_needed" → auto-deploys the account on first use
+      const onboard = await sdk.onboard({
+        strategy: OnboardStrategy.Privy,
+        accountPreset: accountPresets.argentXV050,
+        privy: {
+          resolve: async () => ({
+            walletId: privyWallet.id,
+            publicKey: privyWallet.publicKey,
+            serverUrl: SIGNING_SERVER_URL,
+          }),
+        },
+        deploy: "if_needed",
+      });
+
+      setWallet(onboard.wallet);
+      setAddress(privyWallet.address);
+      setIsReady(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Connection failed");
+    } finally {
+      setIsConnecting(false);
+    }
+  }, [getAccessToken]);
+
+  const disconnect = useCallback(async () => {
+    await logout();
+    setWallet(null);
+    setAddress(null);
+    setIsReady(false);
+    setError(null);
+  }, [logout]);
+
+  return { wallet, address, isConnecting, isReady, error, connect, disconnect };
+}
+`;
+}
+
+function genExpoRootLayout(config) {
+  return `import { Stack } from "expo-router";
+import { PrivyProvider } from "@privy-io/expo";
+import { StatusBar } from "expo-status-bar";
+
+const PRIVY_APP_ID = process.env.EXPO_PUBLIC_PRIVY_APP_ID ?? "";
+
+export default function RootLayout() {
+  return (
+    <PrivyProvider appId={PRIVY_APP_ID}>
+      <StatusBar style="light" />
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: "#04060f" },
+          headerTintColor: "#e2e8ff",
+          headerTitleStyle: { fontWeight: "600" },
+          contentStyle: { backgroundColor: "#04060f" },
+        }}
+      />
+    </PrivyProvider>
+  );
+}
+`;
+}
+
+function genExpoHomeScreen(config) {
+  return `import {
+  View, Text, StyleSheet, TouchableOpacity, ScrollView,
+  ActivityIndicator, Alert,
+} from "react-native";
+import { usePrivy } from "@privy-io/expo";
+import { useWallet } from "@/hooks/useWallet";
+import { useTokenBalance } from "@/hooks/useTokenBalance";
+import { network } from "@/lib/starkzap";
+
+// ─── Colours (matches web dark theme) ────────────────────────────
+const COLORS = {
+  bg:       "#04060f",
+  surface:  "#0a1152",
+  border:   "#111d87",
+  text:     "#e2e8ff",
+  muted:    "#4d78ff",
+  dim:      "#1a47fb",
+  accent:   "#ff6b35",
+  green:    "#34d399",
+  red:      "#f87171",
+};
+
+export default function HomeScreen() {
+  const { login, ready, authenticated } = usePrivy();
+  const walletState = useWallet();
+  const { wallet, address, isConnecting, error, connect, disconnect } = walletState;
+
+  const strk = useTokenBalance(wallet, "STRK");
+  const eth  = useTokenBalance(wallet, "ETH");
+  const usdc = useTokenBalance(wallet, "USDC");
+
+  const handleConnect = async () => {
+    if (!authenticated) {
+      // Login with Privy first (email, Google, Apple)
+      await login();
+    }
+    // Then connect Starknet wallet
+    await connect();
+  };
+
+  if (!ready) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={COLORS.muted} />
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.container}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Text style={styles.logo}>⚡ starkzap</Text>
+        <View style={styles.networkBadge}>
+          <Text style={styles.networkText}>{network}</Text>
+        </View>
+      </View>
+
+      {/* Hero */}
+      <Text style={styles.title}>Build on Starknet.{"\n"}Ship in minutes.</Text>
+      <Text style={styles.subtitle}>
+        Powered by Starkzap SDK — wallet, gasless transactions, and DeFi in one package.
+      </Text>
+
+      {error && (
+        <View style={styles.errorBox}>
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      )}
+
+      {!address ? (
+        /* ── Not connected ── */
+        <View style={styles.connectBox}>
+          <Text style={styles.connectEmoji}>🔌</Text>
+          <Text style={styles.connectTitle}>Connect your wallet</Text>
+          <Text style={styles.connectSub}>
+            Sign in with email, Google, or Apple via Privy — no seed phrase needed.
+          </Text>
+          <TouchableOpacity
+            style={[styles.btn, isConnecting && styles.btnDisabled]}
+            onPress={handleConnect}
+            disabled={isConnecting}
+          >
+            {isConnecting ? (
+              <ActivityIndicator color="#fff" size="small" />
+            ) : (
+              <Text style={styles.btnText}>Connect Wallet</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+      ) : (
+        /* ── Connected ── */
+        <View style={styles.connectedSection}>
+          {/* Address banner */}
+          <View style={styles.addressBar}>
+            <View style={styles.dot} />
+            <Text style={styles.addressText} numberOfLines={1}>
+              {address.slice(0, 10)}…{address.slice(-6)}
+            </Text>
+            <TouchableOpacity onPress={disconnect} style={styles.disconnectBtn}>
+              <Text style={styles.disconnectText}>Disconnect</Text>
+            </TouchableOpacity>
+          </View>
+
+          {/* Token balances */}
+          <Text style={styles.sectionLabel}>Balances</Text>
+          {[
+            { label: "STRK", icon: "⚡", state: strk, color: "#86a8ff" },
+            { label: "ETH",  icon: "Ξ",  state: eth,  color: "#a5b4fc" },
+            { label: "USDC", icon: "$",  state: usdc, color: "#34d399" },
+          ].map(({ label, icon, state, color }) => (
+            <View key={label} style={styles.balanceCard}>
+              <Text style={styles.balanceLabel}>{label}</Text>
+              <Text style={[styles.balanceValue, { color }]}>
+                {state.isLoading ? "——.————" : \`\${icon} \${state.formatted ?? "—"}\`}
+              </Text>
+              <TouchableOpacity onPress={state.refetch} disabled={state.isLoading}>
+                <Text style={styles.refreshText}>↻ refresh</Text>
+              </TouchableOpacity>
+            </View>
+          ))}
+
+          {/* Gasless payment CTA */}
+          <Text style={styles.sectionLabel}>Send Tokens</Text>
+          <View style={styles.paymentCard}>
+            <Text style={styles.paymentText}>
+              Use the gasless payment form to send STRK, ETH, or USDC to any Starknet address — AVNU Paymaster covers the gas fee.
+            </Text>
+            <TouchableOpacity
+              style={styles.btn}
+              onPress={() => Alert.alert("Coming soon", "Wire up the PaymentScreen to send tokens.")}
+            >
+              <Text style={styles.btnText}>Open Payment Form →</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll:      { flex: 1, backgroundColor: COLORS.bg },
+  container:   { padding: 24, paddingBottom: 48 },
+  center:      { flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: COLORS.bg },
+  header:      { flexDirection: "row", alignItems: "center", gap: 12, marginBottom: 32 },
+  logo:        { fontSize: 20, fontWeight: "700", color: COLORS.text },
+  networkBadge:{ backgroundColor: COLORS.surface, borderWidth: 1, borderColor: COLORS.border, borderRadius: 99, paddingHorizontal: 10, paddingVertical: 3 },
+  networkText: { fontSize: 11, color: COLORS.muted, fontFamily: "monospace" },
+  title:       { fontSize: 32, fontWeight: "800", color: COLORS.text, lineHeight: 42, marginBottom: 12 },
+  subtitle:    { fontSize: 15, color: "#4d78ff", lineHeight: 22, marginBottom: 24 },
+  errorBox:    { backgroundColor: "#2d0a0a", borderWidth: 1, borderColor: "#7f1d1d", borderRadius: 12, padding: 14, marginBottom: 16 },
+  errorText:   { color: COLORS.red, fontSize: 13 },
+  connectBox:  { borderWidth: 1, borderStyle: "dashed", borderColor: COLORS.border, borderRadius: 20, padding: 32, alignItems: "center", gap: 12 },
+  connectEmoji:{ fontSize: 40 },
+  connectTitle:{ fontSize: 18, fontWeight: "700", color: COLORS.text },
+  connectSub:  { fontSize: 13, color: COLORS.muted, textAlign: "center", lineHeight: 20 },
+  btn:         { backgroundColor: COLORS.dim, borderRadius: 99, paddingHorizontal: 24, paddingVertical: 14, alignItems: "center", width: "100%", marginTop: 8 },
+  btnDisabled: { opacity: 0.5 },
+  btnText:     { color: "#fff", fontWeight: "700", fontSize: 15 },
+  connectedSection: { gap: 16 },
+  addressBar:  { flexDirection: "row", alignItems: "center", gap: 10, backgroundColor: COLORS.surface, borderWidth: 1, borderColor: COLORS.border, borderRadius: 14, padding: 14 },
+  dot:         { width: 8, height: 8, borderRadius: 99, backgroundColor: COLORS.green },
+  addressText: { flex: 1, color: COLORS.text, fontFamily: "monospace", fontSize: 13 },
+  disconnectBtn:{ backgroundColor: "#1a0a0a", borderRadius: 8, paddingHorizontal: 10, paddingVertical: 5 },
+  disconnectText:{ color: COLORS.red, fontSize: 12 },
+  sectionLabel:{ fontSize: 11, fontWeight: "600", letterSpacing: 2, color: COLORS.muted, textTransform: "uppercase", marginTop: 8 },
+  balanceCard: { backgroundColor: COLORS.surface, borderWidth: 1, borderColor: COLORS.border, borderRadius: 16, padding: 18, gap: 4 },
+  balanceLabel:{ fontSize: 11, color: COLORS.muted, letterSpacing: 2, textTransform: "uppercase", fontFamily: "monospace" },
+  balanceValue:{ fontSize: 28, fontWeight: "800", fontFamily: "monospace" },
+  refreshText: { fontSize: 12, color: COLORS.muted, marginTop: 4 },
+  paymentCard: { backgroundColor: COLORS.surface, borderWidth: 1, borderColor: COLORS.border, borderRadius: 16, padding: 20, gap: 14 },
+  paymentText: { fontSize: 14, color: COLORS.muted, lineHeight: 21 },
+});
+`;
+}
+
+function genExpoTokenBalanceHook() {
+  return `/**
+ * hooks/useTokenBalance.ts — ERC-20 balance fetcher for Expo.
+ * Same logic as web — no "use client" directive needed in React Native.
+ */
+import { useState, useEffect, useCallback } from "react";
+import { getPresets, Amount } from "starkzap-native";
+import type { WalletState } from "./useWallet";
+
+export type TokenSymbol = "STRK" | "ETH" | "USDC";
+
+export function useTokenBalance(wallet: WalletState["wallet"], symbol: TokenSymbol = "STRK") {
+  const [formatted, setFormatted] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError]         = useState<string | null>(null);
+
+  const fetchBalance = useCallback(async () => {
+    if (!wallet) return;
+    setIsLoading(true); setError(null);
+    try {
+      const presets = getPresets(wallet.getChainId());
+      const token = presets[symbol as keyof typeof presets];
+      if (!token) throw new Error(\`Token \${symbol} not found\`);
+      const raw = await wallet.getBalance(token);
+      const amount = Amount.fromBase(raw, token);
+      setFormatted(amount.toFixed(4));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch balance");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [wallet, symbol]);
+
+  useEffect(() => { fetchBalance(); }, [fetchBalance]);
+  return { formatted, isLoading, error, symbol, refetch: fetchBalance };
+}
+`;
+}
+
+function genExpoReadme(config) {
+  return `# ⚡ ${config.projectName} (Expo)
+
+Scaffolded with **create-starkzap-app** — an Expo (React Native) starter for building on Starknet with the [Starkzap SDK](https://docs.starknet.io/build/starkzap/overview).
+
+## Stack
+
+| | |
+|---|---|
+| **Framework** | Expo (React Native) with Expo Router |
+| **Wallet** | Privy — social/email login via \`@privy-io/expo\` |
+| **Network** | ${config.network} |
+| **SDK** | \`starkzap-native\` (React Native build of Starkzap v2) |
+
+## Getting Started
+
+### 1. Install dependencies
+
+\`\`\`bash
+npm install
+\`\`\`
+
+### 2. Set up environment variables
+
+\`\`\`bash
+cp .env.example .env
+\`\`\`
+
+Fill in:
+- \`EXPO_PUBLIC_PRIVY_APP_ID\` — from [privy.io](https://privy.io) → create an **Expo** app
+- \`EXPO_PUBLIC_STARKNET_RPC_URL\` — free at [blastapi.io](https://blastapi.io)
+- \`EXPO_PUBLIC_SIGNING_SERVER_URL\` — your backend signing endpoint (see below)
+
+### 3. Run
+
+\`\`\`bash
+npx expo start
+\`\`\`
+
+Scan the QR code with **Expo Go** on your phone, or press \`i\` for iOS simulator / \`a\` for Android.
+
+---
+
+## Wallet Setup (Privy)
+
+Users sign in with **email, Google, or Apple**. Keys are managed server-side by Privy.
+
+**How the flow works:**
+1. User taps Connect → Privy login sheet appears
+2. User authenticates → \`getAccessToken()\` returns a JWT
+3. App calls your backend → backend creates/retrieves a Privy Starknet wallet
+4. App calls Starkzap's \`OnboardStrategy.Privy\` → wallet is connected
+5. Transactions are signed server-side via your signing endpoint
+
+**You need a backend.** The signing server is a simple Express endpoint — see the [Privy docs](https://docs.starknet.io/build/starkzap/integrations/privy) for the full server code. For local development, use [ngrok](https://ngrok.com) to expose it.
+
+### Privy app setup
+1. Go to [privy.io](https://privy.io) → New app
+2. Select **React Native / Expo** as the platform
+3. Enable the login methods you want (email, Google, Apple)
+4. Copy the **App ID** to \`.env\`
+
+---
+
+## Project Structure
+
+\`\`\`
+${config.projectName}/
+├── app/
+│   ├── _layout.tsx        # Root layout — wraps app with PrivyProvider
+│   └── index.tsx          # Home screen — wallet connect + balances
+├── hooks/
+│   ├── useWallet.ts       # Privy + Starkzap connection hook
+│   └── useTokenBalance.ts # Live ERC-20 balance fetcher
+├── lib/
+│   └── starkzap.ts        # SDK instance (starkzap-native)
+├── metro.config.js        # Metro config with withStarkzap()
+├── app.json               # Expo config
+└── .env.example           # Environment variable template
+\`\`\`
+
+---
+
+## Key Difference from Web
+
+| | Web (\`starkzap\`) | Expo (\`starkzap-native\`) |
+|---|---|---|
+| Import | \`from "starkzap"\` | \`from "starkzap-native"\` |
+| Metro config | Not needed | \`withStarkzap(config)\` required |
+| Privy SDK | \`@privy-io/react-auth\` | \`@privy-io/expo\` |
+| Env prefix | \`NEXT_PUBLIC_\` | \`EXPO_PUBLIC_\` |
+| Styling | Tailwind CSS | React Native \`StyleSheet\` |
+
+The Starkzap SDK API (\`sdk.onboard()\`, \`wallet.transfer()\`, \`wallet.getBalance()\` etc.) is identical.
+
+---
+
+## Resources
+
+- [Starkzap React Native Docs](https://docs.starknet.io/build/starkzap/react-native)
+- [Starkzap SDK Docs](https://docs.starknet.io/build/starkzap/overview)
+- [Privy Expo SDK](https://docs.privy.io/reference/react-native-sdk)
+- [Expo Router Docs](https://expo.github.io/router/docs)
+- [Starkscan Explorer](https://${config.network === "mainnet" ? "" : "sepolia."}starkscan.co)
+
+---
+
+Built with [Starkzap SDK](https://docs.starknet.io/build/starkzap/overview) · Deployed on **Starknet ${config.network}**
+`;
+}
+
+async function scaffoldExpo(config, dir) {
+  writeFile(dir, "package.json",    genExpoPackageJson(config));
+  writeFile(dir, "tsconfig.json",   genExpoTsConfig());
+  writeFile(dir, "metro.config.js", genExpoMetroConfig());
+  writeFile(dir, "app.json",        genExpoAppJson(config));
+  writeFile(dir, "babel.config.js", genExpoBabelConfig());
+  writeFile(dir, ".env.example",    genExpoEnvExample(config));
+  writeFile(dir, ".gitignore",      `node_modules/\n.expo/\ndist/\n.env\n*.tsbuildinfo\n.DS_Store`);
+  writeFile(dir, "README.md",       genExpoReadme(config));
+
+  // SDK lib
+  writeFile(dir, "lib/starkzap.ts", genExpoStarkzapLib(config));
+
+  // Hooks
+  writeFile(dir, "hooks/useWallet.ts",       genExpoUseWallet());
+  writeFile(dir, "hooks/useTokenBalance.ts", genExpoTokenBalanceHook());
+
+  // App screens
+  writeFile(dir, "app/_layout.tsx", genExpoRootLayout(config));
+  writeFile(dir, "app/index.tsx",   genExpoHomeScreen(config));
+}
+
+// ─── Scaffold files ──────────────────────────────────────────────────────────
+
+function writeFile(dir, filePath, content) {
+  const full = join(dir, filePath);
+  const folder = full.split("/").slice(0, -1).join("/");
+  if (!existsSync(folder)) mkdirSync(folder, { recursive: true });
+  writeFileSync(full, content, "utf8");
+}
+
+async function scaffold(config) {
+  const dir = resolve(process.cwd(), config.projectName);
+
+  if (existsSync(dir)) {
+    const overwrite = await confirm(
+      `  ${yellow("⚠")} Directory "${config.projectName}" already exists. Overwrite?`,
+      false
+    );
+    if (!overwrite) {
+      console.log(red("\n  Aborted.\n"));
+      process.exit(1);
+    }
+  }
+
+  mkdirSync(dir, { recursive: true });
+
+  // ── Expo path ────────────────────────────────────────────────
+  if (config.framework.id === "expo") {
+    await scaffoldExpo(config, dir);
+    return;
+  }
+
+  const isNextjs = config.framework.id.startsWith("nextjs");
+
+  // Core files
+  writeFile(dir, "package.json", genPackageJson(config));
+  writeFile(dir, "tsconfig.json", JSON.stringify({
+    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: isNextjs ? [{ name: "next" }] : [],
+      paths: { "@/*": ["./src/*"] },
+    },
+    include: ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+    exclude: ["node_modules"],
+  }, null, 2));
+
+  writeFile(dir, ".env.example", genEnvExample(config));
+  writeFile(dir, ".gitignore", `node_modules/\n.next/\ndist/\n.env\n.env.local\n*.tsbuildinfo\n.DS_Store`);
+  writeFile(dir, "tailwind.config.js", `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+  theme: {
+    extend: {
+      colors: {
+        stark: {
+          50: "#f0f4ff", 100: "#dce6ff", 200: "#b9cdff", 300: "#86a8ff",
+          400: "#4d78ff", 500: "#1a47fb", 600: "#0c2ef0", 700: "#0920d4",
+          800: "#0d1dac", 900: "#111d87", 950: "#0a1152",
+        },
+        accent: "#ff6b35",
+      },
+      fontFamily: {
+        mono: ["'IBM Plex Mono'", "monospace"],
+        sans: ["'DM Sans'", "sans-serif"],
+      },
+      animation: { "fade-in": "fadeIn 0.4s ease forwards" },
+      keyframes: { fadeIn: { from: { opacity: "0", transform: "translateY(6px)" }, to: { opacity: "1", transform: "translateY(0)" } } },
+    },
+  },
+  plugins: [],
+};`);
+  writeFile(dir, "postcss.config.js", `module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } };`);
+
+  // Framework-specific config
+  if (isNextjs) {
+    writeFile(dir, "next.config.mjs", genNextConfig(config));
+  } else {
+    writeFile(dir, "vite.config.ts", genViteConfig());
+    writeFile(dir, "index.html", `<!DOCTYPE html>
+<html lang="en">
+  <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Starkzap App</title></head>
+  <body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body>
+</html>`);
+  }
+
+  // Library files
+  writeFile(dir, "src/lib/starkzap.ts", genStarkzapLib(config));
+  writeFile(dir, "src/lib/utils.ts", `import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
+export const formatAddress = (a: string, chars = 4) => \`\${a.slice(0, chars + 2)}...\${a.slice(-chars)}\`;
+export const explorerUrl = (v: string, type: "address" | "tx" = "address", net = "sepolia") =>
+  \`https://\${net === "mainnet" ? "" : "sepolia."}starkscan.co/\${type}/\${v}\`;
+`);
+
+  // Wallet hook — differs by wallet choice
+  writeFile(dir, "src/hooks/useWallet.ts",
+    config.wallet === "privy" ? genUseWalletPrivy() : genUseWalletCartridge()
+  );
+
+  // Privy API routes (Next.js only)
+  if (config.wallet === "privy" && isNextjs) {
+    writeFile(dir, "src/app/api/wallet/starknet/route.ts", genPrivyApiRoute());
+    writeFile(dir, "src/app/api/wallet/sign/route.ts", genPrivySignRoute());
+  }
+
+  // Shared hooks
+  writeFile(dir, "src/hooks/useTokenBalance.ts", `"use client";
+import { useState, useEffect, useCallback } from "react";
+import { getPresets, Amount } from "starkzap";
+import type { WalletState } from "./useWallet";
+
+export type TokenSymbol = "STRK" | "ETH" | "USDC";
+
+export function useTokenBalance(wallet: WalletState["wallet"], symbol: TokenSymbol = "STRK") {
+  const [formatted, setFormatted] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchBalance = useCallback(async () => {
+    if (!wallet) return;
+    setIsLoading(true); setError(null);
+    try {
+      const presets = getPresets(wallet.getChainId());
+      const token = presets[symbol as keyof typeof presets];
+      if (!token) throw new Error(\`Token \${symbol} not found\`);
+      const raw = await wallet.getBalance(token);
+      const amount = Amount.fromBase(raw, token);
+      setFormatted(amount.toFixed(4));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed");
+    } finally { setIsLoading(false); }
+  }, [wallet, symbol]);
+
+  useEffect(() => { fetchBalance(); }, [fetchBalance]);
+  return { formatted, isLoading, error, symbol, refetch: fetchBalance };
+}`);
+
+  writeFile(dir, "src/hooks/useGaslessTransfer.ts", `"use client";
+import { useState, useCallback } from "react";
+import { getPresets, Amount } from "starkzap";
+import type { WalletState } from "./useWallet";
+
+export function useGaslessTransfer(wallet: WalletState["wallet"]) {
+  const [txHash, setTxHash]       = useState<string | null>(null);
+  const [isPending, setIsPending] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [error, setError]         = useState<string | null>(null);
+
+  const send = useCallback(async ({ to, amount, symbol }: { to: string; amount: string; symbol: "STRK" | "ETH" | "USDC" }) => {
+    if (!wallet) { setError("Wallet not connected"); return; }
+    setIsPending(true); setError(null); setIsSuccess(false); setTxHash(null);
+    try {
+      const presets = getPresets(wallet.getChainId());
+      const token = presets[symbol as keyof typeof presets];
+      if (!token) throw new Error(\`Token \${symbol} not available\`);
+      const tx = await wallet.transfer({ to, token, amount: Amount.parse(amount, token) }, { feeMode: "sponsored" });
+      setTxHash(tx.hash);
+      await tx.wait();
+      setIsSuccess(true);
+    } catch (err) { setError(err instanceof Error ? err.message : "Transaction failed"); }
+    finally { setIsPending(false); }
+  }, [wallet]);
+
+  const reset = useCallback(() => { setTxHash(null); setIsPending(false); setIsSuccess(false); setError(null); }, []);
+  return { send, txHash, isPending, isSuccess, error, reset };
+}`);
+
+  // Shared components (same for both wallet types)
+  writeFile(dir, "src/components/wallet/WalletButton.tsx", `"use client";
+import { cn, formatAddress } from "@/lib/utils";
+import type { WalletState } from "@/hooks/useWallet";
+
+export function WalletButton({ walletState, className }: { walletState: WalletState; className?: string }) {
+  const { address, isConnecting, connect, disconnect } = walletState;
+  if (address) return (
+    <button onClick={disconnect} className={cn("group flex items-center gap-2 rounded-full border border-stark-700 bg-stark-900 px-4 py-2 text-sm font-mono text-stark-200 transition-all hover:border-red-500 hover:text-red-400", className)}>
+      <span className="h-2 w-2 rounded-full bg-emerald-400 group-hover:bg-red-400 transition-colors" />
+      {formatAddress(address)}
+      <span className="opacity-0 group-hover:opacity-100 transition-opacity text-xs">disconnect</span>
+    </button>
+  );
+  return (
+    <button onClick={connect} disabled={isConnecting} className={cn("flex items-center gap-2 rounded-full bg-stark-500 px-5 py-2 text-sm font-semibold text-white shadow-lg transition-all hover:bg-stark-400 active:scale-95 disabled:opacity-60", className)}>
+      {isConnecting ? (<><span className="h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent" />Connecting…</>) : "Connect Wallet"}
+    </button>
+  );
+}`);
+
+  writeFile(dir, "src/components/wallet/TokenBalanceCard.tsx", `"use client";
+import { useTokenBalance, type TokenSymbol } from "@/hooks/useTokenBalance";
+import type { WalletState } from "@/hooks/useWallet";
+import { cn } from "@/lib/utils";
+const META: Record<TokenSymbol, { icon: string; color: string }> = {
+  STRK: { icon: "⚡", color: "text-stark-300" },
+  ETH:  { icon: "Ξ",  color: "text-indigo-300" },
+  USDC: { icon: "$",  color: "text-emerald-300" },
+};
+export function TokenBalanceCard({ wallet, symbol = "STRK", className }: { wallet: WalletState["wallet"]; symbol?: TokenSymbol; className?: string }) {
+  const { formatted, isLoading, error, refetch } = useTokenBalance(wallet, symbol);
+  const meta = META[symbol];
+  return (
+    <div className={cn("rounded-2xl border border-stark-800 bg-stark-950/60 p-5 backdrop-blur-sm", className)}>
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-xs font-mono uppercase tracking-widest text-stark-400">{symbol} Balance</span>
+        <button onClick={refetch} disabled={isLoading || !wallet} className="rounded-full p-1.5 text-stark-500 hover:text-stark-200 hover:bg-stark-800 transition-colors disabled:opacity-40" title="Refresh">
+          <svg className={cn("h-3.5 w-3.5", isLoading && "animate-spin")} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+        </button>
+      </div>
+      {error ? <p className="text-sm text-red-400">{error}</p> : (
+        <p className={cn("text-3xl font-mono font-bold", meta.color)}>
+          {isLoading || !wallet ? <span className="animate-pulse text-stark-700">——.————</span> : <>{meta.icon} {formatted ?? "—"}</>}
+        </p>
+      )}
+    </div>
+  );
+}`);
+
+  writeFile(dir, "src/components/payment/PaymentForm.tsx", `"use client";
+import { useState } from "react";
+import { useGaslessTransfer } from "@/hooks/useGaslessTransfer";
+import type { WalletState } from "@/hooks/useWallet";
+import { cn, explorerUrl } from "@/lib/utils";
+import { network } from "@/lib/starkzap";
+const TOKENS = ["STRK", "ETH", "USDC"] as const;
+export function PaymentForm({ wallet, className }: { wallet: WalletState["wallet"]; className?: string }) {
+  const [to, setTo] = useState(""); const [amount, setAmount] = useState(""); const [symbol, setSymbol] = useState<"STRK"|"ETH"|"USDC">("STRK");
+  const { send, txHash, isPending, isSuccess, error, reset } = useGaslessTransfer(wallet);
+  const isValid = to.startsWith("0x") && to.length >= 60 && Number(amount) > 0;
+  if (isSuccess && txHash) return (
+    <div className={cn("rounded-2xl border border-emerald-800 bg-emerald-950/40 p-6 text-center animate-fade-in", className)}>
+      <div className="text-4xl mb-3">✓</div>
+      <p className="font-semibold text-emerald-300 mb-1">Payment sent!</p>
+      <p className="text-sm text-stark-400 mb-4">{amount} {symbol} sent gaslessly</p>
+      <a href={explorerUrl(txHash, "tx", network)} target="_blank" rel="noopener noreferrer" className="text-xs text-stark-400 underline hover:text-stark-200 font-mono">View on Starkscan ↗</a>
+      <button onClick={reset} className="mt-4 block w-full rounded-xl bg-stark-800 py-2 text-sm text-stark-300 hover:bg-stark-700 transition-colors">Send another</button>
+    </div>
+  );
+  return (
+    <form onSubmit={async e => { e.preventDefault(); if (isValid) await send({ to, amount, symbol }); }} className={cn("rounded-2xl border border-stark-800 bg-stark-950/60 p-5 backdrop-blur-sm space-y-4", className)}>
+      <h3 className="text-sm font-mono uppercase tracking-widest text-stark-400">Gasless Payment</h3>
+      <div className="flex gap-2">{TOKENS.map(t => <button key={t} type="button" onClick={() => setSymbol(t)} className={cn("flex-1 rounded-xl py-2 text-sm font-semibold transition-all", symbol === t ? "bg-stark-500 text-white" : "bg-stark-900 text-stark-400 hover:bg-stark-800")}>{t}</button>)}</div>
+      <div><label className="mb-1.5 block text-xs text-stark-500">Amount</label><input type="number" min="0" step="any" placeholder="0.00" value={amount} onChange={e => setAmount(e.target.value)} className="w-full rounded-xl bg-stark-900 border border-stark-800 px-4 py-2.5 font-mono text-lg text-white placeholder-stark-700 focus:border-stark-500 focus:outline-none" /></div>
+      <div><label className="mb-1.5 block text-xs text-stark-500">Recipient</label><input type="text" placeholder="0x..." value={to} onChange={e => setTo(e.target.value)} className="w-full rounded-xl bg-stark-900 border border-stark-800 px-4 py-2.5 font-mono text-sm text-white placeholder-stark-700 focus:border-stark-500 focus:outline-none" /></div>
+      {error && <p className="rounded-xl bg-red-950/60 border border-red-900 px-4 py-2 text-sm text-red-400">{error}</p>}
+      <button type="submit" disabled={!isValid || isPending || !wallet} className="w-full rounded-xl bg-stark-500 py-3 font-semibold text-white shadow-lg transition-all hover:bg-stark-400 active:scale-95 disabled:opacity-40">
+        {isPending ? <span className="flex items-center justify-center gap-2"><span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />Sending…</span> : \`Send \${symbol} — No Gas Required\`}
+      </button>
+      <p className="text-center text-xs text-stark-600">Gas sponsored via ${config.wallet === "cartridge" ? "Cartridge Paymaster" : "AVNU Paymaster"}</p>
+    </form>
+  );
+}`);
+
+  // App pages
+  writeFile(dir, "src/app/globals.css", `@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+@tailwind base; @tailwind components; @tailwind utilities;
+body { background-color: #04060f; color: #e2e8ff; font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; }
+.grid-bg { background-image: linear-gradient(rgba(26,71,251,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(26,71,251,0.04) 1px, transparent 1px); background-size: 40px 40px; }
+@layer utilities { .text-gradient { background: linear-gradient(135deg, #86a8ff 0%, #ffffff 50%, #ff6b35 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } }`);
+
+  writeFile(dir, "src/app/layout.tsx", `import type { Metadata } from "next";
+import "./globals.css";
+export const metadata: Metadata = { title: "${config.projectName}", description: "Built with Starkzap SDK on Starknet" };
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return <html lang="en"><body className="min-h-screen grid-bg antialiased">{children}</body></html>;
+}`);
+
+  writeFile(dir, "src/app/page.tsx", `"use client";
+import { useWallet } from "@/hooks/useWallet";
+import { WalletButton } from "@/components/wallet/WalletButton";
+import { TokenBalanceCard } from "@/components/wallet/TokenBalanceCard";
+import { PaymentForm } from "@/components/payment/PaymentForm";
+import { network } from "@/lib/starkzap";
+
+export default function Home() {
+  const walletState = useWallet();
+  const { wallet, address, error: walletError } = walletState;
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="border-b border-stark-900/80 bg-stark-950/50 backdrop-blur-md sticky top-0 z-50">
+        <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
+          <div className="flex items-center gap-3">
+            <span className="text-xl">⚡</span>
+            <span className="font-mono font-semibold text-white">starkzap<span className="text-stark-400">-app</span></span>
+            <span className="rounded-full bg-stark-900 border border-stark-800 px-2.5 py-0.5 text-xs font-mono text-stark-400">{network}</span>
+          </div>
+          <WalletButton walletState={walletState} />
+        </div>
+      </header>
+      <section className="mx-auto max-w-5xl px-6 py-16 text-center animate-fade-in">
+        <h1 className="text-5xl font-bold text-gradient mb-5">Build on Starknet.<br/>Ship in minutes.</h1>
+        <p className="mx-auto max-w-xl text-stark-400 text-lg">Powered by the Starkzap SDK — wallet, gasless transactions, and DeFi in one package.</p>
+        {walletError && <div className="mx-auto mt-6 max-w-md rounded-xl border border-red-900 bg-red-950/40 px-4 py-3 text-sm text-red-400">{walletError}</div>}
+      </section>
+      <main className="mx-auto w-full max-w-5xl flex-1 px-6 pb-20">
+        {!address ? (
+          <div className="rounded-2xl border border-dashed border-stark-800 bg-stark-950/40 p-12 text-center">
+            <p className="text-4xl mb-4">🔌</p>
+            <p className="font-semibold text-stark-300 mb-6">Connect your wallet to get started</p>
+            <WalletButton walletState={walletState} className="mx-auto" />
+          </div>
+        ) : (
+          <div className="animate-fade-in space-y-6">
+            <div className="flex items-center gap-3 rounded-xl border border-stark-800 bg-stark-900/40 px-4 py-3">
+              <span className="h-2 w-2 rounded-full bg-emerald-400" />
+              <span className="text-sm text-stark-400">Connected as</span>
+              <span className="font-mono text-sm text-white">{address}</span>
+            </div>
+            <div className="grid gap-6 md:grid-cols-2">
+              <div className="space-y-4">
+                <h2 className="text-xs font-mono uppercase tracking-widest text-stark-500">Balances</h2>
+                <TokenBalanceCard wallet={wallet} symbol="STRK" />
+                <TokenBalanceCard wallet={wallet} symbol="ETH" />
+                <TokenBalanceCard wallet={wallet} symbol="USDC" />
+              </div>
+              <div className="space-y-4">
+                <h2 className="text-xs font-mono uppercase tracking-widest text-stark-500">Gasless Payment</h2>
+                <PaymentForm wallet={wallet} />
+              </div>
+            </div>
+          </div>
+        )}
+      </main>
+      <footer className="border-t border-stark-900 py-6 text-center text-xs text-stark-700 font-mono">
+        Built with <a href="https://github.com/keep-starknet-strange/starkzap" target="_blank" rel="noopener noreferrer" className="text-stark-500 hover:text-stark-300">Starkzap SDK</a> · Starknet {network}
+      </footer>
+    </div>
+  );
+}`);
+
+  writeFile(dir, "README.md", genReadme(config));
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+
+async function main() {
+  printBanner();
+
+  // Project name
+  let projectName = process.argv[2];
+  if (!projectName) {
+    const answer = await prompt(`${bold("Project name")} ${gray("(starkzap-app)")} › `);
+    projectName = answer || "starkzap-app";
+  }
+
+  // Framework
+  const framework = await select("Which framework?", [
+    { id: "nextjs-app",   label: "Next.js 14 — App Router",   hint: "recommended" },
+    { id: "nextjs-pages", label: "Next.js 14 — Pages Router",  hint: "" },
+    { id: "vite-react",   label: "Vite + React",               hint: "lightweight" },
+    { id: "expo",         label: "Expo (React Native)",         hint: "mobile — iOS & Android" },
+  ]);
+
+  const isExpo = framework.id === "expo";
+
+  // Wallet — Expo always uses Privy, web gets the choice
+  let walletOption;
+  if (isExpo) {
+    console.log(`\n  ${cyan("ℹ")} Expo uses ${bold("Privy")} for wallet auth (social/email login via ${cyan("@privy-io/expo")})`);
+    walletOption = { id: "privy" };
+  } else {
+    walletOption = await select("Which wallet integration?", [
+      {
+        id: "privy",
+        label: "Privy — social/email login",
+        hint: "email, Google, Apple — no wallet extension needed",
+      },
+      {
+        id: "cartridge",
+        label: "Cartridge Controller — passkey/social",
+        hint: "Face ID, Twitter, Google — best for games",
+      },
+    ]);
+  }
+
+  // Network
+  const networkOption = await select("Target network?", [
+    { id: "sepolia", label: "Sepolia (testnet)", hint: "start here" },
+    { id: "mainnet", label: "Mainnet",           hint: "production" },
+  ]);
+
+  const config = {
+    projectName,
+    framework,
+    wallet: walletOption.id,
+    network: networkOption.id,
+    typescript: true,
+  };
+
+  printSummary(config);
+
+  const go = await confirm("\n  Scaffold this project?");
+  if (!go) { console.log(red("\n  Aborted.\n")); process.exit(0); }
+
+  console.log(`\n  ${cyan("◆")} Scaffolding ${bold(projectName)}…\n`);
+
+  await scaffold(config);
+
+  console.log(`\n  ${green("✓")} Project created!\n`);
+  console.log(`  ${bold("Next steps:")}`);
+  console.log(`  ${gray("1.")} cd ${cyan(projectName)}`);
+  console.log(`  ${gray("2.")} cp .env.example .env.local  ${gray("# fill in your keys")}`);
+  console.log(`  ${gray("3.")} npm install`);
+
+  if (config.framework.id === "expo") {
+    console.log(`  ${gray("4.")} npx expo start\n`);
+    console.log(`  ${yellow("📱 Expo:")} scan the QR code with Expo Go on your phone`);
+    console.log(`  ${yellow("⚡ Privy setup:")} get your App ID at ${cyan("https://privy.io")} → create an Expo app`);
+    console.log(`  ${dim("  Privy Expo docs:")} ${cyan("https://docs.privy.io/reference/react-native-sdk")}`);
+  } else {
+    console.log(`  ${gray("4.")} npm run dev\n`);
+    if (config.wallet === "privy") {
+      console.log(`  ${yellow("⚡ Privy setup:")} get your App ID at ${cyan("https://privy.io")}`);
+    } else {
+      console.log(`  ${yellow("⚡ Cartridge setup:")} edit CARTRIDGE_POLICIES in src/hooks/useWallet.ts`);
+    }
+  }
+
+  console.log(`\n  ${dim("Docs:")} ${cyan("https://docs.starknet.io/build/starkzap/overview")}\n`);
+}
+
+main().catch((err) => {
+  console.error(red(`\n  Error: ${err.message}\n`));
+  process.exit(1);
+});