fix: support paymaster via auth-server

still have stuff to fix and tests, but was able to validate manually

Author: cpb8010

examples/demo-app/pages/index.vue

@@ -17,13 +17,12 @@
       Connect with Session
     </button>
     <button
-      v-if="address"
-      title="Send ETH with paymaster sponsoring gas"
-      class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mr-4 disabled:bg-slate-300"
-      :disabled="isSendingEth"
-      @click="sendTokensWithPaymaster()"
+      v-if="!address"
+      title="Connect with paymaster sponsoring gas (no session)"
+      class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mr-4"
+      @click="connectWallet('paymaster')"
     >
-      Send 0.1 ETH (Paymaster)
+      Connect (Paymaster)
     </button>
     <button
       v-if="!address"
@@ -45,13 +44,20 @@
     >
       <p>Balance: {{ balance ? `${balance.formatted} ${balance.symbol}` : '...' }}</p>
     </div>
+    <div
+      v-if="address"
+      class="mt-4"
+    >
+      <p>Connection Mode: {{ connectionMode }} {{ isPaymasterEnabled ? '(Gas Sponsored ✨)' : '' }}</p>
+    </div>
     <button
       v-if="address"
-      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-3 mr-4 disabled:bg-slate-300"
+      :class="isPaymasterEnabled ? 'bg-green-500 hover:bg-green-700' : 'bg-blue-500 hover:bg-blue-700'"
+      class="text-white font-bold py-2 px-4 rounded mt-3 mr-4 disabled:bg-slate-300"
       :disabled="isSendingEth"
       @click="sendTokens()"
     >
-      Send 0.1 ETH
+      Send 0.1 ETH{{ isPaymasterEnabled ? ' (Paymaster)' : '' }}
     </button>
 
     <!-- <div
@@ -113,8 +119,8 @@
 </template>
 
 <script lang="ts" setup>
-import { disconnect, getBalance, watchAccount, sendTransaction, createConfig, connect, waitForTransactionReceipt, type GetBalanceReturnType, signTypedData, readContract } from "@wagmi/core";
-import { createWalletClient, createPublicClient, http, parseEther, type Address, type Hash } from "viem";
+import { disconnect, getBalance, watchAccount, createConfig, connect, waitForTransactionReceipt, type GetBalanceReturnType, signTypedData, readContract, getConnectorClient } from "@wagmi/core";
+import { createWalletClient, createPublicClient, http, parseEther, toHex, type Address, type Hash } from "viem";
 import { zksyncSsoConnector } from "zksync-sso-4337/connector";
 import { privateKeyToAccount } from "viem/accounts";
 import { localhost } from "viem/chains";
