thirdweb 5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321 → 5.42.0-nightly-e27ebef85bb61342c3de53f85e134cf4a29f787c-20240730000342

package/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/index.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+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 { getListing } from "../../../../../../extensions/marketplace/direct-listings/read/getListing.js";
+import type { BaseTransactionOptions } from "../../../../../../transaction/types.js";
+import { useReadContract } from "../../../../../core/hooks/contract/useReadContract.js";
+import type { TransactionButtonProps } from "../../../../../core/hooks/transaction/transaction-button-utils.js";
+import { useSendAndConfirmTransaction } from "../../../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
+import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
+import { TransactionButton } from "../../../TransactionButton/index.js";
+
+export type BuyDirectListingButtonProps = Omit<
+  TransactionButtonProps,
+  "transaction"
+> & {
+  /**
+   * The contract address of the Marketplace v3 contract.
+   */
+  contractAddress: string;
+
+  /**
+   * The chain which the Drop contract is deployed on
+   */
+  chain: Chain;
+
+  /**
+   * thirdweb Client
+   */
+  client: ThirdwebClient;
+
+  /**
+   * ID of the marketplace's DirectListing
+   */
+  listingId: bigint;
+
+  /**
+   * Qty to buy (optional)
+   *
+   * - For ERC721 listing: the `quantity` is always hard-coded to 1n - passing this props doesn't do anything
+   *
+   * - For ERC1155 listing: the `quantity` defaults to the quantity of the listing if not specified.
+   *
+   * The component will also throw an error if  you pass a `quantity` and it's greater than the listing's quantity
+   */
+  quantity?: bigint;
+};
+
+/**
+ * This button is used with thirdweb Marketplace v3 contract, for buying NFT(s) from a listing.
+ *
+ * Under the hood, it prepares a transaction using the [`buyFromListing` extension](https://portal.thirdweb.com/references/typescript/v5/marketplace/buyFromListing)
+ * and then pass it to a <TransactionButton />
+ *
+ * Since it uses the TransactionButton, it can take in any props that can be passed
+ * to the [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton)
+ *
+ *
+ * @param props
+ * @returns <TransactionButton />
+ *
+ * @example
+ * ```tsx
+ * import { BuyDirectListingButton } from "thirdweb/react";
+ *
+ * <BuyDirectListingButton
+ *   contractAddress="0x..." // contract address of the marketplace v3
+ *   chain={...} // the chain which the marketplace contract is deployed on
+ *   client={...} // thirdweb client
+ *   listingId={100n} // the listingId or the item you want to buy
+ *   quantity={1n} // optional - see the docs to learn more
+ * >
+ *   Buy NFT
+ * </BuyDirectListingButton>
+ * ```
+ *
+ * @component
+ */
+export function BuyDirectListingButton(props: BuyDirectListingButtonProps) {
+  const {
+    contractAddress,
+    listingId,
+    children,
+    chain,
+    client,
+    quantity,
+    payModal,
+  } = props;
+  const defaultPayModalMetadata = payModal ? payModal.metadata : undefined;
+  const account = useActiveAccount();
+  const contract = getContract({
+    address: contractAddress,
+    client,
+    chain,
+  });
+
+  const { data: payMetadata } = useReadContract(getPayMetadata, {
+    contract,
+    listingId,
+    queryOptions: {
+      enabled: !defaultPayModalMetadata,
+    },
+  });
+
+  const { mutateAsync } = useSendAndConfirmTransaction();
+
+  const prepareBuyTransaction = useCallback(async () => {
+    if (!account) {
+      throw new Error("No account detected");
+    }
+    const [listing, { getApprovalForTransaction }, { buyFromListing }] =
+      await Promise.all([
+        getListing({
+          contract,
+          listingId,
+        }),
+        import(
+          "../../../../../../extensions/erc20/write/getApprovalForTransaction.js"
+        ),
+        import(
+          "../../../../../../extensions/marketplace/direct-listings/write/buyFromListing.js"
+        ),
+      ]);
+    if (!listing) {
+      throw new Error(`Could not retrieve listing with ID: ${listingId}`);
+    }
+
+    let _quantity = 1n;
+    // For ERC721 the quantity should always be 1n. We throw an error if user passes a different props
+    if (listing.asset.type === "ERC721") {
+      if (typeof quantity === "bigint" && (quantity !== 1n || quantity < 0n)) {
+        throw new Error(
+          "Invalid quantity. This is an ERC721 listing & quantity is always `1n`",
+        );
+      }
+    } else if (listing.asset.type === "ERC1155") {
+      if (typeof quantity === "bigint") {
+        if (quantity > listing.quantity) {
+          throw new Error(
+            `quantity exceeds available amount. Available: ${listing.quantity.toString()}`,
+          );
+        }
+        if (quantity < 0n) {
+          throw new Error("Invalid quantity. Should be at least 1n");
+        }
+        _quantity = quantity;
+      }
+      _quantity = listing.quantity;
+    }
+
+    const buyTx = buyFromListing({
+      contract,
+      listingId,
+      quantity: _quantity,
+      recipient: account?.address || "",
+    });
+
+    const approveTx = await getApprovalForTransaction({
+      transaction: buyTx,
+      account,
+    });
+
+    if (approveTx) {
+      await mutateAsync(approveTx);
+    }
+
+    return buyTx;
+  }, [account, contract, quantity, listingId, mutateAsync]);
+
+  return (
+    <TransactionButton
+      payModal={{
+        metadata: defaultPayModalMetadata || payMetadata,
+        ...payModal,
+      }}
+      transaction={() => prepareBuyTransaction()}
+      {...props}
+    >
+      {children}
+    </TransactionButton>
+  );
+}
+
+/**
+ * @internal
+ */
+async function getPayMetadata(
+  options: BaseTransactionOptions<{ listingId: bigint }>,
+): Promise<{ name?: string; image?: string }> {
+  const listing = await getListing(options);
+  if (!listing) {
+    return { name: undefined, image: undefined };
+  }
+  return {
+    name: listing.asset?.metadata?.name,
+    image: listing.asset?.metadata?.image,
+  };
+}

