upgrade sdk & use claim condition reasons

Author: jnsdls

.gitignore

@@ -3,4 +3,6 @@ node_modules
 .DS_Store
 dist/
 esout/
-yarn-error.log
+yarn-error.log
+.yalc/
+yalc.lock

package.json

@@ -38,7 +38,7 @@
     "typescript": "^4.4.4"
   },
   "dependencies": {
-    "@3rdweb/sdk": "^2.0.0-25",
+    "@3rdweb/sdk": "^2.0.0-26",
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react": "^1.7.2",
     "@emotion/react": "^11",
@@ -55,5 +55,8 @@
   "resolutions": {
     "ansi-regex": "^5.0.1",
     "@3rdweb/contracts": "2.0.1-36"
+  },
+  "alias": {
+    "process": false
   }
 }

src/widgets/bundledrop.tsx

@@ -22,6 +22,7 @@ import {
 } from "@chakra-ui/react";
 import { css, Global } from "@emotion/react";
 import { BigNumber, BigNumberish } from "ethers";
+import { formatUnits, parseUnits } from "ethers/lib/utils";
 import React, { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 import { IoDiamondOutline } from "react-icons/io5";
@@ -31,19 +32,18 @@ import {
   useMutation,
   useQuery,
 } from "react-query";
-import { ConnectedWallet } from "../shared/connected-wallet";
 import { Provider, useNetwork } from "wagmi";
 import { ConnectWalletButton } from "../shared/connect-wallet-button";
+import { ConnectedWallet } from "../shared/connected-wallet";
 import { Footer } from "../shared/footer";
 import { NftCarousel } from "../shared/nft-carousel";
+import { parseError } from "../shared/parseError";
 import { DropSvg } from "../shared/svg/drop";
 import chakraTheme from "../shared/theme";
 import { fontsizeCss } from "../shared/theme/typography";
-import { useFormatedValue } from "../shared/tokenHooks";
 import { useAddress } from "../shared/useAddress";
 import { useConnectors } from "../shared/useConnectors";
 import { useSDKWithSigner } from "../shared/useSdkWithSigner";
-import { parseError } from "../shared/parseError";
 
 function parseHugeNumber(totalAvailable: BigNumberish = 0) {
   const bn = BigNumber.from(totalAvailable);
@@ -82,7 +82,7 @@ interface HeaderProps extends ModuleInProps {
 }
 
 const Header: React.FC<HeaderProps> = ({
-  sdk, 
+  sdk,
   tokenAddress,
   activeTab,
   setActiveTab,
@@ -94,7 +94,7 @@ const Header: React.FC<HeaderProps> = ({
   const [{ data: network }] = useNetwork();
   const chainId = useMemo(() => network?.chain?.id, [network]);
 
-  const isEnabled = !!module && !!address && chainId === expectedChainId
+  const isEnabled = !!module && !!address && chainId === expectedChainId;
 
   const activeButtonProps: ButtonProps = {
     borderBottom: "4px solid",
@@ -176,36 +176,38 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
   const [{ data: network }] = useNetwork();
   const chainId = useMemo(() => network?.chain?.id, [network]);
   const [claimSuccess, setClaimSuccess] = useState(false);
+  const [quantity, setQuantity] = useState(1);
 
-  const isEnabled = !!module && !!address && chainId === expectedChainId
+  const isEnabled = !!module && !!address && chainId === expectedChainId;
 
   const activeClaimCondition = useQuery(
     ["claim-condition", { tokenId }],
     () => module?.claimConditions.getActive(tokenId),
     { enabled: isEnabled && tokenId.length > 0 },
   );
 
-  const [quantity, setQuantity] = useState(1);
-  const priceToMint = BigNumber.from(
-    activeClaimCondition?.data?.price || 0,
-  ).mul(quantity);
-  const currency = activeClaimCondition?.data?.currencyAddress;
-  const claimed = activeClaimCondition.data?.availableSupply || "0";
-  const totalAvailable = activeClaimCondition.data?.maxQuantity?.toString() || "0";
-
-  const tokenModule = useMemo(() => {
-    if (!currency || !sdk) {
-      return undefined;
-    }
-    return sdk.getTokenContract(currency);
-  }, [currency, sdk]);
+  const claimConditionReasons = useQuery(
+    ["ineligiblereasons", { tokenId, quantity, address }],
+    () =>
+      module?.claimConditions.getClaimIneligibilityReasons(
+        tokenId,
+        quantity,
+        address,
+      ),
+    { enabled: !!module && !!address },
+  );
 
-  const formatedPrice = useFormatedValue(
-    priceToMint,
-    tokenModule,
-    expectedChainId,
+  const bnPrice = parseUnits(
+    activeClaimCondition.data?.currencyMetadata.displayValue || "0",
+    activeClaimCondition.data?.currencyMetadata.decimals,
   );
 
+  const priceToMint = bnPrice.mul(quantity);
+
+  const claimed = activeClaimCondition.data?.availableSupply || "0";
+  const totalAvailable =
+    activeClaimCondition.data?.maxQuantity?.toString() || "0";
+
   const isNotSoldOut = parseInt(claimed) < parseInt(totalAvailable);
 
   useEffect(() => {
@@ -244,9 +246,11 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
     },
   );
 
-  const isLoading = activeClaimCondition.isLoading;
+  const isLoading =
+    activeClaimCondition.isLoading || claimConditionReasons.isLoading;
 
-  const canClaim = isNotSoldOut && address;
+  const canClaim =
+    !!isNotSoldOut && !!address && !claimConditionReasons.data?.length;
 
   const quantityLimit =
     activeClaimCondition?.data?.quantityLimitPerTransaction || 1;
@@ -269,9 +273,7 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
     quantityLimitBigNumber.lte(1000);
 
   if (!isEnabled) {
-    return (
-      <ConnectWalletButton expectedChainId={expectedChainId} />
-    )
+    return <ConnectWalletButton expectedChainId={expectedChainId} />;
   }
 
   return (
@@ -311,13 +313,18 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
           {!isNotSoldOut
             ? "Sold out"
             : canClaim
-            ? `Mint${
-                priceToMint.eq(0)
+            ? `Mint${showQuantityInput ? ` ${quantity}` : ""}${
+                activeClaimCondition.data?.price.eq(0)
                   ? " (Free)"
-                  : formatedPrice
-                  ? ` (${formatedPrice})`
+                  : activeClaimCondition.data?.currencyMetadata.displayValue
+                  ? ` (${formatUnits(
+                      priceToMint,
+                      activeClaimCondition.data.currencyMetadata.decimals,
+                    )} ${activeClaimCondition.data?.currencyMetadata.symbol})`
                   : ""
               }`
+            : claimConditionReasons.data?.length
+            ? claimConditionReasons.data[0]
             : "Minting Unavailable"}
         </Button>
       </Flex>
@@ -496,7 +503,8 @@ const DropWidget: React.FC<DropWidgetProps> = ({
   );
 
   const claimed = activeClaimCondition.data?.availableSupply || "0";
-  const totalAvailable = BigNumber.from(activeClaimCondition.data?.maxQuantity).toString() || "0";
+  const totalAvailable =
+    BigNumber.from(activeClaimCondition.data?.maxQuantity).toString() || "0";
 
   const owned = useQuery(
     ["numbers", "owned", { address }],

src/widgets/drop.tsx

@@ -22,6 +22,7 @@ import {
 } from "@chakra-ui/react";
 import { css, Global } from "@emotion/react";
 import { BigNumber } from "ethers";
+import { formatUnits, parseUnits } from "ethers/lib/utils";
 import React, { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 import { IoDiamondOutline } from "react-icons/io5";
@@ -40,7 +41,6 @@ import { parseError } from "../shared/parseError";
 import { DropSvg } from "../shared/svg/drop";
 import chakraTheme from "../shared/theme";
 import { fontsizeCss } from "../shared/theme/typography";
-import { useFormatedValue } from "../shared/tokenHooks";
 import { useAddress } from "../shared/useAddress";
 import { useConnectors } from "../shared/useConnectors";
 import { useSDKWithSigner } from "../shared/useSdkWithSigner";
@@ -193,10 +193,19 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
     { enabled: !!module },
   );
 
-  const priceToMint = BigNumber.from(claimCondition?.data?.price || 0).mul(
-    quantity,
+  const claimConditionReasons = useQuery(
+    ["ineligiblereasons", { quantity, address }],
+    () =>
+      module?.claimConditions.getClaimIneligibilityReasons(quantity, address),
+    { enabled: !!module && !!address },
+  );
+
+  const bnPrice = parseUnits(
+    claimCondition.data?.currencyMetadata.displayValue || "0",
+    claimCondition.data?.currencyMetadata.decimals,
   );
-  const currency = claimCondition?.data?.currencyAddress;
+  const priceToMint = bnPrice.mul(quantity);
+
   const quantityLimit = claimCondition?.data?.quantityLimitPerTransaction || 1;
 
   const quantityLimitBigNumber = useMemo(() => {
@@ -209,19 +218,6 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
     return bn;
   }, [quantityLimit]);
 
-  const tokenModule = useMemo(() => {
-    if (!currency || !sdk) {
-      return undefined;
-    }
-    return sdk.getTokenContract(currency);
-  }, [currency, sdk]);
-
-  const formatedPrice = useFormatedValue(
-    priceToMint,
-    tokenModule,
-    expectedChainId,
-  );
-
   const isNotSoldOut = claimed.data?.lt(totalAvailable.data || 0);
 
   useEffect(() => {
@@ -260,9 +256,14 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
     },
   );
 
-  const isLoading = totalAvailable.isLoading || claimed.isLoading;
+  const isLoading =
+    totalAvailable.isLoading ||
+    claimed.isLoading ||
+    claimCondition.isLoading ||
+    claimConditionReasons.isLoading;
 
-  const canClaim = !!isNotSoldOut && !!address;
+  const canClaim =
+    !!isNotSoldOut && !!address && !claimConditionReasons.data?.length;
 
   const showQuantityInput =
     canClaim &&
@@ -276,7 +277,7 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
   return (
     <Stack spacing={4} align="center" w="100%">
       <Flex w="100%" direction={{ base: "column", md: "row" }} gap={2}>
-        {showQuantityInput && (
+        {showQuantityInput && !isLoading && (
           <NumberInput
             inputMode="numeric"
             value={quantity}
@@ -311,12 +312,17 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
             ? "Sold out"
             : canClaim
             ? `Mint${showQuantityInput ? ` ${quantity}` : ""}${
-                priceToMint.eq(0)
+                claimCondition.data?.price.eq(0)
                   ? " (Free)"
-                  : formatedPrice
-                  ? ` (${formatedPrice})`
+                  : claimCondition.data?.currencyMetadata.displayValue
+                  ? ` (${formatUnits(
+                      priceToMint,
+                      claimCondition.data.currencyMetadata.decimals,
+                    )} ${claimCondition.data?.currencyMetadata.symbol})`
                   : ""
               }`
+            : claimConditionReasons.data?.length
+            ? claimConditionReasons.data[0]
             : "Minting Unavailable"}
         </Button>
       </Flex>

yarn.lock

@@ -2,17 +2,17 @@
 # yarn lockfile v1
 
 
-"@3rdweb/[email protected]", "@3rdweb/contracts@^2.0.1-26":
+"@3rdweb/[email protected]":
   version "2.0.1-36"
   resolved "https://registry.yarnpkg.com/@3rdweb/contracts/-/contracts-2.0.1-36.tgz#c75c45e2e18f3d89dcb21ba3679d6e495b11e15b"
   integrity sha512-CC8mwjmHiyh0EG9eImapSU3Gkb1oKUxyHFh4RjZEMuYVbF5vVu0uVRNDCBpllQeMzXTIW2J0v//H6H0SvKGJYQ==
 
-"@3rdweb/sdk@^2.0.0-25":
-  version "2.0.0-25"
-  resolved "https://registry.yarnpkg.com/@3rdweb/sdk/-/sdk-2.0.0-25.tgz#9094200a4d8c69c72c71ad7f1fc7a1cb2aa4468b"
-  integrity sha512-PRTUbETDAJHNK7TVcWUuVwnrm0s9H1OWt8EPQ0Rh2lfDly1KRcEN0NFJzzxNdJ5bO/gYC9uGRB6Hsd/U83rgKA==
+"@3rdweb/sdk@^2.0.0-26":
+  version "2.0.0-26"
+  resolved "https://registry.yarnpkg.com/@3rdweb/sdk/-/sdk-2.0.0-26.tgz#eb0990e19b4649f35e4b0953bd29c760cd678000"
+  integrity sha512-fKMDFe/0MR0PtPXX1lKWy/XWp1DUU/mTj0L7KFyjc0au5e40fCr6PLcxhE8hjULvAGNC9/7dMosksPKoCbJy8g==
   dependencies:
-    "@3rdweb/contracts" "^2.0.1-26"
+    "@3rdweb/contracts" "2.0.1-36"
     "@ethersproject/bignumber" "^5.5.0"
     "@ethersproject/bytes" "^5.4.0"
     "@ethersproject/constants" "^5.5.0"
@@ -22,9 +22,7 @@
     "@web-std/file" "^3.0.0"
     deep-equal "^2.0.5"
     eventemitter2 "^6.4.5"
-    events "^3.3.0"
     form-data "^4.0.0"
-    json2typescript "^1.5.0-rc.0"
     keccak256 "^1.0.6"
     tiny-invariant "^1.2.0"
     uuid "^8.3.2"
@@ -3880,7 +3878,7 @@ [email protected], eventemitter3@^4.0.7:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
-events@^3.0.0, events@^3.3.0:
+events@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
@@ -4621,11 +4619,6 @@ json-stable-stringify@^1.0.1:
   dependencies:
     jsonify "~0.0.0"
 
-json2typescript@^1.5.0-rc.0:
-  version "1.5.0-rc.0"
-  resolved "https://registry.yarnpkg.com/json2typescript/-/json2typescript-1.5.0-rc.0.tgz#73f2101b438a0ca3a393c54cbcb7c0508e73313a"
-  integrity sha512-9v0Q6P38nV9zznaZxHRA8THp5oEGzancSUGgm8NXZSVRU/X8h/RlpP5hutP15J5sMODdx2pz9Fs/SNEpCTFAfA==
-
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"