From d62b644a4c5b258bcce1e73aff67aa89081d0341 Mon Sep 17 00:00:00 2001 From: yu23ki14 Date: Wed, 31 May 2023 17:37:43 +0900 Subject: [PATCH 1/2] bug fix for showing wrong nft --- frontend/src/hooks/useMintNFT.ts | 22 ++++++++--- frontend/src/pages/events/[eventid].tsx | 50 +++++++++++++++---------- 2 files changed, 47 insertions(+), 25 deletions(-) diff --git a/frontend/src/hooks/useMintNFT.ts b/frontend/src/hooks/useMintNFT.ts index 3121f2f1..d5ef08f6 100644 --- a/frontend/src/hooks/useMintNFT.ts +++ b/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([]); + const [ids, setIds] = useState(); 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>[]) => { + 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) => { diff --git a/frontend/src/pages/events/[eventid].tsx b/frontend/src/pages/events/[eventid].tsx index 82d7e1ad..dc5ab28c 100644 --- a/frontend/src/pages/events/[eventid].tsx +++ b/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 ? ( + + ) : holdingNFT ? ( + + + + ) : ( + + )} + + ); +}; + +const Event: FC = () => { + const router = useRouter(); + const { eventid } = router.query; + const { event, loading: fetchingEvent } = useGetEventById(Number(eventid)); + + const { t } = useLocale(); + return ( <> @@ -47,19 +71,7 @@ const Event = () => { requiredChainID={+process.env.NEXT_PUBLIC_CHAIN_ID!} forbiddenText={t.SIGN_IN_TO_GET_NFT} > - {checkHoldingNFTs || !address ? ( - - ) : holdingNFT ? ( - - - - ) : ( - - )} + )} From e64eaba23c47bd18e45cc6cec077fcd851182398 Mon Sep 17 00:00:00 2001 From: yu23ki14 Date: Wed, 31 May 2023 20:04:20 +0900 Subject: [PATCH 2/2] metadata parallel fetch --- frontend/src/hooks/useMintNFT.ts | 50 +++++++++++++++++++------------- 1 file changed, 30 insertions(+), 20 deletions(-) diff --git a/frontend/src/hooks/useMintNFT.ts b/frontend/src/hooks/useMintNFT.ts index d5ef08f6..6b450531 100644 --- a/frontend/src/hooks/useMintNFT.ts +++ b/frontend/src/hooks/useMintNFT.ts @@ -55,16 +55,15 @@ export const useGetOwnedNftIdsByAddress = (address?: string) => { 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]); @@ -146,18 +145,29 @@ export const useGetOwnedNFTByAddress = (address?: string) => { const fetch = async () => { setIsLoading(true); - const _nfts: any[] = []; - for (const id of ids) { - try { + + 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); };