Skip to content

Commit e2754df

Browse files
GWSzetoGWSzeto
committed
updated to use contractInfo name (#5536)
https://linear.app/thirdweb/issue/DASH-489/modules-ui-bug-with-erc20-modules-showing-tokenid <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on refactoring the handling of different ERC token types in various components of a dashboard application. It replaces boolean flags with string identifiers for token types, enhancing clarity and maintainability. ### Detailed summary - Replaced boolean flags (`isErc721`, `isErc20`) with string identifiers (`name`) for token types in multiple components. - Updated metadata upload logic to use `props.contractInfo.name` for conditional checks. - Refactored the `uploadMetadata`, `setTransferable`, and `mint` functions to use the new string identifiers. - Modified UI components to use `Select` for token type selection instead of checkboxes. - Adjusted condition checks for enabling transfer and minting based on the updated token type handling. - Updated the `ClaimableModule` to handle ERC20 and ERC721 claims with the new string-based approach. - Ensured consistent handling of token decimals and claim conditions based on token type. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent e87eb2f commit e2754df

File tree

6 files changed

+200
-103
lines changed

6 files changed

+200
-103
lines changed

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,18 +66,17 @@ export type UploadMetadataFormValues = z.infer<typeof uploadMetadataFormSchema>;
6666
function BatchMetadataModule(props: ModuleInstanceProps) {
6767
const { contract, ownerAccount } = props;
6868

69-
const isErc721 = props.contractInfo.name === "BatchMetadataERC721";
70-
7169
const uploadMetadata = useCallback(
7270
async (values: UploadMetadataFormValues) => {
7371
if (!ownerAccount) {
7472
throw new Error("Not an owner account");
7573
}
7674

7775
const nft = parseAttributes(values);
78-
const uploadMetadata = isErc721
79-
? BatchMetadataERC721.uploadMetadata
80-
: BatchMetadataERC1155.uploadMetadata;
76+
const uploadMetadata =
77+
props.contractInfo.name === "BatchMetadataERC721"
78+
? BatchMetadataERC721.uploadMetadata
79+
: BatchMetadataERC1155.uploadMetadata;
8180
const uploadMetadataTx = uploadMetadata({
8281
contract,
8382
metadatas: [nft],
@@ -88,7 +87,7 @@ function BatchMetadataModule(props: ModuleInstanceProps) {
8887
transaction: uploadMetadataTx,
8988
});
9089
},
91-
[contract, ownerAccount, isErc721],
90+
[contract, ownerAccount, props.contractInfo.name],
9291
);
9392

9493
return (

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx‎

Lines changed: 90 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,11 @@ import {
4646
toTokens,
4747
} from "thirdweb";
4848
import { decimals } from "thirdweb/extensions/erc20";
49-
import { ClaimableERC721, ClaimableERC1155 } from "thirdweb/modules";
49+
import {
50+
ClaimableERC20,
51+
ClaimableERC721,
52+
ClaimableERC1155,
53+
} from "thirdweb/modules";
5054
import { useActiveAccount, useReadContract } from "thirdweb/react";
5155
import { z } from "zod";
5256
import { addressSchema } from "../zod-schemas";
@@ -72,26 +76,34 @@ function ClaimableModule(props: ModuleInstanceProps) {
7276
const account = useActiveAccount();
7377
const [tokenId, setTokenId] = useState<string>("");
7478

75-
const isErc721 = props.contractInfo.name === "ClaimableERC721";
76-
const isErc20 = props.contractInfo.name === "ClaimableERC20";
7779
const isValidTokenId = positiveIntegerRegex.test(tokenId);
7880

7981
const primarySaleRecipientQuery = useReadContract(
80-
isErc721 ? ClaimableERC721.getSaleConfig : ClaimableERC1155.getSaleConfig,
82+
props.contractInfo.name === "ClaimableERC721"
83+
? ClaimableERC721.getSaleConfig
84+
: props.contractInfo.name === "ClaimableERC20"
85+
? ClaimableERC20.getSaleConfig
86+
: ClaimableERC1155.getSaleConfig,
8187
{
8288
contract: contract,
8389
},
8490
);
8591

8692
const claimConditionQuery = useReadContract(
87-
isErc721
93+
props.contractInfo.name === "ClaimableERC721"
8894
? ClaimableERC721.getClaimCondition
89-
: ClaimableERC1155.getClaimCondition,
95+
: props.contractInfo.name === "ClaimableERC20"
96+
? ClaimableERC20.getClaimCondition
97+
: ClaimableERC1155.getClaimCondition,
9098
{
9199
tokenId: positiveIntegerRegex.test(tokenId) ? BigInt(tokenId) : 0n,
92100
contract: contract,
93101
queryOptions: {
94-
enabled: isErc721 || (!!tokenId && isValidTokenId),
102+
enabled:
103+
["ClaimableERC721", "ClaimableERC20"].includes(
104+
props.contractInfo.name,
105+
) ||
106+
(!!tokenId && isValidTokenId),
95107
},
96108
},
97109
);
@@ -116,12 +128,18 @@ function ClaimableModule(props: ModuleInstanceProps) {
116128
claimConditionQuery.data &&
117129
claimConditionQuery.data?.currency !== ZERO_ADDRESS;
118130

119-
const tokenDecimalsQuery = useReadContract(decimals, {
131+
const currencyDecimalsQuery = useReadContract(decimals, {
120132
contract: currencyContract,
121133
queryOptions: {
122134
enabled: shouldFetchTokenDecimals,
123135
},
124136
});
137+
const tokenDecimalsQuery = useReadContract(decimals, {
138+
contract: contract,
139+
queryOptions: {
140+
enabled: props.contractInfo.name === "ClaimableERC20",
141+
},
142+
});
125143

126144
const mint = useCallback(
127145
async (values: MintFormValues) => {
@@ -130,12 +148,18 @@ function ClaimableModule(props: ModuleInstanceProps) {
130148
}
131149

132150
let mintTx: PreparedTransaction;
133-
if (isErc721) {
151+
if (props.contractInfo.name === "ClaimableERC721") {
134152
mintTx = ClaimableERC721.mint({
135153
contract,
136154
to: values.recipient,
137155
quantity: values.quantity,
138156
});
157+
} else if (props.contractInfo.name === "ClaimableERC20") {
158+
mintTx = ClaimableERC20.mint({
159+
contract,
160+
to: values.recipient,
161+
quantity: values.quantity,
162+
});
139163
} else if (values.tokenId) {
140164
mintTx = ClaimableERC1155.mint({
141165
contract,
@@ -152,7 +176,7 @@ function ClaimableModule(props: ModuleInstanceProps) {
152176
transaction: mintTx,
153177
});
154178
},
155-
[contract, account, isErc721],
179+
[contract, account, props.contractInfo.name],
156180
);
157181

158182
const setClaimCondition = useCallback(
@@ -162,7 +186,7 @@ function ClaimableModule(props: ModuleInstanceProps) {
162186
}
163187

164188
let setClaimConditionTx: PreparedTransaction;
165-
if (isErc721) {
189+
if (props.contractInfo.name === "ClaimableERC721") {
166190
setClaimConditionTx = ClaimableERC721.setClaimCondition({
167191
...values,
168192
contract,
@@ -171,6 +195,15 @@ function ClaimableModule(props: ModuleInstanceProps) {
171195
? values.allowList.map(({ address }) => address)
172196
: undefined,
173197
});
198+
} else if (props.contractInfo.name === "ClaimableERC20") {
199+
setClaimConditionTx = ClaimableERC20.setClaimCondition({
200+
...values,
201+
contract,
202+
allowList:
203+
values.allowList && values.allowList.length > 0
204+
? values.allowList.map(({ address }) => address)
205+
: undefined,
206+
});
174207
} else if (values.tokenId) {
175208
setClaimConditionTx = ClaimableERC1155.setClaimCondition({
176209
...values,
@@ -190,17 +223,20 @@ function ClaimableModule(props: ModuleInstanceProps) {
190223
transaction: setClaimConditionTx,
191224
});
192225
},
193-
[contract, ownerAccount, isErc721],
226+
[contract, ownerAccount, props.contractInfo.name],
194227
);
195228

196229
const setPrimarySaleRecipient = useCallback(
197230
async (values: PrimarySaleRecipientFormValues) => {
198231
if (!ownerAccount) {
199232
throw new Error("Not an owner account");
200233
}
201-
const setSaleConfig = isErc721
202-
? ClaimableERC721.setSaleConfig
203-
: ClaimableERC1155.setSaleConfig;
234+
const setSaleConfig =
235+
props.contractInfo.name === "ClaimableERC721"
236+
? ClaimableERC721.setSaleConfig
237+
: props.contractInfo.name === "ClaimableERC20"
238+
? ClaimableERC20.setSaleConfig
239+
: ClaimableERC1155.setSaleConfig;
204240
const setSaleConfigTx = setSaleConfig({
205241
contract: contract,
206242
primarySaleRecipient: values.primarySaleRecipient,
@@ -211,7 +247,7 @@ function ClaimableModule(props: ModuleInstanceProps) {
211247
transaction: setSaleConfigTx,
212248
});
213249
},
214-
[contract, ownerAccount, isErc721],
250+
[contract, ownerAccount, props.contractInfo.name],
215251
);
216252

217253
return (
@@ -228,21 +264,21 @@ function ClaimableModule(props: ModuleInstanceProps) {
228264
// claim conditions data is present
229265
claimConditionQuery.data &&
230266
// token decimals is fetched if it should be fetched
231-
(shouldFetchTokenDecimals ? tokenDecimalsQuery.isFetched : true)
267+
(shouldFetchTokenDecimals ? currencyDecimalsQuery.isFetched : true)
232268
? {
233269
claimCondition: claimConditionQuery.data,
270+
currencyDecimals: currencyDecimalsQuery.data,
234271
tokenDecimals: tokenDecimalsQuery.data,
235272
}
236273
: undefined,
237274
setClaimCondition,
238275
tokenId,
239276
isLoading:
240277
claimConditionQuery.isLoading ||
241-
(!!shouldFetchTokenDecimals && tokenDecimalsQuery.isLoading),
278+
(!!shouldFetchTokenDecimals && currencyDecimalsQuery.isLoading),
242279
}}
243280
isOwnerAccount={!!ownerAccount}
244-
isErc721={isErc721}
245-
isErc20={isErc20}
281+
name={props.contractInfo.name}
246282
contractChainId={props.contract.chain.id}
247283
setTokenId={setTokenId}
248284
isValidTokenId={isValidTokenId}
@@ -257,8 +293,7 @@ function ClaimableModule(props: ModuleInstanceProps) {
257293
export function ClaimableModuleUI(
258294
props: Omit<ModuleCardUIProps, "children" | "updateButton"> & {
259295
isOwnerAccount: boolean;
260-
isErc721: boolean;
261-
isErc20: boolean;
296+
name: string;
262297
contractChainId: number;
263298
setTokenId: Dispatch<SetStateAction<string>>;
264299
isValidTokenId: boolean;
@@ -282,6 +317,7 @@ export function ClaimableModuleUI(
282317
data:
283318
| {
284319
claimCondition: ClaimConditionValue;
320+
currencyDecimals: number | undefined;
285321
tokenDecimals: number | undefined;
286322
}
287323
| undefined;
@@ -298,12 +334,12 @@ export function ClaimableModuleUI(
298334
<Accordion type="single" collapsible className="-mx-1">
299335
<AccordionItem value="metadata" className="border-none">
300336
<AccordionTrigger className="border-border border-t px-1">
301-
Mint {props.isErc20 ? "Token" : "NFT"}
337+
Mint {props.name === "ClaimableERC20" ? "Token" : "NFT"}
302338
</AccordionTrigger>
303339
<AccordionContent className="px-1">
304340
<MintNFTSection
305341
mint={props.mintSection.mint}
306-
isErc721={props.isErc721}
342+
name={props.name}
307343
contractChainId={props.contractChainId}
308344
/>
309345
</AccordionContent>
@@ -314,7 +350,7 @@ export function ClaimableModuleUI(
314350
Claim Conditions
315351
</AccordionTrigger>
316352
<AccordionContent className="px-1">
317-
{!props.isErc721 && (
353+
{props.name === "ClaimableERC1155" && (
318354
<div className="flex flex-col gap-6">
319355
<div className="flex-1 space-y-1">
320356
<Label>Token ID</Label>
@@ -330,28 +366,29 @@ export function ClaimableModuleUI(
330366

331367
<div className="h-6" />
332368

333-
{props.isValidTokenId &&
334-
props.claimConditionSection.data &&
335-
!props.claimConditionSection.isLoading && (
369+
{props.name !== "ClaimableERC1155" || props.isValidTokenId ? (
370+
props.claimConditionSection.data ? (
336371
<ClaimConditionSection
337372
isOwnerAccount={props.isOwnerAccount}
338373
claimCondition={
339374
props.claimConditionSection.data.claimCondition
340375
}
341376
update={props.claimConditionSection.setClaimCondition}
342-
isErc721={props.isErc721}
377+
name={props.name}
343378
chainId={props.contractChainId}
344379
noClaimConditionSet={props.noClaimConditionSet}
380+
currencyDecimals={
381+
props.claimConditionSection.data?.currencyDecimals
382+
}
345383
tokenDecimals={
346384
props.claimConditionSection.data?.tokenDecimals
347385
}
348386
tokenId={props.claimConditionSection.tokenId}
349387
/>
350-
)}
351-
{props.isValidTokenId &&
352-
props.claimConditionSection.isLoading && (
388+
) : (
353389
<Skeleton className="h-[350px]" />
354-
)}
390+
)
391+
) : null}
355392
</AccordionContent>
356393
</AccordionItem>
357394

@@ -423,9 +460,10 @@ function ClaimConditionSection(props: {
423460
claimCondition: ClaimConditionValue;
424461
update: (values: ClaimConditionFormValues) => Promise<void>;
425462
isOwnerAccount: boolean;
426-
isErc721: boolean;
463+
name: string;
427464
chainId: number;
428-
tokenDecimals?: number;
465+
currencyDecimals?: number;
466+
tokenDecimals?: number | undefined;
429467
tokenId: string;
430468
noClaimConditionSet: boolean;
431469
}) {
@@ -445,18 +483,28 @@ function ClaimConditionSection(props: {
445483
: claimCondition?.currency,
446484
// default case is zero state, so 0 // 10 ** 18 still results in 0
447485
pricePerToken: Number(
448-
toTokens(claimCondition?.pricePerUnit, props.tokenDecimals || 18),
486+
toTokens(claimCondition?.pricePerUnit, props.currencyDecimals || 18),
449487
),
450488
maxClaimableSupply:
451489
claimCondition?.availableSupply.toString() === "0" ||
452490
claimCondition?.availableSupply.toString() === MAX_UINT_256
453491
? ""
454-
: claimCondition?.availableSupply.toString() || "",
492+
: props.name === "ClaimableERC20"
493+
? toTokens(
494+
claimCondition?.availableSupply,
495+
props.tokenDecimals || 18,
496+
)
497+
: claimCondition?.availableSupply.toString() || "",
455498
maxClaimablePerWallet:
456499
claimCondition?.maxMintPerWallet.toString() === "0" ||
457500
claimCondition?.maxMintPerWallet.toString() === MAX_UINT_256
458501
? ""
459-
: claimCondition?.maxMintPerWallet.toString() || "",
502+
: props.name === "ClaimableERC20"
503+
? toTokens(
504+
claimCondition?.maxMintPerWallet,
505+
props.tokenDecimals || 18,
506+
)
507+
: claimCondition?.maxMintPerWallet.toString() || "",
460508
startTime: claimCondition?.startTimestamp
461509
? fromUnixTime(claimCondition?.startTimestamp)
462510
: defaultStartDate,
@@ -487,7 +535,7 @@ function ClaimConditionSection(props: {
487535

488536
const onSubmit = async () => {
489537
const values = form.getValues();
490-
if (!props.isErc721 && !values.tokenId) {
538+
if (props.name === "ClaimableERC1155" && !values.tokenId) {
491539
form.setError("tokenId", { message: "Token ID is required" });
492540
return;
493541
}
@@ -782,7 +830,7 @@ export type MintFormValues = z.infer<typeof mintFormSchema>;
782830

783831
function MintNFTSection(props: {
784832
mint: (values: MintFormValues) => Promise<void>;
785-
isErc721: boolean;
833+
name: string;
786834
contractChainId: number;
787835
}) {
788836
const form = useForm<MintFormValues>({
@@ -808,7 +856,7 @@ function MintNFTSection(props: {
808856

809857
const onSubmit = async () => {
810858
const values = form.getValues();
811-
if (!props.isErc721 && !values.tokenId) {
859+
if (props.name === "ClaimableERC1155" && !values.tokenId) {
812860
form.setError("tokenId", { message: "Token ID is required" });
813861
return;
814862
}
@@ -847,7 +895,7 @@ function MintNFTSection(props: {
847895
)}
848896
/>
849897

850-
{!props.isErc721 && (
898+
{props.name === "ClaimableERC1155" && (
851899
<FormField
852900
control={form.control}
853901
name="tokenId"

0 commit comments

Comments
 (0)