thirdweb 5.38.1-nightly-5fabe6661399615b393d1055a722b9de59bf19bb-20240724000323 → 5.38.1-nightly-c82c524e139d7960794e08bca838a1a1b78a3532-20240725000333

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

@@ -0,0 +1,241 @@
+"use client";
+
+import {
+  type ThirdwebContract,
+  getContract,
+} from "../../../../../../contract/contract.js";
+import type { PreparedTransaction } from "../../../../../../transaction/prepare-transaction.js";
+import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
+import { useActiveAccount } from "../../../../hooks/wallets/useActiveAccount.js";
+import { TransactionButton } from "../../../TransactionButton/index.js";
+import type {
+  ClaimButtonProps,
+  ClaimParams,
+  Erc20ClaimParams,
+  Erc721ClaimParams,
+  Erc1155ClaimParams,
+} from "./types.js";
+
+/**
+ * This button is used to claim tokens (NFT or ERC20) from a given thirdweb Drop contract
+ *
+ * there are 3 type of Drop contract: NFT Drop (DropERC721), Edition Drop (DropERC1155) and Token Drop (DropERC20)
+ *
+ * Learn more: https://thirdweb.com/explore/drops
+ *
+ * Note: This button only works with thirdweb Drop contracts.
+ * For custom contract, please use [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton)
+ * @param props
+ * @returns A wrapper for TransactionButton
+ *
+ * @example
+ *
+ * ```tsx
+ * import { ClaimButton } from "thirdweb/react";
+ * import { ethereum } from "thirdweb/chains";
+ *
+ * // For NFT Drop (ERC721)
+ * <ClaimButton
+ *   contractAddress="0x..." // contract address of the NFT Drop
+ *   chain={ethereum}
+ *   client={client}
+ *   claimParams={{
+ *     type: "ERC721",
+ *     quantity: 1n, // claim 1 token
+ *   }}
+ * >
+ *   Claim now
+ * </ClaimButton>
+ *
+ *
+ * // For Edition Drop (ERC1155)
+ * <ClaimButton
+ *   contractAddress="0x..." // contract address of the Edition Drop
+ *   chain={ethereum}
+ *   client={client}
+ *   claimParams={{
+ *     type: "ERC1155",
+ *     quantity: 1n,
+ *     tokenId: 0n,
+ *   }}
+ * >
+ *   Claim now
+ * </ClaimButton>
+ *
+ *
+ * // For Token Drop (ERC20)
+ * <ClaimButton
+ *   contractAddress="0x..." // contract address of the Token Drop
+ *   chain={ethereum}
+ *   client={client}
+ *   claimParams={{
+ *     type: "ERC20",
+ *     quantity: "100", // claim 100 ERC20 tokens
+ *     // instead of `quantity`, you can also use `quantityInWei` (bigint)
+ *   }}
+ * >
+ *   Claim now
+ * </ClaimButton>
+ *
+ * ```
+ */
+export function ClaimButton(props: ClaimButtonProps) {
+  const { children, contractAddress, client, chain, claimParams } = props;
+  const contract = getContract({
+    address: contractAddress,
+    client,
+    chain,
+  });
+  const account = useActiveAccount();
+  return (
+    <TransactionButton
+      transaction={async () =>
+        await getClaimTransaction({ contract, account, claimParams })
+      }
+      {...props}
+    >
+      {children}
+    </TransactionButton>
+  );
+}
+
+/**
+ * @internal Export for test
+ */
+export async function getClaimTransaction({
+  contract,
+  account,
+  claimParams,
+}: {
+  contract: ThirdwebContract;
+  account: Account | undefined;
+  claimParams: ClaimParams;
+}): Promise<PreparedTransaction> {
+  switch (claimParams.type) {
+    case "ERC721":
+      return await getERC721ClaimTo({ contract, account, claimParams });
+    case "ERC1155":
+      return await getERC1155ClaimTo({ contract, account, claimParams });
+    case "ERC20": {
+      return await getERC20ClaimTo({ contract, account, claimParams });
+    }
+    default:
+      throw new Error(
+        "Invalid contract type. Must be either NFT Drop (ERC721), Edition Drop (ERC1155) or Token Drop (ERC20)",
+      );
+  }
+}
+
+/**
+ * @internal
+ */
+export async function getERC721ClaimTo({
+  contract,
+  account,
+  claimParams,
+}: {
+  contract: ThirdwebContract;
+  account: Account | undefined;
+  claimParams: Erc721ClaimParams;
+}) {
+  const [{ isERC721 }, { isClaimSupported }, { claimTo }] = await Promise.all([
+    import("../../../../../../extensions/erc721/read/isERC721.js"),
+    import(
+      "../../../../../../extensions/erc721/__generated__/IDrop/write/claim.js"
+    ),
+    import("../../../../../../extensions/erc721/drops/write/claimTo.js"),
+  ]);
+  const [is721, claimSupported] = await Promise.all([
+    isERC721({ contract }).catch(() => false),
+    isClaimSupported(contract).catch(() => false),
+  ]);
+  if (!is721) {
+    throw new Error("Not an ERC721 contract");
+  }
+  if (!claimSupported) {
+    throw new Error("Not a valid NFT Drop (ERC721) contract");
+  }
+  return claimTo({
+    contract,
+    to: account?.address || "",
+    quantity: claimParams.quantity,
+  });
+}
+
+/**
+ * @internal
+ */
+export async function getERC1155ClaimTo({
+  contract,
+  account,
+  claimParams,
+}: {
+  contract: ThirdwebContract;
+  account: Account | undefined;
+  claimParams: Erc1155ClaimParams;
+}) {
+  const [{ isERC1155 }, { isClaimSupported }, { claimTo }] = await Promise.all([
+    import("../../../../../../extensions/erc1155/read/isERC1155.js"),
+    import(
+      "../../../../../../extensions/erc1155/__generated__/IDrop1155/write/claim.js"
+    ),
+    import("../../../../../../extensions/erc1155/drops/write/claimTo.js"),
+  ]);
+  const [is1155, claimSupported] = await Promise.all([
+    isERC1155({ contract }).catch(() => false),
+    isClaimSupported(contract).catch(() => false),
+  ]);
+  if (!is1155) {
+    throw new Error("Not a valid ERC1155 contract");
+  }
+  if (!claimSupported) {
+    throw new Error("Not a valid thirdweb Edition Drop contract");
+  }
+  return claimTo({
+    contract,
+    to: account?.address || "",
+    quantity: claimParams.quantity,
+    tokenId: claimParams.tokenId,
+  });
+}
+
+/**
+ * @internal
+ */
+export async function getERC20ClaimTo({
+  contract,
+  account,
+  claimParams,
+}: {
+  contract: ThirdwebContract;
+  account: Account | undefined;
+  claimParams: Erc20ClaimParams;
+}) {
+  // Ideally we should check if the contract is ERC20 using `isERC20`
+  // however TokenDrop doesn't have `supportsInterface` so it doesn't work
+  const [{ isClaimSupported }, { claimTo }] = await Promise.all([
+    import(
+      "../../../../../../extensions/erc20/__generated__/IDropERC20/write/claim.js"
+    ),
+    import("../../../../../../extensions/erc20/drops/write/claimTo.js"),
+  ]);
+  const claimSupported = await isClaimSupported(contract).catch(() => false);
+  if (!claimSupported) {
+    throw new Error("Not a valid thirdweb Token Drop contract");
+  }
+  if ("quantity" in claimParams) {
+    return claimTo({
+      contract,
+      to: account?.address || "",
+      quantity: claimParams.quantity,
+    });
+  }
+  if ("quantityInWei" in claimParams) {
+    return claimTo({
+      contract,
+      to: account?.address || "",
+      quantityInWei: claimParams.quantityInWei,
+    });
+  }
+  throw new Error("Missing quantity or quantityInWei");
+}

