Dashboard: Add Marketplace in project

Author: MananTank

apps/dashboard/src/@/analytics/report.ts

@@ -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
@@ -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,
+  });
+}
+
 type UpsellParams = {
   content: "storage-limit";
-  campaign: "create-coin" | "create-nft";
+  campaign: "create-coin" | "create-nft" | "create-marketplace";
   sku: Exclude<ProductSKU, null>;
 };
 

apps/dashboard/src/@/components/contract-components/tables/contract-table.tsx

@@ -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;
 }) {
@@ -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;
 }) {
@@ -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={
@@ -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>
@@ -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
@@ -224,7 +226,7 @@ export function ContractTableUI(props: {
                     </TableCell>
                   )}
 
-                  {props.variant === "asset" && (
+                  {props.variant === "token" && (
                     <TableCell>
                       <Button asChild size="sm" variant="ghost">
                         <Link
@@ -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

apps/dashboard/src/@/components/contracts/import-contract/modal.tsx

@@ -40,7 +40,7 @@ type ImportModalProps = {
   projectSlug: string;
   teamSlug: string;
   client: ThirdwebClient;
-  type: "contract" | "asset";
+  type: "contract" | "token" | "marketplace";
   onSuccess?: () => void;
 };
 
@@ -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
@@ -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();
@@ -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>
@@ -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"
             />

apps/dashboard/src/@/hooks/project-contracts.ts

@@ -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({

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/asset-header.tsx

@@ -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>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsx

@@ -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";
@@ -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"
       />
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/storage-error-upsell.tsx

@@ -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);