Adds MetaMask Smart Accounts template

* add metamask smart accounts starter

* update READMEs

* resolve review comments

Author: AyushBherwani1998

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

@@ -2,17 +2,25 @@ import { ITemplate } from "../types/template";
 
 const NEXTJS_TEMPLATE_OPTIONS: ITemplate[] = [
   {
-    name: "Basic Delegator app with NextJS",
+    name: "MetaMask Smart Accounts Starter",
     value: "starter",
-    description: "A basic Next.js template with App Router",
+    description: "A basic Next.js MetaMask Smart Accounts starter",
     framework: "nextjs",
     isWeb3AuthSupported: true,
     areLLMRulesSupported: false,
   },
   {
-    name: "Experimental: Basic Gator app to try out ERC7715 Permissions",
+    name: "MetaMask Smart Accounts & Delegation Starter",
+    value: "delegation-starter",
+    description: "A basic Next.js MetaMask Smart Accounts & Delegation starter",
+    framework: "nextjs",
+    isWeb3AuthSupported: true,
+    areLLMRulesSupported: false,
+  },
+  {
+    name: "Experimental: ERC7715 Permissions starter",
     value: "erc7715-starter",
-    description: "Experimental: A basic Gator app to try out ERC7715 Permissions",
+    description: "A basic Next.js ERC7715 Permissions starter",
     framework: "nextjs",
     isWeb3AuthSupported: false,
     areLLMRulesSupported: true,
@@ -21,9 +29,17 @@ const NEXTJS_TEMPLATE_OPTIONS: ITemplate[] = [
 
 const VITE_REACT_TEMPLATE_OPTIONS: ITemplate[] = [
   {
-    name: "Basic Delegator app with Vite React",
+    name: "MetaMask Smart Accounts Starter",
     value: "starter",
-    description: "A basic Vite React template with App Router",
+    description: "A basic Vite React MetaMask Smart Accounts starter",
+    framework: "vite-react",
+    isWeb3AuthSupported: true,
+    areLLMRulesSupported: false,
+  },
+  {
+    name: "MetaMask Smart Accounts & Delegation Starter",
+    value: "delegation-starter",
+    description: "A basic Vite React MetaMask Smart Accounts & Delegation starter",
     framework: "vite-react",
     isWeb3AuthSupported: true,
     areLLMRulesSupported: false,

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

@@ -0,0 +1 @@
+NEXT_PUBLIC_PIMLICO_API_KEY=pim_WDBELASDAFAo9guUAr7HNFaF

packages/create-gator-app/templates/nextjs/delegation-starter/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.npmrc

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

@@ -0,0 +1,74 @@
+# MetaMask Smart Accounts & Delegation starter template
+
+This is a NextJS MetaMask Smart Accounts & Delegation starter template created with `@metamask/create-gator-app`.
+
+This template is meant to help you bootstrap your own projects with Metamask Smart Acounts. It helps you build smart accounts with account abstraction, and powerful delegation features.
+
+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).
+
+2. **Web3Auth Client ID**: During setup, if you used the 
+`-add-web3auth` flag, you’ll need to create a new project on the 
+Web3Auth Dashboard and get your Client ID. You can follow the [Web3Auth documentation](https://web3auth.io/docs/dashboard-setup#getting-started).
+
+## 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 =
+
+# Enter your Web3Auth Client ID if you 
+# used the --add-web3auth flag.
+NEXT_PUBLIC_WEB3AUTH_CLIENT_ID =
+
+# The Web3Auth network is configured based 
+# on the network option you selected during setup.
+NEXT_PUBLIC_WEB3AUTH_NETWORK =
+```
+
+## 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.
+
+## Learn more
+
+To learn more about MetaMask Smart Accounts, and delegations
+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/delegation-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/delegation-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/delegation-starter/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "metamask-smart-accounts-delegation-starter",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@metamask/delegation-toolkit": "^0.12.0",
+    "@tanstack/react-query": "^5.76.1",
+    "next": "15.2.1",
+    "permissionless": "^0.2.46",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "viem": "^2.29.2",
+    "wagmi": "^2.15.3"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4.1.7",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.2.1",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.7",
+    "typescript": "^5"
+  }
+}

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

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};