Build an Evolving NFTs (Pokemon) Web3 App in 15 Minutes! | Custom smart contract tutorial

today i want to show you how easy it is to build web 3 apps from scratch including the smart contract using the throw web development stack i got a little idea for this app i found this cute squirtle and tour toys pictures and we're going to build a little web 3 app that lets you mint squirtles and combine them together to get a tortoise nft currently 71.4 percent of people who watch our web 3 videos have not subscribed to the channel so if you've taken away any value from what we're doing can i ask just one small favor hit that subscribe button and join the 29 each week we are going to be airdropping a very special and rare third web nft to 10 subscribers everything starts with the contracts i want to build my own contract for this add my own logic to it all i do is jump to my terminal and type npx through web create this is the starting point for the third web development stack from here it asks me what do i want to build first the app or the contract and in this case i want to start with the contracts so i'm going to call it evolve okay pokemon and this is the contracts it asks me which framework i want to use i'm going to go with forge here it asks me if i want to start from an empty contract or one of the bases that the web provides and in our case we want to have people mint multiple squirtles and combine them to get a tour toys that is very adequate for a erc 1155 contract that lets you mint copies of the same nft because i want other people to be able to claim the nfts for themselves i want to choose a base that allows me to lazymint me as the creator so that other people can claim on it so i'm going to choose that base and it's going to create a brand new project for me let's have a look at what it creates so i'm opening the project in vs codes and we have just one contract here that extends the base that i chose which is the year c1155 lazy mint let's rename this contract so we're gonna call it pokemon evolve contracts and let's have a look at what uh the constructor looks like here uh name symbol that's fine royalties i don't really need royalties for this app that i'm building so i'm just gonna delete these and set some defaults um it's gonna be for me and zero as the royalty i can check what this base has under the hood and i see here that it has a claim function for people to claim lazy minted nfts and there is a verify claim here that tells me i can override that verify claim function to control who can claim on my contract so i'm just going to take this and paste it here to override the behavior um i just need to change this with overrides and now i can put on my own logic to control who can claim on my contract so we're gonna have two types of nfts squirtles and tour toys right so i want people to be able to claim squirtles but i don't want people to be able to claim tortoise because that's gonna be only available yeah merging and evolving to squirtles here i can say require and what is the condition the condition is that the token id which is going to be zero for squirtles required that the token id is zero and if it's not we can throw a nice error match message like only squirtle are claimable we can add other requirements here for example i can say hey actually um quantity you can only claim one at a time and we have a nice error message you can claim more than once but you can claim only one at a time now you can see how this function here i could add any logic that i want i could add that can only claim if you own another nft for example or i could require here that you pass some tokens to the claim call native or erc20s i could do all sorts of fancy verification here could verify an allow list all sorts of things i just need to override this function now we're gonna write our other function here which is going to be the evolve function and this is going to be completely custom to our contract and we're going to say when you call the evolve function we're going to burn two squirtles so from is the message sander id of the squirtle is zero and we want to burn two of them so that means that you have two squirtles to burn and if the burn succeeds then we're gonna mint you a tortoise so let's have a look at the mints mints requires who is gonna receive the token the token id that we're gonna so one for turtois the quantity so only one you get only one if you burn two and then an extra data parameters here we need to add public so that people can call it externally that's it that is going to be my contracts that i'm going to work with now i'm ready to deploy my contracts all it takes with the web is one simple command npx third web deploy i don't have to pre-set up anything i don't have to bring any private keys into my scripts or my local environment that command will compile my contracts upload the relevant metadata continue the deployment flow on the third web dashboard so here it's going to detect my pokemon evolve contracts confirm which extensions my contract supports extract the contract parameters that i've set on my contract and let me deploy it on any evm chain including l2s so let's fill that in i'm going to call it pokemon evolve and the symbol is going to be uh and then i am going to deploy to let's say arbitrary from here the dashboards the text that i want to deploy to arbitragely makes me switch my metamask wallet that i have connected and just like that i'm off to deploy my contracts and notice i didn't have to manage any scripting or any private keys it all happened from my browser from my metamask wallet so i confirm the second transaction to add to my dashboard and once the deployment is finished what i get from this is a automatically generated dashboard page for my contract that i just wrote so here it is we have contra explorer that lets me call all of my functions including the one that i just wrote right here i can invoke those functions directly from the dashboard here i can see all the events that happen on my contract and because it's an nft contract i also get a handy ui to perform minting lazyminting and display all my nfts let me upload a couple of nfts here uh one for my squirtle and i should have the file right here this is gonna be my first nft and we can add descriptions and meta and this is gonna mints sorry lazymint a nft on my contract that i just deployed i just wrote and deployed and here you go here's the first nft and now let's spin to second one for the tour toys there we go i'm gonna accept the transaction to mint to lazymint so these are lazy minted tokens that i prepare on my contract for other people to claim and because they're erc 1155 people can claim multiple copies of it as long as they pass my requirements that i wrote on my contracts all right so here we have our two nfts supply is zero okay and from here i can test my contracts right here from the explorer for example i can say let me claim a couple of squirtles so i'm going to copy my address here i'm going to be the receiver token id is 0 and quantity is 1. if i execute this this will call the claim function on my contract and execute my verification as well so i should be allowed to claim one of the squirtles here all right here it is so the transaction succeeded which means if i go back to inft is now the supplies one i own one of those squirtles this shows you how you can interact with your contract directly from the generated dashboards on the web but what's more interesting is to build your own app that allows people to interact with your contracts and for that all you need to do is go back to your terminal and this time type throw web create once again but instead of choosing contract this time i'm going to choose app let's call it evolve pokemon app and i'm going to choose net.js and typescript so this is going to create a nexjs project for me with all the minimal setup i need to write my web 3 app now i'm ready to open the projects that got created uh so this time it's app let's have a look what got generated here so we have a next.js project with an app and the first thing you want to do is change your chain id that you're going to be working with so we deployed our contract to rb trim gurley so i'm going to switch it to that this is all ready to go for me and this is the homepage of my app you can see that it has a connect wallet button uh with a color let's have a look at what the app looks like with nothing i'm just going to run yarn dev and open it up right here i'm gonna put it side by side so you can see the code and the app at the same time so by default all you get is a handy connect wallet button and i can i'm not sure i like this red here we're gonna make it a a blue so let's make it blue and this is my account my wallet connected to arbitrary gurley here i can switch chains i could copy my address i can disconnect and reconnect so this already handles all the wallet connection for me so now what i want to do is start doing actions on my contracts so in order to get my contract all i need to do is use the third web react sdk to get a handle on my contracts and for that i just need to use the hook use contracts now use contracts requires an address and this address i can find on my throw up dashboard so here it is i'm going to copy this and paste it in here and import the hook from i thought it reacts so now i have a hook on my contract i can do interesting things with it for example you can see all sorts of useful actions i can do here but because we're in react lens react offers a lot of useful hooks that i can use one thing that i want to show is the nfts that the connected wallet owns so for that i can just say use owned nfts and it requires passing just the contracts as well as the owner wallet that i'm supposed to check for so how do i get the owner wallet very simply all i have to do is call the hook use address and this gives me the the currently connected address or undefined if it's not connected so now i can uh get these nfts and we're going to call them nfts and all that's left to do is for me to display them so let's uh let's do a little divider here we're not going to do too much styling but um here i can say hey take all the nfts that you fetched to display them we're gonna put them in the div uh we can start with just showing the name for example so here he wants a key because we're mapping so the key is going to be nft.metadata.id and we have to make it a string to string let's refresh that if i connect my wallet uh and i just display the name there you go now i can see the name of the nfts that my address owns now let's make it a little bit prettier here and we're going to show the image because that's kind of what represents the most the ft and for that we have a very handy um component called the third web nft media now uh let's look at what he wants he wants a meta and the metadata is going to be nft the metadata like this there you go now show my squirtle and the name of the nft that's to display nfts from my own contract now what if i want to do actual minting from here so for that we have a very handy component called the web 3 button and the web 3 button what it does is it allows you to call any action on any contracts with just a few lines of code so here the action is going to be claim a squirtle what it wants here is going to be a contract address and an action okay so the contract address i have right here it's going to be my contract address from before and the action is going to be a function that gives me my contracts and i can do whatever i want from from here whatever action i decide so what do i want to do i want to claim a squirtle and our contract is a erc 1155 so i can go contract.1155 dots and here i have a ton of handy functions that i can call and what i'm interested in is claim and claim requires the token id which is gonna be a zero for a squirrel and the quantity so one so i've done my web 3 button now has the contract address has the action and here it is i can click on it and this handles everything for me pops i made a mask and it's gonna call the right action on my contract so now if i confirm this now we didn't build any confirmation here but here this when this finishes it should show me uh on the dashboard that now two squirtles have been claimed so let's have a look let's go to nfts and now you can see that now two squirtles have been claimed we could display down our front end two by the way and now that i have two squirtles i should be able to call my evolve function so let's do another web3 button just copy that and the way through one this time is going to be called evolve and we can give it a it's not going to do a claim let's leave that empty for now and we can um we can change the color of it accent color it's going to be red and we need to implement this so what do we want to do for evolve we want to call our custom function that on our contracts this is our contract here we want to call this evolve function how do we do that once we have a hold of our contract we can call any function that we want on the contract all we need to know is not the name of the function so here it's evolve and the parameters that you're supposed to pass and evolve doesn't have any parameters so we don't need to pass anything here's our evolve button and now if i click on it now it's going to call my custom evolve function and if i confirm here it burns my two squirtles and minted me a tortoise if i go to the back to my dashboard now look at my nfts now the supply of squirtle is zero and there is one turtle is claimed this is how you can build a web3 app including the smart contracts very easily in honestly just minutes all it took is going to the cli calling npx third web create creating the contract first customizing that then creating the app and using the react hooks and walk-through button we're able now to interact with our contract from our own front end this can be applied to build any web 3 app that you can imagine you can have a completely custom contract or start from a base and you can have a completely custom front-end that interacts with that contract and really builds anything that you imagine in a very small amount of time that's the power of the third web development stack if you like this video and want to see more hit that subscribe button and i'll see you in the next one [Music]

Channel: thirdweb

Views: 12,822

Keywords: blockchain, ethereum, smart contracts, blockchain tutorial, what is blockchain, blockchain technology

Id: cKc8JVl_u30

Length: 21min 1sec (1261 seconds)

Published: Fri Sep 30 2022