[TOOL-4667] Dashboard: Various improvements in ERC20 asset creation flow

apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.stories.tsx

@@ -22,41 +22,36 @@ export const AllStates: Story = {
   args: {
     steps: [
       {
-        status: "completed",
+        status: { type: "completed" },
         label: "Connect Wallet",
-        retryLabel: "Failed to connect wallet",
         execute: async () => {
           await sleep(1000);
         },
       },
       {
-        status: "pending",
+        status: { type: "pending" },
         label: "Sign Message",
-        retryLabel: "Failed to sign message",
         execute: async () => {
           await sleep(1000);
         },
       },
       {
-        status: "error",
+        status: { type: "error", message: "This is an error message" },
         label: "Approve Transaction",
-        retryLabel: "Transaction approval failed",
         execute: async () => {
           await sleep(1000);
         },
       },
       {
-        status: "idle",
+        status: { type: "idle" },
         label: "Confirm Transaction",
-        retryLabel: "Transaction confirmation failed",
         execute: async () => {
           await sleep(1000);
         },
       },
       {
-        status: "idle",
+        status: { type: "idle" },
         label: "Finalize",
-        retryLabel: "Finalization failed",
         execute: async () => {
           await sleep(1000);
         },

apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx

@@ -11,8 +11,14 @@ import { DynamicHeight } from "../../ui/DynamicHeight";
 import { Spinner } from "../../ui/Spinner/Spinner";
 
 export type MultiStepState = {
-  status: "idle" | "pending" | "completed" | "error";
-  retryLabel: string;
+  status:
+    | {
+        type: "idle" | "pending" | "completed";
+      }
+    | {
+        type: "error";
+        message: string | React.ReactNode;
+      };
   label: string;
   execute: () => Promise<void>;
 };
@@ -25,33 +31,35 @@ export function MultiStepStatus(props: {
       <div className="space-y-4">
         {props.steps.map((step) => (
           <div key={step.label} className="flex items-start space-x-3 ">
-            {step.status === "completed" ? (
+            {step.status.type === "completed" ? (
               <CircleCheckIcon className="mt-0.5 size-5 flex-shrink-0 text-green-500" />
-            ) : step.status === "pending" ? (
+            ) : step.status.type === "pending" ? (
               <Spinner className="mt-0.5 size-5 flex-shrink-0 text-foreground" />
-            ) : step.status === "error" ? (
+            ) : step.status.type === "error" ? (
               <AlertCircleIcon className="mt-0.5 size-5 flex-shrink-0 text-red-500" />
             ) : (
               <CircleIcon className="mt-0.5 size-5 flex-shrink-0 text-muted-foreground/70" />
             )}
             <div className="flex-1">
               <p
                 className={`font-medium ${
-                  step.status === "pending"
+                  step.status.type === "pending"
                     ? "text-foreground"
-                    : step.status === "completed"
+                    : step.status.type === "completed"
                       ? "text-green-500"
-                      : step.status === "error"
+                      : step.status.type === "error"
                         ? "text-red-500"
                         : "text-muted-foreground/70"
                 }`}
               >
                 {step.label}
               </p>
 
-              {step.status === "error" && (
+              {step.status.type === "error" && (
                 <div className="mt-1 space-y-2">
-                  <p className="mb-1 text-red-500 text-sm">{step.retryLabel}</p>
+                  <p className="mb-1 text-red-500 text-sm">
+                    {step.status.message}
+                  </p>
                   <Button
                     variant="destructive"
                     size="sm"

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/cards.tsx

@@ -32,8 +32,8 @@ export function Cards(props: {
       />
 
       <CardLink
-        title="Create Token"
-        description="Launch your own ERC-20 token"
+        title="Create Coin"
+        description="Launch your own ERC-20 coin"
         href={`/team/${props.teamSlug}/${props.projectSlug}/assets/create`}
         icon={CoinsIcon}
         trackingLabel="create-token"
@@ -76,12 +76,14 @@ function CardLink(props: {
   const trackEvent = useTrack();
 
   function handleClick() {
-    trackEvent({
-      category: "assets-landing-page",
-      action: "click",
-      label: props.trackingLabel,
-    });
-    onClick?.();
+    if (onClick) {
+      trackEvent({
+        category: "assets-landing-page",
+        action: "click",
+        label: props.trackingLabel,
+      });
+      onClick();
+    }
   }
 
   return (

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

@@ -336,7 +336,7 @@ export function CreateTokenAssetPage(props: {
         metadata: {
           name:
             formValues.saleEnabled && salePercent > 0
-              ? "Token Sale phase"
+              ? "Coin Sale phase"
               : "Only Owner phase",
         },
         overrideList: [

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

@@ -101,6 +101,7 @@ export function CreateTokenAssetPageUI(props: {
 
       {step === "distribution" && (
         <TokenDistributionFieldset
+          tokenSymbol={tokenInfoForm.watch("symbol")}
           client={props.client}
           form={tokenDistributionForm}
           accountAddress={props.accountAddress}

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

@@ -23,14 +23,15 @@ export function TokenDistributionFieldset(props: {
   form: TokenDistributionForm;
   chainId: string;
   client: ThirdwebClient;
+  tokenSymbol: string | undefined;
 }) {
   const { form } = props;
 
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(props.onNext)}>
         <StepCard
-          title="Token Distribution"
+          title="Coin Distribution"
           page="distribution"
           prevButton={{
             onClick: props.onPrevious,
@@ -50,7 +51,7 @@ export function TokenDistributionFieldset(props: {
                 <div className="relative">
                   <Input id="supply" {...form.register("supply")} />
                   <span className="-translate-y-1/2 absolute top-1/2 right-3 text-muted-foreground text-sm">
-                    Tokens
+                    {props.tokenSymbol || "Tokens"}
                   </span>
                 </div>
               </FormFieldSetup>
@@ -107,9 +108,6 @@ export function TokenDistributionBarChart(props: {
   ];
 
   return (
-    <DistributionBarChart
-      segments={tokenAllocations}
-      title="Token Allocation"
-    />
+    <DistributionBarChart segments={tokenAllocations} title="Coin Allocation" />
   );
 }

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

@@ -26,7 +26,7 @@ export function TokenSaleSection(props: {
           <div>
             <h2 className="font-semibold text-lg">Sale</h2>
             <p className="text-muted-foreground text-sm">
-              Make your token available for purchase by setting a price
+              Make your coin available for purchase by setting a price
             </p>
           </div>
 

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

@@ -16,11 +16,16 @@ import { TransactionButton } from "components/buttons/TransactionButton";
 import { ChainIconClient } from "components/icons/ChainIcon";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
-import { ArrowRightIcon, ImageOffIcon, RocketIcon } from "lucide-react";
+import {
+  ArrowRightIcon,
+  ArrowUpFromLineIcon,
+  ImageOffIcon,
+} from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { useActiveWallet } from "thirdweb/react";
+import { parseError } from "../../../../../../../../../utils/errorParser";
 import { StepCard } from "../create-token-card";
 import type { CreateTokenFunctions } from "../create-token-page.client";
 import { TokenDistributionBarChart } from "../distribution/token-distribution";
@@ -85,10 +90,10 @@ export function LaunchTokenStatus(props: {
       executeFn: (values: CreateAssetFormValues) => Promise<void>,
     ) {
       return async () => {
-        updateStatus(index, "pending");
+        updateStatus(index, { type: "pending" });
         try {
           await executeFn(formValues);
-          updateStatus(index, "completed");
+          updateStatus(index, { type: "completed" });
           // start next one
           const nextStep = initialSteps[index + 1];
           if (nextStep) {
@@ -101,7 +106,7 @@ export function LaunchTokenStatus(props: {
             props.onLaunchSuccess();
           }
         } catch (error) {
-          updateStatus(index, "error");
+          updateStatus(index, { type: "error", message: parseError(error) });
           launchTracking({
             type: "error",
             errorMessage:
@@ -115,8 +120,7 @@ export function LaunchTokenStatus(props: {
     const initialSteps: MultiStepState[] = [
       {
         label: "Deploy contract",
-        status: "idle",
-        retryLabel: "Failed to deploy contract",
+        status: { type: "idle" },
         execute: createSequenceExecutorFn(0, async (values) => {
           const result = await createTokenFunctions.deployContract(values);
           setContractLink(
@@ -126,26 +130,23 @@ export function LaunchTokenStatus(props: {
       },
       {
         label: "Set claim conditions",
-        status: "idle",
-        retryLabel: "Failed to set claim conditions",
+        status: { type: "idle" },
         execute: createSequenceExecutorFn(
           1,
           createTokenFunctions.setClaimConditions,
         ),
       },
       {
         label: "Mint tokens",
-        status: "idle",
-        retryLabel: "Failed to mint tokens",
+        status: { type: "idle" },
         execute: createSequenceExecutorFn(2, createTokenFunctions.mintTokens),
       },
     ];
 
     if (formValues.airdropEnabled && formValues.airdropAddresses.length > 0) {
       initialSteps.push({
         label: "Airdrop tokens",
-        status: "idle",
-        retryLabel: "Failed to airdrop tokens",
+        status: { type: "idle" },
         execute: createSequenceExecutorFn(
           3,
           createTokenFunctions.airdropTokens,
@@ -160,13 +161,13 @@ export function LaunchTokenStatus(props: {
     initialSteps[0]?.execute();
   }
 
-  const isComplete = steps.every((step) => step.status === "completed");
-  const isPending = steps.some((step) => step.status === "pending");
+  const isComplete = steps.every((step) => step.status.type === "completed");
+  const isPending = steps.some((step) => step.status.type === "pending");
 
   return (
     <StepCard
       page="launch"
-      title="Launch Token"
+      title="Launch Coin"
       prevButton={{
         onClick: props.onPrevious,
       }}
@@ -182,8 +183,8 @@ export function LaunchTokenStatus(props: {
             transactionCount={undefined}
             onClick={handleSubmitClick}
           >
-            <RocketIcon className="size-4" />
-            Launch Token
+            <ArrowUpFromLineIcon className="size-4" />
+            Launch Coin
           </TransactionButton>
         ),
       }}
@@ -256,7 +257,7 @@ export function LaunchTokenStatus(props: {
               <div>
                 <Button asChild className="gap-2">
                   <Link href={contractLink}>
-                    View Launched Token <ArrowRightIcon className="size-4" />
+                    View Coin <ArrowRightIcon className="size-4" />
                   </Link>
                 </Button>
               </div>

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

@@ -89,7 +89,7 @@ function PageHeader(props: {
             </BreadcrumbItem>
             <BreadcrumbSeparator />
             <BreadcrumbItem>
-              <BreadcrumbPage>Create Token</BreadcrumbPage>
+              <BreadcrumbPage>Create Coin</BreadcrumbPage>
             </BreadcrumbItem>
           </BreadcrumbList>
         </Breadcrumb>
@@ -98,10 +98,10 @@ function PageHeader(props: {
       <div className="container flex max-w-5xl flex-col gap-3 py-8 lg:flex-row lg:items-center lg:justify-between">
         <div>
           <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
-            Create Token
+            Create Coin
           </h1>
           <p className="text-muted-foreground">
-            Launch an ERC-20 token for your project
+            Launch an ERC-20 coin for your project
           </p>
         </div>
       </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token-info-fieldset.tsx

@@ -32,7 +32,7 @@ export function TokenInfoFieldset(props: {
       <form onSubmit={form.handleSubmit(props.onNext)}>
         <StepCard
           page="info"
-          title="Token Information"
+          title="Coin Information"
           prevButton={undefined}
           nextButton={{
             type: "submit",
@@ -70,7 +70,7 @@ export function TokenInfoFieldset(props: {
                 >
                   <Input
                     id="name"
-                    placeholder="My Token"
+                    placeholder="My Coin"
                     {...form.register("name")}
                   />
                 </FormFieldSetup>
@@ -120,7 +120,7 @@ export function TokenInfoFieldset(props: {
               >
                 <Textarea
                   id="description"
-                  placeholder="Describe your token"
+                  placeholder="Describe your coin"
                   className="grow"
                   {...form.register("description")}
                 />