diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx index 30c1fb87cb0..e7cdbf7d56f 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx @@ -7,7 +7,6 @@ import { SheetTitle, SheetTrigger, } from "@/components/ui/sheet"; -import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only"; import { FormControl, Input, Select } from "@chakra-ui/react"; import { TransactionButton } from "components/buttons/TransactionButton"; import { useTrack } from "hooks/analytics/useTrack"; @@ -45,103 +44,97 @@ export const NFTRevealButton: React.FC = ({ const [open, setOpen] = useState(false); return batchesQuery.data?.length ? ( - - - - - - - - Reveal batch - -
{ - trackEvent({ - category: "nft", - action: "batch-upload-reveal", - label: "attempt", - }); + + + + + + + Reveal batch + + { + trackEvent({ + category: "nft", + action: "batch-upload-reveal", + label: "attempt", + }); - const tx = reveal({ - contract, - batchId: BigInt(data.batchId), - password: data.password, - }); + const tx = reveal({ + contract, + batchId: BigInt(data.batchId), + password: data.password, + }); - const promise = sendTxMutation.mutateAsync(tx, { - onSuccess: () => { - trackEvent({ - category: "nft", - action: "batch-upload-reveal", - label: "success", - }); - setOpen(false); - }, - onError: (error) => { - console.error(error); - trackEvent({ - category: "nft", - action: "batch-upload-reveal", - label: "error", - }); - }, - }); + const promise = sendTxMutation.mutateAsync(tx, { + onSuccess: () => { + trackEvent({ + category: "nft", + action: "batch-upload-reveal", + label: "success", + }); + setOpen(false); + }, + onError: (error) => { + console.error(error); + trackEvent({ + category: "nft", + action: "batch-upload-reveal", + label: "error", + }); + }, + }); - toast.promise(promise, { - loading: "Revealing batch", - success: "Batch revealed successfully", - error: "Failed to reveal batch", - }); - })} + toast.promise(promise, { + loading: "Revealing batch", + success: "Batch revealed successfully", + error: "Failed to reveal batch", + }); + })} + > + + Select a batch + + {errors?.password?.message} + + + Password + + {errors?.password?.message} + + +
+ - - Select a batch - - {errors?.password?.message} - - - Password - - {errors?.password?.message} - - -
- - Reveal NFTs - -
- - - + Reveal NFTs +
+
+
+
) : null; }; diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/reveal-button.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/reveal-button.tsx new file mode 100644 index 00000000000..e7cdbf7d56f --- /dev/null +++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/reveal-button.tsx @@ -0,0 +1,140 @@ +"use client"; + +import { + Sheet, + SheetContent, + SheetHeader, + SheetTitle, + SheetTrigger, +} from "@/components/ui/sheet"; +import { FormControl, Input, Select } from "@chakra-ui/react"; +import { TransactionButton } from "components/buttons/TransactionButton"; +import { useTrack } from "hooks/analytics/useTrack"; +import { EyeIcon } from "lucide-react"; +import { useState } from "react"; +import { useForm } from "react-hook-form"; +import { toast } from "sonner"; +import type { ThirdwebContract } from "thirdweb"; +import { getBatchesToReveal, reveal } from "thirdweb/extensions/erc721"; +import { useReadContract, useSendAndConfirmTransaction } from "thirdweb/react"; +import { Button, FormErrorMessage, FormLabel } from "tw-components"; + +interface NFTRevealButtonProps { + contract: ThirdwebContract; +} + +const REVEAL_FORM_ID = "reveal-form"; + +export const NFTRevealButton: React.FC = ({ + contract, +}) => { + const batchesQuery = useReadContract(getBatchesToReveal, { + contract, + }); + const trackEvent = useTrack(); + + const sendTxMutation = useSendAndConfirmTransaction(); + + const { + register, + handleSubmit, + formState: { errors, isDirty }, + } = useForm<{ batchId: string; password: string }>(); + + const [open, setOpen] = useState(false); + + return batchesQuery.data?.length ? ( + + + + + + + Reveal batch + +
{ + trackEvent({ + category: "nft", + action: "batch-upload-reveal", + label: "attempt", + }); + + const tx = reveal({ + contract, + batchId: BigInt(data.batchId), + password: data.password, + }); + + const promise = sendTxMutation.mutateAsync(tx, { + onSuccess: () => { + trackEvent({ + category: "nft", + action: "batch-upload-reveal", + label: "success", + }); + setOpen(false); + }, + onError: (error) => { + console.error(error); + trackEvent({ + category: "nft", + action: "batch-upload-reveal", + label: "error", + }); + }, + }); + + toast.promise(promise, { + loading: "Revealing batch", + success: "Batch revealed successfully", + error: "Failed to reveal batch", + }); + })} + > + + Select a batch + + {errors?.password?.message} + + + Password + + {errors?.password?.message} + +
+
+ + Reveal NFTs + +
+
+
+ ) : null; +}; diff --git a/packages/thirdweb/src/extensions/erc721/lazyMinting/read/getBatchesToReveal.ts b/packages/thirdweb/src/extensions/erc721/lazyMinting/read/getBatchesToReveal.ts index 94de17c6628..ef2c6985f68 100644 --- a/packages/thirdweb/src/extensions/erc721/lazyMinting/read/getBatchesToReveal.ts +++ b/packages/thirdweb/src/extensions/erc721/lazyMinting/read/getBatchesToReveal.ts @@ -82,7 +82,7 @@ export async function getBatchesToReveal( tokenId: BigInt(i), tokenUri: uri, client: options.contract.client, - }); + }).catch(() => undefined); }), ); @@ -111,12 +111,18 @@ export async function getBatchesToReveal( }); return tokenMetadatas - .map((metadata, i) => ({ - batchId: BigInt(i), - batchUri: encryptedBaseUris[i] as Hex, - placeholderMetadata: metadata, - })) - .filter((_, index) => (encryptedBaseUris[index]?.length || 0) > 0); + .map((metadata, i) => { + if (metadata === undefined) { + return; + } + return { + batchId: BigInt(i), + batchUri: encryptedBaseUris[i] as Hex, + placeholderMetadata: metadata, + }; + }) + .filter((_, index) => (encryptedBaseUris[index]?.length || 0) > 0) + .filter((item) => item !== undefined); } /**