thirdweb 5.69.1-nightly-f368793375d099eec53569330af7a083e558e483-20241120000334 → 5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332

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;
-}

package/src/wallets/smart/smart-wallet-integration-v07.test.ts

@@ -1,270 +0,0 @@
-import { beforeAll, describe, expect, it } from "vitest";
-import { TEST_CLIENT } from "../../../test/src/test-clients.js";
-import { typedData } from "../../../test/src/typed-data.js";
-import { verifySignature } from "../../auth/verify-signature.js";
-import { type ThirdwebContract, getContract } from "../../contract/contract.js";
-import { parseEventLogs } from "../../event/actions/parse-logs.js";
-
-import { sepolia } from "../../chains/chain-definitions/sepolia.js";
-import {
-  addAdmin,
-  adminUpdatedEvent,
-} from "../../exports/extensions/erc4337.js";
-import { balanceOf } from "../../extensions/erc1155/__generated__/IERC1155/read/balanceOf.js";
-import { claimTo } from "../../extensions/erc1155/drops/write/claimTo.js";
-import { checkContractWalletSignature } from "../../extensions/erc1271/checkContractWalletSignature.js";
-import { setContractURI } from "../../extensions/marketplace/__generated__/IMarketplace/write/setContractURI.js";
-import { estimateGasCost } from "../../transaction/actions/estimate-gas-cost.js";
-import { sendAndConfirmTransaction } from "../../transaction/actions/send-and-confirm-transaction.js";
-import { sendBatchTransaction } from "../../transaction/actions/send-batch-transaction.js";
-import { waitForReceipt } from "../../transaction/actions/wait-for-tx-receipt.js";
-import { getAddress } from "../../utils/address.js";
-import { isContractDeployed } from "../../utils/bytecode/is-contract-deployed.js";
-import { sleep } from "../../utils/sleep.js";
-import type { Account, Wallet } from "../interfaces/wallet.js";
-import { generateAccount } from "../utils/generateAccount.js";
-import { predictSmartAccountAddress } from "./lib/calls.js";
-import { DEFAULT_ACCOUNT_FACTORY_V0_7 } from "./lib/constants.js";
-import { smartWallet } from "./smart-wallet.js";
-
-let wallet: Wallet;
-let smartAccount: Account;
-let smartWalletAddress: string;
-let personalAccount: Account;
-let accountContract: ThirdwebContract;
-
-const chain = sepolia;
-const client = TEST_CLIENT;
-const contract = getContract({
-  client,
-  chain,
-  address: "0xe2cb0eb5147b42095c2FfA6F7ec953bb0bE347D8",
-});
-
-describe.runIf(process.env.TW_SECRET_KEY).skip(
-  "SmartWallet 0.7 core tests",
-  {
-    retry: 0,
-    timeout: 240_000,
-  },
-  () => {
-    beforeAll(async () => {
-      personalAccount = await generateAccount({
-        client,
-      });
-      wallet = smartWallet({
-        chain,
-        gasless: true,
-        factoryAddress: DEFAULT_ACCOUNT_FACTORY_V0_7,
-      });
-      smartAccount = await wallet.connect({
-        client: TEST_CLIENT,
-        personalAccount,
-      });
-      smartWalletAddress = smartAccount.address;
-      accountContract = getContract({
-        address: smartWalletAddress,
-        chain,
-        client,
-      });
-    });
-
-    it("can connect", async () => {
-      expect(smartWalletAddress).toHaveLength(42);
-      const predictedAddress = await predictSmartAccountAddress({
-        client,
-        chain,
-        adminAddress: personalAccount.address,
-        factoryAddress: DEFAULT_ACCOUNT_FACTORY_V0_7,
-      });
-      expect(predictedAddress).toEqual(smartWalletAddress);
-    });
-
-    it("should revert on unsuccessful transactions", async () => {
-      const tx = sendAndConfirmTransaction({
-        transaction: setContractURI({
-          contract,
-          uri: "https://example.com",
-        }),
-        account: smartAccount,
-      });
-
-      await expect(tx).rejects.toMatchInlineSnapshot(`
-        [TransactionError: Error - Not authorized
-
-        contract: ${contract.address}
-        chainId: 11155111]
-      `);
-    });
-
-    it("can execute a tx", async () => {
-      const tx = await sendAndConfirmTransaction({
-        transaction: claimTo({
-          contract,
-          quantity: 1n,
-          to: smartWalletAddress,
-          tokenId: 0n,
-        }),
-        account: smartAccount,
-      });
-      expect(tx.transactionHash).toHaveLength(66);
-      const isDeployed = await isContractDeployed(accountContract);
-      expect(isDeployed).toEqual(true);
-      const balance = await balanceOf({
-        contract,
-        owner: getAddress(smartWalletAddress),
-        tokenId: 0n,
-      });
-      expect(balance).toEqual(1n);
-    });
-
-    it("can estimate a tx", async () => {
-      const estimates = await estimateGasCost({
-        transaction: claimTo({
-          contract,
-          quantity: 1n,
-          to: smartWalletAddress,
-          tokenId: 0n,
-        }),
-        account: smartAccount,
-      });
-      expect(estimates.wei.toString()).not.toBe("0");
-    });
-
-    it("can execute a batched tx", async () => {
-      const tx = await sendBatchTransaction({
-        account: smartAccount,
-        transactions: [
-          claimTo({
-            contract,
-            quantity: 1n,
-            to: smartWalletAddress,
-            tokenId: 0n,
-          }),
-          claimTo({
-            contract,
-            quantity: 1n,
-            to: smartWalletAddress,
-            tokenId: 0n,
-          }),
-        ],
-      });
-      expect(tx.transactionHash).toHaveLength(66);
-      const result = await waitForReceipt({
-        client,
-        transactionHash: tx.transactionHash,
-        chain,
-      });
-      expect(result.status).toEqual("success");
-    });
-
-    it("can sign and verify 1271 with replay protection", async () => {
-      const message = "hello world";
-      const signature = await smartAccount.signMessage({ message });
-      const isValidV1 = await verifySignature({
-        message,
-        signature,
-        address: smartWalletAddress,
-        chain,
-        client,
-      });
-      expect(isValidV1).toEqual(true);
-      const isValidV2 = await checkContractWalletSignature({
-        message,
-        signature,
-        contract: accountContract,
-      });
-      expect(isValidV2).toEqual(true);
-
-      // sign typed data
-      const signatureTyped = await smartAccount.signTypedData({
-        ...typedData.basic,
-        primaryType: "Mail",
-      });
-      expect(signatureTyped.length).toBe(132);
-
-      // add admin
-      const newAdmin = await generateAccount({ client });
-      const receipt = await sendAndConfirmTransaction({
-        account: smartAccount,
-        transaction: addAdmin({
-          account: smartAccount,
-          adminAddress: newAdmin.address,
-          contract: getContract({
-            address: smartAccount.address,
-            chain,
-            client,
-          }),
-        }),
-      });
-      const logs = parseEventLogs({
-        events: [adminUpdatedEvent()],
-        logs: receipt.logs,
-      });
-      expect(logs.some((l) => l.args.signer === newAdmin.address)).toBe(true);
-      expect(logs.some((l) => l.args.isAdmin)).toBe(true);
-    });
-
-    it("can execute a 2 tx in parallel", async () => {
-      const newSmartWallet = smartWallet({
-        chain,
-        gasless: true,
-        overrides: {
-          accountSalt: "test",
-        },
-      });
-      const newSmartAccount = await newSmartWallet.connect({
-        client: TEST_CLIENT,
-        personalAccount,
-      });
-      const newSmartAccountContract = getContract({
-        address: newSmartAccount.address,
-        chain,
-        client,
-      });
-      let isDeployed = await isContractDeployed(newSmartAccountContract);
-      expect(isDeployed).toEqual(false);
-
-      // sending transactions in parallel should deploy the account and not cause errors
-      const txs = await Promise.all([
-        sendAndConfirmTransaction({
-          transaction: claimTo({
-            contract,
-            quantity: 1n,
-            to: newSmartAccount.address,
-            tokenId: 0n,
-          }),
-          account: newSmartAccount,
-        }),
-        sleep(1000).then(() =>
-          sendAndConfirmTransaction({
-            transaction: claimTo({
-              contract,
-              quantity: 1n,
-              to: newSmartAccount.address,
-              tokenId: 0n,
-            }),
-            account: newSmartAccount,
-          }),
-        ),
-      ]);
-      expect(txs.length).toEqual(2);
-      expect(txs.every((t) => t.transactionHash.length === 66)).toBe(true);
-      const result1 = await waitForReceipt({
-        client,
-        transactionHash: txs[0].transactionHash,
-        chain,
-      });
-      expect(result1.status).toEqual("success");
-      const result2 = await waitForReceipt({
-        client,
-        transactionHash: txs[1].transactionHash,
-        chain,
-      });
-      expect(result2.status).toEqual("success");
-
-      isDeployed = await isContractDeployed(newSmartAccountContract);
-      expect(isDeployed).toEqual(true);
-    });
-  },
-);