[MNY-11] Dashboard: Add ERC20 token selector for starting price in token creation flow

Author: MananTank

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

@@ -1,7 +1,6 @@
 import type { UseFormReturn } from "react-hook-form";
 import * as z from "zod";
 import { addressSchema, socialUrlsSchema } from "../../_common/schema";
-import { getInitialTickValue, isValidTickValue } from "../utils/calculate-tick";
 
 export const tokenInfoFormSchema = z.object({
   chain: z.string().min(1, "Chain is required"),
@@ -37,17 +36,8 @@ export const tokenDistributionFormSchema = z.object({
   airdropEnabled: z.boolean(),
   // sales ---
   erc20Asset_poolMode: z.object({
-    startingPricePerToken: priceAmountSchema.refine((value) => {
-      const numValue = Number(value);
-      if (numValue === 0) {
-        return false;
-      }
-      const tick = getInitialTickValue({
-        startingPricePerToken: Number(value),
-      });
-
-      return isValidTickValue(tick);
-    }, "Invalid price"),
+    startingPricePerToken: priceAmountSchema,
+    tokenAddress: addressSchema,
     saleAllocationPercentage: z.string().refine(
       (value) => {
         const number = Number(value);

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

@@ -38,7 +38,7 @@ import { pollWithTimeout } from "@/utils/pollWithTimeout";
 import { createTokenOnUniversalBridge } from "../_apis/create-token-on-bridge";
 import type { CreateAssetFormValues } from "./_common/form";
 import { CreateTokenAssetPageUI } from "./create-token-page.client";
-import { getInitialTickValue } from "./utils/calculate-tick";
+import { getInitialTickValue, isValidTickValue } from "./utils/calculate-tick";
 
 export function CreateTokenAssetPage(props: {
   accountAddress: string;
@@ -113,6 +113,21 @@ export function CreateTokenAssetPage(props: {
 
     const chain = getChain(Number(params.values.chain));
 
+    const initialTick = await getInitialTickValue({
+      startingPricePerToken: Number(
+        params.values.erc20Asset_poolMode.startingPricePerToken,
+      ),
+      tokenAddress: params.values.erc20Asset_poolMode.tokenAddress,
+      chain,
+      client: props.client,
+    });
+
+    if (!isValidTickValue(initialTick)) {
+      throw new Error(
+        "Invalid starting price per token. Change price and try again",
+      );
+    }
+
     const contractAddress = await createToken({
       account,
       chain: chain,
@@ -123,12 +138,13 @@ export function CreateTokenAssetPage(props: {
               kind: "pool",
               config: {
                 amount: BigInt(saleAmount),
-                initialTick: getInitialTickValue({
-                  startingPricePerToken: Number(
-                    params.values.erc20Asset_poolMode.startingPricePerToken,
-                  ),
-                }),
+                initialTick: initialTick,
                 developerRewardBps: 1250, // 12.5%
+                currency:
+                  getAddress(params.values.erc20Asset_poolMode.tokenAddress) ===
+                  getAddress(NATIVE_TOKEN_ADDRESS)
+                    ? undefined
+                    : params.values.erc20Asset_poolMode.tokenAddress,
               },
             }
           : undefined,
@@ -442,14 +458,16 @@ export function CreateTokenAssetPage(props: {
           setClaimConditions: DropERC20_setClaimConditions,
         },
       }}
-      onLaunchSuccess={(params) => {
-        createTokenOnUniversalBridge({
-          chainId: params.chainId,
-          client: props.client,
-          tokenAddress: params.contractAddress,
-          // TODO: UPDATE THIS WHEN WE ALLOW CUSTOM CURRENCY PAIRING
-          pairedTokenAddress: NATIVE_TOKEN_ADDRESS,
-        });
+      onLaunchSuccess={(values, contractAddress) => {
+        if (values.saleMode === "erc20-asset:pool") {
+          createTokenOnUniversalBridge({
+            chainId: Number(values.chain),
+            client: props.client,
+            tokenAddress: contractAddress,
+            pairedTokenAddress: values.erc20Asset_poolMode.tokenAddress,
+          });
+        }
+
         revalidatePathAction(
           `/team/${props.teamSlug}/project/${props.projectId}/tokens`,
           "page",

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

@@ -59,10 +59,10 @@ export function CreateTokenAssetPageUI(props: {
   accountAddress: string;
   client: ThirdwebClient;
   createTokenFunctions: CreateTokenFunctions;
-  onLaunchSuccess: (params: {
-    chainId: number;
-    contractAddress: string;
-  }) => void;
+  onLaunchSuccess: (
+    formValues: CreateAssetFormValues,
+    contractAddress: string,
+  ) => void;
   teamSlug: string;
   projectSlug: string;
   teamPlan: Team["billingPlan"];
@@ -138,6 +138,7 @@ export function CreateTokenAssetPageUI(props: {
       erc20Asset_poolMode: {
         startingPricePerToken: "0.000000001", // 1gwei per token
         saleAllocationPercentage: "100",
+        tokenAddress: nativeTokenAddress,
       },
       dropERC20Mode: {
         pricePerToken: "0.1",
@@ -166,11 +167,15 @@ export function CreateTokenAssetPageUI(props: {
           client={props.client}
           form={tokenInfoForm}
           onChainUpdated={() => {
-            // reset the token address to the native token address on chain change
             tokenDistributionForm.setValue(
               "dropERC20Mode.saleTokenAddress",
               nativeTokenAddress,
             );
+
+            tokenDistributionForm.setValue(
+              "erc20Asset_poolMode.tokenAddress",
+              nativeTokenAddress,
+            );
           }}
           onNext={() => {
             reportAssetCreationStepConfigured({

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

@@ -4,6 +4,7 @@ import { DollarSignIcon, XIcon } from "lucide-react";
 import type { ThirdwebClient } from "thirdweb";
 import { DistributionBarChart } from "@/components/blocks/distribution-chart";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { TokenSelector } from "@/components/blocks/TokenSelector";
 import { Badge } from "@/components/ui/badge";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { DecimalInput } from "@/components/ui/decimal-input";
@@ -147,9 +148,6 @@ function PoolConfig(props: {
   chainId: string;
   client: ThirdwebClient;
 }) {
-  const { idToChain } = useAllChainsData();
-  const chainMeta = idToChain.get(Number(props.chainId));
-
   const totalSupply = Number(props.form.watch("supply"));
   const sellSupply = Math.floor(
     (totalSupply *
@@ -189,7 +187,7 @@ function PoolConfig(props: {
         </Select>
       </FormFieldSetup>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:max-w-[536px]">
+      <div className="flex flex-col lg:flex-row gap-4">
         {/* supply % */}
         <FormFieldSetup
           errorMessage={
@@ -199,6 +197,7 @@ function PoolConfig(props: {
           helperText={`${compactNumberFormatter.format(sellSupply)} tokens`}
           isRequired
           label="Sell % of Total Supply"
+          className="lg:max-w-[220px] grow"
         >
           <div className="relative">
             <DecimalInput
@@ -230,10 +229,11 @@ function PoolConfig(props: {
           }
           isRequired
           label="Starting price per token"
+          className="grow lg:max-w-sm"
         >
-          <div className="relative">
+          <div className="relative grid grid-cols-2">
             <DecimalInput
-              className="pr-10"
+              className="pr-10 rounded-r-none"
               onChange={(value) => {
                 props.form.setValue(
                   "erc20Asset_poolMode.startingPricePerToken",
@@ -247,9 +247,26 @@ function PoolConfig(props: {
                 "erc20Asset_poolMode.startingPricePerToken",
               )}
             />
-            <span className="-translate-y-1/2 absolute top-1/2 right-3 text-sm text-muted-foreground">
-              {chainMeta?.nativeCurrency.symbol || "ETH"}
-            </span>
+
+            <TokenSelector
+              addNativeTokenIfMissing={true}
+              chainId={Number(props.chainId)}
+              className="bg-background border-l-0 rounded-l-none"
+              client={props.client}
+              disableAddress={true}
+              popoverContentClassName="!w-[320px]"
+              onChange={(value) => {
+                props.form.setValue(
+                  "erc20Asset_poolMode.tokenAddress",
+                  value.address,
+                );
+              }}
+              selectedToken={{
+                address: props.form.watch("erc20Asset_poolMode.tokenAddress"),
+                chainId: Number(props.chainId),
+              }}
+              showCheck={true}
+            />
           </div>
         </FormFieldSetup>
       </div>

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

@@ -56,10 +56,10 @@ export function LaunchTokenStatus(props: {
   values: CreateAssetFormValues;
   onPrevious: () => void;
   client: ThirdwebClient;
-  onLaunchSuccess: (params: {
-    chainId: number;
-    contractAddress: string;
-  }) => void;
+  onLaunchSuccess: (
+    formValues: CreateAssetFormValues,
+    contractAddress: string,
+  ) => void;
   teamSlug: string;
   projectSlug: string;
   teamPlan: Team["billingPlan"];
@@ -251,10 +251,7 @@ export function LaunchTokenStatus(props: {
     });
 
     if (contractAddressRef.current) {
-      props.onLaunchSuccess({
-        chainId: Number(formValues.chain),
-        contractAddress: contractAddressRef.current,
-      });
+      props.onLaunchSuccess(formValues, contractAddressRef.current);
     }
   }
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/utils/calculate-tick.ts

@@ -1,10 +1,35 @@
+import type { Chain, ThirdwebClient } from "thirdweb";
+import { getContract, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+import { decimals } from "thirdweb/extensions/erc20";
+import { getAddress } from "thirdweb/utils";
+
 const MIN_TICK = -887200;
 const MAX_TICK = 887200;
 const TICK_SPACING = 200;
 
-export function getInitialTickValue(params: { startingPricePerToken: number }) {
-  const calculatedTick =
-    Math.log(params.startingPricePerToken) / Math.log(1.0001);
+export async function getInitialTickValue(params: {
+  startingPricePerToken: number;
+  tokenAddress: string;
+  chain: Chain;
+  client: ThirdwebClient;
+}) {
+  const isNativeToken =
+    getAddress(params.tokenAddress) === getAddress(NATIVE_TOKEN_ADDRESS);
+
+  const pairTokenDecimals = isNativeToken
+    ? 18
+    : await decimals({
+        contract: getContract({
+          address: params.tokenAddress,
+          chain: params.chain,
+          client: params.client,
+        }),
+      });
+
+  const decimalAdjustedPrice =
+    params.startingPricePerToken * 10 ** (pairTokenDecimals - 18);
+
+  const calculatedTick = Math.log(decimalAdjustedPrice) / Math.log(1.0001);
 
   // Round to nearest tick spacing
   const tick = Math.round(calculatedTick / TICK_SPACING) * TICK_SPACING;