Skip to content

Commit 136cc6f

Browse files
kien-ngokien-ngo
committed
Update
1 parent 343999d commit 136cc6f

File tree

6 files changed

+107
-85
lines changed

6 files changed

+107
-85
lines changed

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/mint-supply-tab.tsx‎

Lines changed: 107 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,137 @@
11
"use client";
22

3-
import { FormControl, Input } from "@chakra-ui/react";
3+
import {
4+
Form,
5+
FormControl,
6+
FormDescription,
7+
FormField,
8+
FormItem,
9+
FormLabel,
10+
FormMessage,
11+
} from "@/components/ui/form";
12+
import { Input } from "@/components/ui/input";
13+
import { zodResolver } from "@hookform/resolvers/zod";
414
import { TransactionButton } from "components/buttons/TransactionButton";
515
import { useTrack } from "hooks/analytics/useTrack";
616
import { useForm } from "react-hook-form";
717
import { toast } from "sonner";
8-
import type { ThirdwebContract } from "thirdweb";
18+
import { type ThirdwebContract, isAddress } from "thirdweb";
919
import { mintAdditionalSupplyTo } from "thirdweb/extensions/erc1155";
1020
import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
11-
import { FormErrorMessage, FormHelperText, FormLabel } from "tw-components";
21+
import { z } from "zod";
1222

1323
interface MintSupplyTabProps {
1424
contract: ThirdwebContract;
1525
tokenId: string;
1626
}
1727

