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

package/src/exports/react.native.ts

@@ -1,28 +1,40 @@
 export { ThirdwebProvider } from "../react/core/providers/thirdweb-provider.js";
 
-// react/core
-export {
-  useSetActiveWallet,
-  useActiveWalletChain,
-  useConnect,
-  useDisconnect,
-  useActiveAccount,
-  useActiveWallet,
-  useConnectedWallets,
-  useSwitchActiveWalletChain,
-  useActiveWalletConnectionStatus,
-  useSetActiveWalletConnectionStatus,
-  useIsAutoConnecting,
-} from "../react/core/hooks/wallets/wallet-hooks.js";
+// wallet hooks
+export { useActiveWallet } from "../react/native/hooks/wallets/useActiveWallet.js";
+export { useActiveWalletChain } from "../react/native/hooks/wallets/useActiveWalletChain.js";
+export { useActiveWalletConnectionStatus } from "../react/native/hooks/wallets/useActiveWalletConnectionStatus.js";
+export { useActiveAccount } from "../react/native/hooks/wallets/useActiveAccount.js";
+export { useAutoConnect } from "../react/native/hooks/wallets/useAutoConnect.js";
+export { useCapabilities } from "../react/native/hooks/wallets/useCapabilities.js";
+export { useConnect } from "../react/native/hooks/wallets/useConnect.js";
+export { useConnectedWallets } from "../react/native/hooks/wallets/useConnectedWallets.js";
+export { useDisconnect } from "../react/native/hooks/wallets/useDisconnect.js";
+export { useIsAutoConnecting } from "../react/native/hooks/wallets/useIsAutoConnecting.js";
+export { useSetActiveWallet } from "../react/native/hooks/wallets/useSetActiveWallet.js";
+export { useSetActiveWalletConnectionStatus } from "../react/native/hooks/wallets/useSetActiveWalletConnectionStatus.js";
+export { useSendCalls } from "../react/native/hooks/wallets/useSendCalls.js";
+export { useSwitchActiveWalletChain } from "../react/native/hooks/wallets/useSwitchActiveWalletChain.js";
+export { useCallsStatus } from "../react/native/hooks/wallets/useCallsStatus.js";
 export { useWalletBalance } from "../react/core/hooks/others/useWalletBalance.js";
 
-// contract related
+// contract
 export { useReadContract } from "../react/core/hooks/contract/useReadContract.js";
-
-export { useEstimateGas } from "../react/core/hooks/contract/useEstimateGas.js";
 export { useWaitForReceipt } from "../react/core/hooks/contract/useWaitForReceipt.js";
 export { useContractEvents } from "../react/core/hooks/contract/useContractEvents.js";
 
