Merge pull request #252 from hackdays-io/bugfix/issue246

bug fix for showing wrong nft

Author: yu23ki14

frontend/src/hooks/useMintNFT.ts

@@ -1,4 +1,5 @@
 import {
+  ContractEvent,
   getBlockNumber,
   useAddress,
   useContract,
@@ -49,7 +50,7 @@ export const useGetTokenURI = (id: number | null) => {
 
 export const useGetOwnedNftIdsByAddress = (address?: string) => {
   const { mintNFTContract, isLoading } = useMintNFTContract();
-  const [ids, setIds] = useState<number[]>([]);
+  const [ids, setIds] = useState<number[]>();
 
   useEffect(() => {
     const fetch = async () => {
@@ -140,11 +141,11 @@ export const useGetOwnedNFTByAddress = (address?: string) => {
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    setIsLoading(true);
     setNfts([]);
     if (!ids) return;
 
     const fetch = async () => {
+      setIsLoading(true);
       const _nfts: any[] = [];
       for (const id of ids) {
         try {
@@ -259,11 +260,20 @@ export const useMintParticipateNFT = (
   }, [mintedTokenURI]);
 
   useEffect(() => {
-    if (status !== "success" || !data || data.length < 1) return;
-    console.log(data);
-    const tokenId = data[data.length - 1].data?.tokenId.toNumber();
+    const includesNewEvent = (data: ContractEvent<Record<string, any>>[]) => {
+      if (!fromBlock) return false;
+      return data.some((event) => {
+        return event.transaction.blockNumber > fromBlock;
+      });
+    };
+    if (status !== "success" || !data || !includesNewEvent(data)) return;
+    const tokenId = data
+      .sort((a, b) => {
+        return b.transaction.blockNumber - a.transaction.blockNumber;
+      })[0]
+      .data?.tokenId.toNumber();
     setMintedNFTId(tokenId);
-  }, [data, status]);
+  }, [data, status, fromBlock]);
 
   const checkCanMint = useCallback(
     async (eventId: number, secretPhrase: string) => {

frontend/src/pages/events/[eventid].tsx

@@ -1,6 +1,6 @@
 import { Heading, Spinner, Text, Container, Box } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { Fragment, useMemo } from "react";
+import { FC, Fragment, useMemo } from "react";
 import { useGetEventById } from "../../hooks/useEventManager";
 import LoginRequired from "../../components/atoms/web3/LoginRequired";
 import { useLocale } from "../../hooks/useLocale";
@@ -9,15 +9,13 @@ import { MintForm } from "src/components/organisms/nft/MintForm";
 import { useAddress } from "@thirdweb-dev/react";
 import { useGetOwnedNFTByAddress } from "src/hooks/useMintNFT";
 import { NFTItem } from "src/components/atoms/nft/NFTItem";
+import { Event } from "types/Event";
 
-const Event = () => {
-  const router = useRouter();
-  const { eventid } = router.query;
-  const { event, loading: fetchingEvent } = useGetEventById(Number(eventid));
+const MintNFTSection: FC<{ event: Event.EventRecord }> = ({ event }) => {
   const address = useAddress();
-  const { t } = useLocale();
   const { nfts, isLoading: checkHoldingNFTs } =
     useGetOwnedNFTByAddress(address);
+
   const holdingNFT = useMemo(() => {
     return nfts.find(
       (nft) =>
@@ -26,6 +24,32 @@ const Event = () => {
     );
   }, [nfts, address]);
 
+  return (
+    <>
+      {checkHoldingNFTs || !address ? (
+        <Spinner />
+      ) : holdingNFT ? (
+        <Box maxW={200} mx="auto" cursor="pointer">
+          <NFTItem
+            shareURL={false}
+            nft={holdingNFT}
+            tokenId={holdingNFT.tokenId}
+          />
+        </Box>
+      ) : (
+        <MintForm event={event} address={address} />
+      )}
+    </>
+  );
+};
+
+const Event: FC = () => {
+  const router = useRouter();
+  const { eventid } = router.query;
+  const { event, loading: fetchingEvent } = useGetEventById(Number(eventid));
+
+  const { t } = useLocale();
+
   return (
     <>
       <Container maxW={800} py={6} pb="120px">
@@ -47,19 +71,7 @@ const Event = () => {
               requiredChainID={+process.env.NEXT_PUBLIC_CHAIN_ID!}
               forbiddenText={t.SIGN_IN_TO_GET_NFT}
             >
-              {checkHoldingNFTs || !address ? (
-                <Spinner />
-              ) : holdingNFT ? (
-                <Box maxW={200} mx="auto" cursor="pointer">
-                  <NFTItem
-                    shareURL={false}
-                    nft={holdingNFT}
-                    tokenId={holdingNFT.tokenId}
-                  />
-                </Box>
-              ) : (
-                <MintForm event={event} address={address} />
-              )}
+              <MintNFTSection event={event} />
             </LoginRequired>
           </>
         )}