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

Author: MananTank

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

@@ -300,6 +300,7 @@ const contractTypeToAssetTypeRecord: Record<string, string | undefined> = {
   DropERC20: "Coin",
   DropERC721: "NFT Collection",
   DropERC1155: "NFT Collection",
+  ERC20Asset: "Coin",
 };
 
 const NetworkFilterCell = React.memo(function NetworkFilterCell({

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/@/hooks/project-contracts.ts

@@ -11,7 +11,7 @@ export function useAddContractToProject() {
       contractAddress: string;
       chainId: string;
       deploymentType: "asset" | undefined;
-      contractType: "DropERC20" | "DropERC721" | "DropERC1155" | undefined;
+      contractType: "ERC20Asset" | "DropERC721" | "DropERC1155" | undefined;
     }) => {
       const res = await apiServerProxy({
         body: JSON.stringify({

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

@@ -35,7 +35,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
               className="gap-2"

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/collection-info/nft-collection-info-fieldset.tsx

@@ -9,6 +9,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 { SocialUrlsFieldset } from "../../_common/SocialUrls";
 import { StepCard } from "../../_common/step-card";
@@ -94,7 +95,7 @@ export function NFTCollectionInfoFieldset(props: {
                 isRequired
                 label="Chain"
               >
-                <ClientOnly ssr={null}>
+                <ClientOnly ssr={<Skeleton className="h-10" />}>
                   <SingleNetworkSelector
                     chainId={Number(form.watch("chain"))}
                     className="bg-background"

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

@@ -8,7 +8,7 @@ import {
   NATIVE_TOKEN_ADDRESS,
   type ThirdwebClient,
 } from "thirdweb";
-import { useActiveAccount } from "thirdweb/react";
+import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
 import { reportAssetCreationStepConfigured } from "@/analytics/report";
 import {
   type CreateNFTCollectionFunctions,
@@ -160,11 +160,10 @@ export function CreateNFTPageUI(props: {
 }
 
 function useNFTCollectionInfoForm() {
+  const activeChain = useActiveWalletChain();
   return useForm<NFTCollectionInfoFormValues>({
-    resolver: zodResolver(nftCollectionInfoFormSchema),
-    reValidateMode: "onChange",
-    values: {
-      chain: "1",
+    defaultValues: {
+      chain: activeChain?.id.toString() || "1",
       description: "",
       image: undefined,
       name: "",
@@ -180,5 +179,7 @@ function useNFTCollectionInfoForm() {
       ],
       symbol: "",
     },
+    resolver: zodResolver(nftCollectionInfoFormSchema),
+    reValidateMode: "onChange",
   });
 }

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

@@ -15,6 +15,16 @@ export const tokenInfoFormSchema = z.object({
     .max(10, "Symbol must be 10 characters or less"),
 });
 
+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({
   airdropAddresses: z.array(
     z.object({
@@ -24,6 +34,13 @@ export const tokenDistributionFormSchema = z.object({
   ),
   // UI states
   airdropEnabled: z.boolean(),
+  directSale: z.object({
+    currencyAddress: addressSchema,
+    priceAmount: priceAmountSchema,
+  }),
+  publicMarket: z.object({
+    tradingFees: z.enum(["0.01", "0.05", "0.3", "1"]),
+  }),
   saleAllocationPercentage: z.string().refine(
     (value) => {
       const number = Number(value);
@@ -36,17 +53,7 @@ export const tokenDistributionFormSchema = z.object({
       message: "Must be a number between 0 and 100",
     },
   ),
-  saleEnabled: z.boolean(),
-  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",
-    },
-  ),
-  saleTokenAddress: z.string(),
+  saleMode: z.enum(["direct-sale", "public-market", "disabled"]),
   supply: z.string().min(1, "Supply is required"),
 });