fix(wallet-client): handle permits in sendCalls action, add clarifying docs

account-kit/react/src/experimental/hooks/useSendCalls.ts

@@ -63,6 +63,11 @@ export type UseSendCallsResult<
  * or fall back to regular EOA transactions when connected to an EOA wallet. It handles the complete
  * flow of preparing, signing, and sending calls.
  *
+ * <Note>
+ * If using this hook with an ERC-20 paymaster in pre-operation mode with `autoPermit`, the contents of the permit will be hidden
+ * from the user. It is recommended to use the `usePrepareCalls` hook instead to manually handle the permit signature.
+ * </Note>
+ *
  * @template TEntryPointVersion - The entry point version to use for user operations (defaults to EntryPointVersion)
  *
  * @param {UseSendCallsParams} params - Configuration parameters for the hook

account-kit/wallet-client/src/client/actions/sendCalls.ts

@@ -3,11 +3,12 @@ import type { InnerWalletApiClient } from "../../types.js";
 import { prepareCalls, type PrepareCallsParams } from "./prepareCalls.js";
 import { metrics } from "../../metrics.js";
 import { signPreparedCalls } from "./signPreparedCalls.js";
-import type { SmartAccountSigner } from "@aa-sdk/core";
+import { type SmartAccountSigner } from "@aa-sdk/core";
 import {
   sendPreparedCalls,
   type SendPreparedCallsResult,
 } from "./sendPreparedCalls.js";
+import { signSignatureRequest } from "./signSignatureRequest.js";
 
 export type SendCallsParams<
   TAccount extends Address | undefined = Address | undefined,
@@ -18,6 +19,11 @@ export type SendCallsResult = SendPreparedCallsResult;
 /**
  * Prepares, signs, and submits calls. This function internally calls `prepareCalls`, `signPreparedCalls`, and `sendPreparedCalls`.
  *
+ * <Note>
+ * If using this action with an ERC-20 paymaster in pre-operation mode with `autoPermit`, the contents of the permit will be hidden
+ * from the user. It is recommended to use the `prepareCalls` action instead to manually handle the permit signature.
+ * </Note>
+ *
  * @param {InnerWalletApiClient} client - The wallet API client to use for the request
  * @param {SmartAccountSigner} signer - The signer to use
  * @param {PrepareCallsParams<TAccount>} params - Parameters for sending calls
@@ -54,7 +60,23 @@ export async function sendCalls<
     name: "send_calls",
   });
 
-  const calls = await prepareCalls(client, params);
+  let calls = await prepareCalls(client, params);
+
+  if (calls.type === "paymaster-permit") {
+    const signature = await signSignatureRequest(
+      signer,
+      calls.signatureRequest,
+    );
+
+    const secondCallParams = {
+      from: calls.modifiedRequest.from,
+      calls: calls.modifiedRequest.calls,
+      capabilities: calls.modifiedRequest.capabilities,
+      paymasterPermitSignature: signature,
+    };
+
+    calls = await prepareCalls(client, secondCallParams);
+  }
 
   const signedCalls = await signPreparedCalls(signer, calls);
 

docs/pages/reference/account-kit/wallet-client/functions/sendCalls.mdx

@@ -7,6 +7,13 @@ slug: wallets/reference/account-kit/wallet-client/functions/sendCalls
 
 Prepares, signs, and submits calls. This function internally calls `prepareCalls`, `signPreparedCalls`, and `sendPreparedCalls`.
 
+<Note>
+  If using this action with an ERC-20 paymaster in pre-operation mode with
+  `autoPermit`, the contents of the permit will be hidden from the user. It is
+  recommended to use the `prepareCalls` action instead to manually handle the
+  permit signature.
+</Note>
+
 ## Import
 
 ```ts