update

thirdweb-dev · Nov 1, 2024 · bec6e9d · bec6e9d
1 parent 7a9713e
commit bec6e9d
Show file tree

Hide file tree

Showing 6 changed files with 314 additions and 357 deletions.
diff --git a/...ntractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/CreatorInput.tsx b/...ntractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/CreatorInput.tsx
@@ -1,4 +1,4 @@
-import { Input } from "@chakra-ui/react";
+import { Input } from "@/components/ui/input";
 import { useActiveAccount } from "thirdweb/react";
 import { CustomFormControl } from "../common";
 import { useClaimConditionsFormContext } from "../index";

diff --git a/...ractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseNameInput.tsx b/...ractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseNameInput.tsx
@@ -1,4 +1,4 @@
-import { Input } from "@chakra-ui/react";
+import { Input } from "@/components/ui/input";
 import { CustomFormControl } from "../common";
 import { useClaimConditionsFormContext } from "../index";
 
@@ -18,7 +18,7 @@ export const PhaseNameInput: React.FC = () => {
       helperText="This does not affect how your claim phase functions and is for organizational purposes only."
     >
       <Input
-        isDisabled={formDisabled}
+        disabled={formDisabled}
         type="text"
         value={inputValue}
         placeholder={inputPlaceholder}

diff --git a/...d)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions.tsx b/...d)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { ClaimConditionsForm } from "./claim-conditions-form/index";
 
@@ -17,31 +16,26 @@ export const ClaimConditions: React.FC<ClaimConditionsProps> = ({
   isERC20,
 }) => {
   return (
-    <div className="flex w-full flex-col gap-8">
-      <Flex p={0} position="relative">
-        <Flex direction="column" gap={6} w="full">
-          {/* Info */}
-          <section>
-            <h2 className="mb-1 font-semibold text-xl tracking-tight">
-              Set Claim Conditions
-            </h2>
-            <p className="text-muted-foreground text-sm">
-              Control when the {isERC20 ? "tokens" : "NFTs"} get dropped, how
-              much they cost, and more.
-            </p>
-          </section>
+    <div className="flex w-full flex-col gap-6">
+      <section>
+        <h2 className="mb-1 font-semibold text-xl tracking-tight">
+          Set Claim Conditions
+        </h2>
+        <p className="text-muted-foreground text-sm">
+          Control when the {isERC20 ? "tokens" : "NFTs"} get dropped, how much
+          they cost, and more.
+        </p>
+      </section>
 
-          {/* Set Claim Conditions */}
-          <ClaimConditionsForm
-            isErc20={isERC20}
-            contract={contract}
-            tokenId={tokenId}
-            isColumn={isColumn}
-            // always multi phase!
-            isMultiPhase={true}
-          />
-        </Flex>
-      </Flex>
+      {/* Set Claim Conditions */}
+      <ClaimConditionsForm
+        isErc20={isERC20}
+        contract={contract}
+        tokenId={tokenId}
+        isColumn={isColumn}
+        // always multi phase!
+        isMultiPhase={true}
+      />
     </div>
   );
 };
diff --git a/...ashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx b/...ashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx
@@ -1,16 +1,23 @@
 "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 { BatchLazyMint } from "core-ui/batch-upload/batch-lazy-mint";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { FileStackIcon } from "lucide-react";
+import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
 import { useReadContract, useSendAndConfirmTransaction } from "thirdweb/react";
