From 1b200235ed541051ecd8972a7362cc23c2f982fb Mon Sep 17 00:00:00 2001 From: "Michael D. Norman" Date: Wed, 11 May 2022 22:57:15 -0500 Subject: [PATCH 1/9] chore: [#3] disable claim button when no more to claim - extracted parcel nft loading logic --- .github/workflows/ci.yml | 6 +- components/Button/Button.tsx | 14 -- components/Button/index.tsx | 1 - components/ClaimButton.tsx | 27 +++ components/ClaimModal/ClaimModal.tsx | 2 +- components/ParcelProperty/ParcelProperty.tsx | 2 +- components/common/DefaultButton.tsx | 8 + constants/other.ts | 17 ++ .../ParcelProperties/ParcelProperties.tsx | 24 +- contants.ts | 11 - context/StateProvider.tsx | 21 +- hooks/contractHooks.ts | 157 +++++++++++++ hooks/parcelNFT.ts | 60 +++++ hooks/useWallet.tsx | 64 +++--- pages/index.tsx | 208 +++++++----------- parcel-properties.ts | 4 +- yarn.lock | 7 +- 17 files changed, 411 insertions(+), 222 deletions(-) delete mode 100644 components/Button/Button.tsx delete mode 100644 components/Button/index.tsx create mode 100644 components/ClaimButton.tsx create mode 100644 components/common/DefaultButton.tsx create mode 100644 constants/other.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/Button/Button.tsx b/components/Button/Button.tsx deleted file mode 100644 index 446bb71..0000000 --- a/components/Button/Button.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { FC } from 'react'; - -interface ButtonProps { - isEnabled?: boolean; - onClick: () => void; - label: string; - isBordered?: boolean; -} - -export const Button: FC = ({ isEnabled = true, onClick, label, isBordered }) => ( - -); diff --git a/components/Button/index.tsx b/components/Button/index.tsx deleted file mode 100644 index 8b166a8..0000000 --- a/components/Button/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './Button'; diff --git a/components/ClaimButton.tsx b/components/ClaimButton.tsx new file mode 100644 index 0000000..750bfbe --- /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 ( + + {getClaimButtonText()} + + ); +}; +export default ClaimButton; diff --git a/components/ClaimModal/ClaimModal.tsx b/components/ClaimModal/ClaimModal.tsx index c1ab5b9..926f089 100644 --- a/components/ClaimModal/ClaimModal.tsx +++ b/components/ClaimModal/ClaimModal.tsx @@ -4,7 +4,7 @@ import { FC, useState } from 'react'; import Modal from 'react-modal'; import { useModal } from '../../hooks/useModal'; -import { AGREEMENT_IPFS_URL } from '../../contants'; +import { AGREEMENT_IPFS_URL } from '../../constants/other'; type ClaimModalProps = { eligibleNftsCount: number; diff --git a/components/ParcelProperty/ParcelProperty.tsx b/components/ParcelProperty/ParcelProperty.tsx index 354921a..10cf202 100644 --- a/components/ParcelProperty/ParcelProperty.tsx +++ b/components/ParcelProperty/ParcelProperty.tsx @@ -3,7 +3,7 @@ import { FC } from 'react'; export type ParcelPropertyProps = { name: string; value: string; - tooltip: string; + tooltip?: string; iconPath: string; }; export const ParcelProperty: FC = ({ name, value, tooltip, iconPath }) => ( 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 {} + +const DefaultButton = ({ disabled, ...rest }: DefaultButtonProps) => ( + - ); -}; +export const ConnectButton: FC = ({ enabled, onClick, address }) => ( + +); diff --git a/components/MintedNftsView/MintedNftsView.tsx b/components/MintedNftsView/MintedNftsView.tsx index 380c525..b6776ff 100644 --- a/components/MintedNftsView/MintedNftsView.tsx +++ b/components/MintedNftsView/MintedNftsView.tsx @@ -12,7 +12,6 @@ export const MintedNftsView: FC = ({ navigateToHome, number
{[...Array(numberOfNfts)].map((value: undefined, index: number) => ( - // eslint-disable-next-line @next/next/no-img-element Parcel 0 NFT Art ))}
diff --git a/pages/index.tsx b/pages/index.tsx index 3e75116..06e865e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @next/next/no-img-element */ import { ethers } from 'ethers'; import keccak256 from 'keccak256'; import MerkleTree from 'merkletreejs';