thirdweb 5.98.2 → 5.99.1-nightly-1985de89aae5196233789221ad06f1b6554d27fc-20250513000404

package/src/react/core/hooks/wallets/useSendAndConfirmCalls.ts

@@ -0,0 +1,114 @@
+import {
+  type UseMutationResult,
+  useMutation,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { sendAndConfirmCalls } from "../../../../wallets/eip5792/send-and-confirm-calls.js";
+import type { SendCallsOptions } from "../../../../wallets/eip5792/send-calls.js";
+import type { GetCallsStatusResponse } from "../../../../wallets/eip5792/types.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { invalidateWalletBalance } from "../../providers/invalidateWalletBalance.js";
+import { useActiveWallet } from "./useActiveWallet.js";
+
+/**
+ * A hook to send [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792) calls to a wallet.
+ * This hook works with all Thirdweb wallets (in-app and smart) and certain injected wallets that already support EIP-5792.
+ * Transactions will be batched and sponsored when those capabilities are supported, otherwise they will be sent as individual transactions.
+ *
+ * When calls are sent, all contracts that are interacted with will have their corresponding reads revalidated via React Query.
+ *
+ * This hook is dependent on the wallet's support for EIP-5792 and could fail.
+ * The mutation function will use your currently connected wallet by default, but you can pass it a specific wallet to use if you'd like.
+ *
+ * @returns A React Query mutation object to interact with {@link sendAndConfirmCalls}
+ * @throws an error if the wallet does not support EIP-5792.
+ * @returns The ID of the bundle of the calls.
+ *
+ * @beta
+ * @example
+ * ```tsx
+ * import { useSendCalls } from "thirdweb/react";
+ *
+ * const sendTx1 = approve({
+      contract: USDT_CONTRACT,
+      amount: 100,
+      spender: "0x33d9B8BEfE81027E2C859EDc84F5636cbb202Ed6",
+    });
+ * const sendTx2 = approve({
+      contract: USDT_CONTRACT,
+      amount: 100,
+      spender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+    });
+ * const { mutate: sendCalls, data: result } = useSendAndConfirmCalls();
+ * await sendCalls({
+ *   client,
+ *   calls: [sendTx1, sendTx2],
+ * });
+ * 
+ * console.log("Transaction hash:", result.receipts?.[0]?.transactionHash);
+ * ```
+
+ * Sponsor transactions with a paymaster:
+ * ```ts
+ * const { mutate: sendAndConfirmCalls, data: id } = useSendAndConfirmCalls();
+ * const result = await sendAndConfirmCalls({
+ *   client,
+ *   calls: [sendTx1, sendTx2],
+ *   capabilities: {
+ *     paymasterService: {
+ *       url: `https://${CHAIN.id}.bundler.thirdweb.com/${client.clientId}`
+ *     }
+ *   }
+ * });
+ * console.log("Transaction hash:", result.receipts?.[0]?.transactionHash);
+ * ```
+ *
+ *  We recommend proxying any paymaster calls via an API route you setup and control.
+ * @extension EIP5792
+ */
+export function useSendAndConfirmCalls(args?: {
+  maxBlocksWaitTime?: number;
+}): UseMutationResult<
+  GetCallsStatusResponse,
+  Error,
+  Omit<SendCallsOptions, "chain" | "wallet"> & { wallet?: Wallet } // Optional wallet override
+> {
+  const activeWallet = useActiveWallet();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (options) => {
+      const { wallet = activeWallet } = options;
+      if (!wallet) {
+        throw new Error(
+          "Failed to send transactions, no connected wallet found.",
+        );
+      }
+
+      return sendAndConfirmCalls({
+        ...options,
+        wallet,
+        maxBlocksWaitTime: args?.maxBlocksWaitTime,
+      });
+    },
+    onSettled: async (_result, _error, variables) => {
+      // Attempt to invalidate any reads related to the sent transactions
+      const call = variables.calls[0];
+      if (!call) {
+        return;
+      }
+      const chain = call.__contract?.chain || call.chain;
+
+      for (const call of variables.calls) {
+        queryClient.invalidateQueries({
+          queryKey: [
+            "readContract",
+            call.__contract?.chain.id || call.chain.id,
+            call.__contract?.address || call.to,
+          ],
+        });
+      }
+      invalidateWalletBalance(queryClient, chain.id);
+    },
+  });
+}

