From 450aeedf2001b2f6d1d2a0c2bacb8dcd20281513 Mon Sep 17 00:00:00 2001
From: "Michael D. Norman" <michael.norman@denormans.com>
Date: Wed, 11 May 2022 22:57:15 -0500
Subject: [PATCH] chore: [#3] disable claim button when no more to claim

- extracted parcel nft loading logic
---
 .github/workflows/ci.yml                      |   6 +-
 components/ClaimButton.tsx                    |  27 +++
 components/common/DefaultButton.tsx           |   8 +
 constants/ethereum.ts                         |  12 ++
 .../ParcelProperties/ParcelProperties.tsx     |  24 +--
 contants.ts                                   |   6 -
 context/StateProvider.tsx                     |  21 +-
 hooks/contractHooks.ts                        | 157 +++++++++++++++
 hooks/parcelNFT.ts                            |  60 ++++++
 hooks/useWallet.tsx                           |  64 ++++---
 pages/index.tsx                               | 180 ++++++++----------
 11 files changed, 394 insertions(+), 171 deletions(-)
 create mode 100644 components/ClaimButton.tsx
 create mode 100644 components/common/DefaultButton.tsx
 create mode 100644 constants/ethereum.ts
 delete mode 100644 contants.ts
 create mode 100644 hooks/contractHooks.ts
 create mode 100644 hooks/parcelNFT.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 077cc90..4119316 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -17,8 +17,8 @@ jobs:
       - name: Check out code
         uses: actions/checkout@v3
       - name: Install dependencies
-        run: npm ci
+        run: yarn install --frozen-lockfile
       - name: Build
-        run: npm run build
+        run: yarn build
       - name: Lint
-        run: npm run lint
+        run: yarn lint
diff --git a/components/ClaimButton.tsx b/components/ClaimButton.tsx
new file mode 100644
index 0000000..eb701e2
--- /dev/null
+++ b/components/ClaimButton.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import DefaultButton, { DefaultButtonProps } from './common/DefaultButton';
+
+export interface ClaimButtonProps extends DefaultButtonProps {
+  allowance: number;
+  walletAlreadyClaimed: number;
+}
+
+const ClaimButton = ({ allowance, walletAlreadyClaimed, disabled, ...rest }: ClaimButtonProps) => {
+  const getClaimButtonText = () => {
+    if (walletAlreadyClaimed === 0 && allowance === 0) {
+      return 'CLAIM PLOTS';
+    } else if (walletAlreadyClaimed > 0) {
+      return `${walletAlreadyClaimed} PLOTS CLAIMED`;
+    } else if (allowance > 0) {
+      return `CLAIM ${allowance} PLOTS`;
+    }
+    return '';
+  };
+
+  return (
+    <DefaultButton {...rest} disabled={disabled || allowance <= walletAlreadyClaimed}>
+      {getClaimButtonText()}
+    </DefaultButton>
+  );
+};
+export default ClaimButton;
diff --git a/components/common/DefaultButton.tsx b/components/common/DefaultButton.tsx
new file mode 100644
index 0000000..4efe67d
--- /dev/null
+++ b/components/common/DefaultButton.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+export interface DefaultButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+const DefaultButton = ({ disabled, ...rest }: DefaultButtonProps) => (
+  <button {...rest} disabled={disabled} className={disabled ? 'border-button' : ''} />
+);
+export default DefaultButton;
diff --git a/constants/ethereum.ts b/constants/ethereum.ts
new file mode 100644
index 0000000..52982d6
--- /dev/null
+++ b/constants/ethereum.ts
@@ -0,0 +1,12 @@
+import { ZERO_ADDRESS } from '@citydao/parcel-contracts/dist/src/constants/accounts';
+import { addresses } from '../data/whiteListedAddresses';
+
+export const MAX_NFT_TO_MINT = Object.values(addresses).reduce((prev, curr) => prev + curr, 0);
+
+const AGREEMENT_IPFS_HASH = 'QmUbFb12ZEAyoqGUEsnS8fxh78nowEqNwvn7BbAfryRRay';
+export const AGREEMENT_IPFS_URL = `https://ipfs.io/ipfs/${AGREEMENT_IPFS_HASH}`;
+
+export const PARCEL0_NFT_CONTRACT_ADDRESSES: { [key: number]: string } = {
+  1: ZERO_ADDRESS,
+  4: '0x209723a65844093Ad769d557a22742e0f661959d',
+};
diff --git a/containers/ParcelProperties/ParcelProperties.tsx b/containers/ParcelProperties/ParcelProperties.tsx
index 8ba9542..6a0830a 100644
--- a/containers/ParcelProperties/ParcelProperties.tsx
+++ b/containers/ParcelProperties/ParcelProperties.tsx
@@ -1,28 +1,14 @@
-import { FC } from "react";
-import {
-  ParcelProperty,
-  ParcelPropertyProps,
-} from "../../components/ParcelProperty";
-import { AGREEMENT_IPFS_URL } from "../../contants";
+import { FC } from 'react';
+import { ParcelProperty, ParcelPropertyProps } from '../../components/ParcelProperty';
+import { AGREEMENT_IPFS_URL } from '../../constants/ethereum';
 export const ParcelProperties: FC<{
   parcelProperties: ParcelPropertyProps[];
 }> = ({ parcelProperties }) => (
   <div className="properties">
     {parcelProperties.map(({ name, value, tooltip, iconPath }, index) => (
-      <ParcelProperty
-        name={name}
-        key={index}
-        value={value}
-        tooltip={tooltip}
-        iconPath={iconPath}
-      />
+      <ParcelProperty name={name} key={index} value={value} tooltip={tooltip} iconPath={iconPath} />
     ))}
-    <a
-      href={AGREEMENT_IPFS_URL}
-      target="_blank"
-      className="link-external"
-      rel="noreferrer"
-    >
+    <a href={AGREEMENT_IPFS_URL} target="_blank" className="link-external" rel="noreferrer">
       VIEW FULL LICENSE
     </a>
   </div>
diff --git a/contants.ts b/contants.ts
deleted file mode 100644
index f8ad977..0000000
--- a/contants.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { addresses } from './data/whiteListedAddresses';
-
-export const MAX_NFT_TO_MINT = Object.values(addresses).reduce((prev, curr) => prev + curr, 0);
-
-const AGREEMENT_IPFS_HASH = 'QmUbFb12ZEAyoqGUEsnS8fxh78nowEqNwvn7BbAfryRRay';
-export const AGREEMENT_IPFS_URL = `https://ipfs.io/ipfs/${AGREEMENT_IPFS_HASH}`;
diff --git a/context/StateProvider.tsx b/context/StateProvider.tsx
index 22b039f..fa9ba88 100644
--- a/context/StateProvider.tsx
+++ b/context/StateProvider.tsx
@@ -1,10 +1,13 @@
-import { reducer, Actions } from "../reducer/";
-import React, { createContext, ReactNode, useContext, useReducer } from "react";
+import { Provider } from '@ethersproject/abstract-provider';
+import { JsonRpcProvider } from '@ethersproject/providers';
+import React, { createContext, ReactNode, useContext, useReducer } from 'react';
+import { Actions, reducer } from '../reducer/';
+
 export type InitialStateType = {
-  provider?: any;
-  web3Provider?: any;
-  account?: string | null;
-  chainId?: number | null;
+  provider: Provider | null;
+  web3Provider: JsonRpcProvider | null;
+  account: string | null;
+  chainId: number | null;
 };
 
 const initialState: InitialStateType = {
@@ -27,11 +30,7 @@ type AppProviderProps = {
 export const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  return (
-    <AppContext.Provider value={{ state, dispatch }}>
-      {children}
-    </AppContext.Provider>
-  );
+  return <AppContext.Provider value={{ state, dispatch }}>{children}</AppContext.Provider>;
 };
 
 export const useAppContext = () => useContext(AppContext);
diff --git a/hooks/contractHooks.ts b/hooks/contractHooks.ts
new file mode 100644
index 0000000..49d9a47
--- /dev/null
+++ b/hooks/contractHooks.ts
@@ -0,0 +1,157 @@
+import { ZERO_ADDRESS } from '@citydao/parcel-contracts/dist/src/constants/accounts';
+import { JsonRpcProvider, Provider } from '@ethersproject/providers';
+import { Contract, ContractFactory, Signer } from 'ethers';
+import { useEffect, useMemo, useState } from 'react';
+import useWallet from './useWallet';
+
+export interface ContractLoaderHook<C extends Contract, K extends KeyOfGetterFunction<C>> {
+  contract?: C;
+  values?: ContractValues<C, K>;
+  refetch: () => Promise<void>;
+}
+
+export type ContractValues<C extends Contract, K extends KeyOfGetterFunction<C>> = {
+  [P in K]: Awaited<ReturnType<C[K]>>;
+};
+
+export type KeyOfType<T, V> = keyof {
+  [P in keyof T as T[P] extends V ? P : never]: any;
+};
+
+export type KeyOfGetterFunction<T> = KeyOfType<T, () => any>;
+
+export const useContractLoader = <
+  F extends ContractFactory,
+  C extends FactoryContract<F>,
+  K extends KeyOfGetterFunction<C>,
+>(
+  factory: F,
+  address: string,
+  keys: K[] = [],
+): ContractLoaderHook<C, K> => {
+  const { web3Provider } = useWallet();
+
+  const contract = useMemo(
+    () => attachContract<F, C>(factory, address, web3Provider) || undefined,
+    [factory, address, web3Provider],
+  );
+  const [values, setValues] = useState<ContractValues<C, K>>();
+
+  useEffect(() => {
+    // noinspection JSIgnoredPromiseFromCall
+    fetchValues();
+  }, [contract]);
+
+  const fetchValues = async () => {
+    if (!contract) {
+      setValues(undefined);
+      return;
+    }
+
+    const fetchedValues = await Promise.all(keys.map((key) => contract[key]()));
+
+    setValues(
+      fetchedValues.reduce((acc, fetchedValue, index) => {
+        acc[keys[index]] = fetchedValue;
+        return acc;
+      }, {} as ContractValues<C, K>),
+    );
+  };
+
+  return { contract, values, refetch: fetchValues };
+};
+
+export const useInterfaceLoader = <C extends Contract, K extends KeyOfGetterFunction<C>>(
+  factory: InterfaceFactoryConnector<C>,
+  address: string,
+  keys: K[] = [],
+): ContractLoaderHook<C, K> => {
+  const { web3Provider } = useWallet();
+
+  const contract = useMemo(
+    () => attachInterface<C>(factory, address, web3Provider) || undefined,
+    [address, web3Provider],
+  );
+  const [values, setValues] = useState<ContractValues<C, K>>();
+
+  useEffect(() => {
+    // noinspection JSIgnoredPromiseFromCall
+    fetchValues();
+  }, [contract]);
+
+  const fetchValues = async () => {
+    if (!contract) {
+      setValues(undefined);
+      return;
+    }
+
+    const fetchedValues = await Promise.all(keys.map((key) => contract[key]()));
+
+    setValues(
+      fetchedValues.reduce((acc, fetchedValue, index) => {
+        acc[keys[index]] = fetchedValue;
+        return acc;
+      }, {} as ContractValues<C, K>),
+    );
+  };
+
+  return { contract, values, refetch: fetchValues };
+};
+
+export interface EthereumProviderHook {
+  provider: Provider | null;
+  signer: Signer | null;
+}
+
+export const useEthereumProvider = (): EthereumProviderHook => {
+  const { web3Provider } = useWallet();
+  const signer = web3Provider?.getSigner();
+
+  return { provider: web3Provider, signer: signer || null };
+};
+
+export type FactoryContract<F extends ContractFactory> = Contract & Awaited<ReturnType<F['deploy']>>;
+
+export const attachContract = <F extends ContractFactory, C extends FactoryContract<F>>(
+  factory: F,
+  address: string,
+  provider: JsonRpcProvider | null,
+): C | null => {
+  if (address === '' || address === ZERO_ADDRESS) {
+    return null;
+  }
+
+  const signer = provider?.getSigner();
+  if (signer) {
+    return factory.attach(address).connect(signer) as C;
+  }
+
+  if (provider) {
+    return factory.attach(address).connect(provider) as C;
+  }
+
+  return null;
+};
+
+export type InterfaceFactoryConnector<C extends Contract> = (address: string, provider: Signer | Provider) => C;
+
+export const attachInterface = <C extends Contract>(
+  connect: InterfaceFactoryConnector<C>,
+  address: string,
+  provider: JsonRpcProvider | null,
+): C | null => {
+  if (address === '' || address === ZERO_ADDRESS) {
+    return null;
+  }
+
+  const signer = provider?.getSigner();
+  if (signer) {
+    return connect(address, signer) as C;
+  }
+
+  if (provider) {
+    return connect(address, provider) as C;
+  }
+
+  return null;
+};
diff --git a/hooks/parcelNFT.ts b/hooks/parcelNFT.ts
new file mode 100644
index 0000000..1973a3c
--- /dev/null
+++ b/hooks/parcelNFT.ts
@@ -0,0 +1,60 @@
+import { ParcelNFT__factory } from '@citydao/parcel-contracts/dist/types/contracts/factories/ParcelNFT__factory';
+import { ParcelNFT } from '@citydao/parcel-contracts/dist/types/contracts/ParcelNFT';
+import { ContractAddress } from '@citydao/parcel-contracts/src/constants/accounts';
+import { useEffect, useState } from 'react';
+import { addresses } from '../data/whiteListedAddresses';
+import { useContractLoader } from './contractHooks';
+import useWallet from './useWallet';
+
+export interface ParcelNFTHook {
+  parcelNFTDetails: ParcelNFTDetails | null;
+  refetch: () => Promise<void>;
+}
+
+export interface ParcelNFTDetails {
+  parcelNFT: ParcelNFT;
+  totalSupply: number;
+  walletAlreadyClaimed: number;
+  allowance: number;
+}
+
+export const useParcelNFT = (contractAddress: ContractAddress): ParcelNFTHook => {
+  const { account } = useWallet();
+  const {
+    contract: parcelNFT,
+    values,
+    refetch: refetchValues,
+  } = useContractLoader(new ParcelNFT__factory(), contractAddress, ['totalSupply']);
+  const [walletAlreadyClaimed, setWalletAlreadyClaimed] = useState<number>(0);
+
+  const parcelNFTDetails: ParcelNFTDetails | null =
+    parcelNFT && values && account
+      ? {
+          parcelNFT: parcelNFT,
+          walletAlreadyClaimed,
+          totalSupply: values.totalSupply.toNumber(),
+          allowance: addresses[account.toLowerCase()],
+        }
+      : null;
+
+  useEffect(() => {
+    // noinspection JSIgnoredPromiseFromCall
+    loadFields();
+  }, [account, parcelNFT]);
+
+  const loadFields = async () => {
+    if (!parcelNFT || !account) {
+      setWalletAlreadyClaimed(0);
+      return;
+    }
+
+    const alreadyClaimed = (await parcelNFT.alreadyClaimed(account)).toNumber();
+    setWalletAlreadyClaimed(alreadyClaimed);
+  };
+
+  const refetch = async () => {
+    await Promise.all([refetchValues(), loadFields()]);
+  };
+
+  return { parcelNFTDetails: parcelNFTDetails, refetch };
+};
diff --git a/hooks/useWallet.tsx b/hooks/useWallet.tsx
index 75f7535..ec37583 100644
--- a/hooks/useWallet.tsx
+++ b/hooks/useWallet.tsx
@@ -1,10 +1,13 @@
 // source: https://github.com/Bounty-Hunt-2022/bounty-hunt/blob/main/interface/state/wallet/hook.ts
-import { useCallback, useEffect } from "react";
-import { useAppContext } from "../context/StateProvider";
-import { ActionTypes } from "../reducer";
-import { ethers, providers } from "ethers";
-import Web3Modal from "web3modal";
-import WalletConnectProvider from "@walletconnect/web3-provider";
+import { Provider } from '@ethersproject/abstract-provider';
+import { JsonRpcProvider } from '@ethersproject/providers';
+import WalletConnectProvider from '@walletconnect/web3-provider';
+import { ethers, providers } from 'ethers';
+import { useCallback, useEffect } from 'react';
+import Web3Modal from 'web3modal';
+import { useAppContext } from '../context/StateProvider';
+import { ActionTypes } from '../reducer';
+
 const INFURA_ID = process.env.NEXT_PUBLIC_INFURA_ID;
 
 const providerOptions = {
@@ -16,15 +19,24 @@ const providerOptions = {
   },
 };
 let web3Modal: any;
-if (typeof window !== "undefined") {
+if (typeof window !== 'undefined') {
   web3Modal = new Web3Modal({
-    network: "mainnet", // optional
+    network: 'mainnet', // optional
     cacheProvider: true,
     providerOptions, // required
   });
 }
 
-const useWallet = () => {
+export interface WalletHook {
+  provider: Provider | null;
+  web3Provider: JsonRpcProvider | null;
+  account: string | null;
+  chainId: number | null;
+  connect: () => Promise<void>;
+  disconnect: () => Promise<void>;
+}
+
+const useWallet = (): WalletHook => {
   const { state, dispatch } = useAppContext();
   const provider = state.provider;
   const connect = useCallback(async function () {
@@ -51,27 +63,25 @@ const useWallet = () => {
   const disconnect = useCallback(
     async function () {
       await web3Modal.clearCachedProvider();
-      if (
-        state.provider?.disconnect &&
-        typeof state.provider.disconnect === "function"
-      ) {
-        await state.provider.disconnect();
+
+      const providerish: any = provider;
+      if (providerish?.disconnect && typeof providerish.disconnect === 'function') {
+        await providerish.disconnect();
       }
       dispatch({
         type: ActionTypes.resetWeb3Provider,
         payload: {},
       });
     },
-    [state.provider]
+    [state.provider],
   );
 
   useEffect(() => {
     if (web3Modal.cachedProvider) {
+      // noinspection JSIgnoredPromiseFromCall
       connect();
     } else {
-      const rpcProvider = new ethers.providers.JsonRpcProvider(
-        "https://mainnet.infura.io/v3/" + INFURA_ID
-      );
+      const rpcProvider = new ethers.providers.JsonRpcProvider('https://mainnet.infura.io/v3/' + INFURA_ID);
       dispatch({
         type: ActionTypes.initialWeb3Provider,
         payload: {
@@ -95,7 +105,7 @@ const useWallet = () => {
     if (provider?.on) {
       const handleAccountsChanged = (accounts: string[]) => {
         // eslint-disable-next-line no-console
-        console.log("accountsChanged", accounts);
+        console.log('accountsChanged', accounts);
         dispatch({
           type: ActionTypes.setAddress,
           payload: { account: accounts[0] },
@@ -104,26 +114,26 @@ const useWallet = () => {
 
       // https://docs.ethers.io/v5/concepts/best-practices/#best-practices--network-changes
       const handleChainChanged = (_hexChainId: string) => {
-        console.log("chainChanged", _hexChainId);
+        console.log('chainChanged', _hexChainId);
         window.location.reload();
       };
 
       const handleDisconnect = (error: { code: number; message: string }) => {
         // eslint-disable-next-line no-console
-        console.log("disconnect why", error);
+        console.log('disconnect why', error);
         disconnect();
       };
 
-      provider.on("accountsChanged", handleAccountsChanged);
-      provider.on("chainChanged", handleChainChanged);
-      provider.on("disconnect", handleDisconnect);
+      provider.on('accountsChanged', handleAccountsChanged);
+      provider.on('chainChanged', handleChainChanged);
+      provider.on('disconnect', handleDisconnect);
 
       // Subscription Cleanup
       return () => {
         if (provider.removeListener) {
-          provider.removeListener("accountsChanged", handleAccountsChanged);
-          provider.removeListener("chainChanged", handleChainChanged);
-          provider.removeListener("disconnect", handleDisconnect);
+          provider.removeListener('accountsChanged', handleAccountsChanged);
+          provider.removeListener('chainChanged', handleChainChanged);
+          provider.removeListener('disconnect', handleDisconnect);
         }
       };
     }
diff --git a/pages/index.tsx b/pages/index.tsx
index d7c35e7..0b99d3e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,23 +1,21 @@
 /* eslint-disable @next/next/no-img-element */
-import { useState, FC, useEffect } from 'react';
-import { NextPage } from 'next';
 import { ethers } from 'ethers';
-import { Iframe } from '../components/Iframe';
+import keccak256 from 'keccak256';
+import MerkleTree from 'merkletreejs';
+import { NextPage } from 'next';
+import { FC, useEffect, useMemo, useState } from 'react';
+import ClaimButton from '../components/ClaimButton';
 import { ClaimModal } from '../components/ClaimModal';
 import { ClaimSuccessModal } from '../components/ClaimSuccessModal';
+import { MintedNftsView } from '../components/MintedNftsView';
+import { MAX_NFT_TO_MINT, PARCEL0_NFT_CONTRACT_ADDRESSES } from '../constants/ethereum';
 import { ParcelProperties } from '../containers/ParcelProperties';
+import { addresses, Addresses } from '../data/whiteListedAddresses';
+import { useParcelNFT } from '../hooks/parcelNFT';
+import { useModal } from '../hooks/useModal';
 import useWallet from '../hooks/useWallet';
-import { ParcelNFT__factory } from '@citydao/parcel-contracts/dist/types/contracts/factories/ParcelNFT__factory';
 import { getParcelProperties } from '../parcel-properties';
-import keccak256 from 'keccak256';
-import MerkleTree from 'merkletreejs';
-import { addresses, Addresses } from '../data/whiteListedAddresses';
 import { shortenWalletAddress } from '../utils';
-import { MAX_NFT_TO_MINT } from '../contants';
-import { MintedNftsView } from '../components/MintedNftsView';
-const PARCEL0_NFT_CONTRACT_ADDRESS = '0x209723a65844093Ad769d557a22742e0f661959d';
-const numberOfMintedNFTsSoFar = 1; // TODO trkaplan calculate this value
-import { useModal } from '../hooks/useModal';
 
 interface ConnectButtonProps {
   enabled?: boolean;
@@ -44,118 +42,93 @@ function hashToken(address: keyof Addresses, allowance: number) {
 }
 const Home: NextPage = () => {
   const { handleOpenClaimModal, handleCloseClaimModal, handleOpenClaimSuccessModal } = useModal();
-  const [numberOfMintedNfts, setNumberOfMintedNfts] = useState<number>(0);
-  const [eligibleNftCount, setEligibleNftCount] = useState<number>(0);
-  const [isIframeLoaded, setIsIframeLoaded] = useState<boolean>(false);
   const [currentView, setCurrentView] = useState<VIEWS>(VIEWS.INITIAL_VIEW);
+
   const {
     account: address,
-    web3Provider: provider,
     connect,
     disconnect,
     chainId, // TODO trkaplan warn users connected to different chain for better UX
   } = useWallet();
-  function onWalletDisconnect() {
-    disconnect();
-    setEligibleNftCount(0);
-    setNumberOfMintedNfts(0);
-  }
-  // TODO trkaplan memoise tree
-  const tree = new MerkleTree(
-    Object.entries(addresses).map(([address, allowance]) => hashToken(address, allowance)),
-    keccak256,
-    { sortPairs: true },
-  );
 
-  const handleLoad = () => {
-    setIsIframeLoaded(true);
+  const { parcelNFTDetails, refetch } = useParcelNFT(PARCEL0_NFT_CONTRACT_ADDRESSES[chainId ?? 0]);
+
+  const allowance = parcelNFTDetails?.allowance || 0;
+  const walletAlreadyClaimed = parcelNFTDetails?.walletAlreadyClaimed || 0;
+  const totalSupply = parcelNFTDetails?.totalSupply || 0;
+
+  const onWalletDisconnect = async () => {
+    await disconnect();
   };
 
-  function navigateToHome() {
+  const merkleTree = useMemo(
+    () =>
+      new MerkleTree(
+        Object.entries(addresses).map(([address, allowance]) => hashToken(address, allowance)),
+        keccak256,
+        { sortPairs: true },
+      ),
+    [],
+  );
+
+  const navigateToHome = () => {
     setCurrentView(VIEWS.INITIAL_VIEW);
-  }
-  function showMintedNfts() {
+  };
+
+  const showMintedNfts = () => {
     setCurrentView(VIEWS.MINTED_NFTS);
-  }
-  function getClaimButtonText(numberOfMintedNfts: number, eligibleNftCount: number) {
-    let text = '';
-    if (numberOfMintedNfts === 0 && eligibleNftCount === 0) {
-      text = 'CLAIM PLOTS';
-    } else if (numberOfMintedNfts > 0) {
-      text = `${numberOfMintedNfts} PLOTS CLAIMED`;
-    } else if (eligibleNftCount > 0) {
-      text = `CLAIM ${eligibleNftCount} PLOTS`;
+  };
+
+  const claim = async () => {
+    if (!parcelNFTDetails) {
+      console.warn('parcelNFT is not ready');
+      return;
     }
-    return text;
-  }
-  async function claim() {
-    const signer = provider.getSigner();
-    const parcel0Contract = new ParcelNFT__factory().attach(PARCEL0_NFT_CONTRACT_ADDRESS);
-    const allowance: number = Number(addresses[address?.toLowerCase() as keyof Addresses]);
-    const proof = tree.getHexProof(hashToken(address!, allowance));
-    const numberOfMinted = await parcel0Contract
-      .connect(signer)
-      .alreadyClaimed(address!)
-      .then((result: ethers.BigNumber) => result.toNumber());
-    if (allowance > numberOfMinted) {
-      parcel0Contract
-        .connect(signer)
-        .allowListMint(eligibleNftCount, allowance, proof)
-        .then((res: any) => {
-          console.log('response', res);
-          handleCloseClaimModal();
-          handleOpenClaimSuccessModal();
-        });
+
+    const { parcelNFT } = parcelNFTDetails;
+
+    const proof = merkleTree.getHexProof(hashToken(address!, allowance));
+    if (allowance > walletAlreadyClaimed) {
+      const res = await parcelNFT.allowListMint(allowance, allowance, proof);
+      console.debug('response', res);
+
+      await refetch();
+      handleCloseClaimModal();
+      handleOpenClaimSuccessModal();
     } else {
-      console.log('Already claimed!');
+      console.warn('Already claimed!');
     }
-  }
+  };
 
   //TODO trkaplan check what happens when you visit with a browser that does not have metamask
   //setNftCount(count);
 
   useEffect(() => {
-    if (address) {
-      // noinspection JSIgnoredPromiseFromCall
-      checkEligibility(address);
+    // noinspection JSIgnoredPromiseFromCall
+    checkEligibility();
+  }, [address, parcelNFTDetails]);
+
+  const checkEligibility = async () => {
+    if (!parcelNFTDetails) {
+      console.debug('parcelNFT is not ready');
+      return;
     }
-  }, [address]);
-
-  const checkEligibility = async (address: string) => {
-    try {
-      const signer = provider.getSigner();
-      const parcel0Contract = new ParcelNFT__factory().attach(PARCEL0_NFT_CONTRACT_ADDRESS);
-      const allowance: number = addresses[address.toLowerCase() as keyof Addresses];
-
-      //const proof = tree.getHexProof(hashToken(address, allowance));
-      // TODO trkaplan disable the claim button add loading indicator until eligibility check is complete
-      parcel0Contract
-        .connect(signer)
-        .alreadyClaimed(address)
-        .then((result: ethers.BigNumber) => {
-          const numberOfMinted = result.toNumber();
-          if (allowance > numberOfMinted) {
-            setEligibleNftCount(allowance);
-            setNumberOfMintedNfts(0);
-            setCurrentView(VIEWS.INITIAL_VIEW); // in case user in on the minted nfts view and changes the wallet.
-          } else if (allowance === numberOfMinted) {
-            setNumberOfMintedNfts(numberOfMinted);
-          }
-        });
-    } catch (error) {
-      console.log(error);
-      // TODO trkaplan handle errors.
+
+    if (allowance > walletAlreadyClaimed) {
+      setCurrentView(VIEWS.INITIAL_VIEW); // in case user in on the minted nfts view and changes the wallet.
     }
+
+    // TODO trkaplan disable the claim button add loading indicator until eligibility check is complete
   };
 
-  const parcelProperties = getParcelProperties(numberOfMintedNFTsSoFar, MAX_NFT_TO_MINT);
+  const parcelProperties = getParcelProperties(totalSupply, MAX_NFT_TO_MINT);
   return (
     <>
       <div className="page-header">
         <div className="header-content">
           <img className="logo" src="/citydao-logo.png" alt="CityDAO" />
           <div className="connect-button-container">
-            <ConnectButton onClick={connect} address={address!} enabled={true} />
+            <ConnectButton onClick={connect} address={address || undefined} enabled={true} />
           </div>
         </div>
       </div>
@@ -192,26 +165,23 @@ const Home: NextPage = () => {
             {currentView === VIEWS.INITIAL_VIEW ? (
               <img src="/citydao-parcel-0-NFT-Art.png" alt="Parcel Zero NFT" />
             ) : (
-              <MintedNftsView numberOfNfts={numberOfMintedNfts} navigateToHome={navigateToHome} />
+              <MintedNftsView numberOfNfts={walletAlreadyClaimed} navigateToHome={navigateToHome} />
             )}
           </div>
           <div className="content-right">
-            {/* nftCount */}
-            <button
+            <ClaimButton
+              walletAlreadyClaimed={walletAlreadyClaimed}
+              allowance={allowance}
               disabled={!address}
-              onClick={numberOfMintedNfts === 0 ? handleOpenClaimModal : showMintedNfts}
-              className={numberOfMintedNfts > 0 ? 'border-button default-cursor' : ''}
-            >
-              {getClaimButtonText(numberOfMintedNfts, eligibleNftCount)}
-            </button>
+              onClick={walletAlreadyClaimed === 0 ? handleOpenClaimModal : showMintedNfts}
+            />
             <ParcelProperties parcelProperties={parcelProperties} />
           </div>
         </div>
-        <ClaimModal onButtonClick={claim} eligibleNftsCount={eligibleNftCount} />
-        <ClaimSuccessModal eligibleNftsCount={eligibleNftCount} />
+        <ClaimModal onButtonClick={claim} eligibleNftsCount={allowance} onClose={handleCloseClaimModal} />
+        <ClaimSuccessModal eligibleNftsCount={allowance} />
       </main>
     </>
   );
 };
-
 export default Home;