diff --git a/.eslintrc.yml b/.eslintrc.yml index 102c85d..95867e4 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -11,3 +11,4 @@ plugins: - prettier rules: 'prettier/prettier': warn + '@next/next/no-img-element': off 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/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..9cfab0c --- /dev/null +++ b/components/ClaimButton.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import DefaultButton, { DefaultButtonProps } from './common/DefaultButton'; + +export interface ClaimButtonProps extends DefaultButtonProps { + allowance: number; + walletAlreadyClaimed: number; + withinClaimPeriod: boolean; +} + +const ClaimButton = ({ allowance, walletAlreadyClaimed, withinClaimPeriod, disabled, ...rest }: ClaimButtonProps) => { + const getClaimButtonText = () => { + if (!withinClaimPeriod) { + return 'CLAIM PLOTS'; + } + + if (allowance > 0 && allowance > walletAlreadyClaimed) { + return `CLAIM ${allowance - walletAlreadyClaimed} PLOTS`; + } + + if (walletAlreadyClaimed > 0) { + return `${walletAlreadyClaimed} PLOTS CLAIMED`; + } + + return 'CLAIM PLOTS'; + }; + + return ( + + {getClaimButtonText()} + + ); +}; +export default ClaimButton; diff --git a/components/ClaimModal/ClaimModal.tsx b/components/ClaimModal/ClaimModal.tsx index c1ab5b9..7214fe6 100644 --- a/components/ClaimModal/ClaimModal.tsx +++ b/components/ClaimModal/ClaimModal.tsx @@ -1,10 +1,8 @@ -/* eslint-disable @next/next/no-img-element */ -// TODO trkaplan disable no-img-element in eslint config 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/ClaimPeriodCountdown.tsx b/components/ClaimPeriodCountdown.tsx new file mode 100644 index 0000000..b861ad5 --- /dev/null +++ b/components/ClaimPeriodCountdown.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import Countdown from 'react-countdown'; + +export interface ClaimPeriodCountdownProps { + claimPeriodStart: number; + claimPeriodEnd: number; +} + +interface RendererProps { + days: number; + hours: number; + minutes: number; + seconds: number; + completed: boolean; +} + +const ClaimPeriodCountdown = ({ claimPeriodStart, claimPeriodEnd }: ClaimPeriodCountdownProps) => { + const ClaimPeriodEnded = () => Claim Period has ended; + + const buildRenderer = + (beforeStart: boolean) => + // eslint-disable-next-line react/display-name + ({ days, hours, minutes, seconds, completed }: RendererProps) => { + if (completed) { + if (beforeStart) { + return Claim Period has started; + } + + return ; + } + + const numberText = (number: number, singular: string, plural: string = singular + 's') => + number > 0 ? number + ' ' + (number === 1 ? singular : plural) : ''; + + const daysText = numberText(days, 'day'); + const hoursText = numberText(hours, 'hour'); + const minutesText = numberText(minutes, 'minute'); + const secondsText = numberText(seconds, 'second'); + + const allText = [daysText, hoursText, minutesText, secondsText].filter((text) => text).join(', '); + + return {allText}; + }; + + if (claimPeriodStart > Date.now()) { + return ( + + Claim Period starts in + + ); + } + + if (claimPeriodEnd > Date.now()) { + return ( + + Claim Period ends in + + ); + } + + return ; +}; +export default ClaimPeriodCountdown; diff --git a/components/ConnectButton/ConnectButton.tsx b/components/ConnectButton/ConnectButton.tsx index 94e5af6..a696b00 100644 --- a/components/ConnectButton/ConnectButton.tsx +++ b/components/ConnectButton/ConnectButton.tsx @@ -8,11 +8,8 @@ interface ConnectButtonProps { text?: string; } -export const ConnectButton: FC = ({ enabled, onClick, address }) => { - // TODO trkaplan disable if wallet is not installed - return ( - - ); -}; +export const ConnectButton: FC = ({ enabled, onClick, address }) => ( + +); diff --git a/components/MintedNftsView/MintedNftsView.tsx b/components/MintedNftsView/MintedNftsView.tsx index 97bf960..b6776ff 100644 --- a/components/MintedNftsView/MintedNftsView.tsx +++ b/components/MintedNftsView/MintedNftsView.tsx @@ -12,7 +12,7 @@ export const MintedNftsView: FC = ({ navigateToHome, number
{[...Array(numberOfNfts)].map((value: undefined, index: number) => ( - + Parcel 0 NFT Art ))}
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) => ( +