[TOOL-4531] Dashboard: Add Token Asset creation wizard

Author: MananTank

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

@@ -0,0 +1,72 @@
+import { cn } from "@/lib/utils";
+
+export type Segment = {
+  label: string;
+  percent: number;
+  color: string;
+};
+
+type DistributionBarChatProps = {
+  segments: Segment[];
+  title: string;
+};
+
+export function DistributionBarChart(props: DistributionBarChatProps) {
+  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,75 @@
+"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 [&_*]:transition-colors [&_*]:duration-300"
+          >
+            {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 animate-spin 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]/_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)/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)));