18-
// Intended for Edition contracts (not Edition Drop)
28+
const mintAdditionalSupplyFormSchema = z.object({
29+
to: z.string().refine((value) => isAddress(value), {
30+
message: "Invalid Ethereum address",
31+
}),
32+
amount: z.number().int().min(1, "Amount must be at least 1"),
33+
});
34+
1935
const MintSupplyTab: React.FC<MintSupplyTabProps> = ({ contract, tokenId }) => {
2036
const trackEvent = useTrack();
2137
const address = useActiveAccount()?.address;
22-
const {
23-
register,
24-
handleSubmit,
25-
formState: { errors },
26-
reset,
27-
} = useForm<{ to: string; amount: string }>({
28-
defaultValues: { amount: "1", to: address },
38+
39+
const form = useForm<z.input<typeof mintAdditionalSupplyFormSchema>>({
40+
resolver: zodResolver(mintAdditionalSupplyFormSchema),
41+
defaultValues: {
42+
amount: 1,
43+
to: address || "",
44+
},
2945
});
3046

31-
const { mutateAsync, isPending } = useSendAndConfirmTransaction();
47+
const sendAndConfirmTx = useSendAndConfirmTransaction();
3248

33-
return (
34-
<form
35-
className="flex w-full flex-col gap-2"
36-
onSubmit={handleSubmit((data) => {
37-
if (!data.to) {
38-
return toast.error(
39-
"Please enter the wallet address of the recipient.",
40-
);
41-
}
49+
function onSubmit(values: z.input<typeof mintAdditionalSupplyFormSchema>) {
50+
trackEvent({
51+
category: "nft",
52+
action: "mint-supply",
53+
label: "attempt",
54+
});
55+
const transaction = mintAdditionalSupplyTo({
56+
contract,
57+
to: values.to,
58+
tokenId: BigInt(tokenId),
59+
supply: BigInt(values.amount),
60+
});
61+
const promise = sendAndConfirmTx.mutateAsync(transaction, {
62+
onSuccess: () => {
4263
trackEvent({
4364
category: "nft",
4465
action: "mint-supply",
45-
label: "attempt",
66+
label: "success",
4667
});
47-
const transaction = mintAdditionalSupplyTo({
48-
contract,
49-
to: data.to,
50-
tokenId: BigInt(tokenId),
51-
supply: BigInt(data.amount),
52-
});
53-
const promise = mutateAsync(transaction, {
54-
onSuccess: () => {
55-
trackEvent({
56-
category: "nft",
57-
action: "mint-supply",
58-
label: "success",
59-
});
60-
reset();
61-
},
62-
onError: (error) => {
63-
trackEvent({
64-
category: "nft",
65-
action: "mint-supply",
66-
label: "error",
67-
error,
68-
});
69-
console.error(error);
70-
},
71-
});
72-
toast.promise(promise, {
73-
loading: "Minting additional supply",
74-
success: "NFT(s) minted successfully",
75-
error: "Failed to mint NFT(s)",
68+
form.reset();
69+
},
70+
onError: (error) => {
71+
trackEvent({
72+
category: "nft",
73+
action: "mint-supply",
74+
label: "error",
75+
error,
7676
});
77-
})}
78-
>
79-
<div className="flex w-full flex-col gap-6 md:flex-row">
80-
<FormControl isRequired isInvalid={!!errors.to}>
81-
<FormLabel>Amount</FormLabel>
82-
<Input placeholder="1" {...register("amount")} min={1} />
83-
<FormHelperText>How many would you like to mint?</FormHelperText>
84-
<FormLabel className="mt-3">Recipient</FormLabel>
85-
<Input
86-
placeholder="0x..."
87-
defaultValue={address || ""}
88-
{...register("to")}
89-
/>
90-
<FormHelperText>
91-
Address to receive the NFT(s) - Defaults to your own wallet
92-
</FormHelperText>
93-
<FormErrorMessage>{errors.to?.message}</FormErrorMessage>
94-
</FormControl>
95-
</div>
77+
},
78+
});
79+
toast.promise(promise, {
80+
loading: "Minting NFT",
81+
success: "Minted successfully",
82+
error: "Failed to mint",
83+
});
84+
}
9685

97-
<TransactionButton
98-
txChainID={contract.chain.id}
99-
transactionCount={1}
100-
isLoading={isPending}
101-
type="submit"
102-
colorScheme="primary"
103-
alignSelf="flex-end"
86+
return (
87+
<Form {...form}>
88+
<form
89+
onSubmit={form.handleSubmit(onSubmit)}
90+
className="flex w-full flex-col gap-2"
10491
>
105-
Mint
106-
</TransactionButton>
107-
</form>
92+
<FormField
93+
control={form.control}
94+
name="amount"
95+
render={({ field }) => (
96+
<FormItem>
97+
<FormLabel>Amount</FormLabel>
98+
<FormControl>
99+
<Input {...field} />
100+
</FormControl>
101+
<FormDescription>
102+
How many would you like to mint?
103+
</FormDescription>
104+
<FormMessage />
105+
</FormItem>
106+
)}
107+
/>
108+
109+
<FormField
110+
control={form.control}
111+
name="to"
112+
render={({ field }) => (
113+
<FormItem>
114+
<FormLabel>Recipient</FormLabel>
115+
<FormControl>
116+
<Input {...field} />
117+
</FormControl>
118+
<FormMessage />
119+
</FormItem>
120+
)}
121+
/>
122+
123+
<TransactionButton
124+
txChainID={contract.chain.id}
125+
transactionCount={1}
126+
isLoading={sendAndConfirmTx.isPending}
127+
type="submit"
128+
colorScheme="primary"
129+
alignSelf="flex-end"
130+
>
131+
Mint
132+
</TransactionButton>
133+
</form>
134+
</Form>
108135
);
109136
};
110137

‎packages/thirdweb/src/extensions/erc1155/write/mintTo.test.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import {} from "viem";
21
import { describe, expect, it } from "vitest";
32
import { ANVIL_CHAIN } from "~test/chains.js";
43
import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";

‎packages/thirdweb/src/extensions/modules/BatchMetadataERC1155/uploadMetadata.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { BaseTransactionOptions } from "../../../transaction/types.js";
2-
import {} from "../../../utils/ipfs.js";
32
import {
43
type UploadMetadataParams as CommonUploadMetadataParams,
54
uploadMetadata as commonUploadMetadata,

‎packages/thirdweb/src/extensions/modules/MintableERC20/mintWithRole.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import type { BaseTransactionOptions } from "../../../transaction/types.js";
22
import { getAddress } from "../../../utils/address.js";
3-
import {} from "../../../utils/date.js";
43
import { mint as generatedMint } from "../__generated__/ERC20Core/write/mint.js";
54

65
// TODO (modular) - this should be its own module

‎packages/thirdweb/src/extensions/modules/MintableERC721/mintWithRole.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import type { BaseTransactionOptions } from "../../../transaction/types.js";
22
import { getAddress } from "../../../utils/address.js";
3-
import {} from "../../../utils/date.js";
43
import {
54
getBaseUriFromBatch,
65
uploadOrExtractURIs,

‎packages/thirdweb/src/extensions/modules/common/checkModulesCompatibility.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import {} from "abitype";
21
import type { Chain } from "../../../chains/types.js";
32
import type { ThirdwebClient } from "../../../client/client.js";
43
import { eth_call } from "../../../rpc/actions/eth_call.js";

0 commit comments

Comments
 (0)