Add Farcaster template

* add farcaster template

* remove demo

* update template

* update chain

* resolve reviewers comments

* remove unwanted console logs

---------

Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”>

Author: AyushBherwani1998

packages/create-gator-app/src/lib/choices/templates.ts

@@ -17,6 +17,14 @@ const NEXTJS_TEMPLATE_OPTIONS: ITemplate[] = [
     isWeb3AuthSupported: true,
     areLLMRulesSupported: false,
   },
+  {
+    name: "Farcaster Mini App Delegation Starter",
+    value: "farcaster-starter",
+    description: "A basic Next.js Farcaster Mini App Delegation starter",
+    framework: "nextjs",
+    isWeb3AuthSupported: false,
+    areLLMRulesSupported: false,
+  },
   {
     name: "Experimental: ERC7715 Permissions starter",
     value: "erc7715-starter",

packages/create-gator-app/templates/nextjs/farcaster-starter/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_PIMLICO_API_KEY=
+NEXT_PUBLIC_URL=

packages/create-gator-app/templates/nextjs/farcaster-starter/README.md

@@ -0,0 +1,89 @@
+# MetaMask Smart Accounts x Farcaster starter template
+
+This is a NextJS MetaMask Smart Accounts x Farcaster starter template created with `@metamask/create-gator-app`.
+
+This template helps you quickly bootstrap your project with a Farcaster mini app and MetaMask Smart Accounts. It 
+provides a foundation for building mini apps that leverage account abstraction and powerful delegation features to 
+deliver seamless, secure, and flexible user experiences.
+
+Learn more about [Metamask Smart Accounts](https://docs.metamask.io/delegation-toolkit/concepts/smart-accounts/).
+
+## Prerequisites
+
+1. **Pimlico API Key**: In this template, you’ll use Pimlico’s bundler and paymaster
+services to submit user operations and sponsor transactions. You can get 
+your API key from [Pimlico’s dashboard](https://dashboard.pimlico.io/apikeys).
+
+
+## Project structure
+
+```bash
+template/
+├── public/ # Static assets
+├── src/
+│ ├── app/ # App router pages
+│ ├── components/ # UI Components
+│ ├── hooks/ # Custom React hooks
+│ ├── providers/ # Custom React Context Provider
+│ └── utils/ # Utils for the starter
+├── .env # Environment variables
+├── .gitignore # Git ignore rules
+├── next.config.ts # Next.js configuration
+└── tsconfig.json # TypeScript configuration
+```
+
+## Setup environment variables
+
+Update the following environment variables in the `.env` file at the root of your project.
+
+```
+NEXT_PUBLIC_PIMLICO_API_KEY =
+```
+
+## Getting started
+
+First, start the development server using the package manager you chose during setup.
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser to view the app.
+
+## View with Farcaster Embed tool
+
+Farcaster offers a handy [Embed tool](https://farcaster.xyz/~/developers/mini-apps/embed) that lets you preview and inspect your Mini App before publishing it. This tool 
+works only with hosted URLs. To make your local project accessible remotely, you can create a tunnel using tools like 
+ngrok or cloudflared. 
+
+In this guide, we’re using cloudflared, but you’re free to choose whichever tool you prefer.
+
+### Create a tunnel
+
+```bash
+cloudflared tunnel --url http://localhost:3000
+```
+
+### Update environment variable
+
+```
+NEXT_PUBLIC_URL = "CLOUDFLARED_URL"
+```
+
+### Test the mini app
+
+Once you have the remote url, you can view the app in [embed tool](https://farcaster.xyz/~/developers/mini-apps/embed) by entering the url.
+
+![Embed Tool Screenshot](./screenshots/embed-tool.png)
+
+
+## Learn more
+
+To learn more about MetaMask Smart Accounts, take a look at the following resources:
+
+- [Quickstart](https://docs.metamask.io/delegation-toolkit/get-started/quickstart/) - Get started quickly with the MetaMask Smart Accounts
+- [Delegation quickstart](https://docs.metamask.io/delegation-toolkit/get-started/delegation-quickstart/) - Get started quickly with creating a MetaMask smart account and completing the delegation lifecycle (creating, signing, and redeeming a delegation).

packages/create-gator-app/templates/nextjs/farcaster-starter/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

packages/create-gator-app/templates/nextjs/farcaster-starter/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

packages/create-gator-app/templates/nextjs/farcaster-starter/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "farcaster-starter",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@farcaster/miniapp-sdk": "^0.1.7",
+    "@farcaster/miniapp-wagmi-connector": "^1.0.0",
+    "@metamask/delegation-toolkit": "^0.11.0",
+    "@tanstack/react-query": "^5.76.1",
+    "permissionless": "^0.2.46",
+    "viem": "^2.29.2",
+    "wagmi": "^2.15.3",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "next": "15.4.3"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@tailwindcss/postcss": "^4",
+    "tailwindcss": "^4",
+    "eslint": "^9",
+    "eslint-config-next": "15.4.3",
+    "@eslint/eslintrc": "^3"
+  }
+}

packages/create-gator-app/templates/nextjs/farcaster-starter/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;