How to Build a Play to Earn Blockchain Game

in this video i'll show you how you can create a full crypto based play to earn game using third web nexus typescript as well as solidity to create our own custom smart contract by the end you'll have an awesome looking game exactly like this where we have two nft collections an erc20 token and a awesome little solidity smart contract that allows users to start earning erc20 tokens for participating in the game so if you're excited for this build and you want to see more awesome web3 content like this for free remember to like the video as well as subscribe to the channel but with that said let's jump right into the video the first thing we'll do is we'll head to the third web dashboard and deploy the nft collection for our characters of the game so if you go to thurwood.com click on the start building you'll be prompted to connect your wallet as you can see here and then from there you'll be able to deploy a new contract in the top right here so go ahead and click deploy a new contract and from this page you'll be able to see all of our pre-book contracts down here with the author of third web what we're interested in for our character collection is the edition drop contract so we have one nft multiple owners which follows the erc 1155 standard and what this addition drop contract does is it provides a way to release or drop those erc 1155 nfts and 1155 is just a standard where you can have multiple quantity or more than one quantity of each of the tokens in that collection so it's kind of nft they're sort of known as semi-fungible tokens where instead of you just having one to one mapping of token to owner you can have multiple owners of the same token or multiple quantity of that token so what we're going to do is we're going to upload the metadata of our contract here if i go ahead and find this on my end here we're going to upload this little character for our collection and this is the character for our game so everybody is going to receive a character that looks like this when they actually play our game and try and claim an nft but this contract metadata is actually the metadata of the contract itself so it's not to be confused with the nft metadata that you're going to be uploading in just a short moment so this is the metadata of the contract so let's call this the miners contract and then the symbol can just be miners and let's say these are the characters for our game and then down here what we're going to do is we're going to select the mumbai polygon test network and if you don't know what a test network is or if you've never used the sort of blockchain i've deployed a smart contract to the blockchain before we'll have a resource for you to get started with some test funds as well as set up with a wallet and then you can jump back into where we're at now but if you are familiar with deploying contracts to the blockchain then go ahead and click this deploy now button and it looks like it's prompting us to switch to mumbai which we'll go ahead and do switch network and we'll deploy the contract here so while that's loading what i can kind of explain is how these pre-built contracts work so you see in just a short second here we're ex we're prompted to accept this deploy proxy transaction i'll go ahead and confirm that so it loads in the background here but if we take a look at this diagram here you can see what's actually happening when you're deploying a pre-built contract and what you're doing is you're deploying a proxy contract over the third web-based contract and in kind of simplified terms without going too deep into the technicalities essentially what you're doing is you're deploying a contract that delegates the calls to sort of key functions to their webs based contract that we've deployed so we've deployed that sort of core foundational logic for the addition drop contract and what you're deploying is sort of the things that are different to other people's edition drop contracts so things like the name and the metadata that we uploaded and all of that kind of stateful information like what nfts have emitted into the contract is sort of stored in your world but all of the logic like minting nfts and transferring nfts would all be the same across every edition drop contract that has been deployed by a third web so what we've done in version two of the web which has been out for quite a while now so it's not really a new version anymore but what it does is it sort of delegates those calls to the third web-based contract and then runs that core logic since it's the same for every edition drop contract and then passes that information back to your contract for you to store that information and the important thing to note is you still have 100 control over the code and the contract that you're deploying it's just that the calls since all of that logic is the same across every pre-built contract that is being delegated to thorough's base contract that we've deployed and what that means for you is it's around 10 times cheaper in terms of gas to actually deploy this contract since every line of code that you're deploying to the blockchain costs you gas to deploy and cutting out that logic and delegating it to the base contract is an excellent way to sort of decrease that gas cost when you're deploying to that blockchain so it looks like that transaction has gone through and as you can see now we have the dashboard for our smart contract you can see we have things like the contract explorer here where we have all of the read and write functionality so we have things like the read functions of the roles the balance of a user to see how many tokens they have contract version contract uri all this good stuff and we can actually execute these functions directly if we wanted to from the contract explorer but what we're interested in is actually minting the nfts or lazy minting the nfts into our contract so if we go over to the nfts tab we'll be able to see this single upload as well as the batch upload button what we're interested in is the single upload since we only have one character nft i've only got art for one and what we're going to do is we'll upload this file and we'll upload our character and now this is the metadata of the actual nft itself so if we go ahead and say third web miner i guess and then the description can be characters for the p2e game and down here you can add properties so i guess we're going to add some we can say his shirt is looks like green to me and then looks like at least a little bandanna on there so we'll say bandanna is red and this is just extra kind of metadata that's going to show up on sites like openc and it's actually associated in your nft's metadata so if you're happy we'll click this lazy mint nft transaction down here and this is going to lay them into the nfts now if you don't know what lazymint means we're not actually minting the nft into our wallet with this transaction all we're doing is we're sort of preparing this metadata onto the blockchain so that other people can mint the nfts so rather than paying the gas fees for minting the nfts into the contract itself what we're going to do is we're just sort of preparing it and then we'll have other people come in and claim and mint those nfts into their wallets and pay the gas fees for those transactions looks like that transaction has gone through and if we give it a second to load here we'll be able to set the criteria for sort of the uh conditions that these nfts can be claimed under so we click the actual nft here and we go over to the claim conditions tab see no claim phases have been set yet but what we'll do is add the initial claim phase here with this big purple button we'll click that and you can see we can outline all of this criteria of how other people can mint this nft so you can see we have things like when will this phase start how many nfts will you drop in this phase how much do you want to charge what currency who can claim so you can upload an allow list and a csv file and you can see how many nfts can be claimed per transaction how many seconds do you have to wait between claiming so you can set all kinds of things i'm losing my breath even just listing them out but what we're gonna do is we're going to have a free nft drop so we'll leave the price at zero we'll leave the currency manic and then we'll change one thing down here which is you can only mint one nft per transaction so you can only mint one character every time you claim from the drop and we'll set this second field of how many seconds do you have to wait between claiming to be unlimited and that means from the drop you can actually only mint once per wallet and we'll go ahead and accept this multi-core transaction here to update the claim conditions on our contract and it looks like that transaction has gone through so we can exit out of this sidebar here and that is it for our player character or our minus contract as we call it so this is going to be the characters that the users can claim in our game and they'll earn this nft just for claiming from that nft drop so we're going to go ahead and do the exact same process now we're going to deploy another smart contract that is of the erc 1155 drop variety but instead of characters this time it's going to be for the tools of our game and instead of just setting it for free what we're going to do is we'll sell the tools of our game in a custom currency that we're going to create so first we'll need to create that custom currency so if we go back to the dashboard here connect your wallet again if you need to and then click the deploy new contract button from the top right here instead of the addition drop this time what we're going to deploy is actually a token so we scroll down here and click the erc20 token peripheral contract and what we can do again as the same process as last time when we created the characters we can upload the metadata of this contract and this time instead of characters it's going to be gold gems and as as i said before you can grab the artwork as well as see the original talented artists that created this artwork in the project in the description below so if you are interested in using this artwork for your project feel free to grab it from the description here and what we're going to do here is we're going to call this token the erc20 token we're going to name it gold gems and we have this pretty image of gold gems here we'll call this gold and we'll give it a description so this is going to be well this is the reward for playing our game and once again go through the same process of deploying the contract onto the mumbai matic test network and we'll just approve that transaction and we'll see you in the dashboard again all right so here we are in the dashboard for our erc20 token and instead of the nfts tab here you can see we have this tokens tab where we can actually see different kinds of information since this is a different kind of token so you can see we have the total supplier which is zero since we haven't minted any tokens we have how many ion which is obviously also zero and the decimal places this is just sort of a standard for having erc20 tokens on the evm sort of environment and what we can do is we can instead of lazymint we're just going to mint an additional supply and let's just go ahead and say let's mint i don't know a thousand of these gold gems and then we'll be able to sell the tools of our game in this gold gems token so you can kind of see where we're heading with these different kinds of smart contracts integrating together we're going to have a character contract we'll have a tools contract and from the tools contract you'll be able to use this erc20 contract to actually pay for the nfts within that contract so you're kind of building out your own little world where you have a currency you have things you can buy with that currency and it's all stored on chain so now you can see we have total supply of 1000 i apparently own zero and that's sad i've got no gold gems but that's all we need to do for our erc20 smart contract so now we're going to go back to the third dashboard and we'll create another edition drop smart contract so that we can create those tools so let's go ahead and click deploy new contract go back to edition drop down here and instead of our little character this time we're going to upload this pickaxe here so we'll say tools and we'll give it a symbol of tool like it's fill and this is the tools for our b2e game and we'll go ahead the exact same process again just to get yourself familiar with how you can deploy these pre-built contracts so this is the third and final pre-built contract that we're going to do and after this we'll jump into solidity and start coding out our custom contract that kind of brings all of these contracts together so you can go ahead and accept that deploy proxy contract again [Music] and instead of just one nft in this contract what we're going to do is we'll mint multiple different kinds of tools that have different claim conditions so you can actually set claim conditions on a per token basis in the addition drop contract so once we go ahead and upload the nfts which i'll i'll do our screen since this information has kind of already been shown to you i don't want you to sit there through me minting five different nfts but maybe what i will show you before i go ahead and do that off screen is how you can use your custom currency that we just created go back to the dashboard and we'll grab our contract address of our gold gems here we go looks like we're back at our goal gym so go ahead and copy this address to your clipboard and then what we'll do is we'll single upload and we'll upload the let's start out with a stone pickaxe we'll use the same asset here this is going to be a stone pickaxe and we'll just say this is the worst or cheapest pickaxe there is and you can upload any additional metadata i'm just going to keep it simple and lazy mint it with that information here and what we'll do in this contract is we'll have five different kinds of tools that you can actually buy from this edition drop and it gives us this kind of shop feature in effect where you can come into the shop and pay with your gold gems to actually buy these tokens or mint these tokens in reality of what you're doing and then pay and sort of earn more tokens based on the power level of these tools that you're buying and earn more tokens buy stronger tools earn more tokens and it kind of gives that full environment where you have these tools and these rewards all stored on chain so it looks like that's gone through now we've lazy minted it and what we'll do is we'll go through that same process where we set the claim conditions but we're going to do one really important thing this time which is set the currency to be the gold gems so we can say what currency do you want to use we use custom currency down here what we'll do is we will paste the contract address of the gold gems token that we created up here so we'll copy and paste that into this custom currency here and i'm just going to leave this tool as free so this custom currency isn't that important since this tool is free but for the other tools i'm going to make them increasing a price so for the second token i'm going to set the price for the tool to be 10 gold gems so you can see how we're selling these nfts in our custom currency that we've just created now but just for simplicity for this first token i want people to be able to start playing the game for free so we'll set this to be zero once again you can only claim one per transaction and you can have to wait unlimited time between those claims you can only claim one from the drop we'll go ahead and save those claim phases and what i'm going to do is i'll mint the four different or lazy mints the four other nfts that we're going to create in this tools collection off screen so you don't have to watch me sit here and do this uh four more times but what i'll do is i can actually bring this into frame here i've got it set up already a little editing magic and you can see we have these clean phases here so for stone pickaxe we have the claim phasers just give it a second to load the stone hammer we have the claim phase where the price is 10 of those gold gems so you can see the free for the first pickaxe the 10 gold gems for the second pickaxe and the green one here we have the claim phase where i think it is around 50 or 100 yep looks like it's 50 so you can pay 50 gold gems for the green wand which i guess gives you more power is what we're going to implement in the mining contract and what we'll do is each token id will actually give you a multiplier of how many gold gems you earn for playing the game so to begin with you'll have the stone pickaxe we have a rewards multiplier of zero and we'll add one so you actually earn something obviously so the rewards multiplier will be one for token id zero the rewards multiplier for token id one will be two so and double the amount of tokens for using the stone hammer or increasing your power level in the tool and then for the green wand you'll earn triple the amount that you would in using the stone pickaxe so the token id is actually going to be used as the rewards multiplier for the mining contract that we're going to build out now so let's go ahead and jump into the solidity environment once you've kind of set up a similar setup to this feel free to have fun with it and create your own metadata or if you want to use the same as i am the link to all of this information will be in the description you can grab the same metadata as i am and you can jump in to the solidity environment as we're about to do when you're ready so now that we have our three pre-built smart contracts set up we have the gold gems we have the pickaxes and the third web miners what we can do is we're going to jump into the cli here and we're going to create a solidity environment where we can use third web extensions to build out our own smart contract with custom logic so the first thing we do is run the npx the web create dash contract command it's going to ask you to give the project a name firstly so we'll say contract and i'm going to be using hardhat for this project so we'll select hard hat and go ahead and run the empty contract just so we can set up with a blank slate and this is going to set up a basic hard hat project where we have an empty solidity smart contract that we can use to interact with these three build pre-built contracts and then add our custom logic on top so once that's done we can run the cd contract command and we'll open that up in the code editor of your choice i'm going to be using visual studio code for this video as you can see here we have the hardhat config we have the actual smart contract in the contracts folder here obviously it's not doing a whole lot as you can see but we have an empty contract and if we run the terminal here we can run the yarn build command and this is going to compile our contract and then run the mpx third web detect which detects any of the contract features or contract extensions that we've implemented and since our contract doesn't do anything at this point it's just compiling that and it looks like there's no errors so we're happy we're set up with this hardhat environment now let's go ahead and start adding our logic for this contract so i've cleared out the existing code that we had in this contract.sol file and now we're ready to code up our logic and remember you can always access the full source code in the description for this project if you don't want to watch me walk through step by step what is happening you can see the full product uh in the description on github first thing we need to do before importing is set the solidity version i'm just going to use 0.8.11 there's no reason i'm doing that it's just whatever i chose at the time and then we are importing the third web contracts that we just deployed so this first import here is the drop erc 1155 if i zoom in a little bit we have the drop erc 1155 which is the nfts that we created for the pickaxes that is the drop erc 1155 contract so we're importing that contract so we can use the logic or the functions available on that contract that we deployed by the third web dashboard so we're kind of importing the pickaxe contract that we've just defined in the third web dashboard and we're doing the same here for the token erc20 which is the gold gems contract that we created so we're going to set these values as the contract addresses that we've deployed when we create and deploy this contract you'll see that in the next lines here so beneath that we have some more imports from open zeppelin and we have the reentrancy guard to protect ourselves from reentrancy attacks we have the erc 1155 holder that comes from erc1155utils which just means our contract is capable of accepting transfers of erc 1155 tokens and storing them in our contract so that's going to be helpful when we try and let users stake their pickaxe nfts into our contract and then this contract is actually capable of accepting that transaction and storing those tokens so now we've got our imports sorted we can define our contract contract is called the mining and it is or it's inheriting the logic of a reentrancy guard and erc 1155 holder so this inheritance is just sort of incorporating all the logic that we've imported from these two open zeppelin imports into our smart contract so now our contract is capable of holding erc 1155 tokens and it's also going to implement reentrance to guard so beneath the definition of our contract here what we have is we store the addresses of the two other contracts and the two other contracts here refer to the addition drop of the pickaxes so we have the immutable variable called pickaxe nft collection that is of type drop erc1155 so you can see why those imports are especially useful for us here where we're defining the pickaxe nft collection which is really just an address but when we go to call things like pickaxenftcollection.transfer we'll be able to use that functionality because we are aware of that type now there are a few other ways you could do this i'm not saying this is the best way this is just the way that i chose to do it so if you are aware of a better way that you're more comfortable with feel free to do that these contracts are quite large in size so this is definitely not the most optimal way to do that but this is the way that i've chosen to do it in this smart contract so if we continue coding up our contract we have the next line here we have the constructor that takes in the addresses of the pickaxe contract as well as the gems contract address and we're just setting those variables when this contract gets deployed so we accept two parameters in the constructor which is the function that gets called when you deploy the contract to the blockchain we accept a pickaxe contract address which is our pickaxe nft collection obviously and we'll copy and paste that from the dashboard when we go to deploy it and we have the gems contract address so we're accepting them in the constructor at deploy time and then we just set those variables and those are immutable so there's not going to be change in those smart contracts once they are set beneath the constructor here we have a struct map value and within the struct we have two fields this first field called is data is just a boolean that we can kind of flick on and off depending on whether the nft or the data is still currently staked so the is data will be true when the nft is staked so they haven't sort of unstaked that nft and the value will actually store the token id of the nft so the is data will be true while they're staking the value will be the token id of the nft that they're actually staking and we'll use this map value struct for the two mappings that we're going to create the first mapping is called player pickaxe so as the name suggests this is a mapping from wallet address as the key to map value which is going to store the uin256 which is the token id that the wallet address is currently staking and the is data will suggest that the value will be true if that nft is being currently staked and it will be false if that nft has been unsticked so we'll use the map value struct that's probably not the best name you can feel free to rename that as you choose but it's just for this purpose of demonstration here we'll use this map value for this mapping here and then beneath this mapping we'll have another mapping called player last update now this is going to play a crucial role in determining how many tokens we transfer to the address when they go to claim their tokens so we'll store the last time that they claimed or had their rewards paid out in this mappings this is going to be a mapping from address to map value again and the value this time is going to store the timestamp of when they last had their rewards paid out so this is going to say let's say for example i had my nft staked from timestamp number zero to timestamp number 100 we'll read this value and we'll say okay jared has had his nft staked for 100 seconds now since the time now is 100 and he last staked it at zero we'll read this value and we'll say okay we owe him we owe him a hundred gem tokens just to keep it simple let's say we were paying out one gem per second so you can kind of see how this plays a part the isdata will say if this data is actually here and the value is going to represent the last timestamp that they claimed or had their rewards paid out and you'll see why this is more relevant as we sort of build out the rest of the smart contract you can see as a comment suggests we have mapping of player address until the last time that they staked slash withdrew claimed their rewards and by default the player has no last time they will not be in the mapping so that makes sense beneath this we have our calculate rewards function that takes in an address a wallet address you can see we have this comment here we have calculated the rewards the player is owed since last time they were paid out and that is going to use this player loss update mapping as we write the code for this function so this is calculated using block.timestamp and the player last update if that value is not set then the player has no rewards so let's build out the logic for this contract or this function here the first thing we'll do is we'll check to see if the player last update or the player is in the mapping and that value is not zero so we'll say if they're in the player last update mapping and if they're also in the player pickaxe mapping so if they have a currently staked nft and if they have ever been updated before so that's kind of a little bit confusing but what's most important here is this check is if they currently have an nft state so if that is data field in our original mapping is true then we owe them some rewards since they have sort of had an nft stake since last time they claimed their rewards so that checked is just basically saying if they don't have an nft state then well basically they have no rewards to be paid out so beneath that check we have a check to calculate the time difference between now and the last time they had their rewards paid out so this is using this player last update mapping again where we say the time difference between now and the last time that they claimed their rewards is the difference between the timestamp and the last time they claimed the rewards which is stored in that mapping there so you can see how that player last update mapping is coming into play already and beneath that we have the time difference we have this rewards calculation here where we say calculate the rewards that are owed in this u int 256 rewards variable we have the time difference multiplied by 10 trillion it looks like and you have to remember you had divide the value you want into 18 decimal format so if you remember on the dashboard when we created the gold gems token we have this kind of specificity of 18 decimals and this is why this number is so big because it's just being formatted for 18 decimals in how many rewards we want to pay out so just keep in mind when you're setting this value here you want to keep in mind that it's actually in 18 decimal format so if you have one here this is just going to be very very minuscule compared to the number i have so we have the time difference multiplied by 10 trillion divided by 18 decimals then we have this rewards multiplier that we were talking about in the player pickaxe nft collection so we have the value the token id of the nft that they're currently staking plus one is going to be the rewards multiplier based on also the time difference and this kind of hard-coded value of number of gems that we're sending out per block that is passing by so you can see here the value that they're being paid out is being multiplied by the token id so if they're staking token id number one their rewards are going to be times by two so one plus one is obviously two and then if they stake token id number four let's say they'll have a multiplier of five so you can see how our kind of game mechanics are being integrated into the actual solidity smart contract itself so that is where the rewards multiplier based on the token id comes into play and this is calculating the time difference and the hard-coded value of how many gems so if you want more gems or how many currency you are implementing into your game to be paid out you can vary this number to be more or less depending on your currency beneath the rewards we actually just return that value so that is just a view for each player we can calculate the rewards that they're currently owed so that we can call this function in the rest of our smart contract when we write the stake function the claim function and the withdrawal function so let's go ahead and write those now so now that we have that internal calculate rewards function we can write the stake function here which is going to take in a token id that the token id is going to the pickaxe that you're going to stake we'll say this is an external non-reentrant so we're utilizing the reentrancy guard here within this stake function we're going to require that you actually must have a pickaxe to stake so for checking the balance of the message.sender which is the person or the welded address calling this function we're checking to see if they have a balance of the token id that they're trying to stake greater than once otherwise they fail this check and they can't call this function and we send them a message saying you have to have at least one of the pickaxes you're trying to stick so that's just kind of a safety check before we call the core logic of this function here beneath that check we say if they have a pickaxe already staked so we say if the mapping of this wallet address dot is data is true then we send that back to them so beneath this code block or in this if statement here we see pickaxe nft collection dot safe transfer from which is transferring from this smart contract to the person that called this function the token id that they currently have staked the quantity here is just one and the data the message that we send with that transaction is just say we're sending your old nft back to you so now we have the calculate rewards so every time they stake or withdraw or claim they're going to be paid out their rewards and the mapping will be updated so we'll calculate the rewards pay them out we'll say rewards token dot transfer to the person that called this the amount is the amount that we calculated from this internal function that we have down here and now we can get into the actual staking part so instead of sending it back to them now we're saying we're transferring from you to our address and this is going to require a special approval that we're going to uh provide on the front end before we call this function because by default the smart contractor won't have the permission to transfer somebody else's tokens unless you explicitly provided that so we're going to do that on the front end the safe transfer from so we're saying we're sending it from the wallet address to this contract with the token id and one is the quantity again and the message is just staking your pickaxe beneath that we have a very important step where we're updating the player's mappings so we set the value to be the token id in that player pickaxe mapping and we set the is data to be true to suggest they are currently staking and then in this check now they'll start accumulating those rewards in this if statement here so we'll say if the is data which will now be true then this statement is no longer true since they do have a pickaxe actually staked we can actually start calculating how many tokens they are owed beneath that we have the update of the other mapping where we have the player last update is now being set to the current timestamp which is also utilized in this calculate rewards where we say based on the time that they staked this is how many tokens they're owed so this kind of process is we send out their existing rewards and then we update after they've staked their new nft great so now we have our stake function written what we'll do is we'll write the withdraw function which is pretty much just going to be the exact opposite of the stake so we'll set these values to false we'll send the token back to them and we'll also calculate and pay out those rewards so we might quickly go through this where we say you have to have a token actually staked to send it back to you obviously and then we go into the calculation of the rewards again we then transfer those rewards back to the the wallet address that called this function we transfer the token that they wrote from this address to the sender the value the token that we're actually transferring is the one they had staked in the mapping we have a quantity of one and we say returning your old pickaxe beneath the transfer back from the contract to the address we have the update of the mappings so we're just saying the player pickaxe mapping updates to false as well as update the timestamp that this player last claimed their rewards so the final function the third function that we're going to build in this contract is going to be the actual claim function so you can claim your tokens directly even though that logic exists in the stake and withdraw we also have a function to actually just claim the tokens from the contract that you're owed without staking or unstaking so within this claim function we'll just call the same logic where we have the calculation of those rewards we pay out those rewards to the person that requested them and we update the mappings to reflect that information and that is it for our smart contracts so we have a way of staking we have a way of withdrawing the tokens that you've staked getting the tokens back and a way of claiming the rewards that you're owed based on that time calculation in this internal calculate rewards function that we have here and at any time you can call this since this is public you can actually just pass in any other player's address to see how many tokens they're owed and then that is it for our smart contract so what we can do is we can actually go ahead and open up the terminal here we can deploy our contract using the command npx third web release what this is gonna do is it's going to compile our smart contract so first you can see looks like it's failed but if we go back up it says the detected project type was hard hat compilation has failed so it's attempted to compile our project before it goes to release it and if we take a look here we can see the solidity version pragma statement in these files don't match so it looks like we've got the wrong solidity version configured in hard hat config so change that to 0.8.11 and let's try and run this npx third release command again here actually before we do i am already preempting that this is going to complain about not having open zeppelin contracts installed so we're importing but we haven't actually installed the open zip and packages so let's go ahead and run npm install at open zeppelin contracts it's going to go ahead and install opens up and contracts and we also need to install npm install at open zeppelin contracts dash upgradable upgrade able cool all right we've extolled those two packages if we take a look at our package json you can see we have both the open zip and packages as well as the web dev contracts here and if we try again for third time's the charm we'll run mpx there were release again and as you can see it attempts to compile our projects spits out another error however we have here so it looks like we have a conflicting import from third web and open zeppelin so this is because the web actually provides some of the functionality that open zeppelin has so if we take a look at node modules here in the third web dev slash contracts you can see we have opensupplement presets and in here in the utils folder it looks like it's unhappy about that we have this file called es1155 holder as well as the one that we're importing so instead of the one that we're importing from open zeppelin here what we can do is go ahead and delete that and instead we can import the one from the third web dev package so we're gonna import the one that we're importing from the web desk that's at the web dev contracts at the web dev slash contracts slash uh open zeppelin dash presets open zeppelin pre whoops open diploma presets then we have utils erc 1155 slash utils here we go slash utils slash elc 1155 and now if we click into this that is now being imported from the third web package and shouldn't be conflicting anymore so if we run mpx the web release let's clear this out before we do it mpx third web release this should hopefully hopefully no more errors this should compile our project it's going to upload the compiled version to ipfs so as you can see thankfully it has uh compiled successfully it's now processing it it's uploading the compilation to ipfs and what it's going to do is it's going to spit out a link where we can release our contract which is not just deploying it just yet we'll show you what release is going to do it's going to spit out that link and then we'll have a landing page fully generated for our smart contract so once that's released we'll be able to make further versioned releases of the same smart contracts so we'll initialize this release by saying mpx server release will upload the information about our contracts like its name its purpose we'll have a readme that we can upload markdown into so we'll go ahead and open this up i'll show you what i'm talking about here open that up which provides us with a link to the third web dashboard as you can see we're about to create a release we're loading that information that we just uploaded to ipfs of our contracts uh abis so we have the name we have the descriptions as you can see i have deployed this contract or released this contract before so that's why it's showing up here so it's trying to release a new version of the contract that i've already released so it thinks that i'm updating the previous version for you it'll probably look a bit different but let's go ahead and upload the logo for our mining contract let's give it a description this is our play to earn game and here we can upload what this contract is about so we can upload any markdown into this about field here so we can say mining p2e game zoom in a little bit for you mining player and game hello world bye jared jared and then i'll set this version to be 1.0.1 this is an iteration of a previous release that i made of 1.0.0 so i've updated the smart contract and now i'm making a new version of this release and as you can see you put an audit if you have one i obviously don't have one and then you can add any versioned release notes so i believe if we wanted to we could actually provide some valuable release notes here since the previous version of this contract was using version 2 of our smart contracts package so let's say this now uses v3 of at the web dev slash contracts if we zoom back out we can now click create release and switch to polygon switch network and create release and while that's happening in the background i'll kind of explain what we're actually doing here so we've uploaded our contracts compilation our apis to ipfs and now we're deploying a release onto the polygon blockchain and what that means is you're uploading it to third webs contract registry where the all this metadata that we uploaded as well as the source code for the contract itself is actually stored in this version on the polygon blockchain so you can see we've successfully released this contract and now this information is being pulled from the blockchain directly and as you can see this is being associated to my profile here so you can see it is released by me we have the new version so the previous version you can see 1.0.0 obviously i put some gibberish in here when i released it for the first time but we now have the latest versioned release of the 1.0.1 which we have the release notes for this upgraded version we have the title the description all that stuff we wrote about in the metadata we have the released on so it looks like i released this version on today it has the unlicensed uh version of the solidity contract since we defined that in line one here we don't have a license and all of that information as well as the write functions and the read functions the source code is all being pulled onto this versioned release onto the third web contract registry and what other people can do is you can actually go to this page if i share this this link will be in the description if you want to completely skip the contract development step you can actually just go to this page and click on the deploy now button which is where you'll be allowed to enter first of all enter the parameters of the constructor which we're about to do and then deploy onto any of our supported blockchains so you can see you can add this contract release you can go ahead deploy your own version to any other networks in this list here as well as sort of get a quick overview of what's happening inspect the source code before you deploy it and since this is my profile i can go ahead and edit my profile here and this is my test account and my beautiful face up there and all of that information is stored on the polygon blockchain so now that we've released it and if you want to check this out this will be in the description as well you can go ahead and deploy it from this release page which is about what i'm going to do now so firstly we need to get those contract address parameters if we go back to our dashboard here write it up over here we need to get the address of our smartphone track so let's copy the address for the gold gems let's also copy the address for the pickaxes here so let's go back to our pickaxe contract address field here so we'll paste the pickaxe contract address in and also paste the gems contract address in so now we've got our constructor set up we can go ahead and deploy this to the mumbai matic test network and ask us to switch wallets switch networks again here and then we can go ahead and deploy the actual contract itself onto the test network go ahead and confirm that transaction and now rather than just a release page we actually deploy the code that we uploaded for that release onto a blockchain of our choice and then we'll have our own custom dashboard which is kind of what we saw earlier with the prebuilt contracts where we have a version of that contract which is specific to us which is what we see here we have the contract explorer we can now actually run those functions that are in our smart contract rather than just sort of see what's available so now we could be able to run let's calculate the rewards for me let's say we'll copy our address from metamask here and we'll paste this into the player field and we can calculate the rewards this should obviously be zero since we've never staked the token before as you can see that has been set to zero all right so now we have the events we have the code we have the settings sources and what we're going to do now that we have all four of our smart contracts deployed is we're going to build a awesome application on top where users can claim nfts from our character collection they can also buy nfts from our pickaxe collection and then they can stake their pickaxe onto the mining contract that we've just deployed to earn the gold gem tokens that we created using that erc20 token smart contract so now we'll jump back into the cli open this up we'll change directories out one so we're back in the root folder here of our project and then we'll run the mpx third web create dash dash app command this time so the first time we run contract this time we're running app let's call this application so this is going to be the front-end side of our application whereas the contract is the sort of back-end foundational layer for this project we're going to be using nexjs as well as typescript and what this does for us is it sets up a very basic sort of bare bones project with next.js typescript and the therweb react and typescript sdks pre-installed and pre-configured for us and we'll see in a moment here once these are done installing we'll have a fully set up project which we can quickly change directories into so we'll change directories into application we'll open this up in our text editor you can see here we have the underscoreapp.tsx file which will quickly change from being configured to mainnet to being configured to mumbai since that's where all of our smart contracts are deployed to and then we have the third provider wrapping our application which has the desired chain id of mumbai configured now and then all of the pages within our application are wrapped in that firmware provider which means we can access all of the hooks available in the react sdk as well as the ui components such as the connect wallet button which is what we have on the home page here where we just have a very simple setup with a div containing the connect wallet component so we're now going to get into creating the actual application to interact with our smart contracts so i've just deleted the contents of the homepage and the first thing i'm going to do in this repository or this project here is create a folder at the root of the project called const and within that folder we'll create a file called contract addresses dot ts and what this file is going to be is kind of a constant value file that we can export the contract addresses or the four smart contracts that we've created so that we can reuse those with variables rather than just hard coding the string values throughout multiple places inside our application so it's just going to be much cleaner to import the contract addresses and use the variables rather than just hard coding them throughout our app so for this we're going to have the first one is mining i'll zoom in here a little bit so we have mining we have pickaxes we have characters yep and the final one we have is the gems so we'll do export const mining address and we'll grab these values from the dashboard we'll just have an empty string value for now we have export const pickaxes address it's equal to empty string copy and paste this down here replace the values with gems so gems address and characters address there we go and now what we can do is we bring this into frame here and we can copy and paste the address from the web dashboard so we just click this button on our dashboard so this is for the characters copy paste that in here for the gold gems we'll copy that paste that into this value here pick axes copy that in repeat that process four times until we've populated this file let's get rid of these comments it's kind of unnecessary but now we've exported four constant values from this kind of configuration file i guess you could call it now we'll be able to reuse these values throughout our application which is going to be super handy so if we go back to the home page now what we're going to do is first of all we're going to import all of the functionality that we're going to use on this page and the home page is going to show a different state or a different display depending on the state that we load in from the contract and that state is going to be different for each connected wallet address so the first sort of ui that will render on the uh on the uh will show to the user is the connect wallet button so we'll first ask the user to connect their wallet to the application using this connect wallet button component from the third web dev react library so we have here we have a type which is just next page which is just a a typescript thing for rendering the functional component as a next page type we're importing some styles so i've copied and pasted some styles which you can use from the description if you're interested in having the same look and feel as i do in my application that will be all available in the project in the description so importing the next page type we have the styles and then we're importing connect wallet component which we've described the user address is going to detect if there is a currently connected wallet address to our website and if there is we'll be able to access it within that user address hook so you can see here we have const address is equal to user address and we'll display different values to the user depending on if they have their wallet connected to our site yet or not and then the final two hooks we have are use edition drop which is going to allow us to connect to our player character nfc collection which we defined in this contract addresses here so we'll connect to this contract address here using that hook and then the used owned nfts as the name suggests we're going to load the nfts that the currently connected wallet address owns from the edition drop contract so we'll be able to tell if a user has one of these player characters and shows something on the ui which in our case we're going to show them a button that takes them to the actual gameplay after they have claimed an nft character from the edition drop so believe that we import our character edition address which i think is named incorrectly here but we can go ahead and fix that and then we import the router from next router so this is just importing the contract address for the character contract uh sorry the character nft collection and then this is going to allow us to navigate to a different page which we're going to create after we fill out this one all right so that's for that's it for the imports and then we can move on to the functional component here where we type it as a next page so this is the home page it is the next page of functional component and we're going to write all of the logic inside this component so first up we connect to our nft collection address the characters which this variable is named incorrectly we can go and fix that in a short moment so this is character's address not character edition address but we'll get to that so we're connecting to it using this one line of code and we can access all kinds of information on this edition drop now so we've connected to that we have the contract itself in this one line of code and this variable stored here called edition drop and beneath that we're going to detect the currently connected wallet address beneath that we'll use the next.js router to allow the user to navigate to a different page once they have detected that they own an nft or they have claimed an nft already so that brings us to the use owned nft's hook here so here we're destructuring the data is loading and is error fields out of the hook or the object that gets returned from this hook called use owned nfts as you can see here this allows you to get the owned nfts for a specific nft contract and a wallet address so that's exactly what we're doing i'm passing the edition drop contract itself here rather than just the address so we're passing the whole contract in and we're passing the currently connected wallet address if there is one if there isn't this will be undefined and the data will obviously be uh an empty array so that's the use own.fts we have all of the data that we need to sort of show this conditional logic on the ui so the first condition is if there is not an address then we just want to show the connect wallet button and that's pretty simple we have this connect wallet button component here and we can go ahead and customize that in a short moment with colors and kind of um a color scheme and things like that so beneath the address so if there is an address we'll reach this next step here where we'll show a loading state so this is loading if you recall comes from the use owned nft's hooks so it takes a little while to come back with that information from the blockchain so this is loading flag allows us to show just a loading screen simple loading screen that says loading dot dot dot inside a div and that is our next state where we're loading the information that we need to show whether or not we want to show the play button or a claim nft button which is what we're going to do now and quickly just beneath that we have an is error which also comes back from this user owned nfts so if something went wrong loading that information which is pretty rare shouldn't really happen it's just kind of a safe way of showing an error here so we have error something went wrong you could kind of sh you can kind of see how you could show something more meaningful rather than just me saying loading and error issues so show something a bit more meaningful and nice on the ui but this is just keeping it simple for our ui here so we've kind of got through all of the checks we're not loading anything we are not we don't have an error something didn't go wrong so we're ready to show this logic here which brings us to one of the main screens where we have the actual mint container so if they have an owned nfts.length of zero which means the array that came back from the use owned nft's hook is zero in length they don't have any owned nfts then we'll show this component called mint container which we haven't created yet but you can imagine what that's going to be it's going to be a component that allows the user to mint an entity from the collection and when they do this use own nfts will be updated and then once they do have an nft we'll show them this screen where they'll have a button that allows them to go to the slash play power page sorry the slash play page as a tongue twister and we're using next.js router as we defined on line 16 here to navigate them to that slash play route so we'll go ahead and create the slash play route as well as the mint container now and i think we have a little mistake to fix up here so we have character address rather than character edition address and instead of mint container uh we'll cr we'll go ahead and create the mint container component up next so the mint container will create a folder at the root of our project called components first and within the components we'll create a file called mintcontainer.tsx and within this component what we can do is first of all we'll import a bunch of the logic or the things we're going to use in this component again so we have use claim nft use addition drop use address so use addition drop and use an address we're familiar with already use claim nft is another hook from the react library at thorough dev react that allows you to claim or mint an nft from an nft drop contract so we're going to claim and mint an nft drop sorry an nft from our edition drop contract which is our character collection here and we have the web3 button component which is going to allow us to make sure the user has a wallet connected as well as make sure the user is on the correct network that we outlined in the underscore app.tsx file here before we attempt to make that claim call and as you can see beneath the imports from our react components here our react library here we have react itself we have character addresses the const from that contract addresses file that we created and just some more styles and i think i've just realized inside our underscore app.tsx file here we're missing the actual import for the styles of the global style so i'll just go ahead and copy and paste that in from our other application that we have here so we'll copy and paste this in and that should be good to go so we'll just have global styles throughout our application if you're following along with the styles from this repository feel free to do the exact same so back to our mint container here beneath all of our imports we have an export of our functional component called mint container and within the component we'll again connect to our addition drop contract using that addition drop hook and passing in the constant value that we defined in that kind of config file beneath that we have the use claim nft hook passing in the entire addition drop contract into that hook and what we're doing is we're destructuring the mutate field out of the object that gets returned by the use claim nft hook and we're renaming the mutate to be called claim and this claim function or this claim field is actually a function that we're going to call when the user clicks the web3 button that we're going to define so i'll show the show you that now beneath that we have the address so just to show which address we're going to mint the actual nft to so we have the ui beneath the hook so we have a simple div with some basic styling just to sort of center it up and beneath the or within the div we have some context of what this is about so we have an h1 tag say this is the addition drop and you can claim your character nft to start playing the game and here's just a little image that i thought looked pretty funny where the character that we have for our nft is kind of punching the air it's supposed to be him mining to sort of say he's what you're going to be minting here's the metadata so we just have a simple image um to showcase what you're going to be claiming from the nft drop or the addition drop here and beneath that we finally have the web 3 button and there's two things you need to pass into the web3 button here the first one is the contract address which we're passing in the addition drop contract which we created for our nft characters the second one is called the action which is what you're actually going to do on that contract so what we're going to do is we're going to call the claim hook that we have here so use claim nft we've renamed that to be claim and when this button gets pressed this action gets run and you're calling this claim function with three sort of parameters here so the quantity is one you're going to mint one of the characters the two is the wallet address that we're actually going to mint to and that is the currently connected wallet address and the token id is just zero which is the actual character the token id of the character that we minted in that smart contract and we just have some simple text here that says claim nft and i'll show you how you can customize this with the accent color here so let's say we want um i'm just going to type in some random value here yep pink looks good and you can also set the color mode here so i think our app is a dark mode so let's go ahead and open that up all right this looks good so let's open up the terminal what we'll do is we'll run the yarn dev command or you can run npm run dev if you don't have yarn and we'll go to localhost 3000 and once you're at the localhost 3000 you'll see that we have this first initial state here where we said if there is not an address then we will show this connect wallet button here which is what we're seeing and we don't have any styles so it's just the basic uh black and white button here but you could add the color mode and the accent color if you choose to do so and once we connect our wallet so i'm gonna go ahead and select metamask here type my password in you'll see we get that loading state if i zoom in that's pretty small but then we see the play game button because this wallet actually owns uh one of these nft so let's maybe switch wallets to a different wall here let's connect our metamask with this one and i don't think this wallet does have an nft so we'll see that loading state again and once that information has loaded from our smart contract we see the next state so once the address has been connected we've skipped past this first section here then we see the loading state so that's the next phase we see on the ui and we've skipped nothing went wrong so we don't ever see the error and now we're here where we see the mint container component if we click into this you'll see here's the stuff we just created up so we're seeing the metadata or the information that we're displaying inside this component and then we have the web3 button beneath that that is hopefully going to allow us to claim an nft from this addition drop so you can see we have the title we have a description we have a little man animation here he's punch in the air so this kind of gives you a showcase of what you're going to mind before you actually click this button but if we go ahead and click the claim nft button you'll see that it doesn't seem to be happy with us okay um why is that not exactly sure why that didn't work um looks like we've got an error message here so insufficient funds for gas price okay so we don't have enough money in this wallet um all right let's swap accounts to this one so let's connect this wallet instead and you could see how we could um write this in a try catch block and show the error message on the ui but i haven't had anything that catches the area so that's why we didn't see anything here i just had a look in the console and it looks like this wallet actually does have uh funds so let's go ahead and disconnect from this wallet so say disconnect from local 3000 now we're back to the wallet that has no funds i think it is this one okay so let's disconnect from this one disconnect and then what we'll do is we'll swap to account number two here and i'll just show you quickly how you can actually get funds from a faucet so we'll go mumbai faucet we'll go to this top result here mumbai faucet dot com paste our address in here and we'll say send me somatic and you can see my address goes in there we should receive some test funds that we can play around with anna with in our wallet here so if we take a little second to take a look at our wallet here we should see 0.5 manic okay now we're ready to claim the nft from our drop so let's connect the wallet we'll go metamask again this time we'll connect with account number two we'll get that loading state we'll get to the mint container state we'll click claim nft and this time since we do have the required funds to claim an nft from the drop we do see the metamask prompt here and it looks like i've actually set the price of the nft to be 0.0001 for this drop that's why the print transaction didn't go through this is actually a different collection from the one we set up just so this isn't confusing why this has a price in this collection i do have a price um i know we set it up with zero but it looks like i set it up to be 0.0001 uh testmatic for this nft drop so you can see how you can add a price to mince the characters if you choose to do so and that's what's happening here so we have this claim transaction we'll go ahead and confirm that and what that does is claims one of the nfts from our drop so this wallet that i'm currently connected with this metamask wallet which is oxoxa51 has just claimed an nft from the drop and now we see that final state automatically since this query here gets sort of re-validated it reruns and says okay a new new nft has been claimed this check over here for how many nfts i own marie runs after that mint has been completed and says okay now do you own any nfts it says oh it looks like that has been updated the owned nfts is no longer of length zero so we skip this and we reach this final block here where we're ready to play our game so if we click the play game button here we'll be taken to the slash play page which doesn't exist yet which is what we're going to create now so back in visual studio code now we'll create a new file within the pages folder called play.tsx and this is going to be our play page obviously and represents where the user will interact with all of the smart contracts that we created and the play page is broken down into many components and i'll show you why we're breaking it down into components and what each of those components are so here if we have a quick look at our demo here is our demo page of our final deployment i'll quickly refresh this so you can see we have several different components in the top left here we have the equipped items components where it loads the nft that the user owns so this is actually just hard coded to be this character if you own one since we only have one kind of character in this nft collection and then the second item here is the currently equipped pickaxe for the token id that you have staked onto that smart contract and this component is going to be called owned gear owned gear.tsx and the other component we have beneath that is called the gameplay animation component and this doesn't really interact with the blockchain at all it's just kind of a nice little carousel that the little character we have here is supposed to be mining but in reality he's just punching the gold gems and that's just a little nice to have things so that's going to be in a component called gameplay animation animation.tsx and on the right side here we have the gold gems information for this currently connected wallet now here's actually two components one of those components is nested in inside of the other so the first component we have is the surrounding component which is just called rewards so let's go ahead and create that rewards component here so rewards.tsx and the balance here is going to be the currently connected wallet balance of that erc20 token and the beneath that we have a read from the smart contract of how many rewards are owed to this currently connected wallets we're reading that available rewards function on our smart contract now it looks like i have a balance of 5000 i have unclaimed 65 ready to be claimed for my wallet address on the smart contract and earned within this session is the nested component now this isn't interacting with the blockchain either it just gives us this nice kind of idle game feel where this big number keeps going up and up and up every couple of times per second or every sorry a few times per second and beneath that we have the claim button which is part of the rewards so you can actually claim and call that claim rewards function on the smart contract so that is the rewards component and within that component we have the approx rewards dot tsx component which is going to be this earned this session and within that component will start a timer when the user hits the page and every a couple of times every second we will update that value to be an approximation of how many rewards you've earned since you reached the page so current gear is the equipped items and the owned gear is this section here so this is called owned gear and this top left one is called current gear so that's the equipped gear versus the other gear that's available in your wallet beneath that we have the shop section which is kind of just really showing all of the nfts available to be claimed or minted from the pickaxe nft collection so we've converted it into a shop here where we have one component called shop so shop dot tsx and within that shop we have multiple shop items so you can see we have an item where you can buy the stone pickaxe you can buy the stone hammer the green wand etc etc so we'll have another component called shop item and the final component that we're missing is the actual loading state so we have just a simple loading component where it says loading dot dot inside of a p tag here so we'll say loading section dot tsx [Music] so that's it for our components now we'll use all of these components inside the play page and the role of this page is actually just to connect to the smart contracts and load any of the information that we need and then pass down or provide the components with that information so on the play page we'll connect to all four of our smart contracts we'll load that information and then we'll just render each of these individual components and they'll have the available information they need to display that on the ui all right so let's code up the play page now the first thing we're going to do is we're going to import the logic that we're going to use from the react sdk so again we have the connect wallet component the user address component the use contract which allows us to connect to our custom mining contract from the third web dashboard so we'll use the address that we imported from the contract addresses here to connect to that contract as well as a use edition drop to connect to both our nfc collections for the pickaxes as well as the characters and then the use token will obviously be connecting to the erc20 token the gems contract address we're importing react we're importing all of these components that we created inside the components folder we're again importing all of the contract addresses so that we can use those inside the hooks to connect to our smart contracts and finally we just have some stars again you can copy the styles that i have from the full project in the description so within our export default function play here the first thing we do is we connect to the user's wallet i'll just zoom in here we connect to the user's wallet with the user address hook here we connect to all four of our smart contracts so we're saying use contracts to connect to the mining address and we're destructuring contract the way that use contract works is a little different to the pre-built contracts you actually have to de-structure the contract out of the used contract hook and then we've seen this before so we're connecting to our use addition drop for the characters use addition drop for the pickaxes use a token for the gems address here the gem token address and then beneath all of our contracts that we're connecting to here what we're going to do is again if there is no address then we'll force the user to see the connect wallet button once they've connected this address will then be detected they'll be able to skip this block here which is then where we return the main gameplay screen so we have a return of div with some styles in it and here we make a check to see if the mining contract has loaded if the character contract has loaded if the token contract if the pickaxe contract have all loaded so if all of these have successfully connected then we're ready to pass that information down to the the uh components that we created so if there is if this is true if we've loaded all of them then we can render the current gear component which if you remember is that equipped items component in the top left where it shows the user's nft from the character collection as well as the user's nft from the pickaxe collection so we passed down the contract that we've loaded using these hooks we passed down the whole mining contract the whole character contract as well as a pickaxe contract to that component and then beneath the current gear we show the rewards so that if you recall correctly from our demonstration here the rewards is this section on the top right here so we'll show the equipped items we'll also show the rewards section over here so those are the information required and you can see we're passing down the mining contract as well as a token contract this time to that rewards component so you can see for each component they depend on information from different smart contracts to connect to them we're passing them down to the components as props and then within the components we'll just deconstruct those props out of the props sorry we'll deconstruct the contracts out of the props and start interacting with them directly inside of the components so beneath this sort of top section here we're seeing another or sorry before that we're saying if that information isn't true we're showing a loading section so if you recall correctly then we see this loading flag when the information is loading so in this state the loading status of these four contracts is false so we're showing that loading component while we're just connecting to our smart contracts and then we'll be able to show the information on the components once that's ready so beneath the top section here we have a similar pattern where we're seeing the so this is just a divider this is a horizontal line but we say if the pickaxe and the mining contract then we can show this section and beneath this we'll say we'll have another loading section when that is false so if there is a pickaxe contract and a mining contract we show the your owned pickaxes section which is this middle section here which shows the your own gear component which we depend on the pickaxe contract and the mining contract to show that information [Music] and we follow a similar pattern here where if we're loading the contract then we'll show that loading section component so beneath that we have another horizontal line here so this is this line here and we're going to show the shop beneath that so once again we're following that pattern where we say if the pickaxe contract and the token contract have loaded then we're ready to show the shop component but if that information is still loading then we'll show the loading section so you can see now we have our full page set up where we have all of these components but none of these components actually do anything just yet so now we need to write the logic for the components themselves one thing i'm going to do before jumping into coding up those contracts is i'm going to create a folder called types and this types folder is going to contain two types one of which is called contract mapping response mappingresponse.ts and the other is called edition drop metadata edition drop metadata metadata.ts and if you're not using typescript you don't need to worry about this but essentially what we're doing is we're just creating these types for the information that we come back with from the smart contract so the first type is going to reflect that mapping type or the mapping struct that we created in our smart contract so the first thing we're going to do is we're going to import the big number big number type from ethers beneath that we're going to say type contract mapping response is equal to the is data field which is going to be boolean and then the if you remember in our smart contract we had that value field so the value is going to be a big number and that represents the uint 256 value that we had on our smart contract and beneath that we'll export default contract mapping response so we'll export the default value to be the type that we just created and the other type that we want is this addition drop metadata so within this we're going to do a similar thing we're going to import json json from the though sdk we're also going to import the big number type from ethers and then what we'll do here is we will have a type that accepts the metadata as well as the supply so metadata is going to be a key of string that returns a type of json as a value and then the supply we have big number this is just going to be used for the types that we're returning or reading from the smart contract so that we can use those in the components themselves so now we're ready to jump into those components so now let's build out the current gear component and the first thing we're going to do again is import all of the functionality that we're going to be using within this uh component here so we have the imports from the react sdk the typescript sdk we have imports from react and we have those two types that we created as well as a gameplay animation component and some stars so we haven't created that gameplay animation component but we are going to be using it within this current gear component so after our imports we define the type of props that we're going to be passing into this component so if you remember on our index.tsx page here what we were doing sorry in the play page what we're doing in this contract is we're passing in three smart contracts as props so we're loading these smart contracts up here and once those are loaded we're rendering this component and passing those contracts down into this component so what we're going to do is we define this type of props we're passing in the mining contract which is going to be a smart contract passing in the character contract and the pick x contract which are both of type edition drop so we have these typed props now and then we can use these inside the functional component so you can see we're destructuring the props that get passed into this component typing them as the props that we defined here and you can see in these comments here it says this component shows the currently equipped minor character as well as the currently equipped character's pickaxe so if you take a look at our example here so you can see this is what we're about to render so we'll load the information from the currently connected wallet and then we'll display it on the ui so that's our first thing we need to do is actually load the currently connected wallet and we can do that using the user address hook as we have done previously beneath that we'll load the metadata of the token id0 for the character nft in the character nft collection so we're saying use nft which if you hover over this it says use this to get an individual nft token of your nft contract so we're loading the metadata of token id 0 from the character contract that we're passing down as the prop here so that's going to information load the information required for this character here then we're saying we have a stateful variable to store the pickaxe that the user currently has staked so this will either be undefined if they don't have any nft's staked or they don't have any pickaxes staked onto the contract otherwise it will be the metadata of the nft that they currently have staked so what we're going to do now is inside a use effect block we have this immediately invoked async function which is just a fancy way of saying let's run this inside an async block inside a use effect block so use effect is a kind of way of loading information when certain variables change we'll explain that in a little bit but inside this async function what we're doing is we're connecting to the mining contract we're calling the player pickaxe mapping passing the currently connected wallet address as the key to that mapping so first of all we're saying if there's no address then we can't load information about address that isn't a thing but if there is an address then we're ready to load what token id inside that mapping the currently connected wallet address has so in essence all we're doing is just loading the token id from the player pickaxe mapping here for the currently connected wallet address and then we're typing that as the type that we just created which comes back as the is data and the value so we can read if the nft is currently staked as well as the value of the token id of the nft that is being staked and then what we can do if there is a nft staked with this is data field we can load the metadata using this get command so we're saying pickaxe contract.get which just loads the metadata of a given token id so you can see here get a single nft metadata and we're passing in the token id to that call so if there is a pickaxe on the nft staking contract i guess we could call it then we're loading the information or the metadata of that token id from the collection and then all we're doing here is just setting that value in state so then we can use the metadata of the pickaxe to show it on the ui and what i was trying to sort of explain before is this use effect block gets re-run every time one of these three values changes so if the user's address change changes or the mining contract changes or the pickaxe contract changes then what we're doing is we're re-running this code so you can see how that's useful when a user connects their wallet then we'll get past this point or if the mining contract changes we'll uh load this information again or the pickaxe contract changes that's kind of less relevant because that's probably not going to happen in our case but you can see why that would be useful so all we're doing in this block is we're loading the information and setting in state so now we have the currently staked pickaxe nft and the metadata of that stored here in line 28. all right so beneath the use effect block what we're doing is we're rendering the ui so now we have all of the information that we need to start rendering this on the ui the first thing we do is we load the equipped items so we have some text here saying equipped items and then we have a div that just has some styling i was too lazy to put this in css so i just put it in here and then we show first of all the third web nft media which is a ui component that renders nft metadata of the player nft so if you recall up here on line 27 we loaded the metadata of the player character nft so we now have that in a variable called player nft so we're saying if player nft has loaded then we'll render the metadata of the player nft and that just shows the actual metadata of the nft so what we're gonna have here is a little box with our character inside of it essentially and beneath that if you remember on our ui here this is the first box and the second box is the actual pickaxe nft that is staked so what we're going to do now is we're going to say if there's a pickaxe then we'll show another thirdweb nft media component with the metadata of that pickaxe so let's pass that in here we have another div with a gray outline and we say if there's a pickaxe then let's render that using the therweb nft media passing in the metadata of the nft and then we're good to go we now have both of these boxes with the equipped items text above it beneath that we're going to render the gameplay animation component that we're about to create next so we have another div with some simple styling and then within that we have the mind.gif which if you recall correctly we have that in the public folder here this is just going to render a little punching animation here beneath that we're going to have the gameplay animation component which we'll create just in a second we're passing in the pickaxe contract to that component as well so our gameplay animation component is actually very simple we just have three imports one is the styles one is just react and then we're importing the type here as well so we can use that in the component but all this component does is essentially render many of these gold gems in sort of this slider and the css i got from a tutorial so if you want to use the same css as i did it comes from this gameplay.module.css so we take a look at this you can see we're using keyframes and a slider as well as some sort of css magic to make it slide across the screen with this animation here of scrolling to sort of the left in an infinite manner and then we get this effect on the ui where it sort of just slides these 10 10-ish gold gems across the screen it's kind of hacky the way that we're doing it as you'll see in a short second here but all we're doing is we have a const called gold gem we have this div that stores the image which i don't think we actually have we might need to add the gold gem.png let's just quickly bring that here so the goldgem.png is this one here where we have the gold gem so let's drag that into the public folder here so we're loading that into an image and then beneath the uh gold gem declaration here we have a type where we're passing in the actual pickaxe contract because we're going to say if the sort of currently connected wallet doesn't have a pickaxe staked the text is just going to say i need a pickaxe so it's going to say i need a pickaxe if you don't have one staked and then once he does have a pickaxe he's going to start punching those gems and mining them so you'll see here in the gameplay animation component we're again deconstructing the pickaxe contract that we're passing down as props in this gameplay animation uh component here so we're getting the pickaxe component itself sorry pickaxe contract itself and then we get that inside of the props here and as you can see we're saying if there's not a pickaxe contract if that pickaxe contract hasn't loaded or if the user doesn't have the pickaxe loaded onto their uh mining contract then we say i need a pickaxe while that information is loading but if they do have a pickaxe and that px contract has been loaded then we'll have another div that uses some css magic to sort of show that infinite sort of carousel sliding across the screen within that all we're going to do is we're just going to render a bunch of gold gems sliding across the screen so you could probably do this a lot cleaner if you just put it in an array and had some mapping uh logic here but this is just the hacky way that i've done it where i've just pasted under 10 15 of these gold gem components that we have up here and that gives us this nice effect where we have these gold gems sliding across the screen in this infinite carousel here so on the rewards component we're following a very similar pattern where we're just importing everything that we need to use from the third web react and typescript sdks so we have react we have from our react sdk we have the third web nft media component again to render the metadata of the nfts we have the user dressed hook to get the currently connected wallet address and we're using use contract call and use contract data which is the write and read hooks to read from our mining contract so with the custom contract that we deployed we're using use contract call to run the transactions or those write operations onto the contract and we're using use contract data to read information from that contract so this is kind of a right hook and this is a read hook just for the custom contract so the use metadata hook is to load metadata about our erc20 token so we'll get the metadata of the actual gold gems so we'll be able to see the image the name and all of the metadata that we uploaded to the third web dashboard the use token balance hook is going to use the sorry it's going to show the balance of the token so it's pretty self-explanatory it's just going to load how many gold gems we have from the actual token contract web3 button we're already familiar with and we're just importing some types that we're going to be using for typescript here as well as the approx rewards component that we're going to create next so beneath our imports we're again following this similar pattern where we have types of of props that we're going to be passing in to this component where we have those two contracts that we're passing in that we depend on for the data that we're going to load and utilize in this component so we have type props we're passing in the mining contract as well as a token contract and this is a new type that we imported from the web dev sdk library here where we're just typing the prop here as a token so once we've got all of that set up we again follow the same pattern where we're importing the contract we're getting those with the types from the props type here and as you can see in this comment we have this component shows the metadata of the token itself so we're going to show the gold gem on the ui here so we're going to show the metadata this is loaded dynamically from the contract we're going to show the amount this wallet holds of this token which is going to be this balance line here and then we're going to show the unclaimed rewards from the mining contract within this component we'll also show this approx rewards which doesn't depend on any blockchain logic it's just a purely client-side calculation and finally we'll have this claim button here so that's where the use um contract call is going to be utilized we're going to call the claim function on our smart contract to actually claim the rewards or the gems that we are owed all right so let's get into it we have the user dress hook first of all we again use the user metadata hook and we're following this pattern where we deconstruct the data out of the object that gets returned from used metadata we're renaming that data field to be called token metadata we follow the same pattern for use token balance so we're deconstructing the data renaming that to current balance you can see how useful these hooks are because they follow all the same pattern you're literally just doing the same thing getting different information from the smart contracts and you can add awesome stuff like the is loading here so you can say is loading or is error with all of these hooks which is a great feature so beneath those two we have use contract data which is another read function where we're deconstructing the data and renaming it to unclaimed amount and we're calling the unclaimed amount function on our smart contract which i don't actually think is correct we'll go ahead and fix that in a little bit but i think the function that we want to read is actually called if we open this up i think the function that we want to read is called um sorry we'll bring this up here open up the terminal we'll go back to our contract code this and i think the function we're actually interested in is unclaimed amount uh i think it's actually called calculate rewards so we're going to be reading calculate rewards here not unclaimed amount so we'll rename that in a short second but as we progress through this we're also using the use contract call to call the claim function here so this is just calling the claim function on our smart contract and we'll use that with the mutate so when you're writing you don't deconstruct the data you deconstruct the mutate out of the object that gets returned from this hook so now we've got all of the information that we need to render the information on the ui so within the return block here what we're doing is we have a div with some simple styling we have a text that says your gold gems you can see where this is going as we already have a preview here so we're going to load the metadata we're going to load all of this information and display that so the first thing is if the token metadata has loaded then we'll render that metadata using again the third nft media component passing in the actual token metadata into that component and that renders the image for us here so then beneath that we're going to use the balance that we loaded from this used token balance and we're formatting that to the display value so we have the balance here so we say balance is equal to that and that's what this block is here beneath that we have the unclaimed amount and this is where the unclaimed function comes in here where we're loading the uh owed rewards from the smart contract and this is wrong we're just going to go ahead and fix that in a short second but this is formatting the unclaimed amount into the readable human format so ethers.utils.format units converts it to a big number to something that humans can read on the ui here and beneath that we have the approx rewards component passing in the mining contract which we're going to create after this component beneath that we have the web3 button of claim and this calls that claim hook that we deconstructed out of the use contract call and this just takes in zero parameters since the message.sender is actually the person that we're claiming to so we have a web3 button pass the address of the mining contract as the first parameter of contract address here the second parameter is that action where we just call the claim hook here and that is it for this component so let's quickly go back and fix this string here this shouldn't be unclaimed amount this should be calculate rewards calculate rewards and what we're doing here is we have the mining contract we have the calculate rewards i'm just looking at the documentation here i think this might actually be not required in here i think we can put this in the um no that's good that's good there since this is the read operation so the three parameters that we have are the contract first of all the second one is the actual name of the function you want to call on that contract the third one is an array of arguments that you're passing into that contract function so if you see in our actual smart contract here what we have in the uh calculate rewards function is the address of the player that you want to calculate to so that's the parameter that we're passing in in this array here all right so that's it for the rewards component now we just need to create this approximate rewards component here so within the prox rewards component we're following a very similar pattern where we import all the stuff that we're going to be using so we have the type we have some imports from react ethers and the third web react and typescript sdk so we're using the use address hook the smart contract type and we'll use ethers to format some of the results that we got back we'll use use effect and use state to update those values in sort of a repetitive cycle in a set interval function within a use effect and then we have the contract mapping response which is just the type that we created and we're following a very similar pattern here again where we have the type we accept that mining contract as a prop into this component and then within our component here what we're doing is we're grabbing that mining contract and then we'll be able to utilize it so this component is a little hacky we have this variable called every millisecond amount which kind of hacks this way of grabbing the amount that a user might earn per second so i've made a rough assumption here that every block will take around 2.1 seconds to be mined and then we're making some calculation here where we have that value set to uh 10 trillion down here and if you remember that is in that 18 decimal format so they're earning that value every millisecond and then what we do is we store these values in a stateful variable so we have a stateful variable called amount and multiplier so the multiplier if you remember in our smart contract we had a multiplier for the calculation of the rewards here where the token id is being used to multiply the rewards that the player earns so we're going to load that information as well as the uh the rewards that they're earning every second so let's go ahead and write that in this use effect block here so if there's no address we can't load this information because we don't know the address we're checking to load the rewards for but if there is an address then what we can do is we'll call the player pickaxe with the address being passed in as the main argument here we're returning that type as a contract mapping response and what we'll do is we'll say if they do have a pickaxe staked then we can read the token id set the multiplier to be equal to the token id plus one otherwise if they don't have a token then they're not earning any rewards since they well they don't have a token staked so they won't earn any of the gems so their multiplier will be zero if that token is unstaked all right so then beneath we have a kind of hacky use effect set interval where we set the amount every 100 milliseconds to be amount plus every millisecond amount so we're updating this value called amount in state to be the value that we calculated based on this sort of hacky calculation here and beneath that we return this on the ui so we have earned this session with a space here and then we actually calculate the amount times the multiplier to a fixed value with uh the sort of fallback here value being error if something went wrong calculating this value so you can kind of see how this is sort of a hacked together solution where all of these calculations are being approximated on the client side and feel free to make improvements to this it's just kind of a fun little aspect of the game where you have this constantly refreshing value and that gets multiplied by the token id multiplier that is on the smart contract so now we're going to move on from this top section here so we've written the equipped items we've written the gameplay animation we have the rewards section here and we also have the earn the session section now we have three components to go we have the owned pickaxes and we have the shop and the shop item and i believe we need the loading section as well so we've got four components to go let's go ahead and build out the your own pickaxes component now all right so for the owned gear component what we want to do is load the pickaxe nfts that the user has within a wallet that they haven't staked onto the smart contract so for this we're going to follow the exact same pattern we'll import all of the required logic so we have the third web nft media user address use owned nfts and the web3 button which is all stuff that we've seen before we have the types that we're going to type the props as in this next line here so we have pickaxe contract is of type addition drop mining contract is of type smart contract this is the exact same pattern that we've seen in all of the previous components i'm just going to speed through the imports here and go to the actual functional component so you can see within the comments here we have this component shows the pickaxes that the world currently has that aren't staked into the staking contract and a button as well underneath the image that we're going to show using this third web nft media that allows them to stake the pickaxe nft onto the mining smart contract so again we're following the exact same pattern here where we deconstruct the pickaxe contract as well as a mining contract out of the props that get passed down to this component from this play field the play page rather here so passing down the pickaxe contract as well as the mining contract we're getting those available inside of this component here so we're once again using the user address hook to grab the currently connected wallet address then we're using the use owned nfts as we did in the index.tsx page but this time we're using it to load the owned pickaxe contracts sorry the pickaxe nfts rather than the character nfts so we're loading all of the pickaxes within this wallet passing in that address from the user address as a second parameter here we're renaming the data to be owned pickaxes and we're also grabbing that is loading boolean flag so that we can show this loading state here where we say if it is loading then return the loading section but if it is not loading then we can continue with the rest of this component and beneath this we're going to write the function that actually equips or stakes the token of the pickaxe nft onto the mining contract so we have an async function called equip and this accepts an id of type big number and what we're first doing is if there's not a currently connected wired address which should never really be the case since we're using the web3 button we'll return immediately out of this function because you can't equip if you don't have a currently connected wallet address we don't know who the nft is coming from so that's just kind of a safety check but beneath that we can go on with the rest of the function so the first thing we do is we check if the mining contract has approval of the currently connected wallet addresses pickaxe nfts an approval room refers to the ability of the mining contract to transfer the nfts from the address so what we're saying here is has approval is equal to the fact that the pickaxe either does or doesn't have the permission to transfer the nfts because if you remember inside of our pickaxe sorry inside of our uh stake function here we're transferring from the message.sender to this contract so the contract is actually responsible for transferring from the sender to this contract that's why we need to make this check here and if approval is false so meaning the mining contract doesn't have permission to do that yet then we need to set that permission to be true which is what we're doing here so we're saying if they don't have approval if our mining address doesn't have approval then we need to ask the user hey can the mining contract address have permission to transfer your pick axes and then the user will approve it then we can continue on the function will then be callable where we can say we can now call that stake function to allow the user to transfer or equip that item inside of our game and to close out the equip function here all we're going to do is quickly refresh the page so all of that information is reflected on the ui and the user feels that kind of okay my transaction went through now the information is kind of reloading again so let's close off the equip function here and let's continue on with the ui for the owned gear component what we're going to do is we're going to return a div with some simple styling here and we're going to iterate over all of the owned pickaxes so we're looping over all of the own pickaxes where we can access the current iteration or the current pickaxe that we're looking at in this p variable here and what we're going to do is we're going to render the metadata of each pickaxe in the owned pickaxes array so you can see we're transforming each pickaxe into a div and within that div we're going to render the metadata of that nft so you can see here we pass in the metadata into this third web nft metadata component we have some styling and the height is just going to be set to 64. so that's just some styling and we get this effect where each of the owned pickaxes will look something similar to this we don't have any own pickaxes in this currently connected wallet apparently but it would look very similar to this component here in the shop where we have the metadata of the image and we have the name i believe we have the name beneath this yep so we have the name of the pickaxe that the user owns and then beneath that we'll have a web three button component that allows the user to equip that nft by calling this equip function here that says okay mining contract.call stake the id that got passed in and as you can see we're passing in the token id into that equip function for each of these web3 buttons that we've created all right so that's it for our owned gear component the next one we want to do i believe is the shop so let's move on to creating that shop component now so the shop is very simple all we want to do is just load the available nfts to be claimed from the pickaxe nft collection and we just want to render those on the ui into a shop item component so all we're doing is importing all of the logic we need again we have the type props following the exact same pattern that we have been with all of these components passing in the or sorry deconstructing the pickaxe contract out of the props of this component and we have a nice comment here that says all of the pickaxes available will be displayed with their price as well as a button that allows you to buy it from the shop all right so within the shop we have the use nfts which grabs all of the available nfts inside the pickaxe contract so we're loading all five of the pickaxes with their metadata and all we do again is just a loop over each of the available pickaxes nfts inside that array convert it into a div here and this is just returning the shop item component so we're transforming the array of all nfts from that pickaxe contract accessing it within this p variable here and we'll have five of those and converted into this shop item component here so this one's very simple all we're doing is just looping and converting them into another component so let's build out that shop item component next so within the shop item component you can see what we want to do is we want to render the metadata of the nft so we have the image we have the name we have the price and the price actually comes from the claim conditions so that's the one kind of new thing that we're introducing into this component here so let's go ahead and import all of the functionality and the new thing that we're using here is this use active claim condition hook and as the name suggests this reads the active claim condition of a nft so we're using this to read the price is essentially why we're importing this and we'll pass in the token id we'll get back the active claim condition for each of those tokens and we'll read the price and render that price on the ui so we gain this kind of shop effect where we can show the metadata of each of the nfts as well as the price coming from that claim condition all right so i'm going to kind of skim over the rest of these imports as we've kind of already seen all of these before and beneath that we followed the same pattern we're passing in the contract and this time instead of a contract for the second parameter we are actually passing in the nft metadata itself so we have the contract as well as a metadata that we're looking at so that we can use that to grab the token id and pass that into the use clean use active claim condition hook all right so within the actual function we have the item and pickaxe contract deconstructed what we're doing is we have the constant address grab the currently connected wallet address beneath that we're reading the active claim condition of the token id that we're currently looking at so the two arguments passed in here are the pickaxe contract as the actual nft contract itself as well as the token id of the token that we want to see the claim condition for we're destructuring the data field out of that renaming it to clean condition and that's kind of the same pattern that we followed for all of these use x use y hooks all right so beneath that we're using a right hook here so we're deconstructing mutate instead of data out of this hook we're renaming that to a function called claim nft and as the name suggests we're claiming an nft from this pickaxe contract from this function here so what we're going to do beneath that is we'll write a buy function that as you can imagine is allowing the user to mint or claim an nft from the shop we exit out of this function if there is no address somehow we can't claim to a wallet that we don't know what it is within this function we're going to use that hook the function that we got from the hook that we just deconstructed here to pass in the to address is the currently connected wallet address the token id is the id that the user is trying to buy and the quantity is just going to be hard-coded to one so this allows the user to pick an nft that they want to buy from the shop will mint that nft to them and if that fails we'll just show them an alert that says something went wrong are you sure you can't afford it like do you have enough gems that you can actually buy this nft so that's it for the buy function we'll move on to the ui here we're again rendering a div with some styles and all we're doing here is rendering the third web nft media to show the metadata of that nft that we're loading and this one is being passed in by the item prop here so we're rendering the actual metadata of the pickaxe nft itself so we'll load the metadata of the image here within this third web nft media component passing in the metadata adding some styles beneath that again we'll show the name and here is where we'll use the active claim condition to show the price so we're saying the price is equal to if the claim condition has loaded and the price that we're formatting it using ethers.utils.format units passing in the price that comes from that claim condition we've got from the use active claim condition here and beneath that we have another web3 button that allows the user to buy or claim mint the nft from the actual drop so that's it for this component we've kind of gone through everything here we have the metadata we have the name we have the price and we have the buy button using this web 3 button here to make sure they have a connected wallet and make sure they are on the correct network as well the final component we need is this loading section here and as you can imagine is very simple we're just returning a div that has the loading text within it all right so if we save this and let's open up the terminal we'll run the yarn dev command here we'll visit localhost 3000 open that up and as you can see the connect wallet button kind of flashed there but i have already connected my wallet to localhost 3000 we have already claimed one of these nfts from that character collection so we don't see that edition drop we're ready to play the game let's click this it takes us to the play page we can see all of these loading states all of the information loads in so we don't have any owned pickaxes we don't have an item equipped so our little guy says i need a pickaxe and then our unclaimed is currently zero and this session is zero since we don't have a pickaxe equipped let's go ahead and buy the stone pickaxe here this is a price of zero gems apparently and let's hopefully see this pop up in metamask here here we go we'll claim this from the drop and once this is done we should see the transaction go through here onto the test network and if we take a look at our component here in the shop item what we said was try to claim this and then once that is done you'll alert sorry once that is done what we should see is if we quickly refresh this page here what we should see is we now have an owned pickaxe here since that wallet sorry since that nft has been uh minted into this wallet so as you can see we now own this stone pickaxe and we have this equip button which will stake it but first it will ask us if we want to grant this mining contract permission to transfer our nfts from this nft collection so let's go ahead and click the equip button now and as you can see it's going to ask us first of all do you want it to give access to all of your nft and that looks really sucks but all it's asking is if you want to give access to this collection and i've called my collection nft it's not asking to access all of the nft so that's poor naming on my behalf but it's asking to have access to all of the nfts from this specific collection and you can see this is a set approval for all transaction and which just means approved all of your nft if i actually click into this you can see this is specific to the pick axes here it's not all of the nfts in my wallet i know that looks pretty bad but that's what it's asking so that is this um line here where we said in the owned gear we call the equip function and if you remember the mining contract needs permission to transfer nfts from your wallet to its address so what it's doing is okay this mining contract doesn't have permission to transfer so it's going to ask for this set approval for all over the um pickaxe contracts specifically to this mining address so here's where we are in code so we don't have approval yet we're going to ask for approval and if we await that we'll go ahead and confirm that so we're granting the mining contract the approval to transfer our pickaxe nfts once that goes through we'll hit this call here where we have a second call asking us to actually stake that nft so now the mining contract has that permission to transfer the nfts we can call the stake function here so let's go ahead and stake our nft what we should see is in this equip call once that goes through we'll refresh the page and as you can see it's refreshed in the background and the equipped items now is our pickaxe and we've started to earn these rewards so it looks like one thing is not going well for us is this unclaimed section here so i think we might need to go back and fix that up the unclaimed comes from the rewards here so as you can see this should be coming from this use contract data here and if we take a look at the calculate rewards function that accepts the player address so i'm not sure why this is not happy with us let's take a look i think it's because it's in an array and that looks it so it's sort of um the difference was that i just deleted the uh array from the parameters that were passing into this hook so instead of passing the arguments into the user contract data that's just a mistake on my behalf it doesn't need to be an array you can just pass them in one by one like i am here so we're passing in the one and only parameter that we need for that contract call which is the currently connected wallet address so now we can see up here we have the unclaimed rewards we also have the balance and we have this kind of hacky uh refresh every couple of milliseconds to show how many they have earned in this session and if the final thing we want to do is actually claim the tokens out of this mining contract and i'm kind of expecting this to fail as you can see here because the execution reverted the erc20 transfer amount exceeds balance and in english that means the mining contract doesn't have the required tokens to actually transfer you or pay you the rewards because we need to actually transfer our mining address the tokens so that it can pay out other wallets so if we go to our contract addresses here copy and paste this and we'll open this up inside the third web dashboard here and what we're going to do is we're going to transfer it some of our gold gems so if we open up the gems address here open that up as well let's copy the address of our mining contract and let's go to the tokens tab of our gold gems let's click on the transfer button we'll paste in the address of the mining contract itself let's give our mining contract a thousand gold gems and then click the transfer button here we'll go ahead and approve the transfer transaction so let's transfer our smart contract a thousand gems and once that goes through the actual mining contract will have the balance of the gold gem tokens so that it can actually pay those out because right now if you think about it all the contract is doing is really just transferring the tokens to the person trying to claim them and since it doesn't have any of those tokens it's failing because it's trying to send more than it actually has or more balance than it owns so that transfer has gone through let's go back to our page here let's go ahead and click the claim button and this time that transaction should go through as you can see we're running this claim function now and we should see probably be pretty hard to tell our balance going up here but once that transaction does go through we should see that balance number go up and i don't know if it did but let's give it a refresh 08562 and we are now at 08757 so that has gone through and that is pretty much it for our game so if you have any questions about this build you can dive right into our discord server where you'll find all of the members of third web to help you out building in your web3 projects among many many other awesome web3 developers inside of that community the link will be in the description but if you enjoyed today's build and you want to see more free awesome web3 content like this one remember to like the video and subscribe to the third web channel but with that said we'll see you in the next one

Channel: thirdweb

Views: 28,842

Keywords: web3, blockchain, thirdweb, web3 explained, web3 tutorial, nft games play to earn, play to earn, play to earn nft games, play to earn games, web3.0, what is web3

Id: iTfQh5m8HF8

Length: 114min 37sec (6877 seconds)

Published: Tue Sep 20 2022