fix: identity after registration

lfglabs-dev · Jul 22, 2024 · ad63133 · ad63133
1 parent 8f3e3d2
commit ad63133
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 29 deletions.
diff --git 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<IdentityCardProps> = ({
   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 (
     <div className={styles.wrapper}>
@@ -101,6 +104,14 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
               </Tooltip>
             ) : null}
           </div>
+          {minting ? (
+            <div className="text-left h-full py-2">
+              <h1 className="text-3xl font-bold">Minting your identity...</h1>
+              <p>This page will refresh automatically</p>
+              <Skeleton className="mt-3" variant="rounded" height={30} />
+              <Skeleton className="mt-3" variant="rounded" height={58} />
+            </div>
+          ) : null}
           <div>
             <div className="flex flex-row items-center justify-center gap-5 mb-5">
               <div className="flex flex-col">
@@ -126,7 +137,6 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
                 ) : null}
               </div>
             </div>
-
             <AddEvmAction identity={identity} isOwner={isOwner} />
             <SocialMediaActions
               identity={identity}

diff --git a/components/identities/skeletons/identityActionsSkeleton.tsx b/components/identities/skeletons/identityActionsSkeleton.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from "@mui/material";
 import React, { FunctionComponent } from "react";
 import styles from "../../../styles/components/identityCard.module.css";
 
-const identityActionsSkeleton: FunctionComponent = () => {
+const IdentityActionsSkeleton: FunctionComponent = () => {
   return (
     <div className={styles.identitiesActionsSkeletonButtons}>
       <Skeleton variant="rounded" width={300} height={60} />
@@ -13,4 +13,4 @@ const identityActionsSkeleton: FunctionComponent = () => {
   );
 };
 
-export default identityActionsSkeleton;
+export default IdentityActionsSkeleton;
diff --git 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
@@ -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<string>();
   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,14 +133,16 @@ const TokenIdPage: NextPage = () => {
                     onPPClick={() => setIsUpdatingPp(true)}
                     ppImageUrl={ppImageUrl}
                   />
-                  {!hideActions && (
+                  {!hideActions ? (
                     <IdentityActions
                       isOwner={isOwner}
                       tokenId={tokenId}
                       isIdentityADomain={isIdentityADomain}
                       identity={identity}
                       hideActionsHandler={hideActionsHandler}
                     />
+                  ) : (
+                    minting && <IdentityActionsSkeleton />
                   )}
                 </div>
                 <IdentityWarnings