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

fix: domain navigation #1001

Merged
merged 5 commits into from
Jan 28, 2025
Merged

fix: domain navigation #1001

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
589097d
fix: domain navigation
blessingbytes Jan 26, 2025
aadcd72
Merge branch 'testnet' into fix-944
blessingbytes Jan 26, 2025
346cfbc
fix: domain navigation
blessingbytes Jan 28, 2025
a71c12b
fear: add a reuseable component
blessingbytes Jan 28, 2025
1d40ddb
Merge branch 'testnet' into fix-944
blessingbytes Jan 28, 2025
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
156 changes: 129 additions & 27 deletions pages/identities/[tokenId].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import React, { useCallback, useEffect, useState } from "react";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import homeStyles from "../../styles/Home.module.css";
import styles from "../../styles/components/identitiesV1.module.css";
import { useRouter } from "next/router";
import { NextPage } from "next";
import IdentityWarnings from "../../components/identities/identityWarnings";
import IdentityCard from "../../components/identities/identityCard";
import IdentityActions from "../../components/identities/actions/identityActions";
import { useAccount } from "@starknet-react/core";
import {
useAccount,
useConnect,
useSendTransaction,
} from "@starknet-react/core";
import IdentityPageSkeleton from "../../components/identities/skeletons/identityPageSkeleton";
import UpdateProfilePic from "../../components/identities/updateProfilePic";
import TxConfirmationModal from "../../components/UI/txConfirmationModal";
Expand All @@ -16,6 +20,11 @@ import { formatHexString } from "../../utils/stringService";
import { getDomainData } from "@/utils/cacheDomainData";
import { useSearchParams } from "next/navigation";
import IdentityActionsSkeleton from "@/components/identities/skeletons/identityActionsSkeleton";
import { hexToDecimal } from "@/utils/feltService";
import AddButton from "@/components/UI/AddButtonIdentities";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can remove this import, it is not used

import WalletConnect from "@/components/UI/walletConnect";
import { Connector } from "starknetkit";
import { FaPlus } from "react-icons/fa";

