Create an NFT Lootbox for blockchain games or NFT trading card platforms (NBA Topshot clone)

in this video we'll be creating a set of nft loot boxes using thirdweb's prebuilt smart contract called the pack we'll firstly create a collection of erc 1155 nfts as well as our own erc20 token which we'll use to bundle up into a set of loot boxes that can be opened by a wallet to randomly reveal some of the tokens that we bundled up to create the packs remember you can always access the source code for this project in the description and if you enjoyed the video please remember to hit the like button and subscribe for more web3 tutorials like this without further ado let's get right into the tutorial so the first thing we want to do is go to thirdweb.com and we'll be going to the third web dashboard to deploy our token contract our erc 1155 nft collection as well as our pac contract so the first thing i'm gonna do is go and deploy a pac contract and to do that just go ahead and click deploy a new contract and if you haven't already you'll be prompted to connect your wallet before you get to this step and if you don't know what that means we'll have a guide in the description of how to get set up with some test funds as well as create your very own uh wallet using metamask i'll assume that you have already got to this point and you're ready to build your contract out now so let's go ahead and click the pre-built contracts and the first one we're going to do is the pack nft collection to do that we'll click create nfts and tokens and we'll go ahead and click the pack collection here now and you can see it's an erc 1155 nft collection which basically just means instead of each nft having one unique copy each nft can have a certain amount of quantity like you can configure each token to have 10 copies of that nft or 100 copies of that nft and things like that so it's rather than a one-of-one you can have multiple copies of each nft let's go ahead and click the pack pre-book contract and here's where you'll be prompted to set up the metadata for your contract so you give the name an image a symbol i'm just going to call mine cool packs and here's where you can also set up things like royalty fees which is fees that you take on secondary sales of the nfts in this collection and i'm going to go ahead and select the go early test snap for this project once you're ready go ahead and click the deploy now button down here which will prompt you to deploy a proxy contract and if you want to learn more about proxy contracts we'll have a resource in the description for that as well and here's where we get to see thirdweb's contract explorer and you can have a play around on this page if you want it basically shows you all of the functions available on the pac contract so we have things like create pack grant roll which is in terms of the permissions if you want to have a play around with that feel free to do so and you can also notice we have tabs unlocked here so we have the nfts tab we have the permissions tab activities settings source and feel free to have an exploration if you haven't done so already but in order to create some packs we actually need some tokens to bundle up into those packs and to do that i'm going to be using the edition pre-built contract that thoroughbred provides as well as the token pre-booked contract so let's go ahead and create that edition pre-built contract now now the edition is similar it's a prebuilt contract under the nfts and tokens category and this one is also erc 1155 so you can have multiple copies of each nft once again go and set up the metadata for your contract for this nft collection we'll be creating nfts out of pirate items like swords hooks or compasses and things like that and we'll be bundling them up into our packs which are going to be treasure chests so let's go ahead and call this one cool pirates cool pirate items maybe and once again you can set out the royalty fees and description image symbol things like that but just for this tutorial i'm going to give it a name and we'll once again deploy this to the go early test network looks like we deployed successfully so let's go ahead and mint our first erc 1155 nft into this collection to do that we'll click the mint button and here's where you'll be prompted to upload the metadata of your nfts now i have got a pirate sword here that i'm going to drag in for our first nft and this one will be called the sword you can give it a description uh if you choose let's say it's a sharp one and then we'll provide some initial supply so this is how many copies of this particular nft that will be in uh circulation so you might want to do some thinking ahead of time about how many packs you want to create and how many nfts are going to be within those packs so for example if i wanted to have around 10 packs and i wanted five nfts in each pack i probably want to create 50 total nfts because we'll have five of each in those 10 packs which is going to equal out to 50 as you know 5 times 10 and you will want to do some kind of planning ahead of time to make sure that you have the right amount of nfts for the right amount of packs that you want to produce so for this i'll just go ahead and create 100 and click the create nfts button and what this is going to do is it's going to mint 100 of this particular nft so as you can see we have an approval for a transaction here i'll go ahead and confirm this one and once that transaction has gone through successfully it might take one or two seconds for your nfts to show up in this overview tab here so we have our media we have our name we have the description and behind the scenes all of this metadata has been uploaded and pinned to ipfs and if you don't know what that means we'll have another resource in the description to learn more about what pinning metadata means in ipfs and how thurb handles that behind the scenes for you but as you can see we have 100 swords successfully minted and you can play around with these buttons here we have transfer airdrop burn so maybe you want to airdrop people that maybe hold the specific token or things like that just to demonstrate how you can have different levels of rarity in these packs i'm going to go ahead and mint a more rare nft and for this one we'll give a golden sword so i'll say gold and sword and rather than a hundred of the silver swords that we created this one's only only going to have five in total supply and this means when we create the packs we bundle these together as you can see if we have a hundred swords compared to five golden swords the chances of you randomly selecting one of the golden stars is significantly lower than opening one of the silver swords and this is just going to be another mint transaction that you need to approve and you can have however many nfts that you want but you can tell that if we have only five of these golden swords compared to 100 of the silver swords it's going to be significantly more likely that you get a silver sword rather than the golden sword and you can kind of achieve that rarity that you want on a per nft or per token as we're about to create basis so now we're happy with our cool pirate items let's head back to the third web dashboard and we'll click deploy new contract again we'll go ahead and click pre-built contracts once more and create nfts and tokens and the token contract now this is an erc20 token which essentially just means it's kind of a cryptocurrency or a collection where each token in the collection is worth the same as each other token and that's known as fungible tokens rather than non-fungible tokens which is the nfts so let's go ahead and click the token and once again you fill out the metadata let's call this gold if i could spell gold coins and we'll deploy this to the go early network as well so once that transaction has approved you will have your own erc20 token and you'll need to go ahead and mint some supply of this token as well and just so you get a bit of a clearer understanding of how these packs are going to be created i've just cooked up this quick diagram where we have our silversword nfts so we have 100 silver swords we have five gold sword nfts and i'm going to go ahead and mint 45 gold coin tokens and as you can see all of these will be bundled up together and this is a total of 150 tokens now let's say we wanted 5 tokens per pack and we can say 150 divided by 5 is 30. at least in my head that's 30 i hope that math is correct but this is 30 packs so 30 packs with 5 tokens per pack and that's why i'm going to go ahead and mint 45 of these one thing to keep in mind is that you don't have to have exactly one of the token go into one reward so you can have multiple rewards per pack but you can also have multiple quantity of each reward so for example if i wanted to give out five swords per pack maybe i would say each reward that goes into the pack is five swords rather than one sword and you can kind of see how this will be relevant to erc 1155 nfts that we're working with now or especially relevant to the erc20 tokens if you wanted to say rather than give them one gold coin you could give them five gold coins so that they could buy a sword from the shop or something like that but it's something to keep in mind you will need to do a little bit of planning ahead of time of how many tokens goes into each reward and also how many rewards go into each pack so you'll need to do a little bit of planning a little bit of maths and calculations before you come up with a plan of how many packs are going to be generated and how many tokens are going to be given out in each pack but looks like the min 2 transaction for the erc20 tokens has come up so go ahead and confirm that transaction as well and what that's going to do is it's just going to mint 45 of the elc 20 tokens in my case it's the gold coins into that erc20 collection and at this point now we have the actual nfts and the tokens that we're ready to bundle up into the packs and we're going to go ahead and jump into some coding now using the typescript sdk to create these packs with these tokens bundled up together and then what we're going to do is we're going to build out that web application where users can connect their wallet see how many packs they have and open one of those packs to see the rewards so let's go ahead and jump into the coding side of things so i'll bring up the terminal now and the easiest way in my opinion to get started with third web is to use the third web cli and the third web cli has a mpx third web create command which is going to allow you to create a boilerplace boilerplate project with the tools and the frameworks and the languages that you prefer so the first step is to give your project a name so let's give it a name of pirate pax and you can now select the framework you want to use you can use next.js you can use create react app and recently we added the veet option if you want to use that i'm going to go ahead and use the next.js and here's where you get to choose javascript or typescript i'm going to use typescript you can feel free to choose whichever you prefer what this is going to do is it's going to pull the third web example next typescript starter repo and as you can see if you have a play around in here we're about to see it in visual studio code as well but essentially it's just a really boilerplate code with the thorweb react sdk installed as well as the third web typescript sdk and a basic wallet connection on the home page here so what that's going to do is copy that and once it's downloaded successfully you'll be able to change the directory by saying cd into the directory that you just created and if you want to have a play around you can do code space dot and open up that in visual studio i'll zoom in a little bit here and you can see the pages that we created so we have underscore app.tsx we have index.tsx which is the home page and inside the app we have the third web provider wrapping that application now the first thing you want to do is change this active chain id since we didn't apply to mainnet we deployed to the gowelli testnet i'm going to go ahead and change that from mainnet to go early and under here you can see it has all of the dependencies installed we don't have to run npm install and if we want we can open up a new terminal and run the yarn dev command to see what we have installed and running and visit localhost 3000 to get a preview of this application so as you can see if i zoom in a little bit we have a very basic connect with metamask and shows your address if that user's wallet is connected and a disconnect while a button the first thing we want to do though is we'll go back to visual studio code and we'll create a scripts folder now within this scripts folder we'll create a script called bundle packs i'm going to be using the dot mjs uh file extension and this just allows us to run it from the command line a lot more easily without running into errors about imports and things like that the first thing we'll do in this script is instantiate the third web sdk using our wallet's private key and to do that we'll firstly import the third web sdk from at third web dash dev sdk which is the typescript sdk and then we'll read our environment variables to read our private key and instantiate the third web sdk from that securely without exposing our private key in the source code and we'll be using the library fs to read in this chest.png file which is the if i could zoom in here here we go is the treasure chest file for the packs that we're going to be creating and we'll firstly be uploading that image to ipfs using the sdk and then using that ipfs hash as the image metadata for our pack nfts that we're going to create so make sure you have a file called chest png or whatever you're going to call it maybe yours isn't pirate packs maybe it's a basketball player packs or something like that so you'll just need some kind of file that you're going to upload as a metadata image for the actual packs themselves next we'll create a async immediately invoked function expression which is basically a fancy way of writing a function that gets run immediately so when we run this script it's going to just run this code inside here and within this we'll firstly get all of our contract addresses from the three smart contracts that we just deployed on the third web dashboard and you can get those from this button underneath the name of the contract that you deployed just go ahead and click that so this is our token and you'll click it for the edition as well as a packs and just paste them in to variables called pack address token address and edition address so that we can reuse them throughout the code next we'll instantiate the third sdk so we'll say from private key and we're reading in our private key environment variables and we'll explain that in a short second if you don't know what that means and make sure to configure the second value to be the same chain as the contracts as you deployed so if you're using mumbai then go ahead and use that if you're using gowoli like we did in this video make sure this value is go early in here i'm not sure if i'm pronouncing that right but hopefully you get what i mean and next we're going to get the pack itself using the sdk so say sdk dot get pack using the pack address and what we'll do next is we will set the allowance that the packed contract has over the token contract and what that means is when we're bundling them together the pac contract needs the permission to transfer funds from the token contract itself into the packs that we're going to create and since that action is coming from the pac contract it needs that specific approval from the token contract in order to do that and we're going to do a similar thing here for the edition and what we're going to do is we're going to write set approval for all rather than set allowance and this is just difference between nfts and elc 20 tokens but this is the same sort of premise we're saying explicitly to the edition contract you know hey it's okay our pac contract can have the permission to transfer tokens from the nft edition contract to the pac contract we need to do this because the pac contract has to have that permission in order to be able to create the packs from the nfts and from the tokens and the next thing we'll do is we'll read in the chess.png image and what we'll do is we'll upload that using third web storage sdk so we'll say upload the chest to ipfs or wait sdk does storage dot upload and what this does is it uploads the image file to ipfs and pins it in the background for you and you can grab each of the files that you uploaded so you could pass in many files and what we're doing is we're grabbing the zeroth which is the first one that we uploaded since we're only uploading one it looks a bit silly but we have the url of the first image that we just uploaded to ipfs and we'll be using this image as the metadata in the next step here so we're going to say await pack.create and this is going to be where we put the code of the tokens that are going to be bundled up into the creation of these packs so we'll say firstly we have the pack metadata which is where this image url comes in handy so we have the name of the pack is treasure chest the description is a chest containing tools and treasure to help you on your voyages and the image is that treasurechest.png file that we uploaded to ipfs in this previous step and now what we want to do in this pack.create function we're going to specify the erc20 tokens we're going to specify the 1155 tokens and if you have erc 721 tokens you can also add and bundle those up together as well but since we created an edition and a token the first thing we want to do is set those erc20 rewards which will be our tokens since we only have one token we'll just put a array of objects which contains one object which uses the contract address of our token address which we defined up here which is our erc20 token address and you can see this is where you could customize how many rewards of each token go into an actual reward so you could change this instead of being one you could say for each reward i want to give out five gold coins and then this quantity is how many of those rewards go into the packs so it's kind of how many are in each reward how many rewards there are and this is the total amount that go into all of the packs so you need to configure that to your liking i'm just making it simple here where we have one gold coin going into each reward the next one we'll do is specify the nfts that we want bundled up in this erc 1155 rewards array here now since we have two nfts that we're going to bundle up into these tokens we'll have two objects in this array rather than just the one for erc20 rewards so here is the first one we have the silver swords and this just identifies the silver sword using the contract address and the token id so the addition address is the addition contract that we created so if you go up to the dashboard and you go back to your edition this is the contract address here and you can see id 0 is the token id for the silver sort and token id one is the idea for the gold sword that we're about to add after this one so here we have contract address is edition address circuit id is zero quantity per reward again it's the same situation as above you can have multiple swords or multiple nfts per reward and this kind of all ties together of how many packs you want to create and how many rewards you want per pack so next it's pretty much the exact same so we want the gold swords which as we mentioned was token id one and we have one quantity per reward and the total rewards is five the final thing you want to configure is the total rewards per pack so this is how many tokens get opened when you open a pack or how many tokens get selected randomly when you actually do call that open function now since we wanted five tokens per pack we'll say rewards per pack is five here and you can configure this and do the math of how many packs you want to create given the amount of tokens that you're trying to bundle up but as we did in that calculation of that diagram we're going to be creating 30 packs from the 150 tokens that we're bundling up here together so this will give us 30 total packs with five rewards per pack and we have different kinds of tokens and different rarity for each of those tokens so the most common thing that you're going to be opening is the silver swords so you'll probably be opening multiple silver swords per pack and if you get really lucky you'll get a gold sword in a pack but most likely you'll probably get a combination of the silver swords as well as the gold coins that we created and the really rare packs will open up a gold sword here so now the final thing we need to do before running this code is we've imported this private key here from our environment variables now if you don't know what environment variables are it's pretty much a secure way of importing sensitive values into your scripts and to do that we'll create a file at the root of our project called dot env dot env and what you'll do in this file is firstly you never ever want to commit this to git so you can go into the git ignore file if you do have one and what you want to do is just put env in here and that will mean that you never commit this file to git and you never want to share this file with anyone it's really important that you don't leak your private key when you do this and please make sure that you don't share this with anyone and don't commit this to any repository this should always just be a local machine thing and this should never be leaked anywhere because anyone who sees this can access the funds within your wallet and we'll have a resource in the description to learn more about private keys and how you can export your private key i'm not going to show you my private key value here but what you want to do in this file is just create a variable that looks like this so you have private underscore key and then you'll paste your private key that you get from your wallet such as a metamask wallet and it will look like a big long string of numbers and letters and once you're done with that just save this file and close it and please remember never to share this or never commit it to any repositories once you're done with that remember you always should have the correct network setup in this the web sdk instantiation but once you're done with that we'll open up the terminal window and what we'll do is we'll run node and we'll just pass the file path of the script that we just created so for me that's node scripts slash bundle packs.mjs and if we run this what it's going to do is run all of the code in this function here and hopefully we'll reach this console log down the bottom here and we've added these console logs along the way to sort of see where it's at so we should see the set approval for tokens that approval for addition hopefully if all of our packs are created successfully we'll reach the bottom of the file here where we have packs created and next we have set approval for edition uploaded the asset to ipfs and now we are here on line 40 we're creating the packs and bundling those nfts and those tokens into our packs here and it looks like we were successful in creating the packs so just to double check let's go back to the dashboard we should see now that we have successfully minted 30 of these treasure chests and on the dashboard you should be able to see that you've successfully minted a total supply of 30 of the treasure chests and you should be able to see the asset that you uploaded in my case was the treasure chest here as well and the description and all of this metadata has been uploaded and pinned to ipfs for us in the background let's go ahead and start building out the application that lets users connect their wallet and open up their packs to do that we'll go back to the pirate packs repo and now we're going to exit the scripts folder and we'll go back to the index.tsx file first thing i'm going to do is copy and paste the styles i have from another repo and you can feel free to use the same styles i'm going to be using in this project if you go to the source code in the description i don't want to go through too much css in this video as it does is a bit of a pain and there's quite a lot of it so feel free to copy my css if you're going for the same look and feel of the application but otherwise i'm just going to be referencing that file without explaining it too much now the first thing we want to do is we want to connect to our pack contract and we can do that using the use pack hook and to do that we'll say const pack is equal to use pack and here is where we simply paste in the address of our pac contract so for me that looks like that and we have successfully connected to our pac contract and next what we want to do is we want to load the nfts that the connected wallet has from this nft collection because when you think about it the pack is really just a collection of erc 1155 tokens in each different kind of pack you could have multiple different kinds of packs maybe ones more rare than the other or more expensive than the other and with each of the webs nft contracts comes this hook called use owned nfts and if i just go ahead and import that from the react package up here this comes back with all of the nfts that they're currently connected while it owns as well as a loading flag here now behind the scenes this is using react query which if you're not familiar has this syntax where you have the data and it comes back as is loading it can have things like is error here and things like that so pretty handy and what we're doing here is we're grabbing the data destructuring that from the hook that comes back and renaming that to nfts so if we say console.log pack pack and console.log nft is nfts and we hit up the terminal we can run the yarndev command and go back to localhost 3000 and in the console if we click f12 you should be able to see pax is the pac contract here and nfts is currently undefined because we haven't connected our wallet so if i zoom in once again we can see if i connect here nfts should go from undefined to a array of the nfts that i currently own once that information has loaded so it looks like it's come back now i'll zoom in in the console as well for you and as you can see our pack is a contract here and all the functionality that we can interact with that pack is available and the nfts once that information has come back from the contract is now an array of objects that they currently connected while it owns including the owner the metadata that automatically gets resolved from ipfs as well as a supply and this is currently in a big number this is just hexadecimal format but basically this represents a number and we're going to use the ethers library to convert that from a big number to a real number that a human can read if you can read hexadecimal that's good for you but it's probably more useful if we convert that so if i go back to visual studio code now we're going to write the code that transforms this nfts array into an array of items on the ui to do that we're going to use the map function to run over each of the items in the nfts array and transform them into an item on the ui so firstly we will create a top level div that has a class name of container and we'll need to import all the stuff they're about to use but we'll do that afterwards and what we'll do within this div we have another div that we are using the is loading flag that came back from the hook of use owned nfts what we'll do here is we'll have a loading tag if that information is loading so that the user knows that information is coming back and that something hasn't gone wrong but if the nfts did come back from that hook what we'll do is we will create another div where we'll inside this div map over each of the nfts now if you're not familiar with map basically it runs over each of the items in the array and this nft you can access the nft or the item in the array that's currently being iterated on so what we'll do is we'll transform each nft in the array into a div and within this div what we're going to use is one of third web sdk's ui components called the third web nft media component and what it allows you to do is pass in the metadata to this component and what it does behind the scenes is it detects the file type and displays a component a html component that corresponds to that kind of file type so for example if we have an image metadata for our nft it's going to show us an image tag but if the metadata was an mp4 file or an mp3 file or you know some other kind of file what it does is it renders this renders it correctly on the ui for us so that we don't have some crazy logic of resolving that from ipfs and then determining what kind of file type it is and this is really really handy if you're trying to just render out the nfts like we are and beneath that what we're going to do is we'll have the nft metadata.name so this is just the name of the nft i think we called it a treasure chest or something like that and what we'll do beneath that finally is what we'll have is a button that calls the open function now we haven't written the logic for the open function just yet but we'll write that shortly after we finish rendering out the nfts on the ui finally we'll add the closing div tag and this is all the logic that we need to render the nfts on the ui i'll go ahead and add all of the imports here so we're missing the styles import it looks like so paste that in and it looks like we're missing the third web nft media which should be available from the react sdk so we'll just go ahead and import that and we add our styles on the app.tsx file this is just our global css go ahead and paste that in here as well if we visit localhost 3000 now and looks like it's been doing some stuff in the background but go ahead and connect your wallet and you should see now our metadata gets resolved from ipfs for each of the nfts in this nft array and we have a button that calls the open function which we haven't written yet we're about to go ahead and write that now and next thing we want to do after we write that open function is display the tokens that got opened from the pack so that the user knows what tokens they just opened after they clicked the open button and approved that open transaction so let's go ahead and write the open function now and then we'll move on to the rendering of the tokens that we opened up so if we go back to our index.tsx in our project we can begin to write this open function now and the way that we're going to do this is we're going to call the pack.open function and store that result in a variable and then set that variable in state so when that state updates we can show it on the ui in a new section that we're going to create down here so let's go ahead and write async function open i think we call it open right and what this is going to do is we can call the pack.open function and as you can see this takes in two parameters the first one is the token id of the pack nft that you're trying to create for us that's zero as you can see on the dashboard here we have token id 0 and so if we go ahead and open token id 0 the second parameter is the amount so you can actually open up multiple packs at once as long as they're the same pack so you could put in a text field where you have a configurable quantity if the user wants to open up more than one pack at once but just for simplicity in this example we're just going to say open one pack at a time and what we're going to do is we're going to store the result the awaited result of opening that pack in a variable called opened rewards is equal to await the result of that and now what we can do is above this function we'll have a stateful variable called opened pack rewards is equal to set open sorry this is just destructuring the react use state so you'll need to import use date from react as well and what this is equal to if you're using typescript you can set this to pack rewards which is a type which if you control click into this you can see is using zod to okay maybe that's not that helpful you can actually see the open rewards so you can have an object containing uh three objects one of those is the erc20 rewards that you opened which could be our gold coins for example you could open erc 721 rewards we didn't have any erc721 nfts bundled into our packs when we created them so probably won't have that in our packs for this example and we're also going to have elc 1155 rewards which would be our gold swords or our silver swords so you'll be able to see all the different kinds of rewards that you opened from that one pack and what we're going to do in this open function is say set open pack rewards is equal to the result of awaiting that pack.open which will contain the nfts and the erc20 tokens that we opened and just for good measure let's go ahead and console.log the opened rewards here as well it's just so we can view that in the console now the next thing we want to do is we want to display the tokens that the user opened after they opened them so if we go down here and we collapse the div that we just created that maps over the owned nfts what we're going to do in this section beneath this is we're going to once again we're going to map over the tokens to kind of transform each token into an object that shows the image and shows the metadata of the tokens that were opened up now if you take a look at the type that comes back you can see it just provides the contract address and the token id if they are nfts now since we want to show the metadata of the nfts and the metadata of the tokens that got opened up we're going to break this down into components where each component loads the metadata of the token that we're trying to show and it's going to match a similar kind of structure where we have the mapping over the tokens so what we're going to do is map over each erc20 token as well as each erc 1155 token and do a similar thing here where we transform them to show the metadata show the name and basically it's going to be a similar structure but since the metadata itself doesn't come back from this function we're going to break it down into components so that it's more reusable and more manageable so what i'm going to do down here beneath the div where we showed all of the owned pack nfts what i'm going to do is create a bit of a separation using a horizontal line it just has a bit of styling to split up the page a little bit and then we'll have a new heading that says open rewards so this is the section uh it's more obvious to the user that this is what they've just opened from the pack and then what we'll do is we'll check to see if the open pack rewards has actually been set yet and if you recall in our open function we have a undefined state of open pack rewards before the pack has been opened and once that is opened this value will stop being undefined and it'll start being of type pack rewards and will contain the tokens that we opened from that pack so this line is essentially saying is there a opened pack and is there any erc20 rewards in that pack because some packs might only have nfts and not have any gold coins so that's why we need to make that check here and then we have another subheading that says this is the esd20 erc20 tokens that you opened from the pack and a div and here is where we do the magic again with the map function so we're mapping over each of the esv20 rewards you can see this is an array of objects that contains contract address and quantity and what we're doing is we're mapping over that and converting it into a component that i've called erc20 reward box and now we haven't created this component yet but we're going to do that very shortly but before we make those components i'll just go ahead and copy and paste the logic for the elc 1155 tokens so we're doing the exact same thing we're checking is there any rewards that have been opened and do those rewards have any erc 1155 nfts and if they do we're mapping over each of them and converting them into a new component that we're about to create so the next step for us is to actually create those components so at the root of your project go ahead and create a new folder called components and within them we'll be creating two new files the first one is the esc20 rewards box dot tsx and the second one is the erc 1155 reward box dot tsx and it'll become a little bit more obvious why we have two components rather than just one and it's because the way you get the metadata of the contract itself and the nfts is a little bit different between the eos at 20 way and the esc 1155 way and that'll become obvious as we start to write these out for the erc 20 reward box the first thing we'll do is import all of the stuff that we're going to use so we need react we'll need a few things from the react sdk and this is just some styling that i've made up again you can use that from the source project as well and then what we're going to do is if we take a look at the type if you're using typescript uh if you're using javascript this won't be as relevant but if you take a look at the type that gets returned for erc20 rewards we get back the contract address and the quantity so we can take that and use that as the reward prop and give that the type just copy paste that for the reward prop and as we see down here this is what we're mapping into so we're saying the reward is equal to the reward and that will match up with the type there so then we move on to the creation of our functional component and we're accepting the reward as props into this component and the first thing we do is grab the token contract itself using the contract address of the reward that gets passed in into this component now as you can see this is a hook for getting an instance of a token contract it supports erc20 compliant tokens and this is going to grab the token instance and you can access all kinds of things on this so you can access the allowance the balance get the metadata as we're about to do you can mint some if you have the permissions to do so and this is just a really helpful instance of the token itself but what we want to do as github copilot seems to be knowledgeable about is we want the metadata of our token so if we go ahead and destructure the data as we have with our previous hooks we have the use metadata hook and we pass the token itself into that hook and we get back the metadata about that token so we'll get back things like the symbol the name the description the image all that stuff that we uploaded into the dashboard uh when we first created and deployed the token now we're ready to use the metadata of the token to display something on the ui so we'll add a return statement and just add some basic styling and divs and this is just a flag to say okay if if there is and when there is data this is what we're going to show and here is what i've decided to show for this component so we have a similar structure as we have for showing the owned tokens the owned pack tokens of the connected wallet the first thing we have is the third web nft media component and what that's going to do is it's going to accept the metadata of the token so if you uploaded an image for your token this will render out that image i don't think we did so i'm not sure what's going to happen it'd probably just be empty for us but if you did upload an image it would show that information in this the web nft media component and then we have and the name and the amount so this is the amount of tokens they earned from that pack the erc 1155 component is very similar but there's just a few differences in the way that we load the metadata since we want to load the metadata about the specific nft rather than the actual contract itself so the first thing we'll do is we import all the necessary stuff from the sdk we're using the big number type from ethers if you're not using typescript you don't need to worry about this but then we have react and styles once again and we go through the same process to view the type that comes back for erc 1155 tokens so you can just grab that and copy paste it into your type here so this is the reward prop that we're passing into this component and as you can see it's a little bit different compared to the erc20 reward in the in the token we had contract address and quantity in the nft we have the contract address the token id and the quantity as well so the difference is we have a token id which is the token that we're going to load metadata about rather than loading metadata about the actual contract from here we can do a very similar thing we have a functional component called erc 1155 without the second five here and we grab the addition contract using the contract address of the reward that gets passed in and then we use the use nft hook passing in the edition and the token id to load the metadata about that nft so instead of loading the contract metadata we've now loaded the nfts metadata so if they opened up a gold sword they'll view the gold sword name the gold sword image the gold sword description and things like that any extra properties that you added will be in this data field and from there we're pretty much doing the exact same thing we have the third web nft media we're passing in the metadata of the nft that we just loaded and we have the name here so now if we go back to our index.tsx and we just add all missing imports that'll import the erc20 and the erc 1155 tokens for us if we go back and look at the localhost now connect our wallet here and you can see we have this open rewards section now but since we haven't opened anything we haven't opened the pack yet let's go ahead and test out the logic of our open function first and see if the tokens show up in the open rewards section i've clicked the open button i've been prompted to accept the open pack transaction so i'll go ahead and confirm that one and what should happen here is the state should get set and the way react works is that whenever state changes the re-render will be triggered at that point we will be able to see the components that we rendered in the code in that section here where we have the logic to say is that a thing yet is there any tokens that we can map over and if there is then we'll start to map over them so once this transaction gets approved we should be able to see the open rewards that we just opened in here and as you can see we've opened up five nft swords and it looks like there's a bit of a bug in the logic of the not showing tokens we can go ahead and fix that right after but you can see the state has changed turns out in this pack we didn't get any gold coins and we exclusively got silver swords so it's pretty unlucky pack but i guess since the rarity we've configured the silver sword was the most likely item and as you can see that rarity and that randomness is coming into play here and let's go ahead and fix up this zero bug here i think i know why that is the case um so we have a bit of a problem in our conditional rendering here and this is a little funny bug we're actually checking if there is open wards and then we're saying if that's the case then render the length which is zero so we're literally rendering uh the number zero and the way that we can do this is instead of doing that we can say check if there is uh open packs open pack rewards erc20 rewards and and the length is greater than zero and we'll do the same down here so we'll say open pack rewards and and opened back rewards dot erc 1155 rewards and and the length is greater than zero so that should get rid of our zero problem here looks good and from here we should be able to see if we open up a new chest we should be able to see that we have maybe we'll unlock some gold swords or some gold coins let's see i just want to check the erc20 rendering logic actually works as i expected a little bit of a a funny bug to have there but if we open up a new pack what should happen is the state will be refreshed and the existing packs contents will be re-rendered into the new pax contents so if that transaction gets approved and this time we did get lucky enough to get some gold coins and since i don't have an image for the gold coin i don't have that show up here but if you did have that at the contract metadata level you would see the image of that nft media renderer component there so as you can see now we have the erc20 tokens section if there is eic 20 tokens in the contract or in the pack that we opened and then beneath that we have the erc 1155 tokens that we opened in the contract and every time you open one of these treasure chests the rewards will be refreshed and displayed live on screen and that is going to be it for this video i really hope you enjoyed building out this fun little project where we have an erc20 token our own nft collection of items and then bundling them up all together into a set of erc 1155 nft packs and i hope it's a lot of fun just even playing around with the application opening up the pack seeing if you get the rare items that you bundled up together if you enjoyed the video please remember to hit the like button and subscribe to the channel we'll be coming out with lots more content teaching you how to build out these awesome web 3 applications and smart contracts by yourself thank you very much for watching and we'll see you in the next one

Channel: thirdweb

Views: 6,387

Keywords: thirdweb, build, lootbox, nft, smart contract, erc721s, erc1155, erc20, metamask, pack, packs

Id: MBmQtpNLmgg

Length: 44min 42sec (2682 seconds)

Published: Wed Jul 13 2022