Skip to content

[TOOL-5114] Dashboard: Add Marketplace in project #7736

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

Closed
wants to merge 1 commit into from
Closed

[TOOL-5114] Dashboard: Add Marketplace in project #7736

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
44 changes: 27 additions & 17 deletions apps/dashboard/src/@/analytics/report.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,22 +269,6 @@ export function reportAssetBuyFailed(properties: {

// Assets Landing Page ----------------------------

/**
* ### Why do we need to report this event?
* - To track number of asset creation started from the assets page
* - To track which asset types are being created the most
*
* ### Who is responsible for this event?
* @MananTank
*/
export function reportAssetCreationStarted(properties: {
assetType: "nft" | "coin";
}) {
posthog.capture("asset creation started", {
assetType: properties.assetType,
});
}

/**
* ### Why do we need to report this event?
* - To track number of assets imported successfully from the assets page
Expand Down Expand Up @@ -386,9 +370,35 @@ export function reportAssetCreationFailed(
});
}

/**
* ### Why do we need to report this event?
* - To track number of successful asset creations
* - To track which asset types are being created the most
*
* ### Who is responsible for this event?
* @MananTank
*/
export function reportMarketCreationSuccessful() {
posthog.capture("market creation successful");
}

/**
* ### Why do we need to report this event?
* - To track number of failed marketplace creations
* - To track the errors that users encounter when trying to create a marketplace
*
* ### Who is responsible for this event?
* @MananTank
*/
export function reportMarketCreationFailed(properties: { error: string }) {
posthog.capture("market creation failed", {
error: properties.error,
});
}
Comment on lines +373 to +397
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix JSDoc documentation and approve implementation

The marketplace analytics functions follow the established patterns well, but there's a copy-paste error in the JSDoc documentation.

 /**
  * ### Why do we need to report this event?
- * - To track number of successful asset creations
- * - To track which asset types are being created the most
+ * - To track number of successful marketplace creations
+ * - To track marketplace creation success rates
  *
  * ### Who is responsible for this event?
  * @MananTank
  */

The function implementations correctly follow the analytics patterns with appropriate event names and properties.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/**
* ### Why do we need to report this event?
* - To track number of successful asset creations
* - To track which asset types are being created the most
*
* ### Who is responsible for this event?
* @MananTank
*/
export function reportMarketCreationSuccessful() {
posthog.capture("market creation successful");
}
/**
* ### Why do we need to report this event?
* - To track number of failed marketplace creations
* - To track the errors that users encounter when trying to create a marketplace
*
* ### Who is responsible for this event?
* @MananTank
*/
export function reportMarketCreationFailed(properties: { error: string }) {
posthog.capture("market creation failed", {
error: properties.error,
});
}
/**
* ### Why do we need to report this event?
* - To track number of successful marketplace creations
* - To track marketplace creation success rates
*
* ### Who is responsible for this event?
* @MananTank
*/
export function reportMarketCreationSuccessful() {
posthog.capture("market creation successful");
}
🤖 Prompt for AI Agents 
In apps/dashboard/src/@/analytics/report.ts around lines 373 to 397, the JSDoc
comments for the reportMarketCreationSuccessful and reportMarketCreationFailed
functions contain a copy-paste error referencing "marketplace" inconsistently.
Update the JSDoc to consistently refer to "market creation" or "marketplace
creation" as appropriate, ensuring the descriptions accurately reflect the event
being reported. No changes are needed to the function implementations.


type UpsellParams = {
content: "storage-limit";
campaign: "create-coin" | "create-nft";
campaign: "create-coin" | "create-nft" | "create-marketplace";
sku: Exclude<ProductSKU, null>;
};

Expand Down
53 changes: 26 additions & 27 deletions apps/dashboard/src/@/components/contract-components/tables/contract-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function ContractTable(props: {
teamId: string;
projectId: string;
client: ThirdwebClient;
variant: "asset" | "contract";
variant: "token" | "contract" | "marketplace";
teamSlug: string;
projectSlug: string;
}) {
Expand Down Expand Up @@ -76,7 +76,7 @@ export function ContractTableUI(props: {
pageSize: number;
removeContractFromProject: (contractId: string) => Promise<void>;
client: ThirdwebClient;
variant: "asset" | "contract";
variant: "token" | "contract" | "marketplace";
teamSlug: string;
projectSlug: string;
}) {
Expand Down Expand Up @@ -143,7 +143,7 @@ export function ContractTableUI(props: {
<TableHeader className="z-0">
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Type</TableHead>
{props.variant !== "marketplace" && <TableHead>Type</TableHead>}
<TableHead className="tracking-normal">
<NetworkFilterCell
chainId={
Expand All @@ -163,7 +163,7 @@ export function ContractTableUI(props: {
<TableHead>Contract Address</TableHead>
)}

{props.variant === "asset" && <TableHead> Token Page</TableHead>}
{props.variant === "token" && <TableHead> Token Page</TableHead>}

<TableHead>Actions</TableHead>
</TableRow>
Expand All @@ -188,23 +188,25 @@ export function ContractTableUI(props: {
/>
</TableCell>

<TableCell>
{contract.contractType &&
props.variant === "asset" &&
contractTypeToAssetTypeRecord[contract.contractType] ? (
<ContractTypeCellUI
name={
contractTypeToAssetTypeRecord[contract.contractType]
}
/>
) : (
<ContractTypeCell
chainId={contract.chainId}
client={props.client}
contractAddress={contract.contractAddress}
/>
)}
</TableCell>
{props.variant !== "marketplace" && (
<TableCell>
{contract.contractType &&
props.variant === "token" &&
contractTypeToAssetTypeRecord[contract.contractType] ? (
<ContractTypeCellUI
name={
contractTypeToAssetTypeRecord[contract.contractType]
}
/>
) : (
<ContractTypeCell
chainId={contract.chainId}
client={props.client}
contractAddress={contract.contractAddress}
/>
)}
</TableCell>
)}

<TableCell>
<ChainNameCell
Expand All @@ -224,7 +226,7 @@ export function ContractTableUI(props: {
</TableCell>
)}

{props.variant === "asset" && (
{props.variant === "token" && (
<TableCell>
<Button asChild size="sm" variant="ghost">
<Link
Expand Down Expand Up @@ -261,11 +263,8 @@ export function ContractTableUI(props: {
{contracts.length === 0 && (
<div className="flex h-[350px] items-center justify-center text-muted-foreground">
<div className="text-center">
{props.variant === "asset" ? (
<p className="mb-3">No tokens found</p>
) : (
<p className="mb-3">No contracts found</p>
)}
<p className="mb-3">No {props.variant}s</p>

{props.variant === "contract" && (
<Button asChild className="bg-background" variant="outline">
<Link
Expand Down
10 changes: 6 additions & 4 deletions apps/dashboard/src/@/components/contracts/import-contract/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ type ImportModalProps = {
projectSlug: string;
teamSlug: string;
client: ThirdwebClient;
type: "contract" | "asset";
type: "contract" | "token" | "marketplace";
onSuccess?: () => void;
};

Expand All @@ -60,7 +60,7 @@ export const ImportModal: React.FC<ImportModalProps> = (props) => {
>
<DialogHeader className="p-6">
<DialogTitle className="font-semibold text-2xl tracking-tight">
Import {props.type === "contract" ? "Contract" : "Token"}
Import {props.type}
</DialogTitle>
<DialogDescription>
Import a deployed contract in your project
Expand Down Expand Up @@ -103,7 +103,7 @@ function ImportForm(props: {
teamSlug: string;
projectSlug: string;
client: ThirdwebClient;
type: "contract" | "asset";
type: "contract" | "token" | "marketplace";
onSuccess?: () => void;
}) {
const router = useDashboardRouter();
Expand Down Expand Up @@ -197,7 +197,7 @@ function ImportForm(props: {
<FormItem>
<FormLabel>Contract Address</FormLabel>
<FormControl>
<Input placeholder="0x..." {...field} />
<Input placeholder="0x..." {...field} className="bg-card" />
</FormControl>
<FormMessage />
</FormItem>
Expand All @@ -211,6 +211,8 @@ function ImportForm(props: {
chainId={form.watch("chainId")}
client={props.client}
disableChainId
disableDeprecated
className="bg-card"
onChange={(v) => form.setValue("chainId", v)}
side="top"
/>
Expand Down
9 changes: 7 additions & 2 deletions apps/dashboard/src/@/hooks/project-contracts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,13 @@ export function useAddContractToProject() {
projectId: string;
contractAddress: string;
chainId: string;
deploymentType: "asset" | undefined;
contractType: "DropERC20" | "DropERC721" | "DropERC1155" | undefined;
deploymentType: "asset" | "marketplace" | undefined;
contractType:
| "DropERC20"
| "DropERC721"
| "DropERC1155"
| "MarketplaceV3"
| undefined;
}) => {
const res = await apiServerProxy({
body: JSON.stringify({
Expand Down
30 changes: 30 additions & 0 deletions ...dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/asset-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { TabPathLinks } from "@/components/ui/tabs";

export function AssetsHeader(props: { teamSlug: string; projectSlug: string }) {
return (
<div>
<div className="container max-w-7xl pt-8 pb-4">
<h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
Tokens
</h1>
<p className="text-muted-foreground">
Create and manage tokens for your project
</p>
</div>

<TabPathLinks
scrollableClassName="container max-w-7xl"
links={[
{
name: "Tokens",
path: `/team/${props.teamSlug}/${props.projectSlug}/tokens`,
},
{
name: "NFT Marketplace",
path: `/team/${props.teamSlug}/${props.projectSlug}/tokens/marketplace`,
},
]}
/>
</div>
);
}
13 changes: 1 addition & 12 deletions apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import Link from "next/link";
import { useState } from "react";
import type { ThirdwebClient } from "thirdweb";
import {
reportAssetCreationStarted,
reportAssetImportStarted,
reportAssetImportSuccessful,
} from "@/analytics/report";
Expand Down Expand Up @@ -36,30 +35,20 @@ export function Cards(props: {
projectSlug={props.projectSlug}
teamId={props.teamId}
teamSlug={props.teamSlug}
type="asset"
type="token"
/>

<CardLink
description="Launch your own ERC-20 coin"
href={`/team/${props.teamSlug}/${props.projectSlug}/tokens/create/token`}
icon={CoinsIcon}
onClick={() => {
reportAssetCreationStarted({
assetType: "coin",
});
}}
title="Create Coin"
/>

<CardLink
description="Launch your own NFT collection"
href={`/team/${props.teamSlug}/${props.projectSlug}/tokens/create/nft`}
icon={ImagesIcon}
onClick={() => {
reportAssetCreationStarted({
assetType: "nft",
});
}}
title="Create NFT Collection"
/>

Expand Down
2 changes: 1 addition & 1 deletion .../team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/storage-error-upsell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { tryCatch } from "@/utils/try-catch";

export function StorageErrorPlanUpsell(props: {
teamSlug: string;
trackingCampaign: "create-coin" | "create-nft";
trackingCampaign: "create-coin" | "create-nft" | "create-marketplace";
onRetry: () => void;
}) {
const [isPlanUpdated, setIsPlanUpdated] = useState(false);
Expand Down
Loading
Loading