From 51f7418d1ffa281ee3c40a1192e54e357143d69f Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Thu, 28 Aug 2025 21:26:54 +0000
Subject: [PATCH] [MNY-128] Dashboard: UI tweaks in token creation flow (#7939)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving the user interface and error handling in the token and NFT launch processes, as well as refining the layout and component interactions in the distribution section.

### Detailed summary
- Removed `isPending` state checks from token and NFT launch components.
- Updated button layouts to improve user experience in `launch-token.tsx` and `launch-nft.tsx`.
- Changed error message text in `token-distribution.tsx`.
- Added `errorMessage` prop to `StepCard` for better error display.
- Adjusted layout and styling for improved responsiveness and alignment.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- New Features
  - Step headers can now display error messages.
  - Distribution chart moved into the main form flow for clearer visibility.
  - Post-launch actions updated: show “View NFT Collection” or “View Coin” when available; show “Cancel” before completion.

- Refactor
  - Simplified bottom action areas and removed pending-based button disabling for a more predictable flow.

- Style
  - Improved spacing, alignment, and responsiveness in forms.
  - Updated error text to “Token allocation exceeds total supply” for clearer guidance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../tokens/create/_common/step-card.tsx       | 73 +++++++++++--------
 .../tokens/create/nft/launch/launch-nft.tsx   | 44 +++++------
 .../token/distribution/token-distribution.tsx | 23 +++---
 .../create/token/launch/launch-token.tsx      | 44 +++++------
 4 files changed, 89 insertions(+), 95 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx
index 316ee8b824f..97da9169891 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx
@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
 
 export function StepCard(props: {
   title: string;
+  errorMessage?: string;
   prevButton:
     | undefined
     | {
@@ -35,40 +36,50 @@ export function StepCard(props: {
       {props.children}
 
       {(props.prevButton || props.nextButton) && (
-        <div className="flex justify-end gap-3 border-t p-4 md:p-6">
-          {props.prevButton && (
-            <Button
-              className="gap-2"
-              onClick={() => {
-                props.prevButton?.onClick();
-              }}
-              variant="outline"
-            >
-              <ArrowLeftIcon className="size-4" />
-              Back
-            </Button>
+        <div className="flex justify-between items-center gap-3 border-t p-4 md:px-6 md:py-5">
+          {props.errorMessage ? (
+            <div className="text-destructive-text text-sm">
+              {props.errorMessage}
+            </div>
+          ) : (
+            <div />
           )}
 
-          {nextButton && nextButton.type !== "custom" && (
-            <Button
-              className="gap-2"
-              disabled={nextButton.disabled}
-              onClick={() => {
-                if (nextButton.type === "click") {
-                  nextButton.onClick();
-                }
-              }}
-              type="submit"
-              variant="default"
-            >
-              Next
-              <ArrowRightIcon className="size-4" />
-            </Button>
-          )}
+          <div className="flex gap-3">
+            {props.prevButton && (
+              <Button
+                className="gap-2"
+                onClick={() => {
+                  props.prevButton?.onClick();
+                }}
+                variant="outline"
+              >
+                <ArrowLeftIcon className="size-4" />
+                Back
+              </Button>
+            )}
+
+            {nextButton && nextButton.type !== "custom" && (
+              <Button
+                className="gap-2"
+                disabled={nextButton.disabled}
+                onClick={() => {
+                  if (nextButton.type === "click") {
+                    nextButton.onClick();
+                  }
+                }}
+                type="submit"
+                variant="default"
+              >
+                Next
+                <ArrowRightIcon className="size-4" />
+              </Button>
+            )}
 
-          {props.nextButton &&
-            props.nextButton.type === "custom" &&
-            props.nextButton.custom}
+            {props.nextButton &&
+              props.nextButton.type === "custom" &&
+              props.nextButton.custom}
+          </div>
         </div>
       )}
     </div>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx
index d9c044a3dd6..9200b9d2300 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/launch/launch-nft.tsx
@@ -303,7 +303,6 @@ export function LaunchNFT(props: {
   }
 
   const isComplete = steps.every((step) => step.status.type === "completed");
-  const isPending = steps.some((step) => step.status.type === "pending");
 
   const isPriceSame = props.values.nfts.every(
     (nft) => nft.price_amount === props.values.nfts[0]?.price_amount,
@@ -392,30 +391,25 @@ export function LaunchNFT(props: {
             />
           </div>
 
-          <div className="mt-2 flex justify-between gap-4 border-border border-t bg-card p-6">
-            {isComplete && contractLink ? (
-              <div>
-                <Button asChild className="gap-2">
-                  <Link href={contractLink}>
-                    View NFT <ArrowRightIcon className="size-4" />
-                  </Link>
-                </Button>
-              </div>
-            ) : (
-              <div />
-            )}
-
-            <Button
-              disabled={isPending}
-              onClick={() => {
-                setIsModalOpen(false);
-                // reset steps
-                setSteps([]);
-              }}
-              variant="outline"
-            >
-              {isComplete ? "Close" : "Cancel"}
-            </Button>
+          <div className="mt-2 flex justify-end gap-4 border-border border-t bg-card p-6">
+            {!isComplete ? (
+              <Button
+                onClick={() => {
+                  setIsModalOpen(false);
+                  // reset steps
+                  setSteps([]);
+                }}
+                variant="outline"
+              >
+                Cancel
+              </Button>
+            ) : contractLink ? (
+              <Button asChild className="gap-2">
+                <Link href={contractLink}>
+                  View NFT Collection <ArrowRightIcon className="size-4" />
+                </Link>
+              </Button>
+            ) : null}
           </div>
         </DialogContent>
       </Dialog>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx
index e184db1c4ba..d3efec55651 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-distribution.tsx
@@ -50,6 +50,7 @@ export function TokenDistributionFieldset(props: {
             onClick: props.onPrevious,
           }}
           title="Coin Distribution"
+          errorMessage={distributionError}
         >
           <div>
             <div className="p-4 md:px-6 md:py-6">
@@ -60,13 +61,19 @@ export function TokenDistributionFieldset(props: {
                 isRequired
                 label="Total Supply"
               >
-                <div className="relative max-w-96">
+                <div className="relative lg:max-w-xs">
                   <Input id={supplyId} {...form.register("supply")} />
                   <span className="-translate-y-1/2 absolute top-1/2 right-3 text-muted-foreground text-sm">
                     {props.tokenSymbol || "Tokens"}
                   </span>
                 </div>
               </FormFieldSetup>
+
+              <div className="h-6" />
+
+              <TokenDistributionBarChart
+                distributionFormValues={form.watch()}
+              />
             </div>
 
             {form.watch("saleMode") === "drop-erc20:token-drop" ? (
@@ -85,18 +92,6 @@ export function TokenDistributionFieldset(props: {
             )}
 
             <TokenAirdropSection client={props.client} form={form} />
-
-            <div className="flex flex-col gap-3 p-4 py-8 md:px-6 border-t border-dashed">
-              <TokenDistributionBarChart
-                distributionFormValues={form.watch()}
-              />
-
-              {distributionError && (
-                <div className="text-destructive-text text-sm">
-                  {distributionError}
-                </div>
-              )}
-            </div>
           </div>
         </StepCard>
       </form>
@@ -125,7 +120,7 @@ function getDistributionError(form: TokenDistributionForm) {
   const totalSumOfSupply = totalAirdrop + saleSupply + ownerSupply;
 
   if (totalSumOfSupply > supply) {
-    return "Token distribution exceeds total supply";
+    return "Token allocation exceeds total supply";
   }
 
   return undefined;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx
index b70ce5fdd92..84e35db2587 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/launch/launch-token.tsx
@@ -166,7 +166,6 @@ export function LaunchTokenStatus(props: {
   }
 
   const isComplete = steps.every((step) => step.status.type === "completed");
-  const isPending = steps.some((step) => step.status.type === "pending");
 
   async function executeStep(stepId: StepId, gasless: boolean) {
     const params = {
@@ -435,30 +434,25 @@ export function LaunchTokenStatus(props: {
             />
           </div>
 
-          <div className="mt-2 flex justify-between gap-4 border-border border-t bg-card p-6">
-            {isComplete && contractLink ? (
-              <div>
-                <Button asChild className="gap-2">
-                  <Link href={contractLink}>
-                    View Coin <ArrowRightIcon className="size-4" />
-                  </Link>
-                </Button>
-              </div>
-            ) : (
-              <div />
-            )}
-
-            <Button
-              disabled={isPending}
-              onClick={() => {
-                setIsModalOpen(false);
-                // reset steps
-                setSteps([]);
-              }}
-              variant="outline"
-            >
-              {isComplete ? "Close" : "Cancel"}
-            </Button>
+          <div className="mt-2 flex justify-end gap-4 border-border border-t bg-card p-6">
+            {!isComplete ? (
+              <Button
+                onClick={() => {
+                  setIsModalOpen(false);
+                  // reset steps
+                  setSteps([]);
+                }}
+                variant="outline"
+              >
+                Cancel
+              </Button>
+            ) : contractLink ? (
+              <Button asChild className="gap-2">
+                <Link href={contractLink}>
+                  View Coin <ArrowRightIcon className="size-4" />
+                </Link>
+              </Button>
+            ) : null}
           </div>
         </DialogContent>
       </Dialog>