package/src/react/core/hooks/wallets/useSendCalls.ts

@@ -3,16 +3,12 @@ import {
   useMutation,
   useQueryClient,
 } from "@tanstack/react-query";
-import type { ThirdwebClient } from "../../../../client/client.js";
 import {
   type SendCallsOptions,
+  type SendCallsResult,
   sendCalls,
 } from "../../../../wallets/eip5792/send-calls.js";
-import type {
-  GetCallsStatusResponse,
-  WalletSendCallsId,
-} from "../../../../wallets/eip5792/types.js";
-import { waitForBundle } from "../../../../wallets/eip5792/wait-for-bundle.js";
+import { waitForCallsReceipt } from "../../../../wallets/eip5792/wait-for-calls-receipt.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { invalidateWalletBalance } from "../../providers/invalidateWalletBalance.js";
 import { useActiveWallet } from "./useActiveWallet.js";
@@ -46,7 +42,7 @@ import { useActiveWallet } from "./useActiveWallet.js";
       amount: 100,
       spender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
     });
- * const { mutate: sendCalls, data: bundleId } = useSendCalls({ client });
+ * const { mutate: sendCalls, data: id } = useSendCalls();
  * await sendCalls({
  *   wallet,
  *   client,
@@ -55,16 +51,19 @@ import { useActiveWallet } from "./useActiveWallet.js";
  * ```
  * Await the bundle's full confirmation:
  * ```tsx
- * const { mutate: sendCalls, data: bundleId } = useSendCalls({ client, waitForResult: true });
+ * const { mutate: sendCalls, data } = useSendCalls();
+ * const { data: result, isLoading } = useWaitForCallsReceipt(data); 
  * await sendCalls({
  *   wallet,
  *   client,
  *   calls: [sendTx1, sendTx2],
  * });
+ * 
+ * console.log("Receipts:", result.receipts);
  * ```
  * Sponsor transactions with a paymaster:
  * ```ts
- * const { mutate: sendCalls, data: bundleId } = useSendCalls();
+ * const { mutate: sendCalls, data: id } = useSendCalls();
  * await sendCalls({
  *   client,
  *   calls: [sendTx1, sendTx2],
@@ -75,15 +74,11 @@ import { useActiveWallet } from "./useActiveWallet.js";
  *   }
  * });
  * ```
- *
  *  We recommend proxying any paymaster calls via an API route you setup and control.
  * @extension EIP5792
  */
-export function useSendCalls({
-  client,
-  waitForResult = true,
-}: { client: ThirdwebClient; waitForResult?: boolean }): UseMutationResult<
-  GetCallsStatusResponse | WalletSendCallsId,
+export function useSendCalls(): UseMutationResult<
+  SendCallsResult,
   Error,
   Omit<SendCallsOptions, "chain" | "wallet"> & { wallet?: Wallet } // Optional wallet override
 > {
@@ -100,52 +95,40 @@ export function useSendCalls({
         );
       }
 
-      const callsPromise = sendCalls({ ...options, wallet });
-      if (!waitForResult) {
-        return callsPromise;
-      }
-
-      const result = await waitForBundle({
-        bundleId: await callsPromise,
-        wallet,
-        client,
-        chain,
-      });
-      return result;
+      return sendCalls({ ...options, wallet });
     },
-    onSettled: async (_result, _error, variables) => {
+    onSettled: async (result, _error, variables) => {
       // Attempt to invalidate any reads related to the sent transactions
-      const chain = activeWallet?.getChain();
-      if (!_result || !activeWallet || !chain) {
+      if (!result) {
+        return;
+      }
+      const call = variables.calls[0];
+      if (!call) {
         return;
       }
+      const chain = call.__contract?.chain || call.chain;
 
-      if (typeof _result === "string") {
-        await waitForBundle({
-          bundleId: _result,
-          wallet: activeWallet,
-          client,
-          chain,
-        }).catch((error) => {
+      waitForCallsReceipt(result)
+        .then(() => {
+          for (const call of variables.calls) {
+            queryClient.invalidateQueries({
+              queryKey: [
+                "readContract",
+                call.__contract?.chain.id || chain.id,
+                call.__contract?.address || call.to,
+              ],
+            });
+          }
+          invalidateWalletBalance(queryClient, chain.id);
+        })
+        .catch((error) => {
           console.error(
             "Failed to confirm sent bundle and invalidate queries",
-            _result,
+            result,
             error,
           );
           return undefined;
         });
-      }
-
-      for (const call of variables.calls) {
-        queryClient.invalidateQueries({
-          queryKey: [
-            "readContract",
-            call.__contract?.chain.id,
-            call.__contract?.address,
-          ],
-        });
-      }
-      invalidateWalletBalance(queryClient, chain.id);
     },
   });
 }

package/src/react/core/hooks/wallets/useWaitForCallsReceipt.ts

@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/react-query";
+import type { SendCallsResult } from "../../../../wallets/eip5792/send-calls.js";
+import { waitForCallsReceipt } from "../../../../wallets/eip5792/wait-for-calls-receipt.js";
+
+/**
+ * A hook to wait for the receipt of eip5792 calls.
+ * @param options - The options for the hook.
+ * @returns A useQuery object.
+ * @example
+ * ```tsx
+ * const { data: receipt, isLoading } = useWaitForCallsReceipt({ id, client, chain, wallet });
+ * ```
+ *
+ * Example with useSendCalls:
+ * ```tsx
+ * const { mutate: sendCalls, data } = useSendCalls();
+ * const { data: receipt, isLoading } = useWaitForCallsReceipt(data);
+ * ```
+ * @extension EIP5792
+ */
+export function useWaitForCallsReceipt(
+  args:
+    | (SendCallsResult & {
+        maxBlocksWaitTime?: number;
+        queryOptions?: { enabled?: boolean };
+      })
+    | undefined,
+) {
+  return useQuery({
+    queryKey: ["waitForCallsReceipt", args?.id] as const,
+    queryFn: async () => {
+      if (!args?.id) {
+        throw new Error("No call result provided");
+      }
+      return waitForCallsReceipt({
+        ...args,
+        maxBlocksWaitTime: args.maxBlocksWaitTime,
+      });
+    },
+    enabled: !!args?.id && (args?.queryOptions?.enabled ?? true),
+    retry: false,
+  });
+}

package/src/react/core/providers/thirdweb-provider.tsx

@@ -46,13 +46,14 @@ export function ThirdwebProviderCore(props: {
                             // invalidate any readContract queries for this chainId:contractAddress
                             [
                               "readContract",
-                              variables.__contract?.chain.id,
-                              variables.__contract?.address,
+                              variables.__contract?.chain.id ||
+                                variables.chain.id,
+                              variables.__contract?.address || variables.to,
                             ] as const,
                         }),
                         invalidateWalletBalance(
                           queryClient,
-                          variables.__contract?.chain.id,
+                          variables.__contract?.chain.id || variables.chain.id,
                         ),
                       ]);
                     });

package/src/utils/storage/inMemoryStorage.ts

@@ -0,0 +1,15 @@
+import type { AsyncStorage } from "./AsyncStorage.js";
+
+const store = new Map<string, string>();
+
+export const inMemoryStorage: AsyncStorage = {
+  getItem: async (key: string) => {
+    return store.get(key) ?? null;
+  },
+  setItem: async (key: string, value: string) => {
+    store.set(key, value);
+  },
+  removeItem: async (key: string) => {
+    store.delete(key);
+  },
+};

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.98.2";
+export const version = "5.99.1-nightly-1985de89aae5196233789221ad06f1b6554d27fc-20250513000404";

package/src/wallets/coinbase/coinbase-web.ts

@@ -1,14 +1,8 @@
 import type { ProviderInterface } from "@coinbase/wallet-sdk";
+import type { Preference } from "@coinbase/wallet-sdk/dist/core/provider/interface.js";
 import type { Address } from "abitype";
 import * as ox__Hex from "ox/Hex";
 import * as ox__TypedData from "ox/TypedData";
-import type { Account, Wallet } from "../interfaces/wallet.js";
-import type { SendTransactionOption } from "../interfaces/wallet.js";
-import type { AppMetadata, DisconnectFn, SwitchChainFn } from "../types.js";
-import { getValidPublicRPCUrl } from "../utils/chains.js";
-import { normalizeChainId } from "../utils/normalizeChainId.js";
-
-import type { Preference } from "@coinbase/wallet-sdk/dist/core/provider/interface.js";
 import { trackTransaction } from "../../analytics/track/transaction.js";
 import type { Chain } from "../../chains/types.js";
 import { getCachedChain, getChainMetadata } from "../../chains/utils.js";
@@ -22,14 +16,12 @@ import {
 } from "../../utils/encoding/hex.js";
 import { parseTypedData } from "../../utils/signatures/helpers/parse-typed-data.js";
 import { COINBASE } from "../constants.js";
-import type {
-  GetCallsStatusResponse,
-  WalletCapabilities,
-  WalletCapabilitiesRecord,
-  WalletSendCallsId,
-  WalletSendCallsParameters,
-} from "../eip5792/types.js";
+import type { Account, Wallet } from "../interfaces/wallet.js";
+import type { SendTransactionOption } from "../interfaces/wallet.js";
+import type { AppMetadata, DisconnectFn, SwitchChainFn } from "../types.js";
+import { getValidPublicRPCUrl } from "../utils/chains.js";
 import { getDefaultAppMetadata } from "../utils/defaultDappMetadata.js";
+import { normalizeChainId } from "../utils/normalizeChainId.js";
 import type { WalletEmitter } from "../wallet-emitter.js";
 import type {
   CreateWalletArgs,
@@ -171,109 +163,6 @@ export function isCoinbaseSDKWallet(
   return wallet.id === COINBASE;
 }
 
-/**
- * @internal
- */
-export async function coinbaseSDKWalletGetCapabilities(args: {
-  wallet: Wallet<typeof COINBASE>;
-}) {
-  const { wallet } = args;
-
-  const account = wallet.getAccount();
-  if (!account) {
-    return {
-      message: `Can't get capabilities, no account connected for wallet: ${wallet.id}`,
-    };
-  }
-
-  const config = wallet.getConfig();
-  const provider = await getCoinbaseWebProvider(config);
-  try {
-    return (await provider.request({
-      method: "wallet_getCapabilities",
-      params: [account.address],
-    })) as WalletCapabilitiesRecord<WalletCapabilities, number>;
-  } catch (error: unknown) {
-    if (/unsupport|not support/i.test((error as Error).message)) {
-      return {
-        message: `${wallet.id} does not support wallet_getCapabilities, reach out to them directly to request EIP-5792 support.`,
-      };
-    }
-    throw error;
-  }
-}
-
-/**
- * @internal
- */
-export async function coinbaseSDKWalletSendCalls(args: {
-  wallet: Wallet<typeof COINBASE>;
-  params: WalletSendCallsParameters;
-}) {
-  const { wallet, params } = args;
-
-  const config = wallet.getConfig();
-  const provider = await getCoinbaseWebProvider(config);
-
-  try {
-    return (await provider.request({
-      method: "wallet_sendCalls",
-      params,
-    })) as WalletSendCallsId;
-  } catch (error) {
-    if (/unsupport|not support/i.test((error as Error).message)) {
-      throw new Error(
-        `${wallet.id} does not support wallet_sendCalls, reach out to them directly to request EIP-5792 support.`,
-      );
-    }
-    throw error;
-  }
-}
-
-/**
- * @internal
- */
-export async function coinbaseSDKWalletShowCallsStatus(args: {
-  wallet: Wallet<typeof COINBASE>;
-  bundleId: string;
-}) {
-  const { wallet, bundleId } = args;
-
-  const provider = await getCoinbaseWebProvider(wallet.getConfig());
-
-  try {
-    return await provider.request({
-      method: "wallet_showCallsStatus",
-      params: [bundleId],
-    });
-  } catch (error: unknown) {
-    if (/unsupport|not support/i.test((error as Error).message)) {
-      throw new Error(
-        `${wallet.id} does not support wallet_showCallsStatus, reach out to them directly to request EIP-5792 support.`,
-      );
-    }
-    throw error;
-  }
-}
-
-/**
- * @internal
- */
-export async function coinbaseSDKWalletGetCallsStatus(args: {
-  wallet: Wallet<typeof COINBASE>;
-  bundleId: string;
-}) {
-  const { wallet, bundleId } = args;
-
-  const config = wallet.getConfig();
-  const provider = await getCoinbaseWebProvider(config);
-
-  return provider.request({
-    method: "wallet_getCallsStatus",
-    params: [bundleId],
-  }) as Promise<GetCallsStatusResponse>;
-}
-
 function createAccount({
   provider,
   address,

package/src/wallets/eip5792/get-calls-status.test.ts

@@ -89,7 +89,7 @@ describe.sequential("injected wallet", async () => {
     const promise = getCallsStatus({
       wallet: wallet,
       client: TEST_CLIENT,
-      bundleId: "test",
+      id: "test",
     });
 
     await expect(promise).rejects.toMatchInlineSnapshot(
@@ -107,17 +107,23 @@ describe.sequential("injected wallet", async () => {
     const result = await getCallsStatus({
       wallet: wallet,
       client: TEST_CLIENT,
-      bundleId: "test",
+      id: "test",
     });
 
     expect(mocks.injectedRequest).toHaveBeenCalledWith({
       method: "wallet_getCallsStatus",
       params: ["test"],
     });
-    expect(result).toEqual({
-      status: "CONFIRMED",
-      receipts: [],
-    });
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "atomic": false,
+        "chainId": undefined,
+        "receipts": [],
+        "status": "success",
+        "statusCode": 200,
+        "version": "2.0.0",
+      }
+    `);
   });
 
   test("without support should fail", async () => {
@@ -127,7 +133,7 @@ describe.sequential("injected wallet", async () => {
     const promise = getCallsStatus({
       wallet: wallet,
       client: TEST_CLIENT,
-      bundleId: "test",
+      id: "test",
     });
 
     await expect(promise).rejects.toMatchInlineSnapshot(
@@ -152,19 +158,15 @@ describe.sequential("in-app wallet", async () => {
     });
     wallet.getChain = vi.fn().mockReturnValue(ANVIL_CHAIN);
 
-    const bundleId = await sendCalls({
+    const callResult = await sendCalls({
       wallet: wallet,
       ...SEND_CALLS_OPTIONS,
     });
 
-    const result = await getCallsStatus({
-      wallet: wallet,
-      client: TEST_CLIENT,
-      bundleId,
-    });
+    const result = await getCallsStatus(callResult);
 
-    expect(result.status).toEqual("CONFIRMED");
-    expect(result.receipts.length).toEqual(2);
+    expect(result.status).toEqual("success");
+    expect(result.receipts?.length).toEqual(2);
   });
 
   test("with smart account", async () => {
@@ -177,19 +179,15 @@ describe.sequential("in-app wallet", async () => {
       sendBatchTransaction,
     });
 
-    const bundleId = await sendCalls({
+    const callResult = await sendCalls({
       wallet: wallet,
       ...SEND_CALLS_OPTIONS,
     });
 
-    const result = await getCallsStatus({
-      wallet: wallet,
-      client: TEST_CLIENT,
-      bundleId,
-    });
+    const result = await getCallsStatus(callResult);
 
-    expect(result.status).toEqual("CONFIRMED");
-    expect(result.receipts.length).toEqual(1);
+    expect(result.status).toEqual("success");
+    expect(result.receipts?.length).toEqual(1);
   });
 
   test("with pending transaction", async () => {
@@ -202,26 +200,22 @@ describe.sequential("in-app wallet", async () => {
       sendTransaction,
     });
 
-    const bundleId = await sendCalls({
+    const callResult = await sendCalls({
       wallet: wallet,
       ...SEND_CALLS_OPTIONS,
     });
 
-    const result = await getCallsStatus({
-      wallet: wallet,
-      client: TEST_CLIENT,
-      bundleId,
-    });
+    const result = await getCallsStatus(callResult);
 
-    expect(result.status).toEqual("PENDING");
-    expect(result.receipts.length).toEqual(0);
+    expect(result.status).toEqual("pending");
+    expect(result.receipts?.length).toEqual(0);
   });
 
   test("unknown bundle id should fail", async () => {
     const promise = getCallsStatus({
       wallet: wallet,
       client: TEST_CLIENT,
-      bundleId: "unknown",
+      id: "unknown",
     });
 
     await expect(promise).rejects.toMatchInlineSnapshot(
@@ -235,7 +229,7 @@ describe.sequential("in-app wallet", async () => {
     const promise = getCallsStatus({
       wallet: wallet,
       client: TEST_CLIENT,
-      bundleId: "test",
+      id: "test",
     });
 
     await expect(promise).rejects.toMatchInlineSnapshot(