Skip to content

Commit

Permalink
Merge pull request #864 from starknet-id/testnet
Browse files Browse the repository at this point in the history
MEP 25/07/2024
  • Loading branch information
fricoben authored Jul 25, 2024
2 parents 1ef338e + e266c10 commit 5a4a77d
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 40 deletions.
14 changes: 13 additions & 1 deletion components/identities/identityCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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}>
Expand Down Expand Up @@ -101,6 +104,16 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
</Tooltip>
) : null}
</div>
{minting ? (
<div className="text-left h-full py-2">
<h1 className="text-3xl font-bold font-quickZap">
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">
Expand All @@ -126,7 +139,6 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
) : null}
</div>
</div>

<AddEvmAction identity={identity} isOwner={isOwner} />
<SocialMediaActions
identity={identity}
Expand Down
4 changes: 2 additions & 2 deletions components/identities/skeletons/identityActionsSkeleton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -13,4 +13,4 @@ const identityActionsSkeleton: FunctionComponent = () => {
);
};

export default identityActionsSkeleton;
export default IdentityActionsSkeleton;
21 changes: 10 additions & 11 deletions pages/_document.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,30 @@ export default function Document() {
<meta charSet="utf-8" />
<meta name="theme-color" content="#2CAA6E" />
<meta property="og:site_name" content="Starknet.id" />
<meta
property="og:title"
content="Starknet.id - Identity and Naming service for Starknet."
/>
<meta property="og:title" content="Starknet ID" />
<meta property="og:type" content="website" />
<meta
property="og:description"
content="Starknet.id allows you to create your starknet passport. Create a virgin identity or link your existing one to a .stark domain to building your Starknet Reputation !"
content="Starknet ID: Your profile, seamlessly connecting you to the entire Starknet ecosystem."
/>
<meta property="og:url" content={process.env.NEXT_PUBLIC_APP_LINK} />
<meta property="og:image" content="/visuals/starknetIdMeta.webp" />
<meta
name="description"
content="Starknet.id allows you to create your starknet passport. Create a virgin identity or link your existing one to a .stark domain to building your Starknet Reputation !"
content="Starknet ID: Your profile, seamlessly connecting you to the entire Starknet ecosystem."
/>
<meta name="twitter:site" content="@starknet_id" />
<meta
name="twitter:title"
content="Starknet.id - Identity and Naming service for Starknet."
/>
<meta name="twitter:title" content="Starknet ID" />
<meta
name="twitter:description"
content="Starknet.id allows you to create your starknet passport. Create a virgin identity or link your existing one to a .stark domain to building your Starknet Reputation !"
content="Starknet ID: Your profile, seamlessly connecting you to the entire Starknet ecosystem."
/>
<meta name="twitter:image" content="/visuals/starknetIdMeta.webp" />
<meta name="twitter:card" content="player" />
<meta name="twitter:site" content="@Starknet_id" />
<meta name="twitter:player" content="https://app.starknet.id" />
<meta name="twitter:player:width" content="360" />
<meta name="twitter:player:height" content="560" />
</Head>

<body className="default_background_color">
Expand Down
2 changes: 1 addition & 1 deletion pages/confirmation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`);
};

Expand Down
84 changes: 59 additions & 25 deletions pages/identities/[tokenId].tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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();
Expand All @@ -29,6 +31,24 @@ const TokenIdPage: NextPage = () => {
const [isTxModalOpen, setIsTxModalOpen] = useState(false);
const [ppTxHash, setPpTxHash] = useState<string>();
const [ppImageUrl, setPpImageUrl] = useState("");
const [minting, setMinting] = useState(false);
const searchParams = useSearchParams();
const mintingInUrl = searchParams.get("minting") === "true";

useEffect(() => {
if (mintingInUrl) setMinting(true);
else setMinting(false);
}, [mintingInUrl]);

const endMinting = useCallback(() => {
router.replace(router.asPath.split("?")[0]);
setMinting(false);
setHideActions(false);
}, [router]);

useEffect(() => {
if (minting && identity) endMinting();
}, [minting, identity, endMinting]);

useEffect(() => {
if (!identity || !address) {
Expand Down Expand Up @@ -64,35 +84,47 @@ 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) endMinting();
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, endMinting]
);

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 (
<>
Expand All @@ -114,14 +146,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
Expand Down

0 comments on commit 5a4a77d

Please sign in to comment.