diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx index 6fa7141..c9cb04e 100644 --- a/src/app/community/page.tsx +++ b/src/app/community/page.tsx @@ -5,6 +5,7 @@ import og_nft from '@/assets/og_nft.jpg'; import illustration from '@/assets/illustration.svg'; import { useAtomValue } from 'jotai'; import { referralCodeAtom } from '@/store/referral.store'; +import { useEffect, useMemo, useState } from 'react'; import toast from 'react-hot-toast'; import { getReferralUrl } from '@/utils'; import { @@ -23,11 +24,16 @@ import { Image as ChakraImage, Container, Link, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalOverlay, Progress, Spinner, Text, + useDisclosure, } from '@chakra-ui/react'; -import { useEffect, useMemo, useState } from 'react'; interface OGNFTUserData { address: string; @@ -55,6 +61,7 @@ const CommunityPage = () => { const [isEligible, setIsEligible] = useState(false); const [hasNFT, setHasNFT] = useState(false); const [isEligibilityChecked, setIsEligibilityChecked] = useState(false); + const { isOpen, onOpen, onClose } = useDisclosure(); const referralCode = useAtomValue(referralCodeAtom); const isOGNFTEligible = useAtomValue(isOGNFTEligibleAtom); const address = useAtomValue(addressAtom); @@ -77,7 +84,12 @@ const CommunityPage = () => { provider, ); - const { writeAsync: claimOGNFT } = useContractWrite({ + const { + writeAsync: claimOGNFT, + isPending: isClaimOGNFTPending, + isError: isClaimOGNFTError, + error: claimOGTError, + } = useContractWrite({ calls: [ ogNFTContract.populate('mint', { nftId: 1, @@ -124,7 +136,7 @@ const CommunityPage = () => { }); } - function handleEligibility() { + async function handleEligibility() { if (!address) { toast.error('Please connect wallet', { position: 'bottom-right', @@ -137,7 +149,17 @@ const CommunityPage = () => { setIsEligible(true); } } else { - claimOGNFT(); + const result = await claimOGNFT(); + if (result.transaction_hash) { + onOpen(); + } + + if (isClaimOGNFTError) { + console.error(claimOGTError); + toast.error('An error occurred during the claim', { + position: 'bottom-right', + }); + } } setIsEligibilityChecked(true); @@ -324,16 +346,27 @@ const CommunityPage = () => { color: 'purple', }} onClick={handleEligibility} - isDisabled={hasNFT || isOGNFTLoading || !isOGNFTEligible.data} + isDisabled={ + hasNFT || + isOGNFTLoading || + !isOGNFTEligible.data || + isClaimOGNFTPending + } > - {!address - ? 'Connect wallet to check eligibility' - : hasNFT - ? 'Claimed' - : !isEligible - ? 'Check eligibility' - : 'Claim'} + {isClaimOGNFTPending && !isClaimOGNFTError ? ( + + Claiming + + ) : !address ? ( + 'Connect wallet to check eligibility' + ) : hasNFT ? ( + 'Claimed' + ) : !isEligible ? ( + 'Check eligibility' + ) : ( + 'Claim' + )} @@ -420,6 +453,73 @@ const CommunityPage = () => { You will be able to check your points and claim your NFTs here soon. + + + + + + + 🎉 + + Share your achievement on X + + + + + + + + + + ); };