const TokenIdPage: NextPage = () => {
const router = useRouter();
Expand All @@ -34,6 +43,23 @@ const TokenIdPage: NextPage = () => {
const [minting, setMinting] = useState(false);
const searchParams = useSearchParams();
const mintingInUrl = searchParams.get("minting") === "true";
const { connectAsync, connectors } = useConnect();
const [ownedIdentities, setOwnedIdentities] = useState<FullId[]>([]);
const randomTokenId: number = Math.floor(Math.random() * 1000000000000);
const [showWalletConnectModal, setShowWalletConnectModal] =
useState<boolean>(false);

const callData = useMemo(() => {
return {
contractAddress: process.env.NEXT_PUBLIC_IDENTITY_CONTRACT as string,
entrypoint: "mint",
calldata: [randomTokenId.toString()],
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const { sendAsync: execute } = useSendTransaction({
calls: [callData],
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add error handling for transaction execution.

The mint function lacks error handling, which could lead to unhandled promise rejections.

-  function mint() {
-    execute();
+  async function mint() {
+    try {
+      await execute();
+    } catch (error) {
+      console.error('Failed to execute mint transaction:', error);
+      // Consider showing an error notification to the user
+    }
   }

Committable suggestion skipped: line range outside the PR's diff.


useEffect(() => {
if (mintingInUrl) setMinting(true);
Expand Down Expand Up @@ -126,6 +152,42 @@ const TokenIdPage: NextPage = () => {
}
}, [tokenId, refreshData]);

function mint() {
execute();
}
useEffect(() => {
if (address) {
// Our Indexer
fetch(
`${
process.env.NEXT_PUBLIC_SERVER_LINK
}/addr_to_full_ids?addr=${hexToDecimal(address)}`
)
.then((response) => response.json())
.then((data) => {
setOwnedIdentities(data.full_ids);
// setLoading(false);
});

// fetch(
// `${
// process.env.NEXT_PUBLIC_SERVER_LINK
// }/addr_to_external_domains?addr=${hexToDecimal(address)}`
// )
// .then((response) => response.json())
// .then((data: ExternalDomains) => {
// setExternalDomains(data.domains);
// });
}
}, [address, router.asPath]);
const connectWallet = async (connector: Connector) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
await connectAsync({ connector });
localStorage.setItem("SID-connectedWallet", connector.id);
localStorage.setItem("SID-lastUsedConnector", connector.id);
};
Marchand-Nicolas marked this conversation as resolved.
Show resolved Hide resolved
//console.log({ router: router.query.tokenId, searchParams });
return (
<>
<div className={styles.screen}>
Expand All @@ -136,33 +198,67 @@ const TokenIdPage: NextPage = () => {
<div className={styles.backButton}>
<BackButton onClick={() => window.history.back()} />
</div>
<div className={styles.containerIdentity}>
<>
<div className={styles.identityBox}>
<IdentityCard
identity={identity}
tokenId={tokenId}
isOwner={isOwner}
onPPClick={() => setIsUpdatingPp(true)}
ppImageUrl={ppImageUrl}
/>
{!hideActions ? (
<IdentityActions
isOwner={isOwner}
tokenId={tokenId}
isIdentityADomain={isIdentityADomain}
<div className="flex-col flex md:flex-row gap-5 md:gap-8 md:pl-5 mb-6">
<div
className={`${
!hideActions ? "lg:mx-0" : "lg:ml-20 border"
} mx-auto md:mx-0 bg-[#FFFFFF] w-[90%] md:w-[217px] shadow-md rounded-2xl h-[319px] md:h-[533px] md:p-5 relative text-center`}
>
<div className="h-[280px] md:h-[480px] overflow-y-auto">
{ownedIdentities.map((domain, index) => (
<button
className={`${
domain.id === router.query.tokenId
? "text-[#402D28] hover:text-[#CDCCCC]"
: " text-[#CDCCCC] hover:text-[#402D28]"
}font-medium text-lg leading-5 cursor-pointer border-[#CDCCCC] border-b md:border-none md:py-0 py-6 md:my-3 block w-full`}
key={index}
onClick={() => router.push(`/identities/${domain.id}`)}
>
{domain.id}
</button>
))}
</div>
<button
className="bottom-4 w-full justify-center text-center items-center font-quickZap font-normal flex gap-2"
onClick={
address
? () => mint()
: () => setShowWalletConnectModal(true)
}
>
<FaPlus />
ADD IDENTITIES
</button>
</div>
<div className={styles.containerIdentity}>
<>
<div className={styles.identityBox}>
<IdentityCard
identity={identity}
hideActionsHandler={hideActionsHandler}
tokenId={tokenId}
isOwner={isOwner}
onPPClick={() => setIsUpdatingPp(true)}
ppImageUrl={ppImageUrl}
/>
) : (
minting && <IdentityActionsSkeleton />
)}
</div>
<IdentityWarnings
isIdentityADomain={isIdentityADomain}
identity={identity}
/>
</>
{!hideActions ? (
<IdentityActions
isOwner={isOwner}
tokenId={tokenId}
isIdentityADomain={isIdentityADomain}
identity={identity}
hideActionsHandler={hideActionsHandler}
/>
) : (
minting && <IdentityActionsSkeleton />
)}
</div>
<IdentityWarnings
isIdentityADomain={isIdentityADomain}
identity={identity}
/>
</>
</div>
</div>
</div>
) : (
Expand All @@ -180,6 +276,12 @@ const TokenIdPage: NextPage = () => {
closeModal={() => setIsTxModalOpen(false)}
title="Your new profile picture is being set !"
/>
<WalletConnect
closeModal={() => setShowWalletConnectModal(false)}
open={showWalletConnectModal}
connectors={connectors as Connector[]}
connectWallet={connectWallet}
/>
</>
);
};
Expand Down