Dapp with gated NFT paymaster

Discover how to construct a tailored paymaster that enables users to sidestep gas fees when they own a particular NFT. By the end of this tutorial, you will:

Write a mint function for the ERC721.sol contract.
Design and implement the validation logic for the ERC721GatedPaymaster.sol contract.
Deploy Greeter.sol, ERC721.sol, and ERC721GatedPaymaster.sol contracts.
Connect our frontend application with users' MetaMask wallets.
Initialize our contracts to facilitate interaction on the client side.
Fetch data to display in a React component.
Harness the capabilities of our paymaster based on NFT possession.

Introduction

Welcome to this hands-on tutorial on creating and interacting with an ERC721GatedPaymaster and interacting with a front-end application. If you've ever been curious about the mechanisms that allow for gasless transactions on ZKsync Era and our native account abstraction capabilities you're in the right place!

You'll gain a thorough understanding of how to create, compile, and deploy smart contracts on ZKsync Era, delve into the intricacies of paymasters and validation logic, and seamlessly integrate them within a frontend application. On completion, you'll have a fully functional ERC721GatedPaymaster contract and an interactive frontend to go with it.

Prerequisites

Make sure your machine satisfies the system requirements.
A Node.js installation running at minimum Node.js version 16.
You are already familiar with deploying smart contracts on ZKsync Era. If not, please refer to the first section of the quickstart tutorial.
Some background knowledge on the concepts covered by the tutorial would be helpful too. Have a look at the following docs:
- Account abstraction protocol.
- Introduction to system contracts.
- Smart contract deployment on zkSyn Era.
- Gas estimation for transactions guide.
You know how to get your private key from your MetaMask wallet.

Complete Project

Download the complete project on GitHub.

Step 1 — Setup the Project

This tutorial uses React and Next.js for the frontend framework (though the principles apply to other frameworks too).
We've provided a template for a hassle-free start. The primary focus is on mastering the zksync-ethers SDK and paymaster validations.

Clone the template and cd into the folder.

git clone https://github.com/matter-labs/tutorials
cd tutorials/gated-nft

Install dependencies:
```
yarn install
```

Your project structure should now resemble:

├── LICENSE
├── README.md
├── frontend
├── package.json
├── yarn.lock
└── zksync

The project makes use of Yarn workspaces so we can seamlessly manage our dependencies between our frontend and smart contracts. While /frontend houses React components, styles, and logic, /zksync contains everything related to smart contract development and deployment.

This tutorial will start in the /zksync directory as we need to write, compile and deploy our contracts before we can interact with them!

NFT and paymaster contracts

What you'll learn:

Tools:

Introduction

Prerequisites

Complete Project

Step 1 — Setup the Project