thirdweb 5.39.0 → 5.40.0

package/src/react/core/hooks/wallets/useAutoConnect.ts

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
+import { getUrlToken } from "../../../../wallets/in-app/web/lib/get-url-token.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
   type ConnectionManager,
@@ -7,6 +8,7 @@ import {
   getStoredActiveWalletId,
   getStoredConnectedWalletIds,
 } from "../../../../wallets/manager/index.js";
+import { setLastAuthProvider } from "../../utils/storage.js";
 import { timeoutPromise } from "../../utils/timeoutPromise.js";
 import type { AutoConnectProps } from "../connection/types.js";
 import { useConnectCore } from "./useConnect.js";
@@ -32,12 +34,23 @@ export function useAutoConnectCore(
   const autoConnect = async (): Promise<boolean> => {
     let autoConnected = false;
     isAutoConnecting.setValue(true);
-    const [lastConnectedWalletIds, lastActiveWalletId] = await Promise.all([
+    let [lastConnectedWalletIds, lastActiveWalletId] = await Promise.all([
       getStoredConnectedWalletIds(storage),
       getStoredActiveWalletId(storage),
     ]);
 
-    // if no wallets were last connected
+    const { authResult, walletId, authProvider } = getUrlToken();
+    if (authResult && walletId) {
+      lastActiveWalletId = walletId;
+      lastConnectedWalletIds = lastConnectedWalletIds?.includes(walletId)
+        ? lastConnectedWalletIds
+        : [walletId, ...(lastConnectedWalletIds || [])];
+    }
+    if (authProvider) {
+      await setLastAuthProvider(authProvider, storage);
+    }
+
+    // if no wallets were last connected or we didn't receive an auth token
     if (!lastConnectedWalletIds) {
       return autoConnected;
     }
@@ -48,6 +61,7 @@ export function useAutoConnectCore(
       return wallet.autoConnect({
         client: props.client,
         chain: lastConnectedChain ?? undefined,
+        authResult,
       });
     }
 
@@ -61,7 +75,7 @@ export function useAutoConnectCore(
         setConnectionStatus("connecting"); // only set connecting status if we are connecting the last active EOA
         await timeoutPromise(handleWalletConnection(activeWallet), {
           ms: timeout,
-          message: `AutoConnect timeout : ${timeout}ms limit exceeded.`,
+          message: `AutoConnect timeout: ${timeout}ms limit exceeded.`,
         });
 
         // connected wallet could be activeWallet or smart wallet

package/src/react/core/utils/defaultTokens.ts

@@ -1,3 +1,4 @@
+import type { Chain } from "../../../chains/types.js";
 import type { Address } from "../../../utils/address.js";
 
 export type TokenInfo = {
@@ -34,31 +35,8 @@ const fantomIcon =
 export type SupportedTokens = Record<number, TokenInfo[]>;
 export type SupportedNFTs = Record<number, Address[]>;
 
-/**
- * Default tokens shown in [`ConnectButton`](https://portal.thirdweb.com/react/v4/components/ConnectButton)'s SendFunds screen for each network.
- *
- * You can use the default tokens as a starting point for your own list of tokens and override tokens for specific networks.
- * @example
- * Below example shows adding a custom token for the Ethereum mainnet at start of the list of default tokens for the Ethereum mainnet. Here the `1` represents the chainId of Ethereum mainnet.
- *
- * ```tsx
- * const ethereumChainId = 1;
- *
- * <ConnectButton supportedTokens={{
- *  ...defaultTokens,
- *  [ethereumChainId]: [
- *    {
- *      address: 'YOUR_TOKEN_ADDRESS',
- *      name: 'YOUR_TOKEN_NAME',
- *      symbol: 'YOUR_TOKEN_SYMBOL',
- *      icon: 'YOUR_TOKEN_ICON_URL'
- *    },
- *    ...defaultTokens[ethereumChainId],
- *  ]
- * }} />
- * ```
- */
-export const defaultTokens: SupportedTokens = {
+// TODO these should be moved to chain definitions
+const DEFAULT_TOKENS = {
   "1": [
     {
       address: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
@@ -333,4 +311,38 @@ export const defaultTokens: SupportedTokens = {
       icon: usdcIcon,
     },
   ],
-};
+} as const;
+
+/**
+ * Default tokens shown in [`ConnectButton`](https://portal.thirdweb.com/react/v4/components/ConnectButton)'s SendFunds screen for each network.
+ *
+ * You can use the default tokens as a starting point for your own list of tokens and override tokens for specific networks.
+ * @example
+ * Below example shows adding a custom token for the Ethereum mainnet at start of the list of default tokens for the Ethereum mainnet. Here the `1` represents the chainId of Ethereum mainnet.
+ *
+ * ```tsx
+ * const ethereumChainId = 1;
+ *
+ * <ConnectButton supportedTokens={{
+ *  ...defaultTokens,
+ *  [ethereumChainId]: [
+ *    {
+ *      address: 'YOUR_TOKEN_ADDRESS',
+ *      name: 'YOUR_TOKEN_NAME',
+ *      symbol: 'YOUR_TOKEN_SYMBOL',
+ *      icon: 'YOUR_TOKEN_ICON_URL'
+ *    },
+ *    ...defaultTokens[ethereumChainId],
+ *  ]
+ * }} />
+ * ```
+ */
+export const defaultTokens = DEFAULT_TOKENS as unknown as SupportedTokens;
+
+type SupportedSymbol =
+  (typeof DEFAULT_TOKENS)[keyof typeof DEFAULT_TOKENS][number]["symbol"];
+
+export function getDefaultToken(chain: Chain, symbol: SupportedSymbol) {
+  const tokens = defaultTokens[chain.id];
+  return tokens?.find((t) => t.symbol === symbol);
+}

package/src/react/core/utils/wallet.ts

@@ -5,12 +5,75 @@ import type { ThirdwebClient } from "../../../client/client.js";
 import { resolveAvatar } from "../../../extensions/ens/resolve-avatar.js";
 import { resolveName } from "../../../extensions/ens/resolve-name.js";
 import { getWalletInfo } from "../../../wallets/__generated__/getWalletInfo.js";
-import type { Account } from "../../../wallets/interfaces/wallet.js";
+import type { Account, Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { WalletInfo } from "../../../wallets/wallet-info.js";
 import type { WalletId } from "../../../wallets/wallet-types.js";
 import { useWalletBalance } from "../hooks/others/useWalletBalance.js";
 import { shortenString } from "./addresses.js";
 
+/**
+ * Get the ENS name and avatar for an address
+ * @param options - the client and address to get the ENS name and avatar for
+ * @returns - a query object that resolves to the ENS name
+ * @example
+ * ```tsx
+ * import { useEnsName } from "thirdweb/react";
+ *
+ * const { data: ensName } = useEnsName({
+ *  client,
+ *  address: "0x1234...",
+ * });
+ * ```
+ * @extension ENS
+ */
+export function useEnsName(options: {
+  client: ThirdwebClient;
+  address: string | undefined;
+}) {
+  const { client, address } = options;
+  return useQuery({
+    queryKey: ["ens-name", address],
+    enabled: !!address,
+    queryFn: () =>
+      resolveName({
+        client,
+        address: address || "",
+        resolverChain: ethereum,
+      }),
+  });
+}
+
+/**
+ * Get the ENS avatar for an ENS name
+ * @param options - the client and ENS name to get the avatar for
+ * @returns - a query object that resolves to the avatar
+ * @example
+ * ```tsx
+ * import { useEnsAvatar } from "thirdweb/react";
+ *
+ * const { data: ensAvatar } = useEnsAvatar({
+ *  client,
+ *  ensName: "my-ens-name.eth",
+ * });
+ * ```
+ * @extension ENS
+ */
+export function useEnsAvatar(options: {
+  client: ThirdwebClient;
+  ensName: string | null | undefined;
+}) {
+  const { client, ensName } = options;
+  return useQuery({
+    queryKey: ["ens-avatar", ensName],
+    enabled: !!ensName,
+    queryFn: async () =>
+      resolveAvatar({
+        client,
+        name: ensName || "",
+      }),
+  });
+}
+
 /**
  * @internal
  */
@@ -25,25 +88,14 @@ export function useConnectedWalletDetails(
       ? displayBalanceToken[Number(walletChain.id)]
       : undefined;
 
-  const ensNameQuery = useQuery({
-    queryKey: ["ens-name", activeAccount?.address],
-    enabled: !!activeAccount?.address,
-    queryFn: () =>
-      resolveName({
-        client,
-        address: activeAccount?.address || "",
-        resolverChain: ethereum,
-      }),
+  const ensNameQuery = useEnsName({
+    client,
+    address: activeAccount?.address,
   });
 
-  const ensAvatarQuery = useQuery({
-    queryKey: ["ens-avatar", ensNameQuery.data],
-    enabled: !!ensNameQuery.data,
-    queryFn: async () =>
-      resolveAvatar({
-        client,
-        name: ensNameQuery.data || "",
-      }),
+  const ensAvatarQuery = useEnsAvatar({
+    client,
+    ensName: ensNameQuery.data,
   });
 
   const shortAddress = activeAccount?.address
@@ -107,3 +159,35 @@ export function useWalletImage(id: WalletId | undefined) {
     enabled: !!id,
   });
 }
+
+/**
+ * @internal
+ */
+export function hasSponsoredTransactionsEnabled(wallet: Wallet | undefined) {
+  if (!wallet) {
+    return false;
+  }
+  let sponsoredTransactionsEnabled = false;
+  if (wallet && wallet.id === "smart") {
+    const options = (wallet as Wallet<"smart">).getConfig();
+    if ("sponsorGas" in options) {
+      sponsoredTransactionsEnabled = options.sponsorGas;
+    }
+    if ("gasless" in options) {
+      sponsoredTransactionsEnabled = options.gasless;
+    }
+  }
+  if (wallet && wallet.id === "inApp") {
+    const options = (wallet as Wallet<"inApp">).getConfig();
+    if (options && "smartAccount" in options && options.smartAccount) {
+      const smartOptions = options.smartAccount;
+      if ("sponsorGas" in smartOptions) {
+        sponsoredTransactionsEnabled = smartOptions.sponsorGas;
+      }
+      if ("gasless" in smartOptions) {
+        sponsoredTransactionsEnabled = smartOptions.gasless;
+      }
+    }
+  }
+  return sponsoredTransactionsEnabled;
+}

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

@@ -1,33 +1,11 @@
-import { CheckCircledIcon } from "@radix-ui/react-icons";
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import type { ThirdwebClient } from "../../../../client/client.js";
-import { isNativeTokenAddress } from "../../../../constants/addresses.js";
-import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
-import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
-import { toTokens } from "../../../../utils/units.js";
-import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
-import type { GetWalletBalanceResult } from "../../../../wallets/utils/getWalletBalance.js";
-import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
-import { type Theme, iconSize } from "../../../core/design-system/index.js";
-import type { PayUIOptions } from "../../../core/hooks/connection/ConnectButtonProps.js";
+import { useContext } from "react";
 import {
   type SendTransactionConfig,
+  type ShowModalData,
   useSendTransactionCore,
 } from "../../../core/hooks/transaction/useSendTransaction.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
-import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
-import { AccentFailIcon } from "../../ui/ConnectWallet/icons/AccentFailIcon.js";
-import { useConnectLocale } from "../../ui/ConnectWallet/locale/getConnectLocale.js";
-import { LazyBuyScreen } from "../../ui/ConnectWallet/screens/Buy/LazyBuyScreen.js";
-import { PayTxHistoryScreen } from "../../ui/ConnectWallet/screens/Buy/pay-transactions/BuyTxHistory.js";
-import { Modal } from "../../ui/components/Modal.js";
-import { Spacer } from "../../ui/components/Spacer.js";
-import { Spinner } from "../../ui/components/Spinner.js";
-import { Container, ModalHeader } from "../../ui/components/basic.js";
-import { Button } from "../../ui/components/buttons.js";
-import { Text } from "../../ui/components/text.js";
-import type { LocaleId } from "../../ui/types.js";
-import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
+import { TransactionModal } from "../../ui/TransactionButton/TransactionModal.js";
 import { useActiveWallet } from "../wallets/useActiveWallet.js";
 import { useSwitchActiveWalletChain } from "../wallets/useSwitchActiveWalletChain.js";
 
@@ -48,9 +26,9 @@ import { useSwitchActiveWalletChain } from "../wallets/useSwitchActiveWalletChai
  * @transaction
  */
 export function useSendTransaction(config: SendTransactionConfig = {}) {
-  const activeWallet = useActiveWallet();
   const switchChain = useSwitchActiveWalletChain();
   const wallet = useActiveWallet();
+  const setRootEl = useContext(SetRootElementContext);
   const payModal = config.payModal;
 
   let payModalEnabled = true;
@@ -59,263 +37,41 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
     payModalEnabled = false;
   }
 
-  // TODO handle erc20 pay modal
-  // 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;
-    }
-  }
-
-  if (activeWallet && activeWallet.id === "inApp") {
-    const options = (activeWallet as Wallet<"inApp">).getConfig();
-
-    if (options && "smartAccount" in options && options.smartAccount) {
-      const smartOptions = options.smartAccount;
-      if ("sponsorGas" in smartOptions && smartOptions.sponsorGas === true) {
-        payModalEnabled = false;
-      }
-
-      if ("gasless" in smartOptions && smartOptions.gasless === true) {
-        payModalEnabled = false;
-      }
-    }
-  }
+  const showPayModal = (data: ShowModalData) => {
+    if (payModal === false) return;
+    setRootEl(
+      <TransactionModal
+        title={payModal?.metadata?.name || "Transaction"}
+        tx={data.tx}
+        onComplete={data.sendTx}
+        onClose={() => {
+          setRootEl(null);
+          data.rejectTx(
+            new Error("User rejected transaction by closing modal"),
+          );
+        }}
+        onTxSent={data.resolveTx}
+        client={data.tx.client}
+        localeId={payModal?.locale || "en_US"}
+        supportedTokens={payModal?.supportedTokens}
+        theme={payModal?.theme || "dark"}
+        payOptions={{
+          buyWithCrypto: payModal?.buyWithCrypto,
+          buyWithFiat: payModal?.buyWithFiat,
+          purchaseData: payModal?.purchaseData,
+          mode: "transaction",
+          transaction: data.tx,
+          metadata: payModal?.metadata,
+        }}
+      />,
+    );
+  };
 
-  const setRootEl = useContext(SetRootElementContext);
   return useSendTransactionCore({
     showPayModal:
-      !payModalEnabled || payModal === false
-        ? undefined
-        : (data) => {
-            const prefillBuy: PayUIOptions["prefillBuy"] =
-              data.currency && !isNativeTokenAddress(data.currency.address)
-                ? {
-                    chain: data.tx.chain,
-                    amount: toTokens(data.totalCostWei, data.currency.decimals),
-                    token: data.currency,
-                  }
-                : undefined;
-            setRootEl(
-              <TxModal
-                title={payModal?.metadata?.title || "Buy"}
-                tx={data.tx}
-                onComplete={data.sendTx}
-                onClose={() => {
-                  setRootEl(null);
-                  data.rejectTx(
-                    new Error("User rejected transaction by closing modal"),
-                  );
-                }}
-                onTxSent={data.resolveTx}
-                client={data.tx.client}
-                localeId={payModal?.locale || "en_US"}
-                supportedTokens={payModal?.supportedTokens}
-                theme={payModal?.theme || "dark"}
-                txCostWei={data.totalCostWei}
-                walletBalance={data.walletBalance}
-                payOptions={{
-                  buyWithCrypto: payModal?.buyWithCrypto,
-                  buyWithFiat: payModal?.buyWithFiat,
-                  purchaseData: payModal?.purchaseData,
-                  prefillBuy,
-                }}
-              />,
-            );
-          },
+      !payModalEnabled || payModal === false ? undefined : showPayModal,
     gasless: config.gasless,
     switchChain,
     wallet,
   });
 }
-
-type ModalProps = {
-  title: string;
-  onComplete: () => void;
-  onClose: () => void;
-  client: ThirdwebClient;
-  localeId: LocaleId;
-  supportedTokens?: SupportedTokens;
-  theme: Theme | "light" | "dark";
-  txCostWei: bigint;
-  walletBalance: GetWalletBalanceResult;
-  tx: PreparedTransaction;
-  payOptions: PayUIOptions;
-  onTxSent: (data: WaitForReceiptOptions) => void;
-};
-
-function TxModal(props: ModalProps) {
-  return (
-    <CustomThemeProvider theme={props.theme}>
-      <Modal
-        open={true}
-        size="compact"
-        setOpen={(_open) => {
-          if (!_open) {
-            props.onClose();
-          }
-        }}
-      >
-        <ModalContent {...props} />
-      </Modal>
-    </CustomThemeProvider>
-  );
-}
-
-function ModalContent(props: ModalProps) {
-  const localeQuery = useConnectLocale(props.localeId);
-  const [screen, setScreen] = useState<"buy" | "tx-history" | "execute-tx">(
-    "buy",
-  );
-
-  if (!localeQuery.data) {
-    return <LoadingScreen />;
-  }
-
-  if (screen === "execute-tx") {
-    return (
-      <ExecutingTxScreen
-        tx={props.tx}
-        closeModal={props.onClose}
-        onTxSent={props.onTxSent}
-      />
-    );
-  }
-
-  if (screen === "tx-history") {
-    return (
-      <PayTxHistoryScreen
-        title={props.title}
-        client={props.client}
-        onBack={() => {
-          setScreen("buy");
-        }}
-        onDone={() => {
-          setScreen("execute-tx");
-        }}
-        isBuyForTx={true}
-        isEmbed={false}
-      />
-    );
-  }
-
-  return (
-    <LazyBuyScreen
-      title={props.title}
-      isEmbed={false}
-      client={props.client}
-      onViewPendingTx={() => {
-        setScreen("tx-history");
-      }}
-      supportedTokens={props.supportedTokens}
-      connectLocale={localeQuery.data}
-      buyForTx={{
-        balance: props.walletBalance.value,
-        cost: props.txCostWei,
-        tx: props.tx,
-        tokenSymbol: props.walletBalance.symbol,
-        tokenDecimals: props.walletBalance.decimals,
-      }}
-      theme={typeof props.theme === "string" ? props.theme : props.theme.type}
-      payOptions={props.payOptions}
-      onDone={() => {
-        setScreen("execute-tx");
-      }}
-      connectOptions={undefined}
-      onBack={undefined}
-    />
-  );
-}
-
-function ExecutingTxScreen(props: {
-  tx: PreparedTransaction;
-  closeModal: () => void;
-  onTxSent: (data: WaitForReceiptOptions) => void;
-}) {
-  const sendTxCore = useSendTransaction({
-    payModal: false,
-  });
-  const [status, setStatus] = useState<"loading" | "failed" | "sent">(
-    "loading",
-  );
-
-  const sendTx = useCallback(async () => {
-    setStatus("loading");
-    try {
-      const txData = await sendTxCore.mutateAsync(props.tx);
-      props.onTxSent(txData);
-      setStatus("sent");
-    } catch (e) {
-      // Do not reject the transaction here, because the user may want to try again
-      // we only reject on modal close
-      console.error(e);
-      setStatus("failed");
-    }
-  }, [sendTxCore, props.tx, props.onTxSent]);
-
-  const done = useRef(false);
-  useEffect(() => {
-    if (done.current) {
-      return;
-    }
-
-    done.current = true;
-    sendTx();
-  }, [sendTx]);
-
-  return (
-    <Container p="lg">
-      <ModalHeader title="Transaction" />
-
-      <Spacer y="xxl" />
-      <Spacer y="xxl" />
-
-      <Container flex="row" center="x">
-        {status === "loading" && <Spinner size="3xl" color="accentText" />}
-        {status === "failed" && <AccentFailIcon size={iconSize["3xl"]} />}
-        {status === "sent" && (
-          <Container color="success" flex="row" center="both">
-            <CheckCircledIcon
-              width={iconSize["3xl"]}
-              height={iconSize["3xl"]}
-            />
-          </Container>
-        )}
-      </Container>
-      <Spacer y="lg" />
-
-      <Text color="primaryText" center size="lg">
-        {status === "loading" && "Sending transaction"}
-        {status === "failed" && "Transaction failed"}
-        {status === "sent" && "Transaction sent"}
-      </Text>
-      <Spacer y="sm" />
-      <Text color="danger" center size="sm">
-        {status === "failed" && sendTxCore.error
-          ? sendTxCore.error.message
-          : ""}
-      </Text>
-
-      <Spacer y="xxl" />
-      <Spacer y="xxl" />
-
-      {status === "failed" && (
-        <Button variant="accent" fullWidth onClick={sendTx}>
-          Try Again
-        </Button>
-      )}
-
-      {status === "sent" && (
-        <Button variant="accent" fullWidth onClick={props.closeModal}>
-          Done
-        </Button>
-      )}
-    </Container>
-  );
-}

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -816,13 +816,15 @@ function DetailsModal(props: {
         client={client}
         onBack={() => setScreen("main")}
         supportedTokens={props.supportedTokens}
-        onViewPendingTx={() => setScreen("transactions")}
         connectLocale={locale}
-        payOptions={props.detailsModal?.payOptions || {}}
+        payOptions={
+          props.detailsModal?.payOptions || {
+            mode: "fund_wallet",
+          }
+        }
         theme={typeof props.theme === "string" ? props.theme : props.theme.type}
         onDone={closeModal}
         connectOptions={undefined}
-        buyForTx={undefined}
       />
     );
   }
@@ -1246,7 +1248,7 @@ export type UseWalletDetailsModalOptions = {
    *
    * thirdweb Pay allows users to buy tokens using crypto or fiat currency.
    */
-  payOptions?: PayUIOptions;
+  payOptions?: Extract<PayUIOptions, { mode?: "fund_wallet" }>;
 
   /**
    * Display the balance of a token instead of the native token

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -210,7 +210,7 @@ const ConnectEmbedContent = (props: {
     welcomeScreen: undefined,
     wallets: props.wallets,
   });
-  const { setScreen, initialScreen } = screenSetup;
+  const { setScreen, initialScreen, screen } = screenSetup;
   const activeWallet = useActiveWallet();
   const siweAuth = useSiweAuth(activeWallet, props.auth);
   const activeAccount = useActiveAccount();
@@ -219,11 +219,17 @@ const ConnectEmbedContent = (props: {
 
   let content = null;
 
+  // if sign in is required but connect embed is showing the initial screen - change to sign in screen
   useEffect(() => {
-    if (siweAuth.requiresAuth && !siweAuth.isLoggedIn && activeAccount) {
+    if (
+      siweAuth.requiresAuth &&
+      !siweAuth.isLoggedIn &&
+      activeAccount &&
+      screen === initialScreen
+    ) {
       setScreen(reservedScreens.signIn);
     }
-  }, [siweAuth, setScreen, activeAccount]);
+  }, [siweAuth, setScreen, activeAccount, screen, initialScreen]);
 
   const modalSize = !canFitWideModal()
     ? "compact"

package/src/react/web/ui/ConnectWallet/TransactionsScreen.tsx

@@ -61,7 +61,7 @@ export function TransactionsScreen(props: {
         onBack={() => setSelectedTx(null)}
         onDone={() => setSelectedTx(null)}
         payer={payer}
-        isBuyForTx={false}
+        transactionMode={false}
         isEmbed={false}
       />
     );