thirdweb 5.48.4-nightly-3d60da3717effdc7311ef5b6054f52127b5780f8-20240830000409 → 5.50.0-nightly-6432e8dc6bdd0ed985fe0d76e47b36601bfa8be3-20240831000359

package/src/extensions/ens/resolve-l2-name.ts

@@ -0,0 +1,107 @@
+import type { Address } from "abitype";
+import { type Hex, encodePacked, keccak256, namehash } from "viem";
+import type { Chain } from "../../chains/types.js";
+import type { ThirdwebClient } from "../../client/client.js";
+import { getContract } from "../../contract/contract.js";
+import { withCache } from "../../utils/promise/withCache.js";
+import { name } from "./__generated__/L2Resolver/read/name.js";
+
+/**
+ * @extension ENS
+ */
+export type ResolveL2NameOptions = {
+  client: ThirdwebClient;
+  address: Address;
+  resolverAddress: string;
+  resolverChain: Chain;
+};
+
+/**
+ * Convert an address to a reverse node for ENS resolution
+ *
+ * @internal
+ */
+export const convertReverseNodeToBytes = (
+  address: Address,
+  chainId: number,
+) => {
+  const addressFormatted = address.toLocaleLowerCase() as Address;
+  const addressNode = keccak256(addressFormatted.substring(2) as Hex);
+  const cointype = (0x80000000 | chainId) >>> 0;
+
+  const chainCoinType = cointype.toString(16).toLocaleUpperCase();
+  const reverseNode = namehash(`${chainCoinType.toLocaleUpperCase()}.reverse`);
+
+  const addressReverseNode = keccak256(
+    encodePacked(["bytes32", "bytes32"], [reverseNode, addressNode]),
+  );
+  return addressReverseNode;
+};
+
+/**
+ * Resolves the L2 name for a specified address.
+ * @param options - The options for resolving an L2 ENS address.
+ * @example
+ * ```ts
+ * import { resolveL2Name } from "thirdweb/extensions/ens";
+ * const name = await resolveL2Name({
+ *    client,
+ *    address: "0x1234...",
+ *    resolverAddress: "0x...",
+ *    resolverChain: base,
+ * });
+ * ```
+ *
+ * Resolve a Basename.
+ * ```ts
+ * import { resolveL2Name, BASENAME_RESOLVER_ADDRESS } from "thirdweb/extensions/ens";
+ * import { base } from "thirdweb/chains";
+ * const name = await resolveL2Name({
+ *    client,
+ *    address: "0x1234...",
+ *    resolverAddress: BASENAME_RESOLVER_ADDRESS,
+ *    resolverChain: base,
+ * });
+ * ```
+ * @extension ENS
+ * @returns A promise that resolves to the Ethereum address.
+ */
+export async function resolveL2Name(options: ResolveL2NameOptions) {
+  const { client, address, resolverAddress, resolverChain } = options;
+
+  return withCache(
+    async () => {
+      const contract = getContract({
+        client,
+        chain: resolverChain,
+        address: resolverAddress,
+      });
+
+      const reverseName = convertReverseNodeToBytes(
+        address,
+        resolverChain.id || 1,
+      );
+
+      const resolvedName = await name({
+        contract,
+        node: reverseName,
+      }).catch((e) => {
+        if ("data" in e && e.data === "0x7199966d") {
+          return null;
+        }
+        throw e;
+      });
+
+      if (resolvedName === "") {
+        return null;
+      }
+
+      return resolvedName;
+    },
+    {
+      cacheKey: `ens:name:${resolverChain}:${address}`,
+      // 1min cache
+      cacheTime: 60 * 1000,
+    },
+  );
+}

package/src/extensions/ens/resolve-name.ts

@@ -65,7 +65,7 @@ export async function resolveName(options: ResolveNameOptions) {
       return name;
     },
     {
-      cacheKey: `ens:name:${address}`,
+      cacheKey: `ens:name:${resolverChain?.id || 1}:${address}`,
       // 1min cache
       cacheTime: 60 * 1000,
     },

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

@@ -185,12 +185,22 @@ function BuyScreenContent(props: BuyScreenContentProps) {
       return undefined;
     }
 
+    const supportedSources = supportedSourcesQuery.data;
+    if (supportedSources[0]?.chain) {
+      setFromChain(supportedSources[0]?.chain);
+    }
+
     return createSupportedTokens(
-      supportedSourcesQuery.data,
+      supportedSources,
       payOptions,
       props.supportedTokens,
     );
