diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/CreatorInput.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/CreatorInput.tsx index 7333b30916c..8b889b73228 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/CreatorInput.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_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/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseNameInput.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseNameInput.tsx index 4b263939040..ce8476beb28 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseNameInput.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_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." > = ({ isERC20, }) => { return ( -
- - - {/* Info */} -
-

- Set Claim Conditions -

-

- Control when the {isERC20 ? "tokens" : "NFTs"} get dropped, how - much they cost, and more. -

-
+
+
+

+ Set Claim Conditions +

+

+ Control when the {isERC20 ? "tokens" : "NFTs"} get dropped, how much + they cost, and more. +

+
- {/* Set Claim Conditions */} - - - + {/* Set Claim Conditions */} +
); }; diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx index 75bff7e669b..0e0c688bac4 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx +++ b/apps/dashboard/src/app/(dashboard)/(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 = ({ 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 = ({ if (!contract) { return null; } + return ( - - { - // 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); - + + + + + + + Upload NFTs + + { + // 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} - /> - - + 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} + /> + + ); }; diff --git a/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx b/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx index db1f7afe024..02d56715aa6 100644 --- a/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx +++ b/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx @@ -4,7 +4,6 @@ import { Alert, AlertIcon, Box, - Container, Flex, FormControl, Input, @@ -24,7 +23,6 @@ import type { CreateDelayedRevealBatchParams } from "thirdweb/extensions/erc721" import type { NFTInput } from "thirdweb/utils"; import { Button, - Card, Checkbox, FormErrorMessage, FormHelperText, @@ -139,12 +137,10 @@ export const BatchLazyMint: ComponentWithChildren = ( const paginationPortalRef = useRef(null); return ( - { // first shuffle const shuffledMetadatas = data.shuffle @@ -188,146 +184,111 @@ export const BatchLazyMint: ComponentWithChildren = ( }); })} > - - - {step === 0 ? ( + {step === 0 ? ( +
+ {nftMetadatas.length > 0 ? ( <> - - Upload your NFTs - - - {nftMetadatas.length > 0 ? ( - - ) : ( - - )} - - - +
+
+ +
+ - - - - - - + Reset + + +
+
+
) : ( - <> - + )} +
+ ) : ( + <> + +
+ - - When will you reveal your NFTs? - -
- - - {form.watch("revealType") && ( - <> - - - - Shuffle the order of the NFTs before uploading. - - - This is an off-chain operation and is not provable. - - - - - - Upload {nftMetadatas.length} NFTs - - {props.children} - - - - Experiencing issues uploading your files? - + + + + When will you reveal your NFTs? + +
+ + + {form.watch("revealType") && ( + <> + + + Shuffle the order of the NFTs before uploading. + + This is an off-chain operation and is not provable. - - )} + + + + + Upload {nftMetadatas.length} NFTs + + {props.children} + + + + Experiencing issues uploading your files? + + )} - - - + + )} + ); }; diff --git a/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx b/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx index 568cb012668..8127e4a5cb1 100644 --- a/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx +++ b/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx @@ -1,7 +1,8 @@ +import { UnorderedList } from "@/components/ui/List/List"; import { InlineCode } from "@/components/ui/inline-code"; import { cn } from "@/lib/utils"; -import { Container, Flex, Link, UnorderedList } from "@chakra-ui/react"; import { UploadIcon } from "lucide-react"; +import Link from "next/link"; import { Heading, Text } from "tw-components"; interface UploadStepProps { @@ -20,117 +21,111 @@ export const UploadStep: React.FC = ({ getInputProps, }) => { return ( - - - -
-
+
+
+ +
+ - -
- - {isDragActive ? ( - - Drop the files here - - ) : ( - - {hasFailed - ? `No valid CSV or JSON file found. Please make sure your NFT metadata includes at least a "name" field and try again.` - : "Drag & Drop files or folders here, or click to select files"} - - )} -
-
+ /> + {isDragActive ? ( + + Drop the files here + + ) : ( + + {hasFailed + ? `No valid CSV or JSON file found. Please make sure your NFT metadata includes at least a "name" field and try again.` + : "Drag & Drop files or folders here, or click to select files"} + + )}
- - Requirements - -
  • - Files must contain one .csv or .json file with - metadata. -{" "} - - Download example.csv - - .{" "} - - Download example.json - - . -
    • -
  • - The csv must have a column, - which defines the name of the NFT. -
    • -
  • - Asset names must be sequential 0,1,2,3...n.[extension]. - It doesn't matter at what number you begin. (Example:{" "} - , - ). -
    • -
  • - Make sure to drag and drop the CSV/JSON and the images{" "} - at the same time. -
    • -     - - Options - - -
  • - Images and other file types can be used in combination. -
    - - They both have to follow the asset naming convention above. - (Example: and{" "} - , and{" "} - , etc.) - -
    • -
  • - When uploading files, we will upload them and pin them to IPFS - automatically for you. If you already have the files uploaded, - you can add an and/or - column and add the IPFS - hashes there. - - Download example.csv - -
    • -
  • - If you want to make your media files map to your NFTs, you can - add add the name of your files to the{" "} - and - column. - - Download example.csv - -
    • -     -     - - - +
    +
    +
    + Requirements + +
  • + Files must contain one .csv or .json file with metadata. -{" "} + + Download example.csv + + .{" "} + + Download example.json + + . +
    • +
  • + The csv must have a column, + which defines the name of the NFT. +
    • +
  • + Asset names must be sequential 0,1,2,3...n.[extension]. It + doesn't matter at what number you begin. (Example:{" "} + , + ). +
    • +
  • + Make sure to drag and drop the CSV/JSON and the images{" "} + at the same time. +
    • +     + + Options + + +
  • + Images and other file types can be used in combination. +
    + + They both have to follow the asset naming convention above. + (Example: and{" "} + , and{" "} + , etc.) + +
    • +
  • + When uploading files, we will upload them and pin them to IPFS + automatically for you. If you already have the files uploaded, you + can add an and/or + column and add the IPFS hashes + there. + + Download example.csv + +
    • +
  • + If you want to make your media files map to your NFTs, you can add + the name of your files to the and + column. + + Download example.csv + +
    • +     +
    +
    ); };