thirdweb 5.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343 → 5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321

package/dist/types/react/web/ui/TransactionButton/TransactionModal.d.ts

@@ -0,0 +1,24 @@
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import type { PayUIOptions } from "../../../core/hooks/connection/ConnectButtonProps.js";
+import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
+import type { LocaleId } from "../types.js";
+export type ModalProps = {
+    title: string;
+    onComplete: () => void;
+    onClose: () => void;
+    client: ThirdwebClient;
+    localeId: LocaleId;
+    supportedTokens?: SupportedTokens;
+    theme: Theme | "light" | "dark";
+    tx: PreparedTransaction;
+    payOptions: PayUIOptions;
+    onTxSent: (data: WaitForReceiptOptions) => void;
+};
+export declare function TransactionModal(props: ModalProps): import("react/jsx-runtime.js").JSX.Element;
+export declare function TransactionModalContent(props: ModalProps & {
+    onBack?: () => void;
+}): import("react/jsx-runtime.js").JSX.Element;
+//# sourceMappingURL=TransactionModal.d.ts.map

package/dist/types/react/web/ui/TransactionButton/TransactionModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionModal.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/TransactionButton/TransactionModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wDAAwD,CAAC;AACpG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AAE1F,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAK5E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,KAAK,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAChC,EAAE,EAAE,mBAAmB,CAAC;IACxB,UAAU,EAAE,YAAY,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,8CAgBjD;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,UAAU,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,8CAmC5C"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "5.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343";
+export declare const version = "5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343",
+  "version": "5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"

package/src/exports/react.native.ts

@@ -1,4 +1,4 @@
-export { ThirdwebProvider } from "../react/core/providers/thirdweb-provider.js";
+export { ThirdwebProvider } from "../react/native/providers/thirdweb-provider.js";
 
 // theme
 export { darkTheme, lightTheme } from "../react/core/design-system/index.js";
@@ -8,21 +8,21 @@ export type {
 } from "../react/core/design-system/index.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 { 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/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 { 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";
 
 // contract
@@ -37,10 +37,10 @@ export {
 } 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";