+// transaction
+export {
+  type SendTransactionConfig,
+  type SendTransactionPayModalConfig,
+} from "../react/core/hooks/transaction/useSendTransaction.js";
+export { useSimulateTransaction } from "../react/core/hooks/transaction/useSimulateTransaction.js";
+export { useSendTransaction } from "../react/native/hooks/transaction/useSendTransaction.js";
+export { useSendBatchTransaction } from "../react/native/hooks/transaction/useSendBatchTransaction.js";
+export { useSendAndConfirmTransaction } from "../react/native/hooks/transaction/useSendAndConfirmTransaction.js";
+export { useEstimateGas } from "../react/native/hooks/transaction/useEstimateGas.js";
+export { useEstimateGasCost } from "../react/native/hooks/transaction/useEstimateGasCost.js";
+
 // rpc related
 export {
   useBlockNumber,
@@ -61,35 +73,12 @@ export {
   type PostOnRampQuoteQueryOptions,
 } from "../react/core/hooks/pay/usePostOnrampQuote.js";
 
-import { useSendTransactionCore } from "../react/core/hooks/contract/useSendTransaction.js";
-
-/**
- * A hook to send a transaction.
- * @returns A mutation object to send a transaction.
- * @example
- * ```jsx
- * import { useSendTransaction } from "thirdweb/react-native";
- * const { mutate: sendTx, data: transactionResult } = useSendTransaction();
- *
- * // later
- * sendTx(tx);
- * ```
- * @transaction
- */
-export const useSendTransaction = useSendTransactionCore;
-export { useSendBatchTransaction } from "../react/core/hooks/contract/useSendBatchTransaction.js";
-export { useSendAndConfirmTransaction } from "../react/core/hooks/contract/useSendAndConfirmTransaction.js";
-export { useEstimateGasCost } from "../react/core/hooks/contract/useEstimateGasCost.js";
-
 // Components
-export {
-  AutoConnect,
-  type AutoConnectProps,
-} from "../react/core/hooks/connection/AutoConnect.js";
-export { useAutoConnect } from "../react/core/hooks/connection/useAutoConnect.js";
+export { AutoConnect } from "../react/native/ui/AutoConnect/AutoConnect.js";
+export type { AutoConnectProps } from "../react/core/hooks/connection/types.js";
 
 export { TransactionButton } from "../react/native/ui/TransactionButton/TrabsactionButton.js";
-export type { TransactionButtonProps } from "../react/core/hooks/transaction/button-core.js";
+export type { TransactionButtonProps } from "../react/core/hooks/transaction/transaction-button-utils.js";
 
 // wallet info
 export {

package/src/exports/react.ts

@@ -22,7 +22,7 @@ export type { WelcomeScreen } from "../react/web/ui/ConnectWallet/screens/types.
 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/button-core.js";
+export type { TransactionButtonProps } from "../react/core/hooks/transaction/transaction-button-utils.js";
 
 export { ThirdwebProvider } from "../react/core/providers/thirdweb-provider.js";
 
@@ -37,37 +37,42 @@ export { defaultTokens } from "../react/web/ui/ConnectWallet/defaultTokens.js";
 export { MediaRenderer } from "../react/web/ui/MediaRenderer/MediaRenderer.js";
 export type { MediaRendererProps } from "../react/web/ui/MediaRenderer/types.js";
 
-// react/core
-export {
-  useSetActiveWallet,
-  useActiveWalletChain,
-  useConnect,
-  useDisconnect,
-  useActiveAccount,
-  useActiveWallet,
-  useConnectedWallets,
-  useSwitchActiveWalletChain,
-  useActiveWalletConnectionStatus,
-  useSetActiveWalletConnectionStatus,
-  useIsAutoConnecting,
-} from "../react/core/hooks/wallets/wallet-hooks.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 { 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 { useWalletBalance } from "../react/core/hooks/others/useWalletBalance.js";
 
 export type { ConnectManagerOptions } from "../wallets/manager/index.js";
 
-// contract related
+// contract
 export { useReadContract } from "../react/core/hooks/contract/useReadContract.js";
+export { useWaitForReceipt } from "../react/core/hooks/contract/useWaitForReceipt.js";
+export { useContractEvents } from "../react/core/hooks/contract/useContractEvents.js";
+
+// transaction
 export {
-  useSendTransaction,
   type SendTransactionConfig,
   type SendTransactionPayModalConfig,
-} from "../react/web/hooks/useSendTransaction.js";
-export { useSendBatchTransaction } from "../react/core/hooks/contract/useSendBatchTransaction.js";
-export { useSendAndConfirmTransaction } from "../react/core/hooks/contract/useSendAndConfirmTransaction.js";
-export { useEstimateGas } from "../react/core/hooks/contract/useEstimateGas.js";
-export { useEstimateGasCost } from "../react/core/hooks/contract/useEstimateGasCost.js";
-export { useWaitForReceipt } from "../react/core/hooks/contract/useWaitForReceipt.js";
-export { useContractEvents } from "../react/core/hooks/contract/useContractEvents.js";
+} 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";
 
 // rpc related
 export {
@@ -107,11 +112,8 @@ export {
   type PostOnRampQuoteQueryOptions,
 } from "../react/core/hooks/pay/usePostOnrampQuote.js";
 
-export {
-  AutoConnect,
-  type AutoConnectProps,
-} from "../react/core/hooks/connection/AutoConnect.js";
-export { useAutoConnect } from "../react/core/hooks/connection/useAutoConnect.js";
+export { AutoConnect } from "../react/web/ui/AutoConnect/AutoConnect.js";
+export type { AutoConnectProps } from "../react/core/hooks/connection/types.js";
 
 // auth
 export { type SiweAuthOptions } from "../react/core/hooks/auth/useSiweAuth.js";
@@ -138,8 +140,3 @@ export {
   useWalletDetailsModal,
   type UseWalletDetailsModalOptions,
 } from "../react/web/ui/ConnectWallet/Details.js";
-
-// eip5792 hooks
-export { useSendCalls } from "../react/core/hooks/wallets/useSendCalls.js";
-export { useCallsStatus } from "../react/core/hooks/wallets/useCallsStatus.js";
-export { useCapabilities } from "../react/core/hooks/wallets/useCapabilities.js";

package/src/exports/wallets/eip5792.ts

@@ -26,6 +26,3 @@ export type {
   GetCallsStatusResponse,
   WalletCallReceipt,
 } from "../../wallets/eip5792/types.js";
-export { useSendCalls } from "../../react/core/hooks/wallets/useSendCalls.js";
-export { useCallsStatus } from "../../react/core/hooks/wallets/useCallsStatus.js";
-export { useCapabilities } from "../../react/core/hooks/wallets/useCapabilities.js";

package/src/react/core/connectionManager.ts

@@ -1,6 +1,14 @@
-import { createConnectionManager } from "../../wallets/manager/index.js";
-import { getStorage } from "./storage.js";
+import type { AsyncStorage } from "../../utils/storage/AsyncStorage.js";
+import {
+  type ConnectionManager,
+  createConnectionManager,
+} from "../../wallets/manager/index.js";
 
-export const connectionManager = /* @__PURE__ */ createConnectionManager(
-  /* @__PURE__ */ getStorage(),
-);
+let _connectManager: ConnectionManager;
+
+export function connectionManagerSingleton(storage: AsyncStorage) {
+  if (_connectManager) {
+    return _connectManager;
+  }
+  return createConnectionManager(storage);
+}

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