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

package/src/react/core/hooks/auth/useSiweAuth.ts

@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { LoginPayload } from "../../../../auth/core/types.js";
 import type { VerifyLoginPayloadParams } from "../../../../auth/core/verify-login-payload.js";
-import { useActiveWallet } from "../../../core/hooks/wallets/wallet-hooks.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 
 /**
  * Options for Setting up SIWE (Sign in with Ethereum) Authentication
@@ -46,8 +46,10 @@ export type SiweAuthOptions = {
 /**
  * @internal
  */
-export function useSiweAuth(authOptions?: SiweAuthOptions) {
-  const activeWallet = useActiveWallet();
+export function useSiweAuth(
+  activeWallet?: Wallet,
+  authOptions?: SiweAuthOptions,
+) {
   const activeAccount = activeWallet?.getAccount();
 
   const requiresAuth = !!authOptions;

package/src/react/core/hooks/connection/{AutoConnect.tsx → types.ts}

@@ -1,11 +1,7 @@
-"use client";
-import { useEffect } from "react";
 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 { useSetActiveWalletConnectionStatus } from "../wallets/wallet-hooks.js";
-import { useAutoConnect } from "./useAutoConnect.js";
 
 export type AutoConnectProps = {
   /**
@@ -112,57 +108,3 @@ export type AutoConnectProps = {
    */
   onConnect?: (wallet: Wallet) => void;
 };
-
-/**
- * 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/core/hooks/transaction/{button-core.ts → transaction-button-utils.ts}

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
 import type { TransactionReceipt } from "viem";
 import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
 import {
@@ -7,12 +7,11 @@ import {
 } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import { stringify } from "../../../../utils/json.js";
-import {
-  type SendTransactionPayModalConfig,
-  useSendTransaction,
-} from "../../../web/hooks/useSendTransaction.js";
 import type { Theme } from "../../design-system/index.js";
-import { useActiveAccount } from "../wallets/wallet-hooks.js";
+import type {
+  SendTransactionPayModalConfig,
+  useSendTransactionCore,
+} from "./useSendTransaction.js";
 
 /**
  * Props for the [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton) component.
@@ -103,56 +102,45 @@ export type TransactionButtonProps = {
   theme?: "dark" | "light" | Theme;
 };
 
-export function useTransactionButtonCore(props: TransactionButtonProps) {
+export const useTransactionButtonMutation = (
+  props: TransactionButtonProps,
+  sendTransactionFn: ReturnType<typeof useSendTransactionCore>["mutateAsync"],
+) => {
   const {
     transaction,
     onTransactionSent,
     onTransactionConfirmed,
     onError,
     onClick,
-    gasless,
-    payModal,
   } = props;
-  const account = useActiveAccount();
-  const [isPending, setIsPending] = useState(false);
-
-  const sendTransaction = useSendTransaction({
-    gasless,
-    payModal,
-  });
-
-  const handleClick = async () => {
-    if (onClick) {
-      onClick();
-    }
-    try {
-      setIsPending(true);
-      const resolvedTx = await transaction();
-      const result = await sendTransaction.mutateAsync(resolvedTx);
-
-      if (onTransactionSent) {
-        onTransactionSent(result);
+  return useMutation({
+    mutationFn: async () => {
+      if (onClick) {
+        onClick();
       }
+      try {
+        const resolvedTx = await transaction();
+        const result = await sendTransactionFn(resolvedTx);
 
-      if (onTransactionConfirmed) {
-        const receipt = await waitForReceipt(result);
-        if (receipt.status === "reverted") {
-          throw new Error(`Execution reverted: ${stringify(receipt, null, 2)}`);
+        if (onTransactionSent) {
+          onTransactionSent(result);
         }
-        onTransactionConfirmed(receipt);
-      }
-    } catch (error) {
-      if (onError) {
-        onError(error as Error);
-      }
-    } finally {
-      setIsPending(false);
-    }
-  };
 
-  return {
-    account,
-    handleClick,
-    isPending,
-  };
-}
+        if (onTransactionConfirmed) {
+          const receipt = await waitForReceipt(result);
+          if (receipt.status === "reverted") {
+            throw new Error(
+              `Execution reverted: ${stringify(receipt, null, 2)}`,
+            );
+          }
+          onTransactionConfirmed(receipt);
+        }
+      } catch (error) {
+        if (onError) {
+          onError(error as Error);
+        }
+      } finally {
+      }
+    },
+  });
+};

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

@@ -0,0 +1,15 @@
+import { type UseMutationResult, useMutation } from "@tanstack/react-query";
+import {
+  type EstimateGasResult,
+  estimateGas,
+} from "../../../../transaction/actions/estimate-gas.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import type { Account } from "../../../../wallets/interfaces/wallet.js";
+
+export function useEstimateGasCore(
+  account: Account | undefined,
+): UseMutationResult<EstimateGasResult, Error, PreparedTransaction> {
+  return useMutation({
+    mutationFn: (transaction) => estimateGas({ transaction, account }),
+  });
+}

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

@@ -0,0 +1,15 @@
+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 type { Account } from "../../../../wallets/interfaces/wallet.js";
+
+export function useEstimateGasCost(
+  account: Account | undefined,
+): UseMutationResult<EstimateGasCostResult, Error, PreparedTransaction> {
+  return useMutation({
+    mutationFn: (transaction) => estimateGasCost({ transaction, account }),
+  });
+}

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

@@ -0,0 +1,21 @@
+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";
+
+export function useSendAndConfirmTransactionCore(
+  account: Account | undefined,
+): UseMutationResult<TransactionReceipt, Error, PreparedTransaction> {
+  return useMutation({
+    mutationFn: async (transaction) => {
+      if (!account) {
+        throw new Error("No active account");
+      }
+      return await sendAndConfirmTransaction({
+        transaction,
+        account,
+      });
+    },
+  });
+}

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

@@ -0,0 +1,21 @@
+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";
+
+export function useSendBatchTransactionCore(
+  account: Account | undefined,
+): UseMutationResult<WaitForReceiptOptions, Error, PreparedTransaction[]> {
+  return useMutation({
+    mutationFn: async (transactions) => {
+      if (!account) {
+        throw new Error("No active account");
+      }
+      return await sendBatchTransaction({
+        transactions,
+        account,
+      });
+    },
+  });
+}

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

@@ -1,20 +1,70 @@
 import { type UseMutationResult, useMutation } from "@tanstack/react-query";
+import type { Chain } from "../../../../chains/types.js";
 import { estimateGasCost } from "../../../../transaction/actions/estimate-gas-cost.js";
 import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
 import { sendTransaction } from "../../../../transaction/actions/send-transaction.js";
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import { resolvePromisedValue } from "../../../../utils/promise/resolve-promised-value.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
   type GetWalletBalanceResult,
   getWalletBalance,
 } from "../../../../wallets/utils/getWalletBalance.js";
+import type { SupportedTokens } from "../../../web/ui/ConnectWallet/defaultTokens.js";
 import { fetchBuySupportedDestinations } from "../../../web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.js";
-import {
-  useActiveAccount,
-  useActiveWallet,
-  useSwitchActiveWalletChain,
-} from "../wallets/wallet-hooks.js";
+import type { LocaleId } from "../../../web/ui/types.js";
+import type { Theme } from "../../design-system/index.js";
+
+/**
+ * Configuration for the "Pay Modal" that opens when the user doesn't have enough funds to send a transaction.
+ * Set `payModal: false` to disable the "Pay Modal" popup
+ *
+ * This configuration object includes the following properties to configure the "Pay Modal" UI:
+ *
+ * ### `locale`
+ * The language to use for the "Pay Modal" UI. Defaults to `"en_US"`.
+ *
+ * ### `supportedTokens`
+ * An object of type [`SupportedTokens`](https://portal.thirdweb.com/references/typescript/v5/SupportedTokens) to configure the tokens to show for a chain.
+ *
+ * ### `theme`
+ * The theme to use for the "Pay Modal" UI. Defaults to `"dark"`.
+ *
+ * It can be set to `"light"` or `"dark"` or an object of type [`Theme`](https://portal.thirdweb.com/references/typescript/v5/Theme) for a custom theme.
+ *
+ * Refer to [`lightTheme`](https://portal.thirdweb.com/references/typescript/v5/lightTheme)
+ * or [`darkTheme`](https://portal.thirdweb.com/references/typescript/v5/darkTheme) helper functions to use the default light or dark theme and customize it.
+ */
+export type SendTransactionPayModalConfig =
+  | {
+      locale?: LocaleId;
+      supportedTokens?: SupportedTokens;
+      theme?: Theme | "light" | "dark";
+      buyWithCrypto?: false;
+      buyWithFiat?:
+        | false
+        | {
+            testMode?: boolean;
+          };
+    }
+  | false;
+
+/**
+ * Configuration for the `useSendTransaction` hook.
+ */
+export type SendTransactionConfig = {
+  /**
+   * Refer to [`SendTransactionPayModalConfig`](https://portal.thirdweb.com/references/typescript/v5/SendTransactionPayModalConfig) for more details.
+   */
+  payModal?: SendTransactionPayModalConfig;
+
+  /**
+   * Configuration for gasless transactions.
+   * Refer to [`GaslessOptions`](https://portal.thirdweb.com/references/typescript/v5/GaslessOptions) for more details.
+   */
+  gasless?: GaslessOptions;
+};
 
 type ShowModalData = {
   tx: PreparedTransaction;
@@ -37,13 +87,14 @@ type ShowModalData = {
  * ```
  * @internal
  */
-export function useSendTransactionCore(
-  showPayModal?: (data: ShowModalData) => void,
-  gasless?: GaslessOptions,
-): UseMutationResult<WaitForReceiptOptions, Error, PreparedTransaction> {
-  let _account = useActiveAccount();
-  const wallet = useActiveWallet();
-  const switchChain = useSwitchActiveWalletChain();
+export function useSendTransactionCore(args: {
+  showPayModal?: (data: ShowModalData) => void;
+  gasless?: GaslessOptions;
+  wallet: Wallet | undefined;
+  switchChain: (chain: Chain) => Promise<void>;
+}): UseMutationResult<WaitForReceiptOptions, Error, PreparedTransaction> {
+  const { showPayModal, gasless, wallet, switchChain } = args;
+  let _account = wallet?.getAccount();
 
   return useMutation({
     mutationFn: async (tx) => {

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

@@ -0,0 +1,19 @@
+import { type UseMutationResult, useMutation } from "@tanstack/react-query";
+import type { Abi, AbiFunction } from "abitype";
+import {
+  type SimulateOptions,
+  simulateTransaction,
+} from "../../../../transaction/actions/simulate.js";
+
+export function useSimulateTransaction<
+  const abi extends Abi,
+  const abiFn extends AbiFunction,
+>(): UseMutationResult<
+  Awaited<ReturnType<typeof simulateTransaction>>,
+  Error,
+  SimulateOptions<abi, abiFn>
+> {
+  return useMutation({
+    mutationFn: (options) => simulateTransaction(options),
+  });
+}

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

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

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

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

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

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

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);
+}