thirdweb 5.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343 → 5.40.0

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/TransactionsScreen.tsx

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