How to Code a Crypto Collectible: ERC-721 NFT Tutorial (Ethereum)

today I'm going to show you two code room crypto collectible just like crypto kitties now I'm trying to create the smart contracts on aetherium and we'll also create a front-end app that allow you to create new crypto collectibles and see all the ones that you've already created and don't worry if you don't know anything about you know I'm fungible tokens ERC 7:21 or even like you know how to code for the blockchain I'm gonna teach you everything in this video step by step hey I'm Gregory from DAP university be sure to subscribe to the channel click the like button down below and if you're serious about learning how to build blockchain technology you need to join my free training on my website over a Dappy diversity com4 slash bootcamp here's an overview of the app that we're gonna build today this is an interface for minting your own crypto collectibles that meet the ERC 7:21 standard for non fungible tokens alright so this is gonna allow you to list out all of the tokens that you've created right these are color tokens right there's just unique colors on the blockchain this could be anything you want to it could be you know kitties emojis fighters whatever you want it to be right but we're gonna use colors for simplicity in this tutorial and we're gonna issue new tokens with this app right we can put in a new color click mint and it will create new tokens in this set alright and we'll have a client-side application to do it I'll show you your address and all that kind of stuff now I wanna give you a brief introduction to crypto collectibles non fungible tokens and the ERC 7:21 standard so this kind of became famous with the crypto kiddies death where you could you know collect and burry digital casts on the blockchain I got really famous for clogging up the etherium block chant and of 2017 so essentially these follow something called ERC 7:21 standard they are collectibles they are non fungible tokens so I'm going to explain what all those things mean alright so first is a non fungible token alright so let's see your non fungible that's going to be versus a fungible token so essentially these are two different things so a fungible token is essentially something that we exchange for any other token so I'll give you an example like OMG is a is a cryptocurrency it's an AR c20 token and etherium so every oMG token can be traded for another oMG token of same value right so one LMG token is worth the same as any other oMG token right non fungible tokens like crypto kiddies it's not necessarily true you know one cat could essentially be worth more than another cat and that's because each token has an ID right each token is unique with something like oMG for example tokens don't have IDs it's just that they're a bunch of tokens out there and we don't care which one is which it's like having a dollar one dollar is equal to another dollar inside the same currency but for baseball cards like different baseball cards are worth you know different amounts based on the player on them all that kind of stuff that's what a non punchable token is token with an ID can't be changed for necessarily another member of its class right okay so the next thing i want to talk about is like ER c 721 so what is that ER c 721 well er c 721 is a standard for non fungible tokens and it's works a lot like ER c 20 so ER c 20 sorry let's try this ER c 20 okay so non fungible zrc 721 fungible is for ER c 20 so ER c 20 standard if you've ever looked at other aetherium cryptocurrencies is just a it's a standard for smart contracts that implement this ER c 20 token standard OMG is a good example okay so ER c 721 is a standard that's used for non fungible tokens like crypto kiddies to implement that standard in the ER c 721 standard is basically just a specification that says how the smart contract is supposed to work it describes the type of functions that the smart contract implements like what the arguments for these functions are and the return values and also the events and things like that this basically just means that they want the tokens to be compatible with wallets exchanges marketplaces and things like that we want to all them to work the same way so that you know they're supported everywhere we want them to be alright so that's an overview of non fungible tokens er C 721 crypto collectables and that's exactly we're going to build in this tutorial I'm going to show you how to create a non fungible token and NFT a crypto collectible with this er C 721 standard alright so without further ado let's jump into installing the dependencies for our development environment so that we can build a project before you get started you need to make sure you have no js' already installed in your computer you can see if you have node installed by going into your terminal and typing node - V you can install node with a package manager like homebrew or you can download it directly from the node.js website the first item in the blockchain developer toolkit is a personal blockchain we're going to use ganache as our personal blockchain for this tutorial you can head over to truffle Framework com4 slash ganache to download it you can click this download link and whenever you've downloaded it makes you install it and when you open it you've got a local blockchain running so what is ganache you know what is a personal blockchain well a personal blockchain is like a real blockchain Network you know that's connected to the public where anyone can connect to it but it runs on our computer it's you know a closed Network and ganache basically you know as a process that runs on a computer that spins up this blockchain and runs on a server so we can use this to develop smart contracts we can run tests against it we can run scripts against the network develop applications and actually talk to this blockchain it's really helpful as an invaluable tool and the blockchain developer toolkit so if you open ganach you'll see you know ten accounts listed here these are the addresses to each account on the side and you'll see you know these balances you'll see a hundred ether and this is the etherium cryptocurrency that each account has and it's you know required to you know pay gas fees in the network and stuff like that alright so that's an overview of the ganache personal blockchain network and we're gonna leave ganache here set up in our project because we're going to need it running in order to develop our project the next dependency is the truffle Framework we're going to use the truffle framework to develop aetherium smart contracts with the solidity programming language you can install shuffle by going to your terminal and typing NPM install - gee truffle at 5.0 dot five and it's important that you use that exact verse in order to follow along with this tutorial but truffle is a suite of tools that allows us to you know develop smart contracts right tests against smart contracts deploy smart contracts to the blockchain it gives us development console and that also allows us to develop client-side applications inside of our project so it does a lot and I'm going to show off all those features in this tutorial the next dependency is the meta mask extension for Google Chrome remember that the etherium blockchain is a network and we need a special browser extension in order to connect to that Network and that's where meta mask comes into play metal mask will allow us to connect to the blockchain with our personal account and actually interact with the smart contract that will develop in this tutorial you can install meta mask by going to the Google Chrome Web Store and searching for meta mask and clicking install and once you've installed it just make sure that you enable it inside of your Chrome extensions like this you can also see the little fox icon and your extensions tab let's go ahead and start coding the project so instead of installing everything manually I'm gonna get started quickly with my starter kit so if you've watched any of my recent videos you've probably seen this already so essentially this is just a boilerplate project that I've created that's got a lot of tech rolled into one sample project so that we don't have to you know write a bunch of boilerplate code alright so this contains a truffle project you know which is the framework used from building a CDM smart contracts writing tests and things like that it's also got react.js built into it with create react app and everything's wired up and ready to go like our truffle - config files are you ready to connect to ganache we've already got the contracts in a place where they're exposed to the react app and things like that alright so I'm gonna go ahead and clone this I'll take this link copy it go to the terminal get clone paste this in and I'm gonna go ahead and create the private directory while we do this because I don't want to create a new folder called starter kit I'll call it LLC in ft alright all right so let's go to that directory C D and F T all right now inside of here we should be able to open what we just cloned into a text editor I'm going to use sublime text so I can open that with the symlink double dot alright so you can use some other text editor if you'd like but here we go so let's see all of the code that we just downloaded all right so this got a migrations directory public directory source alright and it's already wired up to talk to ganache so I'll explain that the truffle - config file is the entry point for the truffle project right so this is where we create smart contracts inside this project and when we connect it to a blockchain this is how we do it alright so we tell it that we have the network running on local host port 75 45 so let's go ahead and do that I'll open OSH what you've got you're not running you've got a personal blockchain running awesome so we can see a bunch of accounts inside up here we've got ten one two three four five six seven eight nine ten and they all got a bunch of fake ether credited to their accounts so I've actually already done a deployment on this particular instance of ganache so this one has a little less but that's okay and we can see the addresses is the public keys here and the private keys you like their passwords just like this right so don't don't use this somebody could steal your ether so I'm gonna minimize that we're talking to the blockchain that's awesome all right so let's go ahead and start writing the smart contract for the NFT or the non fungible token all right so we're gonna do that inside of the source contracts directory and you might notice this looks a little bit different from a standard treble project that's because I've put these inside of here so that they're easily compiled and exposed to the react app that we're gonna build when we create the client-side portion of this tutorial okay so the smart contracts gonna live inside of here we can see one already this is the migrations file so this is the smart contract responsible for putting other smart contracts on the blockchain with truffle so I can create a new file here and we'll call this color Co lor so all right so capital C EO lor Sol is the file extension for solidity and we capitalize those file names by convention all right so let's see here we can go ahead and start creating the smart contract like this let's go ahead and start declaring the version of solidity that we want to use we do that like this you say pragma swell tea enemies a carrot state version 0.50 and actually this time I'm going to leave the carrot off so I've started doing this recently where I'm just locking the solidity version so that you know it can't use some version higher later that's what the carrot means it means use version 0.5 to 0 or higher but I want it to use 0.55 0 all the time ok so now we can go ahead and create the smart contract for the token like this it's a contract this is the keyword for creating smart contracts contract color alright and inside of here's we're gonna create all the code for the token alright so instead of writing every single bit of functionality we're gonna use some help from a library right and I'll show you why alright so let's let's take another overview of the non fungible token the ERC 7 21 standard alright this is a pretty good website ERC 721 org you know that talks about what you know what they are you can also see a sample code right so it's you've ever looked at like ERC 20 tokens you know that ERC 721 is just a standard so all NF TS or all ER c 721 tokens have to implement this interface right they have to have these kinds of functions already like every every CR C 721 token has to have a balance of function and it has to take an owner argument of address type and it has to return a UN 256 you know it has to have an owner of function right it has to have a safe transfer from function and all that kind of stuff right you can see every detail that the token must implement in order to adhere to this standard so standards are for okay so instead of coding out every single you know ass attribute I'm gonna use a help of a library right so maybe if you guys want to see another tutorial where I code out like all the functions of an e rc 721 leave a comment okay I know there's value in that like I did that in another series where I show you how to create an e rc 20 token sometimes you know coding out the functions yourself helps you understand it better and helps you understand the programming language there definitely is value in that but for this particular tutorial I just want to use this library so let me know if you want to see a bigger tutorial later but for now I'm gonna go to the open zeppelin library okay so you might have seen this in some other videos in my channel if you've been watching before so opens up one's a great project that has solidity smart contract examples and they've got lots of great contracts so this is what i'm gonna use and you can go to github.com 4 slash open zeppelin and find this and i'm gonna go in the contracts directory and you'll see i'll see your token ERC 7:21 there's lots of different ERC 7:21 examples right and we're gonna revisit this here in a minute yeah here you go you see all these same interfaces that you saw here implemented in this library ok so they've done the hard work of creating a lot of the basic ERC 7:21 functionality that we're gonna bootstrap off of to create our own token override some of the functionality and create you know some special stuff for our own token that's the great thing about this library ok so let's go ahead and do that i'm gonna install open Zeppelin solidity inside the project with their instructions so see your you can just find how they do it MPM install open Zeppelin contracts so I'm going to copy this get my terminal and I'm gonna do - test save and let this install alright it worked so you might see some warnings here that's ok I would just ignore them as long as you get this success message at the end again so I'm going to go ahead and import one of these contracts into our project ok let's see here so let's use the ERC 7:21 full example so i'll go back to the contracts I'll show you what I'm talking about er C 721 C here ownership where is it token sorry here RC 721 so there's lots of examples here like burnable innumerable holder metadata etc etc ruining is full alright so that's the basic example and it used is based off of ER c 721 Yoshi 71 I knew mirabile and ER c 721 metadata okay I have a good month is up here so we can import the library just like open Zeppelin tells us to you can go there homepage on the github repository and you just copy one of these so you want a RC 721 full okay we can go inside here and paste it just like this alright so now this is how you would normally do this right importer for your node modules directory right here right because we install this package with node package manager NPM right so import from node modules fine you know at open Zeppelin right here right and then your contracts because it's inside of here right contracts token ERC 7:21 just like we saw on get up right that's how you would normally do this alright and if you're gonna build this for your project and you have the exact version of open Zeppelin then do it that way but I'm gonna do something a little bit differently write that specific just for this tutorial right I wouldn't necessarily do this in a real project but I mean if it's just for the tutorial just so that everybody can follow along and you know do this correctly okay alright because I don't want to put this tutorial here and then it break you know in two weeks whenever open Zeppelin decides to like change this library and then move this token and call it something else right I want everyone to follow along with this tutorial for a long time so I'm actually gonna copy the code and from inside of here and put it in a new file inside this contracts directory okay but I'm gonna do it with a tool called truffle flattener alright so I'm going to stall that like this so truffle flattener what it's gonna do is take all these files you know from inside this token and put them into one file because you feel notice so you've got contracts see token here should 721 if we want a RC 720 one full alright it has all these dependencies so in solidity this is how you inherit from smart contracts you say this contract is you know this contract and it's this contract and it's this contract so it pulls you know attributes and functionality from these different smart contracts which are imported here right these are in different files but if I want all these things inside of one file I need to flatten this file and put them all in one place and I'm going to do that with truffle flattener so that I can not have to depend on the node modules directory so I'm going to copy this NPM install truffle flattener - - save alright that's gonna put it in my package JSON file and import it into the project so I'm wait for that to finish alright it worked so I got some warnings but it worked so I'm gonna clear that and I'm going to flatten this file like this basically I'm gonna run the truffle flattener command that's how it works right somewhere they have documentation I don't see it on here but I've used this plenty of time so I'll tell you how to do it it has this command just like truffle flattener and then we give it the name of the smart contract that we want to flatten and then we give it the file that we want to go sue but this command exists inside the node modules directory so I'm gonna do like this dodges the current directory ford slash node modules and then dot bin alright truffle flattener just like that so running from the node modules directory the bin this is the executable that comes with the node package whenever it's installed and then I'm gonna find the smart contract that we want to get in this case it's this it's er C 721 full all right just like that so from the node modules directory node modules open Zeppelin contracts token ERC 7:21 RC 721 full Sol and I want to flatten it so I put this caret operator and I say source contracts and then I say ERC 721 full that Sol alright hit enter and watch it work okay cool so if I go back to the code we can see here just next to our color contract we have a file right and this has got all the code from all those smart contracts from the open Zeppelin library that are used for ERC 7:21 full right because he ER c 720 my full it down at the bottom even see the reference past where they were pulled from so open zeppelin contrast token here she's 721 full alright so now essentially what I've done is just copied all the code from the library and put it inside my project so like I said I wouldn't necessarily do this for a real project I'm doing it for the tutorial so you're welcome to follow along with this and always have the right code so you can pull this repository for github and check your code against exactly what I'm using so if you want to build this for real you can you know do this but for now I'm just gonna import the code here alright I'm gonna say dot /er c7 2100 full sorry full Sol alright now we'll import all that code into this project and now we can go back to our contract and say color is ERC 721 full awesome so that gives us the basic functionality for an ER C 721 full contract so we're gonna write some more code inside here to customize this but for now let's just get it the basics wired up write a simple test just make sure that it works the way we expect it to so I can say constructor actually let's use two spaces inside here I'm going to change my editor a constructor and then we're going to use this so the constructors the function that gets run whenever the smart contract is deployed the blockchain or craving for the first time okay it's like an initialize function or something like that in another object-oriented programming language and what this does is allows us to specify some values in this case we don't really have to run any code inside this function so I'm gonna keep it empty right here's the body of the function we're not gonna do anything inside of it so I'm just gonna create a new line and leave it blank but if you'll notice the ERC 7:21 function has a constructor inside of it right and it requires some arguments it wants to know what the name of the token is and what the symbol is okay and they give us a hint on how we do that you can basically pass in the name of the smart contract you inherit from to run its constructor function and pass in those arguments like this and that's exactly what we're going to do for our smart contract so after the constructor keyword and this you know open and close parentheses I'm gonna say er C 721 ful that minute pass in the arguments we want so first is the name so it will just be a string open and close print sorry open and close quotation marks I'll set color must be the name of the token and the symbol is gonna be colors capital C olor all right so that's how we just tell it the name and the string that this parent contract wants in its constructor by defining our own constructor and passing those values in like this okay so now we also have to set the visibility on this function so all the functions of the smart contracts have visibility there you know either public or private or internal or whatever whatever right so essentially we want to do is tell it that this function can be called outside the smart contract is publicly available and that has to be the case whenever we run a smart contract for deployment so say public all right so that gets a set up now what I want to do is write a basic test just to make sure that this is the Boyd properly to the blockchain okay so do you like this I'm going to create a new file or any directory I'll say make directory mkdir tests okay see new test director is created here and inside of here I'm going to create a new file say touch test I'll see you let's call it color test Jas alright this is we're gonna ride the test for the smart contract just to make sure that you know this worked and I guess before we do that we can just try to compile it so I'll say truffle compile it will definitely tell us if we made any mistakes like syntax errors we can find that out before we even write the test so let's just go ahead and do that let this run and while that's running I'm gonna get this file set up here I'll tell you a little about the tests so let's just check so compiling and I'm gonna look up something here see all right so it worked all right so we're gonna write tests with the mocha testing framework all right if you can have an overview of this by going to mochas website basically allows us to just write tests for the smart contracts and also the chai assertion library okay so you can see chai here I've done this in several my other videos you can check those out more if you want to basically this just allows us to write assertions like this and moeka allows us to organize the tests and create test examples so I'll show you how that works let's you know open this new file color dot test ijs and we'll set the file up the first thing we want to do is import the smart contract like this we'll say kotts color okay this is the artifacts that require and then we're gonna recolored sol from the root of the contract directory that's this right here okay so truffle has this thing called artifacts which you'll see momentarily well I'll just show you right now so inside this api's directory you can see cut JSON this is the artifact and it's got the ABI which is the abstract binary interface this is just the JSON description of what the smart contract looks like the functions and things like that I've got all this other information like the address wants to put on the network which we don't have yet we'll do that in a minute so anyways we require that artifact to create the color here and then I'm going to import chai so I'm gonna say require chai and then we're gonna use chai as promised and when you should okay so that's another basic test setup now I'm going to scaffold out the test with this contract keywords in contract it's a function and then I'm going to pass in color that's just the name of the contract and then we'll pass in a callback function okay and inside this callback function will write all the test examples for the smart contract and this callback function has one argument for now is this accounts these are gonna be all the cat out sorry they all the accounts from ganache right here okay so I can write a test for deployment like this say describe deployment okay so a sink and pass an error function and as a Const exercise do this say it's deploys successfully and then we'll also a callback function sorry I think I have a type over here I'll fix in a second all right so inside of here I'll just explain what's going on so describe is you know a container for all these test examples and then anything that has it essentially contains test examples so we're gonna write a test to make sure that it deploys successfully as it's a smoke test and what we're gonna do is say constantly check the address to make sure that you know it would got deployed on the network okay so I'll so explain this async keyword so we to interact with smart contracts in the blockchain we have to use asynchronous calls that's because we can't just like wait for them we can't just wait for them to get to talking to blockchain takes time and we can't you know just make synchronous calls all the time or else our apps are gonna be really slow so that's we use the asynchronous nature of JavaScript to get those results and there's a few different strategies for handling this like async/await so actually go ahead and demonstrate this in the console I'm gonna come back to this test I'll show you what I'm talking about so it's not so abstract actually before we do that we have to create a migration sorry I'm a little scattered here but let's go to the migrations directory so hold that thought we're gonna create a migration and I'll show you what the async/await pattern looks like so if you go to the initial migrations we have to create these migration files to put smart contracts on the blockchain and this is just like you know migrating a database in some other context right where you're adding new tables or maybe you're moving data from one database to another right that's kind of the idea with smart contract migrations you're you're moving some our contracts one place to another you're migrating them or you're changing the state from one state to another okay so I'm gonna copy this a great new file called to underscore deploy contracts is okay and you have to number your migrations in your truffle projects to tell truffle what order they're gonna be run in right so one needs to be run first then two DS run second okay so I'll paste that code and it's pretty simple there's not much we have to do inside of here I'm just going to change migrations to color okay and that's going to put color on the blockchain so let's go ahead migrate it say truffle migrate all right you all right it worked so now I'm gonna open the trouble console set truffle all right so the truffle consoles a JavaScript runtime environment where we can interact with solidity smart contracts no no that might be confusing it first we write the smart contracts and solidity but we actually interact with them and JavaScript and that's because we do that in the tests we do that in client-side applications and we also do in the console to use some of the nicer features of JavaScript and have a lightweight runtime environment and things like that right we can use node.js so let's let's get a copy of the contract and fetch the address and I'll go back to what I was talking about in this test example where we want to use the async await pattern okay so I can get the smart contract like this it's a color right that's this artifacts require color and say dot deployed okay now this will get a deployed copy of the smart contract all from the blockchain will return it okay I do that and you can see this all right that's that's what occurring you're gonna get back the problem is I can't just say color equals that it's not gonna work all right because it's an asynchronous function call deployed here is gonna return a promise all right if you want to read more about that you can look up JavaScript promises I'll put a link here in a second but essentially you have to wait for this function call to finish and if I just assigned it here it's going to assign to the promise not to the actual result so you could do this a couple ways you could use you could use something like vinne and then you know passing a function and say result and then say something like you know color equals results right that's one way that you could assign it or you could use the async await pattern which is what I like a little better in this case and you can just say color equals a weight right color dot ployed boom and you'll see undefined here that's okay but if you're that color boom there it is awesome so async/await is supported out of the box inside the truffle console but if you're going to do it inside of a test or some application code you have to use the async you can only use a weight inside of an async function call so that's what we use is async key word here to say that you know we're going to do something asynchronous inside of here and now we can do a weight just like we did in the console say contract equals weight color dot deployed boom and that is a copy of the contract and we can just use say let contract here okay and then now let's just check for the deployment let's just say look at the contract address say Const address equals wait I don't even need to wait contract address that's going to be available for us out of the box and say assert we just wanna make sure that it exists so say not equal we don't want to be an empty string if it's not a empty string will say that it exists and we can even console.log all right so let's run the test like this go to the terminal and we can run it with truffle tests pretty easy all right it worked in there we can see the address all right deploy successfully so I can remove this console.log statement because we know the address was actually there and I'll check for a couple of the things I'll also say that it's not equal not equal address and I'll say is your X 0 that be the empty address so we don't want to be that we also don't want it to be no we also don't want to be undefined okay all right so now let's check for this other stuff so this would be the name all right this would be the symbol so I can say you know it has a name a sink then pass in this function like this say Const name wait contract name all right so the name function just returns a name you can see all those select you pull this up source all right you can see all these are in here in this name symbol token URI okay so I can check for the name like this alright so name equals a wait contract name but there's a problem here I don't have a copy of this smart contract right it's only been called here so I can refactor this to create a before hook all right so before the SUBSCRIBE block and create a new function like this is before async as the function name and then say contract I'm sorry let's just copy it copy this Konrad you goes away color that deployed exactly what we did there but I'm assigning it and said this before hook okay all right so now this before is gonna get run before this and before this so we'll have a copy of it already all right so now we can check for the name say assert equal name color save that run the tests you so now we can check for the symbol as well again just create a new example here this symbol and say cymbal and your color save that the tests alright it passes awesome so we've got our basic test setup and that should give us the ability to continue coding out the smart contract okay so the next thing we want to do is actually build out a mint function all right so the behavior of this token is that we're going to allow you know the person who owns it to issue new ones some mints new tokens so whatever this marketers deploy there won't be any tokens in existence okay and you know remember the idea of non fungible token is that each token has a specific ID right they are unique they're not like any other token and in our case we're gonna have different colors so essentially we're gonna do is allow somebody to create a new token with a hexadecimal color value okay and we're gonna create the new mint function like this so I'll create a new function that says function mint alright so we create new functions and slow to get the function keyword mint all right and then inside of here we're gonna write all the code to create new tokens alright so like I said was what's gonna happen is that someone's going to pass in a color so we'll take a color well add the color and then we will track the color well that's going to be true here track it and add it then we'll call the mint function because there's already a function inside of this I'll show you in a second and then I guess this this will be adding it and then we'll track color track it and then also will want to say like require unique color okay so that be the first thing we'll make sure that you can't like issue the same color twice right so we'll do that we'll do all these steps so first we're gonna add a function argument it's gonna be string all right that's how you do datatypes and solidity you call string first or you know whatever the data type is string memory color alright so this is going to be the function argument color string and I'm using an underscore here by convention to tell solidity this is a local variable and then I'll say set the visibility on this function just like I did with the constructor to public because we want you know an admin or something like that to call this min function okay and I'm gonna keep this example simple for now I'm gonna let anybody call this function but if you're gonna do this for real you'd want to restrict the ownership of this function to like an owner or an admin or a mint or something like that you can check all those out on Open Zeppelin you can like check out the mint or roles and things like that but for now we're just going to keep this simple and let anybody call the min function okay so let's do this let's create a way to track the colors all right so I'm gonna create an array that's gonna contain all the colors that exist inside this token so I can create a new array like this let's say string and then use the array so essentially what this is gonna do is create a new array that's going to tank contain string data types all right and then I can call this colors alright so the array called colors that's going to contain strings it's also gonna be public because we want to be able to read this outside of the smart contract so ever I call this public solidity is gonna give us excuse me so ladies gonna give us a function called colors that's gonna allow us to access items out of this array necessarily return the entire array but access individual elements out of it which will see when we code out the client-side and in the tests as well okay so whenever we create a new color we're going to add it to this array and what in this ID sorry we're also going to use this to generate the IDs for the tokens that are minted so I'll show you what that looks like so you int well first of all stick this colors and we're going to do is add it so we'd say like colors push and then say color alright so push is the function that adds an item to the end of the array the end is very important at the beginning yes whenever it does that it's gonna return the index so I could say you int ID or the length sorry colors push color and we're going to use this value to actually generate the new ID for the token whenever we meant it okay so essentially the first time this is called there won't be any colors inside of this the link will be 0 but after we do it the first time this will be 1 okay and then we can use that ID to mint the new token of ID 1 okay so let's do it like this we're just gonna mint it so if you go to actually 71 full if I go the mint function so here it is here's an internal function you see internal that means it can't be called outside the smart contract we have a mint function address 2 that means who are we menteng this from and what's the token ID right so that's what I was saying a minute ago we generated an ID that's going to get passed into this function to create a new token so what do we want it to go to who do we want it to go to well we're gonna do the person who called this function so whoever called it we can find out that information inside solidity with the message keyword msg and we can say dot sender all right this is the etherium address of the person who called this function all right that's the first argument and the second argument is the token ID which we generated here all right it's going to call the main function okay so we've added the color to the array called the mint function and now we want to do is essentially tell the smart contract that we've already used this color after we successfully minted it all right so basically I'm gonna create a mapping or a lookup that says that a color has already existed so I'll do it like this I'll sure what I'm talking about so I mean he's a keyword mapping all right I'll say string bool color exists so let me explain this a mapping is a data structure and solidity a lot like a hash or a like a JSON object or a associative array in other languages where it's a key value pair right so the key is a string in this case and the value is a boolean so true or false and this is just a dictionary lookup to say like does this color exist so if I pass on a color value like I'll just show you the example so color equals ffffff this would be the hex code for a white so if we bent it a white token string ffffff if we added white in this function and we want to pass in white here and say true it exists and we're gonna check on that up here anytime we call the function so if we put it in black it would be false and this would keep going but if we put it in white again we wouldn't meant any more white tokens it's because we want the color to actually be unique we don't want it to be minted twice good all right so I'll add that to the mapping like this a color exists now I'll pass in Cohen and just say true boom easy alright and now finally we want to check against that but I'm gonna do that after we write some tests so we just want to make sure this basic color works first so let's go to the tests color test is and let's try some new examples we'll call this group so describe deployment I minimize this and say describe minting so you described minting say a sink all right okay so inside of here let's say it creates a new token they sink all right and we want to do is essentially say hmm let's do this say results hmm also like this we'll say a wait contract just look at contract here mint and then we'll pass in a color let's just use a random hex color like this say this all right so you can use whatever call you want to hear but I'm gonna use this one and this will be the results so you let results here I just say he costs salts and then I'll say Const odel supply equals outside do that yet yeah I was supposed to do chef cosplayer wait contracts total splat okay so total supply as a function also on here so to the spline we're going to tell us it's kind of self-explanatory just tells us how many tokens actually exists okay all right so all right so those are the first things we're going to check for so whenever we do that we're essentially just gonna say a success so that capitals I'm gonna say assert equal total supply and then we'll say 1 it's essentially we just want to say whenever you know we a minted a token we now have one token in the total supply so let's run the test like this you alright it worked so now I can actually check the logs to make sure that the correct information was passed and whenever we meant it so I'll do like this there's a console log results okay so I'm gonna show you what happens whenever we do the async/await on the mint function essentially that's going to return the logs that were emitted so in this case the transfer event is going to be emitted so they transfer Skype so it's going to show the address of who was minted from our sorry who called the function who was minted - and then also the token ID so if you look at the mint function it does that so here transfer some was not transferred from anybody's minted - in the token ID ok alright so say that open the tests are good let's run it we're gonna log this to the console to see who did it all right this is what the logs look like you can see a transaction receipt and you can dig down into this to find some values to find the logs you can see the ID the event and there gonna be some ARBs inside of here that will show us the values so I can dig into that like this I can find the event this event equals result args and then the vent is going to have the token ID from and - so you could log this out as well but imma skip that step and just go ahead and write the test against it so I set cert equal event dot token and ID to number total supply actual this is do one and we'll say ID is correct assert equal and then event from and we're going to pass in the blank address here okay then from is correct and we're set cert equal event - I must say accounts so these are the accounts that are passed in by ganache MSA counts 0 all right that's gonna be the first account in the list for ganache right here and that by default is who is calling the mint function whenever we you know do it inside the test we called mint msg sender is going to be that first account so that's we want to check against say to is correct yes we'll run that test and while it's running I'm gonna go ahead and write the next a little bit of code so I'm just sitting here and edit this later and wait for the test to pass so if I go to color the kamar contract last thing we want to do is require that the color is unique so we're gonna use this color exist mapping we're going to do is say require that's a function that's gonna you know create a guard and essentially we want to do is require that the color has not been taken yet so I'm gonna get like this bang color exists color no easy so I'll explain that here we said color exists color equals true that's setting a value in the mapping here we're just reading the value out of the mapping right we use a color exists color that's gonna be either true or false right so if the color exists it's going to return true because we set it here before all right and if it's false it's if it doesn't exist it's gonna default to false that's what boolean's always do inside these mappings if they don't exist they go to false all right so if it exists it's gonna return true all right no let me take this out and explain this require function so require what it does is anytime something evaluates to true it doesn't do anything right and this function passes normally but this evaluates to false then this blows up and none of this code executes and it triggers an exception and the etherium transaction and the transaction doesn't complete okay so what we want to do is they require color exists false so we do not want the color to exist so if it's true this is going to evaluate to false require won't be satisfied and then none of this can code it run I know it's kind of confusing at her thinking opposites so just think about this for a second if that's confusing and you'll get it all right so let's go back to the test to make sure that other one passed yep it passed all good so now we can write a test for the failure case so we'll say a failure and we're going to do this say wait contract mint let's try to mint the same color twice and then say should be rejected all right we get that should be rejected from this okay cannot mint same color twice so save this mother tests imma let this run on its own and I'm going to go ahead and get the next test example set up all that's running in the background so essentially what's going on is we have you know completed pretty much all the smart contract code we're gonna do we got a lot of stuff for free from the CRC 7:21 full contract but we've just added our own little bit of functionality to set this up ourselves there's a lots of different ways you could do this just FYI I'm just showing you the easiest way to bootstrap something like this for this tutorial I'm just using this colors array as an example to show you how I raise work you could track the colors differently maybe with a token URI metadata something like that there's lots of different ways to do this but I'm gonna show you a quick and easy way and hopefully I'll teach you about how n f T's work alright so inside this test I'm going to also do the next one so I described indexing which is going to be the other functionality we use inside our app so essentially we're just going to list the tokens out by color like if we want to see all the colors that exist this is how we're gonna do it alright so we'll say let results total supply we'll do another before row sexy let's do this let's say it's its lists colors all right so let's check our other test if they pass yep the best awesome cool so all this code is right um let's say let's man three more tokens same int three tokens and I'm gonna say this all right and let's do a different color this time do this color let's do white we'll do black all right then let's get the total supply say he costs total supply all right so inside of here what we want to do is essentially loop through all the items in this array and fetch the colors out okay so do it like this this function here essentially allowed us to expose sorry this is calling this public expose of function colors and it gave us you know all these it gave us a function to read items out of here based on the index so I'm gonna do this let say let color and imma say let results equals an empty array and I'll say for he's a for loop in Java Script say var I equals I and then I is less than or equal to total supply so essentially going to do is go from one sorry X 1 all the way up to the total supply which in this case hopefully is 3 and we're going to say inside of here color equals a weight contract total supply all right and I was like colors I'm sorry contract colors I minus one okay so that would be the actual we're gonna read this by the index of the array not the IDS the index would be zero for the first one so that's why we want to do minus one and say results.push color it's gonna give us a new array that we can compare against alright so what colors do we expect to be returned to your well this one this one and then this one okay so we'll say let let expected copy these say what you do this speed things up - my text editor pack these out boom awesome simmers assert equal say result that's gonna be this and then expected but I don't like compare arrays here because that can get kind of tricky sometimes especially with chai so I'm going to convert them to strings and say oops to join by like that cool awesome so join what that does oops join what that does is converts to the right to string alright and it's gonna basically just take all these combine them together to one string and separate them by a comma okay so let's run the test I think with this may actually have four in it because we meant it we're going to find out so let's just run the test and see what happens you all right so it failed and that's because it contained the car that we minted the first time so you can see this is the expected result and this is the actual result so essentially we need to say meant three more tokens and include this right here and the results so let's do this ad here sorry I'll try the test again you all right it worked so this is how we're gonna list the colors out on the client side page alright guys so that is yeah that's all the tests we're gonna write for the smart contract shows you how it works we got deployment we got minting got indexing so that's the basic so that smart contracts gonna work like I said there's lots of different ways you can do this but this is how we're gonna do it in the tutorial today just to kind of show you how n F T's work okay so now let's go ahead and migrate these smart contracts to the blockchain again it's like truffle migrate - let's reset that's because we've changed the code to this smart contract we have to deploy a new copy of it a smart contract code technically can't change so we you know we add these extra functions and we have to redeploy it so would you like this truffle migrate - test reset its gonna put a new copy on ganache alright so now let's go ahead and move over to the client side portion of the application go to the client side portion of the application by going to source components nap Jas alright this is a react component and that's what we're gonna do we're gonna see show you how to write some code and react if you're not familiar with react right it's Capote's lays base library and that's how we're gonna write our front-end application so I'll show you this more in just a second let's go ahead and blew up the app so go to the terminal here I'm gonna open up a new tab and I'm gonna run the server so we have a server already pre-installed in the project inside of our node modules directory like I said the starter kit has create react app already wired up and that ships with a development server which we can run just like this say npm run start alright and it's going to start a new development server for the react project the the client-side application that we're going to use to write the NFT interface all right so all right there we go there's a starter kit so this has already got some you know markup for us we've got you know Twitter bootstrap the templating framework already wired up you can see you know this is styled nicely already I've got a nav bar up here with a with a title so you know some drop shadow stuff like that so this is gonna keep us from having to write too much CSS ourselves right you know that's what bootstrap is it allows us to create UI is really fast so we can edit the code like it says here at its source component fjs and save to reload okay so that's we're gonna do we go back to this file here source components at the J s and this is going to yeah be the place where right all the client-side code for this particular tutorial this is like I said this is a react component so I'm not gonna belabor like what react is but just a quick primer it's a JavaScript library for building user interfaces you're not Sano react to follow along I'm going to show you everything you need to know but yeah it basically it organizes code into components you can see this is JavaScript class that extends react component and you know there's HTML mixed in inside this return function and we can evaluate JavaScript inside of HTML with these curly braces just like this so we basically mix and match javascript and HTML markup all in one place right these components are files that can be reused and are there to help organize the code too it's the same thing for this react also has a state object which allows us to manage the state of the application like this two lists for example we can add item 1 right now item two all right so how many items are on this to-do list well that's what reacts state helps us manage so we're gonna use this this stay equals this right and we're gonna set this and update it inside of these file okay all right so let's go ahead and do that the first thing I want to do is change the nav bar here just so we can make sure code changes are working so instead of dab University I'm going to call this color token and let's refresh the page go back here alright so color token it's changed already let's gonna make it plural awesome Kogan's alright so let's go ahead and connect this to the blockchain that's what I really want to do I wanna see you know can we create new color tokens from this interface all right there are a few things we need to do in order to make that happen alright so the first thing is we need to connect the app to the blockchain with web 3 so web 3 essentially is a library for turning this web browser into a blockchain browser alright and web 3 is the JavaScript library that allows us to do that so here's the web 3 documentation and this is we're gonna do figure out that getting started you'll see how they do it you know basically what you have to do is get a variable called web 3 that's going to be an instance of this web 3 library ok and this is based on this idea of an aetherium provider okay so theorem provider is something that allows you to connect your theory of network in an our case the etherium provider is going to come from meta mask ok so in order to get started you know you want to make sure that you are connected to your private network which is ganache in this case local host port 75 45 my go to ganache and open it ok make sure that we're running on port 75 45 all good ok so now I'm also going to show private key for the account number one copy it click done again this is not a real account so don't ever show anyone your private key here unless you want to risk losing your funds that's going to import this account into meta mask so we'll go here and we'll go to the accounts and we'll say import account see where that option is import account Dubai private key paste and click import now I've already done this so it's gonna tell me that it's already exists some quick cancel once you've imported they can't you should see it here if you don't go select it but yeah the really important thing is to make sure you're connected with ganache before continuing okay yeah so let's do that all right so let's let's do this let's connect to web 3 inside the client side let's say let's kind of function to do it we'll call it low web 3 and it's going to be an asynchronous function so we're gonna use the async/await pattern just like we did in the tests will say async load web 3 all right inside of here I'm going to create a creative way to load it and I'm gonna do this based on meta Masson instructions so there's a blog post that shows you how to do this I'm not gonna belabor it you have to reinvent the wheel here you can just copy this code from my repository if you want to okay it essentially just says connect to web 3 these different ways so if window etherium exists this is for like modern etherium browsers and then didn't do it this way look for window dot etherium and create a new instance of web 3 if it doesn't exist use window dot web 3 the old way like with meta mask and then do it this way and if it doesn't exist say hey there's no aetherium browser try using meta mask okay so also in order to do that we need to import the web 3 library like this so do that oops sorry all right import web 3 no we should go to our project that's what three is not defined so I see what's going on here sorry guys save that all right open up the console and we're all good no errors or anything like that okay so let's see here let's go ahead and run this load web three function so we've defined it but we haven't actually called it yet I'm going to do this inside reacts lifecycle method called component will mounts async component will mount this will be a wait this web 3 so what this is is a magic function that ships with react components like this and component will mount is always going to get triggered if this component gets attached to the Dom successfully or if it's going to get attached to the Dom successfully you can read about reacts lifecycle methods if you want to more just Google like you know react lifecycle methods but inside if you're basically it's going to load web 3 call this function and we're going to load up this aetherium connection anytime this components going to get attached to the Dom okay so the Dom is just the the mark-up that you see here inside the browser alright so meta mats will soon stop or loading pages huntington network change it's a warning don't worry about that all right so now we want to do is actually get the smart contract okay so i'm gonna create a new function called low block chain data so say oh wait this to load blockchain data I'm sorry having problems here and inside this function I'm gonna copy this just for boilerplate we're going to fetch the smart contract okay and actually make sure that it's connected all right so if you go over here source a bi is color dot JSON this is going to be the smart contract that we're going to fetch out to yeah expose it to our front-end applications that we can call its functions fetch all the colors and also create new tokens okay special tokens and create new choke ins so the few things we need to do first we're gonna you know get web 3's it caused web 3 equals window web 3 k and then we're going to load the account okay so I'll try to do that we'll go to this cerium page web three gesture dr. Oh counts alright so see here were three eath [Music] okay get accounts I think smoking for yep all right so web 3 eath get accounts alright this is going to expose all the accounts that are provided and metamath so this is the function we want to call it's gonna be an asynchronous function this is you know using a promise but we're going to use async await and then it's going to return these accounts so we're just going to fetch all the accounts get the first one from the list and store it in our application ok so we'll say Const accounts equals web three-eighth get accounts wait all right and then we're going to do is actually store the account into the state object inside of react so it counts 0 as since we want this to be the account all right we're going to store this and we can do that like this say this set state account equals you know this first account in that list and that's going to be the account that we're acting on behalf of so essentially like whenever we go to this app we log in with meta mask this account that we're connected with is going to be the account that we're essentially using the app with scammy like the user in this case okay this sets that account counts zero alright and yeah so now I'm gonna do a constructor inside of react just like we saw here looking at the reactions state object see here where's the to-do lists yeah see how it shows you this this constructor this is how you set the default state all right I'm trying to copy this example from react we have a destructive editor here let's hopefully that works let's paste it in yeah okay cool so here's the constructor from the react documentation this is just how they tell us to do it so we cut past super passing the props we're not going to use props too much in this tutorial so don't worry about that but yeah this is the default state I'm gonna take cookies out I'll break this up and for now we're just going to say let's do count County empty string we're gonna add more items to this momentarily all right so here's the account they're going to be connected with with meta mask we're going to set as the state object here and then we can also read it out like this let's do it in the navbar alright so in the navbar my list the accountant like this so you see color tokens is you know here I don't put the account over here okay so I'll leave it like this I'm going to paste in some markup from bootstrap basically this is going to allow us to have a list on the far right of the navbar and I'll just say account here all right all right so account goes here all right so let's actually list it out so you can just copy this example from the source code if you want to but basically it's an unordered list it's gonna be small and pulled right here's the account here and we can read the account with reacts right we can evaluate JavaScript inside this HTML markup like this with the curly braces and we can read the JavaScript out like this say this state sorry now I count all right which is exactly what we just set here so this state is this object right here and the account key is gonna be this value and but when we do load blockchain data let's say this set state we're actually gonna update it - yeah the account fetched from web 3 so whenever this renders the first time if we haven't you know gotten the account from the blockchain yet this will be blank but with the magic of react anytime this account actually gets loaded it's going to re-render the component and it's going to list out the account on the page so boom there we go awesome this is the exact same account that we're connected with in meta masks so we can just open meta mash to verify that let's see the last few 0 or sorry efore see beam we can see if for CB also listed here alright so called tokens here's your account awesome very cool so now the next thing I want to do is actually list out the I want to list out all the tokens that exist in the app so far so basically we're gonna create like a table down here that's gonna show all the tokens then eventually we'll have a form up top where we can mint new tokens you give it a new color click the mint function and do it that way ok so that's pretty straightforward let's go ahead and clear out some of this stuff we don't necessarily need all this code here let's just take out this take out this yes sorry I can't really even copy this for some reason right now this alright so I think that's we want for now yeah awesome so do that I take out the logo save that go back and make sure the page okay cool so we had a good blank canvas to start developing on top of alright so what we're gonna do is say I want me to comment here's this form goes here and then cool so that's how we just come out code fresh that look at the page alright so blank that's we want and then I'm going to create a new credit new row hmm see after main after this div I'm gonna do a horizontal rule and then I'll say div class name equals row I'm sorry so sorry and then let's do text center now say tokens go here awesome perfect tokens go here that's exactly what so he's lying and that's what the tokens are gonna go all right so let's let's go ahead and do it so in order to do that we need to wire up this smart contract to the blockchain to fetch all the tokens so we've got the account we've put it on the page the next thing we want to do is actually get a copy of the smart contract okay so let's go to weather documentation what contract I'm gonna show you how to load a smart country so new contract all right so this is how you get a copy of the smart contract web 3 web 3 eath contract then you need two pieces of information you need the ABI for the smart contract and then you need the address okay so we have those two pieces information let's go and copy this sorry copy this you can see the example here VAR my contract equals web three new eath contract all right yeah copy that go back to load blockchain data all right farm my contract so that's what it looks like I'm going to recode this caused my contract goals new web 3 eath contract then we need an ABI we need an address all right so let's take this and then we'll say Const a bi equals R a Const address equals empty string for now we need to fill these values in we need the ABI we need the address all right perfect so let's do it this way we need the ABI that's gonna come from this file here source a B is color and this technically this entire file is in an ABI it's really just like a subset because this ABI key exists inside this entire object but I mean you can call this you know artifacts or something it's fine so we want to fetch this ABI out of this file okay we can also find the address you scroll to the bottom this artifacts file has something called us here address sorry it's hard to find see networks yeah networks and then 5777 is the network ID of ganache network of a 5777 and then we can drill down into this to get this address of the smart contract deploy to this specific network alright so that's the cool thing about this project it allows you to change networks so if you went to this and went to the main net or something like that you'd have a different address for the smart contract on different networks and that's what this file does it will like basically keep track of the network IDs and find the address based on the network you selected inside of meta mask ok so inside of here we need the network ID to fetch the correct address all right and we need the address and we need the ABI so we need the network ID equals you know empty string so network ID ABI and address because we need the network ID to find the correct address and we need the ABI and the address to do this that's a lot but I'll show you so network ID equals a weight web 3yz get ID to find that in the docs here alright get ID all right well three eath Nets get ID and this shows you the network is connected to inside met a mask so with eath dot nets I get ID all right and then inside the network data that's we want to get say const network data he equals color networks work ID all right and then basically that's going to give us the address it's a network data address all right and then a bi is going to be C color avi and then that's give me the smart contract all right so they're making console.log my contract in this case this is going to be we'll just call this contract alright let's go to the project and look colors not defined that's because we have not imported it yet so we'll go to the top and say color is equal to color and it's gonna be a B eyes continent JSON that's that big file just showed you a second ago save that back here awesome so we can see the smart contract logs to the console here it worked properly so while we're here I want to do one more thing right so if the smart contract isn't deployed to the network I don't want the app to blow up right so we're gonna use a conditional that basically says if Network data you know do all this stuff all right and if not we want to raise an alert it says basically you know the smart contract is not deployed on this network you know so you can't use it so if I go back it still works as expected but if I go to something like I'll say the main net for example it's gonna blow up and it's going to give us an alert so witness that refresh the page and what should happen boom there you go smart contract not deployed to Detective Network so that way our app is only going to run on the specific networks where the smart contracts actually exist okay so go back here all right perfect okay so we've got a copy of the smart contract so now the next thing I want to do is actually load up all the colors from the smart contract so that we can list them out on the page all right so first let's go ahead and create some colors I'm gonna go to the terminal go the truffle console all right so let's go ahead and create a new color - I'm gonna look up a color palette we can make some colors that actually look nice okay so let's do this one sorry I spilled palette wrong color palette I'll stew about color hunt all right I like these colors so let's do this color let's see here which one do we want I like these tokens are these colors we use these for the tokens so click copy that color hex code and then I'll say ok so color parsec contract equals color deployed per sale wait sorry mints and we'll pass in this color all right boom there we go and let's do another color let's do this one you all right this one all right the last thing we'll do this one you all right boom now that should give us some colors to actually list down the page so let's fetch those I'm gonna go inside of here and kill this console.log statement and let's load up all what colors first thing we need to do is actually set the contract to the state this set set state say contract and you can just say contract like this or with es6 you can do a shortcut and say just contract boom done all right so account contract no we're also going to set the total supply which in this case we'll just say is 0 by default and we're also going to list out all the colors which is going to be an empty array alright so now let's load the colors well let's get a total supply first Kanto Dulce ply equals oh wait so contract not methods to the supply call all right let me explain that go to here call see if you can find this all right so there are two types of mahon second let's do methods I'm explain there's two ways to call a function and solidity with web 3c your methods there's call functions and there's send functions all right perfect so basically if you're just reading data from the blockchain you use a call alright and that's with my contract dot methods you do the function name you pass in the function parameters and you put call okay and then if you want to do send like you're gonna you know create a transaction the blockchain you have to use send like this which we're going to do a second so we're gonna create a call method to get all the colors we're gonna do a send function anytime you want to actually you know put new colors in the blockchain so contract methods total supply call if you just do total supply won't actually call the function you get that do this call and then we're gonna assign the result here and then we'll say this set state total supply all right and then next we're gonna load the colors and we'll do just like we did in the test this looks familiar all right I'm basically going to do this similar kind of thing we're going to modify it for own use case this is a before of our I equals 1 eyes less than or equal to total supply I plus plus say color equals a weight so contract methods dot colors dye I minus one call with the modify this covers using web 3 in this case in the test were using truffle contract library and then instead of colors push we're gonna do this set state and then we're going to add items to this colors array so we're going to do this with the es6 spread operator okay say colors and I would say dot dot dot this state colors the colors okay so essentially what that does is the spread operator makes a new copy of this array with the previous array with the new color sorry I know s appended to it alright alright so that should load up all the colors in the blockchain and then I can just do console.log this state that colors to see them listed out all right so we got an issue here let's try refresh make sure the color is not defined see live 43 yeah so this would be Const color all right boom there we go look at the console so here's the colors that we just created in the truffle console these are the same colors from our color palette all right all these and then they're listed here perfect so let's list these out on the page so now these exist let's go down here and say tokens go here we're going to say this state colors map and I'll pass in color key do this let's just do yeah for now as you returned let's just pass in he equals yeah that's just one fertilized I wonder if it'll just let us return the color I don't know we'll find out trying to avoid doing too much markup yeah there we go awesome so they're just listed out onto the page boom perfect so now we're going to do is actually render new elements that work like that they actually show the token colors so we'll say div and then we're gonna put the code inside of here and say div and this we're going to say div color alright oops sorry listicle right here and then we're going to basically like create a div to hold the color all right so all these this is going to loop through and react requires needs to be unique so I had to use key here that's just going to be basically the index of this item on the page that that's how react manages them okay so let's see here I got a got an issue that's because I didn't call return term we're going to format this all right go back to page okay cool so good so now what I want to do is actually space these out so I'll do this with some bootstrap utilities that class equals call em D 3 and B 0 basically that's gonna say i want three tokens per row right and then i want do a margin bottom of three okay perfect awesome so now we can see all the tokens listed out on the page cool so now the next thing we want to do is actually like display the colors themselves alright so I'm going to use some CSS to do this now somebody wouldn't write too much CSS in this tutorial but we need to write a little bit in order to actually display the colors say class equals token all right so let's go to this app dot CSS file so reveal this in the sidebar you can see we have an app dot CSS file already so inside of here I want to create some styles for this token say token and then I'll say height equals 150 px with 150 all right say border radius equals 50% that's basically going to create a circle that's width and height the 150 picks and then display:inline-block it's a background color let's say let's make them black for now so we should see a bunch of black circles on the page yeah boom there we go awesome so let's actually fill this in with the real color of the tokens so let's take out this background color we don't need that we're gonna lose that here that's fine but we're going to add it with the corrected value so just like this so we'll say style equals this object will say background oops color color boom easy boom there we go awesome so there's the individual colors from this color palette that we generated for our token awesome all right so we got some warnings here in the console this is saying that a class should not be used we should just class name instead so that's my fault yeah I think I've only done it twice so let's fix it that's a class should be class name that's because of the conflict with the react class name it's a it's a idiosyncrasy of the react framework you have to use class name instead of class and your markup let's see if it still works should i refresh the page yeah boom there we go so there's the tokens awesome this that's the first half of the equation now the last thing we want to do is wire this up to where the we can Mint new tokens from this UI so that's we're going to do the form here okay so let's go ahead and create a form all right we'll say do say a h1 issue token all right your token now let's create a form and that is form we're going one input you now let's just do it this way and this is going to be type text so I'm going to break this up and I will say class name form control and be one this is a bootstrap utility and then I'll say placeholder is equal to example f-f-f-f-f-f-f for white alright and then we'll do a submit button so we'll say input type equals submit class name cuz button button block BTN primary so I'm going to break these up just like I did there you you and then lastly I'm going to say value mint that's gonna change the text on the button alright perfect save that go back to page and let's see if it worked you all right there we go so we can see our tokens here with the form and now we want to do is wire this up so that whenever we click issue token it'll actually create a new one okay so go back here and do that first thing we'll do is use an on submit handler for this form yeah I'm gonna say on submit and we want to pass in a function here I'm going to evaluate some stuff inside of here okay so this callback is going to have an event that's what's going to happen whenever submit is triggered so we want to prevent the default behavior essentially normally when you submit a form it triggers a page change so we don't want to change the page that's what we do an event prevent default and we're gonna get the color value and we're going to pass that into a new mint function that we're going to create inside the component okay so first of all let's track the value of the color here we did that was something called a rest this is specific to react so ref equals I'll see mints all right color sorry and or in our selections calls input and then this this color equals input alright so now we've anytime there's input changes we're going to keep track of the color that's actually in this form field here with something called a ref okay so now we say Const color equals this color value that's how we keep track of this dot color so this dot color equals input alright so now let's say this dot mint color alright and we haven't created the mint function yet but that's we're going to call this dot mint passing the color okay now the min function is where we're going to basically call the smart contract function to create the new color inside the token so we can create a new in a function like this menticles so we're doing mint is equal to an anonymous function here called color and we'll say let's just let's just log out the contractor first so stare console.log color make sure this is wired up let's go back to the page say I'll pick a new color from the color palette let's try try this color palette here copy this and also make sure you use these so say mints alright so we can see the color logged out to the console here right so it's wired up properly so now we want to do is actually get the smart contract and call the mint function so we can do that with this state contract all right methods mints passing the color and say sent alright so explain that so going back to the web 3 here my methods that send anytime you want to you know create a new transaction on aetherium you have to use sent so we used call before when we were just reading data off the blockchain but when you're right into the blockchain you have to use sand and you have to give it some some specific values like who it came from because someone has to sign the transaction when it goes in the blockchain you're gonna see it side with meta mask whenever you demonstrate it but in this case it's always going to be from this state account all right boom color send from this dot state account all right and then I can just say once all right receipt whenever that comes back we can say receipt and I can update the state with the canoe color say this set state colors equals to pop up this state colors and color alright so this should work let's just try it refresh let's do a new color here let's just do this one make sure you put a pound before it alright so I made a mass confirmation popped up firm all right boom there we go awesome it worked let's do another one from the color palette let's do the whole thing confirmation came up firm awesome almost there copy these and oh we're mad masks oh yes it firm and then one last one let's get this final color palette in here boom there we go we've got you know eight color tokens successfully minted with this client-side application alright so congratulations you have successfully created your own non fungible token with the ERC 721 standard creating your own app for it where you can issue new tokens so there's a lot of different directions you could take this app from this point forward right you can create your own nft you know you refactor some of this code in the smart contract to work with like you know metadata maybe instead of using the array for the color or something like that you know here we factor this where only you know the owner of the contract or something that the mentor role could call the mint function so like right now anybody could do it there's a lots of things you could do you could change the type of token doesn't have to be colors it could be your own unique ERC 7:21 token whatever you want to do right the possibilities are are kind of endless with this right so that gives you the idea on how to get started with NF T's how they work how you can create one quickly I mean you can also just import from open Zeppelin rather than pulling this code into the project yourself like I did right and you know also full disclosure on this like somebody could do something it's not a color here like they could say fubar and mint a token of fubar color so if this were like you know an admin you do have want to have a lot of control to make sure that like something but that was an actual color value got minted and said if you're not like some random string like doggy all right so there's lots of different things to consider but that gets you started okay so hope y'all like this video you can find the source code down the description below and again if you're serious about coming a blotching developers you drop my free training on my website over adapt university comm ford slash bootcamp alright so subscribe to the channel like the video and until next time thanks for watching dap university

Channel: Dapp University

Views: 197,769

Rating: 4.9418445 out of 5

Keywords: ethereum developer, ethereum solidity, dapp ethereum, ethereum app, ethereum development, ethereum dapps, ethereum application, ethereum tutorial, ethereum mist, decentralized applications, ethereum web3, dapp, ethereum contracts, solidity, programming ethereum, ethereum programming language, ethereum coding, ethereum contract, ethereum code, ethereum virtual machine, ico

Id: YPbgjPPC1d0

Length: 110min 10sec (6610 seconds)

Published: Wed Sep 11 2019