11import {
2- Button ,
32 Center ,
43 ChakraProvider ,
4+ ColorMode ,
55 Flex ,
66 Grid ,
77 Heading ,
@@ -24,21 +24,18 @@ import {
2424 ThirdwebProvider ,
2525 useActiveClaimCondition ,
2626 useAddress ,
27- useChainId ,
2827 useClaimIneligibilityReasons ,
29- useClaimNFT ,
30- useEditionDrop ,
28+ useContract ,
3129 useNFT ,
3230 useTotalCirculatingSupply ,
31+ Web3Button ,
3332} from "@thirdweb-dev/react" ;
34- import { EditionDrop } from "@thirdweb-dev/sdk" ;
35- import { IpfsStorage } from "@thirdweb-dev/storage" ;
33+ import { SmartContract } from "@thirdweb-dev/sdk/dist/declarations/src/contracts/smart-contract " ;
34+ import { ThirdwebStorage } from "@thirdweb-dev/storage" ;
3635import { BigNumber } from "ethers" ;
3736import { formatUnits , parseUnits } from "ethers/lib/utils" ;
3837import React , { useEffect , useMemo , useRef , useState } from "react" ;
3938import { createRoot } from "react-dom/client" ;
40- import { IoDiamondOutline } from "react-icons/io5" ;
41- import { ConnectWalletButton } from "../shared/connect-wallet-button" ;
4239import { Footer } from "../shared/footer" ;
4340import { Header } from "../shared/header" ;
4441import { DropSvg } from "../shared/svg/drop" ;
@@ -48,22 +45,19 @@ import { parseIneligibility } from "../utils/parseIneligibility";
4845import { parseIpfsGateway } from "../utils/parseIpfsGateway" ;
4946
5047interface ClaimPageProps {
51- contract ?: EditionDrop ;
52- expectedChainId : number ;
48+ contract ?: SmartContract | null ;
5349 tokenId : string ;
5450 primaryColor : string ;
55- secondaryColor : string ;
51+ colorScheme : ColorMode ;
5652}
5753
5854const ClaimButton : React . FC < ClaimPageProps > = ( {
5955 contract,
60- expectedChainId,
6156 tokenId,
6257 primaryColor,
63- secondaryColor ,
58+ colorScheme ,
6459} ) => {
6560 const address = useAddress ( ) ;
66- const chainId = useChainId ( ) ;
6761 const [ quantity , setQuantity ] = useState ( 1 ) ;
6862 const loaded = useRef ( false ) ;
6963 const { data : totalSupply } = useTotalCirculatingSupply ( contract , tokenId ) ;
@@ -74,10 +68,6 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
7468 { quantity, walletAddress : address || "" } ,
7569 tokenId ,
7670 ) ;
77- const claimMutation = useClaimNFT ( contract ) ;
78-
79- const isEnabled = ! ! contract && ! ! address && chainId === expectedChainId ;
80-
8171 const bnPrice = parseUnits (
8272 activeClaimCondition . data ?. currencyMetadata . displayValue || "0" ,
8373 activeClaimCondition . data ?. currencyMetadata . decimals ,
@@ -116,51 +106,29 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
116106 isNaN ( Number ( availableSupply ) ) ? 1000 : Number ( availableSupply ) ,
117107 ) ;
118108
119- const claim = async ( ) => {
120- claimMutation . mutate (
121- { to : address as string , tokenId, quantity } ,
122- {
123- onSuccess : ( ) => {
124- toast ( {
125- title : "Successfully claimed." ,
126- status : "success" ,
127- duration : 5000 ,
128- isClosable : true ,
129- } ) ;
130- } ,
131- onError : ( err ) => {
132- console . error ( err ) ;
133- toast ( {
134- title : "Failed to claim drop." ,
135- status : "error" ,
136- duration : 9000 ,
137- isClosable : true ,
138- } ) ;
139- } ,
140- } ,
141- ) ;
142- } ;
143-
144109 const isLoading = claimIneligibilityReasons . isLoading && ! loaded . current ;
145110
146111 const canClaim =
147112 ! isSoldOut && ! ! address && ! claimIneligibilityReasons . data ?. length ;
148113
149- if ( ! isEnabled ) {
150- return (
151- < ConnectWalletButton
152- expectedChainId = { expectedChainId }
153- primaryColor = { primaryColor }
154- secondaryColor = { secondaryColor }
155- />
156- ) ;
114+ if ( ! contract ) {
115+ return null ;
157116 }
158117
159118 const maxQuantity = activeClaimCondition . data ?. maxQuantity ;
160119
120+ const colors = chakraTheme . colors ;
121+ const accentColor = colors [ primaryColor as keyof typeof colors ] [ 500 ] ;
122+
161123 return (
162124 < Stack spacing = { 4 } align = "center" w = "100%" >
163- < Flex w = "100%" direction = { { base : "column" , sm : "row" } } gap = { 2 } >
125+ < Flex
126+ w = "100%"
127+ direction = { { base : "column" , sm : "row" } }
128+ gap = { 2 }
129+ justifyContent = "center"
130+ alignItems = "center"
131+ >
164132 < NumberInput
165133 inputMode = "numeric"
166134 value = { quantity }
@@ -183,14 +151,29 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
183151 </ NumberInputStepper >
184152 </ NumberInput >
185153 < LightMode >
186- < Button
187- isLoading = { isLoading || claimMutation . isLoading }
188- isDisabled = { ! canClaim }
189- leftIcon = { < IoDiamondOutline /> }
190- onClick = { claim }
191- w = "full"
192- colorScheme = { primaryColor }
193- fontSize = { { base : "label.md" , md : "label.lg" } }
154+ < Web3Button
155+ colorMode = { colorScheme }
156+ contractAddress = { contract ?. getAddress ( ) }
157+ isDisabled = { ! canClaim || isLoading }
158+ action = { ( cntr ) => cntr . erc1155 . claim ( tokenId , quantity ) }
159+ accentColor = { accentColor }
160+ onError = { ( err ) => {
161+ console . error ( err ) ;
162+ toast ( {
163+ title : "Failed to claim drop." ,
164+ status : "error" ,
165+ duration : 9000 ,
166+ isClosable : true ,
167+ } ) ;
168+ } }
169+ onSuccess = { ( ) => {
170+ toast ( {
171+ title : "Successfully claimed." ,
172+ status : "success" ,
173+ duration : 5000 ,
174+ isClosable : true ,
175+ } ) ;
176+ } }
194177 >
195178 { isSoldOut
196179 ? "Sold out"
@@ -208,7 +191,7 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
208191 : claimIneligibilityReasons . data ?. length
209192 ? parseIneligibility ( claimIneligibilityReasons . data , quantity )
210193 : "Minting Unavailable" }
211- </ Button >
194+ </ Web3Button >
212195 </ LightMode >
213196 </ Flex >
214197 { activeClaimCondition . data && (
@@ -228,10 +211,9 @@ const ClaimButton: React.FC<ClaimPageProps> = ({
228211
229212const ClaimPage : React . FC < ClaimPageProps > = ( {
230213 contract,
231- expectedChainId,
232214 tokenId,
233215 primaryColor,
234- secondaryColor ,
216+ colorScheme ,
235217} ) => {
236218 const tokenMetadata = useNFT ( contract , tokenId ) ;
237219
@@ -283,9 +265,8 @@ const ClaimPage: React.FC<ClaimPageProps> = ({
283265 < ClaimButton
284266 contract = { contract }
285267 tokenId = { tokenId }
286- expectedChainId = { expectedChainId }
287268 primaryColor = { primaryColor }
288- secondaryColor = { secondaryColor }
269+ colorScheme = { colorScheme }
289270 />
290271 </ Flex >
291272 </ Center >
@@ -307,22 +288,18 @@ const Body: React.FC<BodyProps> = ({ children }) => {
307288interface EditionDropEmbedProps {
308289 contractAddress : string ;
309290 tokenId : string ;
310- expectedChainId : number ;
311- colorScheme : string ;
291+ colorScheme : ColorMode ;
312292 primaryColor : string ;
313- secondaryColor : string ;
314293}
315294
316295const EditionDropEmbed : React . FC < EditionDropEmbedProps > = ( {
317296 contractAddress,
318297 tokenId,
319- expectedChainId,
320298 colorScheme,
321299 primaryColor,
322- secondaryColor,
323300} ) => {
324301 const { setColorMode } = useColorMode ( ) ;
325- const editionDrop = useEditionDrop ( contractAddress ) ;
302+ const { contract : editionDrop } = useContract ( contractAddress ) ;
326303
327304 useEffect ( ( ) => {
328305 setColorMode ( colorScheme ) ;
@@ -348,9 +325,8 @@ const EditionDropEmbed: React.FC<EditionDropEmbedProps> = ({
348325 < ClaimPage
349326 contract = { editionDrop }
350327 tokenId = { tokenId }
351- expectedChainId = { expectedChainId }
352328 primaryColor = { primaryColor }
353- secondaryColor = { secondaryColor }
329+ colorScheme = { colorScheme }
354330 />
355331 </ Body >
356332 < Footer />
@@ -361,18 +337,16 @@ const EditionDropEmbed: React.FC<EditionDropEmbedProps> = ({
361337const urlParams = new URL ( window . location . toString ( ) ) . searchParams ;
362338
363339const App : React . FC = ( ) => {
364- const expectedChainId = Number ( urlParams . get ( "chainId" ) ) ;
340+ const chainId = Number ( urlParams . get ( "chainId" ) ) ;
365341 const contractAddress = urlParams . get ( "contract" ) || "" ;
366- // default to expectedChainId default
367342 const rpcUrl = urlParams . get ( "rpcUrl" ) || "" ;
368343 const tokenId = urlParams . get ( "tokenId" ) || "0" ;
369344 const relayerUrl = urlParams . get ( "relayUrl" ) || "" ;
370345
371346 const ipfsGateway = parseIpfsGateway ( urlParams . get ( "ipfsGateway" ) || "" ) ;
372347
373- const colorScheme = urlParams . get ( "theme" ) || "light" ;
374- const primaryColor = urlParams . get ( "primaryColor" ) || "blue" ;
375- const secondaryColor = urlParams . get ( "secondaryColor" ) || "orange" ;
348+ const colorScheme = urlParams . get ( "theme" ) === "dark" ? "dark" : "light" ;
349+ const primaryColor = urlParams . get ( "primaryColor" ) || "purple" ;
376350
377351 const sdkOptions = useMemo (
378352 ( ) =>
@@ -398,20 +372,24 @@ const App: React.FC = () => {
398372 />
399373 < ChakraProvider theme = { chakraTheme } >
400374 < ThirdwebProvider
401- desiredChainId = { expectedChainId }
375+ desiredChainId = { chainId }
402376 sdkOptions = { sdkOptions }
403377 storageInterface = {
404- ipfsGateway ? new IpfsStorage ( ipfsGateway ) : undefined
378+ ipfsGateway
379+ ? new ThirdwebStorage ( {
380+ gatewayUrls : {
381+ "ipfs://" : [ ipfsGateway ] ,
382+ } ,
383+ } )
384+ : undefined
405385 }
406- chainRpc = { { [ expectedChainId ] : rpcUrl } }
386+ chainRpc = { { [ chainId ] : rpcUrl } }
407387 >
408388 < EditionDropEmbed
409389 contractAddress = { contractAddress }
410390 tokenId = { tokenId }
411- expectedChainId = { expectedChainId }
412391 colorScheme = { colorScheme }
413392 primaryColor = { primaryColor }
414- secondaryColor = { secondaryColor }
415393 />
416394 </ ThirdwebProvider >
417395 </ ChakraProvider >
0 commit comments