thirdweb 5.105.39 → 5.105.40-nightly-c331d189bbe6e1d3e0a9b9916d772686bb716ad3-20250830000346

package/dist/types/tokens/create-token.d.ts

@@ -1,4 +1,5 @@
+import type { TransactionReceipt } from "../transaction/types.js";
 import type { CreateTokenOptions } from "./types.js";
-export declare function createToken(options: CreateTokenOptions): Promise<string>;
+export declare function getTokenAddressFromReceipt(receipt: TransactionReceipt): Promise<string>;
 export declare function prepareCreateToken(options: CreateTokenOptions): Promise<import("../transaction/prepare-transaction.js").PreparedTransaction<any, import("viem").AbiFunction, import("../transaction/prepare-transaction.js").PrepareTransactionOptions>>;
 //# sourceMappingURL=create-token.d.ts.map

package/dist/types/tokens/create-token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-token.d.ts","sourceRoot":"","sources":["../../../src/tokens/create-token.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAsB,WAAW,CAAC,OAAO,EAAE,kBAAkB,mBA+C5D;AAED,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,4LAkCnE"}
+{"version":3,"file":"create-token.d.ts","sourceRoot":"","sources":["../../../src/tokens/create-token.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AASlE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD,wBAAsB,0BAA0B,CAAC,OAAO,EAAE,kBAAkB,mBAc3E;AAED,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,4LAkCnE"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "5.105.39";
+export declare const version = "5.105.40-nightly-c331d189bbe6e1d3e0a9b9916d772686bb716ad3-20250830000346";
 //# sourceMappingURL=version.d.ts.map

package/dist/types/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,aAAa,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,6EAA6E,CAAC"}

package/package.json

@@ -388,7 +388,7 @@
     }
   },
   "typings": "./dist/types/exports/thirdweb.d.ts",
