thirdweb 5.69.0 → 5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332

package/dist/types/react/web/ui/prebuilt/NFT/NFT.d.ts

@@ -1,76 +0,0 @@
-import type { ThirdwebContract } from "../../../../../contract/contract.js";
-import type { NFT as NFTType } from "../../../../../utils/nft/parseNft.js";
-import type { MediaRendererProps } from "../../MediaRenderer/types.js";
-/**
- * Props for the <NFT> component
- * @component
- */
-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 declare const NFTProviderContext: import("react").Context<NFTProviderProps | 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 declare function NFT(props: React.PropsWithChildren<NFTProviderProps>): import("react/jsx-runtime.js").JSX.Element;
-export declare namespace NFT {
-    var Media: (props: NFTMediaProps) => import("react/jsx-runtime.js").JSX.Element;
-    var Name: (props: {
-        className?: string;
-        style?: React.CSSProperties;
-    }) => import("react/jsx-runtime.js").JSX.Element;
-    var Description: (props: {
-        className: string;
-        style: React.CSSProperties;
-    }) => import("react/jsx-runtime.js").JSX.Element;
-}
-/**
- * @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">;
-/**
- * @internal
- */
-export declare function getNFTInfo(options: NFTProviderProps): Promise<NFTType>;
-export {};
-//# sourceMappingURL=NFT.d.ts.map

package/dist/types/react/web/ui/prebuilt/NFT/NFT.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NFT.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/NFT.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAG5E,OAAO,KAAK,EAAE,GAAG,IAAI,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAE3E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAEvE;;;GAGG;AACH,KAAK,gBAAgB,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,gBAAgB,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,uDAEnB,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,8CAMnE;yBANe,GAAG;uBAoEC,aAAa;sBAsDd;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;KAAE;6BA4C5C;QACxB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B;;AApJD;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,kBAAkB,EAClB,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAC5B,CAAC;AAyJF;;GAEG;AACH,wBAAsB,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,OAAO,CAAC,CAsB5E"}

package/src/extensions/prebuilts/deploy-published.test.ts

@@ -1,132 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  ANVIL_CHAIN,
-  FORKED_ETHEREUM_CHAIN_WITH_MINING,
-} from "../../../test/src/chains.js";
-import { TEST_CLIENT } from "../../../test/src/test-clients.js";
-import { TEST_ACCOUNT_A } from "../../../test/src/test-wallets.js";
-import { isContractDeployed } from "../../utils/bytecode/is-contract-deployed.js";
-import { ENTRYPOINT_ADDRESS_v0_6 } from "../../wallets/smart/lib/constants.js";
-import { deployPublishedContract } from "./deploy-published.js";
-
-describe.runIf(process.env.TW_SECRET_KEY)(
-  "deployPublished",
-  {
-    timeout: 120000,
-  },
-  () => {
-    it("should deploy a published direct deploy contract", async () => {
-      const address = await deployPublishedContract({
-        client: TEST_CLIENT,
-        chain: ANVIL_CHAIN,
-        account: TEST_ACCOUNT_A,
-        contractId: "AccountFactory",
-        contractParams: {
-          defaultAdmin: TEST_ACCOUNT_A.address,
-          entrypoint: ENTRYPOINT_ADDRESS_v0_6,
-        },
-      });
-      expect(address).toBeDefined();
-      expect(address.length).toBe(42);
-    });
-
-    it("should deploy a published autofactory contract", async () => {
-      const address = await deployPublishedContract({
-        client: TEST_CLIENT,
-        chain: ANVIL_CHAIN,
-        account: TEST_ACCOUNT_A,
-        contractId: "Airdrop",
-        contractParams: {
-          defaultAdmin: TEST_ACCOUNT_A.address,
-          contractURI: "",
-        },
-      });
-      expect(address).toBeDefined();
-      expect(address.length).toBe(42);
-    });
-
-    it("should deploy a published autofactory contract deterministically", async () => {
-      const address = await deployPublishedContract({
-        client: TEST_CLIENT,
-        chain: ANVIL_CHAIN,
-        account: TEST_ACCOUNT_A,
-        contractId: "Airdrop",
-        contractParams: {
-          defaultAdmin: TEST_ACCOUNT_A.address,
-          contractURI: "",
-        },
-        salt: "test",
-      });
-      expect(address).toBe("0x9A18AD1DdCfA00009C2db7dc78a5746d85feF759");
-      const isDeployed = await isContractDeployed({
-        client: TEST_CLIENT,
-        chain: ANVIL_CHAIN,
-        address,
-      });
-      expect(isDeployed).toBe(true);
-
-      // deploy on forked ethereum
-      const ethAddress = await deployPublishedContract({
-        client: TEST_CLIENT,
-        chain: FORKED_ETHEREUM_CHAIN_WITH_MINING,
-        account: TEST_ACCOUNT_A,
-        contractId: "Airdrop",
-        contractParams: {
-          defaultAdmin: TEST_ACCOUNT_A.address,
-          contractURI: "",
-        },
-        salt: "test",
-      });
-      // ensure they are the same address!
-      expect(address).toBe(ethAddress);
-    });
-
-    // TODO: Replace these tests' live contracts with mocks
-    it("should deploy a published contract with no constructor", async () => {
-      const address = await deployPublishedContract({
-        client: TEST_CLIENT,
-        chain: ANVIL_CHAIN,
-        account: TEST_ACCOUNT_A,
-        contractId: "Counter",
-        publisher: "0x4a706de5CE9bfe2f9C37BA945805e396d1810824",
-      });
-      expect(address).toBeDefined();
-      expect(address.length).toBe(42);
-    });
-
-    it("should deploy a published contract with no deploy type", async () => {
-      const address = await deployPublishedContract({
-        client: TEST_CLIENT,
-        chain: ANVIL_CHAIN,
-        account: TEST_ACCOUNT_A,
-        contractId: "MyToken",
-        publisher: "0xc77e556cd96235A7B72d46EAAf13405d698CB2C0",
-      });
-      expect(address).toBeDefined();
-      expect(address.length).toBe(42);
-    });
-
-    it("should deploy a published contract with no fuzzy params", async () => {
-      const address = await deployPublishedContract({
-        client: TEST_CLIENT,
-        chain: ANVIL_CHAIN,
-        account: TEST_ACCOUNT_A,
-        contractId: "DropERC1155",
-        contractParams: {
-          defaultAdmin: TEST_ACCOUNT_A.address, // defaultAdmin
-          name: "test", // name
-          symbol: "test", // symbol
-          contractURI: "", // contractURI
-          trustedForwarders: [], // trustedForwarders
-          saleRecipient: TEST_ACCOUNT_A.address, // saleRecipient
-          royaltyRecipient: TEST_ACCOUNT_A.address, // royaltyRecipient
-          royaltyBps: 0n, // royaltyBps
-          platformFeeBps: 0n, // platformFeeBps
-          platformFeeRecipient: TEST_ACCOUNT_A.address, // platformFeeRecipient
-        },
-      });
-      expect(address).toBeDefined();
-      expect(address.length).toBe(42);
-    });
-  },
-);

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

@@ -1,272 +0,0 @@
-"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
- */
-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;
-}