@@ -190,6 +196,8 @@ const wagmiConfig = createConfig({
 const address = ref<Address | null>(null);
 const balance = ref<GetBalanceReturnType | null>(null);
 const errorMessage = ref<string | null>(null);
+const connectionMode = ref<string>("Not connected");
+const isPaymasterEnabled = computed(() => connectionMode.value === "paymaster" || connectionMode.value === "session-paymaster");
 const isInitializing = ref(true);
 
 // Ensure fresh, unauthenticated state on page load so the connect buttons render
@@ -271,6 +279,9 @@ const connectWallet = async (mode: "regular" | "session" | "paymaster" | "sessio
       return;
     }
 
+    // Track which mode was used for connection
+    connectionMode.value = mode;
+
     connect(wagmiConfig, {
       connector,
       chainId: chain.id,
@@ -284,7 +295,16 @@ const connectWallet = async (mode: "regular" | "session" | "paymaster" | "sessio
 
 const disconnectWallet = async () => {
   errorMessage.value = "";
-  await disconnect(wagmiConfig);
+  try {
+    await disconnect(wagmiConfig);
+  } catch (error) {
+    // If connector doesn't have disconnect method, manually reset state
+    // eslint-disable-next-line no-console
+    console.warn("Disconnect failed, manually resetting state:", error);
+    address.value = null;
+    balance.value = null;
+  }
+  connectionMode.value = "Not connected";
 };
 
 /* Send ETH */
@@ -296,19 +316,18 @@ const sendTokens = async () => {
   errorMessage.value = "";
   isSendingEth.value = true;
   try {
-    let transactionHash;
-
-    transactionHash = await sendTransaction(wagmiConfig, {
-      to: testTransferTarget,
-      value: parseEther("0.1"),
-    });
-
-    // FIXME: When not using sessions, sendTransaction returns a map and not a string
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if ((transactionHash as any).value !== undefined) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      transactionHash = (transactionHash as any).value;
-    }
+    // Get the connector client which will have paymaster config if connected with paymaster mode
+    const connectorClient = await getConnectorClient(wagmiConfig);
+
+    // Use the provider's request method which routes through our custom client
+    const transactionHash = await connectorClient.request({
+      method: "eth_sendTransaction",
+      params: [{
+        from: address.value,
+        to: testTransferTarget,
+        value: toHex(parseEther("0.1")),
+      }],
+    }) as Hash;
 
     const receipt = await waitForTransactionReceipt(wagmiConfig, {
       hash: transactionHash,
@@ -341,68 +360,6 @@ const sendTokens = async () => {
   }
 };
 
-const sendTokensWithPaymaster = async () => {
-  if (!address.value) return;
-
-  errorMessage.value = "";
-  isSendingEth.value = true;
-  try {
-    if (!testPaymasterAddress) {
-      throw new Error("Paymaster address not configured");
-    }
-
-    // Temporarily reconfigure with paymaster
-    const paymasterConnector = buildConnector("paymaster");
-
-    // Reconnect with paymaster config
-    await disconnect(wagmiConfig);
-    await connect(wagmiConfig, {
-      connector: paymasterConnector,
-      chainId: chain.id,
-    });
-
-    // Wait for reconnection
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-
-    let transactionHash = await sendTransaction(wagmiConfig, {
-      to: testTransferTarget,
-      value: parseEther("0.1"),
-    });
-
-    // FIXME: When not using sessions, sendTransaction returns a map and not a string
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if ((transactionHash as any).value !== undefined) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      transactionHash = (transactionHash as any).value;
-    }
-
-    const receipt = await waitForTransactionReceipt(wagmiConfig, {
-      hash: transactionHash,
-    });
-    balance.value = await getBalance(wagmiConfig, {
-      address: address.value,
-    });
-    if (receipt.status === "reverted") throw new Error("Transaction reverted");
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error("Paymaster transaction failed:", error);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let transactionFailureDetails = (error as any).cause?.cause?.cause?.data?.originalError?.cause?.details;
-    if (!transactionFailureDetails) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      transactionFailureDetails = (error as any).cause?.details;
-    }
-
-    if (transactionFailureDetails) {
-      errorMessage.value = transactionFailureDetails;
-    } else {
-      errorMessage.value = "Paymaster transaction failed, see console for more info.";
-    }
-  } finally {
-    isSendingEth.value = false;
-  }
-};
-
 /* Typed data */
 const typedDataSignature = ref<Hash | null>(null);
 const isValidTypedDataSignature = ref<boolean | null>(null);

examples/demo-app/project.json

@@ -87,6 +87,23 @@
       },
       "dependsOn": ["build:local"]
     },
+    "dev-all": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "examples/demo-app",
+        "commands": [
+          {
+            "command": "pnpm nx dev:with-api auth-server",
+            "prefix": "Auth-Server:"
+          },
+          {
+            "command": "PORT=3005 pnpm run dev",
+            "prefix": "Demo-App:"
+          }
+        ]
+      },
+      "dependsOn": ["build:local"]
+    },
     "e2e:setup:erc4337": {
       "executor": "nx:run-commands",
       "options": {

examples/demo-app/tests/create-account.spec.ts

@@ -241,12 +241,12 @@ test("Create passkey account and send ETH", async ({ page }) => {
     .toBeGreaterThan(endBalance + 0.1);
 });
 
-test("Create passkey account and verify paymaster button", async ({ page }) => {
+test("Create passkey account and send ETH with paymaster", async ({ page }) => {
   // Create account with regular connect
   await page.getByRole("button", { name: "Connect", exact: true }).click();
 
   await page.waitForTimeout(2000);
-  const popup = page.context().pages()[1];
+  let popup = page.context().pages()[1];
   await expect(popup.getByText("Connect to")).toBeVisible();
   popup.on("console", (msg) => {
     if (msg.type() === "error") console.log(`Auth server error console: "${msg.text()}"`);
@@ -256,8 +256,13 @@ test("Create passkey account and verify paymaster button", async ({ page }) => {
   });
 
   // Setup WebAuthn for passkey creation
-  const client = await popup.context().newCDPSession(popup);
+  let client = await popup.context().newCDPSession(popup);
   await client.send("WebAuthn.enable");
+  let newCredential: WebAuthnCredential | null = null;
+  client.on("WebAuthn.credentialAdded", (credentialAdded) => {
+    console.log("New Passkey credential added");
+    newCredential = credentialAdded.credential;
+  });
   await client.send("WebAuthn.addVirtualAuthenticator", {
     options: {
       protocol: "ctap2",
@@ -279,16 +284,129 @@ test("Create passkey account and verify paymaster button", async ({ page }) => {
   await expect(page.getByText("Disconnect")).toBeVisible({ timeout: 10000 });
   await expect(page.getByText("Balance:")).toBeVisible();
 
-  const balanceText = await page.getByText("Balance:").innerText();
-  const balance = +balanceText.replace("Balance: ", "").replace(" ETH", "");
+  const startBalanceText = await page.getByText("Balance:").innerText();
+  const startBalance = +startBalanceText.replace("Balance: ", "").replace(" ETH", "");
+  console.log(`Starting balance: ${startBalance} ETH`);
 
-  // Verify paymaster button exists and is enabled
+  // Click "Send 0.1 ETH (Paymaster)" button
   await expect(page.getByRole("button", { name: "Send 0.1 ETH (Paymaster)", exact: true })).toBeVisible();
+  await page.getByRole("button", { name: "Send 0.1 ETH (Paymaster)", exact: true }).click();
+
+  // Wait for Auth Server to pop back up
+  await page.waitForTimeout(2000);
+
+  // Check if popup appeared
+  const pages = page.context().pages();
+  console.log(`Number of pages after clicking paymaster button: ${pages.length}`);
+  if (pages.length < 2) {
+    console.log("ERROR: Auth server popup did not appear!");
+    console.log("This means the paymaster transaction may not require confirmation");
+    throw new Error("Auth server popup did not appear after clicking paymaster button");
+  }
+
+  popup = pages[1];
+
+  // Debug: Check what screen the popup is showing
+  console.log(`Popup URL: ${popup.url()}`);
+  const popupTitle = await popup.title();
+  console.log(`Popup title: ${popupTitle}`);
+
+  // Check if this is a connection screen or transaction screen
+  const isConnectionScreen = popup.url().includes("/connect");
+  console.log(`Is connection screen: ${isConnectionScreen}`);
+
+  if (isConnectionScreen) {
+    console.log("⚠️  Popup is showing connection approval, not transaction confirmation!");
+    console.log("This means disconnect/reconnect triggered a new connection request");
+    console.log("We need to approve the connection first, then wait for transaction popup");
+
+    // Recreate the virtual authenticator for connection approval
+    client = await popup.context().newCDPSession(popup);
+    await client.send("WebAuthn.enable");
+    const connResult = await client.send("WebAuthn.addVirtualAuthenticator", {
+      options: {
+        protocol: "ctap2",
+        transport: "usb",
+        hasResidentKey: true,
+        hasUserVerification: true,
+        isUserVerified: true,
+        automaticPresenceSimulation: true,
+      },
+    });
+    await expect(newCredential).not.toBeNull();
+    await client.send("WebAuthn.addCredential", {
+      authenticatorId: connResult.authenticatorId,
+      credential: newCredential!,
+    });
+
+    // Click "Connect" to approve the connection
+    console.log("Clicking Connect button to approve reconnection...");
+    await popup.getByTestId("connect").click();
+
+    // Wait for connection popup to close and transaction popup to open
+    await page.waitForTimeout(3000);
+    const pagesAfterConnection = page.context().pages();
+    console.log(`Pages after connection approval: ${pagesAfterConnection.length}`);
+
+    if (pagesAfterConnection.length < 2) {
+      throw new Error("Transaction popup did not appear after connection approval");
+    }
+
+    // Get the NEW popup (transaction confirmation)
+    popup = pagesAfterConnection[pagesAfterConnection.length - 1];
+    console.log(`New popup URL: ${popup.url()}`);
+  }
+
+  // Now we should have the transaction confirmation popup
+  // Recreate the virtual authenticator for transaction signature
+  client = await popup.context().newCDPSession(popup);
+  await client.send("WebAuthn.enable");
+  const result = await client.send("WebAuthn.addVirtualAuthenticator", {
+    options: {
+      protocol: "ctap2",
+      transport: "usb",
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+      automaticPresenceSimulation: true,
+    },
+  });
+  await expect(newCredential).not.toBeNull();
+  await client.send("WebAuthn.addCredential", {
+    authenticatorId: result.authenticatorId,
+    credential: newCredential!,
+  });
+
+  // Verify the transaction details in auth server
+  await expect(popup.getByText("-0.1")).toBeVisible();
+  await expect(popup.getByText("Sending to")).toBeVisible();
+
+  // CRITICAL: Verify that fees are shown as sponsored (paymaster covers them)
+  await expect(popup.getByText("Fees")).toBeVisible();
+  const sponsoredText = popup.getByText("0 ETH (Sponsored)");
+  await expect(sponsoredText, "Paymaster should cover fees - expecting '0 ETH (Sponsored)' to be shown").toBeVisible();
+  console.log("✓ Auth server shows fees are sponsored by paymaster");
+
+  // Confirm the transfer
+  await popup.getByTestId("confirm").click();
+
+  // Wait for confirmation to complete and popup to close
+  await page.waitForTimeout(2000);
+
+  // Verify transaction completed
   await expect(page.getByRole("button", { name: "Send 0.1 ETH (Paymaster)", exact: true })).toBeEnabled();
 
-  console.log(`Account created with balance: ${balance} ETH. Paymaster button verified.`);
-  // Note: Actual paymaster transaction testing is covered by Test 4 (session + paymaster)
-  // which successfully tests paymaster sponsorship via the "Connect Session (Paymaster)" flow
+  const endBalanceText = await page.getByText("Balance:").innerText();
+  const endBalance = +endBalanceText.replace("Balance: ", "").replace(" ETH", "");
+  console.log(`Ending balance: ${endBalance} ETH`);
+
+  const balanceChange = startBalance - endBalance;
+  console.log(`Balance change: ${balanceChange} ETH`);
+
+  // Balance should decrease by EXACTLY 0.1 ETH (no gas fees paid by user)
+  // Allow small tolerance for rounding
+  expect(Math.abs(balanceChange - 0.1), "Balance should decrease by exactly 0.1 ETH (paymaster pays gas)").toBeLessThan(0.001);
+  console.log("✓ Paymaster successfully covered gas fees - balance decreased by exactly 0.1 ETH");
 });
 
 test("Create account with session, create session via paymaster, and send ETH", async ({ page }) => {