34 | 
41 | window.open(
42 | "https://github.com/thirdweb-example/token-drop",
43 | "_blank"
44 | )
45 | }
46 | />
47 |
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
1 | .noGapBottom {
2 | margin-bottom: 0px;
3 | }
4 |
5 | .mainButton {
6 | cursor: pointer;
7 | display: inline-flex;
8 | appearance: none;
9 | align-items: center;
10 | -webkit-box-align: center;
11 | justify-content: center;
12 | white-space: nowrap;
13 | vertical-align: middle;
14 | outline: 2px solid transparent;
15 | outline-offset: 2px;
16 | line-height: 1.2;
17 | font-weight: 600;
18 | transition-property: background-color, border-color, color, fill, stroke,
19 | opacity, box-shadow, transform;
20 | transition-duration: 200ms;
21 | height: 3rem;
22 | min-width: 3rem;
23 | font-size: 1rem;
24 | background: #e5e5ea;
25 | background-image: linear-gradient(to left, #cc25b3 0%, #418dff 101.52%);
26 | color: #fff;
27 | width: 180px;
28 | text-align: center;
29 | border-radius: 9999px;
30 | border-style: none;
31 | }
32 |
33 | .mainButton:hover {
34 | opacity: 0.8;
35 | }
36 |
37 | .pink {
38 | color: #cc25b3;
39 | }
40 |
41 | .title {
42 | margin-bottom: 0px;
43 | }
44 |
45 | .explain {
46 | font-size: 1rem;
47 | font-weight: 600;
48 | }
49 |
50 | .secondaryButton {
51 | cursor: pointer;
52 | text-align: center;
53 | padding: 5px;
54 | color: #fff;
55 | font-weight: 600;
56 | }
57 |
58 | .container {
59 | margin-top: 96px;
60 | display: flex;
61 | flex-direction: column;
62 | align-items: center;
63 | justify-content: center;
64 | width: 100vw;
65 | padding: 0 24px;
66 | }
67 |
68 | .divider {
69 | width: 50%;
70 | border-color: grey;
71 | opacity: 0.25;
72 | margin-bottom: 2rem;
73 | }
74 |
75 | .holderGrid {
76 | display: flex;
77 | flex-direction: row;
78 | align-items: center;
79 | justify-content: center;
80 | gap: 1%;
81 | width: 600px;
82 | max-width: 95vw;
83 | flex-wrap: wrap;
84 | margin-top: 16px;
85 | }
86 |
87 | .spacerBottom {
88 | margin-bottom: 16px;
89 | }
90 |
91 | .claimGrid {
92 | display: flex;
93 | flex-direction: row;
94 | align-items: center;
95 | justify-content: center;
96 | margin-bottom: 16px;
97 | gap: 2%;
98 | }
99 |
100 | .textInput {
101 | width: 75%;
102 | background-color: transparent;
103 | border: 1px solid grey;
104 | border-radius: 8px;
105 | color: #fff;
106 | height: 48px;
107 | padding: 0 16px;
108 | font-size: 1rem;
109 | }
110 |
111 | .holderItem {
112 | border: 1px solid rgba(255, 255, 255, 0.4);
113 | border-radius: 16px;
114 | width: 100%;
115 | padding: 16px;
116 | }
117 |
118 | /* On mobile: */
119 | @media only screen and (max-width: 850px) {
120 | .claimGrid {
121 | flex-direction: column;
122 | width: 99vw;
123 | gap: 2%;
124 | }
125 |
126 | .textInput {
127 | margin-top: 6px;
128 | margin-bottom: 8px;
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | > [!Important]
2 | > This repository is referencing the `mumbai` chain.
3 | >
4 | > `Mumbai` [is deprecated since 08/04/2024](https://blog.thirdweb.com/deprecation-of-mumbai-testnet/), meaning the code in this repository will no longer work out of the box.
5 | >
6 | > You can still use this repository, however you will have to switch any references to `mumbai` to another chain.
7 |
8 | # Token Drop Example
9 |
10 | ## Introduction
11 |
12 | In this guide, we will utilize the [**Token Drop**](https://portal.thirdweb.com/contracts/token-drop) contract to release ERC-20 tokens!
13 |
14 | We also utilize the token drop's [claim phases](https://portal.thirdweb.com/pre-built-contracts/token-drop#setting-claim-phases) feature, to release the tokens for a price, and only allow a certain amount to be claimed per wallet.
15 |
16 | **Check out the Demo here**: https://token-drop.thirdweb-example.com/
17 |
18 | ## Tools:
19 |
20 | - [**thirdweb Token Drop**](https://portal.thirdweb.com/contracts/token-drop): thirdweb's Token Drop contract is a way of releasing your ERC20 tokens!
21 |
22 | - [**thirdweb React SDK**](https://docs.thirdweb.com/react): To connect to our NFT Collection Smart contract via React hooks such as [useTokenDrop](https://docs.thirdweb.com/react/react.usetokendrop), connect user's wallets, and other awesome hooks like [useActiveClaimCondition](https://docs.thirdweb.com/react/react.useactiveclaimcondition) and [useClaimIneligibilityReasons](https://docs.thirdweb.com/react/react.useclaimineligibilityreasons).
23 |
24 | - [**thirdweb TypeScript SDK**](https://docs.thirdweb.com/typescript): To claim/mint tokens from the token drop with [.claim](https://portal.thirdweb.com/pre-built-contracts/token-drop#claiming-tokens) , view token balance with [.balanceOf](https://portal.thirdweb.com/pre-built-contracts/token-drop#token-balance), and transfer tokens with [.transfer](https://portal.thirdweb.com/pre-built-contracts/token-drop#transfer-tokens).
25 |
26 | ## Using This Repo
27 |
28 | - Create a Token Drop contract via the thirdweb dashboard on the Mumbai test network.
29 |
30 | - Create a project using this example by running:
31 |
32 | ```bash
33 | npx thirdweb create --template token-drop
34 | ```
35 |
36 | - Replace our demo token drop contract address (`0x5ec440E5965da9570CAa66402980c6D20cbe0663`) with your token drop contract address!
37 |
38 | # Guide
39 |
40 | ## Configuring the ThirdwebProvider
41 |
42 | The thirdweb provider is a wrapper around our whole application.
43 |
44 | It allows us to access all of the React SDK's helpful hooks anywhere in our application.
45 |
46 | ```jsx
47 | // This is the chain your dApp will work on.
48 | const activeChainId = "mumbai";
49 |
50 | function MyApp({ Component, pageProps }) {
51 | return (
52 |
41 | window.open(
42 | "https://github.com/thirdweb-example/token-drop",
43 | "_blank"
44 | )
45 | }
46 | />
47 |
93 | setAmountToClaim(e.target.value)}
97 | className={`${styles.textInput} ${styles.noGapBottom}`}
98 | />
99 | contract.erc20.claim(amountToClaim)}
103 | onSuccess={() => alert("Claimed!")}
104 | onError={(err) => alert(err)}
105 | >
106 | Claim Tokens
107 |
108 |
;
109 | ```
110 |
111 | ## Join our Discord!
112 |
113 | For any questions, suggestions, join our discord at [https://discord.gg/cd thirdweb](https://discord.gg/thirdweb).
114 |
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | useActiveClaimConditionForWallet,
3 | useAddress,
4 | useClaimConditions,
5 | useClaimerProofs,
6 | useClaimIneligibilityReasons,
7 | useContract,
8 | useContractMetadata,
9 | useTokenSupply,
10 | Web3Button,
11 | } from "@thirdweb-dev/react";
12 | import { BigNumber, utils } from "ethers";
13 | import Image from "next/image";
14 | import { useMemo, useState } from "react";
15 | import styles from "../styles/Home.module.css";
16 | import { parseIneligibility } from "../utils/parseIneligibility";
17 |
18 | const Home = () => {
19 | const tokenAddress = "0x03728725240b021887355c943d040BF933F3d5F0";
20 | const { contract } = useContract(tokenAddress, "token-drop");
21 | const address = useAddress();
22 | const [quantity, setQuantity] = useState(1);
23 | const { data: contractMetadata } = useContractMetadata(contract);
24 |
25 | const claimConditions = useClaimConditions(contract);
26 | const activeClaimCondition = useActiveClaimConditionForWallet(
27 | contract,
28 | address
29 | );
30 | const claimerProofs = useClaimerProofs(contract, address || "");
31 | const claimIneligibilityReasons = useClaimIneligibilityReasons(contract, {
32 | quantity,
33 | walletAddress: address || "",
34 | });
35 |
36 | const claimedSupply = useTokenSupply(contract);
37 |
38 | const totalAvailableSupply = useMemo(() => {
39 | try {
40 | return BigNumber.from(activeClaimCondition.data?.availableSupply || 0);
41 | } catch {
42 | return BigNumber.from(1_000_000_000);
43 | }
44 | }, [activeClaimCondition.data?.availableSupply]);
45 |
46 | const numberClaimed = useMemo(() => {
47 | return BigNumber.from(claimedSupply.data?.value || 0).toString();
48 | }, [claimedSupply]);
49 |
50 | const numberTotal = useMemo(() => {
51 | const n = totalAvailableSupply.add(
52 | BigNumber.from(claimedSupply.data?.value || 0)
53 | );
54 | if (n.gte(1_000_000_000)) {
55 | return "";
56 | }
57 | return n.toString();
58 | }, [totalAvailableSupply, claimedSupply]);
59 |
60 | const priceToMint = useMemo(() => {
61 | if (quantity) {
62 | const bnPrice = BigNumber.from(
63 | activeClaimCondition.data?.currencyMetadata.value || 0
64 | );
65 | return `${utils.formatUnits(
66 | bnPrice.mul(quantity).toString(),
67 | activeClaimCondition.data?.currencyMetadata.decimals || 18
68 | )} ${activeClaimCondition.data?.currencyMetadata.symbol}`;
69 | }
70 | }, [
71 | activeClaimCondition.data?.currencyMetadata.decimals,
72 | activeClaimCondition.data?.currencyMetadata.symbol,
73 | activeClaimCondition.data?.currencyMetadata.value,
74 | quantity,
75 | ]);
76 |
77 | const maxClaimable = useMemo(() => {
78 | let bnMaxClaimable;
79 | try {
80 | bnMaxClaimable = BigNumber.from(
81 | activeClaimCondition.data?.maxClaimableSupply || 0
82 | );
83 | } catch (e) {
84 | bnMaxClaimable = BigNumber.from(1_000_000_000);
85 | }
86 |
87 | let perTransactionClaimable;
88 | try {
89 | perTransactionClaimable = BigNumber.from(
90 | activeClaimCondition.data?.maxClaimablePerWallet || 0
91 | );
92 | } catch (e) {
93 | perTransactionClaimable = BigNumber.from(1_000_000_000);
94 | }
95 |
96 | if (perTransactionClaimable.lte(bnMaxClaimable)) {
97 | bnMaxClaimable = perTransactionClaimable;
98 | }
99 |
100 | const snapshotClaimable = claimerProofs.data?.maxClaimable;
101 |
102 | if (snapshotClaimable) {
103 | if (snapshotClaimable === "0") {
104 | // allowed unlimited for the snapshot
105 | bnMaxClaimable = BigNumber.from(1_000_000_000);
106 | } else {
107 | try {
108 | bnMaxClaimable = BigNumber.from(snapshotClaimable);
109 | } catch (e) {
110 | // fall back to default case
111 | }
112 | }
113 | }
114 |
115 | let max;
116 | if (totalAvailableSupply.lt(bnMaxClaimable)) {
117 | max = totalAvailableSupply;
118 | } else {
119 | max = bnMaxClaimable;
120 | }
121 |
122 | if (max.gte(1_000_000_000)) {
123 | return 1_000_000_000;
124 | }
125 | return max.toNumber();
126 | }, [
127 | claimerProofs.data?.maxClaimable,
128 | totalAvailableSupply,
129 | activeClaimCondition.data?.maxClaimableSupply,
130 | activeClaimCondition.data?.maxClaimablePerWallet,
131 | ]);
132 |
133 | const isSoldOut = useMemo(() => {
134 | try {
135 | return (
136 | (activeClaimCondition.isSuccess &&
137 | BigNumber.from(activeClaimCondition.data?.availableSupply || 0).lte(
138 | 0
139 | )) ||
140 | numberClaimed === numberTotal
141 | );
142 | } catch (e) {
143 | return false;
144 | }
145 | }, [
146 | activeClaimCondition.data?.availableSupply,
147 | activeClaimCondition.isSuccess,
148 | numberClaimed,
149 | numberTotal,
150 | ]);
151 |
152 | const canClaim = useMemo(() => {
153 | return (
154 | activeClaimCondition.isSuccess &&
155 | claimIneligibilityReasons.isSuccess &&
156 | claimIneligibilityReasons.data?.length === 0 &&
157 | !isSoldOut
158 | );
159 | }, [
160 | activeClaimCondition.isSuccess,
161 | claimIneligibilityReasons.data?.length,
162 | claimIneligibilityReasons.isSuccess,
163 | isSoldOut,
164 | ]);
165 |
166 | const isLoading = useMemo(() => {
167 | return activeClaimCondition.isLoading || !contract;
168 | }, [activeClaimCondition.isLoading, contract]);
169 |
170 | const buttonLoading = useMemo(
171 | () => isLoading || claimIneligibilityReasons.isLoading,
172 | [claimIneligibilityReasons.isLoading, isLoading]
173 | );
174 | const buttonText = useMemo(() => {
175 | if (isSoldOut) {
176 | return "Sold Out";
177 | }
178 |
179 | if (canClaim) {
180 | const pricePerToken = BigNumber.from(
181 | activeClaimCondition.data?.currencyMetadata.value || 0
182 | );
183 | if (pricePerToken.eq(0)) {
184 | return "Mint (Free)";
185 | }
186 | return `Mint (${priceToMint})`;
187 | }
188 | if (claimIneligibilityReasons.data?.length) {
189 | return parseIneligibility(claimIneligibilityReasons.data, quantity);
190 | }
191 | if (buttonLoading) {
192 | return "Checking eligibility...";
193 | }
194 |
195 | return "Claiming not available";
196 | }, [
197 | isSoldOut,
198 | canClaim,
199 | claimIneligibilityReasons.data,
200 | buttonLoading,
201 | activeClaimCondition.data?.currencyMetadata.value,
202 | priceToMint,
203 | quantity,
204 | ]);
205 |
206 | return (
207 |
208 | {(claimConditions.data &&
209 | claimConditions.data.length > 0 &&
210 | activeClaimCondition.isError) ||
211 | (activeClaimCondition.data &&
212 | activeClaimCondition.data.startTime > new Date() && (
213 |
246 | 247 |
275 | );
276 | };
277 |
278 | export default Home;
279 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright 2021 Non-Fungible Labs, Inc
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
Drop is starting soon. Please check back later.
214 | ))} 215 | 216 | {claimConditions.data?.length === 0 || 217 | (claimConditions.data?.every((cc) => cc.maxClaimableSupply === "0") && ( 218 |219 | This drop is not ready to be minted yet. (No claim condition set) 220 |
221 | ))} 222 | 223 | {isLoading ? ( 224 |Loading...
225 | ) : ( 226 | <> 227 | {contractMetadata?.image && ( 228 |Claim Tokens
238 |239 | Claim ERC20 tokens from{" "} 240 | {contractMetadata?.name} 241 |
242 | 243 | )} 244 | 245 |246 | 247 |
248 | {
252 | const value = parseInt(e.target.value);
253 | if (value > maxClaimable) {
254 | setQuantity(maxClaimable);
255 | } else if (value < 1) {
256 | setQuantity(1);
257 | } else {
258 | setQuantity(value);
259 | }
260 | }}
261 | value={quantity}
262 | className={`${styles.textInput} ${styles.noGapBottom}`}
263 | />
264 | contract.erc20.claim(quantity)}
268 | onSuccess={() => alert("Claimed!")}
269 | onError={(err) => alert(err)}
270 | >
271 | {buttonText}
272 |
273 |
274 |