+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 {
@@ -99,3 +99,5 @@ export { ConnectEmbed } from "../react/native/ui/connect/ConnectModal.js";
 
 // wallet info
 export { useWalletInfo, useWalletImage } from "../react/core/utils/wallet.js";
+
+export { useConnectionManager } from "../react/core/providers/connection-manager.js";

package/src/exports/react.ts

@@ -22,35 +22,38 @@ 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 {
   SupportedTokens,
   TokenInfo,
 } from "../react/core/utils/defaultTokens.js";
-export { defaultTokens } from "../react/core/utils/defaultTokens.js";
+export {
+  defaultTokens,
+  getDefaultToken,
+} from "../react/core/utils/defaultTokens.js";
 
 // Media Renderer
 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";
@@ -67,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 {
@@ -121,7 +124,13 @@ export {
   type PayEmbedProps,
   type PayEmbedConnectOptions,
 } from "../react/web/ui/PayEmbed.js";
-export type { PayUIOptions } from "../react/core/hooks/connection/ConnectButtonProps.js";
+export type {
+  PayUIOptions,
+  PaymentInfo,
+  DirectPaymentOptions,
+  FundWalletOptions,
+  TranasctionOptions,
+} from "../react/core/hooks/connection/ConnectButtonProps.js";
 
 export {
   useConnectModal,
@@ -141,8 +150,13 @@ export {
   type UseNetworkSwitcherModalOptions,
 } from "../react/web/ui/ConnectWallet/NetworkSelector.js";
 
+// ens
+export { useEnsName, useEnsAvatar } from "../react/core/utils/wallet.js";
+
 /**
  * Prebuilt UI components for thirdweb contracts
  */
 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/design-system/index.ts

@@ -170,6 +170,7 @@ export const fontSize = {
 };
 
 export const spacing = {
+  "3xs": "4px",
   xxs: "6px",
   xs: "8px",
   sm: "12px",
@@ -181,6 +182,7 @@ export const spacing = {
 };
 
 export const radius = {
+  xs: "4px",
   sm: "6px",
   md: "8px",
   lg: "12px",

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

@@ -1,5 +1,7 @@
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import type { Prettify } from "../../../../utils/type-utils.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
@@ -10,10 +12,88 @@ import type { Theme } from "../../design-system/index.js";
 import type {
   SupportedNFTs,
   SupportedTokens,
+  TokenInfo,
 } from "../../utils/defaultTokens.js";
 import type { SiweAuthOptions } from "../auth/useSiweAuth.js";
 
-export type PayUIOptions = {
+export type PaymentInfo = {
+  /**
+   * The chain to receive the payment on.
+   */
+  chain: Chain;
+  /**
+   * The address of the seller wallet to receive the payment on.
+   */
+  sellerAddress: string;
+  /**
+   * Optional ERC20 token to receive the payment on.
+   * If not provided, the native token will be used.
+   */
+  token?: TokenInfo;
+} & (
+  | {
+      /**
+       * The amount of tokens to receive in ETH or tokens.
+       * ex: 0.1 ETH or 100 USDC
+       */
+      amount: string;
+    }
+  | {
+      /**
+       * The amount of tokens to receive in wei.
+       * ex: 1000000000000000000 wei
+       */
+      amountWei: bigint;
+    }
+);
+
+export type PayUIOptions = Prettify<
+  {
+    /**
+     * Configure options for buying tokens using other token ( aka Swap )
+     *
+     * By default, the "Crypto" option is enabled. You can disable it by setting `buyWithCrypto` to `false`
+     *
+     * You can prefill the source token and chain using `prefillSource`
+     * You can also disable the edits for the prefilled values by setting `prefillSource.allowEdits` - By default all are editable
+     *
+     * For example, if you want to allow selecting chain and but disable selecting token, you can set `allowEdits` to `{ token: false, chain: true }`
+     */
+    buyWithCrypto?:
+      | false
+      | {
+          prefillSource?: {
+            chain: Chain;
+            token?: TokenInfo;
+            allowEdits?: {
+              token: boolean;
+              chain: boolean;
+            };
+          };
+        };
+
+    /**
+     * By default "Credit card" option is enabled. you can disable it by setting `buyWithFiat` to `false`
+     *
+     * You can also enable the test mode for the on-ramp provider to test on-ramp without using real credit card.
+     */
+    buyWithFiat?:
+      | {
+          testMode?: boolean;
+        }
+      | false;
+
+    /**
+     * Extra details to store with the purchase.
+     *
+     * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
+     */
+    purchaseData?: object;
+  } & (FundWalletOptions | DirectPaymentOptions | TranasctionOptions)
+>;
+
+export type FundWalletOptions = {
+  mode?: "fund_wallet";
   /**
    * Prefill the Buy Token amount, chain and/or token.
    * You can also disable the edits for the prefilled values using `allowEdits` - By default all are editable
@@ -25,12 +105,7 @@ export type PayUIOptions = {
    */
   prefillBuy?: {
     chain: Chain;
-    token?: {
-      name: string;
-      symbol: string;
-      address: string;
-      icon?: string;
-    };
+    token?: TokenInfo;
     amount?: string;
     allowEdits?: {
       amount: boolean;
@@ -38,59 +113,36 @@ export type PayUIOptions = {
       chain: boolean;
     };
   };
+};
 
+export type DirectPaymentOptions = {
+  mode: "direct_payment";
   /**
-   * Configure options for buying tokens using other token ( aka Swap )
-   *
-   * By default, the "Crypto" option is enabled. You can disable it by setting `buyWithCrypto` to `false`
-   *
-   * You can prefill the source token and chain using `prefillSource`
-   * You can also disable the edits for the prefilled values by setting `prefillSource.allowEdits` - By default all are editable
-   *
-   * For example, if you want to allow selecting chain and but disable selecting token, you can set `allowEdits` to `{ token: false, chain: true }`
+   * The payment information
    */
-  buyWithCrypto?:
-    | false
-    | {
-        prefillSource?: {
-          chain: Chain;
-          token?: {
-            name: string;
-            symbol: string;
-            address: string;
-            icon?: string;
-          };
-          allowEdits?: {
-            token: boolean;
-            chain: boolean;
-          };
-        };
-      };
-
+  paymentInfo: PaymentInfo;
   /**
-   * By default "Credit card" option is enabled. you can disable it by setting `buyWithFiat` to `false`
-   *
-   * You can also enable the test mode for the on-ramp provider to test on-ramp without using real credit card.
+   * Customize the display of the PayEmbed UI.
    */
-  buyWithFiat?:
-    | {
-        testMode?: boolean;
-      }
-    | false;
+  metadata?: {
+    name?: string;
+    image?: string;
+  };
+};
 
+export type TranasctionOptions = {
+  mode: "transaction";
   /**
-   * Extra details to store with the purchase.
-   *
-   * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
+   * The transaction to be executed.
    */
-  purchaseData?: object;
-
+  transaction: PreparedTransaction;
   /**
-   * The address of the recipient of the purchase.
-   *
-   * This address will be used to send the purchased tokens to.
+   * Customize the display of the PayEmbed UI.
    */
-  recipientAddress?: string;
+  metadata?: {
+    name?: string;
+    image?: string;
+  };
 };
 
 /**
@@ -192,7 +244,7 @@ export type ConnectButton_detailsModalOptions = {
    *
    * thirdweb Pay allows users to buy tokens using crypto or fiat currency.
    */
-  payOptions?: PayUIOptions;
+  payOptions?: Extract<PayUIOptions, { mode?: "fund_wallet" }>;
 };
 
 /**

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) {