Skip to content

Commit 9376192

Browse files
nachoiacovinonachoiacovino
authored
Fix some general issues (#74)
* Fix isSoldOut * Add claimed supply to the available supply * Fix other instances of 1m * Fix infinite loading for cancelled listing
1 parent d2516a3 commit 9376192

File tree

5 files changed

+134
-109
lines changed

5 files changed

+134
-109
lines changed

‎src/embeds/marketplace.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ interface MarketplaceEmbedProps {
6363
interface BuyPageProps {
6464
contract?: Marketplace;
6565
listing: DirectListing | AuctionListing;
66+
isLoading?: boolean;
6667
primaryColor: string;
6768
secondaryColor: string;
6869
colorScheme: ColorMode;
@@ -476,7 +477,7 @@ const DirectListingComponent: React.FC<DirectListingProps> = ({
476477
justifyContent="center"
477478
alignItems="center"
478479
>
479-
{showQuantityInput && (
480+
{showQuantityInput && !isSoldOut && (
480481
<NumberInput
481482
inputMode="numeric"
482483
value={quantity}
@@ -546,27 +547,28 @@ const DirectListingComponent: React.FC<DirectListingProps> = ({
546547
const BuyPage: React.FC<BuyPageProps> = ({
547548
contract,
548549
listing,
550+
isLoading,
549551
primaryColor,
550552
secondaryColor,
551553
colorScheme,
552554
}) => {
553-
if (listing === null) {
555+
if (isLoading) {
554556
return (
555557
<Center w="100%" h="100%">
556-
<Button colorScheme="primary" w="100%" isDisabled>
557-
This listing was either cancelled or does not exist.
558-
</Button>
558+
<Stack direction="row" align="center">
559+
<Spinner />
560+
<Heading size="label.sm">Loading...</Heading>
561+
</Stack>
559562
</Center>
560563
);
561564
}
562565

563566
if (!listing) {
564567
return (
565568
<Center w="100%" h="100%">
566-
<Stack direction="row" align="center">
567-
<Spinner />
568-
<Heading size="label.sm">Loading...</Heading>
569-
</Stack>
569+
<Button colorScheme="primary" w="100%" isDisabled>
570+
This listing was either cancelled or does not exist.
571+
</Button>
570572
</Center>
571573
);
572574
}
@@ -631,6 +633,7 @@ const MarketplaceEmbed: React.FC<MarketplaceEmbedProps> = ({
631633
<BuyPage
632634
contract={marketplace}
633635
listing={listing as DirectListing | AuctionListing}
636+
isLoading={isLoading}
634637
primaryColor={primaryColor}
635638
secondaryColor={secondaryColor}
636639
colorScheme={colorScheme}

‎src/embeds/nft-drop.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { parseIpfsGateway } from "../utils/parseIpfsGateway";
1818
import { ERC721ClaimButton } from "../shared/claim-button-erc721";
1919
import { ContractMetadataPage } from "../shared/contract-metadata-page";
2020
import { useGasless } from "../shared/hooks/useGasless";
21-
import { Body } from "src/shared/body";
21+
import { Body } from "../shared/body";
2222

2323
interface NFTDropEmbedProps {
2424
contractAddress: string;

‎src/shared/claim-button-erc1155.tsx‎

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,12 @@ export const ERC1155ClaimButton: React.FC<ClaimButtoProps> = ({
7171
}, [claimedSupply]);
7272

7373
const numberTotal = useMemo(() => {
74-
const n = totalAvailableSupply;
74+
const n = totalAvailableSupply.add(BigNumber.from(claimedSupply.data || 0));
7575
if (n.gte(1_000_000)) {
76-
return "Unlimited";
76+
return "";
7777
}
7878
return n.toString();
79-
}, [totalAvailableSupply]);
79+
}, [totalAvailableSupply, claimedSupply]);
8080

8181
const priceToMint = useMemo(() => {
8282
const bnPrice = BigNumber.from(
@@ -159,15 +159,20 @@ export const ERC1155ClaimButton: React.FC<ClaimButtoProps> = ({
159159
const isSoldOut = useMemo(() => {
160160
try {
161161
return (
162-
activeClaimCondition.isSuccess &&
163-
BigNumber.from(activeClaimCondition.data?.availableSupply || 0).lte(0)
162+
(activeClaimCondition.isSuccess &&
163+
BigNumber.from(activeClaimCondition.data?.availableSupply || 0).lte(
164+
0,
165+
)) ||
166+
numberClaimed === numberTotal
164167
);
165168
} catch (e) {
166169
return false;
167170
}
168171
}, [
169172
activeClaimCondition.data?.availableSupply,
170173
activeClaimCondition.isSuccess,
174+
numberClaimed,
175+
numberTotal,
171176
]);
172177

173178
const canClaim = useMemo(() => {
@@ -232,7 +237,7 @@ export const ERC1155ClaimButton: React.FC<ClaimButtoProps> = ({
232237
if (activeClaimCondition.isError) {
233238
return (
234239
<Text size="label.md" color="red.500">
235-
This drop is not ready to be claimed yet. (No claim condition set.)
240+
This drop is not ready to be minted yet. (No claim condition set)
236241
</Text>
237242
);
238243
}
@@ -246,30 +251,32 @@ export const ERC1155ClaimButton: React.FC<ClaimButtoProps> = ({
246251
justifyContent="center"
247252
alignItems="center"
248253
>
249-
<Skeleton isLoaded={!isLoading}>
250-
<NumberInput
251-
inputMode="numeric"
252-
value={quantity}
253-
onChange={(stringValue, value) => {
254-
if (stringValue === "") {
255-
setQuantity(1);
256-
} else {
257-
setQuantity(value);
258-
}
259-
}}
260-
min={1}
261-
max={maxClaimable}
262-
maxW={{ base: "100%", sm: "100px" }}
263-
bgColor="inputBg"
264-
height="full"
265-
>
266-
<NumberInputField />
267-
<NumberInputStepper>
268-
<NumberIncrementStepper />
269-
<NumberDecrementStepper />
270-
</NumberInputStepper>
271-
</NumberInput>
272-
</Skeleton>
254+
{!isSoldOut && (
255+
<Skeleton isLoaded={!isLoading}>
256+
<NumberInput
257+
inputMode="numeric"
258+
value={quantity}
259+
onChange={(stringValue, value) => {
260+
if (stringValue === "") {
261+
setQuantity(1);
262+
} else {
263+
setQuantity(value);
264+
}
265+
}}
266+
min={1}
267+
max={maxClaimable}
268+
maxW={{ base: "100%", sm: "100px" }}
269+
bgColor="inputBg"
270+
height="full"
271+
>
272+
<NumberInputField />
273+
<NumberInputStepper>
274+
<NumberIncrementStepper />
275+
<NumberDecrementStepper />
276+
</NumberInputStepper>
277+
</NumberInput>
278+
</Skeleton>
279+
)}
273280
<Web3Button
274281
colorMode={colorScheme}
275282
contractAddress={contract?.getAddress() || ""}
@@ -279,15 +286,15 @@ export const ERC1155ClaimButton: React.FC<ClaimButtoProps> = ({
279286
onError={(err) => {
280287
console.error(err);
281288
toast({
282-
title: "Failed to claim drop.",
289+
title: "Failed to mint drop.",
283290
status: "error",
284291
duration: 9000,
285292
isClosable: true,
286293
});
287294
}}
288295
onSuccess={() => {
289296
toast({
290-
title: "Successfully claimed.",
297+
title: "Successfully minted.",
291298
status: "success",
292299
duration: 5000,
293300
isClosable: true,
@@ -302,11 +309,11 @@ export const ERC1155ClaimButton: React.FC<ClaimButtoProps> = ({
302309
<Skeleton as="span" isLoaded={!isLoading}>
303310
{isLoading ? "00" : numberClaimed}
304311
</Skeleton>{" "}
305-
/{" "}
312+
{numberTotal !== "" && "/ "}
306313
<Skeleton as="span" isLoaded={!isLoading}>
307314
{isLoading ? "00" : numberTotal}
308315
</Skeleton>{" "}
309-
claimed
316+
minted
310317
</Text>
311318
</Stack>
312319
);

‎src/shared/claim-button-erc20.tsx‎

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
7777
parseFloat(activeClaimCondition.data?.maxQuantity || "0") || 0,
7878
);
7979
} catch (e) {
80-
bnMaxClaimable = BigNumber.from(1_000_000);
80+
bnMaxClaimable = BigNumber.from(1_000_000_000_000);
8181
}
8282

8383
let perTransactionClaimable;
@@ -86,7 +86,7 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
8686
activeClaimCondition.data?.quantityLimitPerTransaction || 0,
8787
);
8888
} catch (e) {
89-
perTransactionClaimable = BigNumber.from(1_000_000);
89+
perTransactionClaimable = BigNumber.from(1_000_000_000_000);
9090
}
9191

9292
if (perTransactionClaimable.lte(bnMaxClaimable)) {
@@ -100,7 +100,7 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
100100
if (snapshotClaimable) {
101101
if (snapshotClaimable === "0") {
102102
// allowed unlimited for the snapshot
103-
bnMaxClaimable = BigNumber.from(1_000_000);
103+
bnMaxClaimable = BigNumber.from(1_000_000_000_000);
104104
} else {
105105
try {
106106
bnMaxClaimable = BigNumber.from(snapshotClaimable);
@@ -110,8 +110,8 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
110110
}
111111
}
112112

113-
if (bnMaxClaimable.gte(1_000_000)) {
114-
return 1_000_000;
113+
if (bnMaxClaimable.gte(1_000_000_000_000)) {
114+
return 1_000_000_000_000;
115115
}
116116

117117
return bnMaxClaimable.toNumber();
@@ -121,18 +121,24 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
121121
activeClaimCondition.data?.snapshot,
122122
address,
123123
]);
124+
124125
const isSoldOut = useMemo(() => {
125126
try {
126127
return (
127-
activeClaimCondition.isSuccess &&
128-
BigNumber.from(activeClaimCondition.data?.availableSupply || 0).lte(0)
128+
(activeClaimCondition.isSuccess &&
129+
BigNumber.from(activeClaimCondition.data?.availableSupply || 0).lte(
130+
0,
131+
)) ||
132+
numberClaimed === numberTotal
129133
);
130134
} catch (e) {
131135
return false;
132136
}
133137
}, [
134138
activeClaimCondition.data?.availableSupply,
135139
activeClaimCondition.isSuccess,
140+
numberClaimed,
141+
numberTotal,
136142
]);
137143

138144
const canClaim = useMemo(() => {
@@ -195,7 +201,7 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
195201
if (activeClaimCondition.isError) {
196202
return (
197203
<Text size="label.md" color="red.500">
198-
This drop is not ready to be claimed yet. (No claim condition set.)
204+
This drop is not ready to be minted yet. (No claim condition set)
199205
</Text>
200206
);
201207
}
@@ -209,30 +215,32 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
209215
justifyContent="center"
210216
alignItems="center"
211217
>
212-
<Skeleton isLoaded={!isLoading}>
213-
<NumberInput
214-
inputMode="numeric"
215-
value={quantity}
216-
onChange={(stringValue, value) => {
217-
if (stringValue === "") {
218-
setQuantity(1);
219-
} else {
220-
setQuantity(value);
221-
}
222-
}}
223-
min={1}
224-
max={maxClaimable}
225-
maxW={{ base: "100%", sm: "100px" }}
226-
bgColor="inputBg"
227-
height="full"
228-
>
229-
<NumberInputField />
230-
<NumberInputStepper>
231-
<NumberIncrementStepper />
232-
<NumberDecrementStepper />
233-
</NumberInputStepper>
234-
</NumberInput>
235-
</Skeleton>
218+
{!isSoldOut && (
219+
<Skeleton isLoaded={!isLoading}>
220+
<NumberInput
221+
inputMode="numeric"
222+
value={quantity}
223+
onChange={(stringValue, value) => {
224+
if (stringValue === "") {
225+
setQuantity(1);
226+
} else {
227+
setQuantity(value);
228+
}
229+
}}
230+
min={1}
231+
max={maxClaimable}
232+
maxW={{ base: "100%", sm: "100px" }}
233+
bgColor="inputBg"
234+
height="full"
235+
>
236+
<NumberInputField />
237+
<NumberInputStepper>
238+
<NumberIncrementStepper />
239+
<NumberDecrementStepper />
240+
</NumberInputStepper>
241+
</NumberInput>
242+
</Skeleton>
243+
)}
236244
<Web3Button
237245
colorMode={colorScheme}
238246
contractAddress={contract?.getAddress() || ""}
@@ -242,15 +250,15 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
242250
onError={(err) => {
243251
console.error(err);
244252
toast({
245-
title: "Failed to claim drop.",
253+
title: "Failed to mint drop.",
246254
status: "error",
247255
duration: 9000,
248256
isClosable: true,
249257
});
250258
}}
251259
onSuccess={() => {
252260
toast({
253-
title: "Successfully claimed.",
261+
title: "Successfully minted.",
254262
status: "success",
255263
duration: 5000,
256264
isClosable: true,
@@ -269,7 +277,7 @@ export const ERC20ClaimButton: React.FC<ClaimButtoProps> = ({
269277
<Skeleton as="span" isLoaded={!isLoading}>
270278
{isLoading ? "00" : numberTotal}
271279
</Skeleton>{" "}
272-
claimed
280+
minted
273281
</Text>
274282
</Stack>
275283
);

0 commit comments

Comments
 (0)