thirdweb 5.40.0 → 5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321

package/src/exports/react.ts

@@ -22,7 +22,7 @@ export type { LocaleId } from "../react/web/ui/types.js";
 export { TransactionButton } from "../react/web/ui/TransactionButton/index.js";
 export type { TransactionButtonProps } from "../react/core/hooks/transaction/transaction-button-utils.js";
 
-export { ThirdwebProvider } from "../react/core/providers/thirdweb-provider.js";
+export { ThirdwebProvider } from "../react/web/providers/thirdweb-provider.js";
 
 // tokens
 export type {
@@ -39,21 +39,21 @@ export { MediaRenderer } from "../react/web/ui/MediaRenderer/MediaRenderer.js";
 export type { MediaRendererProps } from "../react/web/ui/MediaRenderer/types.js";
 
 // wallet hooks
-export { useActiveWallet } from "../react/web/hooks/wallets/useActiveWallet.js";
-export { useActiveWalletChain } from "../react/web/hooks/wallets/useActiveWalletChain.js";
-export { useActiveWalletConnectionStatus } from "../react/web/hooks/wallets/useActiveWalletConnectionStatus.js";
-export { useActiveAccount } from "../react/web/hooks/wallets/useActiveAccount.js";
+export { useActiveWallet } from "../react/core/hooks/wallets/useActiveWallet.js";
+export { useActiveWalletChain } from "../react/core/hooks/wallets/useActiveWalletChain.js";
+export { useActiveWalletConnectionStatus } from "../react/core/hooks/wallets/useActiveWalletConnectionStatus.js";
+export { useActiveAccount } from "../react/core/hooks/wallets/useActiveAccount.js";
 export { useAutoConnect } from "../react/web/hooks/wallets/useAutoConnect.js";
-export { useCapabilities } from "../react/web/hooks/wallets/useCapabilities.js";
-export { useConnect } from "../react/web/hooks/wallets/useConnect.js";
-export { useConnectedWallets } from "../react/web/hooks/wallets/useConnectedWallets.js";
-export { useDisconnect } from "../react/web/hooks/wallets/useDisconnect.js";
-export { useIsAutoConnecting } from "../react/web/hooks/wallets/useIsAutoConnecting.js";
-export { useSetActiveWallet } from "../react/web/hooks/wallets/useSetActiveWallet.js";
-export { useSetActiveWalletConnectionStatus } from "../react/web/hooks/wallets/useSetActiveWalletConnectionStatus.js";
-export { useSendCalls } from "../react/web/hooks/wallets/useSendCalls.js";
-export { useSwitchActiveWalletChain } from "../react/web/hooks/wallets/useSwitchActiveWalletChain.js";
-export { useCallsStatus } from "../react/web/hooks/wallets/useCallsStatus.js";
+export { useCapabilities } from "../react/core/hooks/wallets/useCapabilities.js";
+export { useConnect } from "../react/core/hooks/wallets/useConnect.js";
+export { useConnectedWallets } from "../react/core/hooks/wallets/useConnectedWallets.js";
+export { useDisconnect } from "../react/core/hooks/wallets/useDisconnect.js";
+export { useIsAutoConnecting } from "../react/core/hooks/wallets/useIsAutoConnecting.js";
+export { useSetActiveWallet } from "../react/core/hooks/wallets/useSetActiveWallet.js";
+export { useSetActiveWalletConnectionStatus } from "../react/core/hooks/wallets/useSetActiveWalletConnectionStatus.js";
+export { useSendCalls } from "../react/core/hooks/wallets/useSendCalls.js";
+export { useSwitchActiveWalletChain } from "../react/core/hooks/wallets/useSwitchActiveWalletChain.js";
+export { useCallsStatus } from "../react/core/hooks/wallets/useCallsStatus.js";
 export { useWalletBalance } from "../react/core/hooks/others/useWalletBalance.js";
 
 export type { ConnectManagerOptions } from "../wallets/manager/index.js";
@@ -70,10 +70,10 @@ export {
 } from "../react/core/hooks/transaction/useSendTransaction.js";
 export { useSimulateTransaction } from "../react/core/hooks/transaction/useSimulateTransaction.js";
 export { useSendTransaction } from "../react/web/hooks/transaction/useSendTransaction.js";
-export { useSendBatchTransaction } from "../react/web/hooks/transaction/useSendBatchTransaction.js";
-export { useSendAndConfirmTransaction } from "../react/web/hooks/transaction/useSendAndConfirmTransaction.js";
-export { useEstimateGas } from "../react/web/hooks/transaction/useEstimateGas.js";
-export { useEstimateGasCost } from "../react/web/hooks/transaction/useEstimateGasCost.js";
+export { useSendBatchTransaction } from "../react/core/hooks/transaction/useSendBatchTransaction.js";
+export { useSendAndConfirmTransaction } from "../react/core/hooks/transaction/useSendAndConfirmTransaction.js";
+export { useEstimateGas } from "../react/core/hooks/transaction/useEstimateGas.js";
+export { useEstimateGasCost } from "../react/core/hooks/transaction/useEstimateGasCost.js";
 
 // rpc related
 export {
@@ -158,3 +158,5 @@ export { useEnsName, useEnsAvatar } from "../react/core/utils/wallet.js";
  */
 export { ClaimButton } from "../react/web/ui/prebuilt/thirdweb/ClaimButton/index.js";
 export type { ClaimButtonProps } from "../react/web/ui/prebuilt/thirdweb/ClaimButton/types.js";
+
+export { useConnectionManager } from "../react/core/providers/connection-manager.js";

package/src/exports/wallets.ts

@@ -119,3 +119,5 @@ export type {
 
 // injected
 export { injectedProvider } from "../wallets/injected/mipdStore.js";
+
+export type { ConnectionManager } from "../wallets/manager/index.js";

package/src/react/core/hooks/connection/ConnectEmbedProps.ts

@@ -3,6 +3,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
+import type { WelcomeScreen } from "../../../web/ui/ConnectWallet/screens/types.js";
 import type { LocaleId } from "../../../web/ui/types.js";
 import type { Theme } from "../../design-system/index.js";
 import type { SiweAuthOptions } from "../auth/useSiweAuth.js";
@@ -282,4 +283,32 @@ export type ConnectEmbedProps = {
    * Refer to the [`SiweAuthOptions`](https://portal.thirdweb.com/references/typescript/v5/SiweAuthOptions) for more details
    */
   auth?: SiweAuthOptions;
+
+  /**
+   * Customize the welcome screen. This prop is only applicable when modalSize prop is set to "wide". On "wide" Modal size, a welcome screen is shown on the right side of the modal.
+   *
+   * This screen can be customized in two ways
+   *
+   * #### 1. Customize Metadata and Image
+   * ```tsx
+   * const welcomeScreen = {
+   *  title: "your title",
+   *  subtitle: "your subtitle",
+   *  img: {
+   *   src: "https://your-image-url.png",
+   *   width: 300,
+   *   height: 50,
+   *  },
+   * }
+   *
+   * <ConnectEmbed welcomeScreen={welcomeScreen} />
+   * ```
+   *
+   * #### 2. Render Custom Component
+   *
+   * ```tsx
+   * <ConnectEmbed welcomeScreen={() => <YourComponent />} />
+   * ```
+   */
+  welcomeScreen?: WelcomeScreen;
 };

package/src/react/core/hooks/transaction/useEstimateGas.ts

@@ -4,11 +4,27 @@ import {
   estimateGas,
 } from "../../../../transaction/actions/estimate-gas.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
-import type { Account } from "../../../../wallets/interfaces/wallet.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
 
-export function useEstimateGasCore(
-  account: Account | undefined,
-): UseMutationResult<EstimateGasResult, Error, PreparedTransaction> {
+/**
+ * A hook to estimate the gas for a given transaction.
+ * @returns A mutation object to estimate gas.
+ * @example
+ * ```jsx
+ * import { useEstimateGas } from "thirdweb/react";
+ * const { mutate: estimateGas, data: gasEstimate } = useEstimateGas();
+ *
+ * // later
+ * const estimatedGas = await estimateGas(tx);
+ * ```
+ * @transaction
+ */
+export function useEstimateGas(): UseMutationResult<
+  EstimateGasResult,
+  Error,
+  PreparedTransaction
+> {
+  const account = useActiveAccount();
   return useMutation({
     mutationFn: (transaction) => estimateGas({ transaction, account }),
   });

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

@@ -4,11 +4,28 @@ import {
   estimateGasCost,
 } from "../../../../transaction/actions/estimate-gas-cost.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
-import type { Account } from "../../../../wallets/interfaces/wallet.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
 
-export function useEstimateGasCost(
-  account: Account | undefined,
-): UseMutationResult<EstimateGasCostResult, Error, PreparedTransaction> {
+/**
+ * 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/core/hooks/transaction/useSendAndConfirmTransaction.ts

@@ -2,11 +2,27 @@ import { type UseMutationResult, useMutation } from "@tanstack/react-query";
 import { sendAndConfirmTransaction } from "../../../../transaction/actions/send-and-confirm-transaction.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { TransactionReceipt } from "../../../../transaction/types.js";
-import type { Account } from "../../../../wallets/interfaces/wallet.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
 
-export function useSendAndConfirmTransactionCore(
-  account: Account | undefined,
-): UseMutationResult<TransactionReceipt, Error, PreparedTransaction> {
+/**
+ * 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 useMutation({
     mutationFn: async (transaction) => {
       if (!account) {

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

@@ -2,11 +2,27 @@ import { type UseMutationResult, useMutation } from "@tanstack/react-query";
 import { sendBatchTransaction } from "../../../../transaction/actions/send-batch-transaction.js";
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
-import type { Account } from "../../../../wallets/interfaces/wallet.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
 
-export function useSendBatchTransactionCore(
-  account: Account | undefined,
-): UseMutationResult<WaitForReceiptOptions, Error, PreparedTransaction[]> {
+/**
+ * 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 useMutation({
     mutationFn: async (transactions) => {
       if (!account) {

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

@@ -1,7 +1,19 @@
 import { useSyncExternalStore } from "react";
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useActiveAccountCore(manager: ConnectionManager) {
+/**
+ * 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() {
+  const manager = useConnectionManager();
   const store = manager.activeAccountStore;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

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

@@ -1,7 +1,19 @@
 import { useSyncExternalStore } from "react";
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useActiveWalletCore(manager: ConnectionManager) {
+/**
+ * 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() {
+  const manager = useConnectionManager();
   const store = manager.activeWalletStore;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

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

@@ -1,7 +1,19 @@
 import { useSyncExternalStore } from "react";
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useActiveWalletChainCore(manager: ConnectionManager) {
+/**
+ * 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 activeChain = useActiveWalletChain();
+ * ```
+ * @walletConnection
+ */
+export function useActiveWalletChain() {
+  const manager = useConnectionManager();
   const store = manager.activeWalletChainStore;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

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

@@ -1,9 +1,23 @@
 import { useSyncExternalStore } from "react";
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useActiveWalletConnectionStatusCore(
-  manager: ConnectionManager,
-) {
+/**
+ * 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() {
+  const manager = useConnectionManager();
   const store = manager.activeWalletConnectionStatusStore;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

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

@@ -3,25 +3,25 @@ import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
 import { getUrlToken } from "../../../../wallets/in-app/web/lib/get-url-token.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
-  type ConnectionManager,
   getLastConnectedChain,
   getStoredActiveWalletId,
   getStoredConnectedWalletIds,
 } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 import { setLastAuthProvider } from "../../utils/storage.js";
 import { timeoutPromise } from "../../utils/timeoutPromise.js";
 import type { AutoConnectProps } from "../connection/types.js";
-import { useConnectCore } from "./useConnect.js";
-import { useSetActiveWalletConnectionStatusCore } from "./useSetActiveWalletConnectionStatus.js";
+import { useConnect } from "./useConnect.js";
+import { useSetActiveWalletConnectionStatus } from "./useSetActiveWalletConnectionStatus.js";
 
 export function useAutoConnectCore(
-  manager: ConnectionManager,
   storage: AsyncStorage,
   props: AutoConnectProps & { wallets: Wallet[] },
   getInstalledWallets?: () => Wallet[],
 ) {
-  const setConnectionStatus = useSetActiveWalletConnectionStatusCore(manager);
-  const { connect } = useConnectCore(manager, {
+  const manager = useConnectionManager();
+  const setConnectionStatus = useSetActiveWalletConnectionStatus();
+  const { connect } = useConnect({
     client: props.client,
     accountAbstraction: props.accountAbstraction,
   });

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

@@ -6,17 +6,29 @@ 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 type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { useActiveWallet } from "./useActiveWallet.js";
 
-export function useCallsStatusCore(
-  options: {
-    bundleId: string;
-    client: ThirdwebClient;
-    queryOptions?: Pick<UseQueryOptions, "enabled" | "retry">;
-  },
-  wallet?: Wallet,
-): UseQueryResult<GetCallsStatusResponse> {
+/**
+ * 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 { client, bundleId } = options;
+  const wallet = useActiveWallet();
 
   return useQuery({
     queryKey: [

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

@@ -7,14 +7,27 @@ import {
   type GetCapabilitiesResult,
   getCapabilities,
 } from "../../../../wallets/eip5792/get-capabilities.js";
-import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { useActiveWallet } from "./useActiveWallet.js";
 
-export function useCapabilitiesCore(
-  options?: {
-    queryOptions?: Pick<UseQueryOptions, "enabled" | "retry">;
-  },
-  wallet?: Wallet,
-): UseQueryResult<GetCapabilitiesResult> {
+/**
+ * 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 useQuery({
     queryKey: [
       "getCapabilities",

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

@@ -1,14 +1,40 @@
 import { useCallback, useState } from "react";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
-import type {
-  ConnectManagerOptions,
-  ConnectionManager,
-} from "../../../../wallets/manager/index.js";
+import type { ConnectManagerOptions } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useConnectCore(
-  manager: ConnectionManager,
-  options?: ConnectManagerOptions,
-) {
+/**
+ * A hook to set a wallet as active wallet
+ * @returns A function that lets you connect a wallet.
+ * @example
+ * ```jsx
+ * import { useConnect } from "thirdweb/react";
+ * import { createWallet } from "thirdweb/wallets";
+ *
+ * function Example() {
+ *   const { connect, isConnecting, error } = useConnect();
+ *   return (
+ *     <button
+ *       onClick={() =>
+ *         connect(async () => {
+ *           // instantiate wallet
+ *           const wallet = createWallet("io.metamask");
+ *           // connect wallet
+ *           await wallet.connect();
+ *           // return the wallet
+ *           return wallet;
+ *         })
+ *       }
+ *     >
+ *       Connect
+ *     </button>
+ *   );
+ * }
+ * ```
+ * @walletConnection
+ */
+export function useConnect(options?: ConnectManagerOptions) {
+  const manager = useConnectionManager();
   const { connect } = manager;
   const [isConnecting, setIsConnecting] = useState(false);
   const [error, setError] = useState<Error | null>(null);

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

@@ -1,7 +1,19 @@
 import { useSyncExternalStore } from "react";
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useConnectedWalletsCore(manager: ConnectionManager) {
+/**
+ * A hook that returns all connected wallets
+ * @returns An array of all connected wallets
+ * @example
+ * ```jsx
+ * import { useConnectedWallets } from "thirdweb/react";
+ *
+ * const wallets = useConnectedWallets();
+ * ```
+ * @walletConnection
+ */
+export function useConnectedWallets() {
+  const manager = useConnectionManager();
   const store = manager.connectedWallets;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

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

@@ -1,6 +1,27 @@
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useDisconnectCore(manager: ConnectionManager) {
+/**
+ * Disconnect from given account
+ * @example
+ * ```jsx
+ * import { useDisconnect, useActiveWallet } from "thirdweb/react";
+ *
+ * function Example() {
+ *   const { disconnect } = useDisconnect();
+ *   const wallet = useActiveWallet();
+ *
+ *   return (
+ *     <button onClick={() => disconnect(wallet)}>
+ *       Disconnect
+ *     </button>
+ *   );
+ * }
+ * ```
+ * @walletConnection
+ * @returns An object with a function to disconnect an account
+ */
+export function useDisconnect() {
+  const manager = useConnectionManager();
   const disconnect = manager.disconnectWallet;
   return { disconnect };
 }

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

@@ -1,7 +1,21 @@
 import { useSyncExternalStore } from "react";
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useIsAutoConnectingCore(manager: ConnectionManager) {
+/**
+ * A hook to check if the auto connect is in progress.
+ * @example
+ * ```jsx
+ * function Example() {
+ *   const isAutoConnecting = useIsAutoConnecting();
+ *
+ *   return <div> ... </div>;
+ * }
+ * ```
+ * @returns A boolean indicating if the auto connect is in progress.
+ * @walletConnection
+ */
+export function useIsAutoConnecting() {
+  const manager = useConnectionManager();
   const store = manager.isAutoConnecting;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }