Ultimate NFT Programming Tutorial - FULL COURSE

welcome back to the morales channel everyone in this video i'm going to show you everything you need to know in order to uh build create an nft how to list it on openc how to use morale to interact with your nft how to deploy nft metadata everything you need to know in order to launch your nft and as i said we're going to start by actually creating it using solidity so we're going to build the smart contract but it's going to be quite easy because we're going to use open separate libraries to do that it's going to be an erc 1155 token and then i'm going to show how to deploy that to a real live network together with all of the metadata like image like text description attributes things like that how to deploy that metadata and how to do it in a way that is compliant with the erc 1155 standard so that when we then in this tutorial go and list it on openc a big nft marketplace they are going to automatically pull in all of the metadata from our smart contract from our entities and it's going to display on openc with image with description with title all of that stuff but the video is not over there we're going to continue we're going to use morales to build an nft manager a place where we as nft owners can manage our nft so here we've built this using just a few lines of code with morales and some simple javascript where we can see all of the nfts that we have minted in our smart contract you can see an amazing photography of my home city of stockholm you can see an artwork that i drew myself and you can see the title of the description how many are in circulation uh how many owners there are how many i own personally in this address currently and then we're also going to build this mint and transfer functionality so i as a contract owner will be able to go into mint i can mint a specific token id i can make a specific amount we would do a specific address then we can also do the transfer function so we can select the token id we want to transfer the amount we want to transfer and to the which address we want to transfer it to all of this will be done using morales and it will be very simple few lines of code and then the rest of the javascript to pull together website like this i'm going to show you but it's going to be an exciting journey where you're going to learn a lot about nfcs a lot about nft metadata how to host that a lot about the erc 1155 token standard and of course a lot about morales i hope you're excited now's the time to get started if you're excited about this make sure to not only like the video but also to join the morales discord and become a moralist mage uh become a part of the community because there when you become moralist made you join our discord you will also be able to get a lot of help from the community a lot of inspiration maybe you can find some friends some developers that you can build stuff together with so make sure to join this amazing developer community you can find the links down in the description with that being said let's get started we're going to start with an overview because what we need to do first of all is to create the smart contract the smart contract and the smart contract is going to keep track of really only one thing and that is the owners of the nft because what the smart contract does is that it maps a unique id of your nft to one or more owners if you decide to let's say create two unique nfts you give them id 0 and you give them one smart contract is going to keep track of who is the owner of nft number zero who is the owner of nft number one and that is going to be available across the entire blockchain for anyone that is looking into that so that that person holds that nft can prove that to other people they can hold it in their wallet that is what the smart contract is for the smart contract will also provide the necessary transfer functions so that you allow people to transfer the nft and usually this is in regards to a purchase if someone wants to sell their nft they also need to be able to transfer it so trans the transfer function in a smart in an nft smart contract will transfer nft from one address to another and the only one that can initiate a transfer is of course the previous owner but this smart contract the actual token contract which this is does not handle the actual buying and selling that is done by a marketplace and the marketplace is usually another smart contract but it also has a user interface like a website where you can trade nfts right and this is play this is places like open c for example or wearable there are other places as well these are the ones that i'm mostly familiar with and in this guide we're going to list our token on openc and i'm not related to openc in any way morales is not either it's just the one that i'm mostly familiar with and i know how to list tokens there so we're going to use openc but we have no relationship with them whatsoever and that is the nft marketplace and that's very different from the smart contract so that's important to know but the marketplace interacts with the smart contract and of course the opposite is true as well the smart contract will interact with the marketplace so that for example when someone wins an auction in the marketplace that will initiate a transfer in the smart contract so that the nft switches owner another thing that we need to cover is and you know you're probably asking yourself where does the actual interesting parts lie because with nft you usually have an image right you have a name of only of the nft maybe you have a description and maybe you have other attributes and the question is where are these things saved because i can tell you straight away that they are not saved in the smart contract so apart from these two services there are one more thing that we need to figure out and that's where to host our metadata because this is called metadata what we just discussed image description name attributes that is called nft metadata and we need to figure out where to host our nft metadata let me write that here nft metadata and this data will be pulled in by the marketplace automatically because it follows a specific standard specific schema that so that when the marketplace varies id nft id 0 for example it will be able to look up the nft metadata for that specific nft and that is done because the smart contract will save a uri it's like a url like a web page so for token number zero there will be a web address saved in the smart contract that the marketplace can look up and see okay here's the image here's the description here's the name and here's the attribute but it's not hosted on the blockchain because for example an image or maybe you want the video that takes up way too much space to be in the blockchain so the blockchain only keep track of keeps track of the ownership while you use some sort of external service we're going to use morales to host the metadata like image description name attribute and then there is a link embedded into the smart contracts for each token so you can query easily the metadata for token id 0 for token id 1 and then you can display a nice image here whatever that is so we're going to start by building the smart contract and then we're going to move on to doing the metadata and hosting that somewhere and finally we're going to list it on the openc marketplace where we can get bids for it okay and that's it so with that said let's get started with the actual smart contract and to build a smart contract we're going to use remix because the smart contract even though it sounds difficult to create an nft smart contract it's actually not that difficult on the smart contract level because we get so many great we have so many great libraries these days and we're going to utilize that when we build our nft so we're going to use remix.ethereum.org to build this nft contract and what you want to to do first of all is to create a new file here in remix and that is done here we're going to create a new file here that's called let's call it openc nft underscore nft.sol and the name here doesn't matter it's just for organization purposes here in remix and then we're going to start i assume that you do know some solidity before this so we're going to start by primary solidity 0.8.0 so this is the compiler version i want to use and now we need to import the erc 1155 token contract from open separate and opensupply is this fantastic library of token contracts and other contracts just useful contracts overall that you need a lot when you're building you know it's common functionality for smart contracts open separate provides those kinds of contracts and they're well tested well used so they're considered safe nothing is 100 safe of course but they're considered very safe and let me show you here first of all where we find these token contracts so here i've googled for erc 1155 open zeppelin and erc 1155 is the token standard that we're going to use for our nft there are basically two nft standards nowadays erc 721 or erc 1155 and 1155 is a newer standard it is a bit more flexible you can do both fungible and non-fungible tokens in the same contract you can do things like batch transfers so it is it has more functionality and is a little bit more effective it can also be a bit harder to work with it's a bit more complex but i think for this tutorial we're going to go with the new the newest token standard for nfts so here you can see the open sampling github page for the erc 1155 contract and this will give us all the functionality that we need it will give us the necessary mapping to keep track of the balances it will give us all of the functions we need in order to check balances for example here we have balance off um it will let us do transfers we have transfer from and it will give us a functionality to mint new entities we can mint batches of nfts we can burn nfts so there's a lot of functionality here and we're not going to implement all of them but we're going to implement the most important ones so how do we then take this contract and uh and create our own nft from it well first of all we need to import this contract into our smart contract so we write import and then we can just take this github link remix is that smart we can just take that link here and import that and then we can define our own contract so we're going to call this nft contract and we're going to inherit from this erc 1155 contract that's how we will get the functionality from this contract is by inheriting it and if you haven't if you don't know about inheritance in solidity or you need to refresh your memory when it comes to solidity programming check out some of the solidity videos on this channel we have fantastic tutorials and other videos on this channel about solidity programming so make sure to check that out and now all we need to do is start implementing our own nft based on this parent contract erc 1155 and we can start by defining first a list of the items that we want to have and we're going to define those as constant integers so we're going to create unsigned integers and let's see public and they're going to be constant and then we need to name this something so what what is our first item gonna be um let's just call this artwork okay i'll name this piece artwork and i will give it id 0. my nft that i'll call artwork i call i give id 0 and then let's create another one just for just so that you know how it works [Music] and what should i call this i can name this photo so i have one artwork and i have one photo whatever that means uh you can name them whatever you want uh these names are just for internal use anyway so they're not will be displayed on openc or on the marketplace but it can be a good idea to keep them the same because otherwise you might be confused or your developers might be confused and then we're going to define the constructor which is what will mint the initial versions of these two nfts and we need to call the constructor of the erc 1155 contract here as well the constructor of our parent contract and then in sign here is where we will mint these two entities we will call the underscore mint function which is a function in our erc 1155 contract and as we can see here if we search for underscore mint you can see that it takes an account it takes the id that we want to mint you can see here if you read the description creates amount tokens of token type id and assigns them to account so we need to specify account id and amount and then there is a third fourth argument here byte memory data which is just for sort of internal notes or internal purposes so we're not going to use this but the three first arguments we need to pass in and the account will be the initial owner of these nfts so we will mint them to ourselves which will be message.sender that will be the creator of the contract and then the id they want to mint so that will be artwork because that is equal to id 0. and then finally how many we want to mint we want to mint 1 let's say this is the right order id amount yes and then yeah we need to put in empty date that's what an empty string and then we're going to do this one more time because we want mean two nfc we also want to mean the photo nft and this i want to mean two of those so i have one artwork and i have two photos that i want to mint and the last thing that we're missing here is that the erc 1155 constructor if you search for that here takes a constructor argument called string memory uri and this is the uri that we talked about here the uri to this metadata and here we need to provide where our metadata will be hosted and we will wait and input this until we have finished the smart contract and then we'll get to work on the metadata and once we have figured that out we can input the link here and deploy it but we're going to finish writing the smart contracts first and now this is actually enough for a fully functional nft the problem with this specific nft now is that once we have minted these we can't mint any more nfts so what we might want to do is to build a mint function that allows maybe us as owners to mean more nfts in the future so we're going to do that and as you remember the oops and as you might remember the 1155 base contrary that we have here it has a function called underscore mint but this is an internal function so it's not available to be called from the outside so this is something that we can wrap around so we're going to create function mint gonna be public and this in turn will call the underscore mint function that is available through our parent contract and we need to take the same arguments address account amount and id so we're going to copy that inside here since we don't use the data thing we don't need to input that here and all we're going to do with this data is to pass that along into here account id amount and then we also need to pass in the empty data okay now this would work this would mean new nfts with whatever id we input whatever amount and two the account that we specify the problem is that this can now be called by anyone that wants to call it it's publicly available we don't have any restrictions on it so now it can be called by anyone not just the owner because there are no such restrictions here in this function that we're calling in this function all it will do is that it will make a few checks and then it will increase the balance of the account i'm into the nft and it will admit an event that the transfer has been complete um so we need to add require statements here that make sure that this function can only be called by the owner and to do that we're going to use the open zeppelin ownable contract so if i open this up here no contracts contracts access ownable that's all i want to implement this as well so i want to import that into my contract here as well import this and you can google just for open separately ownable to find it also and then we're going to say that this also is ownable because that will allow us to say that this should only be let's see what do they call that only owner right we can set only owner here meaning that the mint function will only be accessible by the address that deployed the contract initially that is what this ownable contract will do it will save an address of the owner and then it will implement this modifier only owner that we can put on our functions once again if you don't know what modifiers are you should take some more solidity courses maybe or tutorials but it's basically it's a snippet of code that gets run before our function gets run and in this case the only owner modifier will run and make sure that the caller is actually equal to the owner so that means that this function can only be executed by the creator of the contract now i have a working mint function if there's any other functionality that we want to implement we need to do that now so maybe you know the transfer functions they are already public but maybe we want to be able to do burn for example which in in that case we need to implement the public burn function let's do that here as well function burn let's see what parameters that takes account an id and amount and that here and that's going to be public and maybe in this case the burn function would only be able to be called by the token owner so you can only burn your own tokens i guess that would be reasonable right the contract owner should not be able to just burn anyone else's tokens but if you own the token yourself then you should be able to burn it i assume and in this case this functionality is already implemented in the internal function underscore burn that we're going to call because if we look this up here you can see that before it actually does the the transfer here or actually it it reduces the balance because this is just a burn function so it removes the token balance of that token you can see that it checks so that the it checks the balances for this token id for this specific account and it makes sure that the account balance is actually larger or equal to the amount that they want to burn all we need to make sure of is that the account that is that you're requesting to burn is actually the message that's under otherwise you can you know say that you want to burn someone else's tokens but make sure that message that sender is equal to account okay that is passed in here if that is true then we can move on and call underscore burn for account id and amount okay so now let us try this out by deploying this on just a virtual machine here let's go ahead and go to this third i'm here select javascript vm and then click deploy make sure you've selected the nft contract here click deploy you'll get this instance of your contract here with all of the different functions that we can call first of all we can check for example the balance off so our address which is this one right here should have gotten all the balances currently so we can check our address and then comma see can you see this i can try and make it bigger but it's going to be so big maybe i can do this okay here we go balance off i can input the address and then token id 0 for example all and it says that balance is 1. if i take id 1 the balance is now 2. what if i want to do a mint i want to mint my address i want to mint token number one the photo and i want to mean 10 of those okay let's check that out so let's hit transact and there it goes and now let's check the balance again all of a sudden i have 12. i can also meet the new token so i can mint token number two which we don't have defined here i can mean 20 of those transact and check the balance of token number 2 it will now be 20. but if i'm not the owner so if i switch my address to another address and i try to mint this again i cannot mint because it throws a reverse which means that i'm not actually the owner so that works as intended with that done let's see let's leave it like that with that done we can move on to actually talking about the metadata because now our contract is ready to deploy apart from the fact that we need this metadata uri scheme okay and let me talk quickly about how that scheme works so let's talk about what the metadata should look like so for each nft we can provide a json string like this so this is from openc but this is a general standard we can have a description we can have an external url that maybe points to our project or wherever we want to link to for that nft we can have an image which is very common we can have a name and then we can have an array of attributes um and these are just the the most common ones and you can have other things as well you can have background color um animation url if you want to have an animation um you can even have a youtube url um so the problem is that we need somewhere to host this little json string um because we cannot put it in the smartphone that needs to be an external link to a json file of some sort and what we're going to do then is we're going to put the link to that json file in our smart contract but we need to have one json file for each nft id okay and the way we're going to do this is that we're going to create json files like this for our two nfts and then we're going to host them on morales using morale static hosting and in order to do this we simply need to open up a new folder somewhere in our editor and start creating these json files so here we are i've i have an empty directory here and i'm going to create a new file and first we actually need an index.html file because morales won't allow you to host anything if it doesn't have an index.html file we're not going to use this so we can just put something here hello within this html tags let me make this bigger yeah that's okay save that and then now we can create our json file so we're going to create a json file and we're going to start by calling 0.json because 0 is our token id and here we can put our our actual properties that we saw in the on the previous website the openc website we can have image needs to be image like that and here we will have a link to an image then we should have description again within quotes like this and then what was the other name we should have so we could call this uh i think we're just gonna have name image and description so what are we going to call this nft you have to keep in mind i'm a developer i'm not a creative person for like artworks and stuff so i'm going to call this philips artwork okay and i'm going to give the description here the artwork of a solidity developer and the question is the image what should we have as the image because not only do we need to host the image somewhere i actually need to have an image so let us actually draw something okay we're going to save this for now and then we're going to go back to my drawing pad here i hope i can export this so let me draw something nice here and when i say nice i don't mean nice at all but just something that we can use so i'm gonna draw a nice face here like this a smiley face and then what more can i do that's sort of the limit of my creative capacity so let's leave it at that and how do i export this let's see i hope that you can do something that's more download here we go it's a bit more creative so let me [Music] i'm gonna call this artwork okay it'll be artwork.png and then i need to have a photo as well so let me find the photo i found a photo here of uh the beautiful city where i live stockholm and uh i'm gonna use this one and luckily the photographer is my brother so i hope he doesn't gonna get mad at me because i stole his photo for this tutorial but let's see we'll figure that out sooner or later but um let's [Music] go back to our code and now we have both let me rename this to photo.png and then we have artwork photo.jpg artwork.png let's see which one will be worth more on openc and so now we have those and that means that we can also get the image url to this artwork okay and what i'm gonna do is that now we need to get the url for this directory so i need to host this directory so i can get the link to the artwork and the link to the photo and then put this here so what we're going to use we're going to use the morales cli so you need to open up your terminal you can go to view terminal and then we're going to run npm install g morales admin cli i've already installed this i'm not going to run this but you should run that and you also need a morales account by the way because when you're going to host this you're going to run morales dash admin.cli deploy dli deploy and then we'll ask you for your morales api key and eventually the api secret so you need an account at morales which is free of course so let's go to admin.morales.org you can sign up but if you already have an account you need to have a server and you can create that on whatever network you want when you have a server click on view details and then you need to get your cli api key paste that here and then your cli api secret paste that here and now we'll say following servers were found and my name was just called aaa i'm going to choose that one and now you can see that a site is available at this url so i'm going to copy that and visit that here in the browser now you can see we got our index.html file but this also means that we can also get to our artwork.png because we can just put slash artwork of png and here's that so that means that we can use this now as the image url or nft number zero and now i'm going to clone this and do the same for the image it's going to be called one.json because the photo was id number one and this is [Music] beautiful let's see here man photo beautiful photo of consoleman.com sweden and this url is going to be here photo dot jpg and i'm also gonna do something here let's see where is the metadata here's the metadata i'm also gonna add external url here because i need to give some attribution to the photographer in question here antonmartinson.com if you want to check out his photos they're pretty cool i would say i'm not biased but you know um i have the url for the jpg yes okay that's that is everything we need so now if i deploy this again so do the same thing um again let's see yes i can do that again i need to enter the keys again i guess there is some sort of command to make this easier we're not going to do that many times what are we going to connect to zero okay so now i can take this url again and i can go slash zero or let's see slash zero dot json right yes all right we have slash zero.json and then we have slash and there you see you have the artwork.png and then we can also do one dot json and then we get the other one other.jpg and both of these links did work then we can get the photo it isn't high res because i just copied it off the website i didn't ask for the original but there we go that works for this okay not gonna sell for a lot but anyway the last thing we need to do here is we need to change these names because there is a specific schema to erc 1155 standard we can read that in the actual eip we go to metadata [Music] metadata we can see here that the specification for the eip standard is that the string format of the substituted hexadecimal id must be lower case alphanumeric with no 0x prefix the string of substituted hexadecimal id must be leading 0 padded to 64 hex characters length if necessary that means if you have token id what did they have as an example here um three one four five nine two that needs to be converted hexadecimal and then pad that as it's called up to 64 digits and if our number is just zero our nft id is just zero that means that this needs to be just 64 zeros so here i have eight and i need to have eight of these two three four five six seven eight so this would be 64 zeros i need to put these after each other and then name the file that because everyone who queries an erc 1155 token they are querying using this specific schema so i and this specific standard so i need to rename this to that and this that's id number one i need to rename to all of those zeros but then a one at the end so you see this is id 0 this is id1 it is a 64 digit padded hexadecimal number but this is just 1 and 2. those are same in decimal as an extra decimal so that is now everything we need to do we just need to save that and once again publish that to the morales server so i'm going to copy this again and now this is hosted on our website now we can deploy our smart contract let's go back to our smart contract and i'm going to fill in this url right here so we're going to copy the url that we got from morales where our staff is hosted we're going to put that in the constructor of the erc1155 contract and then at the end but this is just the base url right then we in order to get to the actual nft json files we do slash followed by the token id which we show as come on there we go as these curly brackets followed by id inside of it you can see this there we go dot json okay so this is how we provide the url to an erc 1155 contract then what openc will do and as it says in the eip specification we can read it the uri value allows for id substitution by clients if the string id exists in any uri clients must replace this with the actual token id in hexadecimal form this allows for a large number of tokens to use the same on-chain string by defining a uri once with that large number of tokens but this is to save space in the blockchain in reality because now we just need to provide the uri at one place in the contract and then the client can replace the id with the correct id so if they're looking for id 0 they put in 0 padded by 64 decimals 264 decimals and then they enter that url and find the method data so now we're ready to deploy this contrast and of course we want to deploy it on the testnet on a live network not just on the virtual machine if we deploy it on the rinkib test network on ethereum we can actually view it on the test site of openc so let's do that and to do that we need to first of all get some rinkybee testnet eth into our account so you need to have metamask of course and then you need to open that up and you need to select that inqb test network from here and then copy your account id and then try to find a gb faucet and that's not very easy actually to do if you google for rinkybee faucet the one that actually works is this one and what you need to do here is that you need to post a uh post on social net social network like twitter uh you can see here the request funds via twitter make a tweet with ethereum address paste into the content copy paste the tweets url into the above input text box and fire away you need to tweet something like this requesting faucet funds into and then paste your address here and tweet that and then you take the link to that tweet paste it here and click give me ether then you can delete the tweet after that but they need to do that in order to um to guard themselves from bots just taking all the ether um so unfortunately that's what you need to do in order to get test net groups then either but i already have some so i'm not going to do that in this video here but once you have that you're going to go back to remix click injected web 3 here in the deploy tab and the environment this will ask you to connect your metamask account click next connect and make sure once again that you have rink be selected it says number four network now we can deploy this let's go ahead and make sure you have the contract selected here click deploy then you'll have to confirm the transaction and it will take a few seconds for this to actually deploy there we go and now this is um actually deployed on the rigby test network and we can take the transaction hash and we can go to roopsteen.etherscan.org and paste this transaction hash into here and it's here no thinking b dots either scan or drops in paste this transaction as in here search and here we find our contract this is our nft contract okay and now we copy this contract address and now we're going to check this out on openc okay uh we want to go to let's see here open c dot io get listed let me turn off my dark mode thing here so that you can see it better it's openc that i o slash get listed and here you can see get list and open c what face is your project in we are live on a test net okay and then you get to this and enter your config address you need to make sure you select incuby paste your erc721 or erc 1155 contract address so that's what we're going to do then we're going to submit and here we have our two nfts on openc so we see phillips artwork is here and once i have more from this collection we have our photo and here you can see the description is the order of a solid developer we have the console and photo and here we can see that we have a beautiful picture we have details let's hear beautiful of course in stockholm sweden and the image let's see if where is our seems like it didn't pick up our our website url but uh let's see if it can pick it up sometimes i've noticed that they're a bit slow on picking up nft metadata so you might have to click on this refresh metadata button for it to work and then you wait a few minutes and then you refresh the page because sometimes for me the image doesn't show up until i do that but let's see if i actually did i actually put in this correctly external url i think that was the was the correct format but okay nevermind um so now when you have this the only thing that is left to launch these nfts is uh just to instead of deploying it to the testnet you deploy it you select the mainnet from your metamock account okay and you deploy it you injected web 3 but to the main network and then when you list on openc you just click live on the mainnet instead and you list it through here it's the same process but it's on the minute and then you can put this up for for a listing since you are indeed the owner in order to be identified as the owner of this nft you can go to your account here and click sign in and you will sign in using the same metamod account as you used to deploy and then you can see i have some other test nfts here if you go to these nfts you can actually click sell here and now it is of course sold as a testnet nfc but it works exactly the same on mainnet so that's the difference right and you put how many you want to sell and you can also bundle it with other items price per item okay total price you can schedule it and some other options here and then you can post your listing i'm not going to do that because it's only on testnet but i wish you the best of luck with selling your nfts on the actual mainnet feel free to leave comments when you've posted your nfts i would love to see them down below so post links to your nfts they actually have deployed down in the comment section i would love to see those and then when we had this i thought we would also go ahead and create an nft dashboard that we as an owner can use in order to see who the owner of our nfts are may be used to mint new nfts from you know user interface to burn nfts to see some stats about our nfts just to manage i mean if this is our business we want an interface to be able to manage this and see sort of the progress of our of our nfts so that's what we're going to do and we're going to use morales in order to do that a lot quicker a lot easier than what it would have been otherwise but in order to do this we need to start a new you know web app project right we're gonna use simple html javascript uh and some css libraries in order to to make this quick but in order to do this we need to open up our editor of course i'm going to use visual studio code and yeah just create a new folder by this folder here called nft dashboard and here is where we're going to start at get to work and we can start by getting the boilerplate code that we're going to use for morales so it just contains the most important um initiate init scripts and web3 libraries bootstrap libraries and i've left a link to that below it's this sign in boilerplate that i'm going to use and you can clone this or you can just copy the contents of of the file we're actually only going to use the index.html file so i'm going to copy that into an index.html file here and this contains web3.js it contains jquery it contains morales.js and bootstrap js library bootstrap css library and this we can remove style.css we don't have it and then it contains a basic body with some bootstrap structure so it has the jumbotron and the container and then h1 as welcome and then a button that lets you sign in with metamask and then it links to a script called main.js which we can create here as well but i'm not going to use the one from from the boilerplate i should actually update that so it's slightly better the first thing that we're going to do in our main.js file is to initiate morale so more alice morales dot initial and here we're going to put our app id we're going to get in a second and then we're going to do morales dot server url and here we're going to input our server url we're was going to get in a minute and then finally what we need to do is that we need to attach this sign-in button well first i can show you what this looks like so you need to open up this index.html file but you cannot do it just like opening up the html file in your browser you need to host it on a local web server and in visual studio code you can install the installer plugin on the live server this one right here and that allows you to right click on this one and where is it there open with live server and that will fire up a small web server and you will open up the file through there so here i open it through localhost and that's what you want to have you don't want to have just the file path up here you want to have an ip address or localhost because otherwise metamods won't work so let me remove my dark theme here this is what it looks like pretty basic for now but it will do the job and when we click this we want metamouse to open up we want to sign in and then we want to fetch the nfts for the specific contract that we created and then we're going to build like min functionality burn functionality and just some stats for morales so first what we need to do is to fix this login button and to do that we need to check if the user currently is signed in so let me first create a function here an async function called initialize app and here we're gonna first fetch the current user in order to check if the user is logged in or not we get that from morales.user.com and then we check if this exists or not because if current user doesn't exist that means we need to sign in but if it does exist we can continue okay and so how do we sign in our user well we use morales.web3 dot authenticate and this is how we authenticate using metamods you can also authenticate using username and password if you want but this is for um or using metamods which we want and then we can set current user to this and this is actually returns a promise so we need to set a weight here and set current user equal to this because we're going to use that object later on now we actually need to get our credentials from morale so we're going to go to morales admin we're going to create the server and then we're going to get our credentials here because then we can start testing this out in our browser that's how quick this is so we're going to uh go to admin.morales.com to the admin panel and you need to have an account as i said before and we're going to go to servers and then create a new server and you want to select test and server i'm going to name this nft dashboard 2.0 i already have one here but that's for me when i was testing so i'm going to do it from scratch with you guys i don't also don't know why i'm wearing that oh i should take those off um testnet and we need selected inky because that's where we deployed our token so click add instance and now it will create our instance it can take a few minutes and for that to create but when that is done we can get our app id and our server url so app id goes here and server url goes here so now it's created it took about a minute or so and i want to click on view details in order to get the configuration or the details so we want the application id copy that put that in there then we want the server url which is this copy that into here and now that we have that we can actually go ahead and test this function what we need to do first is i'm gonna alert here that the user is signed in and we also have to let's see here this should be run whenever we press the sign-in button i guess well for this we actually don't need the sign-in button we'll run this when you visit the site so let's remove the sign-in button actually and we'll just run this whenever we visit that page because if we're signed in then we don't have to do anything it will automatically initialize this okay and otherwise it will prompt the mask in let's try this out in our browser and we'll refresh this and now maybe i'm already signed in i don't know or no the rear is not the function what did we do wrong oh yeah it's not a function it's moralist.url is equal to my bad try this again current user is not a function current all these typos let's see now now when i refresh you see i get this signature request sign in sign and then i get user signed in and that means whenever i do this now it will create a user in my user database so if i go here on mirada's admin click on dashboard it will open up the server dashboard for this specific server and you can see that in the user table that make this bigger in the user table i have one row with the address that i used to sign in with you can see accounts here is an array with this address and it will also give me directly this will update you know in just seconds uh eat nft owners you can see here that this address that i signed in with it owns nft so it automatically pulls us into the database and you can see that it is eoc 1155 also have one seven two one because as you saw on openc this address held multiple nfcs but we're going to only work with the nfts that we deployed which is actually disciples because i recognize it 8260 or c82 so it is this nfc and this nft i own two of them it also pulls in things like nft transfers each nft transfers and here you can see the different transfers that have been made with this address and the nfts that i hold you can see that we've done some mint function calls which we'll call the transfer function for these different ids it will also pull in things like east token balance and here you can see that this account holds link tokens and all of this is queryable from the front end but we're going to work primarily with the nft holdings of this address but there are other ways of working with nfts with morales and that is by using the web3 api which we're going to do quite a lot of so we're going to use for example some of these nft functions here retrieve the unique nfts inside the given contract because we're looking to as an admin pull in all of the nfts that is within our contract and this can be done from within both the rest api that we show here but also from the morales javascript sdk that we have in our frontend i'm going to show you how we do that and that's really the first step here now that we are signed in is to start pulling in the different nfts that we want to manage here in our app and all the different sdk functions that are available can be found in our documentation desktop wireless auto and click on web3 api under server and here you can check out um token the token api and here we'll look for the function that we want which is uh [Music] i think it's get all token ids for a specific address of the top contract yes so this will give us the nfts of a specific nft contract so this is what we're going to use in our code but when the app has initialized we don't have to alert anymore but what we're going to do is we're going to call a function to get all nfts so we're going to create a function that is like or we can call morales directly actually more moralist.web api so here is how you access the web3 api dot token go dot get all token ids and that's what we saw right here yep and it takes some options which is the address and the chain and the address is the token contract address and the chain for us is the nkb okay we're going to pass these options in here and then finally we need to figure out the address of our deployed contract and that we can find for example at openc and because in the url you can see that it says asset slash and there is an address you can also find it in your wallet history of course when you deploy the contract um but here is one place where you can find it we need to have that in here a token address um and then we can console.log our lfts and then we can see how we're gonna draw them up in our interface okay so save that and i'm going back to the app and already you can see that it has run this new code and we do have some new data here this was the result that we consoled from the nft call results we have token id 0 token 81 or rather these are just array numbers here you have token 81 you have your token id 0 you can see that okay there are six of these token id once there are four of these token id zeros you can see the token address you can see that the token uri which has automatically according to the specification filled in with the right id so this is zero.json and this one is one.json maybe when you're watching this video you already would have gotten the metadata included here we're working on including the metadata automatically so you don't have to fetch the token uri yourself but currently we're working on this so it doesn't work yet but soon you will have just have to call this function you will have all the metadata for the different token ids but for now we have to fetch the token id from the token uri but keep an eye on the documentation maybe this already exists and keep an eye on the object in here because maybe the metadata is already included when you call this or there might be another function in the api to get the metadata but for now we have to get that ourselves but and that maybe is the next step before we draw them here because we want to draw them with the images so we want to fetch the image url from the json file that is the token uri so let's do that and this will be a little bit tricky because we have to loop through each of the nfts in this response all the metadata and populate the object with the metadata so that we have the object.metadata concluding including all of the images and title and description and so on so we're going to create a new function and we're going to call this fetch nfc metadata and it will take the nfts as an argument and and it's not going to be an async this function is not going to be async um at least i think so so we know we have to loop through all of the nft so we need to fetch for each nft so we're going to create a for loop and i'm going to call this i i and then i'm going to change the this to nfts.length is i so now we have our energy element here and we're gonna call this mft oh that is one specific instance of the nft so that would be nfd0 or entity one and then let's also define well let's not make this const because we're going to modify that also let's create the ft id which is nft.token underscore id because we need to use that and then finally we need to make a call here and fetch the actual metadata and here uh depending on where you hosted your metadata i've hosted mine on morales and unfortunately we can't make a direct fetch call to there due to the course rules so we have to create a function in our cloud function so we have to create the cloud function in morales that fetches this metadata for us from the backend and then passes that onto us here so here we're actually going to call let me demonstrate that here here we're going to call uh all moralist cloud function which in turn will call um our static json file it will return that static json file to the cloud function which will return it to us okay here we're going to fetch a cloud function url and it will be something slash function name and then we'll attach the token id here okay it'll look something like that but first we need to create this morales cloud function that returns our json file for us and to do that we go to the morales dashboard the server dashboard here and we go to cloud functions and here is where we can build our cloud function and all of this is available in our docs but the way define a cloud function is not by saying morales.cloud.define and then the name of the out function and we'll call it get nft yeah and this will be an asic function it takes as an input argument a request object and then we define the function here like so and here is where we write our function code first we're going to start by getting the nft id so the nft id will be in request dot params dot nft id so we will have to pass this in through the request object as nft id and now you remember that we're gonna call here we're gonna make a call to a morales.cloud.http request and here we need to specify the url we want to call and the url looks something like this you'll have to you'll have your own unique url but as you know this is the metadata url and then we have a bunch of zeros followed by the id and we can't hard code that here because we don't know in the future how many nfts we want so we need to create this we need to take our nft id which is in decimal and create that into a padded hex string that is 64 numbers long and then append that to the end of this url here and then have you know json okay that's what we're gonna do we're gonna do this and here we need to include the padded hex number that will give us the right url to call to get the metadata and how do we create this padded hex well let me show you we're going to start by creating the converting our nft id into a hex id we call it text id and we do that by first parsing the parsing as an integer because it is a string when it comes in here so nft id needs to be an integer and then we're going to call tostring base 16 so that will create a hex string for us because hex is of course base 16 that's why it's called hexadecimal then we can create added hex because this needs to be padded to 64 digits and to do that we first will write 64 zeros here as a string there is eight zeros and i need to do that eight times so one two three four five six seven eight uh let me make this a bit bigger for you by the way and now we're gonna append to this string the hex id and now what we want to do because now this will be longer than 64 digits we want to cut off the remaining digits here as many as we need in order to make the remaining here 64 digits long and that can be done by the slice command minus 64. that will create the take the 64 most right digits and give us those back and that will give us the paddle hex as we want it and after that we can call this cloud function right here with the padded hex like so and then when we get the response back okay that's a function here http response and here we're going to return http response dot text that will give us the value back as a text we can also specify here if you want an error handling function but we're not going to do any air handling now let's hope this works if it doesn't work we can add that and something that can be good to know is that you can define a logarithm if you won't need to console log things if it doesn't work you can do a logger morales.cloud.getlogger and this you can then use like this logger.info for example pathetics if you want to see it in your console we can check this out because when i save this uh let's just see so we don't get any errors here you will get you will see an area if there's any compilation errors here but then if there is a runtime error you'll get it later the log of this will be seen here in the dashboard or the server dashboard and then on logs here you will see your cloud function being called so now how do we call a cloud function from our application well we have that in our docs actually so if we go to cloud code and then cloud functions and then calling via rest api it's on here on the right we call it by using our full morale server url we add slash functions then the cloud function name then our application id as a query parameter and then optional our cloud function query parameters which is the nft id in this case so i'm going to copy this or no i'm not going to copy that but we're going to go to our hnfd metadata here and here i'm going to fetch our server url functions as it said then slash our cloud function name which was something that i forgot get nft and then query parameter so question mark what was it going to be called applique underscore application id is equal to our application id which we have here and then another query param so the ampersand and then we call this nfdid i think that's going to be equal to our oh let's not do that equal to plus our nft id i think that's it or we just call it id and let's just double check so that we actually called it nft id like this and the same capitalization and everything in our cloud function we called it nftid is that what we're going to pass in and then let's see the result that we get from this dot then let's just say result and let's console.log it okay let's try that and when are we going to call this fetch metadata let's call it here patch nft metadata with nfts as the argument and then we console.log here yeah let's see if we get the metadata back let's refresh and it didn't console.log anything let's try to figure out what happened here first of all did we get an error in our logs let's refresh it doesn't didn't doesn't even seem like it ran so let's see here sources let's see if this actually ran it did run here did we run this as well we never run the fetch call what's going on do we get an error nope hmm that is odd ah maybe i must have made some uh weird error when passing this in nft is empty ah of course we're gonna pass in nfts.result my bad let's try this now there we go look at that we got two responses back it contains a body yeah we need to parse this we're going to console.log res dot json as a function i will parse the body as json oh yeah that is a promise of course we need to do this um and then then press console.log so maybe we need to get there let's see my console or press let's see now it's empty then we can try to check the logs so this gets passed incorrectly you see that it consol logs the id which looks correct but it says result undefined here it was correct now that was ghetto talking ideas uh let's see here maybe we have to return this yeah we have to return this promise save that and let's wait for it to reboot quickly and now we can try again all right so now if we refresh this again we get this and what we have here is basically a an actual object with a result um property that then has a string and so this string we want to parse this into json okay we want to parse res.data into json so the json.parse oops rest.data and let's try to console.log this instead let's see ah it was results not data rest.results there we go but now you see we have the metadata the real metadata for the two token ids um now what we need to do is that we need to take this result and put it back in nft object so that we can use it later on down here so that's what i'm gonna do after i've done this parse here i'm gonna take this result and i'm gonna set nft.metadata equal to this data and then that's all we need to do actually we for now we can remove this console.log and instead we're going to try to return this somehow and i mean we can't put return here because this would then be run inside every for loop instead we need to collect this into one promise and when that's resolved we can um we can return an array of those results so we're going to do an array of promises i'm going to create that up here create an empty array and then or each one of these for loops let's see here is it enough to push this promise let's see can i do this promises.push patch and then when these for loops are over we're gonna do promise dot all promises i'm going to return that so this what this does is that it waits for all of the promises in the array to complete and then it sends back all of the results [Music] ah press there we go put the wrong label there so return that and then we'll get it back here so let um but let's see let's see let's see we're not actually interested in getting the promises are we we're interested in actually getting the nfts what if we do here.then and we return the oh don't need actually we return the nft which we just set the metadata off here and then we do that yes um or let let's call it nft with metadata and it's going to be equal to await that and then we're going to console.log nft with make the metadata and hopefully that's going to include the entire end of the object and all of the metadata let's it probably there's a push but then it's not a function all right so some things up here there we go the parenthesis was in the wrong place we need to include this as well inside of the fetch call there we go do nfts metadata boom there is see now we have the full object here and now we can start to actually draw these out on the screen because now we have all of the data we need all right so this nft with metadata we can use this and actually start putting something on the screen so let's create another function for this this will be function draw inventory or render inventory okay it's gonna render all of the nfts we can pass in nfts in here and here also we're gonna have a for loop right because we need to loop through every nft and i want them to look like cards like you would see on some nft marketplace or whatever nft all right so now we're in the same position when we're up here what we're going to do up here in here is that we're going to create these cards let me show you what i mean bootstrap cards so we're going to use these they're going to look like this and they will be nicely positioned in the grid and we can have an image up here a title which we have a name of the nft and then a description and then we can have some action buttons down here and you create them like this a card card image top card body and since we already have bootstrap imported we can pretty easily accomplish this design without having to do any design work ourselves we just need to create the right layout so what we're going to do for each one of these we're going to create an in html string and here we need to use these special quotation marks that are like sideways i don't know what you call them and because this will build you a multi-line string then we're going to copy this card thing in here and we're going to replace the content with the content from our nft so for example the the title will be you use this dollar sign and then curly brackets to insert data nft dot was it name do we call it a metadata.name and then description we have here it will be metadata description i think yes and then button we can do later card image so that what we need to fill in here is the source of the image that's gonna be metadata.image [Music] image that will give us a url to the image and that's it let me do this that's it all we need to do now is to add this to our index.html file and here we only have a container what we need in here is a row and then some columns and then we're going to start adding these cards so let's create a row here div class raw that's a special bootstrap class and we're going to name this app this row and then we need to add this card the column element so we're going to create a column element uh document.createelement it's going to be a div and we're going to set that column.class name gonna be equal to column and column dash md-3 that's a medium column of width three that means it will fit four columns on each row each row in bootstrap is divided into 12 columns this column will take up three units and then finally column.interhtml will be equal to our html string all right now all that's left is to add this column to our actual parent element which is the row we're going to define that up here the parent is equal to document dot get element by id and we named it app and then down here we can go parent dot append child which will add our column element which now contains this html inside it we'll add that to the row element right here it will do that for each nft since we're looping this through here let's see if we got it working on the first try no well we need to call this function render inventory we're going to call that here with the nfc with metadata as the input save there we go let me zoom out here oops something is wrong with the layout here hard we just have let's see we have column column this column is inside the other column what's going on here super weird what did i screw up i mean even though we screwed up screwed it up it looks pretty cool anyway it's fascinating how quick you can get this to work ah maybe this with things going up yeah let's remove that weird thing i don't like that i don't know why they included that let's stick with the normal style there we go now the width is corresponding to the column size instead so maybe we could make it a bit bigger so we'll make it column size four there we go looks better now the aspect ratio of these images are not the same so unfortunately the cards will not be equal height here but if you chose better images that are more similar you would probably have equal aspect ratios of your images but now we got the image we got the title the description for both of them and now if we mint more nfts we would automatically loop through them get all the metadata print them out here so this is a great great start to the nft dashboard now what's left if we want to bring in some more stats here is to get some more information about the ownership how many people own these nfcs how many are are there like the current supply and maybe even what the owner addresses are and we can add that under here we just need to implement another api call to morales and get the owners and get all of that so we're going to do that and then after that we're going to build a mint page where we can go in and we can mint new nfts we can enter the address enter the amounts where we want to mint which token id and so on and we're connected to the button here but first let's add information about the owners and i'm going to share with you the endpoint or the function that we're going to use so let me go to the docs page and we're going to check out the web3 api the let's see is it token yes and we're going to use here the get token id owners get token id metadata get token id owners this one this is going to give us information about the owners how many people owns it and and the number of tokens in circulation zone we're going to use this one to get that information and we're going to do it before we return this nft here we're going to do it in here we're going to take the result once again and we're going to make an api call here and return morales dot web3 api dot token dot get open id owners and we can get the options here as in options we need the address once again where did we have that here maybe we should add that here let's maybe create a const contract address equal to that and then we need to specify the token id which is just id from here and then finally chain is into b all right we got that did we yeah we could conjure that there perfect and what this will give us is an array of owners we can console.log this here we will get it here result we can try to also log the resulted because this will give us an array of owners which we then also going to append into the nft object so we get everything in one nice object so get a token id owners and for token id and we do this for it all right let's check this out so now we get some error because it can't read the metadata because it didn't return the correct thing but now we can see how we consolidate here and that's the result here and we can see that this nft which is organized e1 has two sml which is the total supply of tokens and we have one owner here and then the second token is here and here we have token id 0 and this is the owner right here and if we would were to have multiple owners we would get this array would extend with multiple objects for each um for each nft and now um we can mint more in remix if you want to mean more in remix to see that let's let's do that because actually i had to redeploy my nft contract because i managed to delete my morale server where the metadata was hosted so i had to redeploy that so that's why i have fewer owners here now but let's go into remix and actually mint some to some other do some other address i'm going to copy another address i have here copy that then i'm going to mint that address token id one and i'm going to mint two or let's just make one um and from that yes yes yes no this was that's meant a transaction and then this is going to take some time before it gets included there we go and then it also takes some time for this to be confirmed enough to be included in the nft api so it will have to pass a few blocks before it gets included in the api but sooner or later we will get it included here in our result meaning it will be another another owner of token id one so this was zero here in this array there will be another object with the other owner and now if we refresh this page you'll see that we now have the actual new owner info so we did mint id um id one and as you can see here this will be id one so here we have an id one and we have now have two owners previously only had one so this result will be an array with the individual owners we have token address that will be the same owner off this one will be different here this one starts with b5 this one starts with starts with 34. so here is how we see the individual owners and just like with the nft data we want to aggregate this in a nice way into the actual nft object which we then use to render so what i was thinking is that we're going to get the owner info into the nft object because then we can display owner info and i believe we already have in our previous data we already have the total number of nfts that are minted we can use that and display that into our little cards here so here's where we left off and we consolidated the result here but instead of console logging it we're going to modify the nft object again what i'm going to set is that nft.owners will be equal to an empty array okay and here's where we're going to loop through the result that we got and we're going to add them into the nft so we're gonna do res dot results dot for each so we're gonna loop through all this oops there we go and we're gonna push this into the owner's array so we're going to push element.owner off so for each nft that we're looping through we're going to push this on or off address for each token into the nft where we get an array of the addresses that own a specific nft after this we're going to return nft let's see [Music] if this is correct it seems like it we're rendering now again let's check if we can render example we're going to add another card text and we're going to say owners or number of owners can be equal to nft dot owners dot length let's try that there we go number of owners one number of owners two now we should also be able to get the total number of nfts so let me consolidate the full object here also log nfc just to see i don't remember what the mount there we go so we can also add if you add that before the number of owners will add um tokens what do you call this talk talk is in circulation and nft what was it amount or we could just say amount there we go amount one number of owners one and here we have them on three number of owners two so now so now we're pretty much done with the basic um all the getting of information and we got the amount we got the number of owners and what i want to do now is to provide the mint functionalities that we can mint these nfcs from an actual interface as you do that we need another button here right for each of the nfts that will go to a new page so we need a second button here although this button is not used so we'll use this for mint and what is the link going to be well we need to specify we need to create a new html file for that content and i'm going to call it mint.html and here we also need to pass in the nft id that we want to mint because if i click on this button i want to mint the nft with this id if i want if i click this button i want to mint nft with this id okay so i'm going to pass in that as a credit parameter so i'm going to put question mark and the name of the query parameter which then will be nft id that's going to be equal to nft.id that open id all right we'll save that and now we need to build this mint.html file read in this parameter and have some sort of form that we then use to mint okay so let's create this new file mint.html and we do need a lot of the same stuff as the index.html so we're going to copy all of this and then we'll remove what we end up not using so we'll use the same libraries we need more alice we need bootstrap we're going to have the same jumbotron maybe we should not call this welcome maybe we should call it something else um like nft manager okay we'll call it that there i'll call it down here as well um we're gonna have the container we're gonna have the app and we're gonna have a file we're not gonna main.js let's let's have mint.js so that we have specific logic for the mint page and in the mint.js well let's let's wait for that let's start with actually doing the layout here so in the app div i want to create an actual form so i want to have input fields where i can input how many i want to mint and to what address i want to mint them and so on so i'm gonna create a div in here which will contain an input field which will um uh let's say id this would be the token id input and this will be pre-filled with the data that we got from the url but if we want to enter the token id manually we can do that too value maybe we don't have to provide value it's going to be empty type is number and then i also want a label before this the label is going to be token id and then i'll do the same for what for the other info that we need we also need amount how many want to mint token amount or maybe just amount input we need the same for and this is also number we need the same for address so where we want to mint these tokens address input this will be type text because it's not a decimal number and then finally we need a button to actually send this away so this is going to have first of all some classes because we wanted to look like a bootstrap button so btndn-primary we're going to say mint and we should also give it an id which is submit mint okay that's it for the html um we have min.js which we're going to start building what we need to do we need to grab the nft id from the query parameter fill it in as the token id pre-fill that and then we need to let the user input these two then when they press the button we need an event listener which we're going to use in order to call the contract method or the mint function in our contract and then wait for the response and display some sort of message when it's done all right so let's start with that in the mint.js function or or if you want to check this out we can open this up in our browser so if we should be able to let's see click here and go to the main page here we go all right so that wasn't too pretty did we style that first but we did provide div so let's see what we did wrong yeah we need columns as well so we have the row we also need div class call call dash md12 so this is going to be full size column and we'll put everything there okay save that there we go so that looks a little bit better can be styled look more beautiful but that's okay for now now let's work on the logic in mint.js we do need the same morales initialize and contract address all of that stuff here and we need to have an init function that will make sure that the user is logged in and so on function in it so what we're going to do is we're going to grab they would do this in our previous uh init function could we copy this yes we can copy this i have this here but if the user is not logged in let's just redirect them back to the index page because there we have the login function now if it's not logged in then they go back to the indexed html now let's get the nft id first of all we can pre-populate that first we'll get the url params object which is a special um special class in javascript uh where we get the search parameters the query parameters so input window location.search that will give us the full string of question mark equals and all that stuff and then we can extract the nfc id using urlparams.gov get or nft id i think we call it that nft id same thing here all right and we can console like that if we want nft id we can check so we got the right thing now if we refresh this it didn't remove this we don't need that save uh did not consol log oh i know why we don't call the init function let's call that that will help there we go one if i change up here to two we'll say two all right now let's change back to one and let's continue but when we have that we're ready to actually call well we're to get the other info as well so before we can make the call to the contract we need to get the other info so we need to get the address info and the amount info we're going to extract that as well we should also set the value that we got from the url we should set that here so we're gonna do document dot get element by id and the id we set was token id input i think yep and we're going to set the value to nft id right and that's all we need to do in the init function there we go and now we can increase it if you want but it will default to whatever we put up here the rest of the stuff should happen when we press the button so let's create another function that's called mint because the other information as the you know address and the amount is not available when we just load the page it will be available when they click click the button but not before that because of course we need to fill it in and here we can get the token id so token id is going to be equal to document dot get element by id for token id input or did we just call it id no this was the one we did previously yes we need that one and here we also need to parse this into an int because our smart contract expects this to be an integer and not the text which the value of an input field is automatically in javascript then we're going to get the address which we should do the same thing but this can be a string and this we called address input and then we're going to do the same thing for amount this was amount input this should also be an integer there we go now we need to do the actual call to the smart contract and this we need to use the web3 library for and moralex has the web3 library built in into the morales object so we can use it through there and the way we get access to that object is to first of all initialize it so that we can do in the init function but we're going to define an empty object up here called web3 because we're going to use it in all of our functions and then in our input function we can set web3 to await morales.web3 with a capital w important dot enable okay and if this works we should be able to get um the account for example so let account equal to await web3.ethe.getaccount so this will give me the current signed in count let's just see so this works enable undefined [Music] so i didn't even set it to capital w there we go enable there we go there we have the address and this is the current signed in metamorph address so that works good uh we could actually pre-populate the address field as well so we could assume that if i mint i would probably mint it to myself first and then maybe transfer it let's also say that we will do this we'll set the value of the address input as well do accounts zero which will be the current signed in metamask address all right let's see if that works there we go address perfect now let's focus back on the mint function and our web3 call what we need first is to define the contract so it could be constant contract equal to new web3.ethe.contract actually capital c and here we need to specify the contract abi contract avi and then we need the contract address which i think we already have here yeah oh and uh that's it and we're going to talk about the contract api because what the contact api is is just the specification the interface of your smart contract it will tell this javascript the program logic website which functions are available what parameters those functions accept what they return and so on so that our code can interact with a smart contract because it needs to know sort of um it needs to know the interface it's like speaking the same language so we need to provide that we can get that from remix probably if you're watching this video in a few months time there will be a moralist function for this so you should check out the documentation it should be something similar to what we currently have with transfers let me show you that so if i go to docs and then sending e tokens nfts we have something like this for transferring nfts you just set the options okay this is an erc721 token the receiver is this the contract address is this the token id is this and then you do morality.transfer normally you wouldn't need the api for this as well and you do this web3 procedure but we've simplified the transfer to just this you just need to call a function you don't need any api and so on this will probably come to the mint function as well so check out the documentation and look for this so you can probably just do morales.mint and then the options like this because that would reduce the time and complexity a lot but for now we need to go to remix and we need to find the api which let's see where that is remove this so if you go here to solidity compiler compilation details well you even have a short code for it here api copy and then we're going to put this into a special file i'll call it api.js and here we'll just put cons contract api is equal to then we just paste whatever we copied the long long long array of different methods different variables different events and so on and we save that and now we have to include that as well in our mint.html function so that we get access to this contract api object we're going to include that down here before the min.js function so we're going to include api.js all right so now min.js we can here just write contract api and then we have contact address that's what we named it right yes now we have the contract object defined we can actually make the actual mid call then we go contract dot methods dot mint and then we input the parameters that this mint function takes which you can see here it takes address sorry account id and amount in that order we will provide the address which we got from here the token id which was next and then the amount and then we say dot send to send the actual transaction now we need to specify from where to send this transaction from which address and here we're going to use the um account from meta mosque and you already know how to get that so const accounts is equal to await web3.ethe.getaccounts and then we can use accounts 0 here and value is the amount of ether that we send to this function and in this case it's going to be zero because it doesn't cost us anything to mint uh gas fees will be on top of that this is just how much actual ether we want the receiver to get now this will prompt the metamask method to come up if we save this wait did we actually add a no we did not we need to add a on click event so on the button so that when you press the min button we actually run the main function get element by id the mid mint dot on click is equal to mint that way we'll run the main function whenever we click the submit me button and we did name it let's go back to our site refresh and make sure our meta mask is unlocked which it is hey i want to mean token id one i want to mint one of them i click mint it's here ah i misspelled once again contract should be capital e or is it here i don't know does this correct me or is i'm writing it wrong it seems like it's correcting me because i pointed out that we should do a capital c uh refresh mount one mint there's something wrong with the address invalid address if we do that let's see contract address is correct did i update that's the question so that's console.log account zero to make it that's correct but maybe i didn't update the contract that is correct as if this object is correct ah of course need to do dot value otherwise it just return the element put value there we go that should do the trick and the same thing here for address but value refresh amount 1 mint now it brings up the metamorphic when i can sign this but before i do that i want to grade the actual function that will run whenever this is complete so we can run dot on which will listen for specific events dot on and then receipt so this will run whenever we get the receipt back which means the transaction has been added to a block and then we're going to run a function we can get the receipt into the function and we can run to console.log or we could alert a mint done okay and let's try this so you need some testnet uh in qb test net ether of course we're gonna mint one of token id one mint and let's confirm and then it will take me a few seconds maybe for this to complete and then i should get an alert statement there we go now the mint is complete and if we go back so this would be a minted to ourselves so we wouldn't notice it directly here if we go back to index.html i wouldn't notice it uh straight away apart from the fact that amount should increase so let's see this was id 0 right no this was id1 okay so this should increase to 4 because we had to previously but as i said the transaction needs to not only be in one block but it needs to be confirmed so it needs to be in a few blocks because otherwise the morales api cannot know or rather it would give you um transfers that are complete and then they would get removed because the the chain uh will fork from time to time with just small differences in blocks so it takes some time before we can say that this transaction is actually confirmed just like when you have a wallet it will take some time before the transaction is actually confirmed and that's the same thing here if you're looking to get the pending states of transactions as well you can utilize the morales database for that there the transactions would appear instantly and then they will have a status pending but in the api it will take some time for it to actually be confirmed and then it will be included so i'll wait for a few minutes and then i'll refresh this and we should be able to see that the amount of token id1 has increased to three and now if we refresh we can see that it now is four around in total the number of owners haven't changed because we minted it to our own address but the number of tokens have changed that means our mint call is working now before we wrap up this video i'm also going to do a transfer page uh because morales has a very nice api for doing transit it's just one line of code to do a transfer you don't need the api or anything so i'm going to show you how we do that and it's going to be very similar to how we did the min pitch we're going to do a new mid page but for transfer so let's copy this min.html and then still do instead do transfer.html this will allow us to send tokens from our address to someone else and we're gonna do copymint.js we're gonna do transfer.js and in transfer.html we have to we don't need api but we do need transfer.js and in index.html we need to add another button or rather that is in main.js in this right here we need to add the second button here let's see if this is going to work from a ui perspective and it's going to go to transfer dot html and it's going to send in the nft id as well and let's say that this is well it can be primary for now and we're but we're going to set the name to transfer in the button the label and let's see that works there we go it looks good so our mint and transfer and when we click transfer we'll get to the transfer page now the transfer page looks exactly the same because we copied it so we got to go to the translated and change here so that this button says transfer the address should be here the amount should be here the token id should be here all right what we should do however is to go into transfer.js and we should change a few things first of all we don't need web3 so this we can keep we don't need this web3.enable we don't need accounts here we do need this nftid so we're going to set token id to that address input we're not going to set because we want to send it to someone else we don't want our own address to be the default we want to send it to someone else and we're going to rename the main function to transfer and when we click on let's call it submit transfer we're going to call the transfer so we need to update transfer.html so that this button is submit transfer and then you'll need to grab the token id we need to grab the address and we have the amount we want to transfer we don't need these things here instead we're going to utilize the morales api and we do have that initiated up here already so we're going to go to the morales docs and we're going to check out sending eth tokens and nfts and we're going to go down to transferring here to 20 years 11 55 here we go that's what we have let me see here c1155 and we can copy this here and because we do need options and then result morale is still transformative transfer is all that we need so first of all options well here's an actual error in the box this should be erc 1155 i'll change that right after this video receiver that will be the address from up here contract address that will be this right here your contract address token id will be this token id right here and amount will be here that's what we fill in in the on the transfer page and then we call uh await morales.transfer with the options and then we get the result back so when we get that back we can console.log the result okay and with that done we should be able to run this now uh everything should be working because we already set most of it up when we did the mid page so let's try this out go here and we go to the transfer page and our account that holds the nft now is this account right here and i believe we hold view or something two nfts of id one or maybe even three so we're gonna take we're gonna send using this account but we need another account to receive it but let's say we create a completely new account receiver test receiver create that so that we know that we will have a new a completely new address that doesn't have the token yet because then we can see that in the dashboard [Music] maybe you know before we actually try the transfer well let's try the transfer i was thinking we should add like your balance to the front of the nft manager as well amount is to do one we're going to transfer to this address let's try this transfer we'll bring up meta mask we'll do the transfer call we're going to hit confirm and once we get the receipt back the morale sdk will print out it in the console because we said console.log the result there we go now we see the block hash block number this was included we see the events which would be the transfer event to do but it's in hexadecimal so it's a bit hard to see but this would be the transfer event and we can see who sent two but this is a contract in this case so now once this transfer has gone through we should be able to see that the number of owners here will increase but once again it will take a few blocks to this to be successfully picked up by the api because we don't want pending transactions to be in the api what we can do in the meantime is that we can implement your balance so that we get that as well so with the current meta mask account we can see what the balance is of our address i just realized that our owner's array doesn't really work because in this result for loop should be owner underscore off not on or off let's see maybe is it lowercase o i think so there we go now it actually works it actually didn't give us any error here this number was still correct because it did push one object for each owner but it was undefined so it didn't actually show the address but there we fix that we can do this in multiple ways we can either call a moralist endpoint and get how many tokens we own our balance straight away from the api or we could when we loop through these tokens right here we could just count if the owner is is actually our address that is currently authenticated on the website and i guess the efficiency of that would depend on your applications how many nfts you have and what's faster looping through the different owners or just calling one api endpoint per token i would guess that for most people it would just be better to call the api endpoint so that's uh that's what we're gonna do so we're gonna find the api endpoint that we're looking for uh let's see here so what we're looking at using is this um let's see address nft slash token address in the account api and we can try it out here to see so that it is what we're actually looking for and we're going to use chainkb and we're going to input let's see here the owner address so we're going to switch back to our main account copy that address and then token address we have here let me input that as well and we're going to execute here we get back that we own two of tokenid1 and we own um zero of token id sorry we own one of token id 0. okay this one is perfect this one is perfect for what we want to do but i cannot input the actual token id here so i'll have to figure that out somehow because this endpoint will give me all of the nfts at once that really means when we get the nfts with metadata what we need to do is we need to do another call here so let we could do owner data equal to await yet owner daytime we make another function out of this and we don't need anything to be passed in here so let's create this function get owner data and this should be async function and here we will make a call to the morality api and this will be account dot let's see what this is called in the sdk this was the rest api that's here account get nfts for contract we can copy this actually we're gonna return this and chain ring kb token address we have that token address then we have it up here contract address sorry and address is going to be the current signed in user and you've seen me get this from meta mask in the past but since we don't have the web3 object here initiated we could also i can also show you how we can use morales to get this so you can let accounts equal to well let's see we need the current user so should we make let's make the current user a global variable here and then we can use current user here dot get accounts all right this will give you can use this get method to get anything that is in the morales database for this user an account is similar to the web3 accounts array just an array of all the accounts that this user has and we're going to get address accounts 0 because we're going to get the first address in this case we only have one but it could be the case that you do have multiple ones you might have to loop through them if you want to get all all of the accounts because in moralities you can attach multiple addresses to one user so that should do the trick will return this but we need to make this a bit prettier the actual return statement or what we're returning so here we'll get results there's one i'm thinking that i want to return here but let's actually just let's console.log result first because what i want to return is something like okay token id one and then the balance balance for this then token id2 balance for this so in this case it was zero and one you get the point uh but let's see what format this gives us the actual amount to and do we have the token id yes then what we will do we could probably do result let's see we call it dot result yes it will be let's call this data or the data dot result and we'll get this is an array so we're going to map and this will be d or we could just call it element well this case would be reduced actually we would have let's see object and we would have current element we want to populate this object for each element in the array so we're gonna do let's see object object for current element dot token id is gonna be equal to current element dot amount we'll have to set this to a variable so that result be equal this or console.log result and then we can also return results uh i want if we i thought about this correctly so we're going to run get owner date there yes all right let's try this okay so it's undefined well first of all we can see that number of owners has actually changed now so the number of blocks have increased and the transaction is now confirmed uh but this didn't work yet so let's see what i screwed up here so i need to return this from within the reduce function and then i think since we're also we want to create an object out of this normally this just accumulates some sort of value right but we want to set we use it instantly as an object so we'll pass in as well the initial value of this final object and we'll set the initial value to an empty object that we can actually use it as an object here and return that and let's see one that's all right oh yeah yeah of course we need to return it over here return object we can't return this statement there we go so with token zero i have balance one with token one i have balance two so now since we return this data we can access it here so we have this owner data here but when we render inventory i'll also pass in owner data and then we'll go to render and we'll use it here add another row here and we'll say your balance and this will be [Music] all the data here we'll set your balance will be owner data or the nft dot token id if this works there we go your balance to your balance one and if i change uh account someone actually didn't implement the account switch logic yet even if i switch accounts it will still be signed into the right user but we have other tutorials for that on this channel on how to work with the wallet switching users because when that happens you want to sign out your user sign in the new user or you want to ask the user do you want to merge these accounts into one so i'll leave it here for this nft tutorial you can check out the other tutorials for that but here is the final version of our nft manager we can mint we can transfer we can see all of this see our image our metadata all that good stuff so we've come a long way and it's so easy to do with morales even though it seems a lot of work but it's insane that we can do this in a couple of hours and we've got the full nft manager we've created our contract we've minted it it's it's absolutely crazy and maybe some ideas to add into this could be a mint page where you can mint something from scratch where you can upload an image you can upload the metadata all of that and you can mint it from scratch so that's a fantastic idea you can also implement the morales ipfs system to mint using our ipfs and you can upload your data there and you can get the data there into your smart contract and so on uh that would be pretty cool uh if you have any questions about this feel free to leave it in the comment section below uh otherwise i'll see you in the next video make sure to subscribe to this channel morales channel hit the like button uh we'll appreciate that thank you for watching

Channel: Moralis Web3

Views: 8,498

Rating: 4.986711 out of 5

Keywords: blockchain, programming, ethereum, crypto, cryptocurrency, Moralis, javascript, Ivan On Tech, cloud functions, dapps, ethereum code, create a coin, web3, web3 programming, blockchain coding, moralis programming, smart contracts, BSC, Binance Chain, polkadot, Polygon, development, coding, what is blockchain, blockchain explained, blockchain technology, blockchain for programmers, blockchain for developers, nodes crypto, blockchain archive nodes, decentralized applications, blockchain nodes

Id: tBMk1iZa85Y

Length: 134min 42sec (8082 seconds)

Published: Fri Sep 10 2021