[TOOL-4689] Dashboard: Integrate ERC20Asset contract in token creation flow

Author: MananTank

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -98,6 +98,7 @@ export function TabButtons(props: {
   shadowColor?: string;
   tabIconClassName?: string;
   hideBottomLine?: boolean;
+  bottomLineClassName?: string;
 }) {
   const { containerRef, lineRef, activeTabRef } =
     useUnderline<HTMLButtonElement>();
@@ -106,7 +107,12 @@ export function TabButtons(props: {
     <div className={cn("relative", props.containerClassName)}>
       {/* Bottom line */}
       {!props.hideBottomLine && (
-        <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
+        <div
+          className={cn(
+            "absolute right-0 bottom-0 left-0 h-[1px] bg-border",
+            props.bottomLineClassName,
+          )}
+        />
       )}
 
       <ScrollShadow

apps/dashboard/src/@/constants/server-envs.ts

@@ -1,9 +1,11 @@
 import "server-only";
-import { experimental_taintUniqueValue } from "react";
+import { experimental_taintUniqueValue as _experimental_taintUniqueValue } from "react";
 import { isProd } from "./env-utils";
 
 // Make sure to taint the server only envs here with experimental_taintUniqueValue ONLY if they contain a UNIQUE sensitive value
 // if an env has a generic value that may appear naturally in client components - do not taint it
+const experimental_taintUniqueValue =
+  _experimental_taintUniqueValue || (() => {});
 
 export const DASHBOARD_THIRDWEB_SECRET_KEY =
   process.env.DASHBOARD_SECRET_KEY || "";

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/step-card.tsx

@@ -7,7 +7,7 @@ export function StepCard(props: {
   title: string;
   tracking: {
     page: string;
-    contractType: "DropERC20" | "NFTCollection";
+    contractType: "ERC20Asset" | "NFTCollection";
   };
   prevButton:
     | undefined
@@ -42,7 +42,7 @@ export function StepCard(props: {
       {props.children}
 
       {(props.prevButton || props.nextButton) && (
-        <div className="flex justify-end gap-3 border-t p-6">
+        <div className="flex justify-end gap-3 border-t p-4 md:p-6">
           {props.prevButton && (
             <Button
               variant="outline"

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/_common/form.ts

@@ -15,6 +15,16 @@ export const tokenInfoFormSchema = z.object({
   socialUrls: socialUrlsSchema,
 });
 
+const priceAmountSchema = z.string().refine(
+  (value) => {
+    const number = Number(value);
+    return !Number.isNaN(number) && number >= 0;
+  },
+  {
+    message: "Must be number larger than or equal to 0",
+  },
+);
+
 export const tokenDistributionFormSchema = z.object({
   supply: z.string().min(1, "Supply is required"),
   saleAllocationPercentage: z.string().refine(
@@ -29,16 +39,13 @@ export const tokenDistributionFormSchema = z.object({
       message: "Must be a number between 0 and 100",
     },
   ),
-  saleTokenAddress: z.string(),
-  salePrice: z.string().refine(
-    (value) => {
-      const number = Number(value);
-      return !Number.isNaN(number) && number >= 0;
-    },
-    {
-      message: "Must be number larger than or equal to 0",
-    },
-  ),
+  directSale: z.object({
+    priceAmount: priceAmountSchema,
+    currencyAddress: addressSchema,
+  }),
+  publicMarket: z.object({
+    tradingFees: z.enum(["0.01", "0.05", "0.3", "1"]),
+  }),
   airdropAddresses: z.array(
     z.object({
       address: addressSchema,
@@ -47,7 +54,7 @@ export const tokenDistributionFormSchema = z.object({
   ),
   // UI states
   airdropEnabled: z.boolean(),
-  saleEnabled: z.boolean(),
+  saleMode: z.enum(["direct-sale", "public-market", "disabled"]),
 });
 
 export type TokenDistributionForm = UseFormReturn<

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/_common/tracking.ts

@@ -16,7 +16,7 @@ export function getTokenDeploymentTrackingData(
     category: "custom-contract",
     action: "deploy",
     label: params.type,
-    publisherAndContractName: "deployer.thirdweb.eth/DropERC20",
+    publisherAndContractName: "deployer.thirdweb.eth/ERC20Asset",
     chainId: params.chainId,
     deploymentType: "asset",
   };
@@ -40,7 +40,7 @@ export function getTokenStepTrackingData(
   return {
     category: "asset",
     action: params.action,
-    contractType: "DropERC20",
+    contractType: "ERC20Asset",
     label: params.status,
     chainId: params.chainId,
     ...(params.status === "error"
@@ -56,7 +56,7 @@ export function getTokenLaunchTrackingData(
   params: {
     chainId: number;
     airdropEnabled: boolean;
-    saleEnabled: boolean;
+    saleMode: "disabled" | "direct-sale" | "public-market";
   } & (
     | {
         type: "attempt" | "success";
@@ -71,10 +71,10 @@ export function getTokenLaunchTrackingData(
     category: "asset",
     action: "launch",
     label: params.type,
-    contractType: "DropERC20",
+    contractType: "ERC20Asset",
     chainId: params.chainId,
     airdropEnabled: params.airdropEnabled,
-    saleEnabled: params.saleEnabled,
+    saleMode: params.saleMode,
     ...(params.type === "error"
       ? {
           errorMessage: params.errorMessage,
@@ -87,7 +87,7 @@ export function getTokenLaunchTrackingData(
 export function getStepCardTrackingData(params: {
   step: string;
   click: "prev" | "next";
-  contractType: "DropERC20" | "NFTCollection";
+  contractType: "ERC20Asset" | "NFTCollection";
 }) {
   return {
     category: "asset",