feat: add useSendAndConfirmTransaction hook (#2674)

Author: joaquim-verges

.changeset/early-ants-repeat.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Add `useSendAndConfirmTransaction` hook

packages/thirdweb/src/exports/react-native.ts

@@ -16,8 +16,8 @@ export {
 } from "../react/core/hooks/wallets/wallet-hooks.js";
 
 // contract related
-export { useReadContract } from "../react/core/hooks/contract/useRead.js";
-export { useSendTransaction } from "../react/core/hooks/contract/useSend.js";
+export { useReadContract } from "../react/core/hooks/contract/useReadContract.js";
+export { useSendTransaction } from "../react/core/hooks/contract/useSendTransaction.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";

packages/thirdweb/src/exports/react.ts

@@ -51,8 +51,9 @@ export {
 } from "../react/core/hooks/wallets/wallet-hooks.js";
 
 // contract related
-export { useReadContract } from "../react/core/hooks/contract/useRead.js";
-export { useSendTransaction } from "../react/core/hooks/contract/useSend.js";
+export { useReadContract } from "../react/core/hooks/contract/useReadContract.js";
+export { useSendTransaction } from "../react/core/hooks/contract/useSendTransaction.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";

packages/thirdweb/src/react/core/hooks/contract/useRead.ts renamed to packages/thirdweb/src/react/core/hooks/contract/useReadContract.ts

@@ -0,0 +1,38 @@
+import { useMutation, type UseMutationResult } from "@tanstack/react-query";
+import { useActiveAccount } from "../wallets/wallet-hooks.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import type { TransactionReceipt } from "../../../../transaction/types.js";
+import { sendAndConfirmTransaction } from "../../../../transaction/actions/send-and-confirm-transaction.js";
+
+/**
+ * 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) {
+        throw new Error("No active account");
+      }
+      return await sendAndConfirmTransaction({
+        transaction,
+        account,
+      });
+    },
+  });
+}

packages/thirdweb/src/react/core/hooks/contract/useSendAndConfirmTransaction.ts

@@ -10,10 +10,10 @@ import type { PreparedTransaction } from "../../../../transaction/prepare-transa
  * @example
  * ```jsx
  * import { useSendTransaction } from "thirdweb/react";
- * const { mutate: sendTx, data: transactionHash } = useSendTransaction();
+ * const { mutate: sendTx, data: transactionResult } = useSendTransaction();
  *
  * // later
- * const transactionHash = await sendTx(tx);
+ * sendTx(tx);
  * ```
  * @transaction
  */

packages/thirdweb/src/react/core/hooks/contract/useSend.ts renamed to packages/thirdweb/src/react/core/hooks/contract/useSendTransaction.ts

@@ -31,6 +31,7 @@ export function ThirdwebProvider(props: React.PropsWithChildren) {
         defaultOptions: {
           mutations: {
             onSettled: (data, error, variables) => {
+              console.log("Mutation settled", data, error, variables);
               if (error) {
                 // TODO: remove - but useful for debug now
                 console.error("[Mutation Error]", error);
@@ -50,14 +51,14 @@ export function ThirdwebProvider(props: React.PropsWithChildren) {
                           // invalidate any readContract queries for this chainId:contractAddress
                           [
                             "readContract",
-                            variables.contract.chain.id,
-                            variables.contract.address,
+                            variables.__contract?.chain.id,
+                            variables.__contract?.address,
                           ] as const,
                           // invalidate any walletBalance queries for this chainId
                           // TODO: add wallet address in here if we can get it somehow
                           [
                             "walletBalance",
-                            variables.contract.chain.id,
+                            variables.__contract?.chain.id,
                           ] as const,
                         ],
                       });

packages/thirdweb/src/react/core/providers/thirdweb-provider.tsx

@@ -7,7 +7,7 @@ import { useState } from "react";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/actions/getQuote.js";
 import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
-import { useSendTransaction } from "../../../../../../core/hooks/contract/useSend.js";
+import { useSendTransaction } from "../../../../../../core/hooks/contract/useSendTransaction.js";
 import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
 import {
   useBuyWithCryptoStatus,

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx

@@ -8,7 +8,7 @@ import {
   useActiveAccount,
   useActiveWallet,
 } from "../../../core/hooks/wallets/wallet-hooks.js";
-import { useSendTransaction } from "../../../core/hooks/contract/useSend.js";
+import { useSendTransaction } from "../../../core/hooks/contract/useSendTransaction.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { TransactionReceipt } from "../../../../transaction/types.js";
 import { useState } from "react";

packages/thirdweb/src/react/web/ui/TransactionButton/index.tsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
-import { useSendTransaction } from "../../../core/hooks/contract/useSend.js";
+import { useSendTransaction } from "../../../core/hooks/contract/useSendTransaction.js";
 import { useActiveWalletChain } from "../../../core/hooks/wallets/wallet-hooks.js";
 import { toWei } from "../../../../utils/units.js";
 import { getContract } from "../../../../contract/contract.js";

packages/thirdweb/src/react/web/ui/hooks/useSendToken.ts

@@ -10,6 +10,7 @@ import type { ThirdwebContract } from "../contract/contract.js";
 import { isObjectWithKeys } from "../utils/type-guards.js";
 import type { Hex } from "../utils/encoding/hex.js";
 import type { TransactionReceipt as ViemTransactionReceipt } from "viem";
+import type { PreparedTransaction } from "./prepare-transaction.js";
 
 export type SendTransactionResult = {
   readonly transactionHash: Hex;
@@ -44,11 +45,11 @@ export type BaseTransactionOptions<
  */
 export function isBaseTransactionOptions(
   value: unknown,
-): value is BaseTransactionOptions {
+): value is PreparedTransaction {
   return (
-    isObjectWithKeys(value, ["contract"]) &&
-    isObjectWithKeys(value.contract, ["address", "chain"]) &&
-    typeof value.contract.address === "string"
+    isObjectWithKeys(value, ["__contract"]) &&
+    isObjectWithKeys(value.__contract, ["address", "chain"]) &&
+    typeof value.__contract.address === "string"
   );
 }