update creation UI

Author: MananTank

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

@@ -49,7 +49,7 @@ export function CreateTokenAssetPageUI(props: {
 
   const tokenInfoForm = useForm<TokenInfoFormValues>({
     defaultValues: {
-      chain: activeChain?.id.toString() || "1",
+      chain: activeChain?.id.toString() || "8453",
       description: "",
       image: undefined,
       name: "",
@@ -75,12 +75,12 @@ export function CreateTokenAssetPageUI(props: {
       // airdrop
       airdropEnabled: false,
       pool: {
-        startingPricePerToken: "0.01",
+        startingPricePerToken: "0.000000001", // 1gwei per token
       },
       // sale fieldset
-      saleAllocationPercentage: "0",
-      saleMode: "disabled",
-      supply: "1000000",
+      saleAllocationPercentage: "100",
+      saleMode: "pool",
+      supply: "1000000000", // 1 billion
     },
     mode: "onChange",
     resolver: zodResolver(tokenDistributionFormSchema),

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx

@@ -17,6 +17,11 @@ import type {
 import { TokenAirdropSection } from "./token-airdrop";
 import { TokenSaleSection } from "./token-sale";
 
+const compactNumberFormatter = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 10,
+  notation: "compact",
+});
+
 export function TokenDistributionFieldset(props: {
   accountAddress: string;
   onNext: () => void;
@@ -49,6 +54,7 @@ export function TokenDistributionFieldset(props: {
               <FormFieldSetup
                 errorMessage={form.formState.errors.supply?.message}
                 htmlFor={supplyId}
+                helperText={`${compactNumberFormatter.format(Number(form.watch("supply")))} tokens`}
                 isRequired
                 label="Total Supply"
               >
@@ -73,12 +79,13 @@ export function TokenDistributionFieldset(props: {
               </div>
             </div>
 
-            <TokenAirdropSection client={props.client} form={form} />
             <TokenSaleSection
               chainId={props.chainId}
               client={props.client}
               form={form}
             />
+
+            <TokenAirdropSection client={props.client} form={form} />
           </div>
         </StepCard>
       </form>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-sale.tsx

@@ -2,14 +2,14 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { XIcon } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { defineChain } from "thirdweb";
 import { isRouterEnabled } from "thirdweb/assets";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { DecimalInput } from "@/components/ui/decimal-input";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Switch } from "@/components/ui/switch";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import type { TokenDistributionForm } from "../_common/form";
@@ -22,27 +22,48 @@ export function TokenSaleSection(props: {
   const saleMode = props.form.watch("saleMode");
   const { idToChain } = useAllChainsData();
   const chainMeta = idToChain.get(Number(props.chainId));
+  const [hasUserUpdatedSaleMode, setHasUserUpdatedSaleMode] = useState(false);
 
   const isRouterEnabledQuery = useQuery({
-    queryFn: () =>
-      isRouterEnabled({
-        // eslint-disable-next-line no-restricted-syntax
-        chain: defineChain(Number(props.chainId)),
-        client: props.client,
-      }),
+    queryFn: async () => {
+      try {
+        return await isRouterEnabled({
+          // eslint-disable-next-line no-restricted-syntax
+          chain: defineChain(Number(props.chainId)),
+          client: props.client,
+        });
+      } catch {
+        return false;
+      }
+    },
     queryKey: ["isRouterEnabled", props.chainId],
   });
 
+  const isRouterEnabledValue = isRouterEnabledQuery.data === true;
+
   const isSaleEnabled = saleMode !== "disabled";
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (isRouterEnabledQuery.data === false && isSaleEnabled) {
+    if (isRouterEnabledValue === false && isSaleEnabled) {
       props.form.setValue("saleMode", "disabled", {
         shouldValidate: true,
       });
     }
-  }, [isRouterEnabledQuery.data, isSaleEnabled, props.form]);
+  }, [isRouterEnabledValue, isSaleEnabled, props.form]);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (
+      isRouterEnabledValue === true &&
+      !hasUserUpdatedSaleMode &&
+      !isSaleEnabled
+    ) {
+      props.form.setValue("saleMode", "pool", {
+        shouldValidate: true,
+      });
+    }
+  }, [isRouterEnabledValue, props.form, hasUserUpdatedSaleMode, isSaleEnabled]);
 
   return (
     <DynamicHeight>
@@ -52,23 +73,25 @@ export function TokenSaleSection(props: {
             <div>
               <h2 className="font-semibold text-lg">Sale</h2>
               <p className="text-muted-foreground text-sm">
-                List and add liquidity for your coin on a decentralized exchange
-                for purchase at fluctuating market price
+                List your coin on a decentralized exchange and earn rewards on
+                every trade
               </p>
             </div>
 
             <div className="flex items-center gap-2">
               {isRouterEnabledQuery.isPending ? (
-                <Skeleton className="h-[24px] w-[44px] rounded-full border" />
+                <Spinner className="size-5" />
               ) : (
                 <Switch
                   checked={isSaleEnabled}
-                  disabled={isRouterEnabledQuery.data !== true}
+                  disabled={!isRouterEnabledValue}
                   onCheckedChange={(checked) => {
-                    if (isRouterEnabledQuery.data !== true) {
+                    if (!isRouterEnabledValue) {
                       return;
                     }
 
+                    setHasUserUpdatedSaleMode(true);
+
                     props.form.setValue(
                       "saleMode",
                       checked ? "pool" : "disabled",