Add UI for Mintable, Royalty, Claimable, Transferable, BatchMetadata and OpenEdition modules

apps/dashboard/package.json

@@ -30,6 +30,7 @@
     "@hookform/resolvers": "^3.9.1",
     "@marsidev/react-turnstile": "^1.0.2",
     "@n8tb1t/use-scroll-position": "^2.0.3",
+    "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.2",

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

@@ -9,6 +9,7 @@ export function FormFieldSetup(props: {
   children: React.ReactNode;
   tooltip?: React.ReactNode;
   isRequired: boolean;
+  helperText?: React.ReactNode;
 }) {
   return (
     <div>
@@ -26,8 +27,13 @@ export function FormFieldSetup(props: {
         )}
       </div>
       {props.children}
+
+      {props.helperText && (
+        <p className="mt-2 text-muted-foreground text-sm">{props.helperText}</p>
+      )}
+
       {props.errorMessage && (
-        <p className="mt-1 text-destructive-text text-sm">
+        <p className="mt-2 text-destructive-text text-sm">
           {props.errorMessage}
         </p>
       )}

apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx

@@ -69,14 +69,14 @@ export function DatePickerWithRange(props: {
         <DynamicHeight>
           <div>
             {!isValid && (
-              <p className="flex items-center justify-center gap-2 pt-2 text-center text-destructive-text text-sm">
+              <p className="flex items-center justify-center gap-2 py-2 text-center text-destructive-text text-sm">
                 <CalendarX2Icon className="h-4 w-4" />
                 Invalid date range
               </p>
             )}
             {props.header}
 
-            <div className="px-4">
+            <div className={cn("px-4", !props.header && "py-4")}>
               <TabButtons
                 tabClassName="!text-sm"
                 activeTabClassName="!bg-inverted !text-inverted-foreground"

apps/dashboard/src/@/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-border border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pt-0 pb-4", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -34,6 +34,7 @@ import { popularChains } from "../popularChains";
 export const CustomConnectWallet = (props: {
   loginRequired?: boolean;
   connectButtonClassName?: string;
+  signInLinkButtonClassName?: string;
   detailsButtonClassName?: string;
 }) => {
   const thirdwebClient = useThirdwebClient();
@@ -134,7 +135,12 @@ export const CustomConnectWallet = (props: {
   if (!isLoggedIn && loginRequired) {
     return (
       <>
-        <Button asChild variant="default" className="gap-2" size="lg">
+        <Button
+          asChild
+          variant="default"
+          className={props.signInLinkButtonClassName}
+          size="lg"
+        >
           <Link
             href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
           >