package/src/react/web/ui/prebuilt/thirdweb/ClaimButton/types.ts

@@ -0,0 +1,46 @@
+import type { Chain } from "../../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../../client/client.js";
+import type { TransactionButtonProps } from "../../../../../core/hooks/transaction/transaction-button-utils.js";
+
+export type Erc721ClaimParams = {
+  type: "ERC721";
+  quantity: bigint;
+};
+
+export type Erc1155ClaimParams = {
+  type: "ERC1155";
+  quantity: bigint;
+  tokenId: bigint;
+};
+
+export type Erc20ClaimParams = {
+  type: "ERC20";
+} & ({ quantityInWei: bigint } | { quantity: string });
+
+export type ClaimParams =
+  | Erc721ClaimParams
+  | Erc1155ClaimParams
+  | Erc20ClaimParams;
+
+/**
+ * Props for the ClaimButton component
+ */
+export type ClaimButtonProps = Omit<TransactionButtonProps, "transaction"> & {
+  /**
+   * The contract address of the Drop contract.
+   * Make sure it's a valid [thirdweb Drop contracts:](https://thirdweb.com/explore/drops)
+   */
+  contractAddress: string;
+  /**
+   * The chain which the Drop contract is deployed on
+   */
+  chain: Chain;
+  /**
+   * thirdweb Client
+   */
+  client: ThirdwebClient;
+  /**
+   *
+   */
+  claimParams: ClaimParams;
+};

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.38.1-nightly-5fabe6661399615b393d1055a722b9de59bf19bb-20240724000323";
+export const version = "5.38.1-nightly-c82c524e139d7960794e08bca838a1a1b78a3532-20240725000333";

