thirdweb 5.29.3-nightly-476b6cc271b0891fa01fb09ca509c564b850ccfa-20240614185219 → 5.29.3-nightly-b051d844d0bb2d08b0d885d8c23e75ee97209976-20240614190954

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

@@ -0,0 +1,21 @@
+import { useSwitchActiveWalletChainCore } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * Switch to blockchain with given chain id in the active wallet.
+ * @returns A function to switch to blockchain with given chain id in the active wallet.
+ * @example
+ * ```jsx
+ * import { useSwitchActiveWalletChain } from "thirdweb/react";
+ * import { sepolia } from "thirdweb/chains";
+ *
+ * const switchChain = useSwitchActiveWalletChain();
+ *
+ * // later in your code
+ * <button onClick={() => switchChain(sepolia)}>Switch Chain</button>
+ * ```
+ * @walletConnection
+ */
+export function useSwitchActiveWalletChain() {
+  return useSwitchActiveWalletChainCore(connectionManager);
+}

package/src/react/native/index.ts

@@ -0,0 +1,4 @@
+import { nativeLocalStorage } from "../../utils/storage/nativeStorage.js";
+import { connectionManagerSingleton } from "../core/connectionManager.js";
+
+export const connectionManager = connectionManagerSingleton(nativeLocalStorage);

package/src/react/native/ui/AutoConnect/AutoConnect.tsx

@@ -0,0 +1,59 @@
+"use client";
+import { useEffect } from "react";
+import type { AutoConnectProps } from "../../../core/hooks/connection/types.js";
+import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
+import { useSetActiveWalletConnectionStatus } from "../../hooks/wallets/useSetActiveWalletConnectionStatus.js";
+
+/**
+ * AutoConnect last connected wallet on page reload or revisit.
+ * Note: If you are using `ConnectButton` or `ConnectEmbed` components, You don't need to use this component as it is already included.
+ *
+ * This is useful if you are manually connecting the wallets using the [`useConnect`](https://portal.thirdweb.com/references/typescript/v5/useConnect) hook and want to auto connect the last connected wallets on page reload or revisit.
+ * @param props - Object of type `AutoConnectProps`. Refer to [`AutoConnectProps`](https://portal.thirdweb.com/references/typescript/v5/AutoConnectProps)
+ * @example
+ * ```tsx
+ * import { AutoConnect } from "thirdweb/react";
+ * import { createWallet, inAppWallet } from "thirdweb/wallets";
+ *
+ *
+ * // list of wallets that your app uses
+ * const wallets = [
+ *  inAppWallet(),
+ *  createWallet('io.metamask'),
+ *  createWallet("me.rainbow"),
+ * ]
+ *
+ * function Example() {
+ *  return (
+ *    <AutoConnect
+ *      wallets={wallets}
+ *      client={client}
+ *      appMetadata={appMetadata}
+ *    />
+ *  );
+ * }
+ * ```
+ * @component
+ */
+export function AutoConnect(props: AutoConnectProps) {
+  useAutoConnect(props);
+  return <></>;
+}
+
+let noAutoConnectDone = false;
+
+/**
+ * @internal
+ */
+export function NoAutoConnect() {
+  const setConnectionStatus = useSetActiveWalletConnectionStatus();
+  useEffect(() => {
+    if (noAutoConnectDone) {
+      return;
+    }
+    noAutoConnectDone = true;
+    setConnectionStatus("disconnected");
+  });
+
+  return null;
+}

package/src/react/native/ui/TransactionButton/TrabsactionButton.tsx

@@ -2,8 +2,10 @@ import { type StyleProp, View, type ViewStyle } from "react-native";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import {
   type TransactionButtonProps,
-  useTransactionButtonCore,
-} from "../../../core/hooks/transaction/button-core.js";
+  useTransactionButtonMutation,
+} from "../../../core/hooks/transaction/transaction-button-utils.js";
+import { useSendTransaction } from "../../hooks/transaction/useSendTransaction.js";
+import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
 import { ThemedButton } from "../components/button.js";
 import { ThemedSpinner } from "../components/spinner.js";
 
