diff --git a/components/the-memes/MemePage.tsx b/components/the-memes/MemePage.tsx index a45b317d46..5c1b9f408d 100644 --- a/components/the-memes/MemePage.tsx +++ b/components/the-memes/MemePage.tsx @@ -37,6 +37,7 @@ import { MEME_TABS, TabButton, } from "./MemeShared"; +import UpcomingMemePage from "./UpcomingMemePage"; const MemePageArt = dynamic(() => import("./MemePageArt").then((mod) => mod.MemePageArt) @@ -108,19 +109,8 @@ export default function MemePage({ nftId }: { readonly nftId: string }) { [searchParams] ); - useEffect(() => { - if (focusParam === activeTab) { - return; - } - const params = new URLSearchParams(searchParamsString); - params.set("focus", activeTab); - const queryString = params.toString(); - router.replace(queryString ? `${pathname}?${queryString}` : pathname, { - scroll: false, - }); - }, [activeTab, focusParam, pathname, router, searchParamsString]); - const [nft, setNft] = useState(); + const [nftNotFound, setNftNotFound] = useState(false); const [nftMeta, setNftMeta] = useState(); const [nftBalance, setNftBalance] = useState(0); const [transactions, setTransactions] = useState([]); @@ -135,6 +125,29 @@ export default function MemePage({ nftId }: { readonly nftId: string }) { setTitle(getMemeTabTitle(`The Memes`, nftId, nft, activeTab)); }, [nft, nftId, activeTab, setTitle]); + useEffect(() => { + if (!nftNotFound && focusParam === activeTab) { + return; + } + let params = new URLSearchParams(searchParamsString); + if (nftNotFound) { + params.delete("focus"); + } else { + params.set("focus", activeTab); + } + const queryString = params.toString(); + router.replace(queryString ? `${pathname}?${queryString}` : pathname, { + scroll: false, + }); + }, [ + activeTab, + focusParam, + pathname, + router, + searchParamsString, + nftNotFound, + ]); + useEffect(() => { if (!nftId) { return; @@ -159,9 +172,11 @@ export default function MemePage({ nftId }: { readonly nftId: string }) { setNftMeta(nftMetas[0]); const mynft = nftResponse.data?.[0]; setNft(mynft); + setNftNotFound(false); } else { setNftMeta(undefined); setNft(undefined); + setNftNotFound(true); } }) .catch(() => { @@ -377,6 +392,13 @@ export default function MemePage({ nftId }: { readonly nftId: string }) { {printContent()} )} + {nftNotFound && ( + + + + + + )} diff --git a/components/the-memes/UpcomingMemePage.tsx b/components/the-memes/UpcomingMemePage.tsx index ac3e20ef30..e2ed25f571 100644 --- a/components/the-memes/UpcomingMemePage.tsx +++ b/components/the-memes/UpcomingMemePage.tsx @@ -4,7 +4,11 @@ import NotFound from "@/components/not-found/NotFound"; export default function UpcomingMemePage({ id }: { readonly id: string }) { const numId = Number(id); if (Number.isInteger(numId)) { - return ; + return ( +
+ +
+ ); } return ; }