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
+
+
+
+
+
+
+
+
+
+
);
};