feat: Integrate Buy Modal with useSendTransaction hook (#2767)

Signed-off-by: Manan Tank <manantankm@gmail.com>
Co-authored-by: Jonas Daniels <jonas.daniels@outlook.com>

Author: MananTank

.changeset/perfect-ducks-walk.md

@@ -0,0 +1,16 @@
+---
+"thirdweb": minor
+---
+
+Open "Buy Modal" UI when sending transaction using the `useSendTransaction` hook if the user does not have enough funds to execute the transaction to prompt the user to buy tokens
+
+`useSendTransaction` now takes an optional `config` option to customize the "Buy Modal" UI
+
+```tsx
+const sendTransaction = useSendTransaction({
+  buyModal: {
+    locale: 'en_US',
+    theme: 'light'
+  }
+});
+```

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

@@ -17,7 +17,7 @@ export {
 
 // contract related
 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";
@@ -45,3 +45,20 @@ export {
   useBuyWithCryptoHistory,
   type BuyWithCryptoHistoryQueryParams,
 } from "../react/core/hooks/pay/useBuyWithCryptoHistory.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;

packages/thirdweb/src/exports/react.ts

@@ -29,7 +29,10 @@ export {
 export { ThirdwebProvider } from "../react/core/providers/thirdweb-provider.js";
 
 // tokens
-export type { SupportedTokens } from "../react/web/ui/ConnectWallet/defaultTokens.js";
+export type {
+  SupportedTokens,
+  TokenInfo,
+} from "../react/web/ui/ConnectWallet/defaultTokens.js";
 export { defaultTokens } from "../react/web/ui/ConnectWallet/defaultTokens.js";
 
 // Media Renderer
@@ -53,7 +56,10 @@ export {
 
 // contract related
 export { useReadContract } from "../react/core/hooks/contract/useReadContract.js";
-export { useSendTransaction } from "../react/core/hooks/contract/useSendTransaction.js";
+export {
+  useSendTransaction,
+  type SendTransactionConfig,
+} 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";

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

@@ -1,9 +1,22 @@
 import { type UseMutationResult, useMutation } from "@tanstack/react-query";
+import { estimateGasCost } from "../../../../exports/transaction.js";
+import { resolvePromisedValue } from "../../../../exports/utils.js";
+import { getWalletBalance } from "../../../../exports/wallets.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 type { GetWalletBalanceResult } from "../../../../wallets/utils/getWalletBalance.js";
+import { fetchSwapSupportedChains } from "../../../web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.js";
 import { useActiveAccount } from "../wallets/wallet-hooks.js";
 
+type ShowModalData = {
+  tx: PreparedTransaction;
+  sendTx: () => void;
+  rejectTx: () => void;
+  totalCostWei: bigint;
+  walletBalance: GetWalletBalanceResult;
+};
+
 /**
  * A hook to send a transaction.
  * @returns A mutation object to send a transaction.
@@ -15,24 +28,107 @@ import { useActiveAccount } from "../wallets/wallet-hooks.js";
  * // later
  * sendTx(tx);
  * ```
- * @transaction
+ * @internal
  */
-export function useSendTransaction(): UseMutationResult<
-  WaitForReceiptOptions,
-  Error,
-  PreparedTransaction
-> {
+export function useSendTransactionCore(
+  showBuyModal?: (data: ShowModalData) => void,
+): UseMutationResult<WaitForReceiptOptions, Error, PreparedTransaction> {
   const account = useActiveAccount();
 
   return useMutation({
-    mutationFn: async (transaction) => {
+    mutationFn: async (tx) => {
       if (!account) {
         throw new Error("No active account");
       }
-      return await sendTransaction({
-        transaction,
-        account,
+
+      if (!showBuyModal) {
+        return sendTransaction({
+          transaction: tx,
+          account,
+        });
+      }
+
+      return new Promise<WaitForReceiptOptions>((resolve, reject) => {
+        const sendTx = async () => {
+          try {
+            const res = await sendTransaction({
+              transaction: tx,
+              account,
+            });
+
+            resolve(res);
+          } catch (e) {
+            reject(e);
+          }
+        };
+
+        (async () => {
+          try {
+            const swapSupportedChains = await fetchSwapSupportedChains(
+              tx.client,
+            );
+
+            const isBuySupported = swapSupportedChains.find(
+              (c) => c.id === tx.chain.id,
+            );
+
+            // buy not supported, can't show modal - send tx directly
+            if (!isBuySupported) {
+              sendTx();
+              return;
+            }
+
+            //  buy supported, check if there is enouch balance - if not show modal to buy tokens
+
+            const [walletBalance, totalCostWei] = await Promise.all([
+              getWalletBalance({
+                address: account.address,
+                chain: tx.chain,
+                client: tx.client,
+              }),
+              getTotalTxCostForBuy(tx),
+            ]);
+
+            const walletBalanceWei = walletBalance.value;
+
+            // if enough balance, send tx
+            if (totalCostWei < walletBalanceWei) {
+              sendTx();
+              return;
+            }
+
+            // if not enough balance - show modal
+            showBuyModal({
+              tx,
+              sendTx,
+              rejectTx: () => {
+                reject(new Error("Not enough balance"));
+              },
+              totalCostWei,
+              walletBalance,
+            });
+          } catch (e) {
+            console.error("Failed to estimate cost", e);
+            // send it anyway?
+            sendTx();
+          }
+        })();
       });
     },
   });
 }
+
+export async function getTotalTxCostForBuy(tx: PreparedTransaction) {
+  // Must pass 0 otherwise it will throw on some chains
+  const gasCost = await estimateGasCost({
+    transaction: { ...tx, value: 0n },
+  });
+
+  const bufferCost = gasCost.wei / 10n;
+
+  // Note: get tx.value AFTER estimateGasCost
+  const txValue = await resolvePromisedValue(tx.value);
+
+  // add 10% extra gas cost to the estimate to ensure user buys enough to cover the tx cost
+  return gasCost.wei + bufferCost + (txValue || 0n);
+}

packages/thirdweb/src/react/core/hooks/others/useWalletBalance.ts

@@ -3,19 +3,17 @@ import {
   type GetWalletBalanceOptions,
   getWalletBalance,
 } from "../../../../wallets/utils/getWalletBalance.js";
-import { useConnectUI } from "./useWalletConnectionCtx.js";
+
+// NOTE: Do not use useConnectUI here - because this hook is also used outside of Connect UI context
 
 /**
  * Custom hook to fetch the balance of a wallet for a specific token.
  * @param options - The options for fetching the wallet balance.
  * @returns The result of the query.
  * @internal
  */
-export function useWalletBalance(
-  options: Omit<Partial<GetWalletBalanceOptions>, "client">,
-) {
-  const { chain, address, tokenAddress } = options;
-  const { client } = useConnectUI();
+export function useWalletBalance(options: Partial<GetWalletBalanceOptions>) {
+  const { chain, address, tokenAddress, client } = options;
   const query = queryOptions({
     queryKey: [
       "walletBalance",

packages/thirdweb/src/react/core/providers/RootElementContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+export const SetRootElementContext = createContext<
+  (el: React.ReactNode) => void
+>(() => {});

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

@@ -6,6 +6,7 @@ import {
 } from "../../../transaction/actions/wait-for-tx-receipt.js";
 import { isBaseTransactionOptions } from "../../../transaction/types.js";
 import { isObjectWithKeys } from "../../../utils/type-guards.js";
+import { SetRootElementContext } from "./RootElementContext.js";
 
 /**
  * The ThirdwebProvider is component is a provider component that sets up the React Query client.
@@ -25,6 +26,7 @@ import { isObjectWithKeys } from "../../../utils/type-guards.js";
  * @component
  */
 export function ThirdwebProvider(props: React.PropsWithChildren) {
+  const [el, setEl] = useState<React.ReactNode>(null);
   const [queryClient] = useState(
     () =>
       new QueryClient({
@@ -77,7 +79,10 @@ export function ThirdwebProvider(props: React.PropsWithChildren) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      {props.children}
+      <SetRootElementContext.Provider value={setEl}>
+        {props.children}
+      </SetRootElementContext.Provider>
+      {el}
     </QueryClientProvider>
   );
 }