Skip to content

Commit c351781

Browse files
GWSzetoGWSzeto
committed
updated to address comments in PR
1 parent f86d9bd commit c351781

File tree

1 file changed

+183
-178
lines changed
  • apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components

1 file changed

+183
-178
lines changed

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx‎

Lines changed: 183 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -313,24 +313,15 @@ export function ClaimableModuleUI(
313313
<AccordionContent className="px-1">
314314
{!props.isErc721 && (
315315
<div className="flex flex-col gap-6">
316-
<div className="flex-1 space-y-2">
316+
<div className="flex-1 space-y-1">
317317
<Label>Token ID</Label>
318+
<p className="text-muted-foreground text-sm">
319+
{props.isOwnerAccount
320+
? "View and Update claim conditions for given token ID"
321+
: "View claim conditions for given token ID"}
322+
</p>
318323
<Input onChange={(e) => props.setTokenId(e.target.value)} />
319324
</div>
320-
321-
{!(
322-
props.claimConditionSection.tokenId &&
323-
positiveIntegerRegex.test(
324-
props.claimConditionSection.tokenId,
325-
)
326-
) && (
327-
<Alert variant="warning">
328-
<CircleAlertIcon className="size-5 max-sm:hidden" />
329-
<AlertTitle className="max-sm:!pl-0">
330-
Token ID must be set to proceed
331-
</AlertTitle>
332-
</Alert>
333-
)}
334325
</div>
335326
)}
336327

@@ -438,6 +429,8 @@ function ClaimConditionSection(props: {
438429
const { idToChain } = useAllChainsData();
439430
const chain = idToChain.get(props.chainId);
440431
const { tokenId, claimCondition } = props;
432+
const [addClaimConditionButtonClicked, setAddClaimConditionButtonClicked] =
433+
useState(false);
441434

442435
const form = useForm<ClaimConditionFormValues>({
443436
resolver: zodResolver(claimConditionFormSchema),
@@ -500,182 +493,194 @@ function ClaimConditionSection(props: {
500493

501494
return (
502495
<div className="flex flex-col gap-6">
503-
{props.noClaimConditionSet && (
504-
<Alert variant="warning">
505-
<CircleAlertIcon className="size-5 max-sm:hidden" />
506-
<AlertTitle>No Claim Condition Set</AlertTitle>
507-
<AlertDescription>
508-
You have not set a claim condition for this token. You can set a
509-
claim condition by clicking the "Set Claim Condition" button.
510-
</AlertDescription>
511-
</Alert>
496+
{props.noClaimConditionSet && !addClaimConditionButtonClicked && (
497+
<>
498+
<Alert variant="warning">
499+
<CircleAlertIcon className="size-5 max-sm:hidden" />
500+
<AlertTitle>No Claim Condition Set</AlertTitle>
501+
<AlertDescription>
502+
You have not set a claim condition for this token. You can set a
503+
claim condition by clicking the "Set Claim Condition" button.
504+
</AlertDescription>
505+
</Alert>
506+
507+
<Button
508+
onClick={() => setAddClaimConditionButtonClicked(true)}
509+
variant="outline"
510+
className="w-full"
511+
>
512+
Add Claim Condition
513+
</Button>
514+
</>
512515
)}
513516

514-
<Form {...form}>
515-
<form onSubmit={form.handleSubmit(onSubmit)}>
516-
<div className="flex flex-col gap-6">
517-
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
518-
<FormField
519-
control={form.control}
520-
name="pricePerToken"
521-
render={({ field }) => (
522-
<FormItem className="flex-1">
523-
<FormLabel>Price Per Token</FormLabel>
524-
<FormControl>
525-
<Input {...field} disabled={!props.isOwnerAccount} />
526-
</FormControl>
527-
<FormMessage />
528-
</FormItem>
529-
)}
530-
/>
531-
532-
<FormField
533-
control={form.control}
534-
name="currencyAddress"
535-
render={({ field }) => (
536-
<FormItem>
537-
<FormLabel>Currency</FormLabel>
538-
<CurrencySelector chain={chain} field={field} />
539-
</FormItem>
540-
)}
541-
/>
542-
</div>
517+
{(!props.noClaimConditionSet || addClaimConditionButtonClicked) && (
518+
<Form {...form}>
519+
<form onSubmit={form.handleSubmit(onSubmit)}>
520+
<div className="flex flex-col gap-6">
521+
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
522+
<FormField
523+
control={form.control}
524+
name="pricePerToken"
525+
render={({ field }) => (
526+
<FormItem className="flex-1">
527+
<FormLabel>Price Per Token</FormLabel>
528+
<FormControl>
529+
<Input {...field} disabled={!props.isOwnerAccount} />
530+
</FormControl>
531+
<FormMessage />
532+
</FormItem>
533+
)}
534+
/>
543535

544-
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
545-
<FormField
546-
control={form.control}
547-
name="maxClaimableSupply"
548-
render={({ field }) => (
549-
<FormItem className="flex-1">
550-
<FormLabel>Max Available Supply</FormLabel>
551-
<FormControl>
552-
<Input {...field} disabled={!props.isOwnerAccount} />
553-
</FormControl>
554-
<FormMessage />
555-
</FormItem>
556-
)}
557-
/>
536+
<FormField
537+
control={form.control}
538+
name="currencyAddress"
539+
render={({ field }) => (
540+
<FormItem>
541+
<FormLabel>Currency</FormLabel>
542+
<CurrencySelector chain={chain} field={field} />
543+
</FormItem>
544+
)}
545+
/>
546+
</div>
558547

559-
<FormField
560-
control={form.control}
561-
name="maxClaimablePerWallet"
562-
render={({ field }) => (
563-
<FormItem className="flex-1">
564-
<FormLabel>Maximum number of mints per wallet</FormLabel>
565-
<FormControl>
566-
<Input {...field} disabled={!props.isOwnerAccount} />
567-
</FormControl>
568-
<FormMessage />
569-
</FormItem>
570-
)}
571-
/>
572-
</div>
548+
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
549+
<FormField
550+
control={form.control}
551+
name="maxClaimableSupply"
552+
render={({ field }) => (
553+
<FormItem className="flex-1">
554+
<FormLabel>Max Available Supply</FormLabel>
555+
<FormControl>
556+
<Input {...field} disabled={!props.isOwnerAccount} />
557+
</FormControl>
558+
<FormMessage />
559+
</FormItem>
560+
)}
561+
/>
573562

574-
<FormFieldSetup
575-
htmlFor="duration"
576-
label="Duration"
577-
isRequired
578-
errorMessage={
579-
form.formState.errors?.startTime?.message ||
580-
form.formState.errors?.endTime?.message
581-
}
582-
>
583-
<div>
584-
<DatePickerWithRange
585-
from={startTime}
586-
to={endTime}
587-
setFrom={(from: Date) => form.setValue("startTime", from)}
588-
setTo={(to: Date) => form.setValue("endTime", to)}
563+
<FormField
564+
control={form.control}
565+
name="maxClaimablePerWallet"
566+
render={({ field }) => (
567+
<FormItem className="flex-1">
568+
<FormLabel>Maximum number of mints per wallet</FormLabel>
569+
<FormControl>
570+
<Input {...field} disabled={!props.isOwnerAccount} />
571+
</FormControl>
572+
<FormMessage />
573+
</FormItem>
574+
)}
589575
/>
590576
</div>
591-
</FormFieldSetup>
592-
593-
<Separator />
594-
595-
<div className="w-full space-y-2">
596-
<FormLabel>Allowlist</FormLabel>
597-
<div className="flex flex-col gap-3">
598-
{allowListFields.fields.map((fieldItem, index) => (
599-
<div className="flex items-start gap-3" key={fieldItem.id}>
600-
<FormField
601-
control={form.control}
602-
name={`allowList.${index}.address`}
603-
render={({ field }) => (
604-
<FormItem className="grow">
605-
<FormControl>
606-
<Input
607-
placeholder="0x..."
608-
{...field}
609-
disabled={!props.isOwnerAccount}
610-
/>
611-
</FormControl>
612-
<FormMessage />
613-
</FormItem>
614-
)}
615-
/>
616-
<ToolTipLabel label="Remove address">
617-
<Button
618-
variant="outline"
619-
className="!text-destructive-text bg-background"
620-
onClick={() => {
621-
allowListFields.remove(index);
622-
}}
623-
disabled={!props.isOwnerAccount}
624-
>
625-
<Trash2Icon className="size-4" />
626-
</Button>
627-
</ToolTipLabel>
628-
</div>
629-
))}
630-
631-
{allowListFields.fields.length === 0 && (
632-
<Alert variant="warning">
633-
<CircleAlertIcon className="size-5 max-sm:hidden" />
634-
<AlertTitle className="max-sm:!pl-0">
635-
No allowlist configured
636-
</AlertTitle>
637-
</Alert>
638-
)}
639-
</div>
640577

641-
<div className="h-1" />
578+
<FormFieldSetup
579+
htmlFor="duration"
580+
label="Duration"
581+
isRequired
582+
errorMessage={
583+
form.formState.errors?.startTime?.message ||
584+
form.formState.errors?.endTime?.message
585+
}
586+
>
587+
<div>
588+
<DatePickerWithRange
589+
from={startTime}
590+
to={endTime}
591+
setFrom={(from: Date) => form.setValue("startTime", from)}
592+
setTo={(to: Date) => form.setValue("endTime", to)}
593+
/>
594+
</div>
595+
</FormFieldSetup>
596+
597+
<Separator />
598+
599+
<div className="w-full space-y-2">
600+
<FormLabel>Allowlist</FormLabel>
601+
<div className="flex flex-col gap-3">
602+
{allowListFields.fields.map((fieldItem, index) => (
603+
<div className="flex items-start gap-3" key={fieldItem.id}>
604+
<FormField
605+
control={form.control}
606+
name={`allowList.${index}.address`}
607+
render={({ field }) => (
608+
<FormItem className="grow">
609+
<FormControl>
610+
<Input
611+
placeholder="0x..."
612+
{...field}
613+
disabled={!props.isOwnerAccount}
614+
/>
615+
</FormControl>
616+
<FormMessage />
617+
</FormItem>
618+
)}
619+
/>
620+
<ToolTipLabel label="Remove address">
621+
<Button
622+
variant="outline"
623+
className="!text-destructive-text bg-background"
624+
onClick={() => {
625+
allowListFields.remove(index);
626+
}}
627+
disabled={!props.isOwnerAccount}
628+
>
629+
<Trash2Icon className="size-4" />
630+
</Button>
631+
</ToolTipLabel>
632+
</div>
633+
))}
634+
635+
{allowListFields.fields.length === 0 && (
636+
<Alert variant="warning">
637+
<CircleAlertIcon className="size-5 max-sm:hidden" />
638+
<AlertTitle className="max-sm:!pl-0">
639+
No allowlist configured
640+
</AlertTitle>
641+
</Alert>
642+
)}
643+
</div>
644+
645+
<div className="h-1" />
646+
647+
<div className="flex gap-3">
648+
<Button
649+
variant="outline"
650+
size="sm"
651+
onClick={() => {
652+
// add admin by default if adding the first input
653+
allowListFields.append({
654+
address: "",
655+
});
656+
}}
657+
className="gap-2"
658+
disabled={!props.isOwnerAccount}
659+
>
660+
<PlusIcon className="size-3" />
661+
Add Address
662+
</Button>
663+
</div>
664+
</div>
642665

643-
<div className="flex gap-3">
644-
<Button
645-
variant="outline"
666+
<div className="flex justify-end">
667+
<TransactionButton
646668
size="sm"
647-
onClick={() => {
648-
// add admin by default if adding the first input
649-
allowListFields.append({
650-
address: "",
651-
});
652-
}}
653-
className="gap-2"
654-
disabled={!props.isOwnerAccount}
669+
className="min-w-24"
670+
disabled={updateMutation.isPending || !props.isOwnerAccount}
671+
type="submit"
672+
isLoading={updateMutation.isPending}
673+
txChainID={props.chainId}
674+
transactionCount={1}
675+
colorScheme="primary"
655676
>
656-
<PlusIcon className="size-3" />
657-
Add Address
658-
</Button>
677+
Update
678+
</TransactionButton>
659679
</div>
660680
</div>
661-
662-
<div className="flex justify-end">
663-
<TransactionButton
664-
size="sm"
665-
className="min-w-24"
666-
disabled={updateMutation.isPending || !props.isOwnerAccount}
667-
type="submit"
668-
isLoading={updateMutation.isPending}
669-
txChainID={props.chainId}
670-
transactionCount={1}
671-
colorScheme="primary"
672-
>
673-
Update
674-
</TransactionButton>
675-
</div>
676-
</div>
677-
</form>{" "}
678-
</Form>
681+
</form>{" "}
682+
</Form>
683+
)}
679684
</div>
680685
);
681686
}

0 commit comments

Comments
 (0)