Elena Nadolinski: Build your own CryptoKitties (Non-Fungible (ERC-721) Tokens) | ETHDenver

our next speaker is Elena she's joining us from San Francisco and she's talking about one of the more interesting things to have happened in the past six months the advent of the ERC 7:21 standard which is sort of an outgrowth of all this wonderful crypto Kitty stuff and can do so much more so Thank You Elena all right thank you and thank you for fixing the ad that was a close call yeah so it just said this is a pretty interactive workshop I just I show me some hands who knows what cryptic kitties are awesome who knows what crypto celebrities are whoo okay great so this is gonna be a workshop on how to basically build your own so if you guys want to follow along I go ahead and start installing things and now that we have internet this is great if not then you can just watch me live code so to understand what non fungible tokens are let's understand what fungible ERC 20 tokens are so these are these are some of the examples of the existing ERC 20 tokens I'm sure you can recognize some of them and there are many many more and so what is a or C 20 or C 20 is just a standard it's an interface and if you abide by the interface and make your contract follow those methods that it makes it much easier for marketplaces exchanges and other taps to actually interact with that with your contract and so if you wanted to I guess I'm too short so so if you wanted to know what area C 20 is this is what it looks like it's a pretty simple standard interface okay okay so then what is air C 721 here - 721 just like urea C 20 is an interface it's it's a standard and it's not set in stone right now it's still something that's being developed but if you look at the actual interfaces we have it right now it's also very simple and it pretty much looks a lot like a or C 20 so then now that we know what that means what exactly is not fungible so none fungible are basically assets they're just English a ball so think like artwork or land or concert tickets or baseball cards so for example not all land costs the same land in Manhattan is much more expensive than somewhere else same with concert tickets a Beyonce concert tickets might be more expensive than something else artwork there are many paintings in the world but not all of them cost the same and so for non foreign jables that are collectibles in real life we have a lot examples too I mean those beanie babies on eBay one for $3,000 at some point I imagine the gathering card that's the most expensive card it went for right now is valued at sixteen to twenty thousand dollars so and so now obviously we have non fungible zone the blockchain too and so the very first ones were crypto Punk's cryptic - basically came into the scene way before a RC 721 was even a standard they had a very novel way of actually storing all 10,000 crypto Punk's in the contract that could never be more they can bring a lot less and proving ownership through a smart contract and then cryptic use came on the scene and they pretty much changed I changed kind of the entire the entire game scene they were the first to actually implement the RC 720 on standard obviously you know they wrote they brought a lot of attention to the space I started a lot of other projects and so after cryptic kiddie has had a great success there are a lot of copycats pun intended that came after so if your mom came after they were kind of blamed to be a ponzi scheme that's ok tulips came after I think I crypto fighters many many many others and now we're kind of in this current fad of crypto celebrities so right now if you wanted to go purchase crypt celebrity you can buy Donald Trump last time I checked he was 151 either so there's like a lot of money basically in in these scripta collectibles so what comes next I don't know maybe after this hackathon the next thing is gonna come out from one of you guys who knows so I wanted to actually show you how to build it and we're gonna do a very small example of our own a RC 721 token we're gonna be minting colors just like that I chose colors because you can mint the ID and then the ID actually represents the hex ID color ID so we don't have to worry about any storage and yeah your browser can just understand what what color you just bought so if you guys are following along we're gonna be using truffle truffle is a very useful tool to actually compile migrate deploy and test your contracts we're gonna be using tests or PC as your local node we're gonna be using open Zeppelin to actually inherit something implement implemented contracts this is really going to speed up our development so I highly recommend you use them and then we're gonna use web 3 metamath to actually interact with the UI so if you if you get close my repository all it has actually it's just the the UI part we're gonna be doing everything else right now so without further ado let's go to the terminal that's how the terminal that's a terminal okay so one step that I've already done is I did truffle in it so truffle in it's basically I just gives me three directories which is migrate test and contrast and so if I go to my editor here I have the things that truffle and it has given me contract migrations test which is empty and some config files okay so the first we're going to want to do is we're going to actually want to create our contract so we're gonna do a RC 71 that's all great and so the first thing that you have to do is basically say okay I'm going to use solidity and it's going to be of a particular version great so now we're gonna do their contracts see colors the FC 721 and we're gonna say that it is ER see token sorry rc7 21 token and ownable and where am I taking this from I'm taking this from open Zeppelin so let's import that so if you do npm install you will get open zeppelin Zeppelin solidity so we're just going to import Zeppelin solidity slash contract slash tokens 21 / your c7 21 tokens soul okay that's kind of a mouthful so and then we're going to do pretty much the same for ownable except it's gonna be a sponsor X slash ownership oh and a ball dot soul and if I make a typo please let me know okay I made typos by not making semicolons okay great so the first we're going to do is we're going to give it a name and symbol so we're gonna say string constant public name see colors great and then let's also give it a symbol and the symbol is gonna be hex because colors are in hex and now we're ready for a constructor so we're not actually gonna put anything in the constructor but if you wanted to kind of initialize your contract with certain things this is where it would go so we kind of set the state okay so now that we have name and symbol technically they're public so we don't need this we're gonna go ahead and do it anyway so it's gonna be public pure meaning that it's a function that doesn't have access to any dynamic storage and it's gonna return a string and we're just going to return name and similarily we're going to do the same for simple nothing exciting okay so now that we actually wrote some code let's actually test it because that's kind of the most important part so in your test directory we're gonna make a new test file we're gonna call it colors CRC 7:21 test oops JavaScript so this is gonna be land of JavaScript now so because we're gonna be using truffle we get a lot of really cool things for free so for example we can do we can do contracts definition and we can just load it from something that truffle provides artifacts dot require colors here is C 721 so great so now we have our contract definition so because so truffle gives us mocha and so they've given this this this contract function that basically lets us test contracts very easily and we're gonna give it accounts so counts here is coming from whatever test network you're going to be using so by default truffle uses Ganesh test RPC and so it gives you ten accounts of 100 a third in each account so we're gonna go ahead and use that so we're gonna say that we're gonna get at owner which is the first account and let's and we're gonna have a contract instance so right now we just have a contract definition but we haven't actually deployed it yet so let's go ahead and do that so we're gonna say that now park contract instance so we have to use a weight and that's kind of why I made you guys install node b8 because whenever you're interacted with a contract to kind of have to wait for it to deploy you have a question thank you is that what you meant fantastic Thanks great so now we can get this we're gonna make a new version of this and so here I'm saying that from owner and because we because we inherited ownable here I basically get all those functions for free so I don't have to worry about who's the owner of the contract because I inherit all those methods from there okay great so now we have our contract instance let's actually check with the owner of it is so owner is owner of contract okay and we say so let contract owner let's actually check what the contract owner is so we can say okay who's the owner here and we're going to check that they're the same so a star equal a contract owner is indeed owner okay great now that we have some code that's actually what was that oh thank you all right awesome thanks okay let's see if this works okay awesome it worked so but our contract is kind of boring right now it's actually not doing anything so let's make it do things let's actually make it mint things and we're gonna mean we're gonna make colors but we have to give it some functionality to do that because it's just just using open Zeppelin doesn't doesn't give us for free so let's actually mint things we're gonna make it a public payable and we're gonna use a private method that we inherited from open Zeppelin mint so it's gonna take who's the owner we're gonna say that master Thunder is the owner and what is he uh the owner of he's the owner of the color a team okay great now that we have that lets actually test it so mint okay so see so because here we're using unsigned in 256 in JavaScript there is kind of oh there you go in JavaScript there's no such a object so we actually have to make an object and so with truffle comes with what with web 3 so we can make a new web 3 big number which will give us a basically non-scientific 6 int ok so let's say let's say that it's opening to use one and let's also check the transaction so that's actually mint it so I'm gonna say that transaction equals the result of what we're gonna do and what we're gonna do we're gonna mint we're gonna mint the token ID and we're gonna say that it's gonna be coming from the owner okay and then a couple things that we can test here we can test that the transaction has a transfer event so part of the requirement is that every time you mint you also send out a transfer event and these are kind of important because these logs are kept on all the knows and it's a very easy way to kind of get historical information about what happened with your contract so I think we should definitely test that so transaction has correct events it's gonna be in a sync function okay so we'll assert that transaction dot logs should be the first log dot event should be the transfer event okay let's see if that worked okay it didn't work oh it didn't work as I forgot to save okay cool it worked so we made a transfer event okay cool so now let's see if the owner is actually the token ID owner so we'll say owner is token or color ID owner okay so we'll say token owner a contract instance dot owner of and given the token ID that should be it so we'll assert that the token owner thanks great it's actually the owner okay let's see if this works great it works okay so but it's still kind of boring because we kind of remain teen tokens for free let's actually let's actually add functionality to pay for your for your tokens let's give it kind of a constant starting point let's say that the starting price is going to be point zero zero one ether okay cool so now we're going to require that the value of the best is gonna be greater than or equal to price so right now our touch would fail because we're sending we're not sending any money when we mint so let's see if they properly fail great they failed so let's actually when we mint the token let's actually give it some value okay so here I'd say let price equals three big number so the problem here is that we need to actually represent this number in a way and I don't know about you but I don't know way of the top of my head so we're gonna use a function called two-way and let's say that's equals so two-way we're gonna give it point zero as you want ether basically okay cool so now when we mint we're gonna send not just the own thick who's supposed to coming from but also the value and it's a gas price to zero just so we can test better okay let's see if it works now awesome cool okay so that's cool but it's still kind of boring okay so let's make a functionality where someone can claim your token so right now you can't claim you can't mint to token to the tokens of the same ID but maybe you can steal a token so you can't let's say you can you can claim a token and let's say that you can only claim it for a price that's bigger than the original price so how do we do that well first in order to do that we have to kind of keep track of all the token IDs and all the prices that those token it used correspond to so let's do a mapping so we're gonna do mapping of the token IDs to the prices and we're gonna call it token to price okay thank you okay cool so when we mint we're just gonna add it so we're gonna say that color ID now it's gonna have a default starting point of price and when we claim we're gonna have to claim it for something more so let's make a function to figure out what that more it is so let's say get new price so given the token ID it's going to let's make it a view and it's going to return a new price okay so the way it's gonna do that oops let's get old price which we can do through our mapping and let's calculate the new price oops by saying that the new price equals the old price and let's raise the price by like 50% so the way we do that is we would actually multiply it by 50 and divide by 100 okay and then let's return it okay cool now that we have that when we claim we have to say okay let's figure out the new price first okay and let's make sure that it's sending the correct amounts so message that value is greater than or equal to new price okay once all that's good we can grant we can use one of the functions from open Zeppelin's implementation phrase I'm trying token which is clear and clear approval and transfer so the first is from whom so owner of the original owner of color ID to the person who's actually making this transaction and what at the color ID okay so we wrote a lot of code let's actually test it now because otherwise it's kind of a black black box what happened okay so let's the second person can claim okay so we're gonna say second person is contract instance actually sorry the second person so we have a bunch of accounts it's going to be just a second account okay and now we're going to claim so contract instance claim what are we claiming we're claiming that same I guess I call it a token ID token ID and we're gonna say it's now from the second person oops and if we need value bigger price we haven't made that yet so let's go ahead and make it bigger price equals um three number web 3.2 e and let's say now they're gonna buy for one ether because I don't want to do the math okay cool so now that in theory the second person that claimed it let's actually test that so let's say that we're gonna say who's the new owner now so that token owner equals the weights contracts instance donor of token ID and let's see those are the same so token owner it's now the owner okay let's see if this works it probably will fail but who knows okay so it didn't actually work oh sorry awesome so it actually but logically failed correctly Thanks okay awesome so one more thing so when you actually bent or when you claim let's say the person sent you a lot more money than it was needed so in theory will be want to be good people and we want to give back the money if they overpaid so let's go ahead and do that so let's say that the excess is going to be messaged about you - price okay does anyone see a problem with this anyone anyone okay so the problem with some doing something like this is that everything's well masters out value is actually an unsigned int and price is also an unsigned int so whenever you're doing is to like unsigned into minus something else you've wanted to do at risk of underflow meaning that one minus two doesn't actually equal negative one because it can't so it actually equals 99.9999 so you could potentially deplete the entire your entire contract so you can easily either use huh that's true that's true but let's just let's just not assume that let's go ahead like whenever you do a subtraction either you safe math or do an if statement so let's just go ahead and do that and you're totally right but okay so we can only do that when we know that the result is going to be positive okay cool and you can test that because you can get the balance but we're not gonna do that because it's kind of a lot of work so so great we're actually kind of done everything is passing so let's actually deploy this now so we'll deploy it to our local network sorry what oh yes sorry we're not actually doing anything with it okay yeah that's actually give it back huh oh yeah thanks okay good point so now when we claim we actually want to update the mapping so right let me go ahead and finish this good catch okay so when we do this we have a new price let's go ahead and update the mapping oops okay let me make sure and I can further test this but let's get to the actual fun part okay cool so let's actually migrate this to our local local node so they were going to do that so truffle gives us a pretty easy way to do this I already gave us directory with all our migration files so we're just gonna create another one it's gonna say deploy colors it's gonna be pretty simple so first we're gonna in it once again need kind of our definition it's gonna be artifacts that require colors yeah I see 7:21 dead soul and this is kind of JavaScript stuff so this function so this kind of just tells it's truffle what exactly it's a deploy well there's okay um so okay but no it doesn't actually we haven't set up a truffle to actually understand what networks we want to deploy so let's actually deploy to our local network so one of the other requirements is to get test RPC so if we run test RPC I'm gonna save this for future reference so once it starts it gives you localhost and with the port so let's go and say okay we have these networks we have the development network it has a host which is home has a port which is was it eight five four five and it's gonna match to all network IDs so wild card here okay cool so if we did that correct if we did that correctly when we do truffle migrate we should actually see something migrate here okay cool our contract was created so now if we actually did everything correctly we can actually run our website great so when you start a test RPC it gave you that demonic so we're gonna go ahead and use it that wasn't it oh no that was it okay we're gonna use this demonic to actually get our accounts so that's our mnemonic you can just make whatever password so now we should see okay so now we're rich we started off with a hundred ether we lost some because we actually deployed the contract and now we came into our color okay doesn't work as well and okay one sec ah let me make it not fullscreen okay and now we can Minter color great and then maybe I want to mint this one too and maybe that one okay cool so when I make a new account okay so those are still transferring okay so when I make a new account they're gonna be gone because it's a different account and this account is gonna have this pink color cool so if I go back to my previous account which to have those three colors that I minted and the other one has just that one cool okay and that's actually kind of it like we just created our own er c720 on token with a very basic UI so yeah so kind of like great so what now so cool so right now because these are fungible tokens and it's kind of hard to visualize them I mean I use colors for a reason if you wanted to do this in real world cryptic --'tis for example they have a centralized sort of mapping of ID to image Cooper's libraries has the same crypto Pung just using a completely different thing so how do you actually like see what you just made and so open C is a marketplace for non fungible tokens if you actually do something as hackathon with unforgeable tokens when you launch it to rinkeby or mint or maintenance you can actually see your tokens by going to a URL like that yeah and if you guys only have any questions with opens integration go talk to them Alex and Devon are over there yeah and that's it good luck with a hackathon guys [Applause] do you have any questions yeah yeah so I don't know if these if I can make these slides available or not but yeah the source code it's all there it's on my github my github is lean the bean and there's two repositories one is called colors and when it's called colors finished so you might want the finished version lean the bean that's right any more questions comments oh I'm sorry okay the question was kind of like what's the difference between opens up opens up 'ln and truffle so truffle is kind of a tool to let you compile migrate deploy and test your contracts open Zeppelin is kind of a really fast way to get a boilerplate so they already implemented a lot of these standards they have an implementation every year see 2721 and a bunch of others so it's like a great starting point any more questions all right thank you so much