Integrate Pay Modal with TransactionButton, disable Pay Modal for gasless (#2933)

Author: MananTank

.changeset/tender-ghosts-enjoy.md

@@ -0,0 +1,31 @@
+---
+"thirdweb": patch
+---
+
+### Integrate Pay Modal with TransactionButton
+
+By default, the Pay Modal is integrated with the `TransactionButton` component. If the user performs a transaction and does not have enough funds to execute it and if [thirdweb pay](https://portal.thirdweb.com/connect/pay/buy-with-crypto) is available for that blockchain, the Pay Modal will be displayed to allow user to buy the required amount of tokens
+
+A new prop `payModal` is added to the `TransactionButton` component customize the Pay Modal UI or disable it entirely
+
+Example: Disable Pay Modal
+
+```tsx
+<TransactionButton payModal={false}> Example 1 </TransactionButton>
+```
+
+Example: Customize Pay Modal UI
+
+```tsx
+<TransactionButton
+  payModal={{
+    theme: "light",
+  }}
+>
+  Example 2
+</TransactionButton>
+```
+
+### Disable Pay Modal for certain configurations in `useSendTransaction` hook
+
+If `useSendTransaction` hook is passed `gasless: true` configuration or if current active wallet is a smart wallet with `sponsorGas: true` configuration - the Pay Modal will be disabled

packages/thirdweb/src/exports/react.ts

@@ -61,6 +61,7 @@ export { useReadContract } from "../react/core/hooks/contract/useReadContract.js
 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";

packages/thirdweb/src/react/web/hooks/useSendTransaction.tsx

@@ -2,7 +2,9 @@ import { useContext, useState } from "react";
 import type { ThirdwebClient } from "../../../client/client.js";
 import type { GaslessOptions } from "../../../transaction/actions/gasless/types.js";
 import type { PreparedTransaction } from "../../../transaction/prepare-transaction.js";
+import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import { useSendTransactionCore } from "../../core/hooks/contract/useSendTransaction.js";
+import { useActiveWallet } from "../../core/hooks/wallets/wallet-hooks.js";
 import { SetRootElementContext } from "../../core/providers/RootElementContext.js";
 import {
   type SupportedTokens,
@@ -17,6 +19,34 @@ import type { Theme } from "../ui/design-system/index.js";
 import type { LocaleId } from "../ui/types.js";
 import { LoadingScreen } from "../wallets/shared/LoadingScreen.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";
+    }
+  | false;
+
 /**
  * Configuration for the `useSendTransaction` hook.
  */
@@ -41,14 +71,7 @@ export type SendTransactionConfig = {
    * 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.
    */
-  payModal?:
-    | {
-        locale?: LocaleId;
-        supportedTokens?: SupportedTokens;
-        theme?: Theme | "light" | "dark";
-      }
-    | false;
-
+  payModal?: SendTransactionPayModalConfig;
   /**
    * Configuration for gasless transactions.
    * Refer to [`GaslessOptions`](https://portal.thirdweb.com/references/typescript/v5/GaslessOptions) for more details.
@@ -73,11 +96,31 @@ export type SendTransactionConfig = {
  * @transaction
  */
 export function useSendTransaction(config: SendTransactionConfig = {}) {
+  const activeWallet = useActiveWallet();
   const payModal = config.payModal;
 
+  let payModalEnabled = true;
+
+  if (payModal === false || config.gasless) {
+    payModalEnabled = false;
+  }
+
+  // if active wallet is smart wallet with gasless enabled, don't show the pay modal
+  if (activeWallet && activeWallet.id === "smart") {
+    const options = (activeWallet as Wallet<"smart">).getConfig();
+
+    if ("sponsorGas" in options && options.sponsorGas === true) {
+      payModalEnabled = false;
+    }
+
+    if ("gasless" in options && options.gasless === true) {
+      payModalEnabled = false;
+    }
+  }
+
   const setRootEl = useContext(SetRootElementContext);
   return useSendTransactionCore(
-    payModal === false
+    !payModalEnabled || payModal === false
       ? undefined
       : (data) => {
           setRootEl(

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

@@ -7,12 +7,15 @@ import {
 } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { TransactionReceipt } from "../../../../transaction/types.js";
-import { useSendTransactionCore } from "../../../core/hooks/contract/useSendTransaction.js";
 import {
   useActiveAccount,
   useActiveWallet,
   useSwitchActiveWalletChain,
 } from "../../../core/hooks/wallets/wallet-hooks.js";
+import {
+  type SendTransactionPayModalConfig,
+  useSendTransaction,
+} from "../../hooks/useSendTransaction.js";
 import { Spinner } from "../components/Spinner.js";
 import { Button } from "../components/buttons.js";
 
@@ -72,6 +75,28 @@ export type TransactionButtonProps = {
    * The button's disabled state
    */
   disabled?: boolean;
+
+  /**
+   * 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.
+   */
+  payModal?: SendTransactionPayModalConfig;
 };
 
 /**
@@ -100,6 +125,7 @@ export function TransactionButton(props: TransactionButtonProps) {
     onError,
     onClick,
     gasless,
+    payModal,
     disabled,
     ...buttonProps
   } = props;
@@ -108,7 +134,10 @@ export function TransactionButton(props: TransactionButtonProps) {
   const [isPending, setIsPending] = useState(false);
   const switchChain = useSwitchActiveWalletChain();
 
-  const sendTransaction = useSendTransactionCore(undefined, gasless);
+  const sendTransaction = useSendTransaction({
+    gasless,
+    payModal,
+  });
 
   return (
     <Button