NextJS MetaMask Smart Account & Delegation Example

This is a NextJS MetaMask Smart Account & Delegation template created with @metamask/create-gator-app.

This template is meant to help you bootstrap your own projects with Metamask Smart Accounts Kit. It helps you build on MetaMask Smart Accounts, and powerful delegation features.

Learn more about Metamask Smart Accounts Kit.

Prerequisites

1. Pimlico API Key: In this template, we use Pimlico’s Bundler and Paymaster services to submit user operations and sponsor transactions, respectively. You can retrieve the required API key from Pimlico’s Dashboard.

Project Structure

nextjs-starter/
├── public/ # Static assets
├── src/
│ ├── app/ # App router pages
│ ├── components/ # UI Components
│ ├── hooks/ # Custom React hooks
│ ├── providers/ # Custom React Context Provider
│ ├── connectors(optional)/ # Web3Auth connector for Wagmi
│ └── utils/ # Utils for the starter
├── .env # Environment variables
├── .gitignore # Git ignore rules
├── next.config.ts # Next.js configuration
└── tsconfig.json # TypeScript configuration

Setup Enviroment Variables

Update the following environment variables in the .env file located in your project's root directory.

NEXT_PUBLIC_PIMLICO_API_KEY =

Getting Started

First, start the development server using the package manager you selected during setup.

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Learn More

To learn more about the MetaMask Smart Accounts Kit, take a look at the following resources:

• Smart Accoutns Kit Documentation - Lean more about Smart Accounts Kit features and API.