-  }, [props.supportedTokens, supportedSourcesQuery.data, payOptions]);
+  }, [
+    props.supportedTokens,
+    supportedSourcesQuery.data,
+    payOptions,
+    setFromChain,
+  ]);
 
   const enabledPaymentMethods = useEnabledPaymentMethods({
     payOptions: props.payOptions,

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/react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.tsx

@@ -4,7 +4,8 @@ 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 { getApprovalForTransaction } from "../../../../../../extensions/erc20/write/getApprovalForTransaction.js";
+import { isERC721 } from "../../../../../../extensions/erc721/read/isERC721.js";
+import { isERC1155 } from "../../../../../../extensions/erc1155/read/isERC1155.js";
 import {
   type CreateListingParams,
   createListing,
@@ -74,12 +75,13 @@ export function CreateDirectListingButton(
   });
   const account = useActiveAccount();
   const defaultPayModalMetadata = payModal ? payModal.metadata : undefined;
+  const nftContract = getContract({
+    address: assetContractAddress,
+    chain,
+    client,
+  });
   const { data: payMetadata } = useReadContract(getPayMetadata, {
-    contract: getContract({
-      address: assetContractAddress,
-      chain,
-      client,
-    }),
+    contract: nftContract,
     tokenId,
     queryOptions: {
       enabled: !defaultPayModalMetadata,
@@ -91,19 +93,78 @@ export function CreateDirectListingButton(
     if (!account) {
       throw new Error("No account detected");
     }
+    const [is721, is1155] = await Promise.all([
+      isERC721({ contract: nftContract }),
+      isERC1155({ contract: nftContract }),
+    ]);
+    if (!is1155 && !is721) {
+      throw new Error("Asset must either be ERC721 or ERC1155");
+    }
+    // Check for token approval
+    if (is1155) {
+      const [{ isApprovedForAll }, { setApprovalForAll }] = await Promise.all([
+        import(
+          "../../../../../../extensions/erc1155/__generated__/IERC1155/read/isApprovedForAll.js"
+        ),
+        import(
+          "../../../../../../extensions/erc1155/__generated__/IERC1155/write/setApprovalForAll.js"
+        ),
+      ]);
+      const isApproved = await isApprovedForAll({
+        contract: nftContract,
+        operator: marketplaceContract.address,
+        owner: account.address,
+      });
+      if (!isApproved) {
+        const transaction = setApprovalForAll({
+          contract: nftContract,
+          operator: marketplaceContract.address,
+          approved: true,
+        });
+        await mutateAsync(transaction);
+      }
+    } else {
+      const [{ isApprovedForAll }, { setApprovalForAll }, { getApproved }] =
+        await Promise.all([
+          import(
+            "../../../../../../extensions/erc721/__generated__/IERC721A/read/isApprovedForAll.js"
+          ),
+          import(
+            "../../../../../../extensions/erc721/__generated__/IERC721A/write/setApprovalForAll.js"
+          ),
+          import(
+            "../../../../../../extensions/erc721/__generated__/IERC721A/read/getApproved.js"
+          ),
+        ]);
+      const [isApproved, tokenApproved] = await Promise.all([
+        isApprovedForAll({
+          contract: nftContract,
+          operator: marketplaceContract.address,
+          owner: account.address,
+        }),
+        getApproved({ contract: nftContract, tokenId: props.tokenId }),
+      ]);
+
+      if (
+        !isApproved &&
+        tokenApproved.toLowerCase() !==
+          marketplaceContract.address.toLowerCase()
+      ) {
+        const transaction = setApprovalForAll({
+          contract: nftContract,
+          operator: marketplaceContract.address,
+          approved: true,
+        });
+        await mutateAsync(transaction);
+      }
+    }
     const listingTx = createListing({
       contract: marketplaceContract,
       ...props,
     });
-    const approveTx = await getApprovalForTransaction({
-      transaction: listingTx,
-      account,
-    });
-    if (approveTx) {
-      await mutateAsync(approveTx);
-    }
+
     return listingTx;
-  }, [marketplaceContract, props, account, mutateAsync]);
+  }, [marketplaceContract, props, account, mutateAsync, nftContract]);
 
   return (
     <TransactionButton
@@ -128,14 +189,10 @@ async function getPayMetadata(
   }>,
 ): Promise<{ name?: string; image?: string }> {
   const [
-    { isERC721 },
-    { isERC1155 },
     { getContractMetadata },
     { getNFT: getERC721 },
     { getNFT: getERC1155 },
   ] = await Promise.all([
-    import("../../../../../../extensions/erc721/read/isERC721.js"),
-    import("../../../../../../extensions/erc1155/read/isERC1155.js"),
     import("../../../../../../extensions/common/read/getContractMetadata.js"),
     import("../../../../../../extensions/erc721/read/getNFT.js"),
     import("../../../../../../extensions/erc1155/read/getNFT.js"),

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.4-nightly-3d60da3717effdc7311ef5b6054f52127b5780f8-20240830000409";
+export const version = "5.50.0-nightly-6432e8dc6bdd0ed985fe0d76e47b36601bfa8be3-20240831000359";