add royalties and sales settings

MananTank · MananTank · commit 785cc56a50cd · 2025-06-10T20:56:00.000+05:30
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/file-preview.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/file-preview.tsx
@@ -1,5 +1,7 @@
 import { Img } from "@/components/blocks/Img";
 import { fileToBlobUrl } from "@/lib/file-to-url";
+import { cn } from "@/lib/utils";
+import { ImageOffIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { MediaRenderer } from "thirdweb/react";
@@ -33,6 +35,14 @@ export function FilePreview(props: {
     props.srcOrFile instanceof File &&
     props.srcOrFile.type.startsWith("image/");
 
+  if (!objectUrl) {
+    return (
+      <div className={cn("flex items-center justify-center", props.className)}>
+        <ImageOffIcon className="size-6 text-muted-foreground" />
+      </div>
+    );
+  }
+
   if (isImage) {
     return (
       <Img
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/form.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/form.ts
@@ -1,4 +1,5 @@
 import type { UseFormReturn } from "react-hook-form";
+import { isAddress } from "thirdweb";
 import * as z from "zod";
 import { socialUrlsSchema } from "../../_common/schema";
 import type { NFTMetadataWithPrice } from "../upload-nfts/batch-upload/process-files";
@@ -20,6 +21,7 @@ export type NFTCollectionInfoForm = UseFormReturn<NFTCollectionInfoFormValues>;
 
 export type CreateNFTFormValues = NFTCollectionInfoFormValues & {
   nfts: NFTMetadataWithPrice[];
+  sales: NFTSalesSettingsFormValues;
 };
 
 export type CreateNFTFunctions = {
@@ -41,3 +43,21 @@ export type CreateNFTFunctions = {
     lazyMintNFTs: (values: CreateNFTFormValues) => Promise<void>;
   };
 };
+
+const addressSchema = z.string().refine((value) => {
+  if (isAddress(value)) {
+    return true;
+  }
+
+  return false;
+});
+
+export const nftSalesSettingsFormSchema = z.object({
+  royaltyRecipient: addressSchema,
+  primarySaleRecipient: addressSchema,
+  royaltyBps: z.coerce.number().min(0).max(10000),
+});
+
+export type NFTSalesSettingsFormValues = z.infer<
+  typeof nftSalesSettingsFormSchema
+>;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page-ui.tsx
@@ -8,13 +8,17 @@ import {
   type ThirdwebClient,
   getAddress,
 } from "thirdweb";
+import { useActiveAccount } from "thirdweb/react";
 import {
   type CreateNFTFunctions,
   type NFTCollectionInfoFormValues,
+  type NFTSalesSettingsFormValues,
   nftCollectionInfoFormSchema,
+  nftSalesSettingsFormSchema,
 } from "./_common/form";
 import { NFTCollectionInfoFieldset } from "./collection-info/nft-collection-info-fieldset";
 import { LaunchNFT } from "./launch/launch-nft";
+import { SalesSettings } from "./sales/sales-settings";
 import type {} from "./upload-nfts/batch-upload/process-files";
 import { type NFTData, UploadNFTsFieldset } from "./upload-nfts/upload-nfts";
 
@@ -27,14 +31,25 @@ export function CreateNFTPageUI(props: {
   projectSlug: string;
 }) {
   const [step, setStep] = useState<
-    "collection-info" | "upload-assets" | "launch"
+    "collection-info" | "upload-assets" | "launch" | "sales-settings"
   >("collection-info");
 
+  const activeAccount = useActiveAccount();
+
   const [nftData, setNFTData] = useState<NFTData>({
     type: "single",
     nft: null,
   });
 
+  const nftSalesSettingsForm = useForm<NFTSalesSettingsFormValues>({
+    resolver: zodResolver(nftSalesSettingsFormSchema),
+    defaultValues: {
+      royaltyRecipient: activeAccount?.address || "",
+      primarySaleRecipient: activeAccount?.address || "",
+      royaltyBps: 0,
+    },
+  });
+
   const nftCollectionInfoForm = useNFTCollectionInfoForm();
 
   return (
@@ -81,7 +96,7 @@ export function CreateNFTPageUI(props: {
           nftData={nftData}
           setNFTData={setNFTData}
           onNext={() => {
-            setStep("launch");
+            setStep("sales-settings");
           }}
           onPrev={() => {
             setStep("collection-info");
@@ -91,10 +106,24 @@ export function CreateNFTPageUI(props: {
         />
       )}
 
+      {step === "sales-settings" && (
+        <SalesSettings
+          form={nftSalesSettingsForm}
+          client={props.client}
+          onNext={() => {
+            setStep("launch");
+          }}
+          onPrev={() => {
+            setStep("upload-assets");
+          }}
+        />
+      )}
+
       {step === "launch" && (
         <LaunchNFT
           values={{
             ...nftCollectionInfoForm.watch(),
+            sales: nftSalesSettingsForm.watch(),
             nfts:
               nftData.type === "multiple"
                 ? nftData.nfts?.type === "data"
@@ -105,7 +134,7 @@ export function CreateNFTPageUI(props: {
                   : [],
           }}
           onPrevious={() => {
-            setStep("upload-assets");
+            setStep("sales-settings");
           }}
           projectSlug={props.projectSlug}
           client={props.client}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page.tsx
@@ -121,8 +121,9 @@ export function CreateNFTPage(props: {
             description: formValues.description,
             image: formValues.image,
             social_urls: transformSocialUrls(formValues.socialUrls),
-            // TODO Royalty stuff
-            // TODO Sales recipient
+            saleRecipient: formValues.sales.primarySaleRecipient,
+            royaltyRecipient: formValues.sales.royaltyRecipient,
+            royaltyBps: BigInt(formValues.sales.royaltyBps),
           },
         });
       } else {
@@ -137,8 +138,9 @@ export function CreateNFTPage(props: {
             description: formValues.description,
             image: formValues.image,
             social_urls: transformSocialUrls(formValues.socialUrls),
-            // TODO Royalty stuff
-            // TODO Sales recipient
+            saleRecipient: formValues.sales.primarySaleRecipient,
+            royaltyRecipient: formValues.sales.royaltyRecipient,
+            royaltyBps: BigInt(formValues.sales.royaltyBps),
           },
         });
       }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch/launch-nft.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch/launch-nft.tsx
@@ -2,6 +2,7 @@
 
 import { MultiStepStatus } from "@/components/blocks/multi-step-status/multi-step-status";
 import type { MultiStepState } from "@/components/blocks/multi-step-status/multi-step-status";
+import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -109,12 +110,15 @@ export function LaunchNFT(props: {
         status: { type: "idle" },
       },
       {
-        label: "Mint NFTs",
+        label: formValues.nfts.length > 1 ? "Mint NFTs" : "Mint NFT",
         id: stepIds["mint-nfts"],
         status: { type: "idle" },
       },
       {
-        label: "Set claim conditions",
+        label:
+          formValues.nfts.length > 1
+            ? "Set claim conditions"
+            : "Set claim condition",
         id: stepIds["set-claim-conditions"],
         status: { type: "idle" },
       },
@@ -133,10 +137,6 @@ export function LaunchNFT(props: {
       : 1;
 
   const ercType: "erc721" | "erc1155" = useMemo(() => {
-    if (formValues.nfts.length === 1) {
-      return "erc721";
-    }
-
     // if all prices (amount + currency) are same and all supply is to 1
     const shouldDeployERC721 = formValues.nfts.every((nft) => {
       return (
@@ -358,7 +358,7 @@ export function LaunchNFT(props: {
 
       {/* Token info */}
       <div className="border-b border-dashed px-4 py-6 pb-6 md:px-6 ">
-        <h2 className="mb-3 font-medium text-sm">Collection Info</h2>
+        <h2 className="mb-3 font-semibold text-base">Collection Info</h2>
 
         <div className="flex flex-col gap-6 lg:flex-row">
           <OverviewField name="Image" className="shrink-0">
@@ -403,8 +403,8 @@ export function LaunchNFT(props: {
         </div>
       </div>
 
-      <div className="px-4 py-6 pb-6 md:px-6">
-        <h2 className="font-medium text-sm">NFTs</h2>
+      <div className="border-b border-dashed px-4 py-6 pb-6 md:px-6">
+        <h2 className="font-semibold text-base">NFTs</h2>
         <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:gap-4 lg:[&>*:not(:first-child)]:border-l lg:[&>*:not(:first-child)]:border-dashed lg:[&>*:not(:first-child)]:pl-5">
           <OverviewField name="Total NFTs">
             <OverviewFieldValue value={formValues.nfts.length.toString()} />
@@ -443,6 +443,35 @@ export function LaunchNFT(props: {
           )}
         </div>
       </div>
+
+      <div className="px-4 py-6 pb-6 md:px-6">
+        <h2 className="font-semibold text-base">Sales and Fees</h2>
+        <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:gap-4 lg:[&>*:not(:first-child)]:border-l lg:[&>*:not(:first-child)]:border-dashed lg:[&>*:not(:first-child)]:pl-5">
+          <OverviewField name="Primary Sales Recipient">
+            <WalletAddress
+              address={formValues.sales.primarySaleRecipient}
+              client={props.client}
+              className="h-auto py-1"
+              iconClassName="size-3.5"
+            />
+          </OverviewField>
+
+          <OverviewField name="Royalties Recipient">
+            <WalletAddress
+              address={formValues.sales.royaltyRecipient}
+              client={props.client}
+              iconClassName="size-3.5"
+              className="h-auto py-1"
+            />
+          </OverviewField>
+
+          <OverviewField name="Royalties">
+            <p className="flex items-center gap-1 text-foreground text-sm">
+              {Number(formValues.sales.royaltyBps) / 100}%
+            </p>
+          </OverviewField>
+        </div>
+      </div>
     </StepCard>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/sales/sales-settings.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/sales/sales-settings.tsx
@@ -0,0 +1,110 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Form } from "@/components/ui/form";
+import { BasisPointsInput } from "components/inputs/BasisPointsInput";
+import type { UseFormReturn } from "react-hook-form";
+import type { ThirdwebClient } from "thirdweb";
+import { SolidityInput } from "../../../../../../../../../../contract-ui/components/solidity-inputs";
+import { StepCard } from "../../_common/step-card";
+import type { NFTSalesSettingsFormValues } from "../_common/form";
+
+export function SalesSettings(props: {
+  onNext: () => void;
+  onPrev: () => void;
+  form: UseFormReturn<NFTSalesSettingsFormValues>;
+  client: ThirdwebClient;
+}) {
+  const errors = props.form.formState.errors;
+  const bpsNumValue = props.form.watch("royaltyBps");
+
+  return (
+    <Form {...props.form}>
+      <form
+        onSubmit={props.form.handleSubmit(() => {
+          props.onNext();
+        })}
+      >
+        <StepCard
+          tracking={{
+            page: "sales-settings",
+            contractType: "NFTCollection",
+          }}
+          title="Sales and Fees"
+          prevButton={{
+            onClick: props.onPrev,
+          }}
+          nextButton={{
+            type: "submit",
+          }}
+        >
+          <div className="px-4 py-6 md:px-6">
+            <div className="mb-4 space-y-1">
+              <h3 className="font-semibold text-base"> Primary Sales</h3>
+              <p className="text-muted-foreground text-sm">
+                Set the wallet address that should receive the revenue from
+                initial sales of the assets
+              </p>
+            </div>
+            <FormFieldSetup
+              className="grow"
+              isRequired
+              label="Primary Sales Recipient"
+              errorMessage={errors.primarySaleRecipient?.message}
+            >
+              <SolidityInput
+                solidityType="address"
+                className="bg-background"
+                {...props.form.register("primarySaleRecipient")}
+                client={props.client}
+              />
+            </FormFieldSetup>
+          </div>
+
+          <div className="border-t border-dashed px-4 py-6 md:px-6">
+            <div className="mb-4 space-y-1">
+              <h3 className="font-semibold text-base">Royalties</h3>
+              <p className="text-muted-foreground text-sm">
+                Set the wallet address should receive the revenue from royalties
+                earned from secondary sales of the assets
+              </p>
+            </div>
+            <div className="flex flex-col gap-4 md:flex-row">
+              <FormFieldSetup
+                className="grow"
+                isRequired
+                label="Recipient Address"
+                errorMessage={errors.royaltyRecipient?.message}
+                helperText={
+                  <>
+                    The wallet address that should receive the revenue from
+                    royalties earned from secondary sales of the assets.
+                  </>
+                }
+              >
+                <SolidityInput
+                  solidityType="address"
+                  className="bg-background"
+                  {...props.form.register("royaltyRecipient")}
+                  client={props.client}
+                />
+              </FormFieldSetup>
+
+              <FormFieldSetup
+                isRequired
+                label="Percentage"
+                className="shrink-0 md:max-w-[150px]"
+                errorMessage={errors.royaltyBps?.message}
+              >
+                <BasisPointsInput
+                  className="bg-background"
+                  value={bpsNumValue}
+                  onChange={(value) => props.form.setValue("royaltyBps", value)}
+                  defaultValue={0}
+                />
+              </FormFieldSetup>
+            </div>
+          </div>
+        </StepCard>
+      </form>
+    </Form>
+  );
+}
diff --git a/apps/dashboard/src/components/inputs/BasisPointsInput.tsx b/apps/dashboard/src/components/inputs/BasisPointsInput.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
 import { PercentIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
@@ -44,9 +45,12 @@ export const BasisPointsInput: React.FC<BasisPointsInputProps> = ({
   return (
     <div className="flex overflow-hidden rounded-lg border border-border ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
       <Input
-        className="rounded-r-none border-none focus-visible:ring-0 focus-visible:ring-offset-0"
         value={stringValue}
         {...restInputProps}
+        className={cn(
+          "rounded-r-none border-none focus-visible:ring-0 focus-visible:ring-offset-0",
+          restInputProps.className,
+        )}
         onChange={(e) => setStringValue(e.target.value)}
         onBlur={(e) => {
           const val = e.target.value;
diff --git a/apps/dashboard/src/tw-components/nft-media.tsx b/apps/dashboard/src/tw-components/nft-media.tsx
