[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

@@ -6,9 +6,6 @@ import { isProd } from "./env-utils";
 const experimental_taintUniqueValue =
   _experimental_taintUniqueValue || (() => {});
 
-// 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
-
 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/nft/collection-info/nft-collection-info-fieldset.tsx

@@ -4,6 +4,7 @@ import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { Form } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
 import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { FileInput } from "components/shared/FileInput";
@@ -95,7 +96,7 @@ export function NFTCollectionInfoFieldset(props: {
                 htmlFor="chain"
                 errorMessage={form.formState.errors.chain?.message}
               >
-                <ClientOnly ssr={null}>
+                <ClientOnly ssr={<Skeleton className="h-10" />}>
                   <SingleNetworkSelector
                     className="bg-background"
                     client={props.client}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page-ui.tsx

@@ -8,7 +8,7 @@ import {
   type ThirdwebClient,
   getAddress,
 } from "thirdweb";
-import { useActiveAccount } from "thirdweb/react";
+import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
 import {
   type CreateNFTCollectionFunctions,
   type NFTCollectionInfoFormValues,
@@ -148,14 +148,15 @@ export function CreateNFTPageUI(props: {
 }
 
 function useNFTCollectionInfoForm() {
+  const activeChain = useActiveWalletChain();
   return useForm<NFTCollectionInfoFormValues>({
     resolver: zodResolver(nftCollectionInfoFormSchema),
-    values: {
+    defaultValues: {
       name: "",
       description: "",
       symbol: "",
       image: undefined,
-      chain: "1",
+      chain: activeChain?.id.toString() || "1",
       socialUrls: [
         {
           platform: "Website",

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",