Dapp with gated NFT paymaster

Build a frontend that allows users to interact smart contracts with zero transaction fees if they hold an NFT.

This tutorial will guide you through the process of building a frontend that interacts with smart contracts on ZKsync. The frontend will enable gasless transactions for users that hold a specific NFT thanks to a paymaster.

What you'll learn:

  • How to build frontend
  • How to send transactions through a paymaster


  • - zksync-cli
  • - zksync-ethers
  • - Hardhat
  • - react
Last Updated: May 09, 2024

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.


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.


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.
  1. Clone the template and cd into the folder.
    git clone https://github.com/matter-labs/tutorials
    cd tutorials/gated-nft
  2. Install dependencies:
    yarn install

Your project structure should now resemble:

├── 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!

Made with ❤️ by the ZKsync Community