Build a WEB3 app to mint unlimited NFTs… But should you?

in today's video we'll build a complete web 3 application step by step from scratch and in the process we'll talk about the good and bad aspects of developing decentralized web apps on the blockchain you may have seen the headlines of kids making millions of dollars overnight by selling digital art in the form of nfts if you're like me and not already an nft millionaire you likely have some fomo about this whole trend you could point out how nfts are dumb pointless and bad for the environment or you could try to get in on the trend yourself and that's exactly what we'll do in this video i'll show you how i created a collection of 20 000 unique graphics with some crappy artwork i drew by hand in a few minutes we'll then take that artwork and upload it to the interplanetary file system at which point we can write a smart contract with solidity and open zeppelin that will mint a new nft whenever somebody transfers ethereum to the smart contract and finally we'll use ether's js with react to build a web3 application that provides a front-end interface where people can actually interact with a smart contract by the end of this tutorial you'll understand the complete process of going from zero to a web 3.0 nft application this tutorial is longer than most on this channel and it's broken down into seven phases if you're new here like and subscribe and follow along with the full tutorial on fire ship i o and if you want to see more web free content let me know in the comments before we get started let's first answer the question of what is an nft collection a non-fungible token is a unique digital asset usually it represents a piece of artwork like an image but it can also represent things like domain names and physical items in the real world but you'll often see nfts packaged in a collection like crypto punks board ape yacht club and doodles just to name a few these graphics are created with a few base layers like hair eyes clothing and so on the layers are then combined together randomly to create a bunch of unique graphics what's interesting though is that the various traits and attributes have different levels of rarity when a graphic is generated it's less likely to have one of the rare traits this is actually really fun because you can think of a smart contract like a vending machine in the cloud when an nft collection is first offered you can send crypto to that wallet address it will mint a one-of-a-kind token and transfer it to your wallet if you're lucky you'll get something with a really rare trait it's not much different than opening up a pack of pokemon cards most of the cards are very common but there is a small chance you'll get something that's very rare and valuable now after you purchase an nft there's a secondary market where you can resell it to someone else on a site like openc many people invest in nfts hoping to flip them for a higher value later on if you're the original creator you can also configure your smart contract to receive royalty payments whenever the nft changes hands in the future that's pretty cool but there are a lot of bad things i could say about web3 as well the guy who created signal an encrypted messaging app created an nft that actually changes its appearance based on where you view it on openc it looks really cool but in your wallet it looks like a piece of poop because the nft image is hosted off-chain he just used a web server to display a different image based on the user agent that was requesting the image everybody talks about web3 being decentralized and trustless but the reality is that much of it works thanks to centralized apis read this full blog post to learn more at the end of the day we don't really care about that we're just here to have fun get some exercise and make a ton of money now we're ready to kick off phase one of this project where we create the layers or graphics that we'll use for the nft collection i'm not much of an artist and everything i draw tends to look really creepy not much i can do about that so i'm just gonna own it believe it or not creating nft artwork is an art form i find it really satisfying because you can take a few basic images and use them to create thousands of different unique combinations for my nft collection i actually used a pen and paper to draw everything by hand i then digitized it and brought each individual layer into figma as you can see here i have different categories for the various traits like hair eyes nose mouth beard and so on from there i created a little script in node.js that randomly combines these layers together you can find the source code on github but there are many existing tools out there that can help you generate an nft collection without needing to write any code if you're looking for a tutorial that doesn't require any code this is not the video for you if your goal is to just create a bunch of images and sell them as nfts i'd recommend checking out this recent tutorial from codestacker for a more simplified approach i'm not going to go through every single line of code here but i just want to walk you through the process i used to create all my nft graphics from scratch first you can see i have a directory called layers that contains a bunch of files like i zero eyes one eyes two and so on this directory contains all the possible layers that we would use in an image from there i have a file named index.js inside of it i have an svg template i'm using scalable vector graphics here but i've seen other implementations that just use pngs now each layer in our layers directory is an svg so all we have to do is grab the main content from that file and replace each one of these comments with the corresponding graphic like head hair eyes nose mouth and beard in order to do that i'm using node.js to read one of our layer files and then use some regex to grab the content inside the svg tags then i have a function called create image that will generate a bunch of random numbers and combine them together into an array i've made this a recursive function that checks to see if that combination has already been taken in which case it will try running the randomization again if it is a valid combination we'll go ahead and replace all the comments in the svg template with the actual layers from our layers directory now in addition to creating an image we're also going to create a json file with some metadata about it this metadata is really important because it contains the name of the file as well as a link to its actual image on the interplanetary file system that represents a unique file upload that cannot be modified in addition the metadata contains attributes of the different traits in the image generally when making an nft collection each trait has a different level of rarity the more rare traits an nft has the more valuable it tends to be thanks to the magic of artificial scarcity now i'll go ahead and write these files to my file system and as an added touch i'm also converting the svg to a png file as well i'm using a node package called sharp to make that possible and finally to run the script i just have a while loop that calls the create image function for the number of images that i want to create and now when we run the script with node we get this out directory with a bunch of files that contain both the raw images and json for each individual graphic that takes care of phase one we can now generate thousands or even millions of individual graphics by simply adding more layers to the layers directory but keep in mind that my implementation is very crude there's a lot of optimizations we could make or better yet we could have used a pre-built solution out there to get this job done much faster now the next thing we need to think about is how to get these files on the internet and connect them to a non-fungible token the actual image data and json for the nft is too big to be efficiently stored on the blockchain so instead we store an off-chain on the interplanetary file system which is a decentralized file system in the cloud very similar to bittorrent one very important concern that ipfs handles is content addressability anytime you upload a file it creates a unique identifier for that upload and that allows us to verify the authenticity of any graphics associated to an nft once a file has been uploaded you can't modify it without changing its content identifier that means when minting an nft the only thing we actually need to store is a link to that file's content identifier now the question becomes how do we take our raw files and upload them to ipfs there are many ways to go about it but an easy free solution that i've been using is pinata it's very similar to something like dropbox where you simply click a button to upload and choose a file from your file system and you can even host an entire static website from pinata it also has a node sdk to upload programmatically but we're not going to worry about it in this video i'm just going to upload a few of our images here and you'll notice when i do that it creates a content identifier conveniently we can upload an entire directory all at once i'm going to go ahead and upload a few of the graphics that i just generated for this tutorial you can upload any random file it doesn't really matter and now we're ready to build a full stack web3 application using solidity hard hat and react the first thing i'm doing here is generating a new react app using veed it really doesn't matter which end framework you use here but the vast majority of web3 demos out there use react that gives us a front end application now we're going to run npx hard hat which will add a variety of tools to our project to add a blockchain backend you'll notice it generates a directory for contracts which contains files written in solidity which contains the smart contract code that will interact with the blockchain it also creates a directory named scripts that contains the code to deploy those contracts to the blockchain now there's a couple of configuration things we'll need to do here in the hat config file we'll update the paths option to create any artifacts in the source directory for the react application that allows react to access information about the smart contracts when you compile a smart contract it creates what's known as an application binary interface which is basically a middleman that allows your front-end javascript code to communicate with the smart contract compiled to machine code and all that information lives in the artifacts directory from there we're going to install a bunch of dependencies with npm like waffle for automated testing and ethers to interact with smart contracts in the browser and also a tool called open zeppelin which provides templates for quickly building industry standard smart contracts at this point i want to focus on writing a smart contract its purpose is to accept a payment from a user then mint a non-fungible token and transfer it to that user's wallet it's important to point out that the code in the smart contract will not actually generate random traits for the nft images it's actually extremely difficult to handle randomness in a smart contract most nft collections don't deal with it at all and instead they just generate all the images at once upload them to ipfs and then mint them after the fact at which point they get sold on a secondary market or you might code up another contract to create your own secondary market now it is possible to implement randomness in a smart contract and if that's what you want to do i would highly recommend looking into something like chain link we're going to take the easy approach in this video where the smart contract takes the ipfs url for the metadata along with some ethereum and mints a new token from it to handle that requirement we'll need to learn a new programming language called solidity in the contracts directory let's go ahead and create a file ending in dot sol now we could implement a smart contract from scratch but that would be a pretty big undertaking on its own luckily there's a tool called open zeppelin and it has a wizard that we can use to automatically generate reliable code for us the ethereum ecosystem already has a variety of standard interfaces to handle requirements commonly implemented in smart contracts like erc20 is what you would use to create a fungible token like if you wanted to create your own coin on the ethereum network but to create a non-fungible token we want to use the erc721 standard before we customize it you'll notice that there is api documentation with a handful of methods built into the base contract like balance of to check the owner's balance or owner of to see who owns a token as well as methods to transfer tokens from one user to another now let's go over to the open zeppelin wizard to customize our own erc721 contract most importantly we need to be able to mint our own tokens if we check the box for mint it adds a new method to the contract that allows a privileged account to mint or create a new token let's also auto increment ids and then check the box for uri storage uri storage allows us to associate and upload on ipfs when this token is minted remember that's the reference to the metadata that we uploaded on pinata earlier we'll also want to use a base uri here that points to ipfs to ensure that the uri is properly formatted that gives us a base contract to work with and you'll notice a button here to open it up in the remix ide i'm not going to do it in this video but remix is a browser-based ide that makes it really easy to compile and test your smart contracts what we're going to do is copy and paste this code and bring it directly into the solidity file that we created we could use this contract as is but we want to extend it with some additional code that allows anybody to mint a token as long as they transfer the appropriate amount of ethereum along with it currently you'll notice a safemint method that allows the owner of the contract to mint a new token what we want to do is create a new function called payment it takes a recipient and metadata content id then mint a new token with that data now in order to implement this function we'll want to make sure that the same uri can't be minted twice and to validate that i'm creating a mapping of strings to integers to keep track of the existing uris that have been minted we might also want to check if an existing uri is already owned so i'm creating another function called is content owned that takes a uri as its argument and returns true if that uri already exists in the mapping now we have everything in place to implement the payment function you'll notice that it's marked as a payable function which means that somebody can transfer money into the contract now we can use the require keyword to run some validation and keep in mind that this is not a production ready contract my goal is just to show you how some of the basic mechanics and solidity work with require we first passed a condition in this case we want to know if the uri has already been minted if it has not been minted the function will continue executing otherwise it will throw an error saying the nft has already been minted the next thing we'll want to validate is that the user has paid enough ether there's a global variable of message and its value property contains the amount of ether being sent into the contract we can make sure that the minimum value is greater than .05 otherwise we'll throw an error saying the user needs to pay up from there we'll want to create a new item id with the counter implemented by open zeppelin it will increment each new token by 1 so it starts at 0 then goes to 1 2 3 and so on after incrementing the counter we'll update our mapping of the existing uris then we call the built-in mint method with the recipient's wallet address and finally we set the token uri on that id that's how someone can pay to mint a new token and as one final touch i'm also going to add a function here to get the current count so we can know exactly how many tokens have been minted so far and that completes the solidity code for our back end at this point you may want to just jump straight into building a web 3 application but i would highly recommend that you do some testing first hardhat already has a sample test ready to go and the code you write in a test will be very similar if not identical to the code that you write in your frontend react application it's much easier to detect bugs and issues in a test than it is in a front end application with all the ui stuff going on if you've never done test driven development before i have an entire video on it in the test we'll first use ethers to get our contract and then deploy it once deployed we'll then need a wallet address with some ethernet for testing luckily we can use a fake wallet with 10 000 ether in it already by going to the terminal and running npx hard hat node this creates a mock network on localhost and provides us with a bunch of fake accounts to use for testing copy one of the public keys and use it in your test at this point we can start calling the methods on the deployed smart contract first i'll create a variable called balance that checks the current balance of the recipient's wallet address balance of is a method built into the erc721 spec now currently the user hasn't purchased any nfts so we expect the balance to equal zero now from there we'll create another variable called newly minted token that calls the payment method that we defined on the smart contract it takes the recipient and metadata uri as argument and then we can also define the message value as .05 ether for fun let's go ahead and set the ether value to 0.01 now go to the terminal and run npx hard hat test what you'll notice is that we get a failing test and you'll see the error message here that the user needs to pay up let's go ahead and fix that and then we'll wait for the newly minted token to be mined by calling the wait method on it from there we can query the balance again and this time we expect it to equal 1. in addition we can test our is content owned method by making sure that that metadata uri is equal to true and there are all kinds of other things we could test here but you get the general idea if you test all your smart contract logic first it'll make the front end development much easier now we're ready to move on to the next phase where we build a web 3 application that interacts with a smart contract from a website let's first go into the sample script provided by hardhat this script is used to compile the contract which will populate the artifacts directory with all the information we need to interact with it like the abi i talked about earlier we'll want to update the default values with the name of the custom contract that we created you'll want to first make sure you have a terminal opened running the npx hard hat node command this should always be running in the background from there we can open up a separate terminal and run npx hard hat compile this runs the solidity compiler to convert your code into binary once that's done we can run npx hard hat run scripts sample script and specify the network as localhost that will take the contract and deploy it to the actual network and now we have a smart contract running on our local machine now when it comes to web3 the way end users interact with a smart contract is typically with a browser plugin like metamask for development you'll want to set up metamask with one of the testing addresses provided by hardhat if you don't have it yet install metamask and then go to the localhost network and import a new account it will ask you for a private key which you can simply copy from the terminal output and now we're ready to start writing some react code in order for a user to mint an nft on the website they'll need to have meta mask installed we'll need to check that at runtime and have two different screens based on whether or not it's installed i'm creating two different components here one called home and one called install and in the install component we'll simply have a link to the metamask plugin now in the main app component we can check to see if the user has a plugin installed by checking the window ethereum object a plugin like metamask will make this object available automatically when it's installed now the next thing i'll do is create a new component called wallet balance and inside of it we can start interacting with ethers.js which is a javascript library that makes it easy to communicate between the smart contract and the end user's wallet in this component what we want to do is get the end user's current balance we'll first set up state with the use state hook and then define a function called get balance we can get the connected account on the window ethereum object and then we use ethers.js to create a new web3 provider the provider provides all kinds of different methods for interacting with the blockchain one of which is get balance which then takes the account as its argument that will return the wallet balance of the connected account which should be 10 000 ether but it's in a big number format so ethers also provides a utility to format the ether value which we can use when setting the balance on the component and now we can call this function when a button is clicked and show the balance value in the ui now let's go ahead and declare the wallet balance component in the main component and then we can serve the app locally by running npm run dev i've also added bootstrap to my project to make things look a little nicer but the end result should be a button that when clicked updates the balance in the ui that's how we can use ethers to interact with the wallet but now how do we interact with the smart contract we'll first need to import the contract api from the artifacts directory now earlier when you compiled your contract and ran the sample script it should have said contract deployed to an address in the terminal let's go ahead and take that contract address and set it up as a global variable here in our code we can then instantiate a web3 provider again and use it to get the signer to execute transactions on the blockchain from there we can use ethers to instantiate the contract using the address the abi and the signer what we want to do next is loop over all the nft images in the collection each one of those images will have a button to mint it or if it's already been minted the owner can view the token uri for the nft we'll first need to know how many tokens have already been minted and to do that i'm setting up a function here called git count that calls the contract count method that we implemented in solidity earlier we'll then call this function when the component is first initialized with the use effect hook in the jsx i'm looping over every token that's been minted so far for each one of those items i'm rendering a component called nft image that takes the index as a prop which conveniently matches the token id now in the nft image component i'm adding a property for the content id this content id comes from pinata remember i uploaded all my graphics to a folder in pinata we can combine the content id with the token id to reference that json metadata uri now when it comes to the actual image i tried to use the pinata cloud gateway but i didn't find this to be very reliable i often had broken images so currently i'm referencing my images here locally now as we loop over these images we need to figure out if each metadata uri has been minted yet for that i'm going to set up state on the component of is minted and then define a function called get minted status that will run the iscontentone method on the smart contract itself and then we'll run that function with the use effect hook and now we've reached the point where we can actually mint the token i'm creating another function to handle that and inside the body the first thing it will do is make a connection between the contract and the signer that will give us access to the recipient's wallet address we then call the payment method on the smart contract and pass the address as well as the metadata uri as argument in addition we need to set the value of ether that the user will pay for that we pass an object with a value of the amount of ether which in this case will be .05 you may notice how this code is basically identical to the code we wrote in our unit test earlier from there we can wait for the result to be mined after which point we can call the get minted status function again and this time it should say the metadata uri has been minted now it's just a matter of using some conditional logic in the jsx to show the image uri if it's already been minted otherwise we'll just show a mystery placeholder and then we'll also show the option to mint the token if it's not already minted otherwise it will say that nft is taken now at this point if all went well you should be able to go to the application and when you click the mint button it will bring up metamask confirming that you want to transfer .05 ether and will then complete the transaction after you confirm it congratulations you just built a basic web3 app let's take a quick break to appreciate it it's britney now we can move on to phase seven deployment this app is by no means production ready and it would cost a lot of money to deploy it to the ethereum main net but one thing we can do is deploy it to a test net to see how it would work in the real world a free tool that can help us do that is alchemy the majority of serious web 3 applications use tools like alchemy and infuria which are platforms that can help make decentralized apps more reliable what we're going to do is use alchemy to deploy our contract to a test net when you create an account it will give you the option to create a new application and i'm going to use the polygon chain with the polygon mumbai network polygon by the way is a blockchain built on top of ethereum that is faster and less expensive its native token matic is very similar to ether for this tutorial you can think of matic and ether as being the same basic thing once the app is created you'll notice it gives you a link to the network go ahead and copy that now go back to the hard hat config file in your source code you'll need a new entry under networks which in this case will be matic and point it to the url that you just copied the other thing you'll need is a private key for your account go over to metamask and switch the network to mumbai then from the menu click account details and export your private key then paste it into the hard hat config the reason you need a private key here is because this account will be the one that deploys the contract but deploying a contract isn't free and currently there is zeromatic in this wallet to get some free test money we'll need to go to the polygon faucet and add our public wallet address there and after a few minutes of waiting you should magically see some matic appear in your wallet and now we're ready for the moment of truth from the terminal run the hard hat deploy script again but this time make sure the network option is set to matic that should deploy the contract to the mumbai network make sure to copy the address and update it in your frontend code in the main.jsx file you now have a web3 application running out in the wild and you could follow the same basic process to deploy to the main net i'm going to go ahead and wrap things up there hopefully that gives you a general idea of all the steps involved in building a dap the final thing i'll mention is that if you want to purchase these nfts yourself you can do so on openc i don't know why you ever would but they're there if you want them thanks for watching and i will see you in the next one

Channel: Fireship

Views: 273,919

Keywords: webdev, app development, lesson, tutorial

Id: meTpMP0J5E8

Length: 23min 25sec (1405 seconds)

Published: Tue Jan 18 2022

Reddit Comments

[u/web2survivor]

Very helpful tut thanks I will follow the steps these days. Dude has a nice ways of explaining

[u/This-Taro-3870]

This is a difficult question to answer. On one hand, it could be argued that creating a WEB3 app that mints unlimited NFTs could be a very valuable resource, as it would allow for the creation of an unlimited number of digital assets. On the other hand, it could be argued that doing so could devalue NFTs, as more and more people would begin to create them. Ultimately, it is up to the individual or organization to decide whether or not creating a WEB3 app that mints unlimited NFTs is worthwhile.

[u/joeahoymellk]

web3 is incorporated into SYLO and it has a smart wallet which help users mint NFTs of their choose.