[SDK] Always show pay modal even on non-supported UB chains (#7092)

Signed-off-by: samina <[email protected]>
Signed-off-by: Maximilian Hubert <[email protected]>
Co-authored-by: gregfromstl <[email protected]>
Co-authored-by: Claude <[email protected]>
Co-authored-by: kumaryash90 <[email protected]>
Co-authored-by: Prithvish Baidya <[email protected]>
Co-authored-by: samina <[email protected]>
Co-authored-by: Maximilian Hubert <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Jonas Daniels <[email protected]>
Co-authored-by: arcoraven <[email protected]>

Author: 10 people

.changeset/sharp-symbols-unite.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Show deposit modal for tokens that don't have any UB routes

apps/playground-web/src/components/pay/transaction-button.tsx

@@ -2,7 +2,8 @@
 
 import { useTheme } from "next-themes";
 import { getContract } from "thirdweb";
-import { base, polygon } from "thirdweb/chains";
+import { prepareTransaction } from "thirdweb";
+import { base, baseSepolia, polygon } from "thirdweb/chains";
 import { transfer } from "thirdweb/extensions/erc20";
 import { claimTo, getNFT } from "thirdweb/extensions/erc1155";
 import {
@@ -12,6 +13,7 @@ import {
   useActiveAccount,
   useReadContract,
 } from "thirdweb/react";
+import { toWei } from "thirdweb/utils";
 import { THIRDWEB_CLIENT } from "../../lib/client";
 import { StyledConnectButton } from "../styled-connect-button";
 
@@ -99,6 +101,27 @@ export function PayTransactionButtonPreview() {
           >
             Buy VIP Pass
           </TransactionButton>
+          <div className="h-10" />
+          <div className="flex items-center gap-2">Price: 0.1 ETH</div>
+          <TransactionButton
+            transaction={() => {
+              if (!account) throw new Error("No active account");
+              return prepareTransaction({
+                chain: baseSepolia,
+                client: THIRDWEB_CLIENT,
+                to: account.address,
+                value: toWei("0.1"),
+              });
+            }}
+            onError={(e) => {
+              console.error(e);
+            }}
+            payModal={{
+              theme: theme === "light" ? "light" : "dark",
+            }}
+          >
+            Send 0.1 ETH
+          </TransactionButton>
         </div>
       )}
     </>

apps/portal/src/app/pay/guides/build-a-custom-experience/page.mdx

@@ -94,7 +94,7 @@ The `quote` object contains detailed transaction information including the estim
 
 </Step>
 <Step title='Check for a Buy With Crypto Step'>
-The `quote` object contains `quote.onRampToken` and `quote.toToken` objects containing intermediate and detination token information.
+The `quote` object contains `quote.onRampToken` and `quote.toToken` objects containing intermediate and destination token information.
 
 If `quote.onRampToken` is not the same as `quote.toToken`, then your users will need to onramp to intermediary token before arriving at their destination token.
 

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

@@ -104,6 +104,7 @@ export type SendTransactionConfig = {
 };
 
 export type ShowModalData = {
+  mode: "buy" | "deposit";
   tx: PreparedTransaction;
   sendTx: () => void;
   rejectTx: (reason: Error) => void;
@@ -184,47 +185,6 @@ export function useSendTransactionCore(args: {
               resolvePromisedValue(tx.erc20Value),
             ]);
 
-            const supportedDestinations = await Bridge.routes({
-              client: tx.client,
-              destinationChainId: tx.chain.id,
-              destinationTokenAddress: _erc20Value?.tokenAddress,
-            }).catch((err) => {
-              trackPayEvent({
-                client: tx.client,
-                walletAddress: account.address,
-                walletType: wallet?.id,
-                toChainId: tx.chain.id,
-                event: "pay_transaction_modal_pay_api_error",
-                error: err?.message,
-              });
-              return null;
-            });
-
-            if (!supportedDestinations) {
-              // could not fetch supported destinations, just send the tx
-              sendTx();
-              return;
-            }
-
-            if (supportedDestinations.length === 0) {
-              trackPayEvent({
-                client: tx.client,
-                walletAddress: account.address,
-                walletType: wallet?.id,
-                toChainId: tx.chain.id,
-                toToken: _erc20Value?.tokenAddress || undefined,
-                event: "pay_transaction_modal_chain_token_not_supported",
-                error: JSON.stringify({
-                  chain: tx.chain.id,
-                  token: _erc20Value?.tokenAddress,
-                  message: "chain/token not supported",
-                }),
-              });
-              // chain/token not supported, just send the tx
-              sendTx();
-              return;
-            }
-
             const nativeValue = _nativeValue || 0n;
             const erc20Value = _erc20Value?.amountWei || 0n;
 
@@ -256,7 +216,54 @@ export function useSendTransactionCore(args: {
               (nativeCost > 0n && nativeBalance.value < nativeCost);
 
             if (shouldShowModal) {
+              const supportedDestinations = await Bridge.routes({
+                client: tx.client,
+                destinationChainId: tx.chain.id,
+                destinationTokenAddress: _erc20Value?.tokenAddress,
+              }).catch((err) => {
+                trackPayEvent({
+                  client: tx.client,
+                  walletAddress: account.address,
+                  walletType: wallet?.id,
+                  toChainId: tx.chain.id,
+                  event: "pay_transaction_modal_pay_api_error",
+                  error: err?.message,
+                });
+                return null;
+              });
+
+              if (
+                !supportedDestinations ||
+                supportedDestinations.length === 0
+              ) {
+                // not a supported destination -> show deposit screen
+                trackPayEvent({
+                  client: tx.client,
+                  walletAddress: account.address,
+                  walletType: wallet?.id,
+                  toChainId: tx.chain.id,
+                  toToken: _erc20Value?.tokenAddress || undefined,
+                  event: "pay_transaction_modal_chain_token_not_supported",
+                  error: JSON.stringify({
+                    chain: tx.chain.id,
+                    token: _erc20Value?.tokenAddress,
+                    message: "chain/token not supported",
+                  }),
+                });
+
+                showPayModal({
+                  mode: "deposit",
+                  tx,
+                  sendTx,
+                  rejectTx: reject,
+                  resolveTx: resolve,
+                });
+                return;
+              }
+
+              // chain is supported, show buy mode
               showPayModal({
+                mode: "buy",
                 tx,
                 sendTx,
                 rejectTx: reject,

packages/thirdweb/src/react/core/utils/wallet.ts

@@ -244,6 +244,21 @@ export function hasSponsoredTransactionsEnabled(wallet: Wallet | undefined) {
         sponsoredTransactionsEnabled = smartOptions.gasless;
       }
     }
+    if (options?.executionMode) {
+      const execMode = options.executionMode;
+      if (execMode.mode === "EIP4337") {
+        const smartOptions = execMode.smartAccount;
+        if (smartOptions && "sponsorGas" in smartOptions) {
+          sponsoredTransactionsEnabled = smartOptions.sponsorGas;
+        }
+        if (smartOptions && "gasless" in smartOptions) {
+          sponsoredTransactionsEnabled = smartOptions.gasless;
+        }
+      }
+      if (execMode.mode === "EIP7702") {
+        sponsoredTransactionsEnabled = execMode.sponsorGas || false;
+      }
+    }
   }
   return sponsoredTransactionsEnabled;
 }

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

@@ -121,6 +121,7 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
         localeId={payModal?.locale || "en_US"}
         supportedTokens={payModal?.supportedTokens}
         theme={payModal?.theme || "dark"}
+        modalMode={data.mode}
         payOptions={{
           buyWithCrypto: payModal?.buyWithCrypto,
           buyWithFiat: payModal?.buyWithFiat,

packages/thirdweb/src/react/web/ui/ConnectWallet/locale/en.ts

@@ -68,7 +68,7 @@ const connectLocaleEn: ConnectLocale = {
   },
   receiveFundsScreen: {
     title: "Receive Funds",
-    instruction: "Copy the wallet address to send funds to this wallet",
+    instruction: "Copy the address to send funds to this wallet",
   },
   sendFundsScreen: {
     title: "Send Funds",

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/types.ts

@@ -1,3 +1,4 @@
+import type { ChainMetadata } from "../../../../../../../chains/types.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
 import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
 import type { GetWalletBalanceResult } from "../../../../../../../wallets/utils/getWalletBalance.js";
@@ -9,6 +10,7 @@ export type TransactionCostAndData = {
   walletBalance: GetWalletBalanceResult;
   transactionValueWei: bigint;
   gasCostWei: bigint;
+  chainMetadata: ChainMetadata;
 };
 
 export type SelectedScreen =

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useBuyTxStates.ts

@@ -18,6 +18,7 @@ export function useTransactionCostAndData(args: {
   transaction: PreparedTransaction;
   account: Account | undefined;
   supportedDestinations: SupportedChainAndTokens;
+  refetchIntervalMs?: number;
 }) {
   const { transaction, account, supportedDestinations } = args;
   // Compute query key of the transaction first
@@ -62,22 +63,24 @@ export function useTransactionCostAndData(args: {
 
       const erc20Value = await resolvePromisedValue(transaction.erc20Value);
       if (erc20Value) {
-        const [tokenBalance, tokenMeta, gasCostWei] = await Promise.all([
-          getWalletBalance({
-            address: account.address,
-            chain: transaction.chain,
-            client: transaction.client,
-            tokenAddress: erc20Value.tokenAddress,
-          }),
-          getCurrencyMetadata({
-            contract: getContract({
-              address: erc20Value.tokenAddress,
+        const [tokenBalance, tokenMeta, gasCostWei, chainMetadata] =
+          await Promise.all([
+            getWalletBalance({
+              address: account.address,
               chain: transaction.chain,
               client: transaction.client,
+              tokenAddress: erc20Value.tokenAddress,
             }),
-          }),
-          getTransactionGasCost(transaction, account?.address),
-        ]);
+            getCurrencyMetadata({
+              contract: getContract({
+                address: erc20Value.tokenAddress,
+                chain: transaction.chain,
+                client: transaction.client,
+              }),
+            }),
+            getTransactionGasCost(transaction, account?.address),
+            getChainMetadata(transaction.chain),
+          ]);
         const transactionValueWei = erc20Value.amountWei;
         const walletBalance = tokenBalance;
         const currency = {
@@ -95,6 +98,7 @@ export function useTransactionCostAndData(args: {
         return {
           token: currency,
           decimals: tokenMeta.decimals,
+          chainMetadata,
           walletBalance,
           gasCostWei,
           transactionValueWei,
@@ -121,19 +125,14 @@ export function useTransactionCostAndData(args: {
           symbol: chainMetadata.nativeCurrency.symbol,
           icon: chainMetadata.icon?.url,
         },
+        chainMetadata,
         decimals: 18,
         walletBalance,
         gasCostWei,
         transactionValueWei,
       } satisfies TransactionCostAndData;
     },
     enabled: !!transaction && !!txQueryKey,
-    refetchInterval: () => {
-      if (transaction.erc20Value) {
-        // if erc20 value is set, we don't need to poll
-        return undefined;
-      }
-      return 30_000;
-    },
+    refetchInterval: args.refetchIntervalMs || 30_000,
   });
 }