Learn Blockchain, Solidity, and Full Stack Web3 Development with JavaScript – 32-Hour Course - Ep208

[rust] Time: 2025-07-11 11:24:12 Source: AIHackNode Author: kotlin Click: 199 times
we wanted to we couldprogrammatically pin data to ipfs on ai for studentsourown node but since a lot of us aren'tgoing to be running our own computers24/7 we went ahead and said okay we'llwe'll stick with pinata for our defaulthere now that we've done all that boomgot another little check markhere now I got something to say we don'tneed to host our data on ipfs you canactually host our data our metadatadirectly on chain if we want to howeverthere are some pros and cons to it prosof Hosting on ipfs or that's it's goingto be cheap and then the cons are thatsomeone needs to pin our data rightthere's so at least one person alwaysneeds to have her data pinned right it'sdecentralized but you at least needsomebody to pin your data right andusing something like filecoin is a is away to incentivize people to pin thatdata but if you're not using filecoinit's not necessarily guaranteed the prosof doing our SVG on chain nft the datais on chain and you never have to worryabout somebody actually pinning the datathe cons are that this is much moreexpensive these little imagesright here are actually surprisinglylarge and storing them on chain canactually get pretty expensive so we'regoing to use some different images somemuch smaller images much cheaper imagesto work with here and if you want to seeanother version of this I have anothervideo how to make nft art with onchainmetadata it goes through pretty muchwhat we're about to go through here aswell if you want a second reference andthere's a link to this in the GitHubrepo associated with this course soinstead of these pngs that we're usingwe're going to use something called ssvgs now an SVG stands for scalablevector graphics and these are much muchmore minimalistic files that we can goahead and upload to to the blockchain sothat's why we're going to use thembecause since they're so much moreminimalistic they're a lot cheaper toupload because remember the more datathat you upload to the blockchain themore expensive it is now in this video Imake randomized svge data on chain andhere's kind of an example of what onelooks like like it's just a whole bunchof random lines not super thrilling butuh random and and kind of cool and it's100% onchain these svgs actually workright in HTML so if you want to usethese for your websites you can as wellnow there's a link to this tutorial inthe GitHub repo associated with thiscourse where we can go ahead and try ityourself and we can actually play withmaking an SVG right so they have allthese different commands in this webthroughschools.com Graphics SVG intro. ASP youcan see some of the different commandsright you can make a rectangle you canmake a circle path is a big one whereyou can say exactly what the path or theline you want to draw is going to looklike and there's a whole bunch of stuffyou can make in this SVG and the coolthing is no matter how big you make anSVG the quality is always going to beexactly the same because SVG justexplains exactly how to draw it nomatter how big or how little the imageis going to be so if you want to learnmore about svgs you want to play withsvgs you know you can come in here tryyourself so with that being said that'swhat we're going to store on chain sothat's how we're going to store this SVGstuff on chain but we're going to go onestep further we're going to make thisDynamic we're going to make thisactually change based off of some dataon chain if you go to the GitHub repoassociated with this lesson and you goto the images and you go to Dynamic nftyou'll see two images you see happy. SVGwhich looks like this and you'll seefrown. SVG which looks like this sowe're going to make this nft dynamic inthe sense that we're going to say if theprice of eth is above some number thenwe're going to have it be a happy faceand then if it's below then we're goingto make it a frowny face so our nft isgoing to change based off of some realworld parameters and this is obviouslyreally powerful and really cool becausewe can have an nft that changes basedoff stats we can have an nft thatchanges based off of really whatever andwe're going to store all the data 100%on chain it's going to be a little bitmore expensive so that's what we'regoing to be buildinghere let's go ahead let's jump into itand let's do the final contract for ourultimate nft section so we're going tocreate a new contract in here newcontract and this is going to be ourDynamic SVG nft doou and it's going tolook real similar to what we've beendoing SL slash Dynamic SVGn.so SLP DDXlicenseidentifier MITpragma solidity parent0.8.7 contract Dynamic SVG nft now let'stalk about what the architecture of thisis going to look like it's going to looklike a pretty normal nft with a coupleof caveats we're going to give it a mintfunction to Mint these nfts we're alsogoing to store our SVG informationsomewhere and then we're going to needto have some logic to say show X imageor show Y image right and as we knowthat's really just going to be switchingthe token U to say show X or show y solet's go into how we'd actually do thisso first we know this is going to be anERC 721 so we can go ahead and importthat from open Zeppelin so we're goingto say import at open Zeppelin SLcontracts SL tokenSLC721c 721 so now we're not going to callthat set token URI function that wecalled before so we can just use the rawearc 721 instead of an extension sowe'll say our contract is ERC 721 andnow that we're making it an ERC 721 wecan say Constructor like this then we'llcall The Constructor of the erc721 whichwe're going to call this Dynamic SVGnft DSN Dynamic SVG NSTnft uh like so then we're also going toneed a mint function so let's justcreate that right now we'll say functionMint nft or request nft

(Editor in charge: java)

Related content
Wonderful recommendations
Popular Clicks
Friendly links