thirdweb 5.41.0 → 5.42.0

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

@@ -234,7 +234,7 @@ export const ConnectWalletSocialOptions = (
     props.select();
   }
 
-  const showOnlyIcons = socialLogins.length > 1;
+  const showOnlyIcons = socialLogins.length > 2;
 
   return (
     <Container
@@ -247,22 +247,33 @@ export const ConnectWalletSocialOptions = (
       {/* Social Login */}
       {hasSocialLogins && (
         <Container
-          flex={showOnlyIcons ? "row" : "column"}
+          flex="row"
           center="x"
-          gap="sm"
+          gap={socialLogins.length > 4 ? "xs" : "sm"}
           style={{
             justifyContent: "space-between",
+            display: "grid",
+            gridTemplateColumns: `repeat(${socialLogins.length}, 1fr)`,
           }}
         >
           {socialLogins.map((loginMethod) => {
-            const imgIconSize = showOnlyIcons ? iconSize.lg : iconSize.md;
+            const imgIconSize = (() => {
+              if (!showOnlyIcons) {
+                return iconSize.md;
+              } else {
+                if (socialLogins.length > 4) {
+                  return iconSize.md;
+                }
+                return iconSize.lg;
+              }
+            })();
+
             return (
               <SocialButton
                 aria-label={`Login with ${loginMethod}`}
                 data-variant={showOnlyIcons ? "icon" : "full"}
                 key={loginMethod}
                 variant={"outline"}
-                fullWidth={!showOnlyIcons}
                 onClick={() => {
                   handleSocialLogin(loginMethod as SocialAuthOption);
                 }}
@@ -274,7 +285,7 @@ export const ConnectWalletSocialOptions = (
                   client={props.client}
                 />
                 {!showOnlyIcons &&
-                  loginMethodsLabel[loginMethod as SocialAuthOption]}
+                  `${socialLogins.length === 1 ? "Continue with " : ""}${loginMethodsLabel[loginMethod as SocialAuthOption]}`}
               </SocialButton>
             );
           })}
@@ -379,11 +390,12 @@ export const ConnectWalletSocialOptions = (
 };
 
 const SocialButton = /* @__PURE__ */ styled(Button)({
+  flexGrow: 1,
   "&[data-variant='full']": {
     display: "flex",
     justifyContent: "flex-start",
     padding: spacing.md,
-    gap: spacing.md,
+    gap: spacing.sm,
     fontSize: fontSize.md,
     fontWeight: 500,
     transition: "background-color 0.2s ease",
@@ -393,6 +405,5 @@ const SocialButton = /* @__PURE__ */ styled(Button)({
   },
   "&[data-variant='icon']": {
     padding: spacing.sm,
-    flexGrow: 1,
   },
 });

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/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.41.0";
+export const version = "5.42.0";

package/src/wallets/create-wallet.ts

@@ -30,9 +30,31 @@ import { createWalletEmitter } from "./wallet-emitter.js";
 
 /**
  * Creates a wallet based on the provided ID and arguments.
+ *
+ * - Supports 350+ wallets
+ * - Handles both injected browser wallets and WalletConnect sessions
+ *
+ * [View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets)
+ *
  * @param args - The arguments for creating the wallet.
+ * @param args.id - The ID of the wallet to create, this will be autocompleted by your IDE.
+ * [View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets)
+ * @param args.createOptions - The options for creating the wallet.
+ * The arguments are different for each wallet type.
+ * Refer to the [WalletCreationOptions](https://portal.thirdweb.com/references/typescript/v5/WalletCreationOptions) type for more details.
  * @returns - The created wallet.
  * @example
+ *
+ * ## Connecting the wallet
+ *
+ * Once created, you can connect the wallet to your app by calling the `connect` method.
+ *
+ * The `connect` method returns a promise that resolves to the connected account.
+ *
+ * Each wallet type can have different connect options. [View the different connect options](https://portal.thirdweb.com/references/typescript/v5/WalletConnectionOption)
+ *
+ * ## Connecting to an injected wallet
+ *
  * ```ts
  * import { createWallet } from "thirdweb/wallets";
  *
@@ -42,6 +64,57 @@ import { createWalletEmitter } from "./wallet-emitter.js";
  *  client,
  * });
  * ```
+ *
+ * You can check if a wallet is installed by calling the [injectedProvider](https://portal.thirdweb.com/references/typescript/v5/injectedProvider) method.
+ *
+ * ## Connecting via WalletConnect modal
+ *
+ * ```ts
+ * import { createWallet } from "thirdweb/wallets";
+ *
+ * const metamaskWallet = createWallet("io.metamask");
+ *
+ * await metamask.connect({
+ *   client,
+ *   walletConnect: {
+ *     projectId: "YOUR_PROJECT_ID",
+ *     showQrModal: true,
+ *     appMetadata: {
+ *       name: "My App",
+ *       url: "https://my-app.com",
+ *       description: "my app description",
+ *       logoUrl: "https://path/to/my-app/logo.svg",
+ *     },
+ *   },
+ * });
+ * ```
+ * [View ConnectWallet connection options](https://portal.thirdweb.com/references/typescript/v5/WCConnectOptions)
+ *
+ * ## Connecting with coinbase wallet
+ *
+ * ```ts
+ * import { createWallet } from "thirdweb/wallets";
+ *
+ * const cbWallet = createWallet("com.coinbase.wallet", {
+ *   appMetadata: {
+ *     name: "My App",
+ *     url: "https://my-app.com",
+ *     description: "my app description",
+ *     logoUrl: "https://path/to/my-app/logo.svg",
+ *   },
+ *   walletConfig: {
+ *     // options: 'all' | 'smartWalletOnly' | 'eoaOnly'
+ *     options: 'all',
+ *   },
+ * });
+ *
+ * const account = await cbWallet.connect({
+ *  client,
+ * });
+ * ```
+ *
+ * [View Coinbase wallet creation options](https://portal.thirdweb.com/references/typescript/v5/CoinbaseWalletCreationOptions)
+ *
  * @wallet
  */
 export function createWallet<const ID extends WalletId>(

package/src/wallets/ecosystem/types.ts

@@ -1,3 +1,4 @@
+import type { Prettify } from "../../utils/type-utils.js";
 import type {
   InAppWalletAutoConnectOptions,
   InAppWalletConnectionOptions,
@@ -11,8 +12,11 @@ export type EcosystemWalletCreationOptions = {
   };
 };
 
-export type EcosystemWalletConnectionOptions = InAppWalletConnectionOptions & {
-  ecosystem: Ecosystem;
-};
-export type EcosystemWalletAutoConnectOptions =
-  InAppWalletAutoConnectOptions & { ecosystem: Ecosystem };
+export type EcosystemWalletConnectionOptions = Prettify<
+  InAppWalletConnectionOptions & {
+    ecosystem: Ecosystem;
+  }
+>;
+export type EcosystemWalletAutoConnectOptions = Prettify<
+  InAppWalletAutoConnectOptions & { ecosystem: Ecosystem }
+>;

package/src/wallets/in-app/core/wallet/index.ts

@@ -44,10 +44,9 @@ export async function connectInAppWallet(
     connector.authenticateWithRedirect
   ) {
     const strategy = options.strategy;
-    if (!socialAuthOptions.includes(strategy as SocialAuthOption)) {
-      throw new Error("This authentication method does not support redirects");
+    if (socialAuthOptions.includes(strategy as SocialAuthOption)) {
+      connector.authenticateWithRedirect(strategy as SocialAuthOption);
     }
-    connector.authenticateWithRedirect(strategy as SocialAuthOption);
   }
   // If we don't have authenticateWithRedirect then it's likely react native, so the default is to redirect and we can carry on
   // IF WE EVER ADD MORE CONNECTOR TYPES, this could cause redirect to be ignored despite being specified