Generating Dynamic NFTs On-chain using SVGs & Chainlink with Patrick Collins

all right we are live and we should be on twitch youtube and periscope so hello everyone and you know we're going to start seeing some people showing up and uh and then we'll really kick it off but until then i guess i just want to kind of give an overview what we're going to be talking about uh today um we're joined by pranav from the graph protocol who i work with at edunode and uh patrick collins from chainlink and um you know i can't really explain what chain link is as good as patrick can so i'll probably let him do that but we're going to be basically doing our demo or patrick is going to be doing a demo of how you can generate dynamic nfts um in a solidity smart contract using you know um chain link and svg so it's a really cool idea and a really cool thing to to see and understand how you might be able to kind of like apply some of these ideas and in different ways and stuff like that so i'm pretty excited to see how this how this turns out so um we have we have a bunch of people here now so let's go ahead and i guess get started um do you want to give an intro patrick and then i'll ask pranav to also do the same yeah yeah for sure and i was just uh retweeting your periscope here um saying yeah we're gonna do some really cool stuff we're gonna we have a really cool tutorial for everybody here um doing some really advanced nft pieces but uh yeah my name is patrick collins i'm a developer advocate uh on on the chain link protocol so i i love working with chain link i love working with smart contracts solidity uh this is what i do day in day out um i absolutely love this space uh and really excited to be here with uh with matter and pranav um who who i've known pronoun for a while now uh we've we've synced for quite some time and really excited to sync with natter more because his uh his videos are phenomenal if you haven't seen his full stack ethereum uh youtube video it's it's great definitely go check it out um but yeah so i i i love smart contracts but in particular definitely an oracle expert anything um that is off data any type of data you want to work with that's off chain or any type of external computation really anything outside this this um this deterministic blockchain that we work with that's where oracle's come in and that's where their power really shines so uh in the demo we're going to show you uh everybody here today we're actually going to be pulling in pricing data from the real world to influence what our nft actually looks like which is going to be a really exciting so sorry i droned on uh pranav all you man hey so nice to be here with the two legends of you know the influence of development web 3 ecosystem so anyways i'm pronouncing i am a solution engineer at agent node which is the initial team behind the graph and now one of the three core devs working on the graph protocol indexing smart uh you know everything that's blockchain possibly when you know when when everything goes west everything is like on blockchain and we have decentralized future it is possibly the the google of the future because it indexes in every sense all right that uh i've been uh working very closely with nether because we are in the same organization you know sharing same values of decentralization and web3 and believe in the web3 stack very very strongly and also i've been in touch with patrick for a very long time talking about chain link and its role in making web3 stack and decentralized infrastructure and you know applications the reality awesome yeah and um pranav you also worked with polygon before the graph right and polygon is one of the prop projects that i've been pretty interested in so i thought that was pretty cool yeah that's that's also something that you should work with and they are also like you know building something for ethereum and web3 stack in general so always been a fan of web3 stack and you know different different infrastructures that power people to use and build decentralized application and making decentralization a reality yeah and patrick i actually learned um some of the stuff that i know when i was getting into the ecosystem from a lot of your videos too so um if you want to learn about building anything in solidity or adapt development check out his his content like videos i don't know do you have a blog or is it mainly video stuff yeah it's it's pretty much everything so blogs videos um check out uh if you guys i think i can i can send them uh you guys the message right i can uh yeah you can pop a comment and it should go to all three platforms that's my twitter um it has a link to uh alphachain.ios blogs i'm on medium youtube dev.t.o uh the chain link uh blog of course kind of all over the place so tons of tons of resources there okay cool oh i'm sorry go ahead sorry uh also like you know just just adding that if you want to like explore the you know the the humor side of javascript check out patrick's videos he's hilarious talking about javascript and his love some javascript yeah that's uh luckily we are going to go over some javascript today um and by luckily i mean unfortunately but you know so yeah so if anyone's joining now we're about to do some demos patrick's going to be doing a demo showing an application and it's all open source i believe how to kind of build out a smart contract that generates dynamic nfts using fg sdg and chain link but before we actually get to that part um i just want to mention if anyone is watching you have any questions if you have any comments throw them in the chat we'll get to those for sure and uh looking forward to hearing you know what other people have to say so like right now nfts are kind of like really hyped right now and i'm sure they'll go through like a hype cycle like they're really you know hyped right now and who knows what's gonna happen six months from now or a month from now but um a lot of cool stuff happening so ken do you want to like just give your thoughts around what is the what nfts are and like how they fit into the whole crypto ecosystem like either one of you like everyone here is like pretty interested in this space right now you know give you a brief as to what i am looking for in nfps i believe you know it all started with a hype where a red tile got sold for one million dollars and you know let's say a crypto punk with a mask on it got sold for 11 million dollars and it was very much related to numbers but if you go on the core fundamentals you will understand that nfps is nothing but storing something very unique on the internet that's the most fundamental level of thinking about non-fungible tokens before this before web 3 before blockchain in general it is not possible to have something very much antique which is which is having a store of itself on the internet you know uh using this concept so this is something which is very new that the world has come up with and i would say as we go digital as we move from you know the physical world and accelerated why you know the the the god's disease covered we will not just have physical antiques we'll also start getting into digital antiques and things that require uniqueness in their order which is not controlled by anybody so for me non-fungible tokens in general is something which is internet's unique uh creation that's that's the first part while we are talking about today or the thing which is most hyped today is digital art and that's not the whole of nfps but i'll be you know much much more focused here because the currently the the whole ecosystem of non-fungibility and you know this this particular space is exploring this this particular paradigm and what i believe in is that we have just got started even in this particular thing i can see definitely there is a lot of you know mainstream celebrity adoption of non-fungible tokens and those kind of things but i still believe you know things like hash mask with a lot of innovation in contracts and you know making art such a antique and unique contract based code based thing not getting so much success as uh something which is let's say you know or maybe crypto punk or something like board yeah api is something to do with you know we are still very much early and web 3 in general cannot be run without a very good community you can be the best innovator in the world but if you don't have a community you know evolving through it and understanding the value of that particular product you will not be able to make it to the grounds of where that option has to be this is the second part and the third last part is what i believe in the future of you know non-fungibility in general i believe with vitalik's vision of you know socialized social space in in ethereum coming together and in blockchain many social medias and everything coming together non-fungible token will have even more significance and we'll have to be you know very much uh alive to see how it goes so pretty excited yeah likewise it's just kind of a crazy advent one of the one of the biggest things for me is um it was always very difficult for me to understand like how artists can get paid in the digital age when people can just copy paste whatever they make uh and so to me at least kind of from the from the smallest piece you know this is a way for artists to finally really get paid um for the amazing content that they they create in the digital world which i think is absolutely fantastic and uh nfts actually do even more than just art right it's just a smart contract standard so it can be ticket stubs it can be um like randomized receipts it can be kind of really whatever you want to do that kind of fits into this this unique token standard so uh yeah also just crazy excited for the world of nfts as it's exploding right now too so yeah totally and like um i'm kind of seeing like a correlation sometimes between the ethereum price going up and and like the nft market like chilling out a little bit and like today you're kind of seeing that a little bit like uh like ethan's up and the nft market's like not as like i feel like as crazy like today as it normally is or something i don't i don't know if that's just me like um portraying that but um someone like i watched uh a talk or i saw someone mention that nfts kind of bring digital scarcity in a world that there was no scarcity in the past and that kind of made a lot of sense to me i think some of the areas that i'm extremely interested in along with some of the stuff that you're talking about or maybe around um like gaming and stuff so like axey infiniti is a really really good example of how you can kind of um take the model of something like fortnite where you're buying all these skins and all these v bucks but when you're done using them like they don't go anywhere you kind of like lose all that money or you lose that value um and then uh instead something like actually infinity where you're kind of like able to not only keep the items that you're purchasing but also like resell those things and they go up and down in value like a physical asset would you're kind of bringing value to everyone participating in that ecosystem and it just makes a lot more sense and it seems like when you think about it like would someone rather spend the next six months of their lives like spending time and money on something that's going to go down the drain when they now have an option where they can actually hold on to some of that value and logically it just makes so much more sense and like that that this is now enabled it seems like a lot of games are going to go that way and i saw a tweet by the the head of gaming at youtube that kind of like was very very bullish on on nfts and he also was kind of echoing this sentiment so i think you're going to see a lot of games like taking advantage of this and then to me also um real estate like i think in the future being able to kind of fractionalize real estate with nfts and erc20 tokens will open the barrier will lower the barrier to entry to a lot of people that are able to kind of like buy into smaller shares of real estate and a more on a more liquid market um and and participate in the economy in ways that they weren't in past so um all that stuff is interesting also community stuff like um what you saw with board api club where they kind of raised almost 100 million dollars in like an hour or some crazy thing like that um now they have like this intellectual property that they can use to build out all kinds of stuff gaming um like you know um clothing you know um maybe a a video game or something like that you know maybe maybe they'll do like a tv show like they have this ip and it's very valuable it's really well known and they have top celebrities kind of like using it so like all this stuff is is all happening at the same time and again this could be some like hype cycle that you you know kind of goes away six months a year from now but i think that the fundamental things that are happening are going to stick around and you'll see like ups and downs and things will get crazy and they won't get crazy but overall there's a lot of interesting things that are happening that are kind of going to build upon what you see happening today at least that's kind of the way i look at it i think the board api's thing that you're talking about and the crypto punks in general is more so a cult it's more like you know if you have a board api like you do neder i would love to you know ask your experience of having it and uh you know the thinking behind making it happen but without taking much time i believe that you know board apic and crypto funds in general is more like making a cool club that you know we have this and this is like that's why we are the ogs of the web 3 and the the you know decent lives community and we are a cult of people who do want to like if you even talk to the board api's person's founder he has that views that you know when it is 2030 and everything is on blockchain and we need these specific peoples who are bored of you know those web 2 guys we would create this club we will go into that particular art room and talk about it so this is this is really interesting and you know definitely something related to cult community getting very strong not just physically now but very much digital interested in what you say uh you say cult in a positive light that's that's uh i'm with yeah there's definitely like a a very very strong following i would say very very strong or maybe maybe call it you know we can go with cold that works too so uh do you want to give us an overview of the project that you're going to be um kind of know today and walking through let's do it i'm going to go ahead and share screen here all right um so i can do window right so it's going to be the whole thing oh whoops oh we lost pronoun okay cool all right so i do want to give a brief overview of nfts if you're brand new to nfts and uh hopefully i'll be able to do this in maybe 20-25 minutes uh please ask questions everybody who's watching um everybody here is smart contract experts happy to answer any of these questions but uh for those of you who are unfamiliar when we're talking about nfts this nft stands for non-fungible token right and that's just that's just kind of a fancy word meaning it's unique right each one of these nfts is different right they're unique tokens here and all an nft is is a smart contract that has specific functions right so when we talk about erc 721 or eip721 you'll hear these uh a lot if i can zoom in a little bit here come in a lot here um this is the eip721 this was the original proposal of what it looks like and it kind of explains here's what this idea for this nft is and boom it gives this interface which says okay every of t needs to have a balance of function an owner of function uh safe transfer from all these different functions right and let's say hey if you have these functions congrats you're in nft now the important ones that we're going to be focusing on is this thing called a token uri so when we're working with these nfts and we're going to visualize them we need a way to uh to visualize them and see what they look like right so when we're talking like like board apes right for example um the board 8 yacht club they have a token uri that points to some universal resource uh identifier that's what uri stands for uh which which i'll get to in a second that says hey this is what this thing looks like and this is the key function that in order for us to show different images we're going to have to manipulate this function here so that's essentially what nfts are and this token uri is really just some type of url right um some type of url that uh gets a response that looks like this that has this json object response and it's gonna have a title or a name it's going to have some attributes on it's going to have this image uri thing right so this is this is essentially what it looks like um i've got a more kind of up-to-date in-depth guide here i just posted oh let me let me send you the uh the friend link i'm posting it in the chat here if you guys want to read my little bit longer article on this that's the sorry the second one is the more up-to-date one um but there's this thing called uh this image uri so here's an example of of some metadata um of that that will be um that's the token uri right this is gonna be what the response is and in this there's an image section something like this uh another uri that says hey this is what this image looks like right and so this is what will show up on openc or on any of these nft marketplaces when you look for it uh now we'll get into how this image uri is a little bit tricky uh in just a second but let's let's go ahead and talk about what we're particularly going to be working with so the project that we're going to be working with is this repo here again i will post this in the chat uh it's called it's at my github patrick alpha c chain link the graph and what we're going to be doing is we're going to create an nft whose token uri changes or the image changes based off of some outside data or some outside parameter so here is an example of what this nft is going to look like on openc right so this is open c this is on on the ring b chain which is the test net of ethereum and basically all this nft is going to do is it's going to be a thumbs up if ethereum is more than two thousand dollars or a thumbs down if it's less than two thousand dollars so we can see that it's thumbs up so we know that it's it's more than two thousand you gotta pump those numbers up i think it's like double that now yeah oh yeah what is what is price oh we could check the nft directly see the price but yeah uh what is it three three thousand seven all right so so maybe i should have done uh done like four thousand for the demo here and see or actually we can even do that uh when we deploy we can oh good boy uh we can deploy uh we change the parameter 4000 and we'll see that we'll see that thumbs down here but so this is what we're going to be deploying uh and this is really interesting because in our code if we go to our contracts we have this feeds nft.sole hopefully everyone can see this okay we're going to have again this token uri function because every nfp contract is going to have this token uri function and it takes a token id as the parameter so every uh every nft of this type of this nft feeds type is going to have a different token id and this is the function that's going to return what the image looks like now we have some logic in here that basically said that polls in the price using a chain link data feed which if you want to learn more about how to get that in definitely check out docs that change that link go to get the latest price um a really simple contract is here you can hit deploy this contract using remix there's even kind of a basics tutorial with a video that will walk you through if you're brand new to smart contract development walk you through everything here but um in any case we pull the price in we pull the price of ethereum and then what we do is we say um okay uh we'll we'll set our image out let me zoom in just a little bit here okay i want to i want to um jump in real quick like where where does the the data come from chain link like how does that data come in is it like an api call you can't really talk to other apis from smart contracts yeah how does that work um amazing fantastic million dollar question here so there's uh with without going too deep into kind of the longer answer um you're absolutely right like blockchains are deterministic systems so they themselves can't make api calls they can't do like an http get in http post um so what they actually do is they have um you can actually uh emit an event this is called like the basic request model that i'm going to briefly go over you can check this out in the docs as well you can omit an event that these nodes are listening for and in that event will define what data that uh the um that the contract is looking for right and so a node will get that and return some data uh in a second transaction right so this is this this quote-unquote basic request model is a two-transaction process so one transaction you omit that event saying hey chain-link node give me some data i want some or some external computation or whatever and then a second transaction it will return the data um back to the contract now um it gets a little bit more complicated and and much much safer more gas efficient and more really cool uh when we get to this thing called off-chain reporting which is a much more advanced version of this so uh in this model and this is kind of the current model of these data feeds that i'm going to talk about in just a second is um this uh this request basically happens but instead of it going to one node a an entire decentralized network of nodes actually pull data and they talk to each other and they reach a consensus on what the data is off chain so for example if we look at fusd this is kind of a visualization of one of these decentralized oracle networks we can see all the different oracles to the right here uh hopefully i'm zoomed in enough and each one of the answers that they're uh responding with so so there's kind of each one of them has their little logos here we can see kind of a little bit of a history of the data feeds and we can see each one of these nodes and their responses so onenote has they all have slightly different responses because they're calling these apis at different times now the really cool thing about offchain reporting is if we look at this gas price section we can see that most of these have blanks and there's only one that has a gas price that's because together they reach a consensus and they uh and choose a leader to actually send the transaction uh by a turn-based mechanism uh now they all cryptographically sign their answers as well so whoever sends it can't actually manipulate anything uh and then they're also monitoring the network to see ah somebody hasn't responded in you know x number of minutes i'm gonna jump in and respond um so it says turn based uh mechanism where they keep tabs on everybody so it's this really really uh cool way to get data but yeah so they're talking to each other off chain they're getting data and then they post it on chain uh into this contract called the aggregator v3 interface and then once it's on chain once the data is there we can just call a view function to read that data so this latest round data function is what's known as a view function which means you know we could do it off-chain when it cost us any gas and just read that price from this contract after it's already decentralized and aggregated so i'll pause for a second actually because it looked like a couple comments came in uh and oh oh i was posting in the private chat i wasn't posting in the comments oh well oh i posted a link to your github but if you had another i think you had another link that you wanted to share yeah the other one was um that better programming link but um yeah so so i'll pause if there's any uh any any other questions it looks like there's a couple comments in here where can you find the generator or is there a service for vrfs we're gonna get to that good question could you please share the link oh gosh what's up okay but yeah so so uh so natter did that make sense that i did i was like clear there i hope you mute it i'm sorry about that yeah i'll just say that that helps a lot so thank you cool yeah and and just wanted to you know even like patrick did come to this particular point but did want to you know specify that because of the mechanism of you know turn base there is no central or single point of getting data for the price fields and that's what makes it you know web3 usable or by three steps exactly yes spot on so each one of those nodes is an independent operator so right there's independent a decentralized network they're all also getting data from different uh different apis different exchanges different groups giving that data so uh decentralized at the node level and at the data level which makes it uh yeah exactly you know this incorruptible uh system which is fantastic so in any case we pull this price in and then all we do is we set our uh the image of our nft to something called low image uri which is something that i'll get into in a second um and if it's higher than our pricing point then we'll say okay never mind use that high image uri so right so this is kind of a binary we're doing thumbs up or thumbs down but you could see how you could use this you could have like a thousand frames right and then based off the price you could say okay if it's between this range use this image between this frame use this image you could also generate some of these svg images and i'll show you how to do that as well now this is kind of the fancy part down here because again this token uri needs to return uh hold on let me pull back up let me pull back up that metadata piece oh i'm just going to go back here needs to pull up he needs to pull up something that looks like this right so since we're actually going to store all of our data all of our metadata right on chain we can actually do that by directly defining this metadata file you know as a string so there's a couple of kind of fancy things going on here with like abi and code pack and string um but basically what we're doing is we're putting this uh we're putting uh the the framework of this metadata uh and then we have a variable which is gonna be the name uh which is just gonna be whatever the name of it is which is like feeds nft or something like that and then this image uri uh which is going to be that variable one right so back in in our our full example here we're just gonna change this image flag so that the image url excuse me the image uri is going to be different so that's really the main piece here um to put these yeah uh one one we just wanted to jump in because like you know you are using ipfs so you know in case you want to explain about imaging this one actually isn't ipfs this is a hundred percent on chain which is can you show us that the urls again real quick yeah yeah and i keep i keep like deleting them so this is uh this is kind of like the simple example here so where'd it go here it is so this is let me zoom in just a hair this one is ipfs yeah yeah so this one in um in this kind of example here the image is hosted on ipfs right and that's what a lot of these projects do is they'll host it on ipfs yeah this is a pretty good conversation uh because yeah pretty interesting yeah yeah so so let me yeah i'll go into this a little bit so uh ipfs i know where we're kind of throwing a lot of terms in here ipfs is kind of this decentralized file storing um it's not a blockchain but it's kind of based off this peer-to-peer um infrastructure and we can store files to it and anybody can do what's called pin those files and host like that data on their own node now um i do kind of want to get through the rest of the demo and then we can talk about some of the pros and cons of some of these different strategies because this is decentralized however there is a chance that i'm the only one hosting this image which makes it centralized right so anybody can post the image just by pinning it but that doesn't necessarily mean everybody will um but i'll get to that in a second so what we're doing in in this demo here is our instead of hosting our image on ipfs which again you know if we copy paste this one you know this is the image that's hosted on ipfs which is really cool instead of hosting it on ipfs we're actually hosting it on the blockchain itself right so we're going to host this this image uri this this url that kind of defines what this image looks like on ipfs excuse me on ethereum and the way we can do that is a little bit fancy anyways it's cool yeah right this is yeah this is uh i'm hoping i'm not taking too long i want to like uh no no you're not all right cool so uh so this is uh we're using what's called svg which scans for uh scalar scalable vector graphics right and so it's really it kind of looks like html but it's a way to define like exactly what lines are going to do and what we do then is we take that svg and we cut we basically encode it in something called base64 encoding and we can actually use a uri that has this encoded svg as the uri of our of our token so hopefully that was clear but let me all i'll explain and you basically have two svgs defined in the smart contract and you're returning that that code based on what's returned from chain link exactly what that code looks like because it's probably just really ugly like crazy svg like code right or yeah so so um so it's actually it's not so bad let me uh let me show yeah let me uh because i've written svg in html and i'm just assuming it looks something like that it's pretty much the same so in here we have this image file uh we have this svg folder and these are the thumbs up and thumbs down okay so these are svgs like the the same svgs you would use exactly like in a web application yep yeah let me let me show oh it's not gonna can i see that will it even show you what it looks like yeah right can i can i see the code please uh well i'm gonna flip to my uh i'm gonna flip to my uh code editor anyways actually so so this is perfect timing let me just flip over there so like you know just to explain a bit more there the thing is as far as showing he's converting the svg into byte64 ipfs also converts it into a hash and storage blockchain stores that on similarly is converting into byte64 and you know showing that because storing the whole image on blockchain will be very very costly given the price today or something yeah and uh and i'll get into uh i'll get into the uh kind of a lot of the trade-offs in a little bit too but yeah so here's what this svg looks like uh kind of in code right this is the thumbs down in code this is you know exactly what is using to draw this thumbs down thing so um there's some really good tutorials on how to actually do this stuff but basically kind of this this main piece is we have kind of defining the version some starting points the height and width blah blah some other stuff but then we get into this path thing and this is what really kind of defines where the lines and what's being drawn so m i think is like move to and say hey move here then move here and then c is like circular something but it's basically defining a whole bunch yeah and you probably wouldn't like write this spg yourself like most of the time you use the tool to create it like you use photoshop or like you know one of those types of tools but there's also some web tools and all kinds of stuff even like a lot of the projects like the noun project that allow you to download um images like will also give you the option for an svg so you like never have you don't have to write all these of course if you're like an expert you might you know understand it but i don't i usually just like use an sp when exported from a tool yeah so um but it is cool to just see it though because like you know without seeing it it's just you're just basically returning a string right like and you're using that string to kind of like you know create this and you're calling that base64 or you're calling some function maybe in the smart contract i forgot but uh basically you're you're using um a path that's written in svg and and stuff like that so yes so spot on like i didn't i didn't draw this thumbs down myself i copy pasted it and uh that was that was how i got it right there i went to an svg generator i looked for a thumbs down you know somebody somebody more clever than me with this stuff you know had made one of these and uh and yeah exactly or you can export it from photoshop um in another example i have some more complicated svgs but as you'll see the bigger your svg the more expensive this is to store hence you know why a lot of people will store an ipfs but in any case so that's kind of the thumbs down piece and let's go back to the contract real quick and i'll show you exactly what's happening so we have this function in here called add low svg and add high svg and basically what this is saying uh what these functions do is they say okay here's what our raw svg code is for you know below 2000 and above 2000 so low is for below 2000 highs for above 2000. we literally just take that svg code that we just saw input it as a string parameter to this and what we do is i have this function in here called save to image ur svg to image uri and this is what's going to convert it on chain um to a uri to a token um to an image uri of that svg uh which sounds kind of wild and it is kind of wild so we have this uh you can do this off chain as well but i did want to show you an on-chain because this shows okay if you can convert this stuff on chain then hypothetically what you could do is you could parameterize all of this you could parameterize the width the height uh the view box like where these lines go and you could like programmatically create an spg if you were like really really smart yeah yeah i have a i have another demo um where uh it uses random commands to to print a random svg like all on chain so it's 100 on chain you know it's it's absolutely wild so uh what we do no no please well there was like this project that i tweeted about a handful of times called generative masks and it basically used a token id to generate some um dynamic javascripts like a canvas type of stuff which is really cool but um but it was basically hosted on ipfs so like if you know for whatever reason that token ipfs address like was removed or something like that the svg would be gone theoretically right um or the image would be gone but if you do this on chain it can never go away ever right so that's kind of like to me the biggest thing to consider and um what's that yeah i think your audio might be messed up a little bit um but a couple of people are like asking a couple of questions about gas costs and stuff like that um so is the transaction cost going to be higher or is there going to be a lot more gas when you do it this way because you're doing more like computation yeah yeah it is going to be higher and that's going to be one of the things uh i uh that i i will get to you know once once i finish going through it but i did want to point out um this protocol because uh this oney chain nft project because they were actually the ones who kind of first showed me kind of a lot of the really cool stuff that you can do you can definitely go go check out their contracts as well uh really cool project they use chain link vrf to mint verifiably random nfts using kind of this this crazy on-chain svg method they're not hosting any any of these these images here they're all svgs they're not holding hosting on ipfs they're all randomly generated and it's it's kind of mind-blowing to me um so i up my also my camera is a little too hot it's a little too spicy in here so uh it's probably gonna shut off in in a second yep there you go um no worries uh orts or it's gonna stay on i don't know whatever oh no this is my uh oh it's my oh i was wondering why my quality was so bad it's because it's my imacs uh camera so no wonder so never mind it's not gonna overheat because my other camera overheated um but in any case uh so here is uh here is the code uh that svg code anyways and what we do is we take this data image this is kind of the beginning of the url right you normally how you see like a url you'll see https you know that slash this is the beginning of that url and uh added on to this is we we add the base64 encoded version of that svg code and that's exactly what the rest of this does we've imported this base64 package and we encode this svg stuff and that's all we do and then this uh this api down in codepath base url svg base64 encoded is basically how you concatenate strings uh in solidity and boom and that's going to be our uri for any svg so without all that being said let's go through a demo oh and let me just undo anything um let me just go through a demo um this uh all this code that we're gonna go through is written uh in hardhat um so if you wanna go check out uh the repo if you know hard hat great if you know brownie i have an nft mix with with brownie that's really really cool but we have our deploy our deploy folder we're using kind of this hard hat plugin called deploy it will deploy a fake price feed contract for us and then it'll deploy our nft if you guys want me to go through this um i can go through it in a little bit but let's just let's just go ahead and run the code um i have a hardhat shorthand installed and i can just do hardhead commands with hh so i'll do a hard hat deploy we'll hit enter and it's going to deploy to kind of a fake a fake blockchain here a fake hard hat blockchain and it deployed really really quickly it said adding low uri adding high uri this is where we called those um i know that there's a lot of there's a lot of code here um hard hat is so nice right we uh even though i hate i hate javascript but hard hat is is is pretty i i like hard hat um i'm trying to build some stuff for solana um like a week or two ago and i was instantly reminded like how good hard hat was yeah because they don't have something like that in that ecosystem there there's a team actually for solana for those who want to know um they have this thing called anchor that they're working on that's supposed to be kind of like the hard hat of of solana it's still kind of in beta but yeah i'm looking forward to anchor kind of ramping up nice but so we added this low uri which was that svg we added the high uri which was the thumbs up uh we called our create function which creates the nft uh and this also does um uh uh it also assigns uh our our token uri to that nft and then i went ahead and printed out the token uri of this nft so this this huge url or this uri is that svg encoded uri of um of this nft now if we paste this into our uh sorry i'm making you have to flip back and forth your netter no no go for it we paste this into our our browser here share screen window this one it looks like a massive mess uh that's because on this browser i don't have excuse me on this user i don't have like the nice jason a5 plugin but it shows it shows exactly that same metadata we were talking about right we have name chain link feeds nft we have a description we don't have any attributes but we have this image section which defines another giant long uri here which if we copy paste we can see that this is a thumbs up we're saying hey the price is higher which i didn't change the code to make it be a thumbs down but essentially this is what this image would look like on autopsy and we can even um i'm going to flip back and forth again keep going go for it all right cool uh if we want to deploy this live let's go ahead and change this so that it's um the threshold is different so where do we define the threshold in here where do we define the 2000 so constructor is the price feed address low uri high uri maybe when you deploy do you pass it into constructor took an id to if price is higher than token id to high value so let's find where we define this create right here when we call this crate function that's when we define the high value so let's go ahead in our deploy feeds let's look for when we call the create function all right cool we call it high value i know i'm bouncing around a lot i'm sorry so this is our two thousand dollars here oh okay so you have to figure out how to convert that all we got to do is add the five here right okay and so hypothetically if we deploy this now this should be a thumbs down so we're gonna do hard hat deploy and i'm getting nervous because we're doing one of these live deployments right network ring b uh we're gonna reset the deployment and what this should do is it should do everything that we just did with the difference being that the threshold is now five thousand dollars so this should be a thumbs down because we just checked what does reset do yeah so reset means that um it's it's saying if if we run a deploy script and we already have a contract deployed um hardhat will be like oh you already have a contract deployed i'm going to skip the deploying part and i'll just do all the other stuff since we actually changed kind of a fundamental feature of the contract i'm saying hey just just redeploy everything even if everything's the same hardhat will redeploy if you if we change stuff in the smart contract but we didn't we only changed you know one of these parameters and hard hat's not smart enough to know that the parameter is different so so that's what this reset does so if we grab this now and once again we're gonna we're gonna flip over to uh speaker scan we're gonna flip i'm gonna share screen in just a second and while this is deploying i'll answer some more questions here uh window so this is the transaction it's gonna take a hot minute to go through yeah one of the questions that that we didn't we we kind of addressed it just very very uh superficially but maybe we can dive a little bit deeper on there like what are the use cases for dynamic nfts yeah yeah great question so this uh dynamic nfts will add a huge kind of utility to these nfts right a lot of people what they'll do is they'll kind of they'll create their art which is great uh and then they'll put it on um put it into an mft and say hey i did it i made nft i did art which is cool and which is great um but like i said these nfts can do more than just be art they can have these functionalities and this is an example of creating this art that changes over time and that changes depending on some real life uh value so this is um so it just adds this this extra layer um to just really empowering your smart contracts to do to do absolutely crazy things so i need to be on the ring the ether scan your alien mode buddy it sounds like you're underwater trying to slowly kill us um yeah for some reason your audio is really sounding strange maybe unplug your mic and then plug it back in and try that let's see we'll see if that works now hey oh much better there we go yes that was that was the ticket yeah go ahead and repeat what you said because we didn't get any of it yeah right just adding to the dynamic nfp part i believe nft is with gaming will have a really good you know combination of dynamic nfps one example would be avigachi where the gochis are dynamically inside the nfp you know changed in such a way that it can be unique based on a number and it cannot be unique based on number so like you know as you're talking about applications this is the first application here here for you that gaming plus nfts will always require dynamization of nfp because it's just not about the art but also about the rarity of that part and you know how as a monster are you gonna use it so pretty please stop there yeah yeah spot on so uh so here's the contract that we just deployed uh it's it's verified because i've deployed contracts like this recently so either scan smart enough to know it's it's the same thing but we can see all the different functions we called right so we have our contract creation here we added our our low svg code and the high svg code and then we called our create uh to create one token of this kind right so now what we can do is if if everything is good we can go to testnets.openc.io we should be able to grab this contract address paste it into openc we see there's this chain link feeds object that comes up uh and here is token id 0 yeah because we're waiting for that 5000 which is probably going to come in the next couple days so so uh if you guys uh if everybody here grabs this uh i don't know how to send it to you all but uh if you if you find this on openc uh whenever we hit 5000 this will flip to a thumbs up uh which will be wild but yeah that's so that's how you deploy this um something really important to note too is while we were deploying this we emitted events um and emitting those events means that a protocol like the graph can then go ahead and index every time somebody mints one of these nfts anytime somebody uh we could have added more events to kind of change values and do all this other crazy stuff but we can gather all that data really really easily using the graph protocol so um it's a really really really cool way of generating these nfds and yes everyone's kind of been saying hey what are the trade-offs here um this is kind of like the harder way uh putting your image uri on ethereum probably not the best use for ethereum because as everyone kind of noticed this is incredibly expensive in one of my other demos i deployed an svg nft that cost something like 2 million gas so you do the math two million gas times you know thirty dollar guay price we're talking like i don't know i think it was like point one eth or something like that to deploy an mft which is really expensive um maybe maybe what is it like 400 or something like that yeah something like that no not not great um so what a lot of people do is they do this ipf s method which is where they store this image onto like i said this this this decentralized peer-to-peer data network that's better because it's going to be a lot cheaper to store images the issue with that is if somebody if everyone stops pinning your data the image can go away that uri can go away so there there's there's one additional step which is doing something like file coin uh which doing that is is definitely a little bit trickier where basically you pay these file coin nodes to pin ipfs for you um and you can kind of keep track of how much money is being spent there and uh and yeah so i i talked too long for a long time uh i will i will shut up now now that's the pretty interesting uh the to me the most one of the most interesting problems about nfts or you know i don't know if you would consider it a problem but the the thing that hasn't been like a hundred percent i would say figured out industry-wide that everyone is kind of like um you know all focusing on doing the same way uh there are two two things really the image metadata so like there is no standard for the actual metadata so you you typically just have a content uri and that could look like anything i think it'd be really interesting to kind of have like that more standardized and we've even had a working group at the graph with other protocols to kind of try to figure that out um and then the other thing though is the content like where does that content live and you we talked about a few different ways to do it you know ipfs you know you're doing it on chain in this example um i've even seen projects launched with centralized content uris like gcp or aws which is kind of like for sure not the right way to do it um but like and then there's our weave i don't know if you know a lot about rv but like we're kind of exploring that um i i'm really interested to kind of see where this goes because i feel like if uh one of the narratives that you hear in in the web 2 world the people that don't like nfts are like oh this is just like something that can go away completely and they kind of like they have a point to some extent but they but they don't it's more nuanced than that but i think having like a real good answer to that would be helpful for people that are kind of like interested in this stuff also one more thing to add here is kind of controversial but i do want to bring this up is like erc 721 is a standard for creating these kind of like you know super rare stuff and it is it is a little uh you know older code same as erc20 so the question would be will we have another standard because erc721 in itself is a very you know gas intensive standard and you know it's not very uh cool to have these kind of things while we are creating the next economy where social you know creations will also have their own nfp is on chain possibly not with something which might be centralized via ipfs or maybe rv which is still growing so like you know kind of kind of one more thing i'm really excited to explore is that in future we might also have an er standard similar to erc721 creating variables for us yeah i i think it's the the erc 677 and 777 is like a perfect example of that right like we're kind of got caught up in erc20 now everyone does the whole proof stuff even though there's kind of a lot of evidence that uh that kind of sucks that's to spend all the gas doing all these improves and stuff um we have a couple of questions and i want to kind of see if we can get to some of these uh hey florin hey renee i see a bunch of people in here i know um but i thought this was a pretty good question because it was something i also had when i first started getting into this stuff so like what is the difference between hard hat truffle and brownie and kind of like you as someone that's been doing this for quite a while like how do you view the ecosystem as far as like ethereum development environments are concerned yeah yeah that's a great question so they're they're all just different smart contract development frameworks right so uh hard hat the one i just demoed here is a javascript based one so uh for deploying your smart contracts for testing your smart contracts for kind of doing anything outside of solidity that a traditional like software engineering firm or group would do that's where these smart contract development frameworks are going to help out hard hat and truffle are both javascript based or or typescript based so if you're used to that you know you can kind of jump right in and already you know know how to deploy know how to test and then brownie is python based so yeah for now i'll point out at the beginning i make a lot of javascript jokes i'm not a big javascript fan uh for i think that for deploying a lot of these back ends python is just way more intuitive and way makes makes a lot more sense but i understand it you know if you're especially if you're doing full stack development you know maybe you want to just do kind of that node.js everywhere mentality than great but and i know a lot of people uh really like hardhat so that's why i did the demo here in hearthit but yeah for most of my projects i use brownie just because i like brownie i like python so yeah it's really up to you it's whatever you want to use the tool most people start with and i think everyone should start with is remix remix is just solidity um it i think it recently added hard hat plugins though but it's great for just getting started get getting going and really visualizing what's going on with these smart contracts um another question oh i'm sorry go ahead that's that's you know pretty strong can i believe that remix can be a starting point but hardhat does have its own like you know chain being created and being run on its own structure while we also should acknowledge like truffle was the first you know one to bring this tooling to to reality while making these things up i just want to quickly touch on a point which you know uh patrick did touch up which is like all these events why are we using these kind of events and what how do we get this uh railed up uh so so so you know just wanted to in a minute talk about that that you know the graph has been indexing these kind of things what that means is that these nfts do exist on the blockchain in english structure and you want to portray them to the front end and of course in a decentralized a manner like chain link puts the data inside the blockchain the graph in a way gets that particular contract based nft based data outside we are going to explore that soon in incoming videos but yeah this this was how you get the data or how you see things on the front end um someone asked if it's being recorded yeah it'll be on my youtube and it'll also be available um on twitter for you know on my feed so you can you can check that out um florin is in here and someone is saying hello to florin um so hey florin um someone's chilling their nft and i'm not gonna like uh share that comment so um let's see here so can you explain is it possible for a rare nft which opens on ipfs can disappear if those ipfs data is not maintained um yeah this is a good question i think we kind of like cover this like yes this is this is possible but there's also a function that is made available to the owner i believe um and also to the contract owner at least to the best of my understanding with a lot of these projects that allow you to maybe update the content uri is that is that true um it depends on how you code it so you can code it and say like hey only the owner can change this this parameter um but it's it's really up to kind of the smart contract developer and and that's something that is is hopefully going to get better as time goes on as we'll be able to see you know who has authority to change what in smart contracts and that is something that um is definitely an area of discussion for a lot of the big projects that you know maybe still have like an admin key that can you know change some of these big protocols but um i unfortunately have to jump off i got i got another meeting but oh right yeah yeah we're where we are and over uh over on time so um yeah so that's cool we can wrap it up so um thanks everyone for for stopping by thank you patrick thank you for now for for joining me today this was a really great discussion i think um if you have any questions uh reach out to me or any of these folks on twitter what are your twitter handles and then we'll we'll go ahead and jump off mine's uh mike's patrick alpha c feel free to hit me up i look like a big frog big blue frog and that's me both of these people are nfps i am the only legit face so mine is i am proud of m underscore you can also hit me up my dm's are open for help all right cool well uh yeah so that's it for today um i'll be back actually in two days with uh cooper turley to talk about um a lot of cool dowel stuff and um and community stuff which is like one of my favorite topics so we'll see you uh we'll see you in a couple days and yeah we'll see you on twitter as well later everyone thanks all

Channel: Nader Dabit

Views: 1,378

Rating: 4.9540229 out of 5

Keywords:

Id: nS9xP1hxg3w

Length: 57min 20sec (3440 seconds)

Published: Wed Sep 01 2021