From 715000a5c0759ad1419f5082e2d0f5377244ba43 Mon Sep 17 00:00:00 2001
From: Kien Ngo <github@kien.ngo>
Date: Sun, 6 Oct 2024 10:41:57 +0700
Subject: [PATCH] [Dashboard] Replace Reveal-NFT Drawer with Sheet

---
 .../tabs/nfts/components/reveal-button.tsx    | 150 +++++++++++++++---
 .../tabs/nfts/components/reveal-form.tsx      | 133 ----------------
 2 files changed, 125 insertions(+), 158 deletions(-)
 delete mode 100644 apps/dashboard/src/contract-ui/tabs/nfts/components/reveal-form.tsx

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
index 76b596a48ac..66954e163d0 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/reveal-button.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/reveal-button.tsx
@@ -1,46 +1,146 @@
 "use client";
 
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
-import { useDisclosure } from "@chakra-ui/react";
+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 } from "thirdweb/extensions/erc721";
-import { useReadContract } from "thirdweb/react";
-import { Button, Drawer } from "tw-components";
-import { NFTRevealForm } from "./reveal-form";
+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<NFTRevealButtonProps> = ({
   contract,
 }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
   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 ? (
     <MinterOnly contract={contract}>
-      <Drawer
-        allowPinchZoom
-        preserveScrollBarGap
-        size="lg"
-        onClose={onClose}
-        isOpen={isOpen}
-      >
-        <NFTRevealForm
-          contract={contract}
-          batchesToReveal={batchesQuery.data}
-        />
-      </Drawer>
-      <Button
-        colorScheme="primary"
-        leftIcon={<EyeIcon className="size-4" />}
-        onClick={onOpen}
-      >
-        Reveal NFTs
-      </Button>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetTrigger asChild>
+          <Button
+            colorScheme="primary"
+            leftIcon={<EyeIcon className="size-4" />}
+          >
+            Reveal NFTs
+          </Button>
+        </SheetTrigger>
+        <SheetContent className="z-[10000] overflow-y-auto sm:w-[540px] sm:max-w-[90%] lg:w-[700px]">
+          <SheetHeader>
+            <SheetTitle>Reveal batch</SheetTitle>
+          </SheetHeader>
+          <form
+            className="mt-10 flex flex-col gap-6"
+            id={REVEAL_FORM_ID}
+            onSubmit={handleSubmit((data) => {
+              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",
+                  });
+                },
+                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",
+              });
+            })}
+          >
+            <FormControl isRequired isInvalid={!!errors.password} mr={4}>
+              <FormLabel>Select a batch</FormLabel>
+              <Select {...register("batchId")} autoFocus>
+                {batchesQuery.data.map((batch) => (
+                  <option
+                    key={batch.batchId.toString()}
+                    value={batch.batchId.toString()}
+                  >
+                    {batch.placeholderMetadata?.name ||
+                      batch.batchId.toString()}
+                  </option>
+                ))}
+              </Select>
+              <FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
+            </FormControl>
+            <FormControl isRequired isInvalid={!!errors.password} mr={4}>
+              <FormLabel>Password</FormLabel>
+              <Input
+                {...register("password")}
+                autoFocus
+                placeholder="The one you used to upload this batch"
+                type="password"
+              />
+              <FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
+            </FormControl>
+          </form>
+          <div className="mt-4 flex justify-end">
+            <TransactionButton
+              txChainID={contract.chain.id}
+              transactionCount={1}
+              isLoading={sendTxMutation.isPending}
+              form={REVEAL_FORM_ID}
+              type="submit"
+              colorScheme="primary"
+              isDisabled={!isDirty}
+            >
+              Reveal NFTs
+            </TransactionButton>
+          </div>
+        </SheetContent>
+      </Sheet>
     </MinterOnly>
   ) : null;
 };
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/reveal-form.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/reveal-form.tsx
deleted file mode 100644
index 18558d6f0e4..00000000000
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/reveal-form.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-"use client";
-
-import {
-  DrawerBody,
-  DrawerFooter,
-  DrawerHeader,
-  FormControl,
-  Input,
-  Select,
-  useModalContext,
-} from "@chakra-ui/react";
-import { TransactionButton } from "components/buttons/TransactionButton";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { useForm } from "react-hook-form";
-import type { ThirdwebContract } from "thirdweb";
-import { type BatchToReveal, reveal } from "thirdweb/extensions/erc721";
-import { useSendAndConfirmTransaction } from "thirdweb/react";
-import { FormErrorMessage, FormLabel, Heading } from "tw-components";
-
-const REVEAL_FORM_ID = "reveal-form";
-
-interface NFTRevealFormProps {
-  contract: ThirdwebContract;
-  batchesToReveal: BatchToReveal[];
-}
-
-export const NFTRevealForm: React.FC<NFTRevealFormProps> = ({
-  contract,
-  batchesToReveal,
-}) => {
-  const trackEvent = useTrack();
-
-  const sendTxMutation = useSendAndConfirmTransaction();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isDirty },
-  } = useForm<{ batchId: string; password: string }>();
-  const modalContext = useModalContext();
-
-  const { onSuccess, onError } = useTxNotifications(
-    "Batch revealed successfully",
-    "Error revealing batch upload",
-    contract,
-  );
-
-  return (
-    <>
-      <DrawerHeader>
-        <Heading>Reveal batch</Heading>
-      </DrawerHeader>
-      <DrawerBody>
-        <form
-          className="flex flex-col gap-6"
-          id={REVEAL_FORM_ID}
-          onSubmit={handleSubmit((data) => {
-            trackEvent({
-              category: "nft",
-              action: "batch-upload-reveal",
-              label: "attempt",
-            });
-
-            const tx = reveal({
-              contract,
-              batchId: BigInt(data.batchId),
-              password: data.password,
-            });
-
-            sendTxMutation.mutate(tx, {
-              onSuccess: () => {
-                trackEvent({
-                  category: "nft",
-                  action: "batch-upload-reveal",
-                  label: "success",
-                });
-                onSuccess();
-                modalContext.onClose();
-              },
-              onError: (error) => {
-                trackEvent({
-                  category: "nft",
-                  action: "batch-upload-reveal",
-                  label: "error",
-                });
-                onError(error);
-              },
-            });
-          })}
-        >
-          <FormControl isRequired isInvalid={!!errors.password} mr={4}>
-            <FormLabel>Select a batch</FormLabel>
-            <Select {...register("batchId")} autoFocus>
-              {batchesToReveal.map((batch) => (
-                <option
-                  key={batch.batchId.toString()}
-                  value={batch.batchId.toString()}
-                >
-                  {batch.placeholderMetadata?.name || batch.batchId.toString()}
-                </option>
-              ))}
-            </Select>
-            <FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
-          </FormControl>
-          <FormControl isRequired isInvalid={!!errors.password} mr={4}>
-            <FormLabel>Password</FormLabel>
-            <Input
-              {...register("password")}
-              autoFocus
-              placeholder="The one you used to upload this batch"
-              type="password"
-            />
-            <FormErrorMessage>{errors?.password?.message}</FormErrorMessage>
-          </FormControl>
-        </form>
-      </DrawerBody>
-      <DrawerFooter>
-        <TransactionButton
-          txChainID={contract.chain.id}
-          transactionCount={1}
-          isLoading={sendTxMutation.isPending}
-          form={REVEAL_FORM_ID}
-          type="submit"
-          colorScheme="primary"
-          isDisabled={!isDirty}
-        >
-          Reveal NFTs
-        </TransactionButton>
-      </DrawerFooter>
-    </>
-  );
-};