diff --git a/components/identities/identityCard.tsx b/components/identities/identityCard.tsx index b4598d9c..6661fa05 100644 --- a/components/identities/identityCard.tsx +++ b/components/identities/identityCard.tsx @@ -15,6 +15,7 @@ import { debounce } from "../../utils/debounceService"; import { Identity } from "../../utils/apiWrappers/identity"; import CopyContent from "../UI/copyContent"; import AddEvmAction from "./actions/addEvmAction"; +import { useSearchParams } from "next/navigation"; type IdentityCardProps = { identity?: Identity; @@ -38,6 +39,8 @@ const IdentityCard: FunctionComponent = ({ const isMobile = useMediaQuery("(max-width:1124px)"); const handleMouseEnter = debounce(() => setIsHovered(true), 50); const handleMouseLeave = debounce(() => setIsHovered(false), 50); + const searchParams = useSearchParams(); + const minting = searchParams.get("minting") === "true"; return (
@@ -101,6 +104,14 @@ const IdentityCard: FunctionComponent = ({ ) : null}
+ {minting ? ( +
+

Minting your identity...

+

This page will refresh automatically

+ + +
+ ) : null}
@@ -126,7 +137,6 @@ const IdentityCard: FunctionComponent = ({ ) : null}
- { +const IdentityActionsSkeleton: FunctionComponent = () => { return (
@@ -13,4 +13,4 @@ const identityActionsSkeleton: FunctionComponent = () => { ); }; -export default identityActionsSkeleton; +export default IdentityActionsSkeleton; diff --git a/pages/confirmation.tsx b/pages/confirmation.tsx index 0e0cb00f..1727426e 100644 --- a/pages/confirmation.tsx +++ b/pages/confirmation.tsx @@ -17,7 +17,7 @@ const Confirmation: NextPage = () => { const { copied, copyToClipboard } = useCopyToClipboard(); const redirect = () => { - if (tokenId) router.push(`/identities/${tokenId}`); + if (tokenId) router.push(`/identities/${tokenId}?minting=true`); else router.push(`/identities`); }; diff --git a/pages/identities/[tokenId].tsx b/pages/identities/[tokenId].tsx index 6ae9a2b0..7221246c 100644 --- a/pages/identities/[tokenId].tsx +++ b/pages/identities/[tokenId].tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import homeStyles from "../../styles/Home.module.css"; import styles from "../../styles/components/identitiesV1.module.css"; import { useRouter } from "next/router"; @@ -14,6 +14,8 @@ import BackButton from "../../components/UI/backButton"; import { Identity } from "../../utils/apiWrappers/identity"; import { formatHexString } from "../../utils/stringService"; import { getDomainData } from "@/utils/cacheDomainData"; +import { useSearchParams } from "next/navigation"; +import IdentityActionsSkeleton from "@/components/identities/skeletons/identityActionsSkeleton"; const TokenIdPage: NextPage = () => { const router = useRouter(); @@ -29,6 +31,8 @@ const TokenIdPage: NextPage = () => { const [isTxModalOpen, setIsTxModalOpen] = useState(false); const [ppTxHash, setPpTxHash] = useState(); const [ppImageUrl, setPpImageUrl] = useState(""); + const searchParams = useSearchParams(); + const minting = searchParams.get("minting") === "true"; useEffect(() => { if (!identity || !address) { @@ -64,35 +68,50 @@ const TokenIdPage: NextPage = () => { } }; + const refreshData = useCallback( + () => + fetch(`${process.env.NEXT_PUBLIC_SERVER_LINK}/id_to_data?id=${tokenId}`) + .then(async (response) => { + if (!response.ok) { + throw new Error(await response.text()); + } + return response.json(); + }) + .then((data: IdentityData) => { + if (minting) { + router.replace(router.asPath.split("?")[0]); + setHideActions(false); + } + setIdentity(new Identity(data)); + setIsIdentityADomain(Boolean(data?.domain)); + }) + .catch(() => { + // Domain data might not be indexed yet, so we check local storage + const domainData = getDomainData(tokenId); + if (domainData) { + setIdentity(new Identity(domainData)); + setIsIdentityADomain(Boolean(domainData?.domain)); + } else { + setIsIdentityADomain(false); + } + }), + [tokenId, minting, router] + ); + + useEffect(() => { + if (minting && tokenId && !identity) { + const interval = setInterval(() => refreshData(), 1000); + return () => clearInterval(interval); + } + }, [minting, tokenId, identity, refreshData]); + useEffect(() => { if (tokenId) { - const refreshData = () => - fetch(`${process.env.NEXT_PUBLIC_SERVER_LINK}/id_to_data?id=${tokenId}`) - .then(async (response) => { - if (!response.ok) { - throw new Error(await response.text()); - } - return response.json(); - }) - .then((data: IdentityData) => { - setIdentity(new Identity(data)); - setIsIdentityADomain(Boolean(data?.domain)); - }) - .catch(() => { - // Domain data might not be indexed yet, so we check local storage - const domainData = getDomainData(tokenId); - if (domainData) { - setIdentity(new Identity(domainData)); - setIsIdentityADomain(Boolean(domainData?.domain)); - } else { - setIsIdentityADomain(false); - } - }); refreshData(); const timer = setInterval(() => refreshData(), 30e3); return () => clearInterval(timer); } - }, [tokenId]); + }, [tokenId, refreshData]); return ( <> @@ -114,7 +133,7 @@ const TokenIdPage: NextPage = () => { onPPClick={() => setIsUpdatingPp(true)} ppImageUrl={ppImageUrl} /> - {!hideActions && ( + {!hideActions ? ( { identity={identity} hideActionsHandler={hideActionsHandler} /> + ) : ( + minting && )}