Try-Catch Error Handling in Smart Contracts: A Step-by-Step Guide

In blockchain development, try-catch blocks are essential for handling errors and exceptions in smart contracts. In this article, we will explore how to implement try-catch error handling in a smart contract using Solana's Candy Machine protocol.

Setting Up Try-Catch Blocks

-----------------------------

To set up a try-catch block, we need to define a variable that will hold the result of our operation. Let's call it `mintResult`. We can then use this variable to catch any errors that occur during the execution of our smart contract.

```javascript

const mintResult = null;

try {

// code here that may throw an error

} catch (error) {

console.log('Error:', error);

toast.error('Mint failed');

}

```

In this example, we define `mintResult` as a variable and set it to `null`. We then use a try-catch block to catch any errors that occur during the execution of our smart contract. If an error occurs, we log the error to the console and display a toast notification with an error message.

Defining the Candy Machine Contract

-------------------------------------

In this example, we are using Solana's Candy Machine protocol to create a new NFT collection. We need to define a function called `mint` that will handle the creation of new NFTs.

```javascript

function mint(address, candyMachineAddress, candyStateAddress) {

const candyMachine = new Metaplex.CandyMachine(candyMachineAddress);

try {

const state = candyMachine State();

if (state.collection === null || state.collection.length === 0) {

throw new Error('Collection is empty');

}

const mint = candyMachine.Mint(address, candyStateAddress);

return mint;

} catch (error) {

console.log('Error:', error);

toast.error('Mint failed');

return null;

}

}

```

In this example, we define the `mint` function that takes three parameters: `address`, `candyMachineAddress`, and `candyStateAddress`. We use a try-catch block to catch any errors that occur during the execution of our smart contract. If an error occurs, we log the error to the console and display a toast notification with an error message.

Defining the Candy Machine State

---------------------------------

In order to create a new NFT collection, we need to define the state of the candy machine. This includes the address of the collection and any other relevant information.

```javascript

const candyGuard = {

candyState: {

collection: [

{

mint: 'Solana Monkey Business',

description: 'A monkey wearing a solana wallet',

properties: [' rarity', 'color'],

attributes: ['name', 'image']

}

],

authority: {

address: 'Qazi Wallet Address'

}

},

group: []

};

```

In this example, we define the `candyGuard` object that represents the state of the candy machine. We include the address of the collection and any other relevant information.

Calling the Mint Function

-------------------------

Now that we have defined our try-catch block and our candy machine contract, we can call the mint function to create a new NFT.

```javascript

const mintResult = await mint('Qazi Wallet Address', 'Solana Candy Machine Address', 'Solana Candy State Address');

if (mintResult) {

console.log(`Minted NFT with address ${mintResult}`);

} else {

console.log('Error minting NFT');

}

```

In this example, we call the `mint` function with the required parameters and store the result in the `mintResult` variable. If the result is not null, we log a success message to the console. Otherwise, we log an error message.

Enabling Try-Catch Error Handling

-----------------------------------

To enable try-catch error handling in our smart contract, we need to add a catch block to handle any errors that occur during execution.

```javascript

try {

// code here that may throw an error

} catch (error) {

console.log('Error:', error);

toast.error('Mint failed');

}

```

In this example, we add a catch block to our smart contract that catches any errors that occur during the execution of our contract.

Conclusion

----------

Try-catch error handling is essential for creating robust and reliable smart contracts. By using try-catch blocks, you can handle errors and exceptions in your code and prevent your contract from crashing. In this article, we explored how to implement try-catch error handling in a Solana Candy Machine protocol smart contract. We defined a try-catch block, called the mint function, and enabled try-catch error handling in our smart contract.

