在本教程中,我们将会完成:
- 与已创建的 NFT,TOKEN,TOKENPaymaster 合约进行交互
- 了解与使用 zkSync 基于 React 技术栈下的开发工具
- 构建一个集成 Paymaster 支付的 NFT 铸造页面,以允许用户使用 ERC20 代币支付交易费用

先决条件:
- 获取 zkSync Sepolia 测试网 ETH:https://learnweb3.io/faucets/zksync_sepolia/,https://docs.zksync.io/build/tooling/network-faucets.html
- 了解 Paymaster(可查看前面的教程)
相关工具:
- nodejs: 版本v18
- nextjs: 项目使用 React 和 Nextjs 作为前端框架
- ethers5: zkSync 与主网相同,都可采用 ethers 作为主要合约交互工具库使用
- zksync-ethers5: 此库在 ethers 基础上封装/附加功能,本教程将会采用其完成我们的 paymaster 集成到铸造 NFT 中。(注:若不使用 zkSync 独特的功能如抽象账户,Paymaster 等与 ethers 无异,直接使用 ethers 即可,不影响以往主网开发使用工具的流程)
- web3modal: 快捷美观的钱包工具库,提供连接钱包的集成 UI 和相应的逻辑
配置项目:
-
-
目录结构:
常见的 nextjs 目录结构,我们主要入口是
(main)/page.tsx
然后划分两个 step:连接钱包,铸造 NFT,同时将所有合约相关逻辑抽到 hook 中完成。
合约简单介绍:
合约都已开源,可以在https://sepolia.explorer.zksync.io/找到
-
NFT 合约: 对外暴露 mint 接口给用户执行,无限制
-
Token 合约: 普通 ERC20,对外暴露 mint,无限制
-
Paymaster 合约: ERC20 交易支付方案,允许前者 token 的持有者支付 token 作为 gas 手续费支付
前端开发
-
启动项目后,我们会看到一个连接钱包和一个初步完成的铸造界面
-
连接钱包
每个 Dapp 应用最开始肯定就是连接钱包了,我们这边将采用 web3modal + ethers5 来完成这个步骤:
-
首先进入
context/web3-modal.tsx
完成 web3modal 的初步构建,可以参考链接,注意需要前往Wallet Connect 注册一个 projectid -
将其引用到在最上层使用,进入
app/providers.tsx
-
在
app/(main)/step-connect-wallet.tsx
中我们自己定义一下连接按钮样式,使用useWeb3Modal
的open
打开连接钱包弹窗进行钱包连接,切换网络等操作,同时使用useWeb3ModalAccount
给出的状态address
,isConnected
在 UI 层做出一些交互优化展示
-
-
此时已经完成了我们钱包的逻辑处理,接下来我们要深入合约交互逻辑处理,我们要做的就是基于合约完成 3 个 hooks:useToken, usePaymaster, useNFT
-
usePaymaster (
hooks/use-paymaster.ts
)-
我们将会在此 hook 中完成 paymaster 的部分参数组装,以便快速运用到其他的合约调用中,并且获取 paymaster 余额,来告知用户是否仍然可以继续使用 token 替代 gas 支付, 以下关键代码中我们采用 type 为
ApprovalBased
来完成 Token 的逻辑处理,并且设定minimalAllowance
为指定值,此处表示支付的 Token 数量用于替换手续费支出,这里实际上会更具具体的需求还给出动态的值,我们为了简单处理每笔交易都只需要支出 1 个 token 即可: -
完整代码:
-
-
useToken (
hooks/use-token.ts
)-
该合约我们首先需要完成获取 token 余额,mint 用于支付替代手续费,参考代码内容:
-
在 Paymaster 调用的过程中,是需要用户 token 授权 Paymaster 合约才可调用,我们需要在前面的代码(
use-token
)中完善增加授权逻辑 -
我们期望页面能够展示 Token Mint 环节产生的 Gas 消耗情况,以及利用余额判断是否满足 paymaster 调用(paymaster 限制了最少需要 1 个 token),我们继续基于前面代码(
use-token
)增加以下两个内容:
-
-
useNFT (
hooks/use-nft.ts
)-
NFT 合约中我们需要完成 NFT 持有数量查询,mint NFT 逻辑,同时 mint 时,我们集成了 paymaster 的支付手段,首先我们需要关注的是我们采用的是 zksync-ethers 的
Contract
和Web3Provider
这是官方扩展的类,里面涉及了抽象账户,Paymaster 逻辑等 zksync 独特的功能,我们这边需要用到 paymaster,故我们不能直接采用 ethers 里面构建合约;其次我们在调用合约的时候传入customData
即可,这里我们在前面usePaymaster
中已经提及,这是调用 paymaster 的关键: -
创建
hooks/use-nft.ts
,根据关键代码写入内容如下: -
当然我们也要与 token 类似,为了辅助我们页面展示 mint NFT 消耗 Gas 的情况,我们也加入了 getNFTMintEstimate 计算,在前者代码(
use-nft
)中增加函数
-
-
-
前面我们已经完了所有合约交互相关的核心逻辑,接下来我们要把他们运用到页面中,让我们的页面更加完善,我们需完成一下内容,样式部分我已经在模版中完成,只需要使用 hooks 填充数据即可:
-
打开
app/(main)/step-mint.tsx
完成初始数据加载 -
完成
components/mint-token-modal
逻辑,以铸造满足 Paymaster 使用的 token 金额 -
在
components/mint-nft-modal
中使用 useNFT 完成逻辑交互
-
-
此时我们已完成了前端开发,我们可以去页面中开始尝试 paymaster 的神奇吧!体验无 Gas 铸造 NFT 的过程。
- 使用
pnpm dev | yarn dev | npm run dev
导航到http://localhost:3000
并刷新页面。单击“连接钱包”链接您的 MetaMask 帐户。确保你持有 zksync Sepolia 测试网 ETH - 查看 paymaster 余额,如果不够可以捐赠一些以满足正常是的运转
- 铸造 Token 用于 NFT 铸造的支付
- 开始 NFT 铸造,可以看到右侧一个签名,完成后即可满足最终的交易执行成功
- 使用