Merge pull request #254 from hackdays-io/staging

Bugfix: Show wrong NFT image after mint

Author: yu23ki14

frontend/src/hooks/useMintNFT.ts

@@ -1,4 +1,5 @@
 import {
+  ContractEvent,
   getBlockNumber,
   useAddress,
   useContract,
@@ -49,21 +50,20 @@ 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 () => {
       if (!address || isLoading) return;
-      const _ids: number[] = [];
       const balance = await mintNFTContract?.call("balanceOf", [address]);
-      for (let index = 0; index < balance.toNumber(); index++) {
-        const tokenId = await mintNFTContract?.call("tokenOfOwnerByIndex", [
-          address,
-          index,
-        ]);
-        _ids.push(tokenId.toNumber());
-      }
-      setIds(_ids);
+      const tokenIdsPromise = Array(balance.toNumber())
+        .fill("")
+        .map((_, index) => {
+          return mintNFTContract?.call("tokenOfOwnerByIndex", [address, index]);
+        });
+      const tokenIds = await Promise.all(tokenIdsPromise);
+
+      setIds(tokenIds.map((id) => id.toNumber()));
     };
     fetch();
   }, [address, isLoading]);
@@ -140,23 +140,34 @@ export const useGetOwnedNFTByAddress = (address?: string) => {
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    setIsLoading(true);
     setNfts([]);
     if (!ids) return;
 
     const fetch = async () => {
-      const _nfts: any[] = [];
-      for (const id of ids) {
-        try {
+      setIsLoading(true);
+
+      const tokenURIPromises = ids.map((id) => {
+        const getTokenURI = async (id: number) => {
           const tokenURI = await mintNFTContract?.call("tokenURI", [id]);
-          const { data: metaData } = await axios.get(ipfs2http(tokenURI));
-          _nfts.push({ ...metaData, tokenId: id });
-        } catch (error) {
-          console.log(error);
-          continue;
-        }
-      }
-      setNfts(_nfts);
+          return { tokenURI, tokenId: id };
+        };
+        return getTokenURI(id);
+      });
+      const tokenURIs = await Promise.all(tokenURIPromises);
+
+      const metaDataPromises = tokenURIs.map(({ tokenURI, tokenId }) => {
+        const getMetaData = async (tokenURI: string, tokenId: number) => {
+          try {
+            const { data: metaData } = await axios.get(ipfs2http(tokenURI));
+            return { ...metaData, tokenId };
+          } catch (error) {
+            console.log(error);
+          }
+        };
+        return getMetaData(tokenURI, tokenId);
+      });
+      const _nfts = await Promise.all(metaDataPromises);
+      setNfts(_nfts.filter((nft) => nft));
       setIsLoading(false);
     };
 
@@ -259,11 +270,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>
           </>
         )}