How to create a complete NFT project - smart contract, delayed reveal, split funds, deploy

hey what's up everyone and welcome back to another video in today's video we're gonna go over a complete guide on creating an nft collection along with building a claiming application where users will be able to claim this nft we're going to be taking previous videos that we've done before and combining them into one complete project by the end of this project you'll have a front-end application where someone can claim an nft and this will be hosted live we're going to use versel to host our web app we'll also link a demo one down in the description if you want to go and test it out so the things we're going to be covering in this video is when setting up a split contract in case you are creating an nft collection and you need to share the earnings or revenue from this nft collection the split contract will allow you to pay out certain wallet addresses a certain percentage and this can be done all on chain through the split contract will then create an ERC 721 smart contract or an nft drop which we will then create some nfts will give them pre-revealed metadata which means everyone will have a non-revealed nft when they claim and will reveal the nft at the time we choose we'll also build a front-end application where a user can claim these nfts will set up claim conditions and what the claim conditions we'll go through each and every claim condition and how to use them will also display what claim condition and what the requirements are on our front-end application as well and again by the end of this you should be able to deploy your very own NFD collection and put it up on a domain that you can share with people to claim your nft before we get started let's take a quick look at a demo of what the end result of our nft project will be so right here on my computer we have our nft project or collection this is actually deployed on for sale with with our own domain here which is just nft collection for sale we'll link this down in the description if you want to go and check it out uh here you can see we have a card here that has some information of our smart contract the title the description it also says what claim phase we are in what the price is of that claim phase how much tokens have been claimed how much total token there are in this contract and down here it says connect wallet to claim so we have a connect wallet up here in the top right we'll connect with our metamask wallet you can see once we connect with our metamask wallet it'll let us know if we are eligible to claim right now we're in a special clean phase which is a public claim with allow list discount and what this allows you to do is override certain wallet addresses to have different claim conditions so initially if we disconnect again and see here uh public price is 0.025 but with the wallet connected you can see because this is a special wallet it is 0.1 so we can change the price and everything accordingly you can see here we have a claim button you can also select the quantity we have have it maxed out at 2 right now because that is the max that you can claim within this phase so if you do one we can hit claim nft you see a transaction comes and we can confirm and you can see that the transaction is going through and once we have claimed then of T it brings us to our profile page where we can see all the nfts that we have collected uh the profile page is just this my nfts link up here it'll show a shortened uh truncated version of our wallet address it'll show all of our nfts so if I or if we come back to my nfts I switch wallet here you can see it connects to a different wallet and this wallet here only has one nft in it so again that was just a quick example of what we're going to be building a very simple nft collection but a front-end application where you can claim these nfts view the different claim phases and even view the nfts that a connected wallet owns so without wasting any time let's jump back on the computer and get started so first thing we're going to do here is we're going to head on over to thirdweb.com and we're going to deploy ourselves a split contract now if we scroll down here under marketplaces you'll see split here and the split contract allows us to put in a bunch of wallet addresses so say you're working with a team for your nft collection you have maybe your main payout wallet and maybe you hired an artist a developer or marketing team or whatever different positions that you need to pay out with the split contract all the funds from your nft collection are going to go directly into this contract and you can set up the different wallet addresses and percentages of the total earnings that each wallet address should get and with the split contract you can distribute those funds directly to those wallet addresses uh with one click so with the split contract we're going to hit deploy we're going to name this so we're going to name this uh we'll name it nft collection split and we'll give it a symbol here I'll just call it split and you can see here split settings we have to define the recipients and share percentages for each contract so in here you can put the wallet address and then in here you're going to put the total amount of percentage that they that wallet address should be getting so I have some wallet addresses here and I'm going to do say this is our main wallet so we'll do 50. we'll add a recipient here we'll do another wallet address we'll say this one gets 10 I will add another one we'll say this person gets 15 and then we'll add one more and we will say that this person will get the remaining one um and that's 25 percent so all your wallets here should equal a total share of 100 so you just want to make sure that you divvy up everything accordingly to the wallet addresses and you can always check the total down here so if I make it five percent you can see it only reaches 80 and we need it to reach 100 so make it 25. now for this we are going to deploy this on the Mumbai test net this is just what we're going to be using for this tutorial but over here in this drop down you can select the blockchain or network that you want to deploy your contracts to again because this is all going to be part of one project you do want to deploy everything on the same network but again we're going to choose Mumbai and select deploy now once the transaction comes up go ahead and confirm it and sign the message to add it to your dashboard and once it has been deployed you'll be brought to your contract dashboard here now in here you can on the left hand navigation under extensions there's balances and this is where we'll see what the total funding of this contract is and you can see down here the wallet recipients and the percentages according to those wallets once this contract is filled with the earnings from your nft collection you'll be able to distribute uh the funds to the wallets accordingly but back in our overview page here at the top we're just going to need to copy this contract address and save it on the side we'll need that for when we create our nft contract so that does it for the split contract we're going to leave it here for now I'm going to open up a new tab here and we're going to browse contracts again now that we have our split contract set we're going to create our nft collection and the what we're going to use is the nft drop contract now if we click on it you can read a little bit more about the nft drop contract but what the nft drop contract is is an ERC 721a standard smart contract so similar to like the pfp nft collections out there this is going to create ERC 721 tokens so each nft in this collection will be its own individual non-flungible token uh different from an ERC 1155 which is kind of a semi-fungible token again an ERC 721 allows us to create an individual token for each nft within the collection now in the top right we'll hit deploy you can name your nft collection here we'll just name it nft collection uh we'll give it a symbol we'll call it nft C and then we'll add a description and just put this is an example of an nft collection that we created using third web uh we can add an image here so let me grab one really quick I just have this artwork here that we're going to use now under royalties and primary sales this is where we can switch the address that these funds are going to so royalties this is the address that will receive the revenue from royalties that are from that are earned from secondary sales so whether it's from a Marketplace or something this is the wallet address or the contract address that the royalties are going to go to so for our case we can copy the split contract and we can replace it by default it's the wallet address that is deploying the contract but we can make it the split contract that way the funds get deposited into that contract and we can then distribute them to the necessary audits we can set a percentage for royalties here so let's just say three percent and the primary sales we're going to do the same thing we're going to strange this to the split contract contract address here and again we're going to deploy this on the Mumbai test net you're going to select and make sure that this is on the same network as your split contract once that is set we'll hit deploy now confirm the transaction and you can sign to add it to your dashboard once that's been deployed will be brought to our nft drop dashboard here you can see that we have a contract checklist the first one is already completed which is just deploying our contract the next step is to upload our nfts so we have to head to the nfts tab to upload our nft metadata now you can click this link here or on the left hand navigation under the extensions we have the nfts tab right here so clicking on that you can see we don't have any nfts right now lazy minted to our contract but that is what we're going to do here so you can single upload nfts which will allow you to do them individually you can put the name the image description and you can add the property or trades here or you can batch upload and batch uploading you can download one of these example files here so you can download a CSV file or the Json file and there's some instructions here that we need to follow in order to create our metadata so we'll just download the Json file here and we can open this in our code editor so right here this is the example template that you get downloaded when you download the metadata for batch uploads so here you have the name of the nft the description of the nft the image of the nft and then you can add your attributes and everything here so each one of these you can see here is what is needed for one whole nft now your attributes you can just add an array of attributes here I'm actually going to remove attributes from our metadata here and we're just going to do a name description and an image so let me just delete this one as well so your name you can name this whatever you want so we'll just say nft you can give it a a number if you want to zero one one whatever you want to name it you can have the description here you can name this or give it whatever description you want and then you'll put in the ipfs hash here for the image with third web if we come back here I'm gonna open a new tab we're gonna click on storage here so with storage you can actually upload your own images and media to ipfs uh and you can do that all within third web here so to do that we'll just grab an image we'll drag it in here and then all you need to do is hit start upload once it's uploaded you'll be given the ipfs hash right over here you can copy that and that's what you can use in your code under the image here and again this is just a way to upload your own media you can drag in multiple Medias if you want and start that upload as well in return each one of those will get its own nft or its own ipfs hash you can copy that and you can put that in as well so I have an example one here that has 100 nfts uh the there's only three images so I just repeat the three over again but with yours again you will be representing the image with whatever image that nft is supposed to be but again I just have an example of 100 here we're going to save that and we'll head back to our nft collection here and we'll head to batch upload and we can just drag that Json file into there and you can see here we'll get a quick preview of all the images the nft the description and properties and everything if you had that set up so you can see here you can go through and look at all of your nfts once that is set you're going to hit next now this when you batch upload you can choose whether you want to reveal upon the mint which means that once someone claims this n of T they'll be able to see exactly what they got or you can do a delayed reveal and the delayed reveal means that every nft claimed will have a placeholder image and only when you choose to reveal the nft will the images and the metadata of the nft change so in this case we're going to do a delayed reveal you have to set a password this password is required when you want to actually reveal the nfts so we'll just set a password here then we just need to grab a placeholder image for our nft so we'll just say this here is our placeholder image we'll give it a name you can name it your project name or whatever you want I'm just going to say play holder image here you can give it a uh description so this is a placeholder example and from here we can upload 100 nfts we'll click on that a transaction will appear we just have to confirm it and once that is successfully done you can see here we have all 100 of our nfts they're all set to our placeholder uh metadata which is that image our placeholder name and description and they all have the same thing and you can see here we now have a reveal nfts button uh which will then reveal all of our nfts uh whenever we choose to do so we'll come back to that a little bit later on in this video so again we deployed our contract we now have all of our nfts here they have a placeholder image which we'll reveal later the next thing we need to do is set a claim condition so back on the left hand navigation here under the nfts tab in that extension section we have claim conditions Now by default there is no claim condition set so if you deploy an nft drop and you don't set a claim condition no one will be able to claim an nft including yourself a claim condition is needed to specify the conditions needed to claim an nft from this collection now if we hit add phase there is a bunch of different um claim phases that we can add we're going to go through all of them in this tutorial so you have a better understanding of each of them we're only going to set one of them now just so we can build our application and claim an nft but the first one and they kind of go in order going up here is the owner only phase now in owner only this means that the deployer wallet of the contract can claim nfts and it will cost nothing for that wallet to claim in nft and you can claim if we select it you can claim however many nfts you want for free you just got to pay for the gas for it so we'll just name this so we'll call it owner claim here and by default the date will start immediately so we're going to hit save phase and this is for if you are deploying out your contract and say you need to claim a set amount of nfts for your team or for distribution you can do the only owner mint here which will allow you to claim those for free uh we'll confirm this transaction to set that phase and once that is set you can see that is our currently active phase now going over allowless so allow list this is going to be where you can specify and put in a set list of wallet addresses that can claim the nft at the time so again this is for if you have a list of wallets you can specify that here you can specify a price and everything and a claim amount but we'll go into more detail because we are again going to go through all of these uh public with allow list means that public it's open to anyone to claim but you can add some special claim conditions to specific wallet addresses so we can make it public and let's just say the public price is 0.02 Matic we can make it so that a set list of wallet addresses have to or get to pay .01 Matic instead of the public 0.02 so you can add some special conditions to certain wallet addresses and then finally the public this just means that it's open it has a set price open to anyone and everyone and they can claim uh your nft but again we're just going to start with owner only here we save that phase and that does it for now for our nft drop contract next thing we're going to do is build out our front-end application tool that people can visit a domain or website and claim our nft right so I'm going to open up my terminal here let me just enlarge this so in our terminal here we're going to create our application so I'm going to run npx third web at latest create app we're going to give our project a name we'll call this nft collection app we're going to select the blockchain we want to use we're using evm since we're on the Mumbai test net and we're going to select uh next JS and a typescript for this application and once that's done we will change into our nft collection app here and open this in our code editor and in our code editor we'll head into our Pages folder here and go into our underscore app.tsx file now this is where we're going to set up the main things for our third web application here uh first thing is our active chain we're going to switch this to the chain that we deployed our contracts to which is the Mumbai test net now if you did deploy this on a separate chain you can always check out our chain list site and you can see what needs to be done whether you need to import additional chains but again we'll link down in the description more information around that so once we have that active chain set that's all we need to do really for this one here next in our file directory we're going to create a new folder uh we're going to call it const to hold our constants here which is just going to be a file that we call addresses dot TS and in here we're going to store our contract addresses we're only storing one in here which is just our nft contract address but if we have to store more contract addresses that we are going to use later on in our application we can just store it all within this one place to keep it nice and organized so we're going to grab that contract address so coming back to our dashboard here I'm going to copy that contract address of our nft collection we're going to come back here paste that in and save that there next we'll head in back in the pages folder to the index.tsx file and you can see here we have some template boilerplate code here actually if we run this if we run yarn Dev here we can take a look at our application and you can see here this is uh the boilerplate or templated code that you get with a little connect wallet button and everything but what we're going to do is just remove a bunch of this here so I'm going to actually delete everything within the main container div here and we're going to delete this connect wallet here and if I come back to our demo site here we're going to just create this little nav bar here first that has a link to our home page a link that will show my nfts only if a wallet is connected so if a wallet isn't connected we're not going to show my nfts because we won't know whose nfts to show so only when a wallet is connected will it show my nfts and guide that person to their profile page that will show their nfts so again we're going to create that nav bar first so back in our code editor here I'm going to in our file directory create a new folder we're going to call this one components and in that components folder I'm going to create a new file called navbar TSX and we'll create our nav bar here and in our nav bar we'll first create a container here I'm going to import the style sheet that we have so styles from our style sheet which is under Styles this style sheet right over here but in there we can then use a class name and set this to a container and within that container I'm going to create another div this one I'm going to give it a class name of styles dot navbar now I do have some styles that I have set up for this application if you want to just copy the same Styles you can copy the or check out the repo in the link down in the description but again you can just style this however you want for the time's sake of this tutorial everything has been kind of made already so within this navbar here again first on the left hand side we want to create a link to navigate us back to our home page so we're just going to make a link that will route us back to our home page there and then we'll just give our name for our link so we're just going to say nft collection and close that off then we're going to create another div here this one is going to have the class name of styles Dot nav links and in nav links we're going to have our little link that brings us to my nfts and then on the far right we will have an add our connect wallet button from third web so if we take a look at our application again oh we don't have it because we did not we didn't add it to our app here so back in our app underscore app.tsx we're going to add our nav bar right above our components here save that and there you can see we have our nft collection and our connect wallet button now we wanted to display our nav link our nav links only when a wallet is connected so to do that we can check if our app has a wallet connected and what we're going to do is we're going to first create a variable here called address and we can get the address of a connected wallet on our application by using the use address Hook from third web so what that will do is it will give us the wallet address of the connected wallet if there is one and if there isn't address will just be undefined so with that we can check if there is an address and if there is an address then we can show the link to the profile page and this is going to the link we're going to create this lit later on but we're going to link to profile and then the wallet address there and then this is just going to um say my nfts and we'll just close off that link there so coming back to our application we can check uh it doesn't show the link right now because we don't have a wallet connected once we connect a wallet you can see we now have our my nfts link which will bring us to our profile page that we will create a little later on so coming back to our demo application here next thing we need to do is create this card here which is going to be the card that we use to claim our nfts it's going to display all the information about claiming our nft and our nft itself from the image uh the name the description what claim phase we're in what the price is What's the total claimed and even show if we're eligible to claim or not so we're going to build all of that right now so back in our code editor we're going to head back to our index.tsx page and we're going to grab a few things first because we need some information to display first thing we're going to get is our address here so we're going to use the same thing store our address and use the use address hook we're going to get our contract so we're going to get our contract here and to get our contract we're going to use the use contract Hook from third web and all we need to pass through this is our contract address that we stored make sure we import use contract here now that we have our contract let's get the metadata of our contract this is going to be able to grab us the image the name and the description of our contract so with that we can store the data under a contract uh metadata we can check is loading and we can start at is contract metadata loading and with this we will use the use contract metadata hook and we just need to pass the contract that we're getting the metadata for which was the contract we got right up here next we need to grab what claim phase we're in so we're going to grab the active claim phase we're also going to grab the total Supply and the total claimed amount of the nft so we can display that to our user as well so we'll get the active claim phase first so uh we'll get our data and we'll call this active claim phase uh we can check is loading active claim phase and what we're going to do here is we're going to use active claim condition but we're going to use the active claim condition for a wallet because depending on the wallet connected there may be certain things that differ if we're doing like um a public with allow list or if we're just doing an allow list we want to make sure that we display what the claim condition for that specific wallet is and we just need to put in the contract that we're checking the claim condition for and because we're doing it for wallet we need to put in the wallet address that we're checking it against which is again the wallet that is connected to our app using the use address hook we can then get the total Supply here so get total Supply we'll check if total Supply is loading and we'll use the use total count hook here again just checking the that for the contract that we have from above and we'll also get the total claimed which is going to be uh we'll do right here total claimed and we're going to use the use total circulating Supply and again the contract is what we're checking it for we also want to be able to grab the max claimable amount of nfts for the connected wallet so we're going to create a variable here called Max claimable and this is going to we're going to parse in here just because we get a string back when we check it so under active claim phase there is a Max claimable per wallet so we can check this for each wallet and if there is none then we will again set it to zero but the what we get back from this Max chemical per wallet is a string we want to just parse in here to make it a number so that we can use it in some future functions that we create for our application so with some of this information already let's create uh parts of our application here so in here we're going to create I'm going to Center this so we're going to do div I'm going to create a class name and use the Styles dot main here in here we're going to first check one that are um metadata for our contract has a loaded so as long as contract metadata is not loading we will display a div here that we're going to give a class name of hero section oh styles that hero section and in here we're going to create another div this one has the class name of Styles dot Collection image and the image we're going to display the image using a media renderer from third web and we're going to set the media's source to the contract metadata dot image so again we can come back to our application here and we can already see that we have the image of our contract displaying right over here and we have this nice little card being made for us right next to the contract image here we're going to create another div and this div is going to have the class name of and in this div we're going to display the title of the contract so we can again just get the contract metadata and then we're going to do dot name and then we'll also display the description of our contract so we'll do contract metadata Dot description so coming back here you can see we now have the title of our collection and the description as well next we want to display our active claim phase but what we're going to check is to make sure that it is done loading so we're going to do active claim phase and we're going to see if our active claim phase is done loading if it is not done loading we're just going to show some loading text here and if the active claim phase is done loading we're going to create a div here and the first thing we're going to show is the claim phase that we are in and we can get the name of the claim phase from active claim phase dot metadata Dot dot name and now we'll get the name of the claim phase for us we can also display the price of the claim phase that we're in so we'll do price and we'll uh we'll have to do uh because the price is going to come back in a big number we have to convert that into um we're gonna have to convert that using uh ethers dot utils dot format let's import ethers here real quick uh format units and what we're going to do is get the active claim phase dot price and that will give us the price of the current phase that we are in so again coming back here we can now see the claim phase that we're in is owner claim the price is set to zero because again with the owner claim phase only the owner can claim and they can claim as much nfts as they want for free then below that active claim phase we're going to show the total Supply so we're going to check if the total Supply loading and the total claim loading um we're checking that they're not loading anymore and that we have the data to display if they are we'll show some loading text but if they are done loading here what we'll do is we will just show a little paragraph tag here will say claimed and will display this information here so first we're getting the uh total claim Supply so we're going to do total claimed Dot two number to get the number of that we're going to then get the total supply of the whole collection which is going to be total Supply Dot two number save that and then coming back to our app here you can see claimed 0 out of 10 100 have been claimed 100 was the total amount of tokens we had and we haven't claimed anything yet all right and then below this we want to add a button where a user can now claim the nft now we could just add a web 3 button here and just say uh claim nft now the web 3 button actually will save that we'll take a look so um the thing with the web 3 button is when it's uh when a wallet isn't connected it will show this connect wallet button here but if you want to show a connect wallet in like a nav bar or something it's kind of weird to have uh two buttons here so once we when there is a no wallet connected we want to maybe display something else so again just like we did with the nav bar we can check if there is an address connected to our application and if there is an address we can display our web button and if there is no address we can just display a prompt of texting that they need to connect their wallet so just like that we can now say hey connect your wallet to claim they can come up here connect their wallet and then we have a web 3 button now the web3 button isn't working right now it just has this loading spinner here and that's because the web3 button requires a few things to be able to function it needs one the contract address is interacting with which in this case is going to be our contract address and then it needs the action that it's going to perform on that address so in this case on our contract here we can specify that is one and ERC 721 token and then we can use the claim function and for this just this example to show we're just going to set the claim to one here later on we'll just create some buttons and inputs where this will be the amount that the user puts in but we'll set it to one we'll come back to our app we can now see that the button says claim nft if we were to click on that because we are one the admin wallet here so we should be able to claim one of these nfts a transaction will appear you can see we're not getting charged anything we just need to pay for the gas I'll hit confirm and there you go we claimed one nft we see that our claimed is now one out of a hundred and again we can claim another nft if we want because we're in the owner claim phase now maybe we want to display if a wallet is eligible or not so if I actually switch accounts here and I switch to a different wallet that isn't the owner wallet I don't know if I can or cannot claim this nft so what we can do is back in our code editor here we can get the claim eligibility reasoning so if I come back up here under our Max claimable I'm going to get the data of the claim in claimant and eligibility I will check the loading of that as well and we'll use the use claim ineligibility reasons hook and what we'll have to pass through this is the contract we're checking the claim eligibility for we'll also have to in here give it some so again the contract we're checking it for we'll have to also specify the wallet address which is the address that we're checking in for this could be an empty string as well so we'll put that uh and then the quantity that they're claiming uh for this example here we're just saying that someone's claiming one uh but we will then set that to the quantity that is being claimed but again we can check this claim eligibility and what this claim eligibility reasoning is going to give us back is an array of the reasoning why someone cannot claim if they are ineligible now the array will be empty if they are eligible so we can use that here where if there is an address we will also check to see if they have any claim ineligibility so we're going to check that is claim eligibility uh loading and if it is loading uh we'll just say loading here if it's not loading we'll also check if claim eligibility uh length is greater than zero and if it is greater than zero we're going to display that reasoning so if we go claim eligibility we can map through that reason and display the reason why they are ineligible if they are eligible we'll take that web 3 button we're going to uh we'll create a div here because we're going to add a few more stuff we'll add that web3 button in here we'll also add some text saying that you are eligible to claim and we can add in here and then we'll just say you are eligible to claim and then we can show the max claimable here which is the variable that we set earlier of Max claimable up here without we're getting from our active claim phase so you can see coming back to our app uh we now see this uh phase here there's no button showing and it says this address is not on the allow list because again this isn't the owner or the deployer of this contract but if we switch back here we'll let it load uh you can see you are eligible to claim the Max claimable uh it is it doesn't have a number here just because it is set to unlimited because if it is an owner claim right now but once we go into the next few phases uh this will be a the number that we set for the max clean now we also want the user to be able to choose and select how much nfts they can claim so we want to create a little input here where a user can select that so um right up below this eligible claim here we're going to create another div I'm going to give this a the class name Styles dot uh claim container in that claim container I'm going to create another div this is going to have the class name of styles dot claim value and then we have our web 3 button that is going to be right next to this so in this claim value here we're going to create a button where are we right there a button uh this button is going to be our decrement button uh we'll also have our input here and then we'll have another button which is going to be our increment button uh the buttons I'm going to give a class name of styles dot claim button we'll just copy this and set it for the increment button as well and then for our input we have our number our value and we have our class name which is going to be uh claim input so taking a look at our app here we have our little input field and we just need to create some functionality and everything here and set whatever amount that a user has here to the amount that they are going to claim so coming back to our code editor here I'm going to scroll up to the top I'm going to do this above our claim inegeability we're going to create first our states here for our claim amount so we'll just do uh clean quantity and we'll set our import use State here we'll set the default to one that would just be our default for a claim quantity then we're going to create a increment here which is going to increment uh our claim amount but we also want to check if our claim quantity is less than the max claimable then we will increment it um and if it's not then we are not going to increment it because we don't want someone to be able to try and claim more than the max sent claimable value then we'll create our decrement here and if it's less than one we're just going to or if it's greater than one will allow them to decrement it um and decrease the value but we don't want them to also be able to claim a negative amount so we'll set that over there now coming down to the quantity here we want to make sure that this quantity that we're checking ineligibility for is set to our claim quantity so whatever they're selecting uh is what we want to double check if they are eligible for or not then down here the web 3 button this claim will be our claim quantity as well for our buttons here on our decrement button we're going to set the on click to decrement and our increment button will set it to increment our value here for our input will be our claim quantity so again taking a look back at our app for the owner claim we won't be able to change this or anything because our Max claimable is set to unlimited so we won't be able to change this here but as we add on our newer claim phases we'll be able to increment this accordingly to what we set them to so the next thing we want to do is set up this my nfts page which is going to bring us to our profile page right now we don't have it set up so it's not going to show anything but again we want to be able to show uh what nfts a user has depending on their wallet that they have connected so coming back to our code editor here we're going to create a new folder in our Pages folder a card profile and within that profile folder we're going to create a new file I'm just going to call it wallet address in Brackets dot TSX and in here we're going to create that profile page so I'm going to create our profile page here we're going to import our Styles here and give this a styles of container now in our profile page again we want to display the owned nfts of the wallet connected so we'll first have to get the wallet address of the connected wallet and then using the and then we'll get the owned nfts of this wallet so we'll get the owned nfts and to get that we're going to use the used owned nfts Hook from third web which is going to check one the contract address that we are going to check which we need to get our contract address first so let's get our contract address here using our use contract hook so we got our contract and then we're going to check that the owned nfts uh on the contract so we're checking what um the nfts owned from that contract from that are owned by the wallet address that is connected to our application so again down here we're going to first check if we have an address connected to our app because if we if we don't have an address we'll just say um we'll give it a div here and then we'll say that they have to connect a wallet so we'll set the class name to Styles dot Main and now in there we'll say [Music] um please connect your wallet but if you do have an address or a wallet connected we can then display uh one the we'll just give it a title of profile and then maybe we want to display the user's address um so we can say wallet address now we want to display maybe a shortened version of the user's address so we can just create our own truncate address here which will take our address and just slice it up to be a bit shorter and we will give it our address or empty string here below that we'll just create a horizontal line create another div under here and then we'll display uh my nfts below that we're going to create a div with the class name of grid which is going to give us a grid here that we can create and we're going to use that grid to display our nfts so the first thing we want to do is make sure that uh we have all of our nfts loaded that we have owned so we're going to check uh is that we are not loading our own nfts anymore um if we are we're just seeing loading uh once we do have that metadata of our owned nfts we're going to check that owned nfts dot length is greater than the zero uh because if they don't own any nfts we're just gonna show that they own no nfts but if they do own some nfts then we will map through all of those nfts and then we will show here I will create a oops a div here that will show the nfts so we're first going to give it a key which is going to be nft dot to metadata dot ID we'll give this a class name of styles Dot nft card and in here we're going to display the image and we can display the image of an nft using third web nft media uh we just need to pass the metadata here and we can get that from the nfts metadata and then we'll display the name of the nft which we will get from the nft DOT metadata.name okay so coming back to our application here uh we can check my nfts you can see here that it loads our profile with the wallet address and it displays my nfts which right now is just the one n of T that we owned that we minted with are through the admin mint so now we have our application working let's go through some of the different claim phases and how they work so let's just say you claimed all the nfts in your owner admin phase we can come back to our application here you can also come into nfts here in your nft tab under claim you can claim the amount that you want to claim with your admin wallet now let's say you did your admin claim actually Let's do let's say we wanted to claim 10 for ourselves so we'll claim nine more here we'll confirm that transaction and we claimed our 9nft so we can actually check our app here you can see that uh we have 10 out of 100 now claimed if we check our nfts you can now see we own a 10 because we owned uh we just claimed that those tend to our admin wallet which is that one right there now let's look at our other claim phases uh so coming back to claim conditions in the left hand navigation here we're going to set up the next claim phase so we're going to add face we're going to do allow list and now allow list allows us to set a specific amount of wallets that can claim in this phase now we can select a start date so you can choose when this is going to start automatically uh we can say this is our allow list phase we can charge for our allow list so let's just say 0.01 Matic let's say there are only going to be 10 nfts that are sold in this phase so if you're you can allocate more for your allow list so let's just say you have 50 wallet addresses that can collect one nft each but you're only going to give it or allow the first um 30 people to collect the nft that are on the allow list so you can limit to how many nfts will be actually available within this phase you can specify that right over here now this is where you can add the allow list so we have to edit the claimer snapshot and in here you can download an example of the snapshot here which is just going to give you a let me open ours up here which is just going to give you the address and the max claimable for that address so you can specify what wallets can claim and how much they can claim uh in that phase you can also do the optional price override and currency what that will allow you to do is it'll add two more fields that will allow you to put in the price that that wallet has to pay so you can give different prices per wallet and then you can put in the currency that you want them to pay in we're just going to upload our very simple snapshot here which is two wallet addresses and they can each claim for uh two maximal claims you can see the price and the currency is set to the default which is whatever we set up uh in our phase so we're going to add those two snapshots there so those two wallets or addresses are in our snapshot they have to pay .01 Matic and we can save that phase here we'll confirm that transaction there and you can now see that we have the allow list claim phase which is currently active right here so if we come back to our application here you can see the claim phase has changed we are now in the allow list claim phase uh the price is now 0.01 we still have claimed 10. we right here have that we are eligible to claim and the max is 2. so you can see we can toggle up and down here uh the max that we can do is two and if we switch to another wallet here that isn't on our allow list we can see this address is not on the allow list and we can't claim any nfts right now so that's the allowless claim phase again you can set the wallet addresses and you can even set how much nfts that wallet can collect along with if they need to pay a different price so maybe you have a certain amount of wallet addresses that get to pay a different price compared to the other wallet addresses on your allow list we'll do the next phase so we'll add a phase here which is public with allow list and now public with allow list um what we can do here is let's just specify again maybe there's going to be uh 50 nfts in this collection and the public price is 0.02 and we'll say maybe we can claim um three nfts per wallet here now we're gonna do uh edit now this uh what we set up here this is available to the public meaning anyone can claim an nft as long as they meet these requirements up here what we can still set is some overrides with a snapshot here so what we can do is download the templated um CSV files here and we can then specify let's open up this one here we can now specify the wallet address the quantity and then the price that they get to pay so let's just say we still have some wallets that were on our previous allow list we still want to give them the allowless pricing but the quantity um and the time that they have to claim it is going to be as long as there's still inventory left to be claimed but they can still claim at their point uh zero one um cost there so if we come back here let's add this in here so again it's the same two wallets they can still claim two at their point zero one cost everyone else can claim uh up to three at the point zero two cost so we'll save that phase here again confirm the transaction to save it we can come back to our application and back in our application you can see now we are in that public with allow list phase the cost for this wallet is .02 and the max claimable is three but if we change to one of the wallets that we had on that allow list you can see here the price for this wallet because it was on our allow list is .01 and the max claimable is 2 at that cost so that's where public with allowless you can make special claim phases still available for certain wallet addresses but the phase is still open to the public and then finally the last phase is going to be our public phase so if we add a phase and go to public this is where we can set up um the amount of nfts so let's just say it's the remaining 90 nfts here and the public is still 0.0 to Matic and you can claim three per wallet so when we save this phase this is going to go for every and any wallet connected to our application this is what the claim criteria is going to be so we can confirm this transaction here let that public phase save and this means no matter what wallet that we have connected can claim up a Max of three nfts and you can mint it 4.02 so coming back to our app here you can see we are now in public phase 0.02 now for that wallet that we had that was on the Lawless before eligible to claim and then we can and then we can claim up to uh three of those nfts if we want to so let's just say we claim three here we'll confirm this transaction uh you can see we're getting charged 0.06 Matic for the three nfts we'll confirm that you can see the count went up to 13. uh we can no longer claim because we claimed our three so if we come back to our nfts here we should have actually we'll have a lot more now because we had the 10 that we previously had once your collection let's just say your collection uh sells out all the nfts have been claimed now it's time to reveal what nfts everyone has gotten so to reveal your nfts right now again they have all these placeholder images uh we're gonna come back to our contract here which is our nft collection contract we're coming back to the nfts tab and if you remember from earlier we had um the reveal nfts button here which will allow us to reveal nfts now review nfts this is going to reveal the whole collection so if you do this while you are still selling nfts those nfts that haven't been claimed will still also be revealed so you want to make sure that when you reveal nfts you are set and ready to reveal everything because all of the metadata of the unclaimed nfts will also become available so let's reveal nfts um you're going to select your placeholder image batch which is the batch of nfts here uh you're going to put in the password that you created to reveal it so again remember you don't want to forget that password and then we're going to reveal nfts just confirm that transaction to reveal everything and there you go you can see here in our nfts tab now all the image and metadata of those nfts have been revealed coming back to our application here you can now see that we have all of those metadatas revealed for those nfts as well so again that is how you're going to reveal your nfts uh once you are ready to do so now let's go back to our split contract right and under our split contract let's go under the left hand navigation under the extension section we'll go to balances and you can see here our balance which is only 0.06 because that's the only uh transaction that we did that had some form of payment in it um you can see here that we have .06 which was the two nfts that we had previously or three entities that we had previously purchased in our application all those balances and funds went into this uh contract here and you can see down here um this wallet that's connected is supposed to receive .03 of the 0.06 because again we selected that our main wallet gets 50 of that and what will happen is we can distribute funds here so once you are ready to distribute funds to your team or whatever wallets you need to distribute them to you can distribute funds here confirm that transaction we should be receiving point to zero three so once we have received those funds and you can see that the transaction has successfully gone through and there you go we have successfully distributed the funds uh and everything has gone to their respective wallets so we know our split contract works we know all of our claim phases work um but let's just say you know we build these applications but we want to be able to actually host them on a domain and make it live and shareable to other people so deploying this uh our application here we're going to deploy it on versl so coming back to our application here I'm just going to open up my terminal and we're going to run versel now if you haven't deployed or used Purcell before We'll add a link down in the description below all you need to do though is once you have everything set up and installed is to run for sale It'll ask us if we want to deploy our application here we can just hit yes you can then choose your GitHub account that you're going to deploy to you can choose if you're going to link it to an existing project we're going to hit null because this is a brand new project and we're going to name our project here so we're just going to call this uh third web and then we'll call it nft collection test which directory is our code located uh we'll keep it there and this is going to take some time but it's going to upload our application actually do we want to modify settings we're going to hit no for this and you can see we can view the the inspect site here to see its progress so you can see here this is the status of our deployment which is its building and you can watch it through here as it goes through and builds out your application but once it is done it'll give us a link to our deployed app and then you can again use that domain and share it or set your own custom domain through versal as well so this is going to take some time uh we'll come back and we will click on the link and see if it works once this is finished oh and it looks like we got an error so we can check again the logs here let's just check what is going on here so it looks like it failed to compile missing keep prop okay so I think we mapped through something here and forgot to add our key okay so it's actually under our claim eligibility here we mapped through the reasoning and didn't set a key for when we displayed our reason here so we're going to do index here and we'll just add a key of index so that should be good and then we'll just uh rerun this and try again so we'll come back here and then which I redeploy here cool so again we'll come back once this is done and there you go we have successfully deployed our app with first cell so we can click the visit button right here let's open this up you can see we have our nft collection showing the description we are in the public phase 0.2 13 out of 100 we are have the prompt that says connect our wallet we can connect our wallet here and you can see well one we did our claims already for this wallet so let's switch here let's switch to a wallet that hasn't claimed much nfts yet and there you go we have our 0.02 13 we're eligible to claim with a Max of three we can toggle through claymore3 uh if we check my nfts do we have any in this one we don't have any nfts in here but we can come back we can claim one nft we're paying that .02 for one we can confirm the transaction and there you go you can see we are now claimed 14 out of 100 come to our nfts uh and then we have the one nft that we have collected and there you go we created a full nft collection project from start to finish from creating our smart contract we went through how to build a front-end application to claim these nfts we also did a split contract in case you're working or with a team that you need to split up the earnings or funds with you can use a split contract to do that we also went over the different claim conditions and phases all the way from admin minting to allowless public with allowless and the regular public claim phase so with all of this and put together we also deployed this application using versel which means you can share this link and domain with others people and other people can go ahead and claim these nfts we'll also add a link down in the description to the one that we just deployed so if you want to check it out and give it a go you can use that as well but again I hope you folks enjoyed this video you found some value in it and if you did don't forget to give this video a thumbs up hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on tutorial videos just like this and if you haven't joined our Discord community and joined the amazing community of Builders just like yourself We'll add a link down in the description below as well if you need any help or support you can always drop your questions down in there and we'll be happy to help you out but again I hope you folks enjoyed this video and until next time see ya

Channel: thirdweb

Views: 8,873

Keywords:

Id: w-OCxoAx1PA

Length: 68min 2sec (4082 seconds)

Published: Wed Jun 21 2023