How to Build an NFT Minting App: Enable Users to Mint NFTs with No Code (2024)

hey everyone Sean Wata here back with another video and in today's tutorial we're going to be creating our very own nft minor where you'll be able to deploy your very own nft collection smart contract and then we'll build a application where a user can upload their own image name their nft give it a description and mint the nft to their wallet an overview of what we're going to be covering in this video we'll first take a look at a demo of the nft Minter that we're going to be building we'll then jump onto the third web to deploy our smart contracts and then we'll build out our own NF Minter application where again any user will be able to sign in to our app upload an image give the image a name in description and mint the nft to their very own wallet so with all of that being said let's jump on the computer here take a look at a demo of what we're going to be building so right here this is an example of the nft Minter that we're going to be building and you can see here it says sign in to Mint and nft we have a signin button here which is a connect wallet component from third web right now we only have embedded wallet wallets enabled which means a user can sign in with a social login or an email address and a wallet will be generated for them so easy onboarding and easy accessibility to anyone to for anyone to use our application uh but before we sign in over here we have the minor which is this page right over here we also have our collection which will load the nfts that already have been minted to our collection uh it'll have the title or the name of whatever the user names nft the image that they have uploaded and you'll have uh the owner so it'll show the wallet address of who it is owned by so if we come back to the mentor here let's sign in so I'm going to sign in with Google here and you can see up here we have a wallet connected now we are going to be using third webs Engine with this and we're also going to be using a back-end wallet to take care of all of the blockchain actions including paying for the gas so even if a user creates a wallet here they won't need any funds or anything because will be able to take care of that all on the back end so once you're signed in you'll be able to access the minor where you can click here to add a file you can add a name and description and then mint the nft so we'll click here to add a file you can see here this is the image I have uploaded uh we'll name this uh Ramen Panda and we'll give this a description so we'll just say uh Panda relaxing in a bowl of Ramen once I have the image I have a name and a description I can mint our nft you can see it is minting here uh we'll get an alert once the nft has been minted so our nft has been minted we'll hit okay if we take a look at our engine dashboard here on third web you can see a transaction was put through third web's engine is going to be taking care of and our back-end wallet is going to take care of the minting and the trans transferring of that nft to the user's wallet so once that's done if we come back to collection here we'll see one more nft over here pop up which is our ramen Panda you can see the image here the name that we gave it and you can see it is owned by this wallet ending in f1b which is this wallet right over here and again this is the demo of what we're going to be building so anyone can upload an image name the nft and mint that nft and it will be sent to their wallet now how this works is we're going to be deploying an nft smart an nft collection smart contract through third web which is an ERC 721 smart contract so all of these nfts here are going to be ERC 721 tokens which means they're all going to be unique anyone can mint these nfts but they will all be part of this same collection here but the first thing we're going to have to do to start off this project here is deploy one of these smart contracts or nft collections to store and mint our nfts to so I'm going to come over to third web.com here once you connect your wallet up in the top right you'll be brought to your dashboard here and we're going to head on over to contracts I'm going to hit this blue button here that says deploy a new contract and we're going to scroll down to the nft section here and we're going to look for the nft collection smart contract and again the nft collection smart contract is an ERC 721 smart contract and what makes this nft collection smart contract different from say the nft drop contract is these aren't claimable nfts so again when we're creating this nft Minter any nft that is created is going to be automatically minted to the wallet or the user who is using our application where this differs from an nft drop contract is the nft drop contract those are claimable nfts so those are normally for collections where you already have set metadata for certain nfts a user can then uh sign in they'll be able to claim that nft which would have been lazy minted to the smart contract in nft collection here again we're creating the metadata through our application and once the image has been uploaded the name of the nft has been given will then mint that nft to the users's wallet so for the use case of our nft Mentor application we're going to be using the nft collection here so I'm going to hit deploy now we're going to name our smart contract here I'm just going to call this nft uh Minter and we'll give it a symbol we'll call it minor you can give your contract a description add an image if you want you can also customize uh the parameters for royalties and primary sales I'm going to leave everything else as is down here at the bottom you'll see network and chain in the drop- down you can select any evm comp compatible blockchain uh we support any evm compatible blockchain so you can deploy to any one of them you can just search the network or chain ID we have main Nets test Nets I always suggest that you deploy and test things out on test Nets uh don't use real funds on Main Nets or anything but we're going to be using the Mumbai test net here and I'm going to hit deploy now we'll have a transaction pop up in our metamask wallet or whatever wallet you are using we're going to confirm to deploy that smart contract we'll then get another transaction that pops up asking for a signature so we can add it to our dashboard here on third web so there's that second one the signature request will sign so we can view it on our dashboard and once that is deployed we're going to stop here we'll have to do one more thing back in this contract later on so leave that open up in one of your tabs but the next thing we're going to do is start building out our nft Mentor application so I'm going to open up my terminal here on my desktop so in my terminal here I'm I'm going to create a new third web project I'm going to run MPX third web create app not going to upgrade right now we're going to name our project we'll name this nft Minter app we're going to use uh nextjs and typescript for this application in tutorial once that's done we'll change into our folder here for nft uh minor app and then we'll open this up in our code editor so in my code editor here we have our nft Mentor project I'm going to go into the pages folder and first head on over to theore app. TSX file and the first thing we're going to need to set up and configure is this third web provider here and the first so right over here we have first our client ID and we can get a client ID or a third web API key from the third web dashboard so coming back here I'm going to open up a new tab uh but go to settings here so under settings here you can see you can create your API key here with third web which allows you to use third web services through the SDK and CLI so all you need to do here is create an API key if you want to learn more about third web API Keys we'll link down in the description below a links to a tutorial video as well as the documentation where you can learn a little bit more about it but I'm going to copy it right here my client ID from my API key head back here and in my file directory here I'm going to go to the env. example file and over here you can see we have our next public template client ID I'm going to paste in my client ID here I'm also going to come back to this file and rename it and get rid of the uh example so it's justv then we'll come back to theore app. TSX and down here the next thing is going to be our active chain which is going to be stored in this active chain variable which is right up here by default it's ethereum uh we're going to switch this over to whatever Network or chain you deployed your contract to so in my case I deployed to Mumbai and we're going to switch that over here but you'll switch this over to the network and chain that you deployed to next I am going to add support for embedded wallets so if we actually run this here let me open up my terminal and just run yarn Dev we'll open this up on Local Host 3001 this is the templated project that you get with third web you have a connect wallet button here and you can see here it allows you to connect to a bunch of wallets like metamask coinbase or any type of wallet connector wallet but we want to just make it easy have a user be able to sign in with social logins or email so we're going to use third web's embedded wallets and to set that up all we're going to do here let me just drop this down in our third web provider we're going to add our supported wallets we're just going to give it an array of the wallets that we want to support in our application and all we want to do is support embedded wallets so we're just going to add embedded wallets and just like that we now have embedded wallet support on our application so if I come back to the templated project here and I hit connect wallet you can see right here I only have the ability to sign in with social login or email and that will generate a wallet for the user for whoever signs in so coming back to our code editor that's going to do it there for setting up our project again we set up the chain we set up our API key and we added support for our embedded wallets before I continue on with the project I'm going to add some CSS styling here so under my Styles folder in this home module I'm going to add some styling and this is just so that our project looks nice as we go on throughout this tutorial and I'm not wasting too much time going through the styling but if you do want to see the project that I'm working on we'll link down in the description below a link to the GitHub repo where you can check it out so I'm just going to close that and let's take a look back at our demo first so come back right over here and in our demo one under the for our application we have this nav bar up here that has the name of our application it has some links here to the mentor page and the collection page and we have a connect wallet button to to allow a user to connect their wallet or sign into our application so we're going to build this nav bar here first we're going to come back to our code editor in my file directory here I'm going to create a new folder I'm going to call it components and in that components folder I'm going to create a new file and we're going to call this one navb bar. TSX and I'm going to create my navbar component here and for my navbar first uh this div we're going to give it a class name here and I need to import my stylesheet here so I'm going to come back up here import we'll say styles from I think it's home module yep and we're going to give this name a class name of styles navbar and the first thing that we have here we'll make a div uh we have a title so we'll call this nft uh minor app we'll give that div a class name here of styles. navbar logo then in the middle we have some links or navigation so we'll come here we'll give this next div a class name of styles. navbar links and in there we're going to have two links so the first link uh we'll just say uh give it a p here we'll say minor which is going to be our nft minor and then we'll have another link here this one will say collection which is so someone can view the collection of nfts and this one here is going to link just to our homepage and this one here we're going to create a new page uh which will be called collection so we'll put slash collection here and then at the far right we're going to add a connect wallet UI component which is what we're going to which is all we have to add in order to get that embedded wallet support and the ability for a user to connect a wallet to our application so once we have our nav bar Set uh we're going to come over here to our uncore app. TSX above the components here we're going to add our navbar save that and if we take a look at our app here on 3001 right here we have our nav bar up top which has our minor and then we have our collection page uh but we don't have that created yet and then we have a connect wallet button which allows a user to sign in with social logins or email and then one last thing we're going to do with the nav bar here is change the text of our connect wallet again we're trying to make this a userfriendly application so instead of connect wallet we can change the text if I come back over to our Navar here and in the connect wallet we can set the button title and we can set it to something like sign in and if we come back you can see right here our button now says sign in so when we click on that a user can then sign in with their social login so now that we have our Nabb bar complete if we take a look at our example here let's work on the minor section here so if I sign in we're going to create this nft Minter where a user can upload the image file that they want their nft to be be and then give their nft a name and description and a button to Mint so let's head on back to our code editor here and I'm going to navigate to the index. TSX page in the pages folder and in here I'm going to I'm going to delete all the templated uh code here so all of this we'll just select it delete that and we'll get rid of this images and we'll get rid of the connect wallet button so for our app we only want a user to be able to see the input fields to Mint and nft only if they have a wallet connected or if they're signed in and that's because they won't be able to Mint an nft if they don't have a wallet for us to send the nft to so in order for us to do this we're going to create a variable here called address and we're going to use the use address Hook from third web which is going to return us the wallet address of the connected wallet or return us undefined if there is no wallet created or connected and we can use this here so we'll create a div here uh we'll give this div a class name of styles. container and in there uh if there is an address we'll display our mentor and if there is no address then we'll just display some text here saying uh sign in to Mint and nft so if we do that and we take a look at our application come back to 3 2001 if we're not signed in it's going to say here to just sign in with um to sign in to Mint and nft but once we do sign in so let's sign in here so once I am signed in uh this is where our nft minor is going to be and right now it's not showing anything because we didn't add anything into this div here so looking at our demo here let's first build this left side here which is going to allow a user to drop in some image file for their nft media so in here we'll click and they'll be able to select a file and upload an image that they want to use as their nft so coming back to our code editor we're going to first create a variable called our file input ref and we're going to use use ref here and this so we can uh create an input where a user can then select the file and then we're going to create a state variable here called image URL and we're going to use a use State and we're going to set it to either string or null and we'll set the initial to null import use State here next we'll create a function here called handle change and this is going to be checking to make sure that there is an assess file for us to process and upload for our nft so in here we're going to create a fil variable which is going to equal our Target files and if our files and the files length is greater than zero will then be able to process the files that we uploaded so we're going to create a new function up here we'll call this one uh process file and this is going to read our file and convert it into a data URL for us so over here we're going to say uh reader is going to equal uh new file reader file I can spell file reader and we're going to say reader. on load n we're going to then set the image URL to to the result as a string and then we're going to set the reader. read as data URL to file and then back in our handle change here we'll be able to process our file and we're going to grab index zero because a user should only be able to up select and upload one file when creating their nft and then below that handle change we're going to create one more function here called handle file select and all this is going to do is open our file selection for when a user uh clicks on our input so we're going to use file input ref. current. click so now in our app here uh in this div right here so once we have a wallet connected and there is an address we'll create a div we'll give it a class name here of styles. mint container and in there we're going to create another div this one is going to have a class name of styles. mint container section and we'll have a title here that says nft uh we'll just say nft image cuz we're only going to allow images then we're going to create another div within that that div is going to have the class name of and that div is going to have the class name of styles. file container and an onclick uh of the handle file select so it'll open up and prompt the user to be able to select a file to upload for their nft image and then within that we're going to have an input this is going to be of type file and it's going to accept uh any image type file so this includes PNG JPEG and gifs we're going to have our ref here point to our file input ref we're going to have some styling here just really quick uh which we're going to say display none cuz we're not going to show that input it's going to be our div here and then we can say on a change we're going to handle the on change with our handle change function all right and if we come back to our app here you'll see um well you'll see nft image and right now if we just click anywhere it's going to allow us to add our image uh but we're going to add some styling here where you'll see a box uh that says click here to add image and if there is an image already selected it should show a preview of that image so coming back to our code editor here again in here when we're handling the uh change we're processing the file and we're setting the image URL so if we do have a image URL we can display that image and if not we're going to display a box that says click to upload your image so over here under our input we're going to check if there is no image URL so there's no image URL we'll create a div here with some styling uh we'll give it a border of Dash we'll give it some padding we'll display Flex to Center the content and we'll give it a height and width of 100 and it will say inside of it to click to add a file now if we do have a image URL then we'll create another div here that div will have the uh styling here which is give it a height of 100% and within that div we're going to display the image and we're going to use the media renderer component here from third web and we can just set the source here to the image URL give it a height of 100% and a width of 100% as well so coming here come back to our app you can see here now we have a checked box uh dashed box here that says click to add file so when we click and we add our file it'll then show the file image here now we also want to create a little button here that just uh says reset or choose different image that way a user knows that they can click on that button too in order to take away this image or select a new one so coming back to our editor here I'm going to add a button here uh we'll just have it say reset button's going to have a class name here of styles. reset button and we're going to create a onclick function here so I'm just going to have this say uh reset and all this reset is going to do is set the image URL back to null and then we'll give this button a onclick of reset save that come back here now we have this reset button if I hit that reset button it removes the image sets it back here and then we can add another image once again and then it'll show the image and our reset button cool and then the next thing if we look here is we didn't need to add this right side here which is going to be the nft metadata so this is going to include the nft name and the nft description along with the button to Mint the nft so coming back to our code editor here right after this div here we're going to create another div call this our class name styles do [Music] mint container section again and then on this side we're going to name this side nft metadata so save that if we take a look now we have our image here on the left and then we have the section for nft metadata here so for our nft metadata I'm going to come back up top we're going to create a few more State variables here we're going to call this first one here the nft name uh we're actually not going to do no here we'll just make it a blank string and we'll have description as well so we'll create one for nft description and then we're going to create a state variable here for the uh minting status so we'll just say uh minting nft and then set minting nft and then we'll set it to a false for the initial state so coming back down to that metadata section we're going to create here we'll just say uh nft name we'll then create an input that input is going to be of type text the uh play holder we'll just say um my nft name we'll have value which is going to be nft name we'll have the on change which will set the nft name to the value of the input and then we have class name here which we'll call this um styles do metadata input and then below that we have description and then we have the same thing we're just going to put an input here as well it's going to be of type text it's going to have a placeholder that says this we'll just say uh this nft is dot dot dot we have our value which is going to be our nft description uh we'll set the on change and then we'll give it the same class name here and then below that we're going to create a button and that button depending on our minting status if we are minting an nft it's going to say minting and if not it'll say mint nft and we'll give this button here a class name of styles. mint button uh we'll create an onclick function but this button is going to be disabled if the if we have a minting nft so we're not going to be able to click that button more than once and next so let's take a look at this really quick let's come back here there you go we have our section for our nft metadata and then we have a button to Mint nft which we haven't set yet so again we have an area where a user can select the image of their nft they can input the name that they want to add to the metadata along with a description once all of that set they'll be able to Mint their nft so next thing we need to do is set up our backend here to take all of this information that a user inputs and upload the image to ipfs and then with that ipfs hash we can then create the nft metadata and mint the nft to the user and in order to do this on the back end side we're going to be using third web's engine and and what third web's engine allows us to do is make API calls to a backend server here which will be able to transact blockchain transactions for us so we actually have these backend wallets here that we have some madic and everything loaded with and what this backend wallet will do is once it gets a request to Mint an nft it'll take that information with the metadata and everything mint the nft and send it to the wallet of the user who is signed in and again engine's going to take care of everything on the back end so on the user side they're not going to have to worry about confirming any transactions paying for gas all they need to do is sign in to our application and upload the image select the name and click a mint button and again we also used embedded wallets so nowhere in the process of this application will a user actually have to go through any of the web 3 user experiences that normally come when you have to connect the wallet fund it and pay for gas and confirm transactions so to set up our third web engine here I already have an instance of engine that I'm going to be using here if you want to learn a little bit more about engine you can also set up a free version locally on your desktop We'll add a link down in the description below where you can follow that to set that up but I'm not going to walk through that whole process here but again down in the description you can check out the documentations along with a tutorial video so coming back to our code editor here in my file in my pages folder I'm going to create a new folder here called API and a new file within that called mint nf. TS and in this mint nft file here we're first going to uh export a config here for our AP for our API request and we're going to set the body parser to false uh we're actually going to be using form data to take in all of the information for nft metadata including the image file so we're going to set that here to false and then we're going to create our Handler here and we're going to import import our next API request and next API response and then in here we're going to create our request to third web engine and mint that nft but before we do that we're going to I'm going to open up my terminal here and I'm going to run yarn ad at third web dev slash engine and at thir web-dev SL storage um one we're going to be using engine to again use that backin wallet to do all of the minting for us and we're also going to need third web storage because we're going to need to upload that image file that the user chose to ipfs so that we can use it for our nft meta dat right and then I'm going to add one more here which is going to be oops um yarn add formidable uh which is going to allow us to parse through the form data that we're going to get for our request and once that is done I'm just going to drop this down here and we're going to make sure down here that we also export in default Handler so the first thing that we're going to do in here is we're going to make sure that our request method is a post method so if it is not equal to post uh we're going to return a status 405 just saying uh method not allowed and to please use the post method next we're going to create a variable for a new form which is going to be a a new incoming form uh which we can import here oops uh let's import incoming form from formidable uh it says could not find uh okay let's run this here so looks like we need to run mpm install save Dev and then install the types from formidable here and then once we get our new uh once we create a new form variable here we're going to get our form and we're going to then parse through our form here and get rid of this first thing we're going to check is if there is an error we'll return a status 500 of that error next we're going to get all of the data from our form so we're going to require a few things the first thing we're going to get is going to be our name which is going to be the nf's name that the user inputs in that input so we're going to get this from our form input we're going to look for the name field and we're going to store that into the name we're going to do the same with our description we're also going to get the address uh which is going to be the address of the user who and their connected wallet so we know where to send the nf2 and then finally we're going to get the image so we're going to get our image here for the image here we're going to check if files oops files. image then we're going to get the image files and we're going to get the first here if not we will set it to n so once we get all of our information or our form data here we're going to check to make sure that that we have a name description address and image and if we are missing one of those uh we're going to return a status 400 here saying that we're missing one of those fields because again we're going to need all four of those fields here to Mint our nft below that we're going to get a few variables here that we're going to need in order to make our request with engine uh we're going to need our engine URL we're going to need our access token we're going to need our backend wallet and we're also going to need our security key which comes with our third web API key and that is for our so we can use our storage to upload that image to ipfs and all of these we're going to store in ourv file so back in ourv file you're going to create variables for your secret key your third web engine your third web engine access token and your third web engine backend wallet so your third web engine URL is going to be the your URL in which you're hosting your engine on you're going to also be able to create an access token so if we come to your engine engine dashboard here and you come over to permissions you'll be able to create an access token so you can create an access token here and that access token will allow you the API access to your engine instance and then for your third web uh secret key when you create an API key you're given a secret key as well which you should have stored securely uh that's secret key is what you're going to need in order to get access to the uh storage so we can again upload the image to ipfs so coming back here to our code editor uh we're going to I'm going to put in my secret key and access token and we'll jump back into the mint nft TTS file in the mint nft TTS after you've put in all of your values for your variables here we're going to check uh to make sure that we have all those variables because again we need those and if not we'll return a response status of 500 saying we're missing some environment variables then after that we'll run a try catch in the catch here we'll just give a response of status 500 and give it the error message or we'll just say something went wrong um we'll just say of type any here uh but in the try here what we're going to try is we're going to first upload the image to PFS we'll then take that URI add it to our nft metadata along with the name and description and then we'll mint the nft using that nft metadata to the wallet address of the wallet that was generated for the user so we'll first have to again upload the image to ipfs so we're going to get our storage here and we're going to get a new third web storage and what this is going to require is your secret key so we'll give it our third web secret key here then we're going to read our file from the temporary URL path that we got so we're going to call this uh file data and this is going to equal FS Dot and let's import FS here so fs. read files sync and that is going to read our image file image file. paath and we'll actually uh let's just name our variable up here image file and it should be image file. file path there we go then we're going to upload that image or that file data to ipfs so we're going to call this here your r i and we're going to await our storage and we are going to upload the file data and oh we need to make this an async function here so right over here we're going to add a sync there we go so yeah we're going to upload our file data we're going to get back our URI then we can create our nft metadata so we'll say nft meta data and what our nft metadata is going to look like is we're going to have the name of our nft which is going to be the name which is what we got right over here from our form data and then we're going to have the description which is the description and then we're going to have the image which is going to be the URI of the image that we uploaded to ipfs now we need to get a instance of our engine here so we're going to create a variable called engine we're going to get a new engine and we're going to have to provide this with our engine URL which is going to be our third web engine URL and then our access token which is going to be our third web access token then we're going to create our request and get back our response here so we'll store this in response and our request is going to be to await engine and then we're going to say ERC and this is again a 721 because we're using an nft collection contract and we're going to run the mint 2 function and with the mint 2 function we just have to provided a few things the first thing is the chain so we know what chain we're deployed on which is Mumbai next is going to be the contract address so I'm going to actually come to my file directory here I'm going to create a new folder here called uh constants and then within that I'm going to create a new file called constants dots uh and then in here we're going to export a variable called uh nft contract address and I'm going to come back to the contract that we deployed and copy that address and come back here and paste that in cuz we're going to need this a few times uh throughout creating this application and then coming back here we can say nft contract address and then we're going to next need to what's next uh the backend wallet so we're going to put in our third web backend wallet uh and then we're going to need our request body which is going to include the receiver and the metadata so for our body here the receiver is going to be the address again of the connected wallet and then the metadata is going to be the nft metadata that we created up here with the name description and the URI of the image so once we get back our response we're going to return a status oops status 200 give it a uh message here saying nft minted and we'll set the data to the response then at the very bottom here we're going to just put fs. unlink sync and then image file. file path and this is just so we can delete the temporary file that we use to upload to ipfs so that is going to be our backend here that we're going to again mint that nft to our user so just to quickly go over this we're checking to make sure that our request method is a post then we're getting our form uh because we are going to submit the request here with some uh form data we're going to then parse through that data we're going to get the name description address and the image file for the nft we'll make make sure that we have all of those before we continue we'll also make sure that we have all the environment variables we need to upload our image to storage and gain access to our third web engine and then we're going to upload our image file to ipfs create our nft metadata with the information from the user along with the URI of the uploaded image we'll then use engine to Mint that nft to the the address of the connected wallet and we're going to use the information that we got as the nfts metadata so now back in our index. TSX file we just need to create the function here for our button so coming all the way up back up here we're going to create a uh handle mint function which is going to be a async function here and what we're going to check first is to make sure that we have a selected file uh so we'll just check if there is no file input ref current or file input ref current files or the file current file input ref current files length is equal to zero uh then we'll just return out and say that there is no file selected next we're going to set the minting nft status to true then we're going to run a TR catch here uh for the catch we'll just uh console error error and in the try here we're going to create the form data that we're going to submit to our request so form data here is going to equal a new form data and first one is form data we're going to append and the first thing we're going to do is name which is going to be our nft name next one is for our description which is going to be our nft description the next one is going to be our image which we are going to give it our file input ref current files and then the first file which should be the only file that we have and then we're also going to give it the address of the connected wallet so we know who to send it to so address will be equal to address which and we'll set also or to just empty strings here in case there is no address connected then we're going to to get our response here so response and we're going to await and fetch our API here so a slash API slash mint nft and in there our method will be post and our body is going to be our form data here then we'll get back we'll get our response and store it into a data variable and we'll check if our response is not okay we'll throw an error saying something went wrong and then below the catch here we'll say finally we'll alert the user that the nft had been minted we'll set the minting nft to false we'll set the image URL back to null we'll set the nft back to a blank string description back to a blank string and that should do it for our handle mint so coming back down here back to our button right over here we can add a onclick and that on click will handle the mint so we come back over here back to our application uh modal build failed okay let's come back here let's just uh let's look at this okay we'll just come back here and let's just run yarn install really quick just to make sure everything's okay there we go let's come back to our application refresh this and there you go so we have our application set up where we can add an image our metadata and we should be able to click our mint button to Mint our nft so right now let's test this out here we'll just select an image and we'll just call this a panda bear and then we'll just say uh panda in ramen so we'll select mint nft you can see here it is minting we get the alert here saying our nft has been minted and once I goes through if you come to your engine you should see the transaction and didn't go through let's take a look back at our application uh looks like we got an error here something went wrong let's take a look at our code editor here um so let's just take a look here transaction simulation failed Access Control account missing R got it um okay so sorry forgot about this uh back in our contract let's look at our nft contract here um so for an nft collection smart contract the only person allowed to actually mint nfts and create nfts for this contract is the owner of the contract and in our case the owner of the contract was my metamask wallet here that I deployed it with but because our backend wallet and our engine is the one trying to Mint the nfts they need access to Mint nfts as well so you can do this one of two ways uh you can give you can take your private key from your wallet that you deployed the contract with and add it as a back-end wallet in your third web engine or you can come down here to permissions on the contract and under mcreator you can add the backend wallet over here so you can just have so again you can either just take the wallet that you deployed with this to add it as your backend wallet or take the backend wallet and add and give it permission here within your contract so I'm going to take my backend wallet here I'm going to add it in here hit add address come down here and update the permissions just need to confirm that transaction and there you go we now have permissions so now I'll come back to the mentor app if I select my file here and give this the name of panda bear again and we'll just say panda in ramen and we hit mint nft you can see here nft was minted we'll come back to our engine and you can see there now the transaction has been sent our nft is minting and again engine is taking care of all of this on the back end so once this has been mined let's give it a second here so once it's been mined we can come back to our nft contract here if we look at nfts nfts here you should see that we have our panda bear and our description here Panda and Ramen and this is owned by wallet uh a96 and if we take a look at our connected wallet here a96 and there you go we created an nft Mentor now the last part that we're going to take care of within our app here is to add a collection page so we can view all the nfts that get minted to our nft collection so coming back to our code editor here I'm going to create a new file in our Pages folder here we're going to call this one collection oops collection. TSX we're going to create our collection page here and to create our collection page so let's just create uh div here give this the class name of oops let actually import Styles first give this styles. contain con ER and we'll just add right here a title we'll just call this collection so to display all of the nfts here we're first going to get our contract our nft contract so we're going to use the used contract Hook from third web and all we need to give it is our nft contract address then we can get all the nfts that are minted to that contract so we'll get returned some data we'll could just call this nfts and if we can use the use nfts Hook from third web and all we need to do is provide it our contract here that we just got and that's going to give us back an array of all the nfts stored in or minted to that contract now we want to display all of these nfts with nice cards so in my components folder here I'm going to create a new file we're going to call this nft card. TSX and for this nft component we're going to create a type first of nft card props and what are and what our component is going to need is an nft which is going to be of type nft we'll just import that from a third web then we're going to create our nft card component here we're going toate create a div uh we're going to import Styles into here give this div a class name of styles. nft card container and then the first thing we're going to display is the image we'll use the media renderer component again we'll give it the source here of the nft metadata. image below that we're going to create a div we'll just give this a quick styling here of some padding 0.5 REM we'll display the name of the nft which we'll get from the nf. metadata do name and then we'll display at the bottom who it's owned by so we'll display the uh wallet address and we can get that from nft do owner um but we can actually shorten this using uh shorten we can use the shorten if address function here from third web which will shorten our wallet address here so we'll provide it the wallet address which we can get from nf. owner and then shorten if address will just give us a shorter truncated version of it so that's our nft card then we just need to come back to our collection here and what we're going to do here is create a div that is going to have a class name here of styles. grid we'll also give it a quick styling here of some margin bottom we'll just say one ram and in our grid we're going to map through all of those nfts so we're first going to check nfts do uh we have nfts and that the nfts dot length is greater than zero uh because if there are no nfts in our collection then we'll just display some text saying no nfts but if we do have nfts in our collection we'll then get those nfts we'll map through those nfts and in return we'll get back an nft for each one and we're going to then display say an nft card for each one of those nfts we'll give each card a key which is going to be the nft metadata. ID we'll just give it the token ID and then we'll Supply uh then we'll give it our nft which is going to be the nft that we get when we map through all the nfts from our contract and just like that we come back to our app if we come to our collection here we should see our one nft that we have which is the panda bear uh right over here so the panda bear we have the image the title of that nft and then who it is owned by which is that a96 wallet right over here so if I come back here let's actually sign out you can see uh it shows us to sign in to Mint again let's sign in let's sign in with Google I'll sign into a different account so right over here and I now have a new account which ends in b34 add another image and then we'll just say robot for the name and then we'll just say image of a robot and then we'll hit mint nft again and there you go nft was minted everything resets uh we can create another one here so we'll just say uh another robot we'll say this is another robot we'll mint the nft you can see there nft was minted and we can actually take a look at engine here and we have our NF or our transactions getting sent and again engine is handling all of this on the back end uh we can come back to our collection here and we should see our two nfts that we just minted a robot and another robot and you can see it's owned by the wallet ending in b34 which is this wallet that we just minted them with and there you have it we created our very own nft Mentor app using third webs SDK along with third web's engine allowing us to handle everything on the back end not having to worry about our users having to confirm transactions or deal with the blockchain engine is a great way where we can build scalable web 3 applications and Abstract away the complexity of having to pass on those web 3 user experiences onto our users so again we able to build this app where a user can sign in with an email a wallet is generated for them they just need to upload an image give it a name some metadata and description and they just need to click a button we handle all of the gas transactions and everything again all on the back end with third web's engine so again I hope you folks enjoyed this video if you found some value in it don't forget to give this video a thumbs up hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on tutorial videos just like this if you need any help or a support we'll drop a link down in the description below where you can open up a support ticket with our support team you'll be happy to help you I'll answer any questions that you may have and again I hope you folks enjoyed this video you found some value in it and until next time see you

Channel: thirdweb

Views: 2,988

Keywords:

Id: 5FUFsSjYCvw

Length: 59min 2sec (3542 seconds)

Published: Fri Jan 05 2024