-import { Button, Drawer } from "tw-components";
+import { Button } from "tw-components";
 
 interface BatchLazyMintButtonProps {
   canCreateDelayedRevealBatch: boolean;
@@ -24,7 +31,7 @@ export const BatchLazyMintButton: React.FC<BatchLazyMintButtonProps> = ({
   isErc721,
 }) => {
   const trackEvent = useTrack();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [open, setOpen] = useState(false);
 
   const nextTokenIdToMintQuery = useReadContract(
     isErc721 ? ERC721Ext.nextTokenIdToMint : ERC1155Ext.nextTokenIdToMint,
@@ -43,88 +50,88 @@ export const BatchLazyMintButton: React.FC<BatchLazyMintButtonProps> = ({
   if (!contract) {
     return null;
   }
+
   return (
     <MinterOnly contract={contract}>
-      <Drawer
-        allowPinchZoom
-        preserveScrollBarGap
-        size="full"
-        onClose={onClose}
-        isOpen={isOpen}
-      >
-        <BatchLazyMint
-          chainId={contract.chain.id}
-          onSubmit={async ({ revealType, data }) => {
-            // nice, we can set up everything the same for both the only thing that changes is the action string
-            const action = `batch-upload-${revealType}` as const;
-
-            trackEvent({
-              category: "nft",
-              action,
-              label: "attempt",
-            });
-            try {
-              const tx = (() => {
-                switch (true) {
-                  // lazy mint erc721
-                  case revealType === "instant" && isErc721: {
-                    return ERC721Ext.lazyMint({
-                      contract,
-                      nfts: data.metadatas,
-                    });
-                  }
-                  // lazy mint erc1155
-                  case revealType === "instant" && !isErc721: {
-                    return ERC1155Ext.lazyMint({
-                      contract,
-                      nfts: data.metadatas,
-                    });
-                  }
-                  // delayed reveal erc721
-                  case revealType === "delayed": {
-                    return ERC721Ext.createDelayedRevealBatch({
-                      contract,
-                      metadata: data.metadata,
-                      password: data.password,
-                      placeholderMetadata: data.placeholderMetadata,
-                    });
-                  }
-                  default: {
-                    throw new Error("Invalid reveal type");
-                  }
-                }
-              })();
-
-              await sendTxMutation.mutateAsync(tx);
-
+      <Sheet onOpenChange={setOpen} open={open}>
+        <SheetTrigger asChild>
+          <Button
+            colorScheme="primary"
+            leftIcon={<FileStackIcon className="size-4" />}
+          >
+            Batch Upload
+          </Button>
+        </SheetTrigger>
+        <SheetContent className="min-w-full overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle className="text-left">Upload NFTs</SheetTitle>
+          </SheetHeader>
+          <BatchLazyMint
+            chainId={contract.chain.id}
+            onSubmit={async ({ revealType, data }) => {
+              // nice, we can set up everything the same for both the only thing that changes is the action string
+              const action = `batch-upload-${revealType}` as const;
               trackEvent({
                 category: "nft",
                 action,
-                label: "success",
+                label: "attempt",
               });
-              txNotifications.onSuccess();
-              onClose();
-            } catch (error) {
-              trackEvent({
-                category: "nft",
-                action,
-                label: "error",
-                error,
-              });
-              txNotifications.onError(error);
-            }
-          }}
-          nextTokenIdToMint={nextTokenIdToMintQuery.data || 0n}
-          canCreateDelayedRevealBatch={canCreateDelayedRevealBatch}
-        />
-      </Drawer>
-      <Button
-        colorScheme="primary"
-        leftIcon={<FileStackIcon className="size-4" />}
-        onClick={onOpen}
-      >
-        Batch Upload
-      </Button>
+              try {
+                const tx = (() => {
+                  switch (true) {
+                    // lazy mint erc721
+                    case revealType === "instant" && isErc721: {
+                      return ERC721Ext.lazyMint({
+                        contract,
+                        nfts: data.metadatas,
+                      });
+                    }
+                    // lazy mint erc1155
+                    case revealType === "instant" && !isErc721: {
+                      return ERC1155Ext.lazyMint({
+                        contract,
+                        nfts: data.metadatas,
+                      });
+                    }
+                    // delayed reveal erc721
+                    case revealType === "delayed": {
+                      return ERC721Ext.createDelayedRevealBatch({
+                        contract,
+                        metadata: data.metadata,
+                        password: data.password,
+                        placeholderMetadata: data.placeholderMetadata,
+                      });
+                    }
+                    default: {
+                      throw new Error("Invalid reveal type");
+                    }
+                  }
+                })();
+
+                await sendTxMutation.mutateAsync(tx);
+
+                trackEvent({
+                  category: "nft",
+                  action,
+                  label: "success",
+                });
+                txNotifications.onSuccess();
+                setOpen(false);
+              } catch (error) {
+                trackEvent({
+                  category: "nft",
+                  action,
+                  label: "error",
+                  error,
+                });
+                txNotifications.onError(error);
+              }
+            }}
+            nextTokenIdToMint={nextTokenIdToMintQuery.data || 0n}
+            canCreateDelayedRevealBatch={canCreateDelayedRevealBatch}
+          />
+        </SheetContent>
+      </Sheet>
     </MinterOnly>
   );
 };