[Dashboard] Remove Drawer from ERC1155 udpate-metadata form

Author: kien-ngo

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx

@@ -1,8 +1,14 @@
-import { Flex, useDisclosure } from "@chakra-ui/react";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { useState } from "react";
 import type { NFT, ThirdwebContract } from "thirdweb";
-import { Button, Drawer, Text } from "tw-components";
 import { UpdateNftMetadata } from "./update-metadata-form";
-
 interface UpdateMetadataTabProps {
   contract: ThirdwebContract;
   nft: NFT;
@@ -19,35 +25,25 @@ const UpdateMetadataTab: React.FC<UpdateMetadataTabProps> = ({
   nft,
   useUpdateMetadata,
 }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [open, setOpen] = useState(false);
 
   return (
-    <>
-      <Drawer
-        allowPinchZoom
-        preserveScrollBarGap
-        size="lg"
-        onClose={onClose}
-        isOpen={isOpen}
-      >
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant="primary">Update Metadata</Button>
+      </SheetTrigger>
+      <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
+        <SheetHeader>
+          <SheetTitle className="text-left">Mint NFT</SheetTitle>
+        </SheetHeader>
         <UpdateNftMetadata
           contract={contract}
           nft={nft}
           useUpdateMetadata={useUpdateMetadata}
+          setOpen={setOpen}
         />
-      </Drawer>
-      <Flex direction="column" gap={6}>
-        <Text>
-          You can update the metadata of this NFT at any time, this will only
-          change the representation of the NFT, not the owner or tokenId.
-        </Text>
-        <Flex justifyContent="right">
-          <Button colorScheme="primary" onClick={onOpen}>
-            Update Metadata
-          </Button>
-        </Flex>
-      </Flex>
-    </>
+      </SheetContent>
+    </Sheet>
   );
 };
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-tab.tsx

@@ -49,9 +49,9 @@ export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({ contract }) => {
           Claim
         </Button>
       </SheetTrigger>
-      <SheetContent className="z-[10000] overflow-y-auto sm:w-[540px] sm:max-w-[90%] lg:w-[700px]">
+      <SheetContent className="overflow-y-auto sm:w-[540px] sm:max-w-[90%] lg:w-[700px]">
         <SheetHeader>
-          <SheetTitle>Claim NFTs</SheetTitle>
+          <SheetTitle className="text-left">Claim NFTs</SheetTitle>
         </SheetHeader>
         <form className="mt-8 flex w-full flex-col gap-3 md:flex-row">
           <div className="flex w-full flex-col gap-6 md:flex-row">

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

@@ -43,7 +43,7 @@ export const TokenAirdropButton: React.FC<TokenAirdropButtonProps> = ({
       </SheetTrigger>
       <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
         <SheetHeader>
-          <SheetTitle>Aidrop tokens</SheetTitle>
+          <SheetTitle className="text-left">Aidrop tokens</SheetTitle>
         </SheetHeader>
         <TokenAirdropForm contract={contract} toggle={setOpen} />
       </SheetContent>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-button.tsx

@@ -69,7 +69,7 @@ export const TokenBurnButton: React.FC<TokenBurnButtonProps> = ({
       </SheetTrigger>
       <SheetContent className="z-[10000]">
         <SheetHeader>
-          <SheetTitle>Burn tokens</SheetTitle>
+          <SheetTitle className="text-left">Burn tokens</SheetTitle>
         </SheetHeader>
         <form className="mt-10 flex flex-col gap-3">
           <div className="flex w-full flex-col gap-6 md:flex-row">

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/burn-button.tsx

@@ -62,7 +62,7 @@ export const TokenClaimButton: React.FC<TokenClaimButtonProps> = ({
       </SheetTrigger>
       <SheetContent className="z-[10000]">
         <SheetHeader>
-          <SheetTitle>Claim tokens</SheetTitle>
+          <SheetTitle className="text-left">Claim tokens</SheetTitle>
         </SheetHeader>
         <form>
           <div className="mt-10 flex flex-col gap-6">

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/claim-button.tsx

@@ -60,7 +60,9 @@ export const TokenMintButton: React.FC<TokenMintButtonProps> = ({
         </SheetTrigger>
         <SheetContent className="z-[10000]">
           <SheetHeader>
-            <SheetTitle>Mint additional tokens</SheetTitle>
+            <SheetTitle className="text-left">
+              Mint additional tokens
+            </SheetTitle>
           </SheetHeader>
           <form
             className="mt-10 flex flex-col gap-6"

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/mint-button.tsx

@@ -67,7 +67,7 @@ export const TokenTransferButton: React.FC<TokenTransferButtonProps> = ({
       </SheetTrigger>
       <SheetContent className="z-[10000]">
         <SheetHeader>
-          <SheetTitle>Transfer tokens</SheetTitle>
+          <SheetTitle className="text-left">Transfer tokens</SheetTitle>
         </SheetHeader>
         <form className="mt-10">
           <div className="flex flex-col gap-6">