package/src/react/web/ui/prebuilt/thirdweb/ClaimButton/index.tsx

@@ -4,8 +4,13 @@ import {
   type ThirdwebContract,
   getContract,
 } from "../../../../../../contract/contract.js";
+import { getContractMetadata } from "../../../../../../extensions/common/read/getContractMetadata.js";
+import { getNFT } from "../../../../../../extensions/erc1155/read/getNFT.js";
 import type { PreparedTransaction } from "../../../../../../transaction/prepare-transaction.js";
+import type { BaseTransactionOptions } from "../../../../../../transaction/types.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
+import { useReadContract } from "../../../../../core/hooks/contract/useReadContract.js";
+import { useSendAndConfirmTransaction } from "../../../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
 import { TransactionButton } from "../../../TransactionButton/index.js";
 import type {
@@ -28,6 +33,7 @@ import type {
  * @param props
  * @returns A wrapper for TransactionButton
  *
+ * @component
  * @example
  *
  * ```tsx
@@ -77,22 +83,66 @@ import type {
  *   Claim now
  * </ClaimButton>
  *
+ * // Attach custom Pay metadata
+ * <ClaimButton
+ *   payModal={{
+ *     metadata: {
+ *       name: "Van Gogh Starry Night",
+ *       image: "https://unsplash.com/starry-night.png"
+ *     }
+ *   }}
+ * >...</ClaimButton>
+ *
  * ```
  */
 export function ClaimButton(props: ClaimButtonProps) {
-  const { children, contractAddress, client, chain, claimParams } = props;
+  const { children, contractAddress, client, chain, claimParams, payModal } =
+    props;
+  const defaultPayModalMetadata = payModal ? payModal.metadata : undefined;
   const contract = getContract({
     address: contractAddress,
     client,
     chain,
   });
+
+  const { data: payMetadata } = useReadContract(getPayMetadata, {
+    contract,
+    tokenId: claimParams.type === "ERC1155" ? claimParams.tokenId : undefined,
+    queryOptions: {
+      enabled: !defaultPayModalMetadata,
+    },
+  });
   const account = useActiveAccount();
-  // TODO (pay): fetch nft metadata and set it as the payOptions metadata
+  const { mutateAsync } = useSendAndConfirmTransaction();
   return (
     <TransactionButton
-      transaction={async () =>
-        await getClaimTransaction({ contract, account, claimParams })
-      }
+      payModal={{
+        metadata: defaultPayModalMetadata || payMetadata,
+        ...payModal,
+      }}
+      transaction={async () => {
+        if (!account) {
+          throw new Error("No account detected");
+        }
+        const [claimTx, { getApprovalForTransaction }] = await Promise.all([
+          getClaimTransaction({
+            contract,
+            account,
+            claimParams,
+          }),
+          import(
+            "../../../../../../extensions/erc20/write/getApprovalForTransaction.js"
+          ),
+        ]);
+        const approveTx = await getApprovalForTransaction({
+          transaction: claimTx,
+          account,
+        });
+        if (approveTx) {
+          await mutateAsync(approveTx);
+        }
+        return claimTx;
+      }}
       {...props}
     >
       {children}
@@ -100,6 +150,29 @@ export function ClaimButton(props: ClaimButtonProps) {
   );
 }
 
+/**
+ * @internal
+ */
+export async function getPayMetadata(
+  options: BaseTransactionOptions<{ tokenId?: bigint }>,
+): Promise<{ name?: string; image?: string }> {
+  const { contract, tokenId } = options;
+  const [contractMetadata, nft] = await Promise.all([
+    getContractMetadata(options),
+    tokenId ? getNFT({ contract, tokenId }) : undefined,
+  ]);
+  if (tokenId) {
+    return {
+      image: nft?.metadata?.image,
+      name: nft?.metadata?.name,
+    };
+  }
+  return {
+    image: contractMetadata?.image,
+    name: contractMetadata?.name,
+  };
+}
+
 /**
  * @internal Export for test
  */

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -91,6 +91,7 @@ export const ConnectWalletSocialOptions = (
     facebook: locale.signInWithFacebook,
     apple: locale.signInWithApple,
     discord: locale.signInWithDiscord,
+    farcaster: "Farcaster",
   };
 
   const { data: ecosystemAuthOptions, isLoading } = useQuery({

package/src/react/web/wallets/shared/oauthSignIn.ts

@@ -33,8 +33,9 @@ function getOauthLoginPath(
     case "apple":
     case "facebook":
     case "google":
+    case "farcaster":
     case "discord":
-      return getSocialAuthLoginPath(authOption, client, ecosystem);
+      return getSocialAuthLoginPath({ authOption, client, ecosystem });
     default:
       return "";
   }

package/src/storage/download.ts

@@ -9,18 +9,58 @@ export type DownloadOptions = Prettify<
 >;
 
 /**
- * Downloads a file from the specified URI.
+ * @description Downloads a file from the specified IPFS, Arweave, or HTTP URI.
+ *
+ * `download` will parse the provided URI based on its scheme (ipfs://, ar://, https://) and convert it to a URL to fetch the file from thirdweb's storage service.
+ *
  * @param options - The download options.
- * @returns A Promise that resolves to the downloaded file.
- * @throws An error if the URI scheme is invalid.
+ * @param options.client - The Thirdweb client. See [createThirdwebClient](https://portal.thirdweb.com/references/typescript/v5/createThirdwebClient).
+ * @param options.uri - The URI of the file to download. Can be IPFS, Arweave, or HTTP.
+ * @param [options.requestTimeoutMs] - The maximum time in milliseconds to wait for the request to complete. Defaults to 60 seconds (60,000 milliseconds).
+ *
+ * @returns Asynchronously returns the network response from fetching the file.
+ * @throws An error if the URI scheme is invalid or if the request fails.
+ *
  * @example
+ * Download a file from IPFS:
  * ```ts
  * import { download } from "thirdweb/storage";
+ * import { createThirdwebClient } from "@thirdweb-dev/sdk";
+ *
+ * const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
+ *
  * const file = await download({
  *  client,
  *  uri: "ipfs://Qm...",
  * });
  * ```
+ *
+ * Download a file from Arweave:
+ * ```ts
+ * import { download } from "thirdweb/storage";
+ * import { createThirdwebClient } from "@thirdweb-dev/sdk";
+ *
+ * const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
+ *
+ * const file = await download({
+ *  client,
+ *  uri: "ar://{arweave-transaction-id}",
+ * });
+ * ```
+ *
+ * Download a file from HTTP:
+ * ```ts
+ * import { download } from "thirdweb/storage";
+ * import { createThirdwebClient } from "@thirdweb-dev/sdk";
+ *
+ * const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
+ *
+ * const file = await download({
+ *  client,
+ *  uri: "https://example.com/file.txt",
+ * });
+ * ```
+ *
  * @storage
  */
 export async function download(options: DownloadOptions) {
@@ -31,11 +71,14 @@ export async function download(options: DownloadOptions) {
   } else {
     url = resolveScheme(options);
   }
+
   const res = await getClientFetch(options.client)(url, {
     keepalive: options.client.config?.storage?.fetch?.keepalive,
     headers: options.client.config?.storage?.fetch?.headers,
-    requestTimeoutMs: options.client.config?.storage?.fetch?.requestTimeoutMs,
+    requestTimeoutMs:
+      options.client.config?.storage?.fetch?.requestTimeoutMs ?? 60000,
   });
+
   if (!res.ok) {
     res.body?.cancel();
     throw new Error(`Failed to download file: ${res.statusText}`);

package/src/transaction/actions/send-and-confirm-transaction.ts

@@ -16,7 +16,7 @@ import { waitForReceipt } from "./wait-for-tx-receipt.js";
  * import { sendAndConfirmTransaction } from "thirdweb";
  *
  * const transactionReceipt = await sendAndConfirmTransaction({
- *  wallet,
+ *  account,
  *  transaction
  * });
  * ```

package/src/utils/contract/parse-abi-params.test.ts

@@ -0,0 +1,160 @@
+import { describe, expect, it } from "vitest";
+import { toHex } from "../encoding/hex.js";
+import { parseAbiParams } from "./parse-abi-params.js";
+
+describe("parseAbiParams", () => {
+  describe("parseAbiParams", () => {
+    it("should convert address and uint256 correctly", () => {
+      const types = ["address", "uint256"];
+      const values = ["0x1234567890abcdef1234567890abcdef12345678", "1200000"];
+      const expected = [
+        "0x1234567890abcdef1234567890abcdef12345678",
+        BigInt(1200000),
+      ];
+      expect(parseAbiParams(types, values)).toEqual(expected);
+    });
+
+    it("should convert address and bool correctly", () => {
+      const types = ["address", "bool"];
+      const values = ["0x1234567890abcdef1234567890abcdef12345678", "true"];
+      const expected = ["0x1234567890abcdef1234567890abcdef12345678", true];
+      expect(parseAbiParams(types, values)).toEqual(expected);
+    });
+
+    it("should convert bytes32 correctly", () => {
+      const types = ["bytes32"];
+      const values = [
+        "0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
+      ];
+      const expected = [
+        "0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
+      ];
+      expect(parseAbiParams(types, values)).toEqual(expected);
+    });
+
+    it("should throw an error for invalid hex in bytes32", () => {
+      const types = ["bytes32"];
+      const values = ["invalidHex"];
+      expect(() => parseAbiParams(types, values)).toThrowError(
+        "invalidHex is not a valid hex string",
+      );
+    });
+
+    it("should convert uint256 correctly", () => {
+      const types = ["uint256"];
+      const values = ["1200000"];
+      const expected = [BigInt(1200000)];
+      expect(parseAbiParams(types, values)).toEqual(expected);
+    });
+
+    it("should throw an error for invalid address", () => {
+      const types = ["address"];
+      const values = ["invalidAddress"];
+      expect(() => parseAbiParams(types, values)).toThrowError(
+        "invalidAddress is not a valid address",
+      );
+    });
+
+    it("should throw an error for mismatched number of types and values", () => {
+      const types = ["address", "uint256"];
+      const values = ["0x1234567890abcdef1234567890abcdef12345678"];
+      expect(() => parseAbiParams(types, values)).toThrowError(
+        "Passed the wrong number of constructor arguments: 1, expected 2",
+      );
+    });
+
+    it("should convert tuple correctly", () => {
+      const types = ["tuple"];
+      const values = [
+        '["0x1234567890abcdef1234567890abcdef12345678", "1200000"]',
+      ];
+      const expected = [
+        ["0x1234567890abcdef1234567890abcdef12345678", "1200000"],
+      ];
+      expect(parseAbiParams(types, values)).toEqual(expected);
+    });
+
+    it("should convert array of addresses correctly", () => {
+      const types = ["address[]"];
+      const values = [
+        '["0x1234567890abcdef1234567890abcdef12345678", "0xabcdef1234567890abcdef1234567890abcdef12"]',
+      ];
+      const expected = [
+        [
+          "0x1234567890abcdef1234567890abcdef12345678",
+          "0xabcdef1234567890abcdef1234567890abcdef12",
+        ],
+      ];
+      expect(parseAbiParams(types, values)).toEqual(expected);
+    });
+
+    it('should convert boolean correctly for "true"', () => {
+      const types = ["bool"];
+      const values = ["true"];
+      const expected = [true];
+      expect(parseAbiParams(types, values)).toEqual(expected);
+    });
+
+    it('should convert boolean correctly for "false"', () => {
+      const types = ["bool"];
+      const values = ["false"];
+      const expected = [false];
+      expect(parseAbiParams(types, values)).toEqual(expected);
+    });
+
+    it("should convert boolean correctly for boolean true", () => {
+      const types = ["bool"];
+      const values = [true];
+      const expected = [true];
+      expect(parseAbiParams(types, values)).toEqual(expected);
+    });
+
+    it("should convert boolean correctly for boolean false", () => {
+      const types = ["bool"];
+      const values = [false];
+      const expected = [false];
+      expect(parseAbiParams(types, values)).toEqual(expected);
+    });
+
+    it("should throw an error for invalid boolean value", () => {
+      const types = ["bool"];
+      const values = ["notBoolean"];
+      expect(() => parseAbiParams(types, values)).toThrowError(
+        "Invalid boolean value. Expecting either 'true' or 'false'",
+      );
+    });
+
+    it("should just return the value if already json-parsed", () => {
+      const types = ["tuple"];
+      const values = [{ cat: "orange" }];
+      expect(parseAbiParams(types, values)).toEqual(values);
+    });
+
+    it("should throw error if not a hex string", () => {
+      const values = ["orange cat"];
+      expect(() => parseAbiParams(["bytes64"], values)).toThrowError(
+        "orange cat is not a valid hex string",
+      );
+
+      expect(() => parseAbiParams(["bytes32"], values)).toThrowError(
+        "orange cat is not a valid hex string",
+      );
+    });
+
+    it("should throw error if cannot convert to BigInt", () => {
+      expect(() => parseAbiParams(["uint256"], [true])).toThrowError(
+        "Cannot convert type boolean to BigInt",
+      );
+
+      expect(() => parseAbiParams(["uint256"], ["cat"])).toThrowError(
+        "Cannot convert cat to a BigInt",
+      );
+    });
+
+    it("should return value unaltered if already a hex", () => {
+      const value = toHex("cat");
+      const result = parseAbiParams(["bytes64"], [value]);
+      expect(result).toStrictEqual([value]);
+    });
+  });
+});

package/src/utils/contract/parse-abi-params.ts

@@ -0,0 +1,90 @@
+import { isAddress } from "../address.js";
+import { isHex, padHex } from "../encoding/hex.js";
+
+/**
+ * Converts an array of parameter values to their respective types based on the provided type array.
+ *
+ * This utility function is particularly useful for ensuring that parameter values are correctly formatted
+ * according to the expected types before they are used in further processing or passed to a Solidity smart contract.
+ *
+ * @param {string[]} constructorParamTypes - An array of type strings indicating the expected types of the values,
+ *                   following Solidity type conventions (e.g., "address", "uint256", "bool").
+ * @param {unknown[]} constructorParamValues - An array of values to be converted according to the types.
+ * @returns - An array of values converted to their respective types.
+ *
+ * @example
+ * ```ts
+ * import { parseAbiParams } from "thirdweb/utils";
+ *
+ * const example1 = parseAbiParams(
+ *   ["address", "uint256"],
+ *   ["0x.....", "1200000"]
+ * ); // result: ["0x......", 1200000n]
+ *
+ * const example2 = parseAbiParams(
+ *   ["address", "bool"],
+ *   ["0x.....", "true"]
+ * ); // result: ["0x......", true]
+ * ```
+ * @utils
+ */
+export function parseAbiParams(
+  constructorParamTypes: string[],
+  constructorParamValues: unknown[],
+): Array<string | bigint | boolean> {
+  // Make sure they have the same length
+  if (constructorParamTypes.length !== constructorParamValues.length) {
+    throw new Error(
+      `Passed the wrong number of constructor arguments: ${constructorParamValues.length}, expected ${constructorParamTypes.length}`,
+    );
+  }
+  return constructorParamTypes.map((type, index) => {
+    const value = constructorParamValues[index];
+    if (type === "tuple" || type.endsWith("[]")) {
+      if (typeof value === "string") {
+        return JSON.parse(value);
+      }
+      return value;
+    }
+    if (type === "bytes32") {
+      if (!isHex(value)) {
+        throw new Error(`${value} is not a valid hex string`);
+      }
+      return padHex(value);
+    }
+    if (type.startsWith("bytes")) {
+      if (!isHex(value)) {
+        throw new Error(`${value} is not a valid hex string`);
+      }
+      return value;
+    }
+    if (type === "address") {
+      if (typeof value !== "string" || !isAddress(value)) {
+        throw new Error(`${value} is not a valid address`);
+      }
+      return value;
+    }
+    if (type.startsWith("uint") || type.startsWith("int")) {
+      if (typeof value !== "string" && typeof value !== "number") {
+        throw new Error(`Cannot convert type ${typeof value} to BigInt`);
+      }
+      try {
+        const val = BigInt(value);
+        return val;
+      } catch (err) {
+        throw new Error((err as Error).message);
+      }
+    }
+    if (type.startsWith("bool")) {
+      if (value === "false" || value === false) {
+        return false;
+      }
+      if (value === "true" || value === true) {
+        return true;
+      }
+      throw new Error(
+        "Invalid boolean value. Expecting either 'true' or 'false'",
+      );
+    }
+  });
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321";
+export const version = "5.42.0-nightly-e27ebef85bb61342c3de53f85e134cf4a29f787c-20240730000342";