feat: use paymaster for nft minting

Author: cpb8010

examples/nft-quest/composables/useMintNft.ts

@@ -7,13 +7,10 @@ export const useMintNft = async (_address: MaybeRef<Address>) => {
     const runtimeConfig = useRuntimeConfig();
     const clientStore = useClientStore();
 
-    // WORKAROUND: Use throw-away client (rich account #0) to mint
-    // TODO: Use passkey client with bundler once factory contracts are deployed
-    const client = clientStore.getThrowAwayClient();
+    const client = clientStore.getClient();
 
     const mintingForAddress = address.value;
 
-    // Submit mint transaction directly (not via bundler)
     const hash = await client.writeContract({
       address: runtimeConfig.public.contracts.nft as Address,
       abi: nftAbi,

examples/nft-quest/nuxt.config.ts

@@ -35,7 +35,9 @@ export default defineNuxtConfig({
         contracts: {
           nft: "0x4D533d3B20b50b57268f189F93bFaf8B39c36AB6",
           paymaster: "0x60eef092977DF2738480a6986e2aCD10236b1FA7",
+          webauthnValidator: "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512",
         },
+        bundlerUrl: "http://localhost:4337",
         baseUrl: "https://nft.zksync.dev",
         authServerUrl: "https://auth-test.zksync.dev/confirm",
         explorerUrl: "https://sepolia.explorer.zksync.io",
@@ -73,7 +75,9 @@ export default defineNuxtConfig({
       contracts: {
         nft: process.env.NUXT_PUBLIC_CONTRACTS_NFT || "0x4c07ce6454D5340591f62fD7d3978B6f42Ef953e",
         paymaster: process.env.NUXT_PUBLIC_CONTRACTS_PAYMASTER || "",
+        webauthnValidator: process.env.NUXT_PUBLIC_CONTRACTS_WEBAUTHN_VALIDATOR || "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512",
       },
+      bundlerUrl: process.env.NUXT_PUBLIC_BUNDLER_URL || "http://localhost:4337",
       baseUrl: "http://localhost:3006",
       authServerUrl: "http://localhost:3002/confirm",
       explorerUrl: "http://localhost:3010",

examples/nft-quest/stores/client.ts

@@ -1,12 +1,10 @@
 import type { Address, Hex } from "viem";
-import { createPublicClient, createWalletClient, http, publicActions } from "viem";
+import { createPublicClient, http } from "viem";
 import { createBundlerClient } from "viem/account-abstraction";
-import { privateKeyToAccount } from "viem/accounts";
 import type { Chain } from "viem/chains";
+import { getGeneralPaymasterInput } from "viem/zksync";
 import { createPasskeyClient } from "zksync-sso-4337/client";
 
-import contractsConfig from "../contracts-anvil.json";
-
 // Anvil chain configuration (chain ID 31337)
 const anvilChain: Chain = {
   id: 31337,
@@ -31,11 +29,26 @@ export const useClientStore = defineStore("client", () => {
 
   const getBundlerClient = () => {
     const publicClient = getPublicClient();
+    const runtimeConfig = useRuntimeConfig();
+    const paymasterAddress = runtimeConfig.public.contracts.paymaster as Address;
+    const bundlerUrl = runtimeConfig.public.bundlerUrl as string;
 
     return createBundlerClient({
       client: publicClient,
       chain,
-      transport: http(contractsConfig.bundlerUrl),
+      transport: http(bundlerUrl),
+      paymaster: {
+        async getPaymasterData() {
+          return {
+            paymasterAndData: `${paymasterAddress}${getGeneralPaymasterInput({ innerInput: "0x" }).substring(2)}` as Hex,
+          };
+        },
+        async getPaymasterStubData() {
+          return {
+            paymasterAndData: `${paymasterAddress}${getGeneralPaymasterInput({ innerInput: "0x" }).substring(2)}` as Hex,
+          };
+        },
+      },
       userOperation: {
         async estimateFeesPerGas() {
           const feesPerGas = await publicClient.estimateFeesPerGas();
@@ -54,12 +67,13 @@ export const useClientStore = defineStore("client", () => {
     if (!address.value) throw new Error("Address is not set");
     if (!credentialId.value) throw new Error("Credential ID is not set");
 
+    const runtimeConfig = useRuntimeConfig();
     const bundlerClient = getBundlerClient();
 
     const client = createPasskeyClient({
       account: {
         address: address.value,
-        validatorAddress: contractsConfig.webauthnValidator as Address,
+        validatorAddress: runtimeConfig.public.contracts.webauthnValidator as Address,
         credentialId: credentialId.value,
         rpId: window.location.hostname,
         origin: window.location.origin,
@@ -72,31 +86,20 @@ export const useClientStore = defineStore("client", () => {
     return client;
   };
 
-  const getThrowAwayClient = () => {
-    const throwAwayClient = createWalletClient({
-      account: privateKeyToAccount(
-        "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80", // Anvil rich account
-      ),
-      chain,
-      transport: http(),
-    })
-      .extend(publicActions);
-    return throwAwayClient;
-  };
-
   const getConfigurableClient = ({
     address: addr,
     credentialId: credId,
   }: {
     address: Address;
     credentialId: Hex;
   }) => {
+    const runtimeConfig = useRuntimeConfig();
     const bundlerClient = getBundlerClient();
 
     return createPasskeyClient({
       account: {
         address: addr,
-        validatorAddress: contractsConfig.webauthnValidator as Address,
+        validatorAddress: runtimeConfig.public.contracts.webauthnValidator as Address,
         credentialId: credId,
         rpId: window.location.hostname,
         origin: window.location.origin,
@@ -109,11 +112,9 @@ export const useClientStore = defineStore("client", () => {
 
   return {
     chain,
-    contractsConfig,
     getPublicClient,
     getBundlerClient,
     getClient,
-    getThrowAwayClient,
     getConfigurableClient,
   };
 });