Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ref: add leaves #143

Merged
merged 1 commit into from
Mar 5, 2023
Merged

ref: add leaves #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions components/UI/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import React, { FunctionComponent } from "react";
import styles from "../styles/components/footer.module.css";

const Footer: FunctionComponent = () => {
return (
<div className="relative">
<footer className={styles.footer}>
Powered by&nbsp;<strong>Starknet</strong>
</footer>
</div>
);
return (
<div className="relative">
<footer className={styles.footer}>
Powered by&nbsp;<strong>Starknet</strong>
</footer>
</div>
);
};

export default Footer;
80 changes: 40 additions & 40 deletions components/identities/identityCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,51 +6,51 @@ import MainIcon from "../UI/iconsComponents/icons/mainIcon";
import SocialMediaActions from "./actions/socialmediaActions";

type IdentityCardProps = {
identity?: Identity;
domain?: string;
tokenId: string;
identity?: Identity;
domain?: string;
tokenId: string;
};

const IdentityCard: FunctionComponent<IdentityCardProps> = ({
tokenId,
domain,
identity,
tokenId,
domain,
identity,
}) => {
const responsiveDomain = shortenDomain(domain as string);
const responsiveDomain = shortenDomain(domain as string);

return (
<div className={styles.container}>
<div className="m-2 flex flex-row items-center justify-between gap-5 my-2 flex-wrap">
<h1 className={styles.domain}>{responsiveDomain}</h1>
{identity && identity.is_owner_main && (
<MainIcon width="40" firstColor="#19aa6e" secondColor="#19aa6e" />
)}
</div>
<div className="my-2">
<img
src={`https://www.starknet.id/api/identicons/${tokenId}`}
height={170}
width={170}
alt="identicon"
/>
</div>
<SocialMediaActions
domain={identity?.domain}
isOwner={true}
tokenId={tokenId}
/>
<img
alt="leaf"
src="/leaves/identityCardLeaves/SVG/lg1.svg"
className={styles.lg1}
/>
<img
alt="leaf"
src="/leaves/identityCardLeaves/SVG/lg2.svg"
className={styles.lg2}
/>
</div>
);
return (
<div className={styles.container}>
<div className="m-2 flex flex-row items-center justify-between gap-5 my-2 flex-wrap">
<h1 className={styles.domain}>{responsiveDomain}</h1>
{identity && identity.is_owner_main && (
<MainIcon width="40" firstColor="#19aa6e" secondColor="#19aa6e" />
)}
</div>
<div className="my-2">
<img
src={`https://www.starknet.id/api/identicons/${tokenId}`}
height={170}
width={170}
alt="identicon"
/>
</div>
<SocialMediaActions
domain={identity?.domain}
isOwner={true}
tokenId={tokenId}
/>
<img
alt="leaf"
src="/leaves/new/leavesGroup01.svg"
className={styles.lg1}
/>
<img
alt="leaf"
src="/leaves/new/leavesGroup02.svg"
className={styles.lg2}
/>
</div>
);
};

export default IdentityCard;
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
"eslint-plugin-react": "^7.31.11",
"jest": "^29.3.1",
"postcss": "^8.4.16",
"prettier": "2.8.4",
"prettier": "^2.8.4",
"tailwindcss": "^3.1.8",
"ts-jest": "^29.0.3",
"typescript": "^4.7.4"
Expand Down
186 changes: 96 additions & 90 deletions pages/identities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import React from "react";
import type { NextPage } from "next";
import styles from "../styles/Home.module.css";
import {
useAccount,
useStarknetExecute,
useTransactionReceipt,
useAccount,
useStarknetExecute,
useTransactionReceipt,
} from "@starknet-react/core";
import { useEffect, useState } from "react";
import IdentitiesGallery from "../components/identities/identitiesGalleryV1";
Expand All @@ -17,98 +17,104 @@ import { hexToDecimal } from "../utils/feltService";
import IdentitiesSkeleton from "../components/UI/identitiesSkeleton";

