Dashboard: Add NFT creation wizard in Asset page (#7315)

<!--

## 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 handling of file inputs and media uploads within the application. It introduces new functionalities for managing blob URLs, refines error handling, and enhances the user interface for uploading assets.

### Detailed summary
- Added `fileToBlobUrl` function to convert files to blob URLs.
- Enhanced `FileInput` components to accept a `client` prop for better integration.
- Updated error handling in several components to provide more detailed feedback.
- Refined layouts and styles for asset creation pages.
- Introduced new schemas for validating NFT and social URL data.
- Improved tracking functionality for NFT creation steps.
- Added support for handling multiple file types in uploads.
- Enhanced the user interface for attributes and social URLs input fields.

> The following files were skipped due to too many changes: `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/upload-nfts.tsx`, `apps/dashboard/src/core-ui/batch-upload/batch-table.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/page.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/sales/sales-settings.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/collection-info/nft-collection-info-fieldset.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token-info-fieldset.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-upload.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/nft/NFTMediaFormGroup.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page-ui.tsx`, `apps/dashboard/src/components/shared/FileInput.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-airdrop.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/batch-upload/process-files.ts`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/single-upload/single-upload-nft.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/batch-upload/batch-upload-instructions.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/batch-upload/batch-upload-nfts.tsx`, `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch/launch-nft.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**
  - Added logic to always display the selected token in token selectors.
  - Introduced a styled drag-and-drop file upload area with error handling and reset options.
  - Added reusable components: file preview for files and URLs, step cards with navigation and tracking, social URLs fieldset, downloadable file button, batch upload instructions, and NFT attribute management.
  - Launched a multi-step NFT creation workflow covering collection info, asset upload (single and batch), sales settings, and launch steps.
  - Added schema validation for NFT metadata including pricing, social URLs, and blockchain addresses.
  - Enabled batch uploading and inline editing of NFTs with price, currency, and supply management.
  - Added advanced sales and royalty settings with real-time validation and analytics tracking.

- **Enhancements**
  - Improved error reporting in toast notifications with detailed parsed messages.
  - Centralized and streamlined media file handling by removing redundant hooks and consolidating upload logic.
  - Enhanced navigation and event tracking across multi-step asset creation flows.
  - Updated UI components to accept client context for consistent file handling.
  - Refined form validation by reusing common schemas.

- **Bug Fixes**
  - Corrected NFT supply column label to "Circulating Supply".
  - Improved loading placeholder text in token selectors.

- **Refactor**
  - Consolidated CSV upload logic and replaced custom drag-and-drop UIs with a unified DropZone component.
  - Replaced multiple media preview components with a single FilePreview component.
  - Updated prop types and component interfaces for better consistency and maintainability.
  - Removed deprecated hooks and unused imports to reduce technical debt.
  - Reorganized and standardized import paths across modules.
  - Simplified step execution logic in launch flows and enhanced retry capabilities.

- **Documentation**
  - Added Storybook stories for DropZone, multi-step status, and NFT upload components to support visual testing and documentation.

- **Chores**
  - Exported utility functions and constants for broader use.
  - Improved styling flexibility by enhancing component className handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

.changeset/better-owls-flash.md

@@ -0,0 +1,6 @@
+---
+"thirdweb": patch
+---
+
+- Add support for blob urls in `MediaRenderer` component
+- Fix `className` prop not set in loading state of `MediaRenderer` component

apps/dashboard/src/@/components/blocks/Img.tsx

@@ -11,6 +11,7 @@ type imgElementProps = React.DetailedHTMLProps<
   skeleton?: React.ReactNode;
   fallback?: React.ReactNode;
   src: string | undefined;
+  containerClassName?: string;
 };
 
 export function Img(props: imgElementProps) {
@@ -23,7 +24,8 @@ export function Img(props: imgElementProps) {
       : props.src === ""
         ? "fallback"
         : _status;
-  const { className, fallback, skeleton, ...restProps } = props;
+  const { className, fallback, skeleton, containerClassName, ...restProps } =
+    props;
   const defaultSkeleton = <div className="animate-pulse bg-accent" />;
   const defaultFallback = <div className="bg-accent" />;
   const imgRef = useRef<HTMLImageElement>(null);
@@ -47,7 +49,7 @@ export function Img(props: imgElementProps) {
   }, []);
 
   return (
-    <div className="relative shrink-0">
+    <div className={cn("relative shrink-0", containerClassName)}>
       <img
         {...restProps}
         // avoid setting empty src string to prevent request to the entire page

apps/dashboard/src/@/components/blocks/TokenSelector.tsx

@@ -159,6 +159,17 @@ export function TokenSelector(props: {
     ? `${props.selectedToken.chainId}:${props.selectedToken.address}`
     : undefined;
 
+  // if selected value is not in options, add it
+  if (
+    selectedValue &&
+    !options.find((option) => option.value === selectedValue)
+  ) {
+    options.push({
+      label: props.selectedToken?.address || "Unknown",
+      value: selectedValue,
+    });
+  }
+
   return (
     <SelectWithSearch
       searchPlaceholder="Search by name or symbol"
@@ -175,7 +186,7 @@ export function TokenSelector(props: {
       showCheck={props.showCheck}
       placeholder={
         tokensQuery.isPending
-          ? "Loading Tokens..."
+          ? "Loading Tokens"
           : props.placeholder || "Select Token"
       }
       overrideSearchFn={searchFn}

apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DropZone } from "./drop-zone";
+
+const meta = {
+  title: "blocks/DropZone",
+  component: DropZone,
+  decorators: [
+    (Story) => (
+      <div className="container max-w-6xl py-10">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DropZone>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isError: false,
+    onDrop: () => {},
+    title: "This is a title",
+    description: "This is a description for drop zone",
+    accept: undefined,
+    resetButton: undefined,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    isError: true,
+    onDrop: () => {},
+    title: "this is title",
+    description: "This is a description",
+    accept: undefined,
+    resetButton: undefined,
+  },
+};
+
+export const ErrorStateWithResetButton: Story = {
+  args: {
+    isError: true,
+    onDrop: () => {},
+    title: "this is title",
+    description: "This is a description",
+    accept: undefined,
+    resetButton: {
+      label: "Remove Files",
+      onClick: () => {},
+    },
+  },
+};

apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.tsx

@@ -0,0 +1,81 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { UploadIcon, XIcon } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+
+export function DropZone(props: {
+  isError: boolean;
+  onDrop: (acceptedFiles: File[]) => void;
+  title: string;
+  description: string;
+  resetButton:
+    | {
+        label: string;
+        onClick: () => void;
+      }
+    | undefined;
+  className?: string;
+  accept: string | undefined;
+}) {
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: props.onDrop,
+  });
+
+  const { resetButton } = props;
+
+  return (
+    <div
+      className={cn(
+        "flex cursor-pointer items-center justify-center rounded-md border border-dashed bg-card py-10 hover:border-active-border",
+        props.isError &&
+          "border-red-500 bg-red-200/30 text-red-500 hover:border-red-600 dark:border-red-900 dark:bg-red-900/30 dark:hover:border-red-800",
+        props.className,
+      )}
+      {...getRootProps()}
+    >
+      <input {...getInputProps()} accept={props.accept} />
+      <div className="flex flex-col items-center justify-center gap-3">
+        {!props.isError && (
+          <div className="flex flex-col items-center">
+            <div className="mb-3 flex size-11 items-center justify-center rounded-full border bg-card">
+              <UploadIcon className="size-5" />
+            </div>
+            <h2 className="mb-0.5 text-center font-medium text-lg">
+              {props.title}
+            </h2>
+            <p className="text-center font-medium text-muted-foreground text-sm">
+              {props.description}
+            </p>
+          </div>
+        )}
+
+        {props.isError && (
+          <div className="flex flex-col items-center">
+            <div className="mb-3 flex size-11 items-center justify-center rounded-full border border-red-500 bg-red-200/50 text-red-500 dark:border-red-900 dark:bg-red-900/30 dark:text-foreground">
+              <XIcon className="size-5" />
+            </div>
+            <h2 className="mb-0.5 text-center font-medium text-foreground text-lg">
+              {props.title}
+            </h2>
+            <p className="text-balance text-center text-sm">
+              {props.description}
+            </p>
+
+            {resetButton && (
+              <Button
+                className="relative z-50 mt-4"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  resetButton.onClick();
+                }}
+              >
+                {resetButton.label}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -16,45 +16,34 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
 export const AllStates: Story = {
   args: {
+    onRetry: () => {},
     steps: [
       {
         status: { type: "completed" },
         label: "Connect Wallet",
-        execute: async () => {
-          await sleep(1000);
-        },
+        id: "connect-wallet",
       },
       {
         status: { type: "pending" },
         label: "Sign Message",
-        execute: async () => {
-          await sleep(1000);
-        },
+        id: "sign-message",
       },
       {
         status: { type: "error", message: "This is an error message" },
         label: "Approve Transaction",
-        execute: async () => {
-          await sleep(1000);
-        },
+        id: "approve-transaction",
       },
       {
         status: { type: "idle" },
         label: "Confirm Transaction",
-        execute: async () => {
-          await sleep(1000);
-        },
+        id: "confirm-transaction",
       },
       {
         status: { type: "idle" },
         label: "Finalize",
-        execute: async () => {
-          await sleep(1000);
-        },
+        id: "finalize",
       },
     ],
   },

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

@@ -10,21 +10,23 @@ import {
 import { DynamicHeight } from "../../ui/DynamicHeight";
 import { Spinner } from "../../ui/Spinner/Spinner";
 
-export type MultiStepState = {
+export type MultiStepState<T extends string> = {
+  id: T;
   status:
     | {
         type: "idle" | "pending" | "completed";
       }
     | {
         type: "error";
-        message: string | React.ReactNode;
+        message: React.ReactNode;
       };
   label: string;
-  execute: () => Promise<void>;
+  description?: string;
 };
 
-export function MultiStepStatus(props: {
-  steps: MultiStepState[];
+export function MultiStepStatus<T extends string>(props: {
+  steps: MultiStepState<T>[];
+  onRetry: (step: MultiStepState<T>) => void;
 }) {
   return (
     <DynamicHeight>
@@ -55,6 +57,15 @@ export function MultiStepStatus(props: {
                 {step.label}
               </p>
 
+              {/* show description when this step is active */}
+              {(step.status.type === "pending" ||
+                step.status.type === "error") &&
+                step.description && (
+                  <p className="text-muted-foreground text-sm">
+                    {step.description}
+                  </p>
+                )}
+
               {step.status.type === "error" && (
                 <div className="mt-1 space-y-2">
                   <p className="mb-1 text-red-500 text-sm">
@@ -64,7 +75,7 @@ export function MultiStepStatus(props: {
                     variant="destructive"
                     size="sm"
                     className="gap-2"
-                    onClick={() => step.execute()}
+                    onClick={() => props.onRetry(step)}
                   >
                     <RefreshCwIcon className="size-4" />
                     Retry

apps/dashboard/src/@/components/ui/decimal-input.tsx

@@ -6,6 +6,7 @@ export function DecimalInput(props: {
   id?: string;
   className?: string;
   placeholder?: string;
+  disabled?: boolean;
 }) {
   return (
     <Input
@@ -15,6 +16,7 @@ export function DecimalInput(props: {
       className={props.className}
       inputMode="decimal"
       placeholder={props.placeholder}
+      disabled={props.disabled}
       onChange={(e) => {
         const number = Number(e.target.value);
         // ignore if string becomes invalid number

apps/dashboard/src/@/lib/file-to-url.ts

@@ -0,0 +1,4 @@
+export function fileToBlobUrl(file: File) {
+  const blob = new Blob([file], { type: file.type });
+  return URL.createObjectURL(blob);
+}

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/page.tsx

@@ -1,7 +1,7 @@
+import { getAuthToken } from "@app/api/lib/getAuthToken";
 import { ArrowUpRightIcon } from "lucide-react";
 import type { Metadata } from "next";
 import { headers } from "next/headers";
-import { getAuthToken } from "../../../api/lib/getAuthToken";
 import { SearchInput } from "./components/client/search";
 import { QueryType } from "./components/client/type";
 import { RouteListView } from "./components/client/view";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -49,6 +49,7 @@ import {
   useSwitchActiveWalletChain,
   useWalletBalance,
 } from "thirdweb/react";
+import { parseError } from "utils/errorParser";
 import { z } from "zod";
 
 function formatTime(seconds: number) {
@@ -234,7 +235,12 @@ export function FaucetButton({
     const claimPromise = claimMutation.mutateAsync(values.turnstileToken);
     toast.promise(claimPromise, {
       success: `${amount} ${chain.nativeCurrency.symbol} sent successfully`,
-      error: `Failed to claim ${amount} ${chain.nativeCurrency.symbol}`,
+      error: (err) => {
+        return {
+          message: `Failed to claim ${amount} ${chain.nativeCurrency.symbol}`,
+          description: parseError(err),
+        };
+      },
     });
   };
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx

@@ -14,16 +14,16 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import {
+  getAuthToken,
+  getAuthTokenWalletAddress,
+} from "@app/api/lib/getAuthToken";
 import { ChevronDownIcon, TicketCheckIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { mapV4ChainToV5Chain } from "../../../../../../contexts/map-chains";
 import { NebulaChatButton } from "../../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
-import {
-  getAuthToken,
-  getAuthTokenWalletAddress,
-} from "../../../../api/lib/getAuthToken";
 import { TeamHeader } from "../../../../team/components/TeamHeader/team-header";
 import { StarButton } from "../../components/client/star-button";
 import { getChain, getChainMetadata } from "../../utils";