@@ -38,14 +40,19 @@ export function TransactionButton(props: TransactionButtonProps) {
     unstyled,
     ...buttonProps
   } = props;
-  const { account, handleClick, isPending } = useTransactionButtonCore(props);
+  const account = useActiveAccount();
+  const sendTransaction = useSendTransaction({ gasless, payModal });
+  const { mutate: handleClick, isPending } = useTransactionButtonMutation(
+    props,
+    sendTransaction.mutateAsync,
+  );
   const theme = parseTheme(buttonProps.theme);
 
   return (
     <ThemedButton
       disabled={!account || disabled || isPending}
       variant={"primary"}
-      onPress={handleClick}
+      onPress={() => handleClick()}
       style={buttonProps.style as StyleProp<ViewStyle>}
       theme={theme}
     >

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

@@ -1,13 +1,11 @@
-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 used by given transaction.
+ * A hook to estimate the gas for a given transaction.
  * @returns A mutation object to estimate gas.
  * @example
  * ```jsx
@@ -17,7 +15,6 @@ import { useActiveAccount } from "../wallets/wallet-hooks.js";
  * // later
  * const estimatedGas = await estimateGas(tx);
  * ```
- * @transaction
  */
 export function useEstimateGas(): UseMutationResult<
   EstimateGasResult,
@@ -25,8 +22,5 @@ export function useEstimateGas(): UseMutationResult<
   PreparedTransaction
 > {
   const account = useActiveAccount();
-
-  return useMutation({
-    mutationFn: (transaction) => estimateGas({ transaction, account }),
-  });
+  return useEstimateGasCore(account);
 }

package/src/react/web/hooks/transaction/useEstimateGasCost.ts

@@ -0,0 +1,33 @@
+import { type UseMutationResult, useMutation } from "@tanstack/react-query";
+import {
+  type EstimateGasCostResult,
+  estimateGasCost,
+} from "../../../../transaction/actions/estimate-gas-cost.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
+
+/**
+ * A hook to estimate the gas cost in ether and wei for a given transaction.
+ * @returns A mutation object to estimate gas cost.
+ * @example
+ * ```jsx
+ * import { useEstimateGasCost } from "thirdweb/react";
+ * const { mutate: estimateGasCost, data: gasEstimate } = useEstimateGas();
+ *
+ * // later
+ * const estimatedGas = await estimateGasCost(tx);
+ * console.log("gas cost in ether", estimatedGas.ether);
+ * ```
+ * @transaction
+ */
+export function useEstimateGasCost(): UseMutationResult<
+  EstimateGasCostResult,
+  Error,
+  PreparedTransaction
+> {
+  const account = useActiveAccount();
+
+  return useMutation({
+    mutationFn: (transaction) => estimateGasCost({ transaction, account }),
+  });
+}

package/src/react/web/hooks/transaction/useSendAndConfirmTransaction.ts

@@ -0,0 +1,27 @@
+import type { UseMutationResult } from "@tanstack/react-query";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import type { TransactionReceipt } from "../../../../transaction/types.js";
+import { useSendAndConfirmTransactionCore } from "../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
+
+/**
+ * A hook to send a transaction.
+ * @returns A mutation object to send a transaction.
+ * @example
+ * ```jsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ * const { mutate: sendAndConfirmTx, data: transactionReceipt } = useSendAndConfirmTransaction();
+ *
+ * // later
+ * sendAndConfirmTx(tx);
+ * ```
+ * @transaction
+ */
+export function useSendAndConfirmTransaction(): UseMutationResult<
+  TransactionReceipt,
+  Error,
+  PreparedTransaction
+> {
+  const account = useActiveAccount();
+  return useSendAndConfirmTransactionCore(account);
+}

package/src/react/web/hooks/transaction/useSendBatchTransaction.ts

@@ -0,0 +1,27 @@
+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 { useSendBatchTransactionCore } from "../../../core/hooks/transaction/useSendBatchTransaction.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
+
+/**
+ * A hook to send a transaction.
+ * @returns A mutation object to send a transaction.
+ * @example
+ * ```jsx
+ * import { useSendBatchTransaction } from "thirdweb/react";
+ * const { mutate: sendBatch, data: transactionResult } = useSendBatchTransaction();
+ *
+ * // later
+ * sendBatch([tx1, tx2]);
+ * ```
+ * @transaction
+ */
+export function useSendBatchTransaction(): UseMutationResult<
+  WaitForReceiptOptions,
+  Error,
+  PreparedTransaction[]
+> {
+  const account = useActiveAccount();
+  return useSendBatchTransactionCore(account);
+}

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

@@ -0,0 +1,255 @@
+import { CheckCircledIcon } from "@radix-ui/react-icons";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
+import { type Theme, iconSize } from "../../../core/design-system/index.js";
+import {
+  type SendTransactionConfig,
+  useSendTransactionCore,
+} from "../../../core/hooks/transaction/useSendTransaction.js";
+import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
+import type { PayUIOptions } from "../../ui/ConnectWallet/ConnectButtonProps.js";
+import type { SupportedTokens } from "../../ui/ConnectWallet/defaultTokens.js";
+import { AccentFailIcon } from "../../ui/ConnectWallet/icons/AccentFailIcon.js";
+import { useConnectLocale } from "../../ui/ConnectWallet/locale/getConnectLocale.js";
+import { LazyBuyScreen } from "../../ui/ConnectWallet/screens/Buy/LazyBuyScreen.js";
+import { BuyTxHistory } from "../../ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.js";
+import { Modal } from "../../ui/components/Modal.js";
+import { Spacer } from "../../ui/components/Spacer.js";
+import { Spinner } from "../../ui/components/Spinner.js";
+import { Container, ModalHeader } from "../../ui/components/basic.js";
+import { Button } from "../../ui/components/buttons.js";
+import { Text } from "../../ui/components/text.js";
+import type { LocaleId } from "../../ui/types.js";
+import { LoadingScreen } from "../../wallets/shared/LoadingScreen.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 = {}) {
+  const activeWallet = useActiveWallet();
+  const switchChain = useSwitchActiveWalletChain();
+  const wallet = useActiveWallet();
+  const payModal = config.payModal;
+
+  let payModalEnabled = true;
+
+  if (payModal === false || config.gasless) {
+    payModalEnabled = false;
+  }
+
+  // if active wallet is smart wallet with gasless enabled, don't show the pay modal
+  if (activeWallet && activeWallet.id === "smart") {
+    const options = (activeWallet as Wallet<"smart">).getConfig();
+
+    if ("sponsorGas" in options && options.sponsorGas === true) {
+      payModalEnabled = false;
+    }
+
+    if ("gasless" in options && options.gasless === true) {
+      payModalEnabled = false;
+    }
+  }
+
+  const setRootEl = useContext(SetRootElementContext);
+  return useSendTransactionCore({
+    showPayModal:
+      !payModalEnabled || payModal === false
+        ? undefined
+        : (data) => {
+            setRootEl(
+              <TxModal
+                tx={data.tx}
+                onComplete={data.sendTx}
+                onClose={() => {
+                  setRootEl(null);
+                  data.rejectTx();
+                }}
+                client={data.tx.client}
+                localeId={payModal?.locale || "en_US"}
+                supportedTokens={payModal?.supportedTokens}
+                theme={payModal?.theme || "dark"}
+                txCostWei={data.totalCostWei}
+                walletBalanceWei={data.walletBalance.value}
+                nativeTokenSymbol={data.walletBalance.symbol}
+                payOptions={{
+                  buyWithCrypto: payModal?.buyWithCrypto,
+                  buyWithFiat: payModal?.buyWithFiat,
+                }}
+              />,
+            );
+          },
+    gasless: config.gasless,
+    switchChain,
+    wallet,
+  });
+}
+
+type ModalProps = {
+  onComplete: () => void;
+  onClose: () => void;
+  client: ThirdwebClient;
+  localeId: LocaleId;
+  supportedTokens?: SupportedTokens;
+  theme: Theme | "light" | "dark";
+  txCostWei: bigint;
+  walletBalanceWei: bigint;
+  nativeTokenSymbol: string;
+  tx: PreparedTransaction;
+  payOptions: PayUIOptions;
+};
+
+function TxModal(props: ModalProps) {
+  return (
+    <CustomThemeProvider theme={props.theme}>
+      <Modal
+        open={true}
+        size="compact"
+        setOpen={(_open) => {
+          if (!_open) {
+            props.onClose();
+          }
+        }}
+      >
+        <ModalContent {...props} />
+      </Modal>
+    </CustomThemeProvider>
+  );
+}
+
+function ModalContent(props: ModalProps) {
+  const localeQuery = useConnectLocale(props.localeId);
+  const [screen, setScreen] = useState<"buy" | "tx-history" | "execute-tx">(
+    "buy",
+  );
+
+  if (!localeQuery.data) {
+    return <LoadingScreen />;
+  }
+
+  if (screen === "execute-tx") {
+    return <ExecutingTxScreen tx={props.tx} closeModal={props.onClose} />;
+  }
+
+  if (screen === "tx-history") {
+    return (
+      <BuyTxHistory
+        client={props.client}
+        onBack={() => {
+          setScreen("buy");
+        }}
+        onDone={() => {
+          setScreen("execute-tx");
+        }}
+        isBuyForTx={true}
+        isEmbed={false}
+      />
+    );
+  }
+
+  return (
+    <LazyBuyScreen
+      isEmbed={false}
+      client={props.client}
+      onViewPendingTx={() => {
+        setScreen("tx-history");
+      }}
+      supportedTokens={props.supportedTokens}
+      connectLocale={localeQuery.data}
+      buyForTx={{
+        balance: props.walletBalanceWei,
+        cost: props.txCostWei,
+        tx: props.tx,
+        tokenSymbol: props.nativeTokenSymbol,
+      }}
+      theme={typeof props.theme === "string" ? props.theme : props.theme.type}
+      payOptions={props.payOptions}
+      onDone={() => {
+        setScreen("execute-tx");
+      }}
+    />
+  );
+}
+
+function ExecutingTxScreen(props: {
+  tx: PreparedTransaction;
+  closeModal: () => void;
+}) {
+  const sendTxCore = useSendTransaction({
+    payModal: false,
+  });
+  const [status, setStatus] = useState<"loading" | "failed" | "sent">(
+    "loading",
+  );
+
+  const sendTx = useCallback(async () => {
+    setStatus("loading");
+    try {
+      await sendTxCore.mutateAsync(props.tx);
+      setStatus("sent");
+    } catch (e) {
+      console.error(e);
+      setStatus("failed");
+    }
+  }, [sendTxCore, props.tx]);
+
+  const done = useRef(false);
+  useEffect(() => {
+    if (done.current) {
+      return;
+    }
+
+    done.current = true;
+    sendTx();
+  }, [sendTx]);
+
+  return (
+    <Container p="lg">
+      <ModalHeader title="Transaction" />
+      <Spacer y="xxl" />
+      <Spacer y="xxl" />
+      <Container flex="row" center="x">
+        {status === "loading" && <Spinner size="3xl" color="accentText" />}
+        status === "failed" && <AccentFailIcon size={iconSize["3xl"]} />
+        status === "sent" && (
+        <Container color="success" flex="row" center="both">
+          <CheckCircledIcon width={iconSize["3xl"]} height={iconSize["3xl"]} />
+        </Container>
+        )
+      </Container>
+      <Spacer y="lg" />
+      <Text color="primaryText" center size="lg">
+        status === "loading" && "Sending transaction"status === "failed" &&
+        "Transaction failed"status === "sent" && "Transaction sent"
+      </Text>
+      <Spacer y="xxl" />
+      <Spacer y="xxl" />
+      status === "failed" && (
+      <Button variant="accent" fullWidth onClick={sendTx}>
+        Try Again
+      </Button>
+      )status === "sent" && (
+      <Button variant="accent" fullWidth onClick={props.closeModal}>
+        Done
+      </Button>
+      )
+    </Container>
+  );
+}

package/src/react/web/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/web/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/web/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/web/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/web/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/web/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/web/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);
+}