diff --git a/src/api/RestAPI/hooks/useIykHooks.ts b/src/api/RestAPI/hooks/useIykHooks.ts index 0b6e0b4e..244ec0f9 100644 --- a/src/api/RestAPI/hooks/useIykHooks.ts +++ b/src/api/RestAPI/hooks/useIykHooks.ts @@ -11,14 +11,16 @@ interface IYKRefStruct { uid: string; isValidRef: boolean; linkedToken: LinkedToken | undefined; - poapEvents: [ - { - id: number; - otp: string; - poapEventId: string; - status: 'active' | 'expired' | 'pending-approval' | 'future' | 'rejected'; - } - ]; + poapEvents: + | [ + { + id: number; + otp: string; + poapEventId: string; + status: 'active' | 'expired' | 'pending-approval' | 'future' | 'rejected'; + } + ] + | []; } const httpClient = getCustomClient(`https://api.iyk.app/`, {}); @@ -37,6 +39,7 @@ export function useIYKRefQuery(ref: string | null) { select: (data) => { if (data) { const { isValidRef, linkedToken, poapEvents } = data; + return { isValidRef, linkedToken, poapEvents }; } else return undefined; }, @@ -51,7 +54,11 @@ interface MintIykPoapTokenProps { deviceId?: string | null; } -export function useMintIYKPOAPToken() { +interface mintIykParams { + onSuccessfullMint?: (data: any) => void; +} + +export function useMintIYKPOAPToken({ onSuccessfullMint }: mintIykParams) { const getIykData = async ({ otpCode, recipient, deviceId, poapEventId }: MintIykPoapTokenProps) => { if (!otpCode || !recipient || !poapEventId) return undefined; @@ -71,5 +78,5 @@ export function useMintIYKPOAPToken() { return data; }; - return useMutation(['fetchIykData'], getIykData); + return useMutation(['fetchIykData'], getIykData, { onSuccess: onSuccessfullMint }); } diff --git a/src/pages/NimiPage.tsx b/src/pages/NimiPage.tsx index 3b143d25..d7b16242 100644 --- a/src/pages/NimiPage.tsx +++ b/src/pages/NimiPage.tsx @@ -29,6 +29,7 @@ const eventUrlToThemeMapping = { export default function NimiPage() { const { nimiUsername: ensName } = useParams(); const [isMounted, setIsMounted] = useState(false); + const [isMinted, setIsMinted] = useState(false); // const [autoClaimPOAPLocalStorage, setAutoClaimPOAPLocalStorage] = useAtom(autoClaimPOAPAtom); const [autoClaimPOAP, setAutoClaimPOAP] = useAtom(autoClaimPOAPAtom); const [autoClaimPOAPRecentReceiver, setAutoClaimPOAPRecentReciever] = useAtom(autoClaimPOAPRecentReceiverAtom); @@ -47,10 +48,12 @@ export default function NimiPage() { const iykRef = searchParams.get('iykRef'); const event = searchParams.get('event'); const { data: refData, isFetching: isRefDataLoading } = useIYKRefQuery(iykRef); + console.log('refData', refData); const poapEventId = refData?.poapEvents?.[0]?.poapEventId; // Retrieve the POAP event data and check if the user has already claimed the POAP const { data: poapEvent, isFetching: isPoapEventLoading } = usePOAPEventQuery(poapEventId); + console.log('poapEvent', poapEvent); // Fetch the Nimi data for the ENS name const { data: initialNimi, isGenerated } = useInitialtNimiData({ @@ -68,8 +71,12 @@ export default function NimiPage() { account: debouncedPOAPReciever, enabled: !!debouncedPOAPReciever, }); + + const onSuccessfullMint = () => { + setIsMinted(true); + }; // Mint the POAP token - const { mutateAsync: mintIYKPOAPToken } = useMintIYKPOAPToken(); + const { mutateAsync: mintIYKPOAPToken } = useMintIYKPOAPToken({ onSuccessfullMint }); // Debugging console.log({ @@ -86,28 +93,36 @@ export default function NimiPage() { setClaimStep(ClaimModalState.CLAIMED); return; } - try { - const mintResponse = await mintIYKPOAPToken({ - otpCode: refData?.poapEvents[0].otp, - recipient: debouncedPOAPReciever, - poapEventId: poapEventId!, - }); - console.log({ mintResponse }); - - if (mintResponse.success) { - setClaimStep(ClaimModalState.SUCCESS); - // If the user wants to auto claim the POAP, save the reciever address to local storage - setAutoClaimPOAPRecentReciever(debouncedPOAPReciever); - } else { + + if (refData && refData.poapEvents && refData.poapEvents[0] && !isMinted) { + // check if these are defined + try { + const mintResponse = await mintIYKPOAPToken({ + otpCode: refData.poapEvents[0].otp, + recipient: debouncedPOAPReciever, + poapEventId: poapEventId!, + }); + console.log({ mintResponse }); + + if (mintResponse.success) { + setClaimStep(ClaimModalState.SUCCESS); + // If the user wants to auto claim the POAP, save the reciever address to local storage + setAutoClaimPOAPRecentReciever(debouncedPOAPReciever); + } else { + setClaimStep(ClaimModalState.ERROR); + } + } catch (error) { + console.error(error); setClaimStep(ClaimModalState.ERROR); } - } catch (error) { - console.error(error); - setClaimStep(ClaimModalState.ERROR); + } else { + console.error('refData or refData.poapEvents[0] is not defined.'); + return; } return; }; + useEffect(() => { // On first render, attempt to claim the POAP if the user has auto claim enabled const attemptClaim = async () => {