thirdweb 5.88.2-nightly-0c1bb6ccaec9dc4edf596dac7f7623d0ad90f757-20250212000327 → 5.88.3

package/src/extensions/erc20/drops/read/canClaim.ts

@@ -0,0 +1,82 @@
+import { extractErrorResult } from "../../../../transaction/extract-error.js";
+import type { BaseTransactionOptions } from "../../../../transaction/types.js";
+import { getClaimParams } from "../../../../utils/extensions/drops/get-claim-params.js";
+import { verifyClaim } from "../../__generated__/DropERC20/read/verifyClaim.js";
+import { getActiveClaimConditionId } from "../../__generated__/IDropERC20/read/getActiveClaimConditionId.js";
+import { decimals } from "../../read/decimals.js";
+
+export type CanClaimParams = {
+  claimer: string;
+  from?: string;
+} & ({ quantityInWei: bigint } | { quantity: string });
+
+export type CanClaimResult = {
+  result: boolean;
+  reason?: string;
+};
+
+/**
+ * Check if a user can claim a drop.
+ *
+ * @param options - The options for the transaction.
+ * @returns Whether the user can claim the drop.
+ *
+ * @example
+ * ```ts
+ * const claimResult = await canClaim({
+ *   contract: contract,
+ *   claimer: "0x1234567890123456789012345678901234567890",
+ *   quantity: "1",
+ * });
+ * ```
+ *
+ * @extension ERC20
+ */
+export async function canClaim(
+  options: BaseTransactionOptions<CanClaimParams>,
+): Promise<CanClaimResult> {
+  const quantityWei = await (async () => {
+    if ("quantityInWei" in options) {
+      return options.quantityInWei;
+    }
+
+    const { toUnits } = await import("../../../../utils/units.js");
+    return toUnits(
+      options.quantity,
+      await decimals({ contract: options.contract }),
+    );
+  })();
+  const [conditionId, { quantity, currency, pricePerToken, allowlistProof }] =
+    await Promise.all([
+      getActiveClaimConditionId({
+        contract: options.contract,
+      }),
+      getClaimParams({
+        contract: options.contract,
+        quantity: quantityWei,
+        to: options.claimer,
+        type: "erc20",
+        from: options.from,
+        tokenDecimals: await decimals({ contract: options.contract }),
+      }),
+    ]);
+  try {
+    await verifyClaim({
+      contract: options.contract,
+      claimer: options.claimer,
+      quantity,
+      currency,
+      pricePerToken,
+      allowlistProof,
+      conditionId,
+    });
+    return {
+      result: true,
+    };
+  } catch (error) {
+    return {
+      result: false,
+      reason: await extractErrorResult({ error, contract: options.contract }),
+    };
+  }
+}

package/src/extensions/erc721/__generated__/DropERC721/read/verifyClaim.ts

