Skip to content

Commit 21d794c

Browse files
kien-ngokien-ngo
committed
[Dashboard] Remove chakra: BatchUpload drawer + other minor changes (#5259)
Made the BatchUpload drawer more clean looking basically <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on improving the `ClaimConditions` and `BatchLazyMint` components in the dashboard by refining input handling, restructuring layouts, and enhancing user interaction through better feedback and state management. ### Detailed summary - Changed `isDisabled` prop to `disabled` in `PhaseNameInput`. - Restructured layout in `ClaimConditions` for better spacing and organization. - Updated `BatchLazyMintButton` to use `Sheet` instead of `Drawer`. - Improved state management in `BatchLazyMintButton` for opening and closing the sheet. - Refactored `BatchLazyMint` to use a `<form>` instead of `<Container>`. - Simplified file upload instructions and requirements in `UploadStep`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent e3c0af2 commit 21d794c

File tree

6 files changed

+312
-357
lines changed

6 files changed

+312
-357
lines changed

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/CreatorInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Input } from "@chakra-ui/react";
1+
import { Input } from "@/components/ui/input";
22
import { useActiveAccount } from "thirdweb/react";
33
import { CustomFormControl } from "../common";
44
import { useClaimConditionsFormContext } from "../index";

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/PhaseNameInput.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Input } from "@chakra-ui/react";
1+
import { Input } from "@/components/ui/input";
22
import { CustomFormControl } from "../common";
33
import { useClaimConditionsFormContext } from "../index";
44

