Skip to content

Commit 4d3772d

Browse files
kien-ngokien-ngo
committed
Update
1 parent 343999d commit 4d3772d

File tree

6 files changed

+108
-85
lines changed

6 files changed

+108
-85
lines changed

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

Lines changed: 108 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,138 @@
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 {} from "@chakra-ui/react";
14+
import { zodResolver } from "@hookform/resolvers/zod";
415
import { TransactionButton } from "components/buttons/TransactionButton";
516
import { useTrack } from "hooks/analytics/useTrack";
617
import { useForm } from "react-hook-form";
718
import { toast } from "sonner";
8-
import type { ThirdwebContract } from "thirdweb";
19+
import { type ThirdwebContract, isAddress } from "thirdweb";
920
import { mintAdditionalSupplyTo } from "thirdweb/extensions/erc1155";
1021
import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
11-
import { FormErrorMessage, FormHelperText, FormLabel } from "tw-components";
22+
import { z } from "zod";
1223

1324
interface MintSupplyTabProps {
1425
contract: ThirdwebContract;
1526
tokenId: string;
1627
}
1728

18-
// Intended for Edition contracts (not Edition Drop)
29+
const mintAdditionalSupplyFormSchema = z.object({
30+
to: z.string().refine((value) => isAddress(value), {
31+
message: "Invalid Ethereum address",
32+
}),
33+
amount: z.number().int().min(1, "Amount must be at least 1"),
34+
});
35+
1936
const MintSupplyTab: React.FC<MintSupplyTabProps> = ({ contract, tokenId }) => {
2037
const trackEvent = useTrack();
2138
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 },
39+
40+
const form = useForm<z.input<typeof mintAdditionalSupplyFormSchema>>({
41+
resolver: zodResolver(mintAdditionalSupplyFormSchema),
42+
defaultValues: {
43+
amount: 1,
44+
to: address || "",
45+
},
2946
});
3047

31-
const { mutateAsync, isPending } = useSendAndConfirmTransaction();
48+
const sendAndConfirmTx = useSendAndConfirmTransaction();
3249

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-
}
50+
function onSubmit(values: z.input<typeof mintAdditionalSupplyFormSchema>) {
51+
trackEvent({
52+
category: "nft",
53+
action: "mint-supply",
54+
label: "attempt",
55+
});
56+
const transaction = mintAdditionalSupplyTo({
57+
contract,
58+
to: values.to,
59+
tokenId: BigInt(tokenId),
60+
supply: BigInt(values.amount),
61+
});
62+
const promise = sendAndConfirmTx.mutateAsync(transaction, {
63+
onSuccess: () => {
4264
trackEvent({
4365
category: "nft",
4466
action: "mint-supply",
45-
label: "attempt",
67+
label: "success",
4668
});
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)",
69+
form.reset();
70+
},
71+
onError: (error) => {
72+
trackEvent({
73+
category: "nft",
74+
action: "mint-supply",
75+
label: "error",
76+
error,
7677
});
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>
78+
},
79+
});
80+
toast.promise(promise, {
81+
loading: "Minting NFT",
82+
success: "Minted successfully",
83+
error: "Failed to mint",
84+
});
85+
}
9686

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

‎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)