thirdweb 5.29.3-nightly-f8e0c5f84bb3a07a2911b5fce51da3983bb2e9e9-20240614190203 → 5.29.3-nightly-f9081d58d42f9fc0272f1824c2faeda6304cc32c-20240614191805

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

@@ -0,0 +1,9 @@
+import { useSyncExternalStore } from "react";
+import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+
+export function useActiveWalletConnectionStatusCore(
+  manager: ConnectionManager,
+) {
+  const store = manager.activeWalletConnectionStatusStore;
+  return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
+}

package/src/react/core/hooks/{connection → wallets}/useAutoConnect.ts

@@ -1,47 +1,29 @@
 import { useQuery } from "@tanstack/react-query";
-import { createWallet } from "../../../../wallets/create-wallet.js";
-import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
+import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
+  type ConnectionManager,
   getLastConnectedChain,
   getStoredActiveWalletId,
   getStoredConnectedWalletIds,
 } from "../../../../wallets/manager/index.js";
-import { connectionManager } from "../../connectionManager.js";
-import { getStorage } from "../../storage.js";
 import { timeoutPromise } from "../../utils/timeoutPromise.js";
-import {
-  useConnect,
-  useSetActiveWalletConnectionStatus,
-} from "../wallets/wallet-hooks.js";
-import type { AutoConnectProps } from "./AutoConnect.js";
+import type { AutoConnectProps } from "../connection/types.js";
+import { useConnectCore } from "./useConnect.js";
+import { useSetActiveWalletConnectionStatusCore } from "./useSetActiveWalletConnectionStatus.js";
 