@@ -0,0 +1,213 @@
+import type { AbiParameterToPrimitiveType } from "abitype";
+import { readContract } from "../../../../../transaction/read-contract.js";
+import type { BaseTransactionOptions } from "../../../../../transaction/types.js";
+import { encodeAbiParameters } from "../../../../../utils/abi/encodeAbiParameters.js";
+import { decodeAbiParameters } from "viem";
+import type { Hex } from "../../../../../utils/encoding/hex.js";
+import { detectMethod } from "../../../../../utils/bytecode/detectExtension.js";
+
+/**
+ * Represents the parameters for the "verifyClaim" function.
+ */
+export type VerifyClaimParams = {
+  conditionId: AbiParameterToPrimitiveType<{
+    type: "uint256";
+    name: "_conditionId";
+  }>;
+  claimer: AbiParameterToPrimitiveType<{ type: "address"; name: "_claimer" }>;
+  quantity: AbiParameterToPrimitiveType<{ type: "uint256"; name: "_quantity" }>;
+  currency: AbiParameterToPrimitiveType<{ type: "address"; name: "_currency" }>;
+  pricePerToken: AbiParameterToPrimitiveType<{
+    type: "uint256";
+    name: "_pricePerToken";
+  }>;
+  allowlistProof: AbiParameterToPrimitiveType<{
+    type: "tuple";
+    name: "_allowlistProof";
+    components: [
+      { type: "bytes32[]"; name: "proof" },
+      { type: "uint256"; name: "quantityLimitPerWallet" },
+      { type: "uint256"; name: "pricePerToken" },
+      { type: "address"; name: "currency" },
+    ];
+  }>;
+};
+
+export const FN_SELECTOR = "0x23a2902b" as const;
+const FN_INPUTS = [
+  {
+    type: "uint256",
+    name: "_conditionId",
+  },
+  {
+    type: "address",
+    name: "_claimer",
+  },
+  {
+    type: "uint256",
+    name: "_quantity",
+  },
+  {
+    type: "address",
+    name: "_currency",
+  },
+  {
+    type: "uint256",
+    name: "_pricePerToken",
+  },
+  {
+    type: "tuple",
+    name: "_allowlistProof",
+    components: [
+      {
+        type: "bytes32[]",
+        name: "proof",
+      },
+      {
+        type: "uint256",
+        name: "quantityLimitPerWallet",
+      },
+      {
+        type: "uint256",
+        name: "pricePerToken",
+      },
+      {
+        type: "address",
+        name: "currency",
+      },
+    ],
+  },
+] as const;
+const FN_OUTPUTS = [
+  {
+    type: "bool",
+    name: "isOverride",
+  },
+] as const;
+
+/**
+ * Checks if the `verifyClaim` method is supported by the given contract.
+ * @param availableSelectors An array of 4byte function selectors of the contract. You can get this in various ways, such as using "whatsabi" or if you have the ABI of the contract available you can use it to generate the selectors.
+ * @returns A boolean indicating if the `verifyClaim` method is supported.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { isVerifyClaimSupported } from "thirdweb/extensions/erc721";
+ * const supported = isVerifyClaimSupported(["0x..."]);
+ * ```
+ */
+export function isVerifyClaimSupported(availableSelectors: string[]) {
+  return detectMethod({
+    availableSelectors,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+  });
+}
+
+/**
+ * Encodes the parameters for the "verifyClaim" function.
+ * @param options - The options for the verifyClaim function.
+ * @returns The encoded ABI parameters.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { encodeVerifyClaimParams } from "thirdweb/extensions/erc721";
+ * const result = encodeVerifyClaimParams({
+ *  conditionId: ...,
+ *  claimer: ...,
+ *  quantity: ...,
+ *  currency: ...,
+ *  pricePerToken: ...,
+ *  allowlistProof: ...,
+ * });
+ * ```
+ */
+export function encodeVerifyClaimParams(options: VerifyClaimParams) {
+  return encodeAbiParameters(FN_INPUTS, [
+    options.conditionId,
+    options.claimer,
+    options.quantity,
+    options.currency,
+    options.pricePerToken,
+    options.allowlistProof,
+  ]);
+}
+
+/**
+ * Encodes the "verifyClaim" function into a Hex string with its parameters.
+ * @param options - The options for the verifyClaim function.
+ * @returns The encoded hexadecimal string.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { encodeVerifyClaim } from "thirdweb/extensions/erc721";
+ * const result = encodeVerifyClaim({
+ *  conditionId: ...,
+ *  claimer: ...,
+ *  quantity: ...,
+ *  currency: ...,
+ *  pricePerToken: ...,
+ *  allowlistProof: ...,
+ * });
+ * ```
+ */
+export function encodeVerifyClaim(options: VerifyClaimParams) {
+  // we do a "manual" concat here to avoid the overhead of the "concatHex" function
+  // we can do this because we know the specific formats of the values
+  return (FN_SELECTOR +
+    encodeVerifyClaimParams(options).slice(
+      2,
+    )) as `${typeof FN_SELECTOR}${string}`;
+}
+
+/**
+ * Decodes the result of the verifyClaim function call.
+ * @param result - The hexadecimal result to decode.
+ * @returns The decoded result as per the FN_OUTPUTS definition.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { decodeVerifyClaimResult } from "thirdweb/extensions/erc721";
+ * const result = decodeVerifyClaimResultResult("...");
+ * ```
+ */
+export function decodeVerifyClaimResult(result: Hex) {
+  return decodeAbiParameters(FN_OUTPUTS, result)[0];
+}
+
+/**
+ * Calls the "verifyClaim" function on the contract.
+ * @param options - The options for the verifyClaim function.
+ * @returns The parsed result of the function call.
+ * @extension ERC721
+ * @example
+ * ```ts
+ * import { verifyClaim } from "thirdweb/extensions/erc721";
+ *
+ * const result = await verifyClaim({
+ *  contract,
+ *  conditionId: ...,
+ *  claimer: ...,
+ *  quantity: ...,
+ *  currency: ...,
+ *  pricePerToken: ...,
+ *  allowlistProof: ...,
+ * });
+ *
+ * ```
+ */
+export async function verifyClaim(
+  options: BaseTransactionOptions<VerifyClaimParams>,
+) {
+  return readContract({
+    contract: options.contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+    params: [
+      options.conditionId,
+      options.claimer,
+      options.quantity,
+      options.currency,
+      options.pricePerToken,
+      options.allowlistProof,
+    ],
+  });
+}

