thirdweb 5.48.3 → 5.49.0

package/src/react/web/ui/prebuilt/NFT/NFT.test.tsx

@@ -0,0 +1,111 @@
+import { useContext } from "react";
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "~test/react-render.js";
+import { DOODLES_CONTRACT } from "~test/test-contracts.js";
+import { NFT, NFTProviderContext, getNFTInfo } from "./NFT.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)("NFT prebuilt component", () => {
+  it("should fetch the NFT metadata", async () => {
+    const nft = await getNFTInfo({
+      contract: DOODLES_CONTRACT,
+      tokenId: 1n,
+    });
+    expect(nft.metadata).toStrictEqual({
+      attributes: [
+        {
+          trait_type: "face",
+          value: "holographic beard",
+        },
+        {
+          trait_type: "hair",
+          value: "white bucket cap",
+        },
+        {
+          trait_type: "body",
+          value: "purple sweater with satchel",
+        },
+        {
+          trait_type: "background",
+          value: "grey",
+        },
+        {
+          trait_type: "head",
+          value: "gradient 2",
+        },
+      ],
+      description:
+        "A community-driven collectibles project featuring art by Burnt Toast. Doodles come in a joyful range of colors, traits and sizes with a collection size of 10,000. Each Doodle allows its owner to vote for experiences and activations paid for by the Doodles Community Treasury. Burnt Toast is the working alias for Scott Martin, a Canadian–based illustrator, designer, animator and muralist.",
+      image: "ipfs://QmTDxnzcvj2p3xBrKcGv1wxoyhAn2yzCQnZZ9LmFjReuH9",
+      name: "Doodle #1",
+    });
+  });
+
+  it("should render children correctly", () => {
+    render(
+      <NFT contract={DOODLES_CONTRACT} tokenId={0n}>
+        <div>Child Component</div>
+      </NFT>,
+    );
+
+    expect(screen.getByText("Child Component")).toBeInTheDocument();
+  });
+
+  it("should provide context values to children", () => {
+    function NFTConsumer() {
+      const context = useContext(NFTProviderContext);
+      if (!context) {
+        return <div>No context</div>;
+      }
+      return (
+        <div>
+          Contract: {String(context.contract)}, Token ID:{" "}
+          {context.tokenId.toString()}
+        </div>
+      );
+    }
+    render(
+      <NFT contract={DOODLES_CONTRACT} tokenId={0n}>
+        <NFTConsumer />
+      </NFT>,
+    );
+
+    expect(screen.getByText(/Contract:/)).toBeInTheDocument();
+    expect(screen.getByText(/Token ID: 0/)).toBeInTheDocument();
+  });
+
+  it("should render the NFT image", () => {
+    render(
+      <NFT contract={DOODLES_CONTRACT} tokenId={0n}>
+        <NFT.Media />
+      </NFT>,
+    );
+
+    waitFor(() => expect(screen.getByRole("img")).toBeInTheDocument());
+  });
+
+  it("should render the NFT name", () => {
+    render(
+      <NFT contract={DOODLES_CONTRACT} tokenId={1n}>
+        <NFT.Name />
+      </NFT>,
+    );
+
+    waitFor(() => expect(screen.getByText("Doodle #1")).toBeInTheDocument());
+  });
+
+  it("should render the NFT description", () => {
+    render(
+      <NFT contract={DOODLES_CONTRACT} tokenId={1n}>
+        <NFT.Name />
+      </NFT>,
+    );
+
+    waitFor(() =>
+      expect(
+        screen.getByText(
+          "A community-driven collectibles project featuring art by Burnt Toast",
+        ),
+      ).toBeInTheDocument(),
+    );
+  });
+});

