[TOOL-4531] Dashboard: Add Token Asset creation wizard (#7081)

<!--

## 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 introduces several enhancements and features related to asset management, including deployment tracking, UI updates, and new forms for creating and managing tokens. It also refines existing components and adds new functionalities for improved user experience.

### Detailed summary
- Added `deploymentType` and `contractType` properties in various components.
- Introduced `revalidatePathAction` for path revalidation.
- Updated UI components for better asset management.
- Enhanced forms for token creation with validation.
- Implemented multi-step status tracking for token launch processes.
- Improved error handling and user feedback in forms.
- Added new charts for token distribution visualization.

> The following files were skipped due to too many changes: `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/launch/launch-token.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/distribution/token-airdrop.tsx`

> ✨ 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**
  - Introduced a comprehensive asset management interface for creating, importing, and managing ERC-20 tokens within team and project dashboards.
  - Added a multi-step token creation flow with form validation, including token info, distribution, sale settings, airdrop CSV upload, and launch process with real-time status tracking.
  - Implemented visual token allocation charts and multi-step progress indicators for enhanced user experience.
  - Added a dedicated "Assets" section in the sidebar with a "New" badge.
  - Added a horizontal segmented distribution bar chart component for visualizing token allocations.
  - Introduced a multi-step status component to track asynchronous step executions with retry capabilities.
  - Added token airdrop CSV upload and validation feature with user-friendly UI and error handling.
  - Added token sale configuration section with price and allocation inputs.
  - Enhanced import modal to support both contract and asset imports with contextual UI and behavior.
  - Added new pages and components to support token asset creation and management workflows, including cards for asset actions.
  - Added server-side path revalidation support for pages and layouts.

- **Improvements**
  - Enhanced contract and asset import workflows with clearer UI, context-aware dialogs, and improved contract table variant handling.
  - Updated number input fields to remove browser-native spinners for a cleaner appearance.
  - Improved analytics event tracking for user interactions and deployment steps.
  - Refined UI components for consistent styling and accessibility.
  - Fixed sidebar badge placement and updated UI text for clarity.
  - Updated dialogs and payment embeds to reference transaction chain instead of active wallet chain and set default payment amounts.
  - Changed token supply label to "Circulating Supply" for clarity.
  - Replaced Chakra UI spinner and styled elements with local components for simplified UI.

- **Bug Fixes**
  - Corrected UI typos and improved analytics event tracking for deployment errors.

- **Documentation**
  - Added Storybook stories for new components to facilitate UI testing and documentation.

- **Chores**
  - Refactored and extended types and props to support new asset and contract features, ensuring future extensibility.
  - Added tracking utilities for token deployment and asset creation analytics.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/@/actions/revalidate.ts

@@ -0,0 +1,10 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+
+export async function revalidatePathAction(
+  path: string,
+  type: "page" | "layout",
+) {
+  revalidatePath(path, type);
+}

apps/dashboard/src/@/components/blocks/distribution-chart.tsx

@@ -0,0 +1,71 @@
+import { cn } from "@/lib/utils";
+
+export type Segment = {
+  label: string;
+  percent: number;
+  color: string;
+};
+
+type DistributionBarChartProps = {
+  segments: Segment[];
+  title: string;
+};
+export function DistributionBarChart(props: DistributionBarChartProps) {
+  const totalPercentage = props.segments.reduce(
+    (sum, segment) => sum + segment.percent,
+    0,
+  );
+
+  const invalidTotalPercentage = totalPercentage !== 100;
+
+  return (
+    <div>
+      <div className="mb-2 flex items-center justify-between">
+        <h3 className="font-medium text-sm">{props.title}</h3>
+        <div
+          className={cn(
+            "font-medium text-muted-foreground text-sm",
+            invalidTotalPercentage && "text-red-500",
+          )}
+        >
+          Total: {totalPercentage}%
+        </div>
+      </div>
+
+      {/* Bar */}
+      <div className="flex h-3 overflow-hidden rounded-lg">
+        {props.segments.map((segment) => {
+          return (
+            <div
+              key={segment.label}
+              className="flex h-full items-center justify-center transition-all duration-200"
+              style={{
+                width: `${segment.percent}%`,
+                backgroundColor: segment.color,
+              }}
+            />
+          );
+        })}
+      </div>
+
+      {/* Legends */}
+      <div className="mt-3 flex flex-col gap-1 lg:flex-row lg:gap-6">
+        {props.segments.map((segment) => {
+          return (
+            <div key={segment.label} className="flex items-center gap-1.5">
+              <div
+                className="size-3 rounded-full"
+                style={{
+                  backgroundColor: segment.color,
+                }}
+              />
+              <p className="text-sm">
+                {segment.label}: {segment.percent}%
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MultiStepStatus } from "./multi-step-status";
+
+const meta = {
+  title: "Blocks/MultiStepStatus",
+  component: MultiStepStatus,
+  decorators: [
+    (Story) => (
+      <div className="container w-full max-w-md py-10">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof MultiStepStatus>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const AllStates: Story = {
+  args: {
+    steps: [
+      {
+        status: "completed",
+        label: "Connect Wallet",
+        retryLabel: "Failed to connect wallet",
+        execute: async () => {
+          await sleep(1000);
+        },
+      },
+      {
+        status: "pending",
+        label: "Sign Message",
+        retryLabel: "Failed to sign message",
+        execute: async () => {
+          await sleep(1000);
+        },
+      },
+      {
+        status: "error",
+        label: "Approve Transaction",
+        retryLabel: "Transaction approval failed",
+        execute: async () => {
+          await sleep(1000);
+        },
+      },
+      {
+        status: "idle",
+        label: "Confirm Transaction",
+        retryLabel: "Transaction confirmation failed",
+        execute: async () => {
+          await sleep(1000);
+        },
+      },
+      {
+        status: "idle",
+        label: "Finalize",
+        retryLabel: "Finalization failed",
+        execute: async () => {
+          await sleep(1000);
+        },
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,72 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  AlertCircleIcon,
+  CircleCheckIcon,
+  CircleIcon,
+  RefreshCwIcon,
+} from "lucide-react";
+import { DynamicHeight } from "../../ui/DynamicHeight";
+import { Spinner } from "../../ui/Spinner/Spinner";
+
+export type MultiStepState = {
+  status: "idle" | "pending" | "completed" | "error";
+  retryLabel: string;
+  label: string;
+  execute: () => Promise<void>;
+};
+
+export function MultiStepStatus(props: {
+  steps: MultiStepState[];
+}) {
+  return (
+    <DynamicHeight>
+      <div className="space-y-4">
+        {props.steps.map((step) => (
+          <div key={step.label} className="flex items-start space-x-3 ">
+            {step.status === "completed" ? (
+              <CircleCheckIcon className="mt-0.5 size-5 flex-shrink-0 text-green-500" />
+            ) : step.status === "pending" ? (
+              <Spinner className="mt-0.5 size-5 flex-shrink-0 text-foreground" />
+            ) : step.status === "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"
+                    ? "text-foreground"
+                    : step.status === "completed"
+                      ? "text-green-500"
+                      : step.status === "error"
+                        ? "text-red-500"
+                        : "text-muted-foreground/70"
+                }`}
+              >
+                {step.label}
+              </p>
+
+              {step.status === "error" && (
+                <div className="mt-1 space-y-2">
+                  <p className="mb-1 text-red-500 text-sm">{step.retryLabel}</p>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    className="gap-2"
+                    onClick={() => step.execute()}
+                  >
+                    <RefreshCwIcon className="size-4" />
+                    Retry
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </DynamicHeight>
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx

@@ -126,8 +126,10 @@ const getClaimConditionTypeFromPhase = (
   if (!phase.snapshot) {
     return "public";
   }
+
   if (phase.snapshot) {
     if (
+      phase.price === "0" &&
       typeof phase.snapshot !== "string" &&
       phase.snapshot.length === 1 &&
       phase.snapshot.some(

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx

@@ -147,6 +147,8 @@ function AddToProjectModalContent(props: {
         teamId: params.teamId,
         projectId: params.projectId,
         chainId: props.chainId,
+        deploymentType: undefined,
+        contractType: undefined,
       },
       {
         onSuccess: () => {

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/supply-layout.tsx

@@ -14,7 +14,7 @@ export function TokenDetailsCardUI(props: {
       </h2>
       <div className="flex flex-col gap-5 p-6 lg:flex-row">
         <Stat
-          label="Total Supply"
+          label="Circulating Supply"
           isPending={!tokenSupply}
           value={
             tokenSupply

apps/dashboard/src/app/(app)/account/contracts/DeployedContractsPageHeader.tsx

@@ -26,6 +26,7 @@ export function DeployedContractsPageHeader(props: {
         }}
         teamId={props.teamId}
         projectId={props.projectId}
+        type="contract"
       />
 
       <div className="container flex max-w-7xl flex-col gap-3 py-10 lg:flex-row lg:items-center lg:justify-between">

apps/dashboard/src/app/(app)/account/contracts/_components/DeployViaCLIOrImportCard.tsx

@@ -19,6 +19,7 @@ export function DeployViaCLIOrImportCard(props: {
   return (
     <div className="rounded-lg border bg-card p-4 lg:p-6">
       <ImportModal
+        type="contract"
         client={client}
         isOpen={importModalOpen}
         onClose={() => {

apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx

@@ -44,11 +44,13 @@ async function DeployedContractsPageAsync(props: {
     teamId: props.teamId,
     projectId: props.projectId,
     authToken: props.authToken,
+    deploymentType: undefined,
   });
 
   return (
     <ClientOnly ssr={<Loading />}>
       <ContractTable
+        variant="contract"
         contracts={deployedContracts}
         pageSize={10}
         teamId={props.teamId}

apps/dashboard/src/app/(app)/account/contracts/_components/getProjectContracts.ts

@@ -7,21 +7,28 @@ export type ProjectContract = {
   chainId: string;
   createdAt: string;
   updatedAt: string;
+  deploymentType: string | null;
+  contractType: string | null;
 };
 
 export async function getProjectContracts(options: {
   teamId: string;
   projectId: string;
   authToken: string;
+  deploymentType: string | undefined;
 }) {
-  const res = await fetch(
+  const url = new URL(
     `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${options.teamId}/projects/${options.projectId}/contracts`,
-    {
-      headers: {
-        Authorization: `Bearer ${options.authToken}`,
-      },
-    },
   );
+  if (options.deploymentType) {
+    url.searchParams.set("deploymentType", options.deploymentType);
+  }
+
+  const res = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${options.authToken}`,
+    },
+  });
 
   if (!res.ok) {
     const errorMessage = await res.text();

apps/dashboard/src/app/(app)/account/contracts/_components/getSortedDeployedContracts.tsx

@@ -9,11 +9,13 @@ export async function getSortedDeployedContracts(params: {
   teamId: string;
   projectId: string;
   authToken: string;
+  deploymentType: string | undefined;
 }) {
   const contracts = await getProjectContracts({
     teamId: params.teamId,
     projectId: params.projectId,
     authToken: params.authToken,
+    deploymentType: params.deploymentType,
   });
 
   const chainIds = Array.from(new Set(contracts.map((c) => c.chainId)));