Merge remote-tracking branch 'origin/main' into ph/feat-webhooks

Author: arcoraven

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]/(team)/~/analytics/page.tsx

@@ -367,7 +367,7 @@ function AppHighlightsCard({
       color: "hsl(var(--chart-2))",
       emptyContent: (
         <EmptyStateContent
-          description="Onramp, swap, and bridge with thirdweb's Universal Bridge."
+          description="Onramp, swap, and bridge with thirdweb's Payments."
           link="https://portal.thirdweb.com/connect/pay/overview"
           metric="Payments"
         />

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx

@@ -257,7 +257,7 @@ function ProductsSection(props: { teamSlug: string; projectSlug: string }) {
         "Bridge, swap, and purchase cryptocurrencies with any fiat options or tokens via cross-chain routing",
       href: `/team/${props.teamSlug}/${props.projectSlug}/universal-bridge`,
       icon: PayIcon,
-      title: "Universal Bridge",
+      title: "Payments",
     },
   ];
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx

@@ -75,7 +75,7 @@ export function ProjectSidebarLayout(props: {
             {
               href: `${layoutPath}/universal-bridge`,
               icon: PayIcon,
-              label: "Universal Bridge",
+              label: "Payments",
             },
             {
               href: `${layoutPath}/tokens`,

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

@@ -435,7 +435,7 @@ function AppHighlightsCard({
       color: "hsl(var(--chart-2))",
       emptyContent: (
         <EmptyStateContent
-          description="Onramp, swap, and bridge with thirdweb's Universal Bridge."
+          description="Onramp, swap, and bridge with thirdweb's Payments."
           link="https://portal.thirdweb.com/connect/pay/overview"
           metric="Payments"
         />

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,115 @@
+"use client";
+
+import { PlusIcon, Trash2Icon } from "lucide-react";
+import { type UseFormReturn, useFieldArray } from "react-hook-form";
+import { useActiveAccount } from "thirdweb/react";
+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>;
+}) {
+  // T contains all properties of WithAdmins, so this is ok
+  const form = props.form as unknown as UseFormReturn<WithAdmins>;
+  const account = useActiveAccount();
+
+  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 === account?.address) {
+      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 === account?.address}
+                          placeholder="0x..."
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <Button
+                className="rounded-full"
+                disabled={field.address === account?.address}
+                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,14 @@ export type CreateNFTCollectionAllValues = {
 };
 
 export type CreateNFTCollectionFunctions = {
+  setAdmins: (values: {
+    contractAddress: string;
+    contractType: "DropERC721" | "DropERC1155";
+    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

@@ -10,6 +10,7 @@ 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";
@@ -126,6 +127,8 @@ export function NFTCollectionInfoFieldset(props: {
           </div>
 
           <SocialUrlsFieldset form={form} />
+
+          <AdminAddressesFieldset form={form} />
         </StepCard>
       </form>
     </Form>