thirdweb 5.69.0 → 5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332

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

@@ -177,6 +177,7 @@ import { useSetupScreen } from "./screen.js";
  *
  * @returns A JSX element that renders the <ConnectEmbed> component.
  * @component
+ * @walletConnection
  */
 export function ConnectEmbed(props: ConnectEmbedProps) {
   const activeWallet = useActiveWallet();

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

@@ -24,6 +24,7 @@ import { useBuyWithFiatQuote } from "../../../../../core/hooks/pay/useBuyWithFia
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
 import { invalidateWalletBalance } from "../../../../../core/providers/invalidateWalletBalance.js";
 import type { SupportedTokens } from "../../../../../core/utils/defaultTokens.js";
+import { ErrorState } from "../../../../wallets/shared/ErrorState.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
 import { ChainName } from "../../../components/ChainName.js";
@@ -105,6 +106,24 @@ export default function BuyScreen(props: BuyScreenProps) {
     isTestMode,
   );
 
+  if (supportedDestinationsQuery.isError) {
+    return (
+      <Container
+        style={{
+          minHeight: "350px",
+        }}
+        fullHeight
+        flex="row"
+        center="both"
+      >
+        <ErrorState
+          title="Something went wrong"
+          onTryAgain={supportedDestinationsQuery.refetch}
+        />
+      </Container>
+    );
+  }
+
   if (!supportedDestinationsQuery.data) {
     return <LoadingScreen />;
   }
@@ -137,9 +156,11 @@ type BuyScreenContentProps = {
  */
 function BuyScreenContent(props: BuyScreenContentProps) {
   const { client, supportedDestinations, connectLocale, payOptions } = props;
+  console.log("BuyScreenContent");
 
   const activeAccount = useActiveAccount();
   const { payer, setPayer } = usePayerSetup();
+  console.log("payer", payer);
 
   const [screen, setScreen] = useState<SelectedScreen>({
     id: "main",
@@ -477,6 +498,8 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     );
   }
 
+  console.log("SCREEN", screen.id);
+
   return (
     <Container animate="fadein">
       <div>

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

@@ -13,6 +13,7 @@ import { useWalletBalance } from "../../../../../core/hooks/others/useWalletBala
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
 import { hasSponsoredTransactionsEnabled } from "../../../../../core/utils/wallet.js";
+import { ErrorState } from "../../../../wallets/shared/ErrorState.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
 import { ChainIcon } from "../../../components/ChainIcon.js";
@@ -54,9 +55,19 @@ export function TransactionModeScreen(props: {
     supportedDestinations,
     onContinue,
   } = props;
-  const { data: chainData } = useChainMetadata(payUiOptions.transaction.chain);
+  const {
+    data: chainData,
+    error: chainDataError,
+    isLoading: chainDataLoading,
+    refetch: chainDataRefetch,
+  } = useChainMetadata(payUiOptions.transaction.chain);
   const metadata = payUiOptions.metadata;
-  const { data: transactionCostAndData } = useTransactionCostAndData({
+  const {
+    data: transactionCostAndData,
+    error: transactionCostAndDataError,
+    isLoading: transactionCostAndDataLoading,
+    refetch: transactionCostAndDataRefetch,
+  } = useTransactionCostAndData({
     transaction: payUiOptions.transaction,
     account: payerAccount,
     supportedDestinations,
@@ -80,6 +91,36 @@ export function TransactionModeScreen(props: {
     },
   );
 
+  if (transactionCostAndDataLoading || chainDataLoading) {
+    return <LoadingScreen />;
+  }
+
+  if (transactionCostAndDataError || chainDataError) {
+    return (
+      <Container
+        style={{
+          minHeight: "350px",
+        }}
+        fullHeight
+        flex="row"
+        center="both"
+      >
+        <ErrorState
+          title={
+            transactionCostAndDataError?.message ||
+            chainDataError?.message ||
+            "Something went wrong"
+          }
+          onTryAgain={
+            transactionCostAndDataError
+              ? transactionCostAndDataRefetch
+              : chainDataRefetch
+          }
+        />
+      </Container>
+    );
+  }
+
   if (!transactionCostAndData || !chainData) {
     return <LoadingScreen />;
   }

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

@@ -58,7 +58,7 @@ export function useTransactionCostAndData(args: {
     ],
     queryFn: async () => {
       if (!account) {
-        throw new Error("No account");
+        throw new Error("No payer account found");
       }
 
       const erc20Value = await resolvePromisedValue(transaction.erc20Value);
@@ -112,7 +112,6 @@ export function useTransactionCostAndData(args: {
           getChainMetadata(transaction.chain),
           getTransactionGasCost(transaction, account?.address),
         ]);
-
       const walletBalance = nativeWalletBalance;
       const transactionValueWei =
         (await resolvePromisedValue(transaction.value)) || 0n;
@@ -129,7 +128,7 @@ export function useTransactionCostAndData(args: {
         transactionValueWei,
       } satisfies TransactionCostAndData;
     },
-    enabled: !!transaction && !!account && !!txQueryKey,
+    enabled: !!transaction && !!txQueryKey,
     refetchInterval: () => {
       if (transaction.erc20Value) {
         // if erc20 value is set, we don't need to poll

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

@@ -29,8 +29,7 @@ import type { LocaleId } from "./types.js";
  */
 export type PayEmbedProps = {
   /**
-   * Override the default tokens shown in PayEmbed uI
-   * @component
+   * Override the default tokens shown in PayEmbed UI
    * By default, PayEmbed shows a few popular tokens for Pay supported chains
    * @example
    *
@@ -157,6 +156,7 @@ export type PayEmbedProps = {
  *   }}
  *  />
  * ```
+ * @buyCrypto
  */
 export function PayEmbed(props: PayEmbedProps) {
   const localeQuery = useConnectLocale(props.locale || "en_US");

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

@@ -11,9 +11,9 @@ import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
 /**
  * Embeds another thirdweb-supported site for seamless in-app and ecosystem wallet connection.
  *
- * @note Make sure the embedded site includes <AutoConnect /> and supports frame ancestors, see [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) for more information.
+ *  Make sure the embedded site includes <AutoConnect /> and supports frame ancestors, see [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) for more information.
  *
- * @note The embedded site must support the connected wallet (ecosystem or in-app).
+ *  The embedded site must support the connected wallet (ecosystem or in-app).
  *
  * @param {Object} props - The props to pass to the iframe
  * @param {String} props.src - The URL of the site to embed
@@ -26,6 +26,7 @@ import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
  *
  * <SiteEmbed src="https://thirdweb.com" client={thirdwebClient} ecosystem={{ id: "ecosystem.thirdweb" }} />
  * ```
+ * @walletConnection
  */
 export function SiteEmbed({
   src,

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

@@ -11,7 +11,7 @@ import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
 /**
  * Creates a link to another thirdweb-supported site with wallet connection parameters.
  *
- * @note The target site must support the connected wallet (ecosystem or in-app).
+ *  The target site must support the connected wallet (ecosystem or in-app).
  *
  * @param {Object} props - The props to pass to the anchor tag
  * @param {String} props.href - The URL of the site to link to
@@ -27,6 +27,7 @@ import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
  *   Visit Site
  * </SiteLink>
  * ```
+ * @walletConnection
  */
 export function SiteLink({
   href,

package/src/react/web/ui/TransactionButton/index.tsx

@@ -129,6 +129,7 @@ import { Button } from "../components/buttons.js";
  * </TransactionButton>
  * ```
  * @component
+ * @transaction
  */
 export function TransactionButton(props: TransactionButtonProps) {
   const {

package/src/react/web/ui/prebuilt/Account/address.test.tsx

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { shortenAddress } from "../../../../../utils/address.js";
+import { AccountAddress } from "./address.js";
+import { AccountProvider } from "./provider.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)("AccountAddress component", () => {
+  it("should format the address properly", () => {
+    render(
+      <AccountProvider
+        address="0x12345674b599ce99958242b3D3741e7b01841DF3"
+        client={TEST_CLIENT}
+      >
+        <AccountAddress formatFn={shortenAddress} />
+      </AccountProvider>,
+    );
+
+    waitFor(() =>
+      expect(
+        screen.getByText("0x1234...1DF3", {
+          exact: true,
+          selector: "span",
+        }),
+      ).toBeInTheDocument(),
+    );
+  });
+});

package/src/react/web/ui/prebuilt/Account/address.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useAccountContext } from "./provider.js";
+
+/**
+ * @component
+ * @account
+ */
+export interface AccountAddressProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  /**
+   * The function used to transform (format) the wallet address
+   * Specifically useful for shortening the wallet.
+   *
+   * This function should take in a string and output a string
+   */
+  formatFn?: (str: string) => string;
+}
+
+/**
+ *
+ * @returns a <span> containing the full wallet address of the account
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountAddress } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x12345674b599ce99958242b3D3741e7b01841DF3" client={TW_CLIENT}>
+ *   <AccountAddress />
+ * </AccountProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>0x12345674b599ce99958242b3D3741e7b01841DF3</span>
+ * ```
+ *
+ *
+ * ### Shorten the address
+ * ```tsx
+ * import { AccountProvider, AccountAddress } from "thirdweb/react";
+ * import { shortenAddress } from "thirdweb/utils";
+ *
+ * <AccountProvider address="0x12345674b599ce99958242b3D3741e7b01841DF3" client={TW_CLIENT}>
+ *   <AccountAddress formatFn={shortenAddress} />
+ * </AccountProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>0x1234...1DF3</span>
+ * ```
+ *
+ * @component
+ * @account
+ * @beta
+ */
+export function AccountAddress({
+  formatFn,
+  ...restProps
+}: AccountAddressProps) {
+  const { address } = useAccountContext();
+  const value = formatFn ? formatFn(address) : address;
+  return <span {...restProps}>{value}</span>;
+}

package/src/react/web/ui/prebuilt/Account/avatar.test.tsx

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
+import { AccountAvatar } from "./avatar.js";
+import { AccountProvider } from "./provider.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)("AccountAvatar component", () => {
+  it("should render an image", () => {
+    render(
+      <AccountProvider
+        address={"0x12345674b599ce99958242b3D3741e7b01841DF3"}
+        client={TEST_CLIENT}
+      >
+        <AccountAvatar />
+      </AccountProvider>,
+    );
+
+    waitFor(() => expect(screen.getByRole("img")).toBeInTheDocument());
+  });
+
+  it("should fallback properly if failed to load", () => {
+    render(
+      <AccountProvider address={TEST_ACCOUNT_A.address} client={TEST_CLIENT}>
+        <AccountAvatar fallbackComponent={<span>oops</span>} />
+      </AccountProvider>,
+    );
+
+    waitFor(() =>
+      expect(
+        screen.getByText("oops", {
+          exact: true,
+          selector: "span",
+        }),
+      ).toBeInTheDocument(),
+    );
+  });
+
+  it("should NOT render anything if fail to resolve avatar", () => {
+    render(
+      <AccountProvider address={"invalid-wallet-address"} client={TEST_CLIENT}>
+        <AccountAvatar />
+      </AccountProvider>,
+    );
+
+    waitFor(() => expect(screen.getByRole("img")).not.toBeInTheDocument());
+  });
+});

package/src/react/web/ui/prebuilt/Account/avatar.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import type React from "react";
+import type { JSX } from "react";
+import { resolveAvatar } from "../../../../../extensions/ens/resolve-avatar.js";
+import {
+  type ResolveNameOptions,
+  resolveName,
+} from "../../../../../extensions/ens/resolve-name.js";
+import { getSocialProfiles } from "../../../../../social/profiles.js";
+import type { SocialProfile } from "../../../../../social/types.js";
+import { parseAvatarRecord } from "../../../../../utils/ens/avatar.js";
+import { useAccountContext } from "./provider.js";
+
+/**
+ * Props for the AccountAvatar component
+ * @component
+ * @account
+ */
+export interface AccountAvatarProps
+  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src">,
+    Omit<ResolveNameOptions, "client" | "address"> {
+  /**
+   * Use this prop to prioritize the social profile that you want to display
+   * This is useful for a wallet containing multiple social profiles.
+   * This component inherits all attributes of a HTML's <img />, so you can interact with it just like a normal <img />
+   *
+   * @example
+   * If you have ENS, Lens and Farcaster profiles linked to your wallet
+   * you can prioritize showing the image for Lens by:
+   * ```tsx
+   * <AccountAvatar
+   *   socialType="lens" // Choose between: "farcaster" | "lens" | "ens"
+   * />
+   * ```
+   */
+  socialType?: SocialProfile["type"];
+
+  /**
+   * This component will be shown while the avatar of the account is being fetched
+   * If not passed, the component will return `null`.
+   *
+   * You can pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <AccountAvatar loadingComponent={<Spinner />} />
+   * ```
+   */
+  loadingComponent?: JSX.Element;
+  /**
+   * This component will be shown if the request for fetching the avatar is done
+   * but could not retreive any result.
+   * You can pass a dummy avatar/image to this prop.
+   *
+   * If not passed, the component will return `null`
+   *
+   * @example
+   * ```tsx
+   * <AccountAvatar fallbackComponent={<DummyImage />} />
+   * ```
+   */
+  fallbackComponent?: JSX.Element;
+
+  /**
+   * Optional query options for `useQuery`
+   */
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}
+
+/**
+ * The component for showing the avatar of the account.
+ * If fetches all the social profiles linked to your wallet, including: Farcaster, ENS, Lens (more to be added)
+ * You can choose which social profile you want to display. Defaults to the first item in the list.
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar />
+ * </AccountProvider>
+ * ```
+ * Result: An <img /> component, if the avatar is resolved successfully
+ * ```html
+ * <img alt="" src="resolved-url-for-the-avatar" />
+ * ```
+ *
+ * ### Show a loading sign when the avatar is being resolved
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     loadingComponent={<YourLoadingComponent />}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Fallback to something when the avatar fails to resolve
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     fallbackComponent={<DummyImage />}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Select a social profile to display
+ * If you wallet associates with more than one social profiles (Lens, Farcaster, ENS, etc.)
+ * You can specify which service you want to prioritize using the `socialType` props
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     // Choose between: "farcaster" | "lens" | "ens"
+ *     socialType={"ens"}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Custom ENS resolver chain
+ * This component shares the same props with the ENS extension `resolveAvatar`
+ * ```tsx
+ * import { AccountProvider, AccountAvatar } from "thirdweb/react";
+ * import { base } from "thirdweb/chains";
+ *
+ * <AccountProvider address="0x...">
+ *   <AccountAvatar
+ *     resolverAddress={"0x..."}
+ *     resolverChain={base}
+ *   />
+ * </AccountProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery
+ * This component uses `@tanstack-query`'s useQuery internally.
+ * You can use the `queryOptions` prop for more fine-grained control
+ * ```tsx
+ * <AccountAvatar
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 3,
+ *   }}
+ * />
+ * ```
+ * @returns An <img /> if the avatar is resolved successfully
+ * @component
+ * @account
+ * @beta
+ */
+export function AccountAvatar({
+  socialType,
+  resolverAddress,
+  resolverChain,
+  loadingComponent,
+  fallbackComponent,
+  queryOptions,
+  ...restProps
+}: AccountAvatarProps) {
+  const { address, client } = useAccountContext();
+  const avatarQuery = useQuery({
+    queryKey: ["account-avatar", address],
+    queryFn: async (): Promise<string> => {
+      const [socialData, ensName] = await Promise.all([
+        getSocialProfiles({ address, client }),
+        resolveName({
+          client,
+          address: address || "",
+          resolverAddress,
+          resolverChain,
+        }),
+      ]);
+
+      const uri = socialData?.filter(
+        (p) => p.avatar && (socialType ? p.type === socialType : true),
+      )[0]?.avatar;
+
+      const [resolvedSocialAvatar, resolvedENSAvatar] = await Promise.all([
+        uri ? parseAvatarRecord({ client, uri }) : undefined,
+        ensName
+          ? resolveAvatar({
+              client,
+              name: ensName,
+            })
+          : undefined,
+      ]);
+
+      // If no social image + ens name found -> exit and show <Blobbie />
+      if (!resolvedSocialAvatar && !resolvedENSAvatar) {
+        throw new Error("Failed to resolve social + ens avatar");
+      }
+
+      // else, prioritize the social image first
+      if (resolvedSocialAvatar) {
+        return resolvedSocialAvatar;
+      }
+
+      if (resolvedENSAvatar) {
+        return resolvedENSAvatar;
+      }
+
+      throw new Error("Failed to resolve social + ens avatar");
+    },
+    ...queryOptions,
+  });
+
+  if (avatarQuery.isLoading) {
+    return loadingComponent || null;
+  }
+
+  if (!avatarQuery.data) {
+    return fallbackComponent || null;
+  }
+
+  return <img src={avatarQuery.data} {...restProps} alt={restProps.alt} />;
+}

package/src/react/web/ui/prebuilt/Account/balance.test.tsx

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { ANVIL_CHAIN } from "~test/chains.js";
+import { render, screen, waitFor } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
+import { getWalletBalance } from "../../../../../wallets/utils/getWalletBalance.js";
+import { AccountBalance } from "./balance.js";
+import { AccountProvider } from "./provider.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)("AccountBalance component", () => {
+  it("format the balance properly", async () => {
+    const roundTo1Decimal = (num: number): number => Math.round(num * 10) / 10;
+    const balance = await getWalletBalance({
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+      address: TEST_ACCOUNT_A.address,
+    });
+
+    render(
+      <AccountProvider address={TEST_ACCOUNT_A.address} client={TEST_CLIENT}>
+        <AccountBalance chain={ANVIL_CHAIN} formatFn={roundTo1Decimal} />
+      </AccountProvider>,
+    );
+
+    waitFor(() =>
+      expect(
+        screen.getByText(roundTo1Decimal(Number(balance.displayValue)), {
+          exact: true,
+          selector: "span",
+        }),
+      ).toBeInTheDocument(),
+    );
+  });
+
+  it("should fallback properly if failed to load", () => {
+    render(
+      <AccountProvider address={TEST_ACCOUNT_A.address} client={TEST_CLIENT}>
+        <AccountBalance
+          chain={undefined}
+          fallbackComponent={<span>oops</span>}
+        />
+      </AccountProvider>,
+    );
+
+    waitFor(() =>
+      expect(
+        screen.getByText("oops", {
+          exact: true,
+          selector: "span",
+        }),
+      ).toBeInTheDocument(),
+    );
+  });
+});