Skip to content

Commit 9f7753d

Browse files
kien-ngokien-ngo
committed
update
1 parent d6c2414 commit 9f7753d

File tree

2 files changed

+228
-95
lines changed

2 files changed

+228
-95
lines changed

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx‎

Lines changed: 88 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
SheetTitle,
88
SheetTrigger,
99
} from "@/components/ui/sheet";
10-
import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
1110
import { FormControl, Input, Select } from "@chakra-ui/react";
1211
import { TransactionButton } from "components/buttons/TransactionButton";
1312
import { useTrack } from "hooks/analytics/useTrack";
@@ -45,103 +44,97 @@ export const NFTRevealButton: React.FC<NFTRevealButtonProps> = ({
4544
const [open, setOpen] = useState(false);
4645

4746
return batchesQuery.data?.length ? (
48-
<MinterOnly contract={contract}>
49-
<Sheet open={open} onOpenChange={setOpen}>
50-
<SheetTrigger asChild>
51-
<Button
52-
colorScheme="primary"
53-
leftIcon={<EyeIcon className="size-4" />}
54-
>
55-
Reveal NFTs
56-
</Button>
57-
</SheetTrigger>
58-
<SheetContent className="z-[10000] overflow-y-auto sm:w-[540px] sm:max-w-[90%] lg:w-[700px]">
59-
<SheetHeader>
60-
<SheetTitle>Reveal batch</SheetTitle>
61-
</SheetHeader>
62-
<form
63-
className="mt-10 flex flex-col gap-6"
64-
id={REVEAL_FORM_ID}
65-
onSubmit={handleSubmit((data) => {
66-
trackEvent({
67-
category: "nft",
68-
action: "batch-upload-reveal",
69-
label: "attempt",
70-
});
47+
<Sheet open={open} onOpenChange={setOpen}>
48+
<SheetTrigger asChild>
49+
<Button colorScheme="primary" leftIcon={<EyeIcon className="size-4" />}>
50+
Reveal NFTs
51+
</Button>
52+
</SheetTrigger>
53+
<SheetContent className="z-[10000] overflow-y-auto sm:w-[540px] sm:max-w-[90%] lg:w-[700px]">
54+
<SheetHeader>
55+
<SheetTitle>Reveal batch</SheetTitle>
56+
</SheetHeader>
57+
<form
58+
className="mt-10 flex flex-col gap-6"
59+
id={REVEAL_FORM_ID}
60+
onSubmit={handleSubmit((data) => {
61+
trackEvent({
62+
category: "nft",
63+
action: "batch-upload-reveal",
64+
label: "attempt",
65+
});
7166

72-
const tx = reveal({
73-
contract,
74-
batchId: BigInt(data.batchId),
75-
password: data.password,
76-
});
67+
const tx = reveal({
68+
contract,
69+
batchId: BigInt(data.batchId),
70+
password: data.password,
71+
});
7772

78-
const promise = sendTxMutation.mutateAsync(tx, {
79-
onSuccess: () => {
80-
trackEvent({
81-
category: "nft",
82-
action: "batch-upload-reveal",
83-
label: "success",
84-
});
85-
setOpen(false);
86-
},
87-
onError: (error) => {
88-
console.error(error);
89-
trackEvent({
90-
category: "nft",
91-
action: "batch-upload-reveal",
92-
label: "error",
93-
});
94-
},
95-
});
73+
const promise = sendTxMutation.mutateAsync(tx, {
74+
onSuccess: () => {
75+
trackEvent({
76+
category: "nft",
77+
action: "batch-upload-reveal",
78+
label: "success",
79+
});
80+
setOpen(false);
81+
},
82+
onError: (error) => {
83+
console.error(error);
84+
trackEvent({
85+
category: "nft",
86+
action: "batch-upload-reveal",
87+
label: "error",
88+
});
89+
},
90+
});
9691

97-
toast.promise(promise, {
98-
loading: "Revealing batch",
99-
success: "Batch revealed successfully",
100-
error: "Failed to reveal batch",
101-
});
102-
})}
92+
toast.promise(promise, {
93+
loading: "Revealing batch",
94+
success: "Batch revealed successfully",
95+
error: "Failed to reveal batch",
96+
});
97+
})}
98+
>
99+
<FormControl isRequired isInvalid={!!errors.password} mr={4}>
100+
<FormLabel>Select a batch</FormLabel>
101+
<Select {...register("batchId")} autoFocus>
102+
{batchesQuery.data.map((batch) => (
103+
<option
104+
key={batch.batchId.toString()}
105+
value={batch.batchId.toString()}
106+
>
107+
{batch.placeholderMetadata?.name || batch.batchId.toString()}
108+
</option>
109+
))}
110+
</Select>
111+
<FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
112+
</FormControl>
113+
<FormControl isRequired isInvalid={!!errors.password} mr={4}>
114+
<FormLabel>Password</FormLabel>
115+
<Input
116+
{...register("password")}
117+
autoFocus
118+
placeholder="The one you used to upload this batch"
119+
type="password"
120+
/>
121+
<FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
122+
</FormControl>
123+
</form>
124+
<div className="mt-4 flex justify-end">
125+
<TransactionButton
126+
txChainID={contract.chain.id}
127+
transactionCount={1}
128+
isLoading={sendTxMutation.isPending}
129+
form={REVEAL_FORM_ID}
130+
type="submit"
131+
colorScheme="primary"
132+
isDisabled={!isDirty}
103133
>
104-
<FormControl isRequired isInvalid={!!errors.password} mr={4}>
105-
<FormLabel>Select a batch</FormLabel>
106-
<Select {...register("batchId")} autoFocus>
107-
{batchesQuery.data.map((batch) => (
108-
<option
109-
key={batch.batchId.toString()}
110-
value={batch.batchId.toString()}
111-
>
112-
{batch.placeholderMetadata?.name ||
113-
batch.batchId.toString()}
114-
</option>
115-
))}
116-
</Select>
117-
<FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
118-
</FormControl>
119-
<FormControl isRequired isInvalid={!!errors.password} mr={4}>
120-
<FormLabel>Password</FormLabel>
121-
<Input
122-
{...register("password")}
123-
autoFocus
124-
placeholder="The one you used to upload this batch"
125-
type="password"
126-
/>
127-
<FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
128-
</FormControl>
129-
</form>
130-
<div className="mt-4 flex justify-end">
131-
<TransactionButton
132-
txChainID={contract.chain.id}
133-
transactionCount={1}
134-
isLoading={sendTxMutation.isPending}
135-
form={REVEAL_FORM_ID}
136-
type="submit"
137-
colorScheme="primary"
138-
isDisabled={!isDirty}
139-
>
140-
Reveal NFTs
141-
</TransactionButton>
142-
</div>
143-
</SheetContent>
144-
</Sheet>
145-
</MinterOnly>
134+
Reveal NFTs
135+
</TransactionButton>
136+
</div>
137+
</SheetContent>
138+
</Sheet>
146139
) : null;
147140
};

‎apps/dashboard/src/contract-ui/tabs/nfts/components/reveal-button.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
"use client";
2+
3+
import {
4+
Sheet,
5+
SheetContent,
6+
SheetHeader,
7+
SheetTitle,
8+
SheetTrigger,
9+
} from "@/components/ui/sheet";
10+
import { FormControl, Input, Select } from "@chakra-ui/react";
11+
import { TransactionButton } from "components/buttons/TransactionButton";
12+
import { useTrack } from "hooks/analytics/useTrack";
13+
import { EyeIcon } from "lucide-react";
14+
import { useState } from "react";
15+
import { useForm } from "react-hook-form";
16+
import { toast } from "sonner";
17+
import type { ThirdwebContract } from "thirdweb";
18+
import { getBatchesToReveal, reveal } from "thirdweb/extensions/erc721";
19+
import { useReadContract, useSendAndConfirmTransaction } from "thirdweb/react";
20+
import { Button, FormErrorMessage, FormLabel } from "tw-components";
21+
22+
interface NFTRevealButtonProps {
23+
contract: ThirdwebContract;
24+
}
25+
26+
const REVEAL_FORM_ID = "reveal-form";
27+
28+
export const NFTRevealButton: React.FC<NFTRevealButtonProps> = ({
29+
contract,
30+
}) => {
31+
const batchesQuery = useReadContract(getBatchesToReveal, {
32+
contract,
33+
});
34+
const trackEvent = useTrack();
35+
36+
const sendTxMutation = useSendAndConfirmTransaction();
37+
38+
const {
39+
register,
40+
handleSubmit,
41+
formState: { errors, isDirty },
42+
} = useForm<{ batchId: string; password: string }>();
43+
44+
const [open, setOpen] = useState(false);
45+
46+
return batchesQuery.data?.length ? (
47+
<Sheet open={open} onOpenChange={setOpen}>
48+
<SheetTrigger asChild>
49+
<Button colorScheme="primary" leftIcon={<EyeIcon className="size-4" />}>
50+
Reveal NFTs
51+
</Button>
52+
</SheetTrigger>
53+
<SheetContent className="z-[10000] overflow-y-auto sm:w-[540px] sm:max-w-[90%] lg:w-[700px]">
54+
<SheetHeader>
55+
<SheetTitle>Reveal batch</SheetTitle>
56+
</SheetHeader>
57+
<form
58+
className="mt-10 flex flex-col gap-6"
59+
id={REVEAL_FORM_ID}
60+
onSubmit={handleSubmit((data) => {
61+
trackEvent({
62+
category: "nft",
63+
action: "batch-upload-reveal",
64+
label: "attempt",
65+
});
66+
67+
const tx = reveal({
68+
contract,
69+
batchId: BigInt(data.batchId),
70+
password: data.password,
71+
});
72+
73+
const promise = sendTxMutation.mutateAsync(tx, {
74+
onSuccess: () => {
75+
trackEvent({
76+
category: "nft",
77+
action: "batch-upload-reveal",
78+
label: "success",
79+
});
80+
setOpen(false);
81+
},
82+
onError: (error) => {
83+
console.error(error);
84+
trackEvent({
85+
category: "nft",
86+
action: "batch-upload-reveal",
87+
label: "error",
88+
});
89+
},
90+
});
91+
92+
toast.promise(promise, {
93+
loading: "Revealing batch",
94+
success: "Batch revealed successfully",
95+
error: "Failed to reveal batch",
96+
});
97+
})}
98+
>
99+
<FormControl isRequired isInvalid={!!errors.password} mr={4}>
100+
<FormLabel>Select a batch</FormLabel>
101+
<Select {...register("batchId")} autoFocus>
102+
{batchesQuery.data.map((batch) => (
103+
<option
104+
key={batch.batchId.toString()}
105+
value={batch.batchId.toString()}
106+
>
107+
{batch.placeholderMetadata?.name || batch.batchId.toString()}
108+
</option>
109+
))}
110+
</Select>
111+
<FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
112+
</FormControl>
113+
<FormControl isRequired isInvalid={!!errors.password} mr={4}>
114+
<FormLabel>Password</FormLabel>
115+
<Input
116+
{...register("password")}
117+
autoFocus
118+
placeholder="The one you used to upload this batch"
119+
type="password"
120+
/>
121+
<FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
122+
</FormControl>
123+
</form>
124+
<div className="mt-4 flex justify-end">
125+
<TransactionButton
126+
txChainID={contract.chain.id}
127+
transactionCount={1}
128+
isLoading={sendTxMutation.isPending}
129+
form={REVEAL_FORM_ID}
130+
type="submit"
131+
colorScheme="primary"
132+
isDisabled={!isDirty}
133+
>
134+
Reveal NFTs
135+
</TransactionButton>
136+
</div>
137+
</SheetContent>
138+
</Sheet>
139+
) : null;
140+
};

0 commit comments

Comments
 (0)