thirdweb 5.41.0 → 5.42.0

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

@@ -33,18 +33,212 @@ import { SignatureScreen } from "./screens/SignatureScreen.js";
 const TW_CONNECT_WALLET = "tw-connect-wallet";
 
 /**
- * A component that allows the user to connect their wallet.
- * It renders a button which when clicked opens a modal to allow users to connect to wallets specified in `wallets` prop.
+ * A fully featured wallet connection component that allows to:
+ *
+ * - Connect to 350+ external wallets
+ * - Connect with email, phone, passkey or socials
+ * - Convert any wallet to a ERC4337 smart wallet for gasless transactions
+ * - Sign in with ethereum (Auth)
+ *
+ * Once connected, the component allows to:
+ *
+ * - Reolve ENS names and avatars
+ * - Manage multipple connected wallets
+ * - Send and receive native tokens and ERC20 tokens
+ * - View ERC20 tokens and NFTs
+ * - Onramp, bridge and swap tokens
+ * - Switch chains
+ * - Connect to another app with WalletConnect
+ *
  * @example
+ *
+ * ## Default setup
+ *
  * ```tsx
+ * import { createThirdwebClient } from "thirdweb";
+ * import { ConnectButton } from "thirdweb/react";
+ *
+ * const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
+ *
  * <ConnectButton
  *    client={client}
  * />
  * ```
+ *
+ * [View all available config options](https://portal.thirdweb.com/references/typescript/v5/ConnectButtonProps)
+ *
+ * ## Customization options
+ *
+ * ### Customizing wallet options
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    wallets={[
+ *      createWallet("io.metamask"),
+ *      createWallet("com.coinbase.wallet"),
+ *      createWallet("me.rainbow"),
+ *    ]}
+ * />
+ * ```
+ *
+ * [View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets)
+ *
+ * ### Customizing the default chain to connect to
+ *
+ * ```tsx
+ * import { base } from "thirdweb/chains";
+ *
+ * <ConnectButton
+ *   client={client}
+ *   chain={base}
+ * />
+ * ```
+ *
+ * ### Enabling sign in with ethereum (Auth)
+ *
+ * ```tsx
+ * <ConnectButton
+ * client={client}
+ * auth={{
+ *   isLoggedIn: async (address) => {
+ *     console.log("checking if logged in!", { address });
+ *     return await isLoggedIn();
+ *   },
+ *   doLogin: async (params) => {
+ *     console.log("logging in!");
+ *     await login(params);
+ *   },
+ *   getLoginPayload: async ({ address }) =>
+ *     generatePayload({ address }),
+ *   doLogout: async () => {
+ *     console.log("logging out!");
+ *     await logout();
+ *   },
+ * }}
+ * />;
+ * ```
+ *
+ * ### Customizing the theme
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    theme="light"
+ * />
+ * ```
+ *
+ * For more granular control, you can also pass a custom theme object:
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    theme={lightTheme({
+ *      colors: {
+ *        modalBg: "red",
+ *      },
+ *    })}
+ * />
+ * ```
+ *
+ * [View all available themes properties](https://portal.thirdweb.com/references/typescript/v5/Theme)
+ *
+ * ### Changing the display language
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    client={client}
+ *    locale="ja_JP"
+ * />
+ * ```
+ *
+ * [View all available locales](https://portal.thirdweb.com/references/typescript/v5/LocaleId)
+ *
+ * ### Customizing the connect button UI
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    connectButton={{
+ *      label: "Sign in to MyApp",
+ *    }}
+ * />
+ * ```
+ *
+ * ### Customizing the modal UI
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    connectModal={{
+ *      title: "Sign in to MyApp",
+ *      titleIcon: https://example.com/logo.png,
+ *      size: "compact",
+ *    }}
+ * />
+ * ```
+ *
+ * ### Customizing details button UI (after connecting)
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    detailsButton={{
+ *      displayBalanceToken: {
+ *        [sepolia.id]: "0x...", // token address to display balance for
+ *        [ethereum.id]: "0x...", // token address to display balance for
+ *      },
+ *    }}
+ * />
+ * ```
+ *
+ * [View all available auth helper functions](https://portal.thirdweb.com/references/typescript/v5/createAuth)
+ *
+ * ### Customizing the Auth sign in button (after connecting, but before authenticating)
+ *
+ * ```tsx
+ * <ConnectButton
+ *   client={client}
+ *   auth={{ ... }}
+ *   signInButton: {
+ *     label: "Authenticate with MyApp",
+ *   },
+ * }}
+ * />;
+ * ```
+ *
+ * ### Customizing supported Tokens and NFTs
+ *
+ * These tokens and NFTs will be shown in the modal when the user clicks "View Assets", as well as the send token screen.
+ *
+ * ```tsx
+ * <ConnectButton
+ *   client={client}
+ *   supportedTokens={{
+ *     [ethereum.id]: [
+ *       {
+ *         address: "0x...",
+ *         name: "MyToken",
+ *         symbol: "MT",
+ *         icon: "https://example.com/icon.png",
+ *       },
+ *     ],
+ *   }}
+ *   supportedNFTs={{
+ *     [ethereum.id]: [
+ *       "0x...", // nft contract address
+ *     ],
+ *   }}
+ * />
+ * ```
+ *
  * @param props
  * Props for the `ConnectButton` component
  *
  * Refer to [ConnectButtonProps](https://portal.thirdweb.com/references/typescript/v5/ConnectButtonProps) to see the available props.
+ *
+ * @returns A JSX element that renders the <ConnectButton> component.
+ *
  * @component
  */
 export function ConnectButton(props: ConnectButtonProps) {

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

@@ -40,21 +40,127 @@ import { ConnectModalContent } from "./ConnectModalContent.js";
 import { useSetupScreen } from "./screen.js";
 
 /**
- * A component that allows the user to connect their wallet.
+ * An inline wallet connection component that allows to:
  *
- * it renders the same UI as the [`ConnectButton`](https://portal.thirdweb.com/react/v4/components/ConnectButton) component's modal - but directly on the page instead of being in a modal.
+ * - Connect to 350+ external wallets
+ * - Connect with email, phone, passkey or socials
+ * - Convert any wallet to a ERC4337 smart wallet for gasless transactions
+ * - Sign in with ethereum (Auth)
+ *
+ * It renders the same UI as the [`ConnectButton`](https://portal.thirdweb.com/react/v5/ConnectButton) component's modal - but directly inline in the page instead of being in a modal.
+ *
+ * Once connected, the component does not render any UI. It only renders UI if wallet is not connected.
  *
- * It only renders UI if wallet is not connected
  * @example
+ *
+ * ## Default setup
+ *
  * ```tsx
+ * import { createThirdwebClient } from "thirdweb";
+ * import { ConnectEmbed } from "thirdweb/react";
+ *
+ * const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
+ *
  * <ConnectEmbed
  *    client={client}
  * />
  * ```
+ *
+ * [View all available config options](https://portal.thirdweb.com/references/typescript/v5/ConnectEmbedProps)
+ *
+ *  ## Customization options
+ *
+ * ### Customizing wallet options
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    client={client}
+ *    wallets={[
+ *      createWallet("io.metamask"),
+ *      createWallet("com.coinbase.wallet"),
+ *      createWallet("me.rainbow"),
+ *    ]}
+ * />
+ * ```
+ *
+ * [View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets)
+ *
+ *  ### Customizing the default chain to connect to
+ *
+ * ```tsx
+ * import { base } from "thirdweb/chains";
+ *
+ * <ConnectEmbed
+ *   client={client}
+ *   chain={base}
+ * />
+ * ```
+ *
+ * ### Enabling sign in with ethereum (Auth)
+ *
+ * ```tsx
+ * <ConnectEmbed
+ * client={client}
+ * auth={{
+ *   isLoggedIn: async (address) => {
+ *     console.log("checking if logged in!", { address });
+ *     return await isLoggedIn();
+ *   },
+ *   doLogin: async (params) => {
+ *     console.log("logging in!");
+ *     await login(params);
+ *   },
+ *   getLoginPayload: async ({ address }) =>
+ *     generatePayload({ address }),
+ *   doLogout: async () => {
+ *     console.log("logging out!");
+ *     await logout();
+ *   },
+ * }}
+ * />;
+ * ```
+ *
+ * ### Customizing the theme
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    client={client}
+ *    theme="light"
+ * />
+ * ```
+ *
+ * For more granular control, you can also pass a custom theme object:
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    client={client}
+ *    theme={lightTheme({
+ *      colors: {
+ *        modalBg: "red",
+ *      },
+ *    })}
+ * />
+ * ```
+ *
+ * [View all available themes properties](https://portal.thirdweb.com/references/typescript/v5/Theme)
+ *
+ * ### Changing the display language
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    client={client}
+ *    locale="ja_JP"
+ * />
+ * ```
+ *
+ * [View all available locales](https://portal.thirdweb.com/references/typescript/v5/LocaleId)
+ *
  * @param props -
  * The props for the `ConnectEmbed` component.
  *
  * Refer to the [`ConnectEmbedProps`](https://portal.thirdweb.com/references/typescript/v5/ConnectEmbedProps) type for more details
+ *
+ * @returns A JSX element that renders the <ConnectEmbed> component.
  * @component
  */
 export function ConnectEmbed(props: ConnectEmbedProps) {

package/src/react/web/ui/ConnectWallet/screens/Buy/DirectPaymentModeScreen.tsx

@@ -11,7 +11,7 @@ import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
 import { iconSize, spacing } from "../../../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
-import { useChainQuery } from "../../../../../core/hooks/others/useChainQuery.js";
+import { useChainMetadata } from "../../../../../core/hooks/others/useChainQuery.js";
 import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
 import type { TokenInfo } from "../../../../../core/utils/defaultTokens.js";
 import { useEnsName } from "../../../../../core/utils/wallet.js";
@@ -52,7 +52,7 @@ export function DirectPaymentModeScreen(props: {
   const activeWallet = useActiveWallet();
   const metadata = payUiOptions.metadata;
   const paymentInfo = payUiOptions.paymentInfo;
-  const { data: chainData } = useChainQuery(paymentInfo.chain);
+  const { data: chainData } = useChainMetadata(paymentInfo.chain);
   const { data: sellerEns } = useEnsName({
     client,
     address: paymentInfo.sellerAddress,

package/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx

@@ -7,7 +7,7 @@ import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
 import { iconSize, spacing } from "../../../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
-import { useChainQuery } from "../../../../../core/hooks/others/useChainQuery.js";
+import { useChainMetadata } from "../../../../../core/hooks/others/useChainQuery.js";
 import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
 import { hasSponsoredTransactionsEnabled } from "../../../../../core/utils/wallet.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
@@ -44,7 +44,7 @@ export function TransactionModeScreen(props: {
     supportedDestinations,
     onContinue,
   } = props;
-  const { data: chainData } = useChainQuery(payUiOptions.transaction.chain);
+  const { data: chainData } = useChainMetadata(payUiOptions.transaction.chain);
   const metadata = payUiOptions.metadata;
   const { data: transactionCostAndData } = useTransactionCostAndData({
     transaction: payUiOptions.transaction,

package/src/react/web/ui/PayEmbed.tsx

@@ -29,7 +29,7 @@ import type { LocaleId } from "./types.js";
 export type PayEmbedProps = {
   /**
    * Override the default tokens shown in PayEmbed uI
-   *
+   * @component
    * By default, PayEmbed shows a few popular tokens for Pay supported chains
    * @example
    *

package/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/BuyDirectListingButton.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { sepolia } from "../../../../../../chains/chain-definitions/sepolia.js";
+import { BuyDirectListingButton } from "./index.js";
+
+const client = TEST_CLIENT;
+
+// marketplace v3 on sepolia
+const marketplaceAddress = "0xe0eFD6fb388405b67b3E9FaFc02649c70E749f03";
+
+describe.runIf(process.env.TW_SECRET_KEY)("BuyDirectListingButton", () => {
+  it("should render", () => {
+    render(
+      <BuyDirectListingButton
+        client={client}
+        chain={sepolia}
+        contractAddress={marketplaceAddress}
+        listingId={1n}
+      >
+        Buy NFT
+      </BuyDirectListingButton>,
+    );
+    expect(screen.queryByText("Buy NFT")).toBeInTheDocument();
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+});

package/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { useCallback } from "react";
+import type { Chain } from "../../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../../client/client.js";
+import { getContract } from "../../../../../../contract/contract.js";
+import { getListing } from "../../../../../../extensions/marketplace/direct-listings/read/getListing.js";
+import type { BaseTransactionOptions } from "../../../../../../transaction/types.js";
+import { useReadContract } from "../../../../../core/hooks/contract/useReadContract.js";
+import type { TransactionButtonProps } from "../../../../../core/hooks/transaction/transaction-button-utils.js";
+import { useSendAndConfirmTransaction } from "../../../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
+import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
+import { TransactionButton } from "../../../TransactionButton/index.js";
+
+export type BuyDirectListingButtonProps = Omit<
+  TransactionButtonProps,
+  "transaction"
+> & {
+  /**
+   * The contract address of the Marketplace v3 contract.
+   */
+  contractAddress: string;
+
+  /**
+   * The chain which the Drop contract is deployed on
+   */
+  chain: Chain;
+
+  /**
+   * thirdweb Client
+   */
+  client: ThirdwebClient;
+
+  /**
+   * ID of the marketplace's DirectListing
+   */
+  listingId: bigint;
+
+  /**
+   * Qty to buy (optional)
+   *
+   * - For ERC721 listing: the `quantity` is always hard-coded to 1n - passing this props doesn't do anything
+   *
+   * - For ERC1155 listing: the `quantity` defaults to the quantity of the listing if not specified.
+   *
+   * The component will also throw an error if  you pass a `quantity` and it's greater than the listing's quantity
+   */
+  quantity?: bigint;
+};
+
+/**
+ * This button is used with thirdweb Marketplace v3 contract, for buying NFT(s) from a listing.
+ *
+ * Under the hood, it prepares a transaction using the [`buyFromListing` extension](https://portal.thirdweb.com/references/typescript/v5/marketplace/buyFromListing)
+ * and then pass it to a <TransactionButton />
+ *
+ * Since it uses the TransactionButton, it can take in any props that can be passed
+ * to the [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton)
+ *
+ *
+ * @param props
+ * @returns <TransactionButton />
+ *
+ * @example
+ * ```tsx
+ * import { BuyDirectListingButton } from "thirdweb/react";
+ *
+ * <BuyDirectListingButton
+ *   contractAddress="0x..." // contract address of the marketplace v3
+ *   chain={...} // the chain which the marketplace contract is deployed on
+ *   client={...} // thirdweb client
+ *   listingId={100n} // the listingId or the item you want to buy
+ *   quantity={1n} // optional - see the docs to learn more
+ * >
+ *   Buy NFT
+ * </BuyDirectListingButton>
+ * ```
+ *
+ * @component
+ */
+export function BuyDirectListingButton(props: BuyDirectListingButtonProps) {
+  const {
+    contractAddress,
+    listingId,
+    children,
+    chain,
+    client,
+    quantity,
+    payModal,
+  } = props;
+  const defaultPayModalMetadata = payModal ? payModal.metadata : undefined;
+  const account = useActiveAccount();
+  const contract = getContract({
+    address: contractAddress,
+    client,
+    chain,
+  });
+
+  const { data: payMetadata } = useReadContract(getPayMetadata, {
+    contract,
+    listingId,
+    queryOptions: {
+      enabled: !defaultPayModalMetadata,
+    },
+  });
+
+  const { mutateAsync } = useSendAndConfirmTransaction();
+
+  const prepareBuyTransaction = useCallback(async () => {
+    if (!account) {
+      throw new Error("No account detected");
+    }
+    const [listing, { getApprovalForTransaction }, { buyFromListing }] =
+      await Promise.all([
+        getListing({
+          contract,
+          listingId,
+        }),
+        import(
+          "../../../../../../extensions/erc20/write/getApprovalForTransaction.js"
+        ),
+        import(
+          "../../../../../../extensions/marketplace/direct-listings/write/buyFromListing.js"
+        ),
+      ]);
+    if (!listing) {
+      throw new Error(`Could not retrieve listing with ID: ${listingId}`);
+    }
+
+    let _quantity = 1n;
+    // For ERC721 the quantity should always be 1n. We throw an error if user passes a different props
+    if (listing.asset.type === "ERC721") {
+      if (typeof quantity === "bigint" && (quantity !== 1n || quantity < 0n)) {
+        throw new Error(
+          "Invalid quantity. This is an ERC721 listing & quantity is always `1n`",
+        );
+      }
+    } else if (listing.asset.type === "ERC1155") {
+      if (typeof quantity === "bigint") {
+        if (quantity > listing.quantity) {
+          throw new Error(
+            `quantity exceeds available amount. Available: ${listing.quantity.toString()}`,
+          );
+        }
+        if (quantity < 0n) {
+          throw new Error("Invalid quantity. Should be at least 1n");
+        }
+        _quantity = quantity;
+      }
+      _quantity = listing.quantity;
+    }
+
+    const buyTx = buyFromListing({
+      contract,
+      listingId,
+      quantity: _quantity,
+      recipient: account?.address || "",
+    });
+
+    const approveTx = await getApprovalForTransaction({
+      transaction: buyTx,
+      account,
+    });
+
+    if (approveTx) {
+      await mutateAsync(approveTx);
+    }
+
+    return buyTx;
+  }, [account, contract, quantity, listingId, mutateAsync]);
+
+  return (
+    <TransactionButton
+      payModal={{
+        metadata: defaultPayModalMetadata || payMetadata,
+        ...payModal,
+      }}
+      transaction={() => prepareBuyTransaction()}
+      {...props}
+    >
+      {children}
+    </TransactionButton>
+  );
+}
+
+/**
+ * @internal
+ */
+async function getPayMetadata(
+  options: BaseTransactionOptions<{ listingId: bigint }>,
+): Promise<{ name?: string; image?: string }> {
+  const listing = await getListing(options);
+  if (!listing) {
+    return { name: undefined, image: undefined };
+  }
+  return {
+    name: listing.asset?.metadata?.name,
+    image: listing.asset?.metadata?.image,
+  };
+}