@@ -18,7 +18,7 @@ export const PhaseNameInput: React.FC = () => {
1818
helperText="This does not affect how your claim phase functions and is for organizational purposes only."
1919
>
2020
<Input
21-
isDisabled={formDisabled}
21+
disabled={formDisabled}
2222
type="text"
2323
value={inputValue}
2424
placeholder={inputPlaceholder}

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions.tsx‎

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use client";
22

3-
import { Flex } from "@chakra-ui/react";
43
import type { ThirdwebContract } from "thirdweb";
54
import { ClaimConditionsForm } from "./claim-conditions-form/index";
65

@@ -17,31 +16,26 @@ export const ClaimConditions: React.FC<ClaimConditionsProps> = ({
1716
isERC20,
1817
}) => {
1918
return (
20-
<div className="flex w-full flex-col gap-8">
21-
<Flex p={0} position="relative">
22-
<Flex direction="column" gap={6} w="full">
23-
{/* Info */}
24-
<section>
25-
<h2 className="mb-1 font-semibold text-xl tracking-tight">
26-
Set Claim Conditions
27-
</h2>
28-
<p className="text-muted-foreground text-sm">
29-
Control when the {isERC20 ? "tokens" : "NFTs"} get dropped, how
30-
much they cost, and more.
31-
</p>
32-
</section>
19+
<div className="flex w-full flex-col gap-6">
20+
<section>
21+
<h2 className="mb-1 font-semibold text-xl tracking-tight">
22+
Set Claim Conditions
23+
</h2>
24+
<p className="text-muted-foreground text-sm">
25+
Control when the {isERC20 ? "tokens" : "NFTs"} get dropped, how much
26+
they cost, and more.
27+
</p>
28+
</section>
3329

34-
{/* Set Claim Conditions */}
35-
<ClaimConditionsForm
36-
isErc20={isERC20}
37-
contract={contract}
38-
tokenId={tokenId}
39-
isColumn={isColumn}
40-
// always multi phase!
41-
isMultiPhase={true}
42-
/>
43-
</Flex>
44-
</Flex>
30+
{/* Set Claim Conditions */}
31+
<ClaimConditionsForm
32+
isErc20={isERC20}
33+
contract={contract}
34+
tokenId={tokenId}
35+
isColumn={isColumn}
36+
// always multi phase!
37+
isMultiPhase={true}
38+
/>
4539
</div>
4640
);
4741
};

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-lazy-mint-button.tsx‎

Lines changed: 86 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
"use client";
22

3+
import {
4+
Sheet,
5+
SheetContent,
6+
SheetHeader,
7+
SheetTitle,
8+
SheetTrigger,
9+
} from "@/components/ui/sheet";
310
import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
4-
import { useDisclosure } from "@chakra-ui/react";
511
import { BatchLazyMint } from "core-ui/batch-upload/batch-lazy-mint";
612
import { useTrack } from "hooks/analytics/useTrack";
713
import { useTxNotifications } from "hooks/useTxNotifications";
814
import { FileStackIcon } from "lucide-react";
15+
import { useState } from "react";
916
import type { ThirdwebContract } from "thirdweb";
1017
import * as ERC721Ext from "thirdweb/extensions/erc721";
1118
import * as ERC1155Ext from "thirdweb/extensions/erc1155";
1219
import { useReadContract, useSendAndConfirmTransaction } from "thirdweb/react";
13-
import { Button, Drawer } from "tw-components";
20+
import { Button } from "tw-components";
1421

1522
interface BatchLazyMintButtonProps {
1623
canCreateDelayedRevealBatch: boolean;
@@ -24,7 +31,7 @@ export const BatchLazyMintButton: React.FC<BatchLazyMintButtonProps> = ({
2431
isErc721,
2532
}) => {
2633
const trackEvent = useTrack();
27-
const { isOpen, onOpen, onClose } = useDisclosure();
34+
const [open, setOpen] = useState(false);
2835

2936
const nextTokenIdToMintQuery = useReadContract(
3037
isErc721 ? ERC721Ext.nextTokenIdToMint : ERC1155Ext.nextTokenIdToMint,
@@ -43,88 +50,88 @@ export const BatchLazyMintButton: React.FC<BatchLazyMintButtonProps> = ({
4350
if (!contract) {
4451
return null;
4552
}
53+
4654
return (
4755
<MinterOnly contract={contract}>
48-
<Drawer
49-
allowPinchZoom
50-
preserveScrollBarGap
51-
size="full"
52-
onClose={onClose}
53-
isOpen={isOpen}
54-
>
55-
<BatchLazyMint
56-
chainId={contract.chain.id}
57-
onSubmit={async ({ revealType, data }) => {
58-
// nice, we can set up everything the same for both the only thing that changes is the action string
59-
const action = `batch-upload-${revealType}` as const;
60-
61-
trackEvent({
62-
category: "nft",
63-
action,
64-
label: "attempt",
65-
});
66-
try {
67-
const tx = (() => {
68-
switch (true) {
69-
// lazy mint erc721
70-
case revealType === "instant" && isErc721: {
71-
return ERC721Ext.lazyMint({
72-
contract,
73-
nfts: data.metadatas,
74-
});
75-
}
76-
// lazy mint erc1155
77-
case revealType === "instant" && !isErc721: {
78-
return ERC1155Ext.lazyMint({
79-
contract,
80-
nfts: data.metadatas,
81-
});
82-
}
83-
// delayed reveal erc721
84-
case revealType === "delayed": {
85-
return ERC721Ext.createDelayedRevealBatch({
86-
contract,
87-
metadata: data.metadata,
88-
password: data.password,
89-
placeholderMetadata: data.placeholderMetadata,
90-
});
91-
}
92-
default: {
93-
throw new Error("Invalid reveal type");
94-
}
95-
}
96-
})();
97-
98-
await sendTxMutation.mutateAsync(tx);
99-
56+
<Sheet onOpenChange={setOpen} open={open}>
57+
<SheetTrigger asChild>
58+
<Button
59+
colorScheme="primary"
60+
leftIcon={<FileStackIcon className="size-4" />}
61+
>
62+
Batch Upload
63+
</Button>
64+
</SheetTrigger>
65+
<SheetContent className="min-w-full overflow-y-auto">
66+
<SheetHeader>
67+
<SheetTitle className="text-left">Upload NFTs</SheetTitle>
68+
</SheetHeader>
69+
<BatchLazyMint
70+
chainId={contract.chain.id}
71+
onSubmit={async ({ revealType, data }) => {
72+
// nice, we can set up everything the same for both the only thing that changes is the action string
73+
const action = `batch-upload-${revealType}` as const;
10074
trackEvent({
10175
category: "nft",
10276
action,
103-
label: "success",
77+
label: "attempt",
10478
});
105-
txNotifications.onSuccess();
106-
onClose();
107-
} catch (error) {
108-
trackEvent({
109-
category: "nft",
110-
action,
111-
label: "error",
112-
error,
113-
});
114-
txNotifications.onError(error);
115-
}
116-
}}
117-
nextTokenIdToMint={nextTokenIdToMintQuery.data || 0n}
118-
canCreateDelayedRevealBatch={canCreateDelayedRevealBatch}
119-
/>
120-
</Drawer>
121-
<Button
122-
colorScheme="primary"
123-
leftIcon={<FileStackIcon className="size-4" />}
124-
onClick={onOpen}
125-
>
126-
Batch Upload
127-
</Button>
79+
try {
80+
const tx = (() => {
81+
switch (true) {
82+
// lazy mint erc721
83+
case revealType === "instant" && isErc721: {
84+
return ERC721Ext.lazyMint({
85+
contract,
86+
nfts: data.metadatas,
87+
});
88+
}
89+
// lazy mint erc1155
90+
case revealType === "instant" && !isErc721: {
91+
return ERC1155Ext.lazyMint({
92+
contract,
93+
nfts: data.metadatas,
94+
});
95+
}
96+
// delayed reveal erc721
97+
case revealType === "delayed": {
98+
return ERC721Ext.createDelayedRevealBatch({
99+
contract,
100+
metadata: data.metadata,
101+
password: data.password,
102+
placeholderMetadata: data.placeholderMetadata,
103+
});
104+
}
105+
default: {
106+
throw new Error("Invalid reveal type");
107+
}
108+
}
109+
})();
110+
111+
await sendTxMutation.mutateAsync(tx);
112+
113+
trackEvent({
114+
category: "nft",
115+
action,
116+
label: "success",
117+
});
118+
txNotifications.onSuccess();
119+
setOpen(false);
120+
} catch (error) {
121+
trackEvent({
122+
category: "nft",
123+
action,
124+
label: "error",
125+
error,
126+
});
127+
txNotifications.onError(error);
128+
}
129+
}}
130+
nextTokenIdToMint={nextTokenIdToMintQuery.data || 0n}
131+
canCreateDelayedRevealBatch={canCreateDelayedRevealBatch}
132+
/>
133+
</SheetContent>
134+
</Sheet>
128135
</MinterOnly>
129136
);
130137
};

0 commit comments

Comments
 (0)