const Identities: NextPage = () => {
const { address } = useAccount();
const [loading, setLoading] = useState<boolean>(false);
const [ownedIdentities, setOwnedIdentities] = useState<FullId[]>([]);
const [rightTokenId, setRightTokenId] = useState<number | undefined>(
undefined
);
const randomTokenId: number = Math.floor(Math.random() * 1000000000000);
const router = useRouter();
const { address } = useAccount();
const [loading, setLoading] = useState<boolean>(false);
const [ownedIdentities, setOwnedIdentities] = useState<FullId[]>([]);
const [rightTokenId, setRightTokenId] = useState<number | undefined>(
undefined
);
const randomTokenId: number = Math.floor(Math.random() * 1000000000000);
const router = useRouter();

//Mint
const callData = {
contractAddress: process.env.NEXT_PUBLIC_STARKNETID_CONTRACT as string,
entrypoint: "mint",
calldata: [randomTokenId],
};
const { execute, data: mintData } = useStarknetExecute({
calls: callData,
});
//Mint
const callData = {
contractAddress: process.env.NEXT_PUBLIC_STARKNETID_CONTRACT as string,
entrypoint: "mint",
calldata: [randomTokenId],
};
const { execute, data: mintData } = useStarknetExecute({
calls: callData,
});

function mint() {
execute();
setRightTokenId(randomTokenId);
}
const { data, error: transactionError } = useTransactionReceipt({
hash: mintData?.transaction_hash,
watch: true,
});
function mint() {
execute();
setRightTokenId(randomTokenId);
}
const { data, error: transactionError } = useTransactionReceipt({
hash: mintData?.transaction_hash,
watch: true,
});

useEffect(() => {
if (address) {
// Our Indexer
setLoading(true);
fetch(`/api/indexer/addr_to_full_ids?addr=${hexToDecimal(address)}`)
.then((response) => response.json())
.then((data) => {
setOwnedIdentities(data.full_ids);
setLoading(false);
});
useEffect(() => {
if (address) {
// Our Indexer
setLoading(true);
fetch(`/api/indexer/addr_to_full_ids?addr=${hexToDecimal(address)}`)
.then((response) => response.json())
.then((data) => {
setOwnedIdentities(data.full_ids);
setLoading(false);
});

// // Aspect Indexer
// fetch(
// `https://api-testnet.aspect.co/api/v0/assets?contract_address=${process.env.NEXT_PUBLIC_STARKNETID_CONTRACT as string}&owner_address=${account.address}&sort_by=minted_at&order_by=desc`
// )
// .then((response) => response.json())
// .then((data) => {
// setOwnedIdentities(data.assets);
// });
}
}, [address]);
// // Aspect Indexer
// fetch(
// `https://api-testnet.aspect.co/api/v0/assets?contract_address=${process.env.NEXT_PUBLIC_STARKNETID_CONTRACT as string}&owner_address=${account.address}&sort_by=minted_at&order_by=desc`
// )
// .then((response) => response.json())
// .then((data) => {
// setOwnedIdentities(data.assets);
// });
}
}, [address]);

return (
<div className={styles.screen}>
<div className={styles.container}>
<>
{!mintData?.transaction_hash ? (
<>
<h1 className="title">Your Starknet identities</h1>
<div className={styles.containerGallery}>
{loading ? (
<IdentitiesSkeleton />
) : (
<IdentitiesGallery identities={ownedIdentities} />
)}
<MintIdentity onClick={() => mint()} />
</div>
</>
) : (
<>
{data?.status &&
!transactionError &&
!data?.status.includes("ACCEPTED") &&
data?.status !== "PENDING" && <LoadingScreen />}
{transactionError && (
<ErrorScreen
onClick={() => router.push("/identities")}
buttonText="Retry to mint"
/>
)}
{data?.status === "ACCEPTED_ON_L2" ||
(data?.status === "PENDING" && (
<SuccessScreen
onClick={() => router.push(`/identities/${rightTokenId}`)}
buttonText="See your new identity"
successMessage="Congrats, your starknet identity is minted !"
/>
))}
</>
)}
</>
</div>
</div>
);
return (
<div className={styles.screen}>
<div className="firstLeavesGroup">
<img width="100%" alt="leaf" src="/leaves/new/leavesGroup02.svg" />
</div>
<div className="secondLeavesGroup">
<img width="100%" alt="leaf" src="/leaves/new/leavesGroup01.svg" />
</div>
<div className={styles.container}>
<>
{!mintData?.transaction_hash ? (
<>
<h1 className="title">Your Starknet identities</h1>
<div className={styles.containerGallery}>
{loading ? (
<IdentitiesSkeleton />
) : (
<IdentitiesGallery identities={ownedIdentities} />
)}
<MintIdentity onClick={() => mint()} />
</div>
</>
) : (
<>
{data?.status &&
!transactionError &&
!data?.status.includes("ACCEPTED") &&
data?.status !== "PENDING" && <LoadingScreen />}
{transactionError && (
<ErrorScreen
onClick={() => router.push("/identities")}
buttonText="Retry to mint"
/>
)}
{data?.status === "ACCEPTED_ON_L2" ||
(data?.status === "PENDING" && (
<SuccessScreen
onClick={() => router.push(`/identities/${rightTokenId}`)}
buttonText="See your new identity"
successMessage="Congrats, your starknet identity is minted !"
/>
))}
</>
)}
</>
</div>
</div>
);
};

export default Identities;
Loading