-  "version": "5.105.39",
+  "version": "5.105.40-nightly-c331d189bbe6e1d3e0a9b9916d772686bb716ad3-20250830000346",
   "scripts": {
     "bench": "vitest -c ./test/vitest.config.ts bench",
     "bench:compare": "bun run ./benchmarks/run.ts",

package/src/exports/react.native.ts

@@ -59,7 +59,7 @@ export {
 export type { TransactionButtonProps } from "../react/core/hooks/transaction/transaction-button-utils.js";
 export { useEstimateGas } from "../react/core/hooks/transaction/useEstimateGas.js";
 export { useEstimateGasCost } from "../react/core/hooks/transaction/useEstimateGasCost.js";
-export { useSendAndConfirmTransaction } from "../react/core/hooks/transaction/useSendAndConfirmTransaction.js";
+export { useSendAndConfirmTransactionCore as useSendAndConfirmTransaction } from "../react/core/hooks/transaction/useSendAndConfirmTransaction.js";
 export { useSendBatchTransaction } from "../react/core/hooks/transaction/useSendBatchTransaction.js";
 // transaction
 export type {

package/src/exports/react.ts

@@ -66,7 +66,6 @@ export {
 export type { TransactionButtonProps } from "../react/core/hooks/transaction/transaction-button-utils.js";
 export { useEstimateGas } from "../react/core/hooks/transaction/useEstimateGas.js";
 export { useEstimateGasCost } from "../react/core/hooks/transaction/useEstimateGasCost.js";
-export { useSendAndConfirmTransaction } from "../react/core/hooks/transaction/useSendAndConfirmTransaction.js";
 export { useSendBatchTransaction } from "../react/core/hooks/transaction/useSendBatchTransaction.js";
 // transaction
 export type {
@@ -101,7 +100,6 @@ export { useConnectionManager } from "../react/core/providers/connection-manager
 // Social
 export { useSocialProfiles } from "../react/core/social/useSocialProfiles.js";
 export type { AccountBalanceInfo } from "../react/core/utils/account.js";
-
 // utils
 export { createContractQuery } from "../react/core/utils/createQuery.js";
 // tokens
@@ -126,6 +124,7 @@ export {
   WalletProvider,
   type WalletProviderProps,
 } from "../react/core/wallet/provider.js";
+export { useSendAndConfirmTransaction } from "../react/web/hooks/transaction/useSendAndConfirmTransaction.js";
 export { useSendTransaction } from "../react/web/hooks/transaction/useSendTransaction.js";
 export { useAutoConnect } from "../react/web/hooks/wallets/useAutoConnect.js";
 export { useLinkProfile } from "../react/web/hooks/wallets/useLinkProfile.js";

package/src/exports/tokens.ts

@@ -6,7 +6,10 @@ export {
   DEFAULT_DEVELOPER_ADDRESS,
   DEFAULT_DEVELOPER_REWARD_BPS,
 } from "../tokens/constants.js";
-export { createToken, prepareCreateToken } from "../tokens/create-token.js";
+export {
+  getTokenAddressFromReceipt,
+  prepareCreateToken,
+} from "../tokens/create-token.js";
 export { distributeToken } from "../tokens/distribute-token.js";
 export {
   getDeployedContractFactory,

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

@@ -54,7 +54,7 @@ type SendAndConfirmTransactionConfig = {
  * ```
  * @transaction
  */
-export function useSendAndConfirmTransaction(
+export function useSendAndConfirmTransactionCore(
   config: SendAndConfirmTransactionConfig = {},
 ): UseMutationResult<
   TransactionReceipt,

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

@@ -0,0 +1,104 @@
+import { type UseMutationResult, useMutation } from "@tanstack/react-query";
+import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
+import type { SendTransactionOptions } from "../../../../transaction/actions/send-transaction.js";
+import { waitForReceipt } from "../../../../transaction/actions/wait-for-tx-receipt.js";
+import type { TransactionReceipt } from "../../../../transaction/types.js";
+import type { SendTransactionPayModalConfig } from "../../../core/hooks/transaction/useSendTransaction.js";
+import { useSendTransaction } from "./useSendTransaction.js";
+
+/**
+ * Configuration for the `useSendAndConfirmTransaction` hook.
+ */
+type SendAndConfirmTransactionConfig = {
+  /**
+   * 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;
+};
+
+/**
+ * A hook to send a transaction and confirm the transaction with users's connected wallet
+ * @returns A mutation object to send a transaction.
+ * @example
+ * ```jsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ * const { mutate: sendAndConfirmTx, data: transactionReceipt } = useSendAndConfirmTransaction();
+ *
+ * // later
+ * sendAndConfirmTx(tx);
+ * ```
+ *
+ *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```tsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ * const mutation = useSendAndConfirmTransaction({
+ *   gasless: {
+ *     provider: "engine",
+ *     relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *     relayerForwarderAddress: "0x...",
+ *   }
+ * });
+ * ```
+ *
+ * ### Gasless usage with OpenZeppelin
+ * ```tsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ * const mutation = useSendAndConfirmTransaction({
+ *   gasless: {
+ *     provider: "openzeppelin",
+ *     relayerUrl: "https://...",
+ *     relayerForwarderAddress: "0x...",
+ *   }
+ * });
+ * ```
+ *
+ * ### Configuring the Pay Modal
+ *
+ * When the wallet does not have enough funds to send the transaction, a modal is shown to the user to buy the required funds and then continue with the transaction.
+ *
+ * You can configure the pay modal by passing a [`SendTransactionPayModalConfig`](https://portal.thirdweb.com/references/typescript/v5/SendTransactionPayModalConfig) object to the `payModal` config.
+ *
+ * ```tsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ *
+ * const sendAndConfirmTx = useSendAndConfirmTransaction({
+ *   payModal: {
+ *     theme: "light",
+ *   },
+ * });
+ * ```
+ *
+ * By default, the pay modal is enabled. You can disable it by passing `payModal: false` to the config.
+ *
+ * ```tsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ *
+ * const sendAndConfirmTx = useSendAndConfirmTransaction({
+ *   payModal: false,
+ * });
+ * ```
+ * @transaction
+ */
+export function useSendAndConfirmTransaction(
+  config: SendAndConfirmTransactionConfig = {},
+): UseMutationResult<
+  TransactionReceipt,
+  Error,
+  SendTransactionOptions["transaction"]
+> {
+  const sendTx = useSendTransaction(config);
+  return useMutation({
+    mutationFn: async (transaction) => {
+      const receipt = await sendTx.mutateAsync(transaction);
+      const confirmedReceipt = await waitForReceipt(receipt);
+      return confirmedReceipt;
+    },
+  });
+}

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

@@ -93,6 +93,32 @@ import { TransactionModal } from "../../ui/TransactionButton/TransactionModal.js
  * };
  * ```
  *
+ * ### Configuring the Pay Modal
+ *
+ * When the wallet does not have enough funds to send the transaction, a modal is shown to the user to buy the required funds and then continue with the transaction.
+ *
+ * You can configure the pay modal by passing a [`SendTransactionPayModalConfig`](https://portal.thirdweb.com/references/typescript/v5/SendTransactionPayModalConfig) object to the `payModal` config.
+ *
+ * ```tsx
+ * import { useSendTransaction } from "thirdweb/react";
+ *
+ * const sendTx = useSendTransaction({
+ *   payModal: {
+ *     theme: "light",
+ *   },
+ * });
+ * ```
+ *
+ * By default, the pay modal is enabled. You can disable it by passing `payModal: false` to the config.
+ *
+ * ```tsx
+ * import { useSendTransaction } from "thirdweb/react";
+ *
+ * const sendTx = useSendTransaction({
+ *   payModal: false,
+ * });
+ * ```
+ *
  * @transaction
  */
 export function useSendTransaction(config: SendTransactionConfig = {}) {

package/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.tsx

@@ -8,8 +8,8 @@ import { getListing } from "../../../../../../extensions/marketplace/direct-list
 import type { BaseTransactionOptions } from "../../../../../../transaction/types.js";
 import { useReadContract } from "../../../../../core/hooks/contract/useReadContract.js";
 import type { TransactionButtonProps } from "../../../../../core/hooks/transaction/transaction-button-utils.js";
-import { useSendAndConfirmTransaction } from "../../../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
+import { useSendAndConfirmTransaction } from "../../../../hooks/transaction/useSendAndConfirmTransaction.js";
 import { TransactionButton } from "../../../TransactionButton/index.js";
 
 export type BuyDirectListingButtonProps = Omit<
@@ -104,7 +104,15 @@ export function BuyDirectListingButton(props: BuyDirectListingButtonProps) {
     },
   });
 
-  const { mutateAsync } = useSendAndConfirmTransaction();
+  const { mutateAsync } = useSendAndConfirmTransaction({
+    payModal:
+      typeof payModal === "object"
+        ? {
+            ...payModal,
+            metadata: payModal.metadata || payMetadata,
+          }
+        : payModal,
+  });
 
   const prepareBuyTransaction = useCallback(async () => {
     if (!account) {

package/src/react/web/ui/prebuilt/thirdweb/ClaimButton/index.tsx

@@ -10,8 +10,8 @@ import type { PreparedTransaction } from "../../../../../../transaction/prepare-
 import type { BaseTransactionOptions } from "../../../../../../transaction/types.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import { useReadContract } from "../../../../../core/hooks/contract/useReadContract.js";
-import { useSendAndConfirmTransaction } from "../../../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
+import { useSendAndConfirmTransaction } from "../../../../hooks/transaction/useSendAndConfirmTransaction.js";
 import { TransactionButton } from "../../../TransactionButton/index.js";
 import type {
   ClaimButtonProps,
@@ -126,7 +126,15 @@ export function ClaimButton(props: ClaimButtonProps) {
     tokenId: claimParams.type === "ERC1155" ? claimParams.tokenId : undefined,
   });
   const account = useActiveAccount();
-  const { mutateAsync } = useSendAndConfirmTransaction();
+  const { mutateAsync } = useSendAndConfirmTransaction({
+    payModal:
+      typeof payModal === "object"
+        ? {
+            ...payModal,
+            metadata: payModal.metadata || payMetadata,
+          }
+        : payModal,
+  });
   return (
     <TransactionButton
       payModal={{

package/src/react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.tsx

@@ -13,8 +13,8 @@ import {
 import type { BaseTransactionOptions } from "../../../../../../transaction/types.js";
 import { useReadContract } from "../../../../../core/hooks/contract/useReadContract.js";
 import type { TransactionButtonProps } from "../../../../../core/hooks/transaction/transaction-button-utils.js";
-import { useSendAndConfirmTransaction } from "../../../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
+import { useSendAndConfirmTransaction } from "../../../../hooks/transaction/useSendAndConfirmTransaction.js";
 import { TransactionButton } from "../../../TransactionButton/index.js";
 
 export type CreateDirectListingButtonProps = Omit<
@@ -88,7 +88,15 @@ export function CreateDirectListingButton(
     },
     tokenId,
   });
-  const { mutateAsync } = useSendAndConfirmTransaction();
+  const { mutateAsync } = useSendAndConfirmTransaction({
+    payModal:
+      typeof payModal === "object"
+        ? {
+            ...payModal,
+            metadata: payModal.metadata || payMetadata,
+          }
+        : payModal,
+  });
 
   const prepareTransaction = useCallback(async () => {
     if (!account) {

package/src/tokens/create-token.ts

@@ -3,7 +3,7 @@ import type { Hex } from "viem";
 import { parseEventLogs } from "../event/actions/parse-logs.js";
 import { createdEvent } from "../extensions/tokens/__generated__/ERC20Entrypoint/events/Created.js";
 import { createById } from "../extensions/tokens/__generated__/ERC20Entrypoint/write/createById.js";
-import { sendAndConfirmTransaction } from "../transaction/actions/send-and-confirm-transaction.js";
+import type { TransactionReceipt } from "../transaction/types.js";
 import { padHex, toHex } from "../utils/encoding/hex.js";
 import { DEFAULT_DEVELOPER_ADDRESS } from "./constants.js";
 import { getDeployedEntrypointERC20 } from "./get-entrypoint-erc20.js";
@@ -14,40 +14,7 @@ import {
 } from "./token-utils.js";
 import type { CreateTokenOptions } from "./types.js";
 
-export async function createToken(options: CreateTokenOptions) {
-  const { client, account, params, launchConfig } = options;
-
-  const creator = params.owner || account.address;
-  const encodedInitData = await encodeInitParams({
-    client,
-    creator,
-    params,
-  });
-
-  const salt: Hex = generateSalt(options.salt || bytesToHex(randomBytes(31)));
-
-  const entrypoint = await getDeployedEntrypointERC20(options);
-
-  let hookData: Hex = "0x";
-  let contractId = padHex(toHex("ERC20Asset"), { size: 32 });
-  if (launchConfig?.kind === "pool") {
-    hookData = encodePoolConfig(launchConfig.config);
-    contractId = padHex(toHex("ERC20Asset_Pool"), { size: 32 });
-  }
-
-  const transaction = createById({
-    contract: entrypoint,
-    contractId,
-    params: {
-      data: encodedInitData,
-      hookData,
-      developer: options.developerAddress || DEFAULT_DEVELOPER_ADDRESS,
-      salt,
-    },
-    creator,
-  });
-
-  const receipt = await sendAndConfirmTransaction({ account, transaction });
+export async function getTokenAddressFromReceipt(receipt: TransactionReceipt) {
   const assetEvent = createdEvent();
   const decodedEvent = parseEventLogs({
     events: [assetEvent],

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.105.39";
+export const version = "5.105.40-nightly-c331d189bbe6e1d3e0a9b9916d772686bb716ad3-20250830000346";