package/src/extensions/erc721/drop721.test.ts

@@ -25,6 +25,7 @@ import { setClaimConditions } from "./drops/write/setClaimConditions.js";
 import { getNFT } from "./read/getNFT.js";
 import { lazyMint } from "./write/lazyMint.js";
 
+import { canClaim } from "./drops/read/canClaim.js";
 describe.runIf(process.env.TW_SECRET_KEY)(
   "DropERC721",
   {
@@ -121,6 +122,19 @@ describe.runIf(process.env.TW_SECRET_KEY)(
         }),
         account: TEST_ACCOUNT_A,
       });
+
+      expect(
+        await canClaim({
+          contract,
+          claimer: TEST_ACCOUNT_A.address,
+          quantity: 1n,
+        }),
+      ).toMatchInlineSnapshot(`
+        {
+          "result": true,
+        }
+      `);
+
       const claimTx = claimTo({
         contract,
         to: TEST_ACCOUNT_A.address,
@@ -208,6 +222,31 @@ describe.runIf(process.env.TW_SECRET_KEY)(
           balanceOf({ contract, owner: TEST_ACCOUNT_B.address }),
         ).resolves.toBe(0n);
 
+        expect(
+          await canClaim({
+            contract,
+            claimer: TEST_ACCOUNT_A.address,
+            quantity: 1n,
+          }),
+        ).toMatchInlineSnapshot(`
+          {
+            "result": true,
+          }
+        `);
+
+        expect(
+          await canClaim({
+            contract,
+            claimer: TEST_ACCOUNT_B.address,
+            quantity: 1n,
+          }),
+        ).toMatchInlineSnapshot(`
+          {
+            "reason": "DropClaimExceedLimit - 0,1",
+            "result": false,
+          }
+        `);
+
         await sendAndConfirmTransaction({
           account: TEST_ACCOUNT_A,
           transaction: claimTo({

package/src/extensions/erc721/drops/read/canClaim.ts

@@ -0,0 +1,70 @@
+import { extractErrorResult } from "../../../../transaction/extract-error.js";
+import type { BaseTransactionOptions } from "../../../../transaction/types.js";
+import { getClaimParams } from "../../../../utils/extensions/drops/get-claim-params.js";
+import { verifyClaim } from "../../__generated__/DropERC721/read/verifyClaim.js";
+import { getActiveClaimConditionId } from "../../__generated__/IDrop/read/getActiveClaimConditionId.js";
+
+export type CanClaimParams = {
+  claimer: string;
+  quantity: bigint;
+  from?: string;
+};
+
+export type CanClaimResult = {
+  result: boolean;
+  reason?: string;
+};
+
+/**
+ * Check if a user can claim a drop.
+ *
+ * @param options - The options for the transaction.
+ * @returns Whether the user can claim the drop.
+ *
+ * @example
+ * ```ts
+ * const claimResult = await canClaim({
+ *   contract: contract,
+ *   claimer: "0x1234567890123456789012345678901234567890",
+ *   quantity: "1",
+ * });
+ * ```
+ *
+ * @extension ERC721
+ */
+export async function canClaim(
+  options: BaseTransactionOptions<CanClaimParams>,
+): Promise<CanClaimResult> {
+  const [conditionId, { quantity, currency, pricePerToken, allowlistProof }] =
+    await Promise.all([
+      getActiveClaimConditionId({
+        contract: options.contract,
+      }),
+      getClaimParams({
+        contract: options.contract,
+        quantity: options.quantity,
+        to: options.claimer,
+        type: "erc721",
+        from: options.from,
+      }),
+    ]);
+  try {
+    await verifyClaim({
+      contract: options.contract,
+      claimer: options.claimer,
+      quantity,
+      currency,
+      pricePerToken,
+      allowlistProof,
+      conditionId,
+    });
+    return {
+      result: true,
+    };
+  } catch (error) {
+    return {
+      result: false,
+      reason: await extractErrorResult({ error, contract: options.contract }),
+    };
+  }
+}

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -517,6 +517,11 @@ function BuyScreenContent(props: BuyScreenContentProps) {
           screen.id === "buy-with-fiat") &&
           payer && (
             <TokenSelectedLayout
+              disabled={
+                ("prefillBuy" in payOptions &&
+                  payOptions.prefillBuy?.allowEdits?.amount === false) ||
+                payOptions.mode !== "fund_wallet"
+              }
               title={props.title}
               selectedChain={toChain}
               selectedToken={toToken}
@@ -651,6 +656,7 @@ function SelectedTokenInfo(props: {
   tokenAmount: string;
   setTokenAmount: (amount: string) => void;
   client: ThirdwebClient;
+  disabled?: boolean;
 }) {
   const getWidth = () => {
     let chars = props.tokenAmount.replace(".", "").length;
@@ -680,7 +686,7 @@ function SelectedTokenInfo(props: {
             type="text"
             data-placeholder={props.tokenAmount === ""}
             value={props.tokenAmount || "0"}
-            disabled={false} // TODO: add disabled freeze amount
+            disabled={props.disabled}
             onClick={(e) => {
               // put cursor at the end of the input
               if (props.tokenAmount === "") {
@@ -865,8 +871,13 @@ function MainScreen(props: {
             }}
             freezeAmount={payOptions.prefillBuy?.allowEdits?.amount === false}
             freezeChainAndToken={
-              payOptions.prefillBuy?.allowEdits?.chain === false &&
-              payOptions.prefillBuy?.allowEdits?.token === false
+              (payOptions.prefillBuy?.allowEdits?.chain === false &&
+                payOptions.prefillBuy?.allowEdits?.token === false) ||
+              (payOptions.buyWithCrypto !== false &&
+                payOptions.buyWithCrypto?.prefillSource?.allowEdits?.token ===
+                  false &&
+                payOptions.buyWithCrypto?.prefillSource?.allowEdits?.chain ===
+                  false)
             }
             token={toToken}
             chain={toChain}
@@ -924,6 +935,7 @@ function TokenSelectedLayout(props: {
   selectedChain: Chain;
   client: ThirdwebClient;
   onBack: () => void;
+  disabled?: boolean;
 }) {
   return (
     <Container>
@@ -944,6 +956,7 @@ function TokenSelectedLayout(props: {
           tokenAmount={props.tokenAmount}
           setTokenAmount={props.setTokenAmount}
           client={props.client}
+          disabled={props.disabled}
         />
 
         <Spacer y="md" />

package/src/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.tsx

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { ChevronRightIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
@@ -23,6 +24,7 @@ import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
 import { Blobbie } from "../../Blobbie.js";
 import { formatTokenBalance } from "../formatTokenBalance.js";
+import { FiatValue } from "./swap/FiatValue.js";
 import type { TokenBalance } from "./swap/PaymentSelectionScreen.js";
 
 export function WalletRowWithBalances(props: {
@@ -100,23 +102,42 @@ function TokenBalanceRow(props: {
       onClick={() => onClick(tokenBalance.token, wallet)}
       variant="secondary"
     >
-      <TokenIcon
-        token={tokenBalance.token}
-        chain={tokenBalance.chain}
-        size="md"
-        client={client}
-      />
-      <Container flex="column" gap="3xs">
-        <Text size="xs" color="primaryText">
-          {tokenBalance.token.symbol}
-        </Text>
-        {chainInfo && <Text size="xs">{chainInfo.name}</Text>}
+      <Container flex="row" center="y" gap="md">
+        <TokenIcon
+          token={tokenBalance.token}
+          chain={tokenBalance.chain}
+          size="md"
+          client={client}
+        />
+        <Container flex="column" gap="3xs">
+          <Text size="xs" color="primaryText">
+            {tokenBalance.token.symbol}
+          </Text>
+          {chainInfo && <Text size="xs">{chainInfo.name}</Text>}
+        </Container>
       </Container>
-      <div style={{ flex: 1 }} />
-      <Container flex="row" center="y" gap="3xs">
-        <Text size="xs" color="secondaryText">
-          {formatTokenBalance(tokenBalance.balance, true)}
-        </Text>
+      <Container flex="row" center="y" gap="3xs" color="secondaryText">
+        <Container
+          flex="column"
+          color="secondaryText"
+          gap="3xs"
+          style={{
+            justifyContent: "flex-end",
+            alignItems: "flex-end",
+          }}
+        >
+          <Text size="xs" color="primaryText">
+            {formatTokenBalance(tokenBalance.balance, true, 2)}
+          </Text>
+          <FiatValue
+            tokenAmount={tokenBalance.balance.displayValue}
+            token={tokenBalance.token}
+            chain={tokenBalance.chain}
+            client={client}
+            size="xs"
+          />
+        </Container>
+        <ChevronRightIcon width={iconSize.md} height={iconSize.md} />
       </Container>
     </StyledButton>
   );
@@ -149,7 +170,7 @@ export function WalletRow(props: {
           width={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
           height={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
           style={{
-            borderRadius: "100%",
+            borderRadius: radius.sm,
             overflow: "hidden",
             border: `1px solid ${theme.colors.borderColor}`,
           }}
@@ -166,7 +187,7 @@ export function WalletRow(props: {
           style={{
             width: iconSize.md,
             height: iconSize.md,
-            borderRadius: "100%",
+            borderRadius: radius.sm,
             overflow: "hidden",
             border: `1px solid ${theme.colors.borderColor}`,
           }}
@@ -186,7 +207,7 @@ const StyledButton = /* @__PURE__ */ styled(Button)((_) => {
   const theme = useCustomTheme();
   return {
     background: theme.colors.tertiaryBg,
-    justifyContent: "flex-start",
+    justifyContent: "space-between",
     flexDirection: "row",
     padding: spacing.sm,
     gap: spacing.sm,

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx

@@ -535,8 +535,7 @@ function PaymentSubStep(props: {
         {props.icon}
       </Container>
       <Container flex="column" gap="xxs">
-        {props.primaryText}
-        {props.secondaryText}
+        {props.primaryText} {props.secondaryText}
       </Container>
     </Container>
   );

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx

@@ -122,7 +122,13 @@ export function BuyTokenInput(props: {
         </Container>
       </div>
 
-      <Container flex="row" center="both">
+      <Container
+        flex="row"
+        center="both"
+        style={{
+          height: fontSize.xl,
+        }}
+      >
         <FiatValue
           tokenAmount={props.value}
           token={props.token}

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx

@@ -41,11 +41,7 @@ export function FiatValue(
     return <Skeleton width={"50px"} height={fontSize.lg} />;
   }
 
-  return (
-    <Text {...props}>
-      {cryptoToFiatQuery.data?.result
-        ? `$${formatNumber(cryptoToFiatQuery.data.result, 2)}`
-        : "-"}
-    </Text>
-  );
+  return cryptoToFiatQuery.data?.result ? (
+    <Text {...props}>${formatNumber(cryptoToFiatQuery.data.result, 2)}</Text>
+  ) : null;
 }

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx

@@ -166,25 +166,37 @@ export function PaymentSelectionScreen(props: {
     return <LoadingScreen />;
   }
 
+  const filteredWallets = Array.from(walletsAndBalances.data?.entries() || [])
+    .filter(([w]) => !props.hiddenWallets?.includes(w.id))
+    .filter(([, balances]) => {
+      const hasEnoughBalance = balances.some((b) => b.balance.value > 0);
+      return hasEnoughBalance;
+    });
+
   return (
     <Container>
       <Container flex="column" gap="xs">
-        {Array.from(walletsAndBalances.data?.entries() || [])
-          .filter(([w]) => !props.hiddenWallets?.includes(w.id))
-          .map(([w, balances]) => {
-            const address = w.getAccount()?.address;
-            if (!address) return null;
-            return (
-              <WalletRowWithBalances
-                key={w.id}
-                wallet={w}
-                balances={balances}
-                client={props.client}
-                address={address}
-                onClick={props.onSelect}
-              />
-            );
-          })}
+        {filteredWallets.length === 0 && (
+          <Container flex="column" gap="xs" py="md">
+            <Text size="xs" color="secondaryText" center>
+              <i>Insufficient funds in connected wallets</i>
+            </Text>
+          </Container>
+        )}
+        {filteredWallets.map(([w, balances]) => {
+          const address = w.getAccount()?.address;
+          if (!address) return null;
+          return (
+            <WalletRowWithBalances
+              key={w.id}
+              wallet={w}
+              balances={balances}
+              client={props.client}
+              address={address}
+              onClick={props.onSelect}
+            />
+          );
+        })}
         {!hideConnectButton && (
           <Button
             variant="secondary"