-/**
- * Autoconnect the last previously connected wallet.
- *
- * @example
- * ```tsx
- * import { useAutoConnect } from "thirdweb/react";
- *
- * const { data: autoConnected, isLoading } = useAutoConnect({
- *  client,
- *  accountAbstraction,
- *  wallets,
- *  onConnect,
- *  timeout,
- * });
- * ```
- * @walletConnection
- * @param props - The props for auto connect.
- * @returns whether the auto connect was successful.
- */
-export function useAutoConnect(props: AutoConnectProps) {
-  const setConnectionStatus = useSetActiveWalletConnectionStatus();
-  const { connect } = useConnect({
+export function useAutoConnectCore(
+  manager: ConnectionManager,
+  storage: AsyncStorage,
+  props: AutoConnectProps,
+  getInstalledWallets?: () => Wallet[],
+) {
+  const setConnectionStatus = useSetActiveWalletConnectionStatusCore(manager);
+  const { connect } = useConnectCore(manager, {
     client: props.client,
     accountAbstraction: props.accountAbstraction,
   });
-  const { isAutoConnecting } = connectionManager;
+  const { isAutoConnecting } = manager;
   const { wallets, onConnect } = props;
   const timeout = props.timeout ?? 15000;
   // get the supported wallets from thirdweb provider
@@ -50,10 +32,9 @@ export function useAutoConnect(props: AutoConnectProps) {
   const autoConnect = async (): Promise<boolean> => {
     let autoConnected = false;
     isAutoConnecting.setValue(true);
-    const asyncLocalStorage = getStorage();
     const [lastConnectedWalletIds, lastActiveWalletId] = await Promise.all([
-      getStoredConnectedWalletIds(asyncLocalStorage),
-      getStoredActiveWalletId(asyncLocalStorage),
+      getStoredConnectedWalletIds(storage),
+      getStoredActiveWalletId(storage),
     ]);
 
     // if no wallets were last connected
@@ -61,7 +42,7 @@ export function useAutoConnect(props: AutoConnectProps) {
       return autoConnected;
     }
 
-    const lastConnectedChain = await getLastConnectedChain(asyncLocalStorage);
+    const lastConnectedChain = await getLastConnectedChain(storage);
 
     async function handleWalletConnection(wallet: Wallet) {
       return wallet.autoConnect({
@@ -70,10 +51,7 @@ export function useAutoConnect(props: AutoConnectProps) {
       });
     }
 
-    const availableWallets = [
-      ...wallets,
-      ...getInstalledWalletProviders().map((p) => createWallet(p.info.rdns)),
-    ];
+    const availableWallets = [...wallets, ...(getInstalledWallets?.() ?? [])];
     const activeWallet =
       lastActiveWalletId &&
       availableWallets.find((w) => w.id === lastActiveWalletId);
@@ -119,7 +97,7 @@ export function useAutoConnect(props: AutoConnectProps) {
     for (const wallet of otherWallets) {
       try {
         await handleWalletConnection(wallet);
-        connectionManager.addConnectedWallet(wallet);
+        manager.addConnectedWallet(wallet);
       } catch (e) {
         console.error("Failed to auto connect a non-active connected wallet");
         console.error(e);

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

@@ -6,29 +6,17 @@ import {
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getCallsStatus } from "../../../../wallets/eip5792/get-calls-status.js";
 import type { GetCallsStatusResponse } from "../../../../wallets/eip5792/types.js";
-import { useActiveWallet } from "./wallet-hooks.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 
-/**
- * A hook to get a call bundle's current status according to [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792).
- *
- * @note This function is dependent on the wallet's support for EIP-5792 and could throw an error if it's not supported.
- *
- * @returns a React Query object.
- * @beta
- * @example
- * ```tsx
- * import { useCallsStatus } from "thirdweb/react";
- * const { data: status, isLoading } = useCallsStatus({ bundleId, client });
- * ```
- * @extension EIP5792
- */
-export function useCallsStatus(options: {
-  bundleId: string;
-  client: ThirdwebClient;
-  queryOptions?: Pick<UseQueryOptions, "enabled" | "retry">;
-}): UseQueryResult<GetCallsStatusResponse> {
+export function useCallsStatusCore(
+  options: {
+    bundleId: string;
+    client: ThirdwebClient;
+    queryOptions?: Pick<UseQueryOptions, "enabled" | "retry">;
+  },
+  wallet?: Wallet,
+): UseQueryResult<GetCallsStatusResponse> {
   const { client, bundleId } = options;
-  const wallet = useActiveWallet();
 
   return useQuery({
     queryKey: [

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

@@ -7,28 +7,14 @@ import {
   type GetCapabilitiesResult,
   getCapabilities,
 } from "../../../../wallets/eip5792/get-capabilities.js";
-import { useActiveWallet } from "./wallet-hooks.js";
-
-/**
- * A hook to get the current wallet's capabilities according to [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792).
- *
- * @note This function is dependent on the wallet's support for EIP-5792, but will not throw.
- * **The returned object contains a `message` field detailing any issues with the wallet's support for EIP-5792.**
- *
- * @returns a React Query object.
- * @beta
- * @example
- * ```tsx
- * import { useCapabilities } from "thirdweb/react";
- * const { data: capabilities, isLoading } = useCapabilities();
- * ```
- * @extension EIP5792
- */
-export function useCapabilities(options?: {
-  queryOptions?: Pick<UseQueryOptions, "enabled" | "retry">;
-}): UseQueryResult<GetCapabilitiesResult> {
-  const wallet = useActiveWallet();
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 
+export function useCapabilitiesCore(
+  options?: {
+    queryOptions?: Pick<UseQueryOptions, "enabled" | "retry">;
+  },
+  wallet?: Wallet,
+): UseQueryResult<GetCapabilitiesResult> {
   return useQuery({
     queryKey: [
       "getCapabilities",

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

@@ -0,0 +1,40 @@
+import { useCallback, useState } from "react";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type {
+  ConnectManagerOptions,
+  ConnectionManager,
+} from "../../../../wallets/manager/index.js";
+
+export function useConnectCore(
+  manager: ConnectionManager,
+  options?: ConnectManagerOptions,
+) {
+  const { connect } = manager;
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const handleConnection = useCallback(
+    async (walletOrFn: Wallet | (() => Promise<Wallet>)) => {
+      // reset error state
+      setError(null);
+      if (typeof walletOrFn !== "function") {
+        return connect(walletOrFn, options);
+      }
+
+      setIsConnecting(true);
+      try {
+        const w = await walletOrFn();
+        return connect(w, options);
+      } catch (e) {
+        console.error(e);
+        setError(e as Error);
+      } finally {
+        setIsConnecting(false);
+      }
+      return null;
+    },
+    [connect, options],
+  );
+
+  return { connect: handleConnection, isConnecting, error } as const;
+}

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

@@ -0,0 +1,7 @@
+import { useSyncExternalStore } from "react";
+import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+
+export function useConnectedWalletsCore(manager: ConnectionManager) {
+  const store = manager.connectedWallets;
+  return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
+}

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

@@ -0,0 +1,6 @@
+import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+
+export function useDisconnectCore(manager: ConnectionManager) {
+  const disconnect = manager.disconnectWallet;
+  return { disconnect };
+}

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

@@ -0,0 +1,7 @@
+import { useSyncExternalStore } from "react";
+import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+
+export function useIsAutoConnectingCore(manager: ConnectionManager) {
+  const store = manager.isAutoConnecting;
+  return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
+}

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

@@ -15,78 +15,19 @@ import type {
 import { waitForBundle } from "../../../../wallets/eip5792/wait-for-bundle.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { invalidateWalletBalance } from "../../providers/invalidateWalletBalance.js";
-import { useActiveWallet } from "../wallets/wallet-hooks.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 bundled 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.
- *
- * @note This hook is dependent on the wallet's support for EIP-5792 and could fail.
- * @note The mutatuon 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 mutatuon object to interact with {@link sendCalls}
- * @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: bundleId } = useSendCalls({ client });
- * await sendCalls({
- *   wallet,
- *   client,
- *   calls: [sendTx1, sendTx2],
- * });
- * ```
- * Await the bundle's full confirmation:
- * ```tsx
- * const { mutate: sendCalls, data: bundleId } = useSendCalls({ client, waitForResult: true });
- * await sendCalls({
- *   wallet,
- *   client,
- *   calls: [sendTx1, sendTx2],
- * });
- * ```
- * Sponsor transactions with a paymaster:
- * ```ts
- * const { mutate: sendCalls, data: bundleId } = useSendCalls();
- * await sendCalls({
- *   client,
- *   calls: [sendTx1, sendTx2],
- *   capabilities: {
- *     paymasterService: {
- *       url: `https://${CHAIN.id}.bundler.thirdweb.com/${client.clientId}`
- *     }
- *   }
- * });
- * @note 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<
+export function useSendCallsCore(
+  {
+    client,
+    waitForResult = true,
+  }: { client: ThirdwebClient; waitForResult?: boolean },
+  wallet?: Wallet,
+): UseMutationResult<
   GetCallsStatusResponse | WalletSendCallsId,
   Error,
   Omit<SendCallsOptions, "chain" | "wallet"> & { wallet?: Wallet } // Optional wallet override
 > {
-  const connectedWallet = useActiveWallet();
+  const connectedWallet = wallet;
   const queryClient = useQueryClient();
 
   return useMutation({

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

@@ -0,0 +1,5 @@
+import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+
+export function useSetActiveWalletCore(manager: ConnectionManager) {
+  return manager.setActiveWallet;
+}

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

@@ -0,0 +1,7 @@
+import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+
+export function useSetActiveWalletConnectionStatusCore(
+  manager: ConnectionManager,
+) {
+  return manager.activeWalletConnectionStatusStore.setValue;
+}

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

@@ -0,0 +1,5 @@
+import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+
+export function useSwitchActiveWalletChainCore(manager: ConnectionManager) {
+  return manager.switchActiveWalletChain;
+}

package/src/react/{core/hooks/contract/useEstimate.ts → native/hooks/transaction/useEstimateGas.ts}

@@ -1,10 +1,8 @@
-import { type UseMutationResult, useMutation } from "@tanstack/react-query";
-import {
-  type EstimateGasResult,
-  estimateGas,
-} from "../../../../transaction/actions/estimate-gas.js";
+import type { UseMutationResult } from "@tanstack/react-query";
+import type { EstimateGasResult } from "../../../../transaction/actions/estimate-gas.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
-import { useActiveAccount } from "../wallets/wallet-hooks.js";
+import { useEstimateGasCore } from "../../../core/hooks/transaction/useEstimateGas.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
 
 /**
  * A hook to estimate the gas for a given transaction.
@@ -24,8 +22,5 @@ export function useEstimateGas(): UseMutationResult<
   PreparedTransaction
 > {
   const account = useActiveAccount();
-
-  return useMutation({
-    mutationFn: (transaction) => estimateGas({ transaction, account }),
-  });
+  return useEstimateGasCore(account);
 }

package/src/react/{core/hooks/contract → native/hooks/transaction}/useEstimateGasCost.ts

@@ -4,7 +4,7 @@ import {
   estimateGasCost,
 } from "../../../../transaction/actions/estimate-gas-cost.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
-import { useActiveAccount } from "../wallets/wallet-hooks.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
 
 /**
  * A hook to estimate the gas cost in ether and wei for a given transaction.

package/src/react/{core/hooks/contract → native/hooks/transaction}/useSendAndConfirmTransaction.ts

@@ -1,8 +1,8 @@
-import { type UseMutationResult, useMutation } from "@tanstack/react-query";
-import { sendAndConfirmTransaction } from "../../../../transaction/actions/send-and-confirm-transaction.js";
+import type { UseMutationResult } from "@tanstack/react-query";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { TransactionReceipt } from "../../../../transaction/types.js";
-import { useActiveAccount } from "../wallets/wallet-hooks.js";
+import { useSendAndConfirmTransactionCore } from "../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
 
 /**
  * A hook to send a transaction.
@@ -23,16 +23,5 @@ export function useSendAndConfirmTransaction(): UseMutationResult<
   PreparedTransaction
 > {
   const account = useActiveAccount();
-
-  return useMutation({
-    mutationFn: async (transaction) => {
-      if (!account) {
-        throw new Error("No active account");
-      }
-      return await sendAndConfirmTransaction({
-        transaction,
-        account,
-      });
-    },
-  });
+  return useSendAndConfirmTransactionCore(account);
 }

package/src/react/{core/hooks/contract → native/hooks/transaction}/useSendBatchTransaction.ts

@@ -1,8 +1,8 @@
-import { type UseMutationResult, useMutation } from "@tanstack/react-query";
-import { sendBatchTransaction } from "../../../../transaction/actions/send-batch-transaction.js";
+import type { UseMutationResult } from "@tanstack/react-query";
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
-import { useActiveAccount } from "../wallets/wallet-hooks.js";
+import { useSendBatchTransactionCore } from "../../../core/hooks/transaction/useSendBatchTransaction.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
 
 /**
  * A hook to send a transaction.
@@ -23,16 +23,5 @@ export function useSendBatchTransaction(): UseMutationResult<
   PreparedTransaction[]
 > {
   const account = useActiveAccount();
-
-  return useMutation({
-    mutationFn: async (transactions) => {
-      if (!account) {
-        throw new Error("No active account");
-      }
-      return await sendBatchTransaction({
-        transactions,
-        account,
-      });
-    },
-  });
+  return useSendBatchTransactionCore(account);
 }

package/src/react/native/hooks/transaction/useSendTransaction.tsx

@@ -0,0 +1,32 @@
+import {
+  type SendTransactionConfig,
+  useSendTransactionCore,
+} from "../../../core/hooks/transaction/useSendTransaction.js";
+import { useActiveWallet } from "../wallets/useActiveWallet.js";
+import { useSwitchActiveWalletChain } from "../wallets/useSwitchActiveWalletChain.js";
+
+/**
+ * A hook to send a transaction.
+ * @returns A mutation object to send a transaction.
+ * @param config Configuration for the `useSendTransaction` hook.
+ * Refer to [`SendTransactionConfig`](https://portal.thirdweb.com/references/typescript/v5/SendTransactionConfig) for more details.
+ * @example
+ * ```tsx
+ * import { useSendTransaction } from "thirdweb/react";
+ * const { mutate: sendTx, data: transactionResult } = useSendTransaction();
+ *
+ * // later
+ * sendTx(tx);
+ * ```
+ *
+ * @transaction
+ */
+export function useSendTransaction(config: SendTransactionConfig = {}) {
+  void config; // TODO native pay modal
+  const wallet = useActiveWallet();
+  const switchChain = useSwitchActiveWalletChain();
+  return useSendTransactionCore({
+    wallet,
+    switchChain,
+  });
+}

package/src/react/native/hooks/wallets/useActiveAccount.ts

@@ -0,0 +1,17 @@
+import { useActiveAccountCore } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook that returns the active account
+ * @returns The active `Account` or `undefined` if no active account is set.
+ * @example
+ * ```jsx
+ * import { useActiveAccount } from "thirdweb/react";
+ *
+ * const activeAccount = useActiveAccount();
+ * ```
+ * @walletConnection
+ */
+export function useActiveAccount() {
+  return useActiveAccountCore(connectionManager);
+}

package/src/react/native/hooks/wallets/useActiveWallet.ts

@@ -0,0 +1,17 @@
+import { useActiveWalletCore } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook that returns the active wallet
+ * @returns The active `Wallet` or `undefined` if no active wallet is set.
+ * @example
+ * ```jsx
+ * import { useActiveWallet } from "thirdweb/react";
+ *
+ * const wallet = useActiveWallet();
+ * ```
+ * @walletConnection
+ */
+export function useActiveWallet() {
+  return useActiveWalletCore(connectionManager);
+}

package/src/react/native/hooks/wallets/useActiveWalletChain.ts

@@ -0,0 +1,17 @@
+import { useActiveWalletChainCore } from "../../../core/hooks/wallets/useActiveWalletChain.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook that returns the chain the active wallet is connected to
+ * @returns The chain the active wallet is connected to or null if no active wallet.
+ * @example
+ * ```jsx
+ * import { useActiveWalletChain } from "thirdweb/react";
+ *
+ * const chainId = useActiveWalletChain();
+ * ```
+ * @walletConnection
+ */
+export function useActiveWalletChain() {
+  return useActiveWalletChainCore(connectionManager);
+}

package/src/react/native/hooks/wallets/useActiveWalletConnectionStatus.ts

@@ -0,0 +1,21 @@
+import { useActiveWalletConnectionStatusCore } from "../../../core/hooks/wallets/useActiveWalletConnectionStatus.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook that returns the active account's connection status.
+ * @example
+ * ```jsx
+ * import { useActiveWalletConnectionStatus } from "thirdweb/react";
+ *
+ * function Example() {
+ *   const status = useActiveWalletConnectionStatus();
+ *   console.log(status);
+ *   return <div> ... </div>;
+ * }
+ * ```
+ * @returns The active wallet's connection status.
+ * @walletConnection
+ */
+export function useActiveWalletConnectionStatus() {
+  return useActiveWalletConnectionStatusCore(connectionManager);
+}

package/src/react/native/hooks/wallets/useAutoConnect.ts

@@ -0,0 +1,27 @@
+import { nativeLocalStorage } from "../../../../utils/storage/nativeStorage.js";
+import type { AutoConnectProps } from "../../../core/hooks/connection/types.js";
+import { useAutoConnectCore } from "../../../core/hooks/wallets/useAutoConnect.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * Autoconnect the last previously connected wallet.
+ *
+ * @example
+ * ```tsx
+ * import { useAutoConnect } from "thirdweb/react";
+ *
+ * const { data: autoConnected, isLoading } = useAutoConnect({
+ *  client,
+ *  accountAbstraction,
+ *  wallets,
+ *  onConnect,
+ *  timeout,
+ * });
+ * ```
+ * @walletConnection
+ * @param props - The props for auto connect.
+ * @returns whether the auto connect was successful.
+ */
+export function useAutoConnect(props: AutoConnectProps) {
+  return useAutoConnectCore(connectionManager, nativeLocalStorage, props);
+}

package/src/react/native/hooks/wallets/useCallsStatus.ts

@@ -0,0 +1,29 @@
+import type { UseQueryOptions, UseQueryResult } from "@tanstack/react-query";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { GetCallsStatusResponse } from "../../../../wallets/eip5792/types.js";
+import { useCallsStatusCore } from "../../../core/hooks/wallets/useCallsStatus.js";
+import { useActiveWallet } from "./useActiveWallet.js";
+
+/**
+ * A hook to get a call bundle's current status according to [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792).
+ *
+ * @note This function is dependent on the wallet's support for EIP-5792 and could throw an error if it's not supported.
+ *
+ * @returns a React Query object.
+ * @beta
+ * @example
+ * ```tsx
+ * import { useCallsStatus } from "thirdweb/react";
+ * const { data: status, isLoading } = useCallsStatus({ bundleId, client });
+ * ```
+ * @extension EIP5792
+ */
+export function useCallsStatus(options: {
+  bundleId: string;
+  client: ThirdwebClient;
+  queryOptions?: Pick<UseQueryOptions, "enabled" | "retry">;
+}): UseQueryResult<GetCallsStatusResponse> {
+  const wallet = useActiveWallet();
+
+  return useCallsStatusCore(options, wallet);
+}

package/src/react/native/hooks/wallets/useCapabilities.ts

@@ -0,0 +1,26 @@
+import type { UseQueryOptions, UseQueryResult } from "@tanstack/react-query";
+import type { GetCapabilitiesResult } from "../../../../wallets/eip5792/get-capabilities.js";
+import { useCapabilitiesCore } from "../../../core/hooks/wallets/useCapabilities.js";
+import { useActiveWallet } from "./useActiveWallet.js";
+
+/**
+ * A hook to get the current wallet's capabilities according to [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792).
+ *
+ * @note This function is dependent on the wallet's support for EIP-5792, but will not throw.
+ * **The returned object contains a `message` field detailing any issues with the wallet's support for EIP-5792.**
+ *
+ * @returns a React Query object.
+ * @beta
+ * @example
+ * ```tsx
+ * import { useCapabilities } from "thirdweb/react";
+ * const { data: capabilities, isLoading } = useCapabilities();
+ * ```
+ * @extension EIP5792
+ */
+export function useCapabilities(options?: {
+  queryOptions?: Pick<UseQueryOptions, "enabled" | "retry">;
+}): UseQueryResult<GetCapabilitiesResult> {
+  const wallet = useActiveWallet();
+  return useCapabilitiesCore(options, wallet);
+}