Add implementation

Author: MananTank

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

@@ -186,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/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,14 @@ export function MultiStepStatus(props: {
                 {step.label}
               </p>
 
+              {(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 +74,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/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -50,6 +50,7 @@ import {
   useWalletBalance,
 } from "thirdweb/react";
 import { z } from "zod";
+import { parseError } from "../../../../../../../../utils/errorParser";
 
 function formatTime(seconds: number) {
   const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
@@ -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]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx

@@ -10,6 +10,7 @@ import { getApprovalForTransaction } from "thirdweb/extensions/erc20";
 import { claimTo } from "thirdweb/extensions/erc1155";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
 import { FormErrorMessage, FormHelperText, FormLabel } from "tw-components";
+import { parseError } from "utils/errorParser";
 
 interface ClaimTabProps {
   contract: ThirdwebContract;
@@ -67,7 +68,12 @@ const ClaimTabERC1155: React.FC<ClaimTabProps> = ({
           toast.promise(promise, {
             loading: "Claiming NFT",
             success: "NFT claimed successfully",
-            error: "Failed to claim NFT",
+            error: (error) => {
+              return {
+                message: "Failed to claim NFT",
+                description: parseError(error),
+              };
+            },
           });
           trackEvent({
             category: "nft",

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx

@@ -139,7 +139,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
     }
     if (isErc1155) {
       cols.push({
-        Header: "Supply",
+        Header: "Circulating Supply",
         accessor: (row) => row,
         Cell: (cell: CellProps<NFT, number>) => {
           if (cell.row.original.type === "ERC1155") {

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

@@ -81,6 +81,7 @@ export function SocialUrlsFieldset<T extends WithSocialUrls>(props: {
                 variant="outline"
                 size="icon"
                 onClick={() => remove(index)}
+                className="rounded-full"
               >
                 <Trash2Icon className="h-4 w-4" />
                 <span className="sr-only">Remove</span>
@@ -95,9 +96,9 @@ export function SocialUrlsFieldset<T extends WithSocialUrls>(props: {
         size="sm"
         variant="outline"
         onClick={() => append({ platform: "", url: "" })}
-        className="gap-2"
+        className="h-auto gap-1.5 rounded-full px-3 py-1.5 text-xs"
       >
-        <PlusIcon className="size-4" />
+        <PlusIcon className="size-3.5" />
         Add Social URL
       </Button>
     </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/file-image.tsx

@@ -53,9 +53,7 @@ export function FilePreview(props: {
         props.className,
       )}
     >
-      <p className="text-muted-foreground text-sm">
-        <FileIcon className="size-5" />
-      </p>
+      {props.fallback || <FileIcon className="size-5" />}
     </div>
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/schem.ts renamed to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/schema.ts

@@ -7,7 +7,7 @@ export function StepCard(props: {
   title: string;
   tracking: {
     page: string;
-    contractType: "DropERC20" | "NFTDrop";
+    contractType: "DropERC20" | "NFTCollection";
   };
   prevButton:
     | undefined