Skip to content

Add Contract layout in team/project #7152

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.

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

Merged
merged 1 commit into from
May 26, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import type { ThirdwebContract } from "thirdweb";
import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
import { ErrorPage, LoadingPage } from "../../_components/page-skeletons";
import { RedirectToContractOverview } from "../../_components/redirect-contract-overview.client";
import { useContractPageMetadata } from "../../_hooks/useContractPageMetadata";
Expand All @@ -9,6 +10,7 @@ import { ContractDirectListingsPage } from "./ContractDirectListingsPage";
export function ContractDirectListingsPageClient(props: {
contract: ThirdwebContract;
isLoggedIn: boolean;
projectMeta: ProjectMeta | undefined;
}) {
const metadataQuery = useContractPageMetadata(props.contract);

Expand All @@ -21,7 +23,12 @@ export function ContractDirectListingsPageClient(props: {
}

if (!metadataQuery.data.isDirectListingSupported) {
return <RedirectToContractOverview contract={props.contract} />;
return (
<RedirectToContractOverview
contract={props.contract}
projectMeta={props.projectMeta}
/>
);
}

return (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,45 +1,18 @@
import { notFound, redirect } from "next/navigation";
import { getRawAccount } from "../../../../../../account/settings/getAccount";
import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
import { ContractDirectListingsPage } from "./ContractDirectListingsPage";
import { ContractDirectListingsPageClient } from "./ContractDirectListingsPage.client";
import type { PublicContractPageParams } from "../../types";
import { SharedDirectListingsPage } from "./shared-direct-listings-page";

export default async function Page(props: {
params: Promise<{
contractAddress: string;
chain_id: string;
}>;
params: Promise<PublicContractPageParams>;
}) {
const params = await props.params;
const account = await getRawAccount();
const info = await getContractPageParamsInfo(params);

if (!info) {
notFound();
}

if (info.isLocalhostChain) {
return (
<ContractDirectListingsPageClient
contract={info.clientContract}
isLoggedIn={!!account}
/>
);
}

const { isDirectListingSupported, isInsightSupported } =
await getContractPageMetadata(info.serverContract);

if (!isDirectListingSupported) {
redirect(`/${params.chain_id}/${params.contractAddress}`);
}
const [params, account] = await Promise.all([props.params, getRawAccount()]);

return (
<ContractDirectListingsPage
contract={info.clientContract}
<SharedDirectListingsPage
contractAddress={params.contractAddress}
chainIdOrSlug={params.chain_id}
projectMeta={undefined}
isLoggedIn={!!account}
isInsightSupported={isInsightSupported}
/>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { notFound } from "next/navigation";
import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
import { redirectToContractLandingPage } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
import { ContractDirectListingsPage } from "./ContractDirectListingsPage";
import { ContractDirectListingsPageClient } from "./ContractDirectListingsPage.client";

export async function SharedDirectListingsPage(props: {
contractAddress: string;
chainIdOrSlug: string;
projectMeta: ProjectMeta | undefined;
isLoggedIn: boolean;
}) {
const info = await getContractPageParamsInfo({
contractAddress: props.contractAddress,
chainIdOrSlug: props.chainIdOrSlug,
teamId: props.projectMeta?.teamId,
});

if (!info) {
notFound();
}

if (info.isLocalhostChain) {
return (
<ContractDirectListingsPageClient
contract={info.clientContract}
isLoggedIn={props.isLoggedIn}
projectMeta={props.projectMeta}
/>
);
}

const { isDirectListingSupported, isInsightSupported } =
await getContractPageMetadata(info.serverContract);

if (!isDirectListingSupported) {
redirectToContractLandingPage({
chainIdOrSlug: props.chainIdOrSlug,
contractAddress: props.contractAddress,
projectMeta: props.projectMeta,
});
}

return (
<ContractDirectListingsPage
contract={info.clientContract}
isLoggedIn={props.isLoggedIn}
isInsightSupported={isInsightSupported}
/>
);
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import type { ThirdwebContract } from "thirdweb";
import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
import { ErrorPage, LoadingPage } from "../../_components/page-skeletons";
import { RedirectToContractOverview } from "../../_components/redirect-contract-overview.client";
import { useContractPageMetadata } from "../../_hooks/useContractPageMetadata";
Expand All @@ -9,6 +10,7 @@ import { ContractEnglishAuctionsPage } from "./ContractEnglishAuctionsPage";
export function ContractEnglishAuctionsPageClient(props: {
contract: ThirdwebContract;
isLoggedIn: boolean;
projectMeta: ProjectMeta | undefined;
}) {
const metadataQuery = useContractPageMetadata(props.contract);

Expand All @@ -21,7 +23,12 @@ export function ContractEnglishAuctionsPageClient(props: {
}

if (!metadataQuery.data.isEnglishAuctionSupported) {
return <RedirectToContractOverview contract={props.contract} />;
return (
<RedirectToContractOverview
contract={props.contract}
projectMeta={props.projectMeta}
/>
);
}

return (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,46 +1,18 @@
import { notFound, redirect } from "next/navigation";
import { getRawAccount } from "../../../../../../account/settings/getAccount";
import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
import { ContractEnglishAuctionsPage } from "./ContractEnglishAuctionsPage";
import { ContractEnglishAuctionsPageClient } from "./ContractEnglishAuctionsPage.client";
import type { PublicContractPageParams } from "../../types";
import { SharedEnglishAuctionsPage } from "./shared-english-auctions-page";

export default async function Page(props: {
params: Promise<{
contractAddress: string;
chain_id: string;
}>;
params: Promise<PublicContractPageParams>;
}) {
const params = await props.params;
const info = await getContractPageParamsInfo(params);

if (!info) {
notFound();
}

const twAccount = await getRawAccount();

if (info.isLocalhostChain) {
return (
<ContractEnglishAuctionsPageClient
contract={info.clientContract}
isLoggedIn={!!twAccount}
/>
);
}

const { isEnglishAuctionSupported, isInsightSupported } =
await getContractPageMetadata(info.serverContract);

if (!isEnglishAuctionSupported) {
redirect(`/${params.chain_id}/${params.contractAddress}`);
}
const [params, account] = await Promise.all([props.params, getRawAccount()]);

return (
<ContractEnglishAuctionsPage
contract={info.clientContract}
isLoggedIn={!!twAccount}
isInsightSupported={isInsightSupported}
<SharedEnglishAuctionsPage
contractAddress={params.contractAddress}
chainIdOrSlug={params.chain_id}
projectMeta={undefined}
isLoggedIn={!!account}
/>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { notFound } from "next/navigation";
import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
import { redirectToContractLandingPage } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
import { ContractEnglishAuctionsPage } from "./ContractEnglishAuctionsPage";
import { ContractEnglishAuctionsPageClient } from "./ContractEnglishAuctionsPage.client";

export async function SharedEnglishAuctionsPage(props: {
contractAddress: string;
chainIdOrSlug: string;
projectMeta: ProjectMeta | undefined;
isLoggedIn: boolean;
}) {
const info = await getContractPageParamsInfo({
contractAddress: props.contractAddress,
chainIdOrSlug: props.chainIdOrSlug,
teamId: props.projectMeta?.teamId,
});

if (!info) {
notFound();
}

if (info.isLocalhostChain) {
return (
<ContractEnglishAuctionsPageClient
contract={info.clientContract}
isLoggedIn={props.isLoggedIn}
projectMeta={props.projectMeta}
/>
);
}

const metadata = await getContractPageMetadata(info.serverContract);

if (!metadata.isEnglishAuctionSupported) {
redirectToContractLandingPage({
contractAddress: props.contractAddress,
chainIdOrSlug: props.chainIdOrSlug,
projectMeta: props.projectMeta,
});
}

return (
<ContractEnglishAuctionsPage
contract={info.clientContract}
isLoggedIn={props.isLoggedIn}
isInsightSupported={metadata.isInsightSupported}
/>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { TrackedLinkTW } from "@/components/ui/tracked-link";
import { useMemo } from "react";
import { type NFT, ZERO_ADDRESS } from "thirdweb";
import { NFTMediaWithEmptyState } from "tw-components/nft-media";
import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
import { buildContractPagePath } from "../_utils/contract-page-path";

type NFTWithContract = NFT & { contractAddress: string; chainId: number };

Expand All @@ -29,13 +31,15 @@ interface NFTCardsProps {
trackingCategory: string;
isPending: boolean;
allNfts?: boolean;
projectMeta: ProjectMeta | undefined;
}

export const NFTCards: React.FC<NFTCardsProps> = ({
nfts,
trackingCategory,
isPending,
allNfts,
projectMeta,
}) => {
const dummyData = useMemo(() => {
return Array.from({
Expand Down Expand Up @@ -87,7 +91,12 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
<TrackedLinkTW
category={trackingCategory}
label="view_nft"
href={`/${token.chainId}/${token.contractAddress}/nfts/${tokenId}`}
href={buildContractPagePath({
projectMeta,
chainIdOrSlug: token.chainId.toString(),
contractAddress: token.contractAddress,
subpath: `/nfts/${tokenId}`,
})}
className="before:absolute before:inset-0"
>
{v.name}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@
import { useDashboardRouter } from "@/lib/DashboardRouter";
import { useEffect, useRef } from "react";
import type { ThirdwebContract } from "thirdweb";
import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
import { buildContractPagePath } from "../_utils/contract-page-path";
import { LoadingPage } from "./page-skeletons";

export function RedirectToContractOverview(props: {
contract: ThirdwebContract;
projectMeta: ProjectMeta | undefined;
}) {
const router = useDashboardRouter();
const redirected = useRef(false);
Expand All @@ -17,8 +20,14 @@ export function RedirectToContractOverview(props: {
return;
}
redirected.current = true;
router.replace(`/${props.contract.chain.id}/${props.contract.address}`);
}, [router, props.contract]);
const landingPage = buildContractPagePath({
projectMeta: props.projectMeta,
chainIdOrSlug: props.contract.chain.id.toString(),
contractAddress: props.contract.address,
});

router.replace(landingPage);
}, [router, props]);

return <LoadingPage />;
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@

import { useQuery } from "@tanstack/react-query";
import type { MinimalTeamsAndProjects } from "components/contract-components/contract-deploy-form/add-to-project-card";
import type { ThirdwebClient, ThirdwebContract } from "thirdweb";
import type { ThirdwebContract } from "thirdweb";
import type { ChainMetadata } from "thirdweb/chains";
import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
import { getContractPageSidebarLinks } from "../_utils/getContractPageSidebarLinks";
Expand All @@ -15,7 +16,7 @@ export function ContractPageLayoutClient(props: {
contract: ThirdwebContract;
children: React.ReactNode;
teamsAndProjects: MinimalTeamsAndProjects | undefined;
client: ThirdwebClient;
projectMeta: ProjectMeta | undefined;
}) {
const metadataQuery = useContractPageMetadata(props.contract);
const headerMetadataQuery = useQuery({
Expand All @@ -39,6 +40,7 @@ export function ContractPageLayoutClient(props: {
chainSlug: props.chainMetadata.slug,
contractAddress: props.contract.address,
metadata: metadataQuery.data,
projectMeta: props.projectMeta,
});

return (
Expand Down
Loading
Loading