"WEBVTTKind: captionsLanguage: enin this video you guys are going to be making your very first nft collection on the Solana blockchain not only that but these nfts you can use your own custom images and your own personal attributes and it's going to be made simple because you're going to be using Solana candy machine from there I'll show you guys how to price your nfts and when do you want them to be revealed if you want a delayed reveal and you'll also get this sick front end while I'll show you guys how to make the mint functionality so that means users can buy the real nfts that you're creating and again as a disclaimer we're going to be using Solana monkey business as practice right these aren't real Salon monkey business nfts so be sure to make your very own and let's get started all right so this is the app that we're going to be building today it is a real nft collection with three items right and it's pretty simple all you do is connect your Phantom wallet and make sure you have some Solana and the process uh I already bought all the nfts for this collection but all you have to do is click this button and it's conditionally rendered so that it's gonna say mint but when it's sold out it will change to sold out and I'll update you know the minted items and the cost to zero and let's show you guys that this is a real nft because if I go to my collection look at that I have a Solana Monkey Business 1001 it's the one right here as you can see and again just a disclaimer this isn't a real Solano Monkey Business nft right over here but this just to Showcase uh that you can make whatever nfts that you want so let me show you how to get started and that's awesome so how do you get started with our app we have something that's going to make it super simple for you guys all you have to do is type in npx at cleverprogrammer and for you make sure you say at latest so that you have the latest version with all the builds that are up to date so go ahead and hit enter and you should see something like enter your email address which I'll do right here your name I'll put Lance Toledo and what project would you like to initialize so we have tons of tons of projects that you guys can do and get started and add to your own portfolio right but what we're going to do today is of course the Solana nft drop so hit Solana nft drop hit enter and wait just a moment because it might take a while to run some Scripts and once it's done it's going to open a new vs code for you and I'll jump right in when that's done all right so at this point you should have your repo downloaded using our CLI tool and you should see all these files here these are your starter files what you need to do next is we need to sign up for quick note so go ahead and open your browser like so and click on the link in the description to get your free account awesome so if you don't know quick note is a blockchain development platform that gives us things like an RPC endpoint which helps us connect directly to the Solana blockchain so let's go ahead and create a free account by clicking this button and once you do that and verify your email you should see something like this screen right here so let's make that bigger you know what just for you guys I'll even archive my old endpoint I understand the consequences archive endpoint to make it sure that you guys see the same screen so after you verify your email you should see start by creating an endpoint go ahead and click that and as you can see there's multiple different change that quick note supports uh from ethereum to polygon to bitcoin and what we want to do is Solana right here as you can see so click on Solana another key thing that you should note is that there's three different networks that we can work on with Solana it's the mainnet which is the real deal this is real money that you're using real Soul there's the test net and then there's the devnet as you can guess we're probably going to use the devnet so let's click on devnet hit continue on the bottom right here and once you do that you're going to see some add-ons nft fudge tool or across nft mint API we don't need that today let's go ahead and click create endpoint once that's done you should see a screen like this what we need to care about is this HTTP provider so go ahead and click this copy button and don't copy anything else if you lose it we'll come back to it so that's how you sign up okay so the very next thing we're going to do is we need to get set up with our Solana wallet so if you've done ethereum projects before you guys probably use metamask the equivalent that we're using today is something called Phantom wallet so Phantom is our wallet of choice as if I click on this tab right here you can see me open the wallet so if you already have Phantom skip ahead a little bit in the video to see what the next step is if you don't have Phantom all you need to do is go to a new tab and just say Phantom Chrome extension right so I'm using Google Chrome and if you click on this go ahead and click download here it says remove from chrome because I already have it so click download and make sure you save your mnemonic and sit don't share that with anybody by the way and make sure you create your wallet another thing that you're probably going going to have to do is click on Phantom go ahead and click on not that right here the icon and if you scroll you can go to developer settings and change the network to devnet because remember we're working on the devnet guy so make sure you click the devnet button and use that Network so once that's done you're all set up with Phantom and we're good to go so let me ask this out awesome so with that said I don't think we ever checked out the CLI starter file so go ahead and switch tabs to your vs code and we can do and make this a lot smaller and you know what let's bring this guy on this side so we can see him too and there we go cool so what you want to do is press command J or Ctrl J if you're on Windows and you should be on the CLI starter branch of this repo and all I have to do is say yarn to make sure you install all the modules which you should already have and just do yarn tab once you do yarn Dev you should be able to type in localhost 3000 and let's see what this looks like boom okay there's our app right cool and there's two modes if you go like this you can see that it's not salon and Monkey Business right we got crabs we have crabs instead of monkeys our goal today is to show you guys how to make your very own nft drop and fix these crabs and turn them into Solana Monkey Business nfts and remember they're not real Salon Monkey Business nfts they're just used to Showcase how to do that so you guys ready let's go ahead and get started all right so one of the first things you're going to notice is this connect wallet button right it doesn't work right we need to make use of our Phantom wallet and connect this exact wallet right if you look at this it says a tkz I should see that right here if you guys remember the demo so what I'm going to do now is show you guys how to set up your Phantom mod so the first thing we're going to need to do is let's understand how our app works so we can go over to my handy dandy whiteboard and let's understand how react components work so you can imagine components or your HTML or your divs as a parent child relationship so what I mean by parent child relationship is if you open up Pages you go to app.js this is your exact nft app right just completely blank this is what represents it right here okay this is app.js and let me fix this for a second for you guys poop okay what I want to do is show you guys and represent the app like so and if you already understand how to do this feel free to skip ahead a little bit it's where I start making the wallet connection but the first thing I don't have to do is understand that the parent is this app.js component right here Okay cool so once you understand that you can see that it's returning component but what's this right this component is actually your index.js right and then your index.js right which you're calling home is returning something called main so what do you think would happen right so the childhood app oops with the back child of app is actually a component called index .js right and index is returning main right oops keep doing that so it's returning main so let's put that here as well so it's returning me and what is Maine then so what would happen if I comment out main so am I still running this if I do this see boom We Lost main right it's gonna fail to compile because this entire page that we're seeing right here is the main component so let's go to the main component then Okay cool so now I see familiar uh HTML react components that look and make sense right so let's say we have something called header here let's go ahead and comment that up as you can see header is gone right and also the connect wallet button so keep that in mind all right we could easily remove the header it's gone we lost the connect multiple so we place it back it's there so how many children does the main.js have right it has one two three four five six right six components as its child right so we're only going to draw one two three four four actually we're gonna draw one two two of them all right so the main things that you want to know or look at is this arrow and this Arrow because this left arrow is going to be the header component and this right arrow is going to represent the nft display right why am i showing you this well because since you didn't build this from scratch you might not know where everything is so if I ask you guys where the hell can I edit this connect wallet button which component am I going to look The Entity display or am I going to look in the header three two one good job you said header I'm sure you said header right so if you said header that means you have to look in here because this holds the connect wallet button so if you understand that we should be good to go awesome so now that you understand the parent-child relationship of our current APP or you just skip the head because you're a freaking genius let's figure out where to work on the connect wallet uh button so the first thing we're going to do is head over to your index.js okay and once you're in your index.js we need to import a couple of things because we're going to use our endpoint right to have our wallet connect to the blockchain right so first we need to add and provide a couple things for this index let's provide those providers so the first I'm going to do is import yeah so come up to the top here and we can go ahead and import all of that stuff under here so we can say import this one's going to be called connection provider right and you're going to get it from Solana wallet adapter react this is a module or a package that you should already have if you use our CLI tool to do this right so if you look at our package.json there it is at Solana wallet adapter react right all the modules that you need for this app should be downloaded if you did the CLI tool which is why it's great so coming back to this and you know what we can go ahead and save and let's just zoom in so you can see the better how's that guys awesome and we go back up one cool so we got the connection provider and we also need another provider and this one's going to be called the wallet provider right because you also got to provide the wallet with our connection awesome so the next thing uh we want to add is the wallet modal provider if you ever saw me click on the Phantom wallet button right here or the connect wallet button a little modal comes up with all the available wallets right Isn't that cool right they give that for you so if you don't want to make that yourself save you some time by saying wallet modal provider okay and I'm gonna press tab because you're going to get this from Solana wallet adapter react UI right not just react react UI cool so that's the modal provider and now the fun part is you need to import what wallets are using all right so what wallet are we using guys did you forget it is Phantom wallet adapter right so there's a couple different other wallets but we're using Phantom so whatever walls you use add them right here so Soul flare whatever you like so from here just say salana wallet adapter wallets right because that's from that package and then from there we can get some CSS because remember how you saw it's that nice blue um color right we can give it the CSS you need you don't have to stop a button if you just do import uh quotes at Solana wallet adapter react UI slash uh Styles dot CSS I believe and I'll show you what happens if you don't have this so cool once that's done you should have everything you need for uh the connection of the wallet right here so the next thing we need to do is we need to set a couple States so let's set up this state it's called mounted so if you ever use the use State hook we're going to be using that now so we're going to set it up use State like so and our state is going to be called mounted and set mounted all right cool and then from there we can set the default state which you can put right here false okay so if I were to console log mounted it would actually be false because this is the initial state right here if you wanted to start at zero start at zero like this make sense that's our quick refresher so we have console log mounted uh what we need to do next is let's set up our wallet so we can set up all the wallets we have here by making a variable called wallets right technically I only have one but this is how I want to set it up so that you can add whatever you want so you can say constant wallets equals use memo right so we'll use memo is kind of like use effect and it's only going to return once without re-rendering the whole page so that's why we're using it and what we can do is set up an anonymous function like so and this can be an array and in this array you're going to put all the wallet adapters you want so let's put Phantom we can say new Phantom wallet adapter parentheses like so and comma and put this empty module right here and then from there that's it we set up our wallets all right we're going to use this in a second next thing we need to set up is uh we need to set up the snooze effect to fix that SSR error with next.js so in order to fix SSR error with next right so this one's not really related to Solana just make sure that you have this to remove any of those weird errors so let's just write a used effect and set up an empty Anonymous function there and inside here all we're going to do is just set mounted to True right and here comma empty module right so if you didn't use use effect use effect is going to run at three different points in the component's life cycle when I first load the page bam use effect is running this command okay when the component updates right so if anything changes I click a button or mint it's going to run it again all right set mounted true and when you remove a component or delete a component set mounted true that's when let's use effect runs but here's the catch right if you do this empty module here without putting anything in it's just going to run once so we only want this to happen once cool so after that's done we can go ahead and put in all of the providers we have on this page so we have a couple providers the first thing you want to do is add a connection provider like so and what we can do take that Main sandwich him in between like so Okay cool so we added our connection not done yet though we should add our wallet provider so let's add a wallet provider as well if you're wondering if you're lost you're like Lance what is he what are you doing it's all coming from here we set up all the Imports already so don't stress don't stress we got this so put in the wallet provider let's put in the main insides as well cool so we got that and last but not least we need to get this guy in here the modal itself so let's type in the wallet modal provider and you put that inside here wallet model provider of course we're going to bring Main inside there so it should look something like this take a moment pause if you need to go back if you're lost but I'm Gonna Keep it going guys so the first thing that we need to do is I saved and you can see we need to put an end point right so let's add our endpoint or our connection so if you press command b or control B the key thing here is our constant so click on constant.js and you'll see your RPC endpoint here so this is what we're going to use so we're going to use our RPC endpoint go ahead and click remember that thing you copied we're going back to that I'm going to hit copy again but if you have it saved still go ahead and replace this metaplex devnet to your unique endpoint like so mine's called empty white Friday not sure what that means but that's my endpoint okay so I want to save that and you're gonna still see this error because now we have to provide that input right I'm doing this on purpose so you can see that what you need to do is that this takes in some props you can call it end point and set it equal to the RPC endpoint right so look at closely we're exporting this so you can actually just import that so if you look we're already importing it right here so I set it up thank me later right can I get a thank you Lance awesome thank you all right so like I was saying we can put our PC endpoint here and this is our direct link and now we have a different error which is good so now I can't read properties of undefined reading filter oh another thing that we need to do uh this is just best practice in config put equals object and say commitment confirmed to start pre-flight checks is what we could call it so hit save and then we still got the error because what we need to do is in our wallet provider let's go ahead and put in all the wallets so we can say wallets equals this it's going to take in all of the wallet adapters so let's say wallets okay another cool thing to have is something called auto connect because if you already have your Phantom connected it will automatically connect right it's kind of obvious right thanks Lance so let's go ahead and keep moving we're going to do the wallet model provider and another key thing that we want to do here is writing some conditional rendering so if we can say mounted right which is our state which should be true and Main like so like this boom okay so when mounted and main component exists you know we can load it cool so we're gonna save boom no more errors all right so now you shouldn't see the screen I hope you were able to understand that because that is the index.js part now the easy part how can we turn this button to the nice lovely Phantom uh connection button that we saw so press Ctrl B and let's head over to the component that holds this so quick question where can I find the connect wallet button three two one nice job you said header so let's go to header index.js of the header and you can see right all the stuff here The Styling you don't have to get overwhelmed all right let's scroll down look at some comments and look at this the wallet connect button goes here so what you need to do is go to the top and say import wallet uh multi multi button right here you can see the suggestion click it and it's going to Auto Import it for you wallet multi button from Solana wallet adapter react UI Red Save and let's remove this hideous button right and replace it with the component of the wallet multi button like so hit save what did I tell you guys look at that you see this right here let's maximize this and let's zoom in as well boom all right you see this connect button let's click on it Auto connected right because I already have my wall I can disconnect right I can go to a different wallet right look how easy that was so this one is 4au connect or are you there we go so let's just disconnect it and I'm going to go back to my normal wallet but I hope you guys liked that and understand how to connect your wallet to your front-end application so on to the contract okay so now for the moment that you've been waiting for if you click this video you want to learn how to make your own nft drop on the Solana blockchain right so what we need to do is let's go ahead and make a new tab and we're going to head over to beta.soul PG dot IO so click on this and you should see this screen right here so if you don't know Seoul PG is Solana playground it lets you create smart contracts build deploy and even test all of these programs from right here and now guess what they have Solana nft support they support Megaplex so that's what we're going to be using metaplex is what helps us create all these nfts a lot easier and we're going to use their tool called candy machine so the first thing you're going to do is click on this plus icon right here click and the project name you can call it I don't know nft Dash drop and you can click on anchor rust so also you can see that there's now python support for Solana so if you want to see our other video on that it should be in the link on the recommended browser go ahead and search for it anyways we're clicking anchor rust right now so click on that hit create oh already exists we can do uh nft Solana and then hit create boom so should see something like this still the same what we need to do now is go into the CLI tool right here right bring it back up and just write Solana or sorry sugar create Dash config this is the very first step it's going to use something called sugar and create the config for our app boom okay so now you're going to see a couple different questions how many nfts will you have in your candy machine uh you can just do three put as many as you want I'm gonna put three what is the symbol of your collection so this is like the abbreviation of your nft collection like I said we're making the Solana Monkey Business clone so our symbol is SMB uh seller fee basis points this is basically the fee that you have uh how much percentage you get after you mint the nft so say someone you mentioned nft then you sell it how much percentage does the owner get you can set it up like so so if I write 500 times this but the percentage times 100 you get this so this is technically five percent so you can say that uh do you want to use sequential mint index we can say no how many Creator wallets you have so let's say uh you can have four people that you made this nft drop with you can put all the wallets here I only have one just me let's just do one and now the Creator wallet address one so now you can take this wallet address from Solana playground and paste that in there like so cool so how much percentage does each Creator get like somebody is the artist maybe you want to give them a share they can get 50 and then you get 50. right but it must all the shares must add up to a hundred so since we're the only Creator we're gonna do 100. you can leave this empty hit enter and do you want your nfts to remain mutable meaning that they can change you can say yes and Bam look at that so now this thing should pop up other metaplex candy machine config.js Json cool and this is what we should see right now the next step that we need to do is we need to upload our assets to our candy machine so we can do sugar upload and we should see this here so if you already have your asset sets up assets set up go ahead and drop those files if you don't let me show you guys how to make your very own assets all right so you want to learn how to create your own assets for your nft drop all you have to do is this right what we need to do is if you're ever lost at all go ahead and search up the metaplex documentation right they already wrote a nice guide for you guys it's basically everything I'm talking about but in a little bit more detail and in written form right so we've already created a config what we need to look at is this one it's called preparing your assets and what you need to know is that you need a PNG file and a DOT Json file and these two have to like map together right let me show you what I mean so I actually provided you with that Json file so if I make this just a little bit bigger command B you can see this assets folder right here right click on it click on xero.json and there you go we have studious crab number one is the name and if you scroll down right here the URI is the zero dot PNG all right that's the image also shows 0.png as the image as well and what's the zero.pngland it's the studio scrub right here and that's also what's being rendered on the app studious crap yeah so the easy part for you is that we just have to edit this Json file before we update it yeah okay so if that makes sense this is what we're going to be doing next so what you need to know is if you want your own uh sample collection if you scroll to the bottom click on this right here it'll give you a sample Json file with all the assets just like what I gave you but since you already have it let's keep it going so it's easy enough we just need the PNG files and the information uh if you don't want to make a Solana Monkey Business clone go ahead and customize it with your very own assets right so let's go to Solana monkey business okay and we can go to openc or magic Eden let's go to openc and look at this these are all the SMB nfts we can do something really cool we can go from Price high to low right so this is from high highest price of Solana to lowest price so let's go ahead and click on this guy with the backwards hat this is SMB number 10. and we can actually do a side by side here so let's do this Ctrl B how are we doing awesome so all we have to do is Click copy SMB number 10 and replace this right here all right so that's the name and remember that symbol that we did at the beginning when we created the config make sure it's the exact same we're also get an error so do SMB and the description here you can customize it I just like to do this on the Solana blockchain copy that and that is your description make it whatever you want image should be the same name except dot PNG which will update later uh the next thing you should see here is attributes these are the attributes of your nft so let's look at the attributes of this studious crowd right accessory lamp trait type chair red books blue right what we want to copy is these right each nft can have their own properties and uh depending on the trait it might be more rare and that that is what uh gives it the value so if you look this one is the What's called the ears is none 79 of these uh saloni Monkey Business clones I mean nfts have this trait so it's common let's see a non-common right purple backwards hat right that's not common that that's only seven percent or three percent actually that have the hat so that's how you know that this one is really expensive so what you can do is change those trade types right so if you do trade type we can say hat and then we could see if the value of I believe it's purple purple backwards does it show me purple backwards purple backwards cap that's the name so let's type that purple backwards okay okay and then we can do other stuff like uh type the type is purple it's a purple monkey and let's see clothes let's do these three and this is green smoking apparently green smoke smoke okay cool and the properties you keep that the same right because it's going to be a PNG file hit save and now if you look this is our new zero.json but the image is still the crap right we want to use our image so this is the part where you get your own image or you copy this image right here and again not the Real Solana Monkey Business this is technically a clone to show you guys how to use it so go ahead and to get the PNG version of this image I'm going to copy image address and I'm going to actually no we can actually paste it or open image in a new tab it's easier and you're going to see if you save this it's not going to be the right format so under format right here change this to PNG right and hit enter there might be other ways to do this but if I hit save image as you're going to see that it's a PNG image right so you're going to see the other ones that we have here go ahead and click the zero one because if you hit save we want to replace that studious crab right so hit save X this out and if you look on here click zero PNG no more studious card we have Solani Monkey Business number 10. all right cool and with all the properties as well so going back to this uh let's get capital P purple let's do this for the next two items but if you get this idea go ahead and customize this to how you want skip ahead if you understand this or just follow along see how we do okay so next one we want to get one.json the second nft the studio scribe number two we don't want the studious crab we want another one let's get this guy with the headphones this looks cool so this is SMB number a thousand and one so I'm gonna erase this and we'll blam SMB 1001. description I can copy this nope copy this paste save and image to keep this the same and now for the traits we believe we did hat hat and they have pink headset pink head set and accessory we didn't have that we had I think we did type type we did just dark Dark Monkey and then for the clothes they actually have none so clothes no this monkey has no clothes so save that and there you go so now we can do this open image a new tab uh we want to go to the format and change this to PNG if you have another way of getting the PNG version just feel free to do that I do save image as here click on one save boom cool so we have that saved you can double check by looking at the one.png there we go monkey hit bones and now we can go to 2.json or our third SMB I'm gonna head back on this and let's do which one you guys want to do let's do Mohawk monkey Okay cool so oh it's actually the next one over this is a thousand and two so let's go ahead and click thousand and two oh and don't forget to change the symbol like I said SMB on one.json SMB on two dutches okay awesome now description we know the drill by now paste save and now the types we saw we did hat the Hat on this is red Punk hair that's what it's called red Punk here yeah so cool and then we did uh type type is purple another purple monkey and clothes this one is beige smoking big beige smoking so hit save let's get this image format PNG save images two and hit save cool and if you didn't know I'm actually saving it to this file directly to this folder directly so if I click on this you'll see that it's already there so I don't have to move stuff around right uh it might not end up in your folder go ahead and take all the ones you downloaded and move it to this assets folder you got it cool uh the next thing I noticed is the collection dot Json right so there needs to be another file for the collection itself right so if you look the collection.png this is it says numbers collection we want the Solana monkey business logo right here so here let's edit that Json file and if you look it says crab collection it should just be SMB make sure it has the same symbol uh we can go back here and copy that description and for this collection.png no attributes but the properties and files should be like so now I gotta get the image so I think we can get the Solana monkey business logo if I go here and save this one right here this could be our collection logo or you can use whatever you want as long as it represents the collection and I'll keep it the same name hit save and if I look bam that's our collection item so this is the collection itself the item and inside this collection uh is all of these nfts right so that's why you need to have this Json file so keep that in mind awesome so now that we have all of that let's go ahead and get that folder so we can go to file we can go to all of our projects uh I believe mine is in here go to the assets and we could just copy all of this go to wherever your folder is and drag it over here and upload those assets okay so I'm imported eight files so if you did uh three nfts there should be a fourth one which is your collection and since there's a Json for every PNG you should have eight so think about how much you have double it that's how much files used to have so hit continue and it should be uploading and if you didn't know all these images are getting uploaded to are we if you don't know what RV is it is a decentralized storage Network right uh if you don't know let's go to my handy-dandy notebook or you can think of the Solana blockchain whoops as this block right here right this giant Solana blockchain all right this um what's it called candy machine it lives on the blockchain so this is our candy machine right imagine if I had like 12 nfts with pictures and everything and putting it on this chain right so this is my pictures the nft the metadata right every time you add something to the salon of blockchain you have to pay for the space that's there right you're gonna pay what's we call like rent right and if you put actual images which can be very big very small right it's going to take up a lot of space and it's going to be very expensive so it's what we do instead is we store right this is your nft and we store what we call a reference to your image right a reference a pointer to the image right the nft image itself right and that pointer is going to point us to our weave which is its own decentralized storage Network which has the image okay so what we're doing here in a salon playground is we're uploading all those files metadata images to are we and that's what we're referencing later and you can see it in the config in a second so if this is successful uploading we can look at the cache.json over here click on that and you can see there's an image hash there's an image link and it goes directly to our weave itself right I can click on this and you can see this is ourweave.net and it's going to take me here and it should load a Json file or the image itself so this is where it lives on our web it's actually on the chain okay of are we cool and it's reference here so notice how the image itself isn't in the the candy machine that's one thing to note but if you look all the information we have is here right uh the one thing we're missing is that our candy machine doesn't exist on the Solana blockchain yet technically oops technically it's right here it's in limbo it's in Seoul PG still right so we need to do is come back here and go ahead and do sugar deploy all right so now it's going to create our collection of nfts and deploy it on to the Solana blockchain so visually speaking we just technically uh did this put it on the Solana blockchain okay so you can see the deployment was successful if you ran into any errors at all it's probably your file so maybe you forgot to check if you have the right symbols for each of the entities and remember to have your collection notice how it's minus one on this one okay so now the deployment's successful and you can see this candy machine uh what's called candy machine public key this is the address technically of where your candy machine lives on the salon of blockchain so cool a lot of things that I'm speaking here that you're probably like I have no idea what he's saying but if you just keep you know watching this video and over and over again or keep working with the Solana blockchain it'll start to make sense so this is the public key of the candy machine basically the address of where it lives and the next thing you can do is add a candy guard right so this is where you can put the pricing on things which should make this fun so we could do is uh head over to here and let's click on one of my tabs on docs it's called sugar for candy machine B3 all right search this up on Google for metaplex and you can find the available guard so if you didn't know let's go down to here cards can be used to define um things about our collection so what I mean by that is we can define a start date and an end date so notice this end date here this is going to say like hey after uh December 24 you can't mint any more nfts so this is what you need to add to your cash right here you gotta add that to the actually config you're going to add the end date right here okay same thing with for example the bot text so if you don't know what bot tax means people use utilize Bots to buy all and mint all the nfts before normal humans can buy that themselves so it'll just be sold out and they just resell it for absorbent amount right so this bot tax guard will charge a penalty for invalid transactions so that's another good thing to have and I think we can use the default guards right here so go ahead go to this part of the screen copy this guards all the way up to this uh curly bracket so I'm going to say copy let's go back to not that one to our I think oh so on a playground and then highlight up to the guards quotes paste and there we go this is the default example that they have so what what kind of guards do we have guys let's take a look we have butt text right we have a start date and we have soul payment right the thing with sole payment it doesn't even have to be sold that we pay with uh you can use usdc as well which is just the US Standard dollar coin essentially anyways for sole payment you can say how much each nft cost we can say 0.5 right these are really cheap because they're not real so they're gonna cost 0.5 so uh the start date is here right to 2022 because it's in the past so that means this is when you can start buying it if I were to make this date even later let's say 2024 then you can only mint it when that date comes makes sense so any customizations you want to do at all go ahead and look at all of these guards and make sure you add them all right there's a lot of different things you could do like token gating nft gating you can even do so let's say you know any other nft to even mint this next set you could do something like that so have fun with it play around test it but we're gonna go very basic to get you guys started so go ahead and write sugar guard add to add all the things you added on the config so initializing a candy guard it's wrapping boom so now if you look uh I think it's in the cache now candy guard now has its own public key right here so this is the PK which I'll call it for the candy guard okay uh one thing you need to know is this go back to your config.json and go back to sole payment there's something I forgot to mention so each nft that we have is going to cost 0.5 Sole and the destination where is that Soul going you need to set right otherwise this is a wallet address another PK so let's say I open up my Phantom and I want every person who mints in nft they pay 0.5 so I want it to go to somebody so let's make uh that go to qazi my qazi wallet here so what we can do is copy that address and paste it here all right and actually let's make this more expensive so it's more visual let's say it's cost one soul all right so it's going to cost one still for each nft and now that we uh updated this we need to write sugar guard update so now we're updating the config and there we go so now our candy machine should be up to date the new payment the new price is one the destination for the payment will go to my Kazi wallet okay so we're giving Kazi some money for every entity we meant so I'm sure he'll be happy with that let's go to the next step now all right so we set up our candy machine now you might be wondering if you're new how do I get some soul right this Coswell already has 6.9 sold to it how can I give myself some Solana so I'm gonna go back to wallet number one and in wallet number one I have three Soul how do we get more if you go to a new tab we go to something called soulfosset.com and there's other stuff like this but what we could do is get free Solana devnet tokens to our wallet so we have to do is click on your Phantom copy your wallet address or your wallet PK paste it and airdrop to Seoul to the devnet right and okay there's error but uh usually this is how you can get Solana for your wallet okay so make sure to do that a couple times it might have an error if you click it too much which I just did recently that's why we got error so give it some time Okay cool so now you guys know how to get um some Solana should have a couple of soul in your wallets because remember each of these costs one and now what we need to do is this all right go ahead to your uh cache.json and what we need is our candy machine address so go ahead copy this candy machine address right here and let's go back to our app right which is this and go to our utils and in our utils go to constants and one thing I remember is remember the candy machine ID this is where you're going to put your candy machine ID right so mine the one I copied and we can just paste it like so I'm on the FK thing so save uh Ctrl B and there you go we have our candy machine ID and it's exported so that we can use it in just a second here so let's go ahead and set up our candy machine on our front end all right so if you made it this far we are about to set up our candy machine to our front end so just to recap we are using something called metaplex which makes it easy to make your nfts and Collections and specifically candy machine which is a tool to set up your assets and to host your collection Okay cool so the first thing that we're gonna need to do after you put your candy machine public key here is let's head over to main okay so if we go to our main component under public or under pages and then Main you're going to notice our app right and then if you look at something called nft display that's where you're seeing our application right here right this is what's showing the nfts if you want to see your own nfts this is what you're going to do so go to your Solana playground and remember your cash dot Json all right we can take this cache.json and iterate through it and get the image link right so what we could do is literally just copy this object right here uh hit copy and to make it easier let's do something like this uh actually now we can make this full screen still all right so let's take that object go back to vs code and what we could do is go to where we're getting this data so if you look at nft display under index we are getting data from sample right what we want is data .js right so we want to change this stuff so let's go ahead and change this object with this object and if we hit save uh it's not gonna change right away right because we have to change this later on but let's go ahead and add the rest of the object so I'm going to get the next one which is this right here I'm gonna get the next one and the last one is the collection but we don't need that because we're not displaying that picture right there cool so we got all of those and updated our data.js and now we can go to their nft display I'm going to send a sample we need data so now when I hit save take a look we go back to Solana Monkey Business and there it is there are our nfts all three of them they look really cool like so so these are our smbs let's hit connect and we're connected and now we just need to know how to Mint them and how much nfts do we have like well I want to see how much are remaining how many are minted and how much do they each cost right don't you want to see that so we're going to set that up right now okay first step that you need to do you need to head over to your main component once again So Paid Pages Main and here we go now that you're here we need to import a couple different things so what we want to import is something like this we're going to import a lot of things from metaplex so we can say from at metaplex foundation.js because remember we're using metaplex as our tool to make this easier right so what we want to get from metaplex is a guest identity we want to get metaplex itself meta Plex we also want to get a wallet adapter identity and we're going to use pretty much all the things that we're importing right here okay and while we're here let's import a couple different things that will make sense later kind of like how we did last time so let's import see object lamp ports per Soul so if you didn't know lamp ports is like a smaller unit of Soul all right so think of it like a dollar if you break up a dollar you get cents a bunch of Lan ports makes one Soul so let's get lampard's personal and we also want to import a couple things from Solana wall adapter again so let's get um use oops use anchor wallet tab there you go and there's a used connection I believe so use connection okay cool and we also want to be using our candy machine ID so let's go ahead and import that say import candy machine ID from utils okay nice and there's our Styles and we can set up a state so we already imported use date so we're good to go so let's make one so this one's gonna be a state for our metaplex so we can say equals use State oops use state and our state is going to be metaplex comma set metaplex okay cool and you can set the default initial state to nothing for now because what we're going to do is set up our metaplex right so how do we set up metaplex guys well the first thing you want to do is let's get some connections ready for later as well let's get const connection from news connection not from uh you want to say equals because the hook use connection and you also want to get const wallet from use anchor wallet cool so store this in a variable awesome all right so back to what I was saying about the use effect so let's make a use effect you can say use effect like so Arrow function and we're already set up so in this use effect all I want to do is set metaplex okay but now here's the part how do we set up metaplex inside this state right we're changing this state from nothing to something right so what I want to change it to is metaplex right where we're getting this we are getting this from our import and there's some built-in functions or methods here one of them is dot make so dot make and we pass in a connection so we say connection and then we say dot use parentheses and what the connection you want to use well wallets well we want to say some conditional rendering so if wallet exists use the wallet adapter identity right from here come back down and pass in the wallet and type that identity if not we'll use the guest identity okay and that's gonna be our metaplex right so if I were to console log metaplex let's see what we get oops here is our magic box not that so let's refresh this let's see what comes up oh is this even running okay it's running back to console awesome so I loaded a couple times that's fine yeah it's constantly re-rendering and the reason why it's re-rendering right is because we did not put a dependency module here so this needs a dependency module and we can make it depend on the connection and the wallet so it will only render once or when the connection or wallet is changed so now you won't see the infinite render so let's refresh it cool so it's like live debugging right here awesome cool so yep you should only see it twice because we're about to see another time when we connect cool so this is our connection metaplex and when I open that metaplex object you can see Auction House candy machines candy machines V2 right uh you can do dot RPC we can do dot storage so there's a lot of different things you can do with candy machine but I'll show you guys what we what we would want specifically so we're going to use metaplex for something else all right so we don't need that so let's go ahead and erase and let's set up one more use effect right let's so we set our metaplex object here and then now let's use that metaplex object to get what we want so what I want to do is set up my uh state right for my candy machine and update it uh every few seconds all right so how can I set up my state and update it without calling the function over and over again all right this is where use effect comes in so let's make another one let's say use effect Arrow cool so in my use effect all right we can set up some edge cases I like to call it so if we say if metaplex return right what does this mean it just basically means if there's no metaplex right this doesn't work for whatever whatever reason then this isn't going to run we're just going to return right just leave because there's no metaplex okay that's called an edge case so if that's the case that's fine but now what do we want to do we want to set up my state and update all right so let's set up let's call it update so we'll say const update state or this is me making a function and we'll put in a function like so and it's important that this is a synchronous so make it asynchronous and once you make an asynchronous go inside between the curly brackets and let's set up H for I catch okay because it wants you to essentially do a promise and try whatever I write in here if it fails for whatever reason it's going to hit this catch so let's set up the catch it's pretty simple we can do an E like that like that and then we can say console dot blog e right cool then we can even uh we can even say toast that air right if you don't know what toast is it's basically notifications that are built in using the packages and you can say uh something went wrong yeah error has occurred so you should see a little pop-up automatically thanks to toast then error has a code if any of these things fail right here okay now we want to set up a couple different states when we update state right we gotta tell them what states are we updating right so what states are we updating that's a great question we're gonna go up here and we're gonna make a couple things we can say const candy state all right this is the state of my candy machine set candy state set that equal to U stick okay set up another one this one's going to be called candy state error right so we can put a nice you take the error and put it inside a nice error message and display that on our front end okay okay the set candy state it's equal to use state awesome so if anything goes wrong we'll be able to display it we can also say a loading State const candy state loading and set candy state loading and set this to True by default and then we could do a transaction error as well so we could say TX error this is these are also these last few are optional but it's good to have if you want to play with it so whatever equals use state I feel like there's something in my throat anyways let's keep it going let's do a TX loading and set TX loading all right so you can have a nice loading screen if you use utilize this as well uh but we're just gonna have a message that says something and this one by default is false all right um last but not least we also want to set our nft so const nfts and we're only really going to use set nfts here okay set this to an empty array cool so that should be all our states so now to our function so go back to your update State function and we're going to start writing into the try so inside the try we're going to say con state right it's a variable is equal to a weight right we're going to wait till we run this Command right here whatever it is so this variable is equal to await metaplex or using metaplex and if you remember metaplex has metaplex candy machines all right we're going to use that so we're going to use metaplex and then I'm just going to format it right here Dot candy machines right and then you can do another dot for chaining it dot find a buy address I Believe by address okay and what is the address of our candy machine right and we can pull it up like so so make an object in here and say address key and the value is our candy machine ID so put that in there boys and girls we can say candy machine ID okay so what's happening here we are trying to set up our state we are getting metaplex getting the candy machines finding the specific one with this address make sense cool so now if that makes sense to you we can set this state because now after this is done if it's successful we have a state fair we can say State here um if it fails it's going to go into the error until this moment wrong so now I can say state after this line but what we need to do next is set our state so we can say set candy state that's what we made that earlier for and pass in state okay now what is state right so let's console log it state this is our state our candy state specifically so let's save that oh state is not the one sorry it should be candy state let's see can we get it um cannot read properties of null so we're into our first error and so it's undefined this is our state which means there's an error somewhere cannot read properties of null reading query let's go back to our code caves still says undefined so let me just check here um oh I know why see how this update state is uh grayed out it's because we forgot to freaking call it right so This Is Us creating the function but we never called the function so let's go ahead and call the function update State and we also should put a dependency module so it doesn't keep re-running over and over again so let's say now there it is we got it so now we have our candy machine state right so if you see this object this model right here and all of our information is here so look at items do you see this guys items so if I do console on candy state let me just put some space between here candy state DOT items all right let's see what happens look at that we see an array of three things where have we seen that before right we have the first index of our SMB number 10 and the URI so this is our access to our nfts so we need this okay so what we can do now all right is set our nfts so now that you know what this is all right let's fix our update State and add some more things so we have set candidate we can also do set nfts right and then we can set it to State DOT items right and we can also set candy state error to no right because if it's in our try if it made it this far there shouldn't be any error oops there we go awesome so hit save and we can also add a finally here right and if it finally loads we can set candy loading state to true or to fall sorry because it's not loading okay cool so I think it's true by default so this is true by default but now we can set it to false right it's our flag that's done loading if we do toast dot success we can say uh updated state all right cool I remember I said how I wanted to update it every few seconds all right so what we could do is set up something like this so let's put metaplex here so it's only going to run once and whenever metaplex changes for whatever reason and also we can say refresh state every usette state every 30 seconds okay so we can say const interval ID is equal to set interval and in that set interval we can have a function that every interval update the state this is what we want to run and put a comma here for how long you want it to run and if I say 30 underscore zero zero zero that should be 30 seconds on the timer okay and then from here we can say return we want to clear this interval and by doing a clear interval then we could do interval interval ID so that's how you clear it we can do oh sorry to return the function itself cool so like I said if you want to do anything with the nfts at all right you can say nfts and that's your array of nfts right so we don't have to do anything with that specifically what we want to do next is set up our what's it called if you saw the demo you saw how many nfcs were remaining we want to do that I want to show our sold out stuff let's do that say cons sold out and sold out is just going to let us know if all the nfts are sold out and this is going to equal candy state all right if it exists that's what this question mark is for dot items remaining dot eqn zero right so can't remember how we added candy state items uh we can also do candystate dot items remaining and that eqn is equal so if the items remaining is equal to zero this is going to return true if it's not it's going to return false so that's what we're setting up here I think I spelled it correctly and after that we can do const sole amount all right we can have a variable that tells us how much each of our nfts cost and if you remember how much does it cost just one Uno all right so candy estate again question mark and question mark if I don't put this question mark here it's going to say dot undefined right because it's not going to question mark it so if this exists candy guard which if there is a candy guard again that's why I put in question mark cards all right question mark if it's there dot Soul payment right so if you look carefully it's looking into our candy guards and specifically checking the sole payment and that's going to return to us a number that we want right so if that exists if there is a sole payment then show me that show me the payment candy state DOT candy guards candy guards can guard oops dot guards dot sole payment dot Lan ports right now we have to convert it that two number yeah so let me have to press enter for this one enter so I can look it like that that two number all right so let's just break that down so I'm looking at my candy state looking into the guards looking into the sole payment which should be one and it's going to give us it only shows us in lamp ports all right remember the the smaller unit of soul and then put a two number right so we can have it something readable for us divided by lamp ports per soul and that should give us the right amount and then if you can say or no okay so this is either going to give us another uh State essentially go and add this semicolon here add that semicolon there and you should be good to go okay so that's our sole amount our sold out foreign okay something off about this shouldn't be oh sorry guys this should be question mark Dot candygard and now we shouldn't see an error okay cool yep it should be great I like so if you did that you're good to go um now the next part is we want to put our candy mistakes uh candy machine States here so let's go ahead and do that all right so if you're here we're going to set up our candy machine States and set up a lot of conditional running so be prepared so the first thing that I want you guys to look at is this set up the curly brackets like so and you're just going to write uh loading right the candy state loading okay so this is our loading State I remember if we look scroll up candy state loading is set to True which means something is loading right and if we say conditional rendering here I guess question mark what that means is we want something else to load so if candy state loading is true then load this HTML which is going to be just a div let's get the closing bit in there and it's just going to say loading all right if it goes well you'd only see this for a second if it takes long you're going to see this loading text for a while right so what you want to do after this is colon because this is the else part of a conditional of a ternary operator so we can say candy state error because if it's not loading there's a candy state error so if that's true we can set up another conditional rendering you see my so why that's kind of confusing so candidate loading is true load this div if not load this ternary statement all right so what's this ternary statement if Candy's State error is true then load this div and this div is just going to have the candy state error that we have cool so when do we see this div if candy state error is true okay what if it's not true what if there is no candy stator then we should see the whole thing right so we should see the candy state then because there's no error and and so so two things have to be true candy state and this so we're gonna see two things um now we can have a div here closing did and this is where the majority of our text is going to be so we can say another div here foreign we can say total items right because I want to tell you guys how many items do we have in our nft collection so we can write is a variable here by saying some jsx so we can say candy state again and how do I see the total amount of available items you're just going to do Dot and just write items available because we did items remaining before we can do items available dot to string so that we can read it okay let's hit save look at that so for you if everything works successfully we see total items is three and there is three nfts here as you can see so that's good total items is three all right but there's more what if I want to see the total minted uh items okay how would we do that so let me close that div well you would forget your candy state again so candy state right but now how do we get it you do Dot items minted and you might be wondering Lance how did you know all this well if you just console log candy state take a look in the console and see all the different things you can do just test it or read a documentation or follow this tutorial right a lot of different options different ways to learn do dot to string so it's in a nice format that it can read so let's save this minted items zero so this makes sense right because how many times have we mint an nft zero right unless you skip the head then you're achieved so back to this we could do div and we could go uh closing div awesome and in between this what do we want to do next we want to do remaining items so this one should be familiar we have to do candy state DOT items remaining right it's pretty obvious got two string and there's so total items three minted item zero remaining items three there you go cool so we closed that div off and is there anything else that we should do yeah there's a couple different things uh one thing I want to do is let's talk about the solar mount right so if there is a sole amount if there's not then it's not going to show up uh then we can say div closing div you can show the cost here say the cost is this soul amount space so yeah cost one so there you go and how did I know is one because in our Solana candy machine it has access to all this information Okay cool so cost one soul right it's going to change depending on what you put here uh the next one we can put the TX there so if any point you get an error we can set up this dip so we could say TX error and div closing div and we're just going to write t x error so if anything goes wrong with the transaction we're making use of this state right here right we're not setting anything just yet but when we do when we make the mint function okay next div closing div right this div this one's for the mint button so I just made a div I'm going to give it a class name actually class name and we're going to use styles styles dot button container because this is going to contain our mint button and you just have to say button like so and give this a class name class name dials dot mint button okay and under that we can give it a couple things so on this button itself it has to have it on click which we'll do in just in a sec it doesn't have it just yet but hmm actually start mint for now oh I just remembered something we should so let's start mint for now right so this is good you can even leave it just as this it just says mint and if you click it it should allow us to Mint an nft but uh what if all your nfts are sold out we can turn this mint button into a sold out uh sign right we can do that by erasing mint putting curly brackets and misuse are sold out variable and if that is true if sold out is true right remember we made that variable to check so if items remaining is equal to zero if that's true then it's going to say sold out right and then or TX loading if loading is true then put loading right our button will say loading if the transaction is loading um otherwise if it's not sold out and if it's not loading show me the mint put which it should when I switch here there you go same thing but you know getting a lot of functionality out of this condition so that's why we set it up uh way back when cool so now we have a dynamic mint button and from there that's pretty much it so we just need the functionality to Mint these nfts so let's go ahead and work on that all right so we are in the home stretch now let's learn how to Mint nfts when I click this button the first thing that you want to do is let's make the mint function so scroll up to all the way here right before the sold above the sold amounts and let's go ahead and make a mint function so let's just say const mint is equal to async Anonymous function the reason why I'm making this asynchronous is because we need to make a call to metaplex to Mint this specific nft so let's go ahead and do our Edge case remember what our Edge case is guys it's if metaplex does not exist then we just return right and you should spell metaplex correctly boom so if meniflex doesn't exist return um in the meantime we're gonna set Trend TX loading to true because during this time of minting this should be true and we can also set TX error to know for now right cool so once you do that now for the actual functionality we'll do a try catch again and I'll set up my catch and if there is any sort of error we can just cancel out so it says console log e and we can do a toast dot error and just say uh mint failed right I mean you also want to set up our like show our error by saying set the x error to E Dot message I believe yeah you don't message cool so that means if you go back to here it'll show us underneath the soul the transaction error that happened so I mean hopefully we don't see it but if we need to like debug that's I'm glad it's going to be there okay and in this try catch we want to say const mint result it's a variable that is equal to weight and here comes metaplex again metaplex dot candy machine candy machine uh s parentheses dot mint so candy machine has its own Min function in order to create it from scratch and we put parentheses curly bracket like so inside here you have to put some property so you can say candy oops candy machine colon object and then address oops address colon candy state that address so that's how you get the address of the candy machine can you state the address the next thing you want is the collection mint address oh don't forget to put a comma here and for that you need candy state oops candy state again and say dot collection mint address all right so I can see the pattern here so you can say uh the candy guard is a candy state DOT can you guess it candy guard put comma here comma here and that's actually it uh we do need to put a comma here and then say collection update Authority make sure you spell it right and say candystate dot Authority address Authority can you state Authority address okay comma there and then the last part is group is no all right that looks good to me uh we can also console log the mint result mint result in an object and we can also say toast that success well we don't say toast that success here we can actually say finally and then do the toast.success so what we could do in the finally is set TX loading back to false because now it's done loading and we can also do a toast dot success here and say um minted nft so let's save that and now we made the function we got to call the function down below so if we scroll down where is our button we can add the on click now so we can say on click equals object object and then write mint for the main function so when we click it the mint function will run we also want to disable this button and when do you want to disable it well I only want to disable it when there's no wallet or let me zoom out for a second uh if the TX is loading right so we can't just Spam The Mint button um can also make it disabled when it's sold out so when we have the sold out sign you can't really click on it just kind of just it's kind of just there so it's disabled during that and with that cross our fingers hopefully this works so let's switch to the main app okay we're in the main app select wallet Phantom uh are we connected oh enter my password boom okay so now we connect updated State let's hit mint loading let's go approve transaction so remember two things my qazi wallet is getting the money so you had six Soul so after we lose one Soul Kazi should have seven if this works properly so let's hit approve let's go mint in an nft we did it boys and girls and if you look uh remaining items it's still three but remember our timer every 30 seconds it's gonna say updated State and now look at that total items three still minted items one remaining items two and the cost still one sold so there you go we successfully minted an nft but now we're not done yet because if you click Phantom you go to your wallet let's check on qazi so if I go to qazi he has seven Souls so that means I just mentioned an nft and somebody profited qazi got one extra soul from me and for our troubles if you go back to your wallet wallet number one click on these four squares right here you can see my old crab collection but look at this we got Solana Monkey Business 1001 in our collection with the description we wrote and the properties that we wrote to so this is it this is a real nft in your wallet if you made it to this point in the video hopefully you can make your own nft collection that you could put out there hey and maybe you can make tons of Solana with this so hope you guys enjoyed the video let me know drop the comment down below if you want to see a more detailed release like a delayed reveal and just drop in the comments I'll see you guys in the next video peacein this video you guys are going to be making your very first nft collection on the Solana blockchain not only that but these nfts you can use your own custom images and your own personal attributes and it's going to be made simple because you're going to be using Solana candy machine from there I'll show you guys how to price your nfts and when do you want them to be revealed if you want a delayed reveal and you'll also get this sick front end while I'll show you guys how to make the mint functionality so that means users can buy the real nfts that you're creating and again as a disclaimer we're going to be using Solana monkey business as practice right these aren't real Salon monkey business nfts so be sure to make your very own and let's get started all right so this is the app that we're going to be building today it is a real nft collection with three items right and it's pretty simple all you do is connect your Phantom wallet and make sure you have some Solana and the process uh I already bought all the nfts for this collection but all you have to do is click this button and it's conditionally rendered so that it's gonna say mint but when it's sold out it will change to sold out and I'll update you know the minted items and the cost to zero and let's show you guys that this is a real nft because if I go to my collection look at that I have a Solana Monkey Business 1001 it's the one right here as you can see and again just a disclaimer this isn't a real Solano Monkey Business nft right over here but this just to Showcase uh that you can make whatever nfts that you want so let me show you how to get started and that's awesome so how do you get started with our app we have something that's going to make it super simple for you guys all you have to do is type in npx at cleverprogrammer and for you make sure you say at latest so that you have the latest version with all the builds that are up to date so go ahead and hit enter and you should see something like enter your email address which I'll do right here your name I'll put Lance Toledo and what project would you like to initialize so we have tons of tons of projects that you guys can do and get started and add to your own portfolio right but what we're going to do today is of course the Solana nft drop so hit Solana nft drop hit enter and wait just a moment because it might take a while to run some Scripts and once it's done it's going to open a new vs code for you and I'll jump right in when that's done all right so at this point you should have your repo downloaded using our CLI tool and you should see all these files here these are your starter files what you need to do next is we need to sign up for quick note so go ahead and open your browser like so and click on the link in the description to get your free account awesome so if you don't know quick note is a blockchain development platform that gives us things like an RPC endpoint which helps us connect directly to the Solana blockchain so let's go ahead and create a free account by clicking this button and once you do that and verify your email you should see something like this screen right here so let's make that bigger you know what just for you guys I'll even archive my old endpoint I understand the consequences archive endpoint to make it sure that you guys see the same screen so after you verify your email you should see start by creating an endpoint go ahead and click that and as you can see there's multiple different change that quick note supports uh from ethereum to polygon to bitcoin and what we want to do is Solana right here as you can see so click on Solana another key thing that you should note is that there's three different networks that we can work on with Solana it's the mainnet which is the real deal this is real money that you're using real Soul there's the test net and then there's the devnet as you can guess we're probably going to use the devnet so let's click on devnet hit continue on the bottom right here and once you do that you're going to see some add-ons nft fudge tool or across nft mint API we don't need that today let's go ahead and click create endpoint once that's done you should see a screen like this what we need to care about is this HTTP provider so go ahead and click this copy button and don't copy anything else if you lose it we'll come back to it so that's how you sign up okay so the very next thing we're going to do is we need to get set up with our Solana wallet so if you've done ethereum projects before you guys probably use metamask the equivalent that we're using today is something called Phantom wallet so Phantom is our wallet of choice as if I click on this tab right here you can see me open the wallet so if you already have Phantom skip ahead a little bit in the video to see what the next step is if you don't have Phantom all you need to do is go to a new tab and just say Phantom Chrome extension right so I'm using Google Chrome and if you click on this go ahead and click download here it says remove from chrome because I already have it so click download and make sure you save your mnemonic and sit don't share that with anybody by the way and make sure you create your wallet another thing that you're probably going going to have to do is click on Phantom go ahead and click on not that right here the icon and if you scroll you can go to developer settings and change the network to devnet because remember we're working on the devnet guy so make sure you click the devnet button and use that Network so once that's done you're all set up with Phantom and we're good to go so let me ask this out awesome so with that said I don't think we ever checked out the CLI starter file so go ahead and switch tabs to your vs code and we can do and make this a lot smaller and you know what let's bring this guy on this side so we can see him too and there we go cool so what you want to do is press command J or Ctrl J if you're on Windows and you should be on the CLI starter branch of this repo and all I have to do is say yarn to make sure you install all the modules which you should already have and just do yarn tab once you do yarn Dev you should be able to type in localhost 3000 and let's see what this looks like boom okay there's our app right cool and there's two modes if you go like this you can see that it's not salon and Monkey Business right we got crabs we have crabs instead of monkeys our goal today is to show you guys how to make your very own nft drop and fix these crabs and turn them into Solana Monkey Business nfts and remember they're not real Salon Monkey Business nfts they're just used to Showcase how to do that so you guys ready let's go ahead and get started all right so one of the first things you're going to notice is this connect wallet button right it doesn't work right we need to make use of our Phantom wallet and connect this exact wallet right if you look at this it says a tkz I should see that right here if you guys remember the demo so what I'm going to do now is show you guys how to set up your Phantom mod so the first thing we're going to need to do is let's understand how our app works so we can go over to my handy dandy whiteboard and let's understand how react components work so you can imagine components or your HTML or your divs as a parent child relationship so what I mean by parent child relationship is if you open up Pages you go to app.js this is your exact nft app right just completely blank this is what represents it right here okay this is app.js and let me fix this for a second for you guys poop okay what I want to do is show you guys and represent the app like so and if you already understand how to do this feel free to skip ahead a little bit it's where I start making the wallet connection but the first thing I don't have to do is understand that the parent is this app.js component right here Okay cool so once you understand that you can see that it's returning component but what's this right this component is actually your index.js right and then your index.js right which you're calling home is returning something called main so what do you think would happen right so the childhood app oops with the back child of app is actually a component called index .js right and index is returning main right oops keep doing that so it's returning main so let's put that here as well so it's returning me and what is Maine then so what would happen if I comment out main so am I still running this if I do this see boom We Lost main right it's gonna fail to compile because this entire page that we're seeing right here is the main component so let's go to the main component then Okay cool so now I see familiar uh HTML react components that look and make sense right so let's say we have something called header here let's go ahead and comment that up as you can see header is gone right and also the connect wallet button so keep that in mind all right we could easily remove the header it's gone we lost the connect multiple so we place it back it's there so how many children does the main.js have right it has one two three four five six right six components as its child right so we're only going to draw one two three four four actually we're gonna draw one two two of them all right so the main things that you want to know or look at is this arrow and this Arrow because this left arrow is going to be the header component and this right arrow is going to represent the nft display right why am i showing you this well because since you didn't build this from scratch you might not know where everything is so if I ask you guys where the hell can I edit this connect wallet button which component am I going to look The Entity display or am I going to look in the header three two one good job you said header I'm sure you said header right so if you said header that means you have to look in here because this holds the connect wallet button so if you understand that we should be good to go awesome so now that you understand the parent-child relationship of our current APP or you just skip the head because you're a freaking genius let's figure out where to work on the connect wallet uh button so the first thing we're going to do is head over to your index.js okay and once you're in your index.js we need to import a couple of things because we're going to use our endpoint right to have our wallet connect to the blockchain right so first we need to add and provide a couple things for this index let's provide those providers so the first I'm going to do is import yeah so come up to the top here and we can go ahead and import all of that stuff under here so we can say import this one's going to be called connection provider right and you're going to get it from Solana wallet adapter react this is a module or a package that you should already have if you use our CLI tool to do this right so if you look at our package.json there it is at Solana wallet adapter react right all the modules that you need for this app should be downloaded if you did the CLI tool which is why it's great so coming back to this and you know what we can go ahead and save and let's just zoom in so you can see the better how's that guys awesome and we go back up one cool so we got the connection provider and we also need another provider and this one's going to be called the wallet provider right because you also got to provide the wallet with our connection awesome so the next thing uh we want to add is the wallet modal provider if you ever saw me click on the Phantom wallet button right here or the connect wallet button a little modal comes up with all the available wallets right Isn't that cool right they give that for you so if you don't want to make that yourself save you some time by saying wallet modal provider okay and I'm gonna press tab because you're going to get this from Solana wallet adapter react UI right not just react react UI cool so that's the modal provider and now the fun part is you need to import what wallets are using all right so what wallet are we using guys did you forget it is Phantom wallet adapter right so there's a couple different other wallets but we're using Phantom so whatever walls you use add them right here so Soul flare whatever you like so from here just say salana wallet adapter wallets right because that's from that package and then from there we can get some CSS because remember how you saw it's that nice blue um color right we can give it the CSS you need you don't have to stop a button if you just do import uh quotes at Solana wallet adapter react UI slash uh Styles dot CSS I believe and I'll show you what happens if you don't have this so cool once that's done you should have everything you need for uh the connection of the wallet right here so the next thing we need to do is we need to set a couple States so let's set up this state it's called mounted so if you ever use the use State hook we're going to be using that now so we're going to set it up use State like so and our state is going to be called mounted and set mounted all right cool and then from there we can set the default state which you can put right here false okay so if I were to console log mounted it would actually be false because this is the initial state right here if you wanted to start at zero start at zero like this make sense that's our quick refresher so we have console log mounted uh what we need to do next is let's set up our wallet so we can set up all the wallets we have here by making a variable called wallets right technically I only have one but this is how I want to set it up so that you can add whatever you want so you can say constant wallets equals use memo right so we'll use memo is kind of like use effect and it's only going to return once without re-rendering the whole page so that's why we're using it and what we can do is set up an anonymous function like so and this can be an array and in this array you're going to put all the wallet adapters you want so let's put Phantom we can say new Phantom wallet adapter parentheses like so and comma and put this empty module right here and then from there that's it we set up our wallets all right we're going to use this in a second next thing we need to set up is uh we need to set up the snooze effect to fix that SSR error with next.js so in order to fix SSR error with next right so this one's not really related to Solana just make sure that you have this to remove any of those weird errors so let's just write a used effect and set up an empty Anonymous function there and inside here all we're going to do is just set mounted to True right and here comma empty module right so if you didn't use use effect use effect is going to run at three different points in the component's life cycle when I first load the page bam use effect is running this command okay when the component updates right so if anything changes I click a button or mint it's going to run it again all right set mounted true and when you remove a component or delete a component set mounted true that's when let's use effect runs but here's the catch right if you do this empty module here without putting anything in it's just going to run once so we only want this to happen once cool so after that's done we can go ahead and put in all of the providers we have on this page so we have a couple providers the first thing you want to do is add a connection provider like so and what we can do take that Main sandwich him in between like so Okay cool so we added our connection not done yet though we should add our wallet provider so let's add a wallet provider as well if you're wondering if you're lost you're like Lance what is he what are you doing it's all coming from here we set up all the Imports already so don't stress don't stress we got this so put in the wallet provider let's put in the main insides as well cool so we got that and last but not least we need to get this guy in here the modal itself so let's type in the wallet modal provider and you put that inside here wallet model provider of course we're going to bring Main inside there so it should look something like this take a moment pause if you need to go back if you're lost but I'm Gonna Keep it going guys so the first thing that we need to do is I saved and you can see we need to put an end point right so let's add our endpoint or our connection so if you press command b or control B the key thing here is our constant so click on constant.js and you'll see your RPC endpoint here so this is what we're going to use so we're going to use our RPC endpoint go ahead and click remember that thing you copied we're going back to that I'm going to hit copy again but if you have it saved still go ahead and replace this metaplex devnet to your unique endpoint like so mine's called empty white Friday not sure what that means but that's my endpoint okay so I want to save that and you're gonna still see this error because now we have to provide that input right I'm doing this on purpose so you can see that what you need to do is that this takes in some props you can call it end point and set it equal to the RPC endpoint right so look at closely we're exporting this so you can actually just import that so if you look we're already importing it right here so I set it up thank me later right can I get a thank you Lance awesome thank you all right so like I was saying we can put our PC endpoint here and this is our direct link and now we have a different error which is good so now I can't read properties of undefined reading filter oh another thing that we need to do uh this is just best practice in config put equals object and say commitment confirmed to start pre-flight checks is what we could call it so hit save and then we still got the error because what we need to do is in our wallet provider let's go ahead and put in all the wallets so we can say wallets equals this it's going to take in all of the wallet adapters so let's say wallets okay another cool thing to have is something called auto connect because if you already have your Phantom connected it will automatically connect right it's kind of obvious right thanks Lance so let's go ahead and keep moving we're going to do the wallet model provider and another key thing that we want to do here is writing some conditional rendering so if we can say mounted right which is our state which should be true and Main like so like this boom okay so when mounted and main component exists you know we can load it cool so we're gonna save boom no more errors all right so now you shouldn't see the screen I hope you were able to understand that because that is the index.js part now the easy part how can we turn this button to the nice lovely Phantom uh connection button that we saw so press Ctrl B and let's head over to the component that holds this so quick question where can I find the connect wallet button three two one nice job you said header so let's go to header index.js of the header and you can see right all the stuff here The Styling you don't have to get overwhelmed all right let's scroll down look at some comments and look at this the wallet connect button goes here so what you need to do is go to the top and say import wallet uh multi multi button right here you can see the suggestion click it and it's going to Auto Import it for you wallet multi button from Solana wallet adapter react UI Red Save and let's remove this hideous button right and replace it with the component of the wallet multi button like so hit save what did I tell you guys look at that you see this right here let's maximize this and let's zoom in as well boom all right you see this connect button let's click on it Auto connected right because I already have my wall I can disconnect right I can go to a different wallet right look how easy that was so this one is 4au connect or are you there we go so let's just disconnect it and I'm going to go back to my normal wallet but I hope you guys liked that and understand how to connect your wallet to your front-end application so on to the contract okay so now for the moment that you've been waiting for if you click this video you want to learn how to make your own nft drop on the Solana blockchain right so what we need to do is let's go ahead and make a new tab and we're going to head over to beta.soul PG dot IO so click on this and you should see this screen right here so if you don't know Seoul PG is Solana playground it lets you create smart contracts build deploy and even test all of these programs from right here and now guess what they have Solana nft support they support Megaplex so that's what we're going to be using metaplex is what helps us create all these nfts a lot easier and we're going to use their tool called candy machine so the first thing you're going to do is click on this plus icon right here click and the project name you can call it I don't know nft Dash drop and you can click on anchor rust so also you can see that there's now python support for Solana so if you want to see our other video on that it should be in the link on the recommended browser go ahead and search for it anyways we're clicking anchor rust right now so click on that hit create oh already exists we can do uh nft Solana and then hit create boom so should see something like this still the same what we need to do now is go into the CLI tool right here right bring it back up and just write Solana or sorry sugar create Dash config this is the very first step it's going to use something called sugar and create the config for our app boom okay so now you're going to see a couple different questions how many nfts will you have in your candy machine uh you can just do three put as many as you want I'm gonna put three what is the symbol of your collection so this is like the abbreviation of your nft collection like I said we're making the Solana Monkey Business clone so our symbol is SMB uh seller fee basis points this is basically the fee that you have uh how much percentage you get after you mint the nft so say someone you mentioned nft then you sell it how much percentage does the owner get you can set it up like so so if I write 500 times this but the percentage times 100 you get this so this is technically five percent so you can say that uh do you want to use sequential mint index we can say no how many Creator wallets you have so let's say uh you can have four people that you made this nft drop with you can put all the wallets here I only have one just me let's just do one and now the Creator wallet address one so now you can take this wallet address from Solana playground and paste that in there like so cool so how much percentage does each Creator get like somebody is the artist maybe you want to give them a share they can get 50 and then you get 50. right but it must all the shares must add up to a hundred so since we're the only Creator we're gonna do 100. you can leave this empty hit enter and do you want your nfts to remain mutable meaning that they can change you can say yes and Bam look at that so now this thing should pop up other metaplex candy machine config.js Json cool and this is what we should see right now the next step that we need to do is we need to upload our assets to our candy machine so we can do sugar upload and we should see this here so if you already have your asset sets up assets set up go ahead and drop those files if you don't let me show you guys how to make your very own assets all right so you want to learn how to create your own assets for your nft drop all you have to do is this right what we need to do is if you're ever lost at all go ahead and search up the metaplex documentation right they already wrote a nice guide for you guys it's basically everything I'm talking about but in a little bit more detail and in written form right so we've already created a config what we need to look at is this one it's called preparing your assets and what you need to know is that you need a PNG file and a DOT Json file and these two have to like map together right let me show you what I mean so I actually provided you with that Json file so if I make this just a little bit bigger command B you can see this assets folder right here right click on it click on xero.json and there you go we have studious crab number one is the name and if you scroll down right here the URI is the zero dot PNG all right that's the image also shows 0.png as the image as well and what's the zero.pngland it's the studio scrub right here and that's also what's being rendered on the app studious crap yeah so the easy part for you is that we just have to edit this Json file before we update it yeah okay so if that makes sense this is what we're going to be doing next so what you need to know is if you want your own uh sample collection if you scroll to the bottom click on this right here it'll give you a sample Json file with all the assets just like what I gave you but since you already have it let's keep it going so it's easy enough we just need the PNG files and the information uh if you don't want to make a Solana Monkey Business clone go ahead and customize it with your very own assets right so let's go to Solana monkey business okay and we can go to openc or magic Eden let's go to openc and look at this these are all the SMB nfts we can do something really cool we can go from Price high to low right so this is from high highest price of Solana to lowest price so let's go ahead and click on this guy with the backwards hat this is SMB number 10. and we can actually do a side by side here so let's do this Ctrl B how are we doing awesome so all we have to do is Click copy SMB number 10 and replace this right here all right so that's the name and remember that symbol that we did at the beginning when we created the config make sure it's the exact same we're also get an error so do SMB and the description here you can customize it I just like to do this on the Solana blockchain copy that and that is your description make it whatever you want image should be the same name except dot PNG which will update later uh the next thing you should see here is attributes these are the attributes of your nft so let's look at the attributes of this studious crowd right accessory lamp trait type chair red books blue right what we want to copy is these right each nft can have their own properties and uh depending on the trait it might be more rare and that that is what uh gives it the value so if you look this one is the What's called the ears is none 79 of these uh saloni Monkey Business clones I mean nfts have this trait so it's common let's see a non-common right purple backwards hat right that's not common that that's only seven percent or three percent actually that have the hat so that's how you know that this one is really expensive so what you can do is change those trade types right so if you do trade type we can say hat and then we could see if the value of I believe it's purple purple backwards does it show me purple backwards purple backwards cap that's the name so let's type that purple backwards okay okay and then we can do other stuff like uh type the type is purple it's a purple monkey and let's see clothes let's do these three and this is green smoking apparently green smoke smoke okay cool and the properties you keep that the same right because it's going to be a PNG file hit save and now if you look this is our new zero.json but the image is still the crap right we want to use our image so this is the part where you get your own image or you copy this image right here and again not the Real Solana Monkey Business this is technically a clone to show you guys how to use it so go ahead and to get the PNG version of this image I'm going to copy image address and I'm going to actually no we can actually paste it or open image in a new tab it's easier and you're going to see if you save this it's not going to be the right format so under format right here change this to PNG right and hit enter there might be other ways to do this but if I hit save image as you're going to see that it's a PNG image right so you're going to see the other ones that we have here go ahead and click the zero one because if you hit save we want to replace that studious crab right so hit save X this out and if you look on here click zero PNG no more studious card we have Solani Monkey Business number 10. all right cool and with all the properties as well so going back to this uh let's get capital P purple let's do this for the next two items but if you get this idea go ahead and customize this to how you want skip ahead if you understand this or just follow along see how we do okay so next one we want to get one.json the second nft the studio scribe number two we don't want the studious crab we want another one let's get this guy with the headphones this looks cool so this is SMB number a thousand and one so I'm gonna erase this and we'll blam SMB 1001. description I can copy this nope copy this paste save and image to keep this the same and now for the traits we believe we did hat hat and they have pink headset pink head set and accessory we didn't have that we had I think we did type type we did just dark Dark Monkey and then for the clothes they actually have none so clothes no this monkey has no clothes so save that and there you go so now we can do this open image a new tab uh we want to go to the format and change this to PNG if you have another way of getting the PNG version just feel free to do that I do save image as here click on one save boom cool so we have that saved you can double check by looking at the one.png there we go monkey hit bones and now we can go to 2.json or our third SMB I'm gonna head back on this and let's do which one you guys want to do let's do Mohawk monkey Okay cool so oh it's actually the next one over this is a thousand and two so let's go ahead and click thousand and two oh and don't forget to change the symbol like I said SMB on one.json SMB on two dutches okay awesome now description we know the drill by now paste save and now the types we saw we did hat the Hat on this is red Punk hair that's what it's called red Punk here yeah so cool and then we did uh type type is purple another purple monkey and clothes this one is beige smoking big beige smoking so hit save let's get this image format PNG save images two and hit save cool and if you didn't know I'm actually saving it to this file directly to this folder directly so if I click on this you'll see that it's already there so I don't have to move stuff around right uh it might not end up in your folder go ahead and take all the ones you downloaded and move it to this assets folder you got it cool uh the next thing I noticed is the collection dot Json right so there needs to be another file for the collection itself right so if you look the collection.png this is it says numbers collection we want the Solana monkey business logo right here so here let's edit that Json file and if you look it says crab collection it should just be SMB make sure it has the same symbol uh we can go back here and copy that description and for this collection.png no attributes but the properties and files should be like so now I gotta get the image so I think we can get the Solana monkey business logo if I go here and save this one right here this could be our collection logo or you can use whatever you want as long as it represents the collection and I'll keep it the same name hit save and if I look bam that's our collection item so this is the collection itself the item and inside this collection uh is all of these nfts right so that's why you need to have this Json file so keep that in mind awesome so now that we have all of that let's go ahead and get that folder so we can go to file we can go to all of our projects uh I believe mine is in here go to the assets and we could just copy all of this go to wherever your folder is and drag it over here and upload those assets okay so I'm imported eight files so if you did uh three nfts there should be a fourth one which is your collection and since there's a Json for every PNG you should have eight so think about how much you have double it that's how much files used to have so hit continue and it should be uploading and if you didn't know all these images are getting uploaded to are we if you don't know what RV is it is a decentralized storage Network right uh if you don't know let's go to my handy-dandy notebook or you can think of the Solana blockchain whoops as this block right here right this giant Solana blockchain all right this um what's it called candy machine it lives on the blockchain so this is our candy machine right imagine if I had like 12 nfts with pictures and everything and putting it on this chain right so this is my pictures the nft the metadata right every time you add something to the salon of blockchain you have to pay for the space that's there right you're gonna pay what's we call like rent right and if you put actual images which can be very big very small right it's going to take up a lot of space and it's going to be very expensive so it's what we do instead is we store right this is your nft and we store what we call a reference to your image right a reference a pointer to the image right the nft image itself right and that pointer is going to point us to our weave which is its own decentralized storage Network which has the image okay so what we're doing here in a salon playground is we're uploading all those files metadata images to are we and that's what we're referencing later and you can see it in the config in a second so if this is successful uploading we can look at the cache.json over here click on that and you can see there's an image hash there's an image link and it goes directly to our weave itself right I can click on this and you can see this is ourweave.net and it's going to take me here and it should load a Json file or the image itself so this is where it lives on our web it's actually on the chain okay of are we cool and it's reference here so notice how the image itself isn't in the the candy machine that's one thing to note but if you look all the information we have is here right uh the one thing we're missing is that our candy machine doesn't exist on the Solana blockchain yet technically oops technically it's right here it's in limbo it's in Seoul PG still right so we need to do is come back here and go ahead and do sugar deploy all right so now it's going to create our collection of nfts and deploy it on to the Solana blockchain so visually speaking we just technically uh did this put it on the Solana blockchain okay so you can see the deployment was successful if you ran into any errors at all it's probably your file so maybe you forgot to check if you have the right symbols for each of the entities and remember to have your collection notice how it's minus one on this one okay so now the deployment's successful and you can see this candy machine uh what's called candy machine public key this is the address technically of where your candy machine lives on the salon of blockchain so cool a lot of things that I'm speaking here that you're probably like I have no idea what he's saying but if you just keep you know watching this video and over and over again or keep working with the Solana blockchain it'll start to make sense so this is the public key of the candy machine basically the address of where it lives and the next thing you can do is add a candy guard right so this is where you can put the pricing on things which should make this fun so we could do is uh head over to here and let's click on one of my tabs on docs it's called sugar for candy machine B3 all right search this up on Google for metaplex and you can find the available guard so if you didn't know let's go down to here cards can be used to define um things about our collection so what I mean by that is we can define a start date and an end date so notice this end date here this is going to say like hey after uh December 24 you can't mint any more nfts so this is what you need to add to your cash right here you gotta add that to the actually config you're going to add the end date right here okay same thing with for example the bot text so if you don't know what bot tax means people use utilize Bots to buy all and mint all the nfts before normal humans can buy that themselves so it'll just be sold out and they just resell it for absorbent amount right so this bot tax guard will charge a penalty for invalid transactions so that's another good thing to have and I think we can use the default guards right here so go ahead go to this part of the screen copy this guards all the way up to this uh curly bracket so I'm going to say copy let's go back to not that one to our I think oh so on a playground and then highlight up to the guards quotes paste and there we go this is the default example that they have so what what kind of guards do we have guys let's take a look we have butt text right we have a start date and we have soul payment right the thing with sole payment it doesn't even have to be sold that we pay with uh you can use usdc as well which is just the US Standard dollar coin essentially anyways for sole payment you can say how much each nft cost we can say 0.5 right these are really cheap because they're not real so they're gonna cost 0.5 so uh the start date is here right to 2022 because it's in the past so that means this is when you can start buying it if I were to make this date even later let's say 2024 then you can only mint it when that date comes makes sense so any customizations you want to do at all go ahead and look at all of these guards and make sure you add them all right there's a lot of different things you could do like token gating nft gating you can even do so let's say you know any other nft to even mint this next set you could do something like that so have fun with it play around test it but we're gonna go very basic to get you guys started so go ahead and write sugar guard add to add all the things you added on the config so initializing a candy guard it's wrapping boom so now if you look uh I think it's in the cache now candy guard now has its own public key right here so this is the PK which I'll call it for the candy guard okay uh one thing you need to know is this go back to your config.json and go back to sole payment there's something I forgot to mention so each nft that we have is going to cost 0.5 Sole and the destination where is that Soul going you need to set right otherwise this is a wallet address another PK so let's say I open up my Phantom and I want every person who mints in nft they pay 0.5 so I want it to go to somebody so let's make uh that go to qazi my qazi wallet here so what we can do is copy that address and paste it here all right and actually let's make this more expensive so it's more visual let's say it's cost one soul all right so it's going to cost one still for each nft and now that we uh updated this we need to write sugar guard update so now we're updating the config and there we go so now our candy machine should be up to date the new payment the new price is one the destination for the payment will go to my Kazi wallet okay so we're giving Kazi some money for every entity we meant so I'm sure he'll be happy with that let's go to the next step now all right so we set up our candy machine now you might be wondering if you're new how do I get some soul right this Coswell already has 6.9 sold to it how can I give myself some Solana so I'm gonna go back to wallet number one and in wallet number one I have three Soul how do we get more if you go to a new tab we go to something called soulfosset.com and there's other stuff like this but what we could do is get free Solana devnet tokens to our wallet so we have to do is click on your Phantom copy your wallet address or your wallet PK paste it and airdrop to Seoul to the devnet right and okay there's error but uh usually this is how you can get Solana for your wallet okay so make sure to do that a couple times it might have an error if you click it too much which I just did recently that's why we got error so give it some time Okay cool so now you guys know how to get um some Solana should have a couple of soul in your wallets because remember each of these costs one and now what we need to do is this all right go ahead to your uh cache.json and what we need is our candy machine address so go ahead copy this candy machine address right here and let's go back to our app right which is this and go to our utils and in our utils go to constants and one thing I remember is remember the candy machine ID this is where you're going to put your candy machine ID right so mine the one I copied and we can just paste it like so I'm on the FK thing so save uh Ctrl B and there you go we have our candy machine ID and it's exported so that we can use it in just a second here so let's go ahead and set up our candy machine on our front end all right so if you made it this far we are about to set up our candy machine to our front end so just to recap we are using something called metaplex which makes it easy to make your nfts and Collections and specifically candy machine which is a tool to set up your assets and to host your collection Okay cool so the first thing that we're gonna need to do after you put your candy machine public key here is let's head over to main okay so if we go to our main component under public or under pages and then Main you're going to notice our app right and then if you look at something called nft display that's where you're seeing our application right here right this is what's showing the nfts if you want to see your own nfts this is what you're going to do so go to your Solana playground and remember your cash dot Json all right we can take this cache.json and iterate through it and get the image link right so what we could do is literally just copy this object right here uh hit copy and to make it easier let's do something like this uh actually now we can make this full screen still all right so let's take that object go back to vs code and what we could do is go to where we're getting this data so if you look at nft display under index we are getting data from sample right what we want is data .js right so we want to change this stuff so let's go ahead and change this object with this object and if we hit save uh it's not gonna change right away right because we have to change this later on but let's go ahead and add the rest of the object so I'm going to get the next one which is this right here I'm gonna get the next one and the last one is the collection but we don't need that because we're not displaying that picture right there cool so we got all of those and updated our data.js and now we can go to their nft display I'm going to send a sample we need data so now when I hit save take a look we go back to Solana Monkey Business and there it is there are our nfts all three of them they look really cool like so so these are our smbs let's hit connect and we're connected and now we just need to know how to Mint them and how much nfts do we have like well I want to see how much are remaining how many are minted and how much do they each cost right don't you want to see that so we're going to set that up right now okay first step that you need to do you need to head over to your main component once again So Paid Pages Main and here we go now that you're here we need to import a couple different things so what we want to import is something like this we're going to import a lot of things from metaplex so we can say from at metaplex foundation.js because remember we're using metaplex as our tool to make this easier right so what we want to get from metaplex is a guest identity we want to get metaplex itself meta Plex we also want to get a wallet adapter identity and we're going to use pretty much all the things that we're importing right here okay and while we're here let's import a couple different things that will make sense later kind of like how we did last time so let's import see object lamp ports per Soul so if you didn't know lamp ports is like a smaller unit of Soul all right so think of it like a dollar if you break up a dollar you get cents a bunch of Lan ports makes one Soul so let's get lampard's personal and we also want to import a couple things from Solana wall adapter again so let's get um use oops use anchor wallet tab there you go and there's a used connection I believe so use connection okay cool and we also want to be using our candy machine ID so let's go ahead and import that say import candy machine ID from utils okay nice and there's our Styles and we can set up a state so we already imported use date so we're good to go so let's make one so this one's gonna be a state for our metaplex so we can say equals use State oops use state and our state is going to be metaplex comma set metaplex okay cool and you can set the default initial state to nothing for now because what we're going to do is set up our metaplex right so how do we set up metaplex guys well the first thing you want to do is let's get some connections ready for later as well let's get const connection from news connection not from uh you want to say equals because the hook use connection and you also want to get const wallet from use anchor wallet cool so store this in a variable awesome all right so back to what I was saying about the use effect so let's make a use effect you can say use effect like so Arrow function and we're already set up so in this use effect all I want to do is set metaplex okay but now here's the part how do we set up metaplex inside this state right we're changing this state from nothing to something right so what I want to change it to is metaplex right where we're getting this we are getting this from our import and there's some built-in functions or methods here one of them is dot make so dot make and we pass in a connection so we say connection and then we say dot use parentheses and what the connection you want to use well wallets well we want to say some conditional rendering so if wallet exists use the wallet adapter identity right from here come back down and pass in the wallet and type that identity if not we'll use the guest identity okay and that's gonna be our metaplex right so if I were to console log metaplex let's see what we get oops here is our magic box not that so let's refresh this let's see what comes up oh is this even running okay it's running back to console awesome so I loaded a couple times that's fine yeah it's constantly re-rendering and the reason why it's re-rendering right is because we did not put a dependency module here so this needs a dependency module and we can make it depend on the connection and the wallet so it will only render once or when the connection or wallet is changed so now you won't see the infinite render so let's refresh it cool so it's like live debugging right here awesome cool so yep you should only see it twice because we're about to see another time when we connect cool so this is our connection metaplex and when I open that metaplex object you can see Auction House candy machines candy machines V2 right uh you can do dot RPC we can do dot storage so there's a lot of different things you can do with candy machine but I'll show you guys what we what we would want specifically so we're going to use metaplex for something else all right so we don't need that so let's go ahead and erase and let's set up one more use effect right let's so we set our metaplex object here and then now let's use that metaplex object to get what we want so what I want to do is set up my uh state right for my candy machine and update it uh every few seconds all right so how can I set up my state and update it without calling the function over and over again all right this is where use effect comes in so let's make another one let's say use effect Arrow cool so in my use effect all right we can set up some edge cases I like to call it so if we say if metaplex return right what does this mean it just basically means if there's no metaplex right this doesn't work for whatever whatever reason then this isn't going to run we're just going to return right just leave because there's no metaplex okay that's called an edge case so if that's the case that's fine but now what do we want to do we want to set up my state and update all right so let's set up let's call it update so we'll say const update state or this is me making a function and we'll put in a function like so and it's important that this is a synchronous so make it asynchronous and once you make an asynchronous go inside between the curly brackets and let's set up H for I catch okay because it wants you to essentially do a promise and try whatever I write in here if it fails for whatever reason it's going to hit this catch so let's set up the catch it's pretty simple we can do an E like that like that and then we can say console dot blog e right cool then we can even uh we can even say toast that air right if you don't know what toast is it's basically notifications that are built in using the packages and you can say uh something went wrong yeah error has occurred so you should see a little pop-up automatically thanks to toast then error has a code if any of these things fail right here okay now we want to set up a couple different states when we update state right we gotta tell them what states are we updating right so what states are we updating that's a great question we're gonna go up here and we're gonna make a couple things we can say const candy state all right this is the state of my candy machine set candy state set that equal to U stick okay set up another one this one's going to be called candy state error right so we can put a nice you take the error and put it inside a nice error message and display that on our front end okay okay the set candy state it's equal to use state awesome so if anything goes wrong we'll be able to display it we can also say a loading State const candy state loading and set candy state loading and set this to True by default and then we could do a transaction error as well so we could say TX error this is these are also these last few are optional but it's good to have if you want to play with it so whatever equals use state I feel like there's something in my throat anyways let's keep it going let's do a TX loading and set TX loading all right so you can have a nice loading screen if you use utilize this as well uh but we're just gonna have a message that says something and this one by default is false all right um last but not least we also want to set our nft so const nfts and we're only really going to use set nfts here okay set this to an empty array cool so that should be all our states so now to our function so go back to your update State function and we're going to start writing into the try so inside the try we're going to say con state right it's a variable is equal to a weight right we're going to wait till we run this Command right here whatever it is so this variable is equal to await metaplex or using metaplex and if you remember metaplex has metaplex candy machines all right we're going to use that so we're going to use metaplex and then I'm just going to format it right here Dot candy machines right and then you can do another dot for chaining it dot find a buy address I Believe by address okay and what is the address of our candy machine right and we can pull it up like so so make an object in here and say address key and the value is our candy machine ID so put that in there boys and girls we can say candy machine ID okay so what's happening here we are trying to set up our state we are getting metaplex getting the candy machines finding the specific one with this address make sense cool so now if that makes sense to you we can set this state because now after this is done if it's successful we have a state fair we can say State here um if it fails it's going to go into the error until this moment wrong so now I can say state after this line but what we need to do next is set our state so we can say set candy state that's what we made that earlier for and pass in state okay now what is state right so let's console log it state this is our state our candy state specifically so let's save that oh state is not the one sorry it should be candy state let's see can we get it um cannot read properties of null so we're into our first error and so it's undefined this is our state which means there's an error somewhere cannot read properties of null reading query let's go back to our code caves still says undefined so let me just check here um oh I know why see how this update state is uh grayed out it's because we forgot to freaking call it right so This Is Us creating the function but we never called the function so let's go ahead and call the function update State and we also should put a dependency module so it doesn't keep re-running over and over again so let's say now there it is we got it so now we have our candy machine state right so if you see this object this model right here and all of our information is here so look at items do you see this guys items so if I do console on candy state let me just put some space between here candy state DOT items all right let's see what happens look at that we see an array of three things where have we seen that before right we have the first index of our SMB number 10 and the URI so this is our access to our nfts so we need this okay so what we can do now all right is set our nfts so now that you know what this is all right let's fix our update State and add some more things so we have set candidate we can also do set nfts right and then we can set it to State DOT items right and we can also set candy state error to no right because if it's in our try if it made it this far there shouldn't be any error oops there we go awesome so hit save and we can also add a finally here right and if it finally loads we can set candy loading state to true or to fall sorry because it's not loading okay cool so I think it's true by default so this is true by default but now we can set it to false right it's our flag that's done loading if we do toast dot success we can say uh updated state all right cool I remember I said how I wanted to update it every few seconds all right so what we could do is set up something like this so let's put metaplex here so it's only going to run once and whenever metaplex changes for whatever reason and also we can say refresh state every usette state every 30 seconds okay so we can say const interval ID is equal to set interval and in that set interval we can have a function that every interval update the state this is what we want to run and put a comma here for how long you want it to run and if I say 30 underscore zero zero zero that should be 30 seconds on the timer okay and then from here we can say return we want to clear this interval and by doing a clear interval then we could do interval interval ID so that's how you clear it we can do oh sorry to return the function itself cool so like I said if you want to do anything with the nfts at all right you can say nfts and that's your array of nfts right so we don't have to do anything with that specifically what we want to do next is set up our what's it called if you saw the demo you saw how many nfcs were remaining we want to do that I want to show our sold out stuff let's do that say cons sold out and sold out is just going to let us know if all the nfts are sold out and this is going to equal candy state all right if it exists that's what this question mark is for dot items remaining dot eqn zero right so can't remember how we added candy state items uh we can also do candystate dot items remaining and that eqn is equal so if the items remaining is equal to zero this is going to return true if it's not it's going to return false so that's what we're setting up here I think I spelled it correctly and after that we can do const sole amount all right we can have a variable that tells us how much each of our nfts cost and if you remember how much does it cost just one Uno all right so candy estate again question mark and question mark if I don't put this question mark here it's going to say dot undefined right because it's not going to question mark it so if this exists candy guard which if there is a candy guard again that's why I put in question mark cards all right question mark if it's there dot Soul payment right so if you look carefully it's looking into our candy guards and specifically checking the sole payment and that's going to return to us a number that we want right so if that exists if there is a sole payment then show me that show me the payment candy state DOT candy guards candy guards can guard oops dot guards dot sole payment dot Lan ports right now we have to convert it that two number yeah so let me have to press enter for this one enter so I can look it like that that two number all right so let's just break that down so I'm looking at my candy state looking into the guards looking into the sole payment which should be one and it's going to give us it only shows us in lamp ports all right remember the the smaller unit of soul and then put a two number right so we can have it something readable for us divided by lamp ports per soul and that should give us the right amount and then if you can say or no okay so this is either going to give us another uh State essentially go and add this semicolon here add that semicolon there and you should be good to go okay so that's our sole amount our sold out foreign okay something off about this shouldn't be oh sorry guys this should be question mark Dot candygard and now we shouldn't see an error okay cool yep it should be great I like so if you did that you're good to go um now the next part is we want to put our candy mistakes uh candy machine States here so let's go ahead and do that all right so if you're here we're going to set up our candy machine States and set up a lot of conditional running so be prepared so the first thing that I want you guys to look at is this set up the curly brackets like so and you're just going to write uh loading right the candy state loading okay so this is our loading State I remember if we look scroll up candy state loading is set to True which means something is loading right and if we say conditional rendering here I guess question mark what that means is we want something else to load so if candy state loading is true then load this HTML which is going to be just a div let's get the closing bit in there and it's just going to say loading all right if it goes well you'd only see this for a second if it takes long you're going to see this loading text for a while right so what you want to do after this is colon because this is the else part of a conditional of a ternary operator so we can say candy state error because if it's not loading there's a candy state error so if that's true we can set up another conditional rendering you see my so why that's kind of confusing so candidate loading is true load this div if not load this ternary statement all right so what's this ternary statement if Candy's State error is true then load this div and this div is just going to have the candy state error that we have cool so when do we see this div if candy state error is true okay what if it's not true what if there is no candy stator then we should see the whole thing right so we should see the candy state then because there's no error and and so so two things have to be true candy state and this so we're gonna see two things um now we can have a div here closing did and this is where the majority of our text is going to be so we can say another div here foreign we can say total items right because I want to tell you guys how many items do we have in our nft collection so we can write is a variable here by saying some jsx so we can say candy state again and how do I see the total amount of available items you're just going to do Dot and just write items available because we did items remaining before we can do items available dot to string so that we can read it okay let's hit save look at that so for you if everything works successfully we see total items is three and there is three nfts here as you can see so that's good total items is three all right but there's more what if I want to see the total minted uh items okay how would we do that so let me close that div well you would forget your candy state again so candy state right but now how do we get it you do Dot items minted and you might be wondering Lance how did you know all this well if you just console log candy state take a look in the console and see all the different things you can do just test it or read a documentation or follow this tutorial right a lot of different options different ways to learn do dot to string so it's in a nice format that it can read so let's save this minted items zero so this makes sense right because how many times have we mint an nft zero right unless you skip the head then you're achieved so back to this we could do div and we could go uh closing div awesome and in between this what do we want to do next we want to do remaining items so this one should be familiar we have to do candy state DOT items remaining right it's pretty obvious got two string and there's so total items three minted item zero remaining items three there you go cool so we closed that div off and is there anything else that we should do yeah there's a couple different things uh one thing I want to do is let's talk about the solar mount right so if there is a sole amount if there's not then it's not going to show up uh then we can say div closing div you can show the cost here say the cost is this soul amount space so yeah cost one so there you go and how did I know is one because in our Solana candy machine it has access to all this information Okay cool so cost one soul right it's going to change depending on what you put here uh the next one we can put the TX there so if any point you get an error we can set up this dip so we could say TX error and div closing div and we're just going to write t x error so if anything goes wrong with the transaction we're making use of this state right here right we're not setting anything just yet but when we do when we make the mint function okay next div closing div right this div this one's for the mint button so I just made a div I'm going to give it a class name actually class name and we're going to use styles styles dot button container because this is going to contain our mint button and you just have to say button like so and give this a class name class name dials dot mint button okay and under that we can give it a couple things so on this button itself it has to have it on click which we'll do in just in a sec it doesn't have it just yet but hmm actually start mint for now oh I just remembered something we should so let's start mint for now right so this is good you can even leave it just as this it just says mint and if you click it it should allow us to Mint an nft but uh what if all your nfts are sold out we can turn this mint button into a sold out uh sign right we can do that by erasing mint putting curly brackets and misuse are sold out variable and if that is true if sold out is true right remember we made that variable to check so if items remaining is equal to zero if that's true then it's going to say sold out right and then or TX loading if loading is true then put loading right our button will say loading if the transaction is loading um otherwise if it's not sold out and if it's not loading show me the mint put which it should when I switch here there you go same thing but you know getting a lot of functionality out of this condition so that's why we set it up uh way back when cool so now we have a dynamic mint button and from there that's pretty much it so we just need the functionality to Mint these nfts so let's go ahead and work on that all right so we are in the home stretch now let's learn how to Mint nfts when I click this button the first thing that you want to do is let's make the mint function so scroll up to all the way here right before the sold above the sold amounts and let's go ahead and make a mint function so let's just say const mint is equal to async Anonymous function the reason why I'm making this asynchronous is because we need to make a call to metaplex to Mint this specific nft so let's go ahead and do our Edge case remember what our Edge case is guys it's if metaplex does not exist then we just return right and you should spell metaplex correctly boom so if meniflex doesn't exist return um in the meantime we're gonna set Trend TX loading to true because during this time of minting this should be true and we can also set TX error to know for now right cool so once you do that now for the actual functionality we'll do a try catch again and I'll set up my catch and if there is any sort of error we can just cancel out so it says console log e and we can do a toast dot error and just say uh mint failed right I mean you also want to set up our like show our error by saying set the x error to E Dot message I believe yeah you don't message cool so that means if you go back to here it'll show us underneath the soul the transaction error that happened so I mean hopefully we don't see it but if we need to like debug that's I'm glad it's going to be there okay and in this try catch we want to say const mint result it's a variable that is equal to weight and here comes metaplex again metaplex dot candy machine candy machine uh s parentheses dot mint so candy machine has its own Min function in order to create it from scratch and we put parentheses curly bracket like so inside here you have to put some property so you can say candy oops candy machine colon object and then address oops address colon candy state that address so that's how you get the address of the candy machine can you state the address the next thing you want is the collection mint address oh don't forget to put a comma here and for that you need candy state oops candy state again and say dot collection mint address all right so I can see the pattern here so you can say uh the candy guard is a candy state DOT can you guess it candy guard put comma here comma here and that's actually it uh we do need to put a comma here and then say collection update Authority make sure you spell it right and say candystate dot Authority address Authority can you state Authority address okay comma there and then the last part is group is no all right that looks good to me uh we can also console log the mint result mint result in an object and we can also say toast that success well we don't say toast that success here we can actually say finally and then do the toast.success so what we could do in the finally is set TX loading back to false because now it's done loading and we can also do a toast dot success here and say um minted nft so let's save that and now we made the function we got to call the function down below so if we scroll down where is our button we can add the on click now so we can say on click equals object object and then write mint for the main function so when we click it the mint function will run we also want to disable this button and when do you want to disable it well I only want to disable it when there's no wallet or let me zoom out for a second uh if the TX is loading right so we can't just Spam The Mint button um can also make it disabled when it's sold out so when we have the sold out sign you can't really click on it just kind of just it's kind of just there so it's disabled during that and with that cross our fingers hopefully this works so let's switch to the main app okay we're in the main app select wallet Phantom uh are we connected oh enter my password boom okay so now we connect updated State let's hit mint loading let's go approve transaction so remember two things my qazi wallet is getting the money so you had six Soul so after we lose one Soul Kazi should have seven if this works properly so let's hit approve let's go mint in an nft we did it boys and girls and if you look uh remaining items it's still three but remember our timer every 30 seconds it's gonna say updated State and now look at that total items three still minted items one remaining items two and the cost still one sold so there you go we successfully minted an nft but now we're not done yet because if you click Phantom you go to your wallet let's check on qazi so if I go to qazi he has seven Souls so that means I just mentioned an nft and somebody profited qazi got one extra soul from me and for our troubles if you go back to your wallet wallet number one click on these four squares right here you can see my old crab collection but look at this we got Solana Monkey Business 1001 in our collection with the description we wrote and the properties that we wrote to so this is it this is a real nft in your wallet if you made it to this point in the video hopefully you can make your own nft collection that you could put out there hey and maybe you can make tons of Solana with this so hope you guys enjoyed the video let me know drop the comment down below if you want to see a more detailed release like a delayed reveal and just drop in the comments I'll see you guys in the next video peace\n"