Use useClaimerProofs

Author: nachoiacovino

package.json

@@ -49,7 +49,7 @@
     "@chakra-ui/react": "^2.1.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@thirdweb-dev/react": "^3.5.1-nightly-4e7b293",
+    "@thirdweb-dev/react": "file:.yalc/@thirdweb-dev/react",
     "@thirdweb-dev/sdk": "^3.5.1-nightly-4e7b293",
     "@thirdweb-dev/storage": "^1.0.4",
     "color": "^4.2.3",

src/shared/claim-button-erc1155.tsx

@@ -16,6 +16,7 @@ import {
   useActiveClaimCondition,
   useAddress,
   useClaimConditions,
+  useClaimerProofs,
   useClaimIneligibilityReasons,
   useTotalCirculatingSupply,
   Web3Button,
@@ -47,9 +48,8 @@ export const ERC1155ClaimButton: React.FC<ClaimButtoProps> = ({
   const debouncedQuantity = useDebounce(quantity, 500);
 
   const claimConditions = useClaimConditions(contract);
-  const activeClaimCondition = useActiveClaimCondition(contract, tokenId, {
-    withAllowList: true,
-  });
+  const activeClaimCondition = useActiveClaimCondition(contract, tokenId);
+  const claimerProofs = useClaimerProofs(contract, address || "", tokenId);
   const claimIneligibilityReasons = useClaimIneligibilityReasons(
     contract,
     {
@@ -119,9 +119,7 @@ export const ERC1155ClaimButton: React.FC<ClaimButtoProps> = ({
       bnMaxClaimable = perTransactionClaimable;
     }
 
-    const snapshotClaimable = activeClaimCondition.data?.snapshot?.find(
-      (u) => u.address.toLowerCase() === address?.toLowerCase(),
-    )?.maxClaimable;
+    const snapshotClaimable = claimerProofs.data?.maxClaimable;
 
     if (snapshotClaimable) {
       if (snapshotClaimable === "0") {
@@ -148,11 +146,10 @@ export const ERC1155ClaimButton: React.FC<ClaimButtoProps> = ({
     }
     return max.toNumber();
   }, [
+    claimerProofs.data?.maxClaimable,
+    totalAvailableSupply,
     activeClaimCondition.data?.maxClaimableSupply,
     activeClaimCondition.data?.maxClaimablePerWallet,
-    activeClaimCondition.data?.snapshot,
-    address,
-    totalAvailableSupply,
   ]);
 
   const isSoldOut = useMemo(() => {

src/shared/claim-button-erc20.tsx

@@ -16,6 +16,7 @@ import {
   useActiveClaimCondition,
   useAddress,
   useClaimConditions,
+  useClaimerProofs,
   useClaimIneligibilityReasons,
   useTokenSupply,
   Web3Button,
@@ -45,9 +46,8 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
   const debouncedQuantity = useDebounce(quantity, 500);
 
   const claimConditions = useClaimConditions(contract);
-  const activeClaimCondition = useActiveClaimCondition(contract, undefined, {
-    withAllowList: true,
-  });
+  const activeClaimCondition = useActiveClaimCondition(contract);
+  const claimerProofs = useClaimerProofs(contract, address || "");
   const claimIneligibilityReasons = useClaimIneligibilityReasons(contract, {
     quantity: debouncedQuantity,
     walletAddress: address || "",
@@ -115,9 +115,7 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
       bnMaxClaimable = perTransactionClaimable;
     }
 
-    const snapshotClaimable = activeClaimCondition.data?.snapshot?.find(
-      (u) => u.address.toLowerCase() === address?.toLowerCase(),
-    )?.maxClaimable;
+    const snapshotClaimable = claimerProofs.data?.maxClaimable;
 
     if (snapshotClaimable) {
       if (snapshotClaimable === "0") {
@@ -144,11 +142,10 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
     }
     return max.toNumber();
   }, [
+    claimerProofs.data?.maxClaimable,
+    totalAvailableSupply,
     activeClaimCondition.data?.maxClaimableSupply,
     activeClaimCondition.data?.maxClaimablePerWallet,
-    activeClaimCondition.data?.snapshot,
-    address,
-    totalAvailableSupply,
   ]);
 
   const isSoldOut = useMemo(() => {

src/shared/claim-button-erc721.tsx

@@ -17,6 +17,7 @@ import {
   useAddress,
   useClaimConditions,
   useClaimedNFTSupply,
+  useClaimerProofs,
   useClaimIneligibilityReasons,
   useUnclaimedNFTSupply,
   Web3Button,
@@ -46,9 +47,8 @@ export const ERC721ClaimButton: React.FC<ClaimButtoProps> = ({
   const debouncedQuantity = useDebounce(quantity, 500);
 
   const claimConditions = useClaimConditions(contract);
-  const activeClaimCondition = useActiveClaimCondition(contract, undefined, {
-    withAllowList: true,
-  });
+  const activeClaimCondition = useActiveClaimCondition(contract);
+  const claimerProofs = useClaimerProofs(contract, address || "");
   const claimIneligibilityReasons = useClaimIneligibilityReasons(contract, {
     quantity: debouncedQuantity,
     walletAddress: address || "",
@@ -104,9 +104,7 @@ export const ERC721ClaimButton: React.FC<ClaimButtoProps> = ({
       bnMaxClaimable = perTransactionClaimable;
     }
 
-    const snapshotClaimable = activeClaimCondition.data?.snapshot?.find(
-      (u) => u.address.toLowerCase() === address?.toLowerCase(),
-    )?.maxClaimable;
+    const snapshotClaimable = claimerProofs.data?.maxClaimable;
 
     if (snapshotClaimable) {
       if (snapshotClaimable === "0") {
@@ -135,11 +133,10 @@ export const ERC721ClaimButton: React.FC<ClaimButtoProps> = ({
     }
     return max.toNumber();
   }, [
+    claimerProofs.data?.maxClaimable,
+    unclaimedSupply.data,
     activeClaimCondition.data?.maxClaimableSupply,
     activeClaimCondition.data?.maxClaimablePerWallet,
-    activeClaimCondition.data?.snapshot,
-    address,
-    unclaimedSupply.data,
   ]);
 
   const isSoldOut = useMemo(() => {