package/src/wallets/in-app/web/lib/in-app-account.ts

@@ -5,6 +5,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { eth_sendRawTransaction } from "../../../../rpc/actions/eth_sendRawTransaction.js";
 import { getRpcClient } from "../../../../rpc/rpc.js";
 import { getAddress } from "../../../../utils/address.js";
+import { getThirdwebDomains } from "../../../../utils/domains.js";
 import { type Hex, hexToString } from "../../../../utils/encoding/hex.js";
 import { parseTypedData } from "../../../../utils/signatures/helpers/parseTypedData.js";
 import type { Prettify } from "../../../../utils/type-utils.js";
@@ -231,6 +232,7 @@ export class IFrameWallet {
         transaction.gasPrice = tx.gasPrice;
         transaction.type = 0;
       }
+      const RPC_URL = getThirdwebDomains().rpc;
       const { signedTransaction } =
         await querier.call<SignTransactionReturnType>({
           procedureName: "signTransaction",
@@ -238,7 +240,7 @@ export class IFrameWallet {
             transaction,
             chainId: tx.chainId,
             partnerId,
-            rpcEndpoint: `https://${tx.chainId}.rpc.thirdweb.com`, // TODO (ew) shouldnt be needed
+            rpcEndpoint: `https://${tx.chainId}.${RPC_URL}`, // TODO (ew) shouldnt be needed
           },
           // Can hide the iframe if the partner has full control (no user approvals)
           showIframe: permissions?.permissions.includes("FULL_CONTROL_V1")
@@ -318,6 +320,7 @@ export class IFrameWallet {
           (domainData as Record<string, unknown>).chainId = chainId;
         }
 
+        const RPC_URL = getThirdwebDomains().rpc;
         const { signedTypedData } =
           await querier.call<SignedTypedDataReturnType>({
             procedureName: "signTypedDataV4",
@@ -329,7 +332,7 @@ export class IFrameWallet {
                 parsedTypedData.message as SignerProcedureTypes["signTypedDataV4"]["message"],
               chainId: chainId || 1,
               partnerId,
-              rpcEndpoint: `https://${chainId}.rpc.thirdweb.com`, // TODO (ew) shouldnt be needed
+              rpcEndpoint: `https://${chainId}.${RPC_URL}`, // TODO (ew) shouldnt be needed
             },
             // Can hide the iframe if the partner has full control (no user approvals)
             showIframe: permissions?.permissions.includes("FULL_CONTROL_V1")

package/src/wallets/smart/lib/userop.ts

@@ -1,6 +1,11 @@
 import { concat } from "viem";
 import type { Chain } from "../../../chains/types.js";
-import type { ThirdwebContract } from "../../../contract/contract.js";
+import type { ThirdwebClient } from "../../../client/client.js";
+import {
+  type ThirdwebContract,
+  getContract,
+} from "../../../contract/contract.js";
+import { getNonce } from "../../../extensions/erc4337/__generated__/IEntryPoint/read/getNonce.js";
 import { getDefaultGasOverrides } from "../../../gas/fee-data.js";
 import { encode } from "../../../transaction/actions/encode.js";
 import type { PreparedTransaction } from "../../../transaction/prepare-transaction.js";
@@ -30,7 +35,7 @@ import {
   getDefaultBundlerUrl,
 } from "./constants.js";
 import { getPaymasterAndData } from "./paymaster.js";
-import { randomNonce } from "./utils.js";
+import { generateRandomUint192 } from "./utils.js";
 
 /**
  * Wait for the user operation to be mined.
@@ -156,8 +161,13 @@ export async function createUnsignedUserOp(args: {
     }
   }
 
-  // const nonce = BigInt(transaction.nonce || randomNonce());
-  const nonce = randomNonce(); // FIXME getNonce should be overrideable by the wallet
+  const nonce = await getAccountNonce({
+    accountContract,
+    chain,
+    client,
+    entrypointAddress: overrides?.entrypointAddress,
+    getNonceOverride: overrides?.getAccountNonce,
+  });
 
   const partialOp: UserOperation = {
     sender: accountContract.address,
@@ -299,6 +309,34 @@ async function getAccountInitCode(options: {
   return concat([factoryContract.address as Hex, await encode(deployTx)]);
 }
 
+async function getAccountNonce(options: {
+  accountContract: ThirdwebContract;
+  chain: Chain;
+  client: ThirdwebClient;
+  entrypointAddress?: string;
+  getNonceOverride?: (accountContract: ThirdwebContract) => Promise<bigint>;
+}) {
+  const {
+    accountContract,
+    chain,
+    client,
+    entrypointAddress,
+    getNonceOverride,
+  } = options;
+  if (getNonceOverride) {
+    return getNonceOverride(accountContract);
+  }
+  return getNonce({
+    contract: getContract({
+      address: entrypointAddress || ENTRYPOINT_ADDRESS_v0_6,
+      chain,
+      client,
+    }),
+    key: generateRandomUint192(),
+    sender: accountContract.address,
+  });
+}
+
 /**
  * Get the hash of a user operation.
  * @param args - The user operation, entrypoint address, and chain ID

package/src/wallets/smart/lib/utils.ts

@@ -3,7 +3,7 @@ import type { Chain } from "../../../chains/types.js";
 import { isHex, numberToHex, toHex } from "../../../utils/encoding/hex.js";
 import type { UserOperation, UserOperationHexed } from "../types.js";
 
-const generateRandomUint192 = (): bigint => {
+export const generateRandomUint192 = (): bigint => {
   const rand1 = BigInt(Math.floor(Math.random() * 0x100000000));
   const rand2 = BigInt(Math.floor(Math.random() * 0x100000000));
   const rand3 = BigInt(Math.floor(Math.random() * 0x100000000));

package/src/wallets/smart/types.ts

@@ -34,6 +34,7 @@ export type SmartWalletOptions = Prettify<
         accountContract: ThirdwebContract,
         transactions: SendTransactionOption[],
       ) => PreparedTransaction;
+      getAccountNonce?: (accountContract: ThirdwebContract) => Promise<bigint>;
     };
   } & (
     | {

package/src/wallets/utils/getWalletBalance.ts

@@ -39,7 +39,7 @@ export type GetWalletBalanceResult = {
  * @example
  * ```ts
  * import { getWalletBalance } from "thirdweb/wallets";
- * const balance = await getWalletBalance({ account, client, chain, tokenAddress });
+ * const balance = await getWalletBalance({ address, client, chain, tokenAddress });
  * ```
  * @walletUtils
  */