Fix wrong error message (#75)

Author: nachoiacovino

src/shared/claim-button-erc1155.tsx

@@ -15,6 +15,7 @@ import {
 import {
   useActiveClaimCondition,
   useAddress,
+  useClaimConditions,
   useClaimIneligibilityReasons,
   useTotalCirculatingSupply,
   Web3Button,
@@ -45,6 +46,7 @@ export const ERC1155ClaimButton: React.FC<ClaimButtoProps> = ({
 
   const debouncedQuantity = useDebounce(quantity, 500);
 
+  const claimConditions = useClaimConditions(contract);
   const activeClaimCondition = useActiveClaimCondition(contract, tokenId);
 
   const claimIneligibilityReasons = useClaimIneligibilityReasons(
@@ -234,14 +236,31 @@ export const ERC1155ClaimButton: React.FC<ClaimButtoProps> = ({
   const colors = chakraTheme.colors;
   const accentColor = colors[primaryColor as keyof typeof colors][500];
 
-  if (activeClaimCondition.isError) {
+  if (
+    claimConditions.data?.length === 0 ||
+    claimConditions.data?.every((cc) => cc.maxQuantity === "0")
+  ) {
     return (
       <Text size="label.md" color="red.500">
         This drop is not ready to be minted yet. (No claim condition set)
       </Text>
     );
   }
 
+  if (
+    (claimConditions.data &&
+      claimConditions.data.length > 0 &&
+      activeClaimCondition.isError) ||
+    (activeClaimCondition.data &&
+      activeClaimCondition.data.startTime > new Date())
+  ) {
+    return (
+      <Text size="label.md" color={`${primaryColor}.500`}>
+        Drop is starting soon. Please check back later.
+      </Text>
+    );
+  }
+
   return (
     <Stack spacing={4} align="center" w="100%">
       <Flex

src/shared/claim-button-erc20.tsx

@@ -15,6 +15,7 @@ import {
 import {
   useActiveClaimCondition,
   useAddress,
+  useClaimConditions,
   useClaimIneligibilityReasons,
   Web3Button,
 } from "@thirdweb-dev/react";
@@ -42,6 +43,7 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
 
   const debouncedQuantity = useDebounce(quantity, 500);
 
+  const claimConditions = useClaimConditions(contract);
   const activeClaimCondition = useActiveClaimCondition(contract);
   const claimIneligibilityReasons = useClaimIneligibilityReasons(contract, {
     quantity: debouncedQuantity,
@@ -198,14 +200,31 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
   const colors = chakraTheme.colors;
   const accentColor = colors[primaryColor as keyof typeof colors][500];
 
-  if (activeClaimCondition.isError) {
+  if (
+    claimConditions.data?.length === 0 ||
+    claimConditions.data?.every((cc) => cc.maxQuantity === "0")
+  ) {
     return (
       <Text size="label.md" color="red.500">
         This drop is not ready to be minted yet. (No claim condition set)
       </Text>
     );
   }
 
+  if (
+    (claimConditions.data &&
+      claimConditions.data.length > 0 &&
+      activeClaimCondition.isError) ||
+    (activeClaimCondition.data &&
+      activeClaimCondition.data.startTime > new Date())
+  ) {
+    return (
+      <Text size="label.md" color={`${primaryColor}.500`}>
+        Drop is starting soon. Please check back later.
+      </Text>
+    );
+  }
+
   return (
     <Stack spacing={4} align="center" w="100%">
       <Flex

src/shared/claim-button-erc721.tsx

@@ -15,6 +15,7 @@ import {
 import {
   useActiveClaimCondition,
   useAddress,
+  useClaimConditions,
   useClaimedNFTSupply,
   useClaimIneligibilityReasons,
   useUnclaimedNFTSupply,
@@ -44,6 +45,7 @@ export const ERC721ClaimButton: React.FC<ClaimButtoProps> = ({
 
   const debouncedQuantity = useDebounce(quantity, 500);
 
+  const claimConditions = useClaimConditions(contract);
   const activeClaimCondition = useActiveClaimCondition(contract);
   const claimIneligibilityReasons = useClaimIneligibilityReasons(contract, {
     quantity: debouncedQuantity,
@@ -223,14 +225,32 @@ export const ERC721ClaimButton: React.FC<ClaimButtoProps> = ({
 
   const colors = chakraTheme.colors;
   const accentColor = colors[primaryColor as keyof typeof colors][500];
-  if (activeClaimCondition.isError) {
+
+  if (
+    claimConditions.data?.length === 0 ||
+    claimConditions.data?.every((cc) => cc.maxQuantity === "0")
+  ) {
     return (
       <Text size="label.md" color="red.500">
         This drop is not ready to be minted yet. (No claim condition set)
       </Text>
     );
   }
 
+  if (
+    (claimConditions.data &&
+      claimConditions.data.length > 0 &&
+      activeClaimCondition.isError) ||
+    (activeClaimCondition.data &&
+      activeClaimCondition.data.startTime > new Date())
+  ) {
+    return (
+      <Text size="label.md" color={`${primaryColor}.500`}>
+        Drop is starting soon. Please check back later.
+      </Text>
+    );
+  }
+
   return (
     <Stack spacing={4} align="center" w="100%">
       <Flex

src/utils/parseIneligibility.ts

@@ -15,15 +15,15 @@ export function parseIneligibility(
     reason === ClaimEligibility.NoActiveClaimPhase ||
     reason === ClaimEligibility.NoClaimConditionSet
   ) {
-    return "This drop is not ready to be claimed.";
+    return "This drop is not ready to be minted.";
   } else if (reason === ClaimEligibility.NotEnoughTokens) {
-    return "You don't have enough currency to claim.";
+    return "You don't have enough currency to mint.";
   } else if (reason === ClaimEligibility.AddressNotAllowed) {
     if (quantity > 1) {
-      return `You are not eligible to claim ${quantity} tokens.`;
+      return `You are not eligible to mint ${quantity} tokens.`;
     }
 
-    return "You are not eligible to claim at this time.";
+    return "You are not eligible to mint at this time.";
   }
 
   return reason;