Merge pull request #13 from citydaoproject/mnorman-issue3

chore: [#3] added back not eligible modal

components/ClaimButton.tsx

@@ -1,36 +1,118 @@
 import React from 'react';
 import DefaultButton, { DefaultButtonProps } from './common/DefaultButton';
 
-export interface ClaimButtonProps extends DefaultButtonProps {
+export interface ClaimButtonProps extends Omit<DefaultButtonProps, 'onClick'> {
   allowance: number;
   walletAlreadyClaimed: number;
   withinClaimPeriod: boolean;
+  onClaim: () => void;
+  onShowMinted: () => void;
+  onNotEligible: () => void;
 }
 
-const ClaimButton = ({ allowance, walletAlreadyClaimed, withinClaimPeriod, disabled, ...rest }: ClaimButtonProps) => {
+enum ClaimStatus {
+  READY_TO_CLAIM = 'READY_TO_CLAIM',
+  SOME_CLAIMED = 'SOME_CLAIMED',
+  ALL_CLAIMED = 'ALL_CLAIMED',
+  NOT_ELIGIBLE = 'NOT_ELIGIBLE',
+  OUTSIDE_CLAIM_PERIOD = 'OUTSIDE_CLAIM_PERIOD',
+}
+
+const ClaimButton = ({
+  allowance,
+  walletAlreadyClaimed,
+  withinClaimPeriod,
+  disabled,
+  onClaim,
+  onShowMinted,
+  onNotEligible,
+  ...rest
+}: ClaimButtonProps) => {
+  const claimStatus = determineClaimStatus(allowance, walletAlreadyClaimed, withinClaimPeriod);
+  console.log('ClaimStatus:', claimStatus);
+
   const getClaimButtonText = () => {
-    if (!withinClaimPeriod) {
-      return 'CLAIM NFTS';
+    switch (claimStatus) {
+      case ClaimStatus.READY_TO_CLAIM:
+      case ClaimStatus.SOME_CLAIMED:
+        return `Claim ${allowance - walletAlreadyClaimed} NFTs`;
+
+      case ClaimStatus.ALL_CLAIMED:
+        return `${walletAlreadyClaimed} NFTs Claimed`;
+
+      case ClaimStatus.NOT_ELIGIBLE:
+      case ClaimStatus.OUTSIDE_CLAIM_PERIOD:
+        return 'Claim NFTs';
+
+      default:
+        return 'Claim NFTs';
     }
+  };
 
-    if (allowance > 0 && allowance > walletAlreadyClaimed) {
-      return `CLAIM ${allowance - walletAlreadyClaimed} NFTS`;
+  const isDisabled = () => {
+    if (disabled) {
+      return true;
     }
 
-    if (walletAlreadyClaimed > 0) {
-      return `${walletAlreadyClaimed} NFTS CLAIMED`;
+    switch (claimStatus) {
+      case ClaimStatus.READY_TO_CLAIM:
+      case ClaimStatus.SOME_CLAIMED:
+      case ClaimStatus.ALL_CLAIMED:
+      case ClaimStatus.NOT_ELIGIBLE:
+        return false;
+
+      case ClaimStatus.OUTSIDE_CLAIM_PERIOD:
+        return true;
+
+      default:
+        return false;
     }
+  };
 
-    return 'CLAIM NFTS';
+  const handleClick = () => {
+    switch (claimStatus) {
+      case ClaimStatus.READY_TO_CLAIM:
+      case ClaimStatus.SOME_CLAIMED:
+        onClaim();
+        break;
+
+      case ClaimStatus.ALL_CLAIMED:
+        onShowMinted();
+        break;
+
+      case ClaimStatus.NOT_ELIGIBLE:
+        onNotEligible();
+        break;
+
+      default:
+        break;
+    }
   };
 
   return (
-    <DefaultButton
-      {...rest}
-      disabled={disabled || !withinClaimPeriod || (walletAlreadyClaimed === 0 && allowance === 0)}
-    >
+    <DefaultButton {...rest} disabled={isDisabled()} onClick={handleClick}>
       {getClaimButtonText()}
     </DefaultButton>
   );
 };
 export default ClaimButton;
+
+const determineClaimStatus = (allowance: number, walletAlreadyClaimed: number, withinClaimPeriod: boolean) => {
+  if (!withinClaimPeriod) {
+    return ClaimStatus.OUTSIDE_CLAIM_PERIOD;
+  }
+
+  if (allowance === 0) {
+    return ClaimStatus.NOT_ELIGIBLE;
+  }
+
+  if (walletAlreadyClaimed === 0) {
+    return ClaimStatus.READY_TO_CLAIM;
+  }
+
+  if (walletAlreadyClaimed < allowance) {
+    return ClaimStatus.SOME_CLAIMED;
+  }
+
+  return ClaimStatus.ALL_CLAIMED;
+};

pages/index.tsx

@@ -26,7 +26,8 @@ function hashToken(address: keyof Addresses, allowance: number) {
   return Buffer.from(ethers.utils.solidityKeccak256(['address', 'uint256'], [address, allowance]).slice(2), 'hex');
 }
 const Home: NextPage = () => {
-  const { handleOpenClaimModal, handleCloseClaimModal, handleOpenClaimSuccessModal } = useModal();
+  const { handleOpenClaimModal, handleCloseClaimModal, handleOpenClaimSuccessModal, handleOpenNotEligibleModal } =
+    useModal();
   const [currentView, setCurrentView] = useState<VIEWS>(VIEWS.INITIAL_VIEW);
 
   const { account: address, connect, disconnect, chainId } = useWallet();
@@ -158,9 +159,9 @@ const Home: NextPage = () => {
               allowance={allowance}
               withinClaimPeriod={claimPeriodStart < Date.now() && claimPeriodEnd > Date.now()}
               disabled={!address}
-              onClick={
-                walletAlreadyClaimed === 0 || walletAlreadyClaimed < allowance ? handleOpenClaimModal : showMintedNfts
-              }
+              onClaim={handleOpenClaimModal}
+              onShowMinted={showMintedNfts}
+              onNotEligible={handleOpenNotEligibleModal}
             />
             <ParcelProperties parcelProperties={parcelProperties} />
           </div>