package/src/react/web/ui/prebuilt/NFT/NFT.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { createContext, useContext } from "react";
+import type { ThirdwebContract } from "../../../../../contract/contract.js";
+import { getNFT as getNFT721 } from "../../../../../extensions/erc721/read/getNFT.js";
+import { getNFT as getNFT1155 } from "../../../../../extensions/erc1155/read/getNFT.js";
+import type { NFT as NFTType } from "../../../../../utils/nft/parseNft.js";
+import { MediaRenderer } from "../../MediaRenderer/MediaRenderer.js";
+import type { MediaRendererProps } from "../../MediaRenderer/types.js";
+
+/**
+ * Props for the <NFT> component
+ * @component
+ */
+export type NFTProviderProps = {
+  /**
+   * The NFT contract address. Accepts both ERC721 and ERC1155 contracts
+   */
+  contract: ThirdwebContract;
+  /**
+   * The tokenId whose info you want to display
+   */
+  tokenId: bigint;
+};
+
+/**
+ * @internal
+ */
+export const NFTProviderContext = /* @__PURE__ */ createContext<
+  NFTProviderProps | undefined
+>(undefined);
+
+/**
+ * A React context provider component that supplies NFT-related data to its child components.
+ *
+ * This component serves as a wrapper around the `NFTProviderContext.Provider` and passes
+ * the provided NFT data down to all of its child components through the context API.
+ *
+ *
+ * @component
+ * @param {React.PropsWithChildren<NFTProviderProps>} props - The props for the NFT provider
+ *
+ * @example
+ * ```tsx
+ * import { getContract } from "thirdweb";
+ * import { NFT } from "thirdweb/react";
+ *
+ * const contract = getContract({
+ *   address: "0x...",
+ *   chain: ethereum,
+ *   client: yourThirdwebClient,
+ * });
+ *
+ * <NFT contract={contract} tokenId={0n}>
+ *   <Suspense fallback={"Loading media..."}>
+ *     <NFT.Media />
+ *     <NFT.Description />
+ *   </Suspense>
+ * </NFT>
+ * ```
+ */
+export function NFT(props: React.PropsWithChildren<NFTProviderProps>) {
+  return (
+    <NFTProviderContext.Provider value={props}>
+      {props.children}
+    </NFTProviderContext.Provider>
+  );
+}
+
+/**
+ * @internal
+ */
+function useNFTContext() {
+  const ctx = useContext(NFTProviderContext);
+  if (!ctx) {
+    throw new Error(
+      "NFTProviderContext not found. Make sure you are using NFT.Media, NFT.Description, etc. inside a <NFT /> component",
+    );
+  }
+  return ctx;
+}
+
+/**
+ * @component
+ * The props for the <NFT.Media /> component
+ * It is similar to the [`MediaRendererProps`](https://portal.thirdweb.com/references/typescript/v5/MediaRendererProps)
+ * (excluding `src`, `poster` and `client`) that you can
+ * use to style the NFT.Media
+ */
+export type NFTMediaProps = Omit<
+  MediaRendererProps,
+  "src" | "poster" | "client"
+>;
+
+/**
+ * This component fetches and displays an NFT's media. It uses thirdweb [`MediaRenderer`](https://portal.thirdweb.com/react/v5/components/MediaRenderer) under the hood
+ * so you can style it just like how you would style a MediaRenderer.
+ * @returns A MediaRenderer component
+ *
+ * Since this component has an internal loading state (for when the NFT media is being fetched),
+ * you must wrap it with React.Suspense to make it work.
+ *
+ * @component
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { getContract } from "thirdweb";
+ * import { NFT } from "thirdweb/react";
+ *
+ * const nftContract = getContract({
+ *   address: "0x...",
+ *   chain: ethereum,
+ *   client: yourThirdwebClient,
+ * });
+ *
+ * <NFT contract={nftContract} tokenId={0n}>
+ *   This will show the media for tokenId #0 from the `nftContract` collection
+ *   <Suspense fallback={"Loading media..."}>
+ *     <NFT.Media />
+ *   </Suspense>
+ * </NFT>
+ * ```
+ *
+ * ### Basic stylings
+ * You can style NFT.Media with the `style` and `className` props.
+ * ```tsx
+ * <NFT.Media style={{ borderRadius: "8px" }} className="mx-auto" />
+ * ```
+ */
+NFT.Media = (props: NFTMediaProps) => {
+  const { contract, tokenId } = useNFTContext();
+  const nftQuery = useSuspenseQuery({
+    queryKey: [
+      "__nft_info_internal__",
+      contract.chain.id,
+      contract.address,
+      tokenId.toString(),
+    ],
+    queryFn: () => getNFTInfo({ contract, tokenId }),
+  });
+  const animation_url = nftQuery.data?.metadata.animation_url;
+  const image =
+    nftQuery.data?.metadata.image || nftQuery.data?.metadata.image_url;
+
+  return (
+    <MediaRenderer
+      client={contract.client}
+      src={animation_url || image}
+      poster={image}
+      {...props}
+    />
+  );
+};
+
+/**
+ * This component fetches and displays an NFT's name. It takes in a `className` and `style` props
+ * so you can style it just like how you would style a <span> element.
+ * @returns A <span> element containing the name of the NFT
+ *
+ * Since this component has an internal loading state (for when the NFT media is being fetched),
+ * you must wrap it with React.Suspense to make it work.
+ *
+ * @component
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { getContract } from "thirdweb";
+ * import { NFT } from "thirdweb/react";
+ *
+ * const nftContract = getContract({
+ *   address: "0x...",
+ *   chain: ethereum,
+ *   client: yourThirdwebClient,
+ * });
+ *
+ * <NFT contract={nftContract} tokenId={0n}>
+ *   This will show the name for tokenId #0 from the `nftContract` collection
+ *   <Suspense fallback={"Loading nft name..."}>
+ *     <NFT.Name className="mx-auto" style={{ color: "red" }} />
+ *   </Suspense>
+ * </NFT>
+ * ```
+ */
+NFT.Name = (props: { className?: string; style?: React.CSSProperties }) => {
+  const { contract, tokenId } = useNFTContext();
+  const nftQuery = useSuspenseQuery({
+    queryKey: [
+      "__nft_info_internal__",
+      contract.chain.id,
+      contract.address,
+      tokenId.toString(),
+    ],
+    queryFn: () => getNFTInfo({ contract, tokenId }),
+  });
+  const name = nftQuery.data?.metadata.name || "";
+  return <span {...props}>{name}</span>;
+};
+
+/**
+ * This component fetches and displays an NFT's description. It takes in a `className` and `style` props
+ * so you can style it just like how you would style a <span> element.
+ * @returns A <span> element containing the description of the NFT
+ *
+ * Since this component has an internal loading state (for when the NFT media is being fetched),
+ * you must wrap it with React.Suspense to make it work.
+ *
+ * @component
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { getContract } from "thirdweb";
+ * import { NFT } from "thirdweb/react";
+ *
+ * const nftContract = getContract({
+ *   address: "0x...",
+ *   chain: ethereum,
+ *   client: yourThirdwebClient,
+ * });
+ *
+ * <NFT contract={nftContract} tokenId={0n}>
+ *   This will show the description for tokenId #0 from the `nftContract` collection
+ *   <Suspense fallback={"Loading description..."}>
+ *     <NFT.Description className="mx-auto" style={{ color: "red" }} />
+ *   </Suspense>
+ * </NFT>
+ * ```
+ */
+NFT.Description = (props: {
+  className: string;
+  style: React.CSSProperties;
+}) => {
+  const { contract, tokenId } = useNFTContext();
+  const nftQuery = useSuspenseQuery({
+    queryKey: [
+      "__nft_info_internal__",
+      contract.chain.id,
+      contract.address,
+      tokenId.toString(),
+    ],
+    queryFn: () => getNFTInfo({ contract, tokenId }),
+  });
+  const description = nftQuery.data?.metadata.description || "";
+  return <span {...props}>{description}</span>;
+};
+
+/**
+ * @internal
+ */
+export async function getNFTInfo(options: NFTProviderProps): Promise<NFTType> {
+  const nft = await Promise.allSettled([
+    getNFT721(options),
+    getNFT1155(options),
+  ]).then(([possibleNFT721, possibleNFT1155]) => {
+    // getNFT extension always return an NFT object
+    // so we need to check if the tokenURI exists
+    if (
+      possibleNFT721.status === "fulfilled" &&
+      possibleNFT721.value.tokenURI
+    ) {
+      return possibleNFT721.value;
+    }
+    if (
+      possibleNFT1155.status === "fulfilled" &&
+      possibleNFT1155.value.tokenURI
+    ) {
+      return possibleNFT1155.value;
+    }
+    throw new Error("Failed to load NFT metadata");
+  });
+  return nft;
+}

package/src/utils/abi/encodeAbiParameters.ts

@@ -158,7 +158,8 @@ function encodeParams(preparedParams: PreparedParam[]): Hex {
  * @internal Export for unit test
  */
 export function encodeAddress(value: Hex): PreparedParam {
-  if (!isAddress(value)) {
+  // We allow empty strings for deployment transactions where there is no to address
+  if ((value as string) !== "" && value !== undefined && !isAddress(value)) {
     throw new Error("Invalid address.");
   }
   return { dynamic: false, encoded: padHex(value.toLowerCase() as Hex) };

package/src/utils/nft/parseNft.ts

@@ -27,6 +27,7 @@ export type NFTMetadata = {
   background_color?: string;
   properties?: Record<string, unknown>;
   attributes?: Record<string, unknown>;
+  image_url?: string;
 } & Record<string, unknown>;
 
 export type NFT =

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.48.3";
+export const version = "5.49.0";

package/src/wallets/in-app/native/helpers/api/fetchers.ts

@@ -59,6 +59,7 @@ export const authFetchEmbeddedWalletUser = async (
   client: ThirdwebClient,
   url: string,
   props: Parameters<typeof fetch>[1],
+  retries = 3,
 ): Promise<Response> => {
   const authTokenClient = await getAuthTokenClient(client.clientId);
   const params = { ...props };
@@ -78,7 +79,22 @@ export const authFetchEmbeddedWalletUser = async (
         [PAPER_CLIENT_ID_HEADER]: client.clientId,
         ...getSessionHeaders(),
       };
-  return getClientFetch(client)(url, params);
+
+  try {
+    return await getClientFetch(client)(url, params);
+  } catch (e) {
+    if (retries > 0) {
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      return await authFetchEmbeddedWalletUser(
+        client,
+        url,
+        params,
+        retries - 1,
+      );
+    } else {
+      throw e;
+    }
+  }
 };
 
 export async function fetchUserDetails(args: {

package/src/wallets/in-app/web/lib/in-app-account.ts

@@ -223,6 +223,7 @@ export class IFrameWallet {
         nonce: tx.nonce,
         chainId: tx.chainId,
       };
+
       if (tx.maxFeePerGas) {
         // ethers (in the iframe) rejects any type 0 trasaction with unknown keys
         // TODO remove this once iframe is upgraded to v5