[TOOL-4972] Dashboard: Add field to configure admins in NFT asset creation

Author: MananTank

apps/dashboard/src/@/analytics/report.ts

@@ -362,7 +362,11 @@ export function reportAssetCreationFailed(
   properties: { contractType: AssetContractType; error: string } & (
     | {
         assetType: "nft";
-        step: "deploy-contract" | "mint-nfts" | "set-claim-conditions";
+        step:
+          | "deploy-contract"
+          | "mint-nfts"
+          | "set-claim-conditions"
+          | "set-admins";
       }
     | {
         assetType: "coin";

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

@@ -34,7 +34,7 @@ export function SocialUrlsFieldset<T extends WithSocialUrls>(props: {
       <h2 className="mb-2 font-medium text-sm">Social URLs</h2>
 
       {fields.length > 0 && (
-        <div className="mb-5 space-y-4">
+        <div className="mb-4 space-y-3">
           {fields.map((field, index) => (
             <div
               className="flex gap-3 max-sm:mb-6 max-sm:border-b max-sm:border-dashed max-sm:pb-6"

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/admin-addresses-fieldset.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { PlusIcon, Trash2Icon } from "lucide-react";
+import { type UseFormReturn, useFieldArray } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+
+type WithAdmins = {
+  admins: {
+    address: string;
+  }[];
+};
+
+export function AdminAddressesFieldset<T extends WithAdmins>(props: {
+  form: UseFormReturn<T>;
+  connectedAddress: string;
+}) {
+  // T contains all properties of WithAdmins, so this is ok
+  const form = props.form as unknown as UseFormReturn<WithAdmins>;
+
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "admins",
+  });
+
+  const handleAddAddress = () => {
+    append({ address: "" });
+  };
+
+  const handleRemoveAddress = (index: number) => {
+    const field = fields[index];
+    if (field?.address === props.connectedAddress) {
+      return; // Don't allow removing the connected address
+    }
+    remove(index);
+  };
+
+  return (
+    <div className="border-t border-dashed px-4 py-6 lg:px-6">
+      <div className="mb-3">
+        <h2 className="mb-1 font-medium text-sm">Admins</h2>
+        <p className="text-sm text-muted-foreground">
+          These wallets will have authority on the token
+        </p>
+      </div>
+
+      {fields.length > 0 && (
+        <div className="mb-4 space-y-3">
+          {fields.map((field, index) => (
+            <div
+              className="flex gap-3 max-sm:mb-6 max-sm:border-b max-sm:border-dashed max-sm:pb-6"
+              key={field.id}
+            >
+              <div className="flex flex-1 flex-col gap-3 lg:flex-row">
+                <FormField
+                  control={form.control}
+                  name={`admins.${index}.address`}
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormControl>
+                        <Input
+                          {...field}
+                          aria-label="Admin Address"
+                          disabled={field.value === props.connectedAddress}
+                          placeholder="0x..."
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <Button
+                className="rounded-full"
+                disabled={field.address === props.connectedAddress}
+                onClick={() => handleRemoveAddress(index)}
+                size="icon"
+                type="button"
+                variant="outline"
+              >
+                <Trash2Icon className="h-4 w-4" />
+                <span className="sr-only">Remove</span>
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <Button
+        className="h-auto gap-1.5 rounded-full px-3 py-1.5 text-xs"
+        onClick={handleAddAddress}
+        size="sm"
+        type="button"
+        variant="outline"
+      >
+        <PlusIcon className="size-3.5" />
+        Add Admin
+      </Button>
+
+      {form.watch("admins").length === 0 && (
+        <p className="text-sm text-destructive mt-2">
+          At least one admin address is required
+        </p>
+      )}
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/schema.ts

@@ -22,6 +22,22 @@ export const socialUrlsSchema = z.array(
   }),
 );
 
+export const addressArraySchema = z.array(
+  z.object({
+    address: z.string().refine(
+      (value) => {
+        if (isAddress(value)) {
+          return true;
+        }
+        return false;
+      },
+      {
+        message: "Invalid address",
+      },
+    ),
+  }),
+);
+
 export const addressSchema = z.string().refine(
   (value) => {
     if (isAddress(value)) {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/_common/form.ts

@@ -1,9 +1,15 @@
-import { isAddress } from "thirdweb";
 import * as z from "zod";
-import { socialUrlsSchema } from "../../_common/schema";
+import {
+  addressArraySchema,
+  addressSchema,
+  socialUrlsSchema,
+} from "../../_common/schema";
 import type { NFTMetadataWithPrice } from "../upload-nfts/batch-upload/process-files";
 
 export const nftCollectionInfoFormSchema = z.object({
+  admins: addressArraySchema.refine((addresses) => addresses.length > 0, {
+    message: "At least one admin is required",
+  }),
   chain: z.string().min(1, "Chain is required"),
   description: z.string().optional(),
   image: z.instanceof(File).optional(),
@@ -12,14 +18,6 @@ export const nftCollectionInfoFormSchema = z.object({
   symbol: z.string(),
 });
 
-const addressSchema = z.string().refine((value) => {
-  if (isAddress(value)) {
-    return true;
-  }
-
-  return false;
-});
-
 export const nftSalesSettingsFormSchema = z.object({
   primarySaleRecipient: addressSchema,
   royaltyBps: z.coerce.number().min(0).max(10000),
@@ -37,6 +35,13 @@ export type CreateNFTCollectionAllValues = {
 };
 
 export type CreateNFTCollectionFunctions = {
+  setAdmins: (values: {
+    contractAddress: string;
+    admins: {
+      address: string;
+    }[];
+    chain: string;
+  }) => Promise<void>;
   erc721: {
     deployContract: (values: CreateNFTCollectionAllValues) => Promise<{
       contractAddress: string;

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/collection-info/nft-collection-info-fieldset.tsx

@@ -3,13 +3,15 @@
 import { useId } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
+import { useActiveAccount } from "thirdweb/react";
 import { ClientOnly } from "@/components/blocks/client-only";
 import { FileInput } from "@/components/blocks/FileInput";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { Form } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { AdminAddressesFieldset } from "../../_common/admin-addresses-fieldset";
 import { SocialUrlsFieldset } from "../../_common/SocialUrls";
 import { StepCard } from "../../_common/step-card";
 import type { NFTCollectionInfoFormValues } from "../_common/form";
@@ -24,6 +26,7 @@ export function NFTCollectionInfoFieldset(props: {
   const nameId = useId();
   const symbolId = useId();
   const descriptionId = useId();
+  const account = useActiveAccount();
 
   return (
     <Form {...form}>
@@ -126,6 +129,11 @@ export function NFTCollectionInfoFieldset(props: {
           </div>
 
           <SocialUrlsFieldset form={form} />
+
+          <AdminAddressesFieldset
+            connectedAddress={account?.address ?? ""}
+            form={form}
+          />
         </StepCard>
       </form>
     </Form>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/create-nft-page-ui.tsx

@@ -8,7 +8,7 @@ import {
   NATIVE_TOKEN_ADDRESS,
   type ThirdwebClient,
 } from "thirdweb";
-import { useActiveAccount } from "thirdweb/react";
+import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
 import { reportAssetCreationStepConfigured } from "@/analytics/report";
 import type { Team } from "@/api/team";
 import {
@@ -163,11 +163,16 @@ export function CreateNFTPageUI(props: {
 }
 
 function useNFTCollectionInfoForm() {
+  const chain = useActiveWalletChain();
+  const account = useActiveAccount();
   return useForm<NFTCollectionInfoFormValues>({
-    resolver: zodResolver(nftCollectionInfoFormSchema),
-    reValidateMode: "onChange",
-    values: {
-      chain: "1",
+    defaultValues: {
+      admins: [
+        {
+          address: account?.address || "",
+        },
+      ],
+      chain: chain?.id.toString() || "1",
       description: "",
       image: undefined,
       name: "",
@@ -183,5 +188,7 @@ function useNFTCollectionInfoForm() {
       ],
       symbol: "",
     },
+    resolver: zodResolver(nftCollectionInfoFormSchema),
+    reValidateMode: "onChange",
   });
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/create-nft-page.tsx

@@ -18,6 +18,7 @@ import {
   lazyMint as lazyMint1155,
   setClaimConditions as setClaimConditions1155,
 } from "thirdweb/extensions/erc1155";
+import { grantRole } from "thirdweb/extensions/permissions";
 import { useActiveAccount } from "thirdweb/react";
 import { maxUint256 } from "thirdweb/utils";
 import { revalidatePathAction } from "@/actions/revalidate";
@@ -332,6 +333,59 @@ export function CreateNFTPage(props: {
     }
   }
 
+  async function handleSetAdmins(params: {
+    contractAddress: string;
+    admins: {
+      address: string;
+    }[];
+    chain: string;
+  }) {
+    const { contract, activeAccount } = getContractAndAccount({
+      chain: params.chain,
+    });
+
+    // remove the current account from the list - its already an admin, don't have to add it again
+    const adminsToAdd = params.admins.filter(
+      (admin) => admin.address !== activeAccount.address,
+    );
+
+    const encodedTxs = await Promise.all(
+      adminsToAdd.map((admin) => {
+        const tx = grantRole({
+          contract,
+          role: "admin",
+          targetAccountAddress: admin.address,
+        });
+
+        return encode(tx);
+      }),
+    );
+
+    const tx = multicall({
+      contract,
+      data: encodedTxs,
+    });
+
+    try {
+      await sendAndConfirmTransaction({
+        account: activeAccount,
+        transaction: tx,
+      });
+    } catch (e) {
+      const errorMessage = parseError(e);
+      console.error(errorMessage);
+
+      reportAssetCreationFailed({
+        assetType: "nft",
+        contractType: "DropERC721",
+        error: errorMessage,
+        step: "set-admins",
+      });
+
+      throw e;
+    }
+  }
+
   return (
     <CreateNFTPageUI
       {...props}
@@ -349,7 +403,6 @@ export function CreateNFTPage(props: {
               formValues,
             });
           },
-
           setClaimConditions: async (formValues) => {
             return handleSetClaimConditionsERC721({
               formValues,
@@ -373,6 +426,7 @@ export function CreateNFTPage(props: {
             return handleSetClaimConditionsERC1155(params);
           },
         },
+        setAdmins: handleSetAdmins,
       }}
       onLaunchSuccess={() => {
         revalidatePathAction(