How to build a "Play to Earn" idle game on Polygon zkEVM

hey what's up everyone and welcome back to another video in today's tutorial we are going to build a simple play to earn idle game on the polygon ZK EVN Network this simple game is a idol game that we're calling crypto Farmers where you get a farmer and you can purchase tools which can then stake to earn a erc20 token as a reward you can then use that token to buy more tools to make more erc20 rewards we're going to cover quite a bit in this video so to break it down we're first going to cover how to get funds for the polygon CK evm Network we do have to bridge some girly eth over to get some funds to use we're then going to build our smart contracts for our game it's going to involve a few contracts we're first going to create the ERC 1155 contract for our farmer will then create an ERC 1155 contract for the tools that we'll be using in the game will also create an erc20 contract which will be the rewards that the user will earn by staking those tools and will also create an ERC 1155 staking contract which will reward out those ERC 20 tokens depending on the tools staked by the user now before we jump into it let's take a quick look at the demo of this game so right here on my computer we have our crypto farm game we have a few things up top where we can play and Shop we do need to connect our wallet first so I'm going to connect my metamask wallet here once we have the wallet connected it's going to check if we have a farmer we do need a farmer to play if we don't have a farmer it will bring us to a claim farmer page where we can claim a farmer we'll confirm the transaction to claim one and once we have a farmer claimed we'll be brought to the game dashboard so you can see here I own a farmer my erc20 reward is called carrot which I don't own any carrot right now I also don't have any inventory so we can shop for our tools and I don't have any equipped tools yet to earn me carrot so we're gonna first shop tools here which will bring us to our shop page and our shop page we have a few different things here we have wheelbarrows and tractors they are going to cost some carrot though for us to buy so we won't be able to buy those yet we can buy a shovel though which is free to claim and we're just going to click on buy here we'll confirm this transaction and once we have purchased the shovel we'll go back to our dashboard here and you can see in our inventory we now own a shovel and we can equip that shovel so if we click on equip this will state our shovel tool we do have to set approval if we've never staked any or equipped any of our tools yet so we will approve this and then we'll confirm our transaction to equipped and once it's equipped you can see we no longer have any tools in an inventory because it is now equipped and it is now staked and we can unequip this shovel which will unstake the shovel and you can also view the claimable carrot that we have here now what I have the shovel set to is it earns one carat per minute the other if we look at our other tools the wheelbarrow earns two carats per minute and a tractor earns 3 carats per minute now we didn't go in depth on building out a working game and you know the economics of it this is just to show you how you can build the concept of the game and how you can build a simple Idol like game with staking functions so if we come back here we still haven't earned any carrots so we'll let some time pass and then we'll see how much carrot we have earned by equipping our shovel and now that some time has passed we can see here that we do have some claimable carrot I did wait a little bit longer just so we can purchase a new tool with it but you can see here we have 6.8 carat available to claim we can claim this carrot we can confirm that transaction and once we have claimed our carrot you can see we don't have any claimable carrot for our shovel but our carrot balance is now at 6.8 we can come back to the shop section here and if we look at a wheelbarrow here that costs 5 carat we can buy a wheelbarrow and we'll just set a spending cap we'll just make it the max 6.8 and we will confirm that transaction and once that is purchased we can come back in our inventory here we can see we have our wheelbarrow and we can now equip our wheelbarrow to also start earning some carrot we'll confirm that transaction and once that has been staked we'll see it pop up here you can also see the carrot balance has been reduced back down to 1.8 and we now have a wheelbarrow equipped along with our shovel and if we wanted to we could unequip our shovel here we can confirm that transaction that will add our shovel back into our inventory and we only have the wheelbarrow that will be set in our equip tools here and that there is the basic demo of the game that we're going to be building and without wasting any more time let's get started now the first thing we will have to do to build this on top of polygon ZK evm is we are going to have to get some funds that we can use on the polygon ZK evm Network now there are a few bridges that you can use and you will have to bridge over early eth in order to get some polygon zke evme and we'll link down a couple of bridges that you can use I am on polygons Bridge right over here we'll drop again this down in the description we are going to be deploying this on test net not Mainland so you do want to make sure you have testnet products turned on we're gonna once you have your wallet connected we're going to go over to our bridge and we can see here in my wallet I have 0.31 Gurley eth and I'm just going to deposit a 0.1 of that girly eth and Bridget over to zkevm testnet and that's what we're going to bridge over to our ZK evm testnet so once you have that set we will bridge eth2zkevm I do need to switch networks here to Gurley and we will confirm that transaction and you can see here that there is a pending transaction for the girly eat that we're bridging you can see right now it's estimated about 15 minutes to bridge it over it does take some time so just be aware of that and once that is complete we'll be right back and once the time has passed you should see your pending transaction now turn to this here where you can claim that transaction so we'll click on claim transaction we'll have to switch networks to the polygon ZK evm testnet Network and then from there we'll confirm this transaction to accept our bridged funds there we go so if we take a look at our wallet I already had 0.995 in here but you can see we claimed our assets and we got 0.1 more each and now that we have our polygon zkevm testnet funds here let's head on over to third web and create all the contracts we are going to need for this project so on third website here we're going to head over to the dashboard and we're going to browse contracts now the first contract we are going to create is an addition drop contract and if we click on this this is an ERC 1155 standard contract this is also known as a semi-fungible token or semi-fungible nft this means we're going to create one nft our farmer but we can have multiple owners of that nft so instead of having thousands and thousands of individual farmer nfts we can just create one nft and allow people to claim that one nft and if you want to read a little bit more about the ERC 1155 Edition drop you can read more about it here you can view all the contract extensions that come with it and you can even view the source code and the functions of the con contract but coming back up to the top right we're going to click on deploy now we're going to name our contract here I'm going to name this farmer and Dev and I'm just going to call this a farmer for the symbol I do have an image here that I'm going to use of our farmer now depending on what you want to set up you can set up the royalties the primary cell wallets and these are the wallets that the funds are going to go to you can set your royalty percentage you can also set your platform fees if you choose to do so now down here at the very bottom we're going to select the network or chain to deploy to we are going to deploy to the polygon ZK evm testnet and once everything is configured to your liking we can click on deploy now we'll confirm that transaction and we'll sign to add it to our dashboard and once that has been successfully deployed it'll bring us over to our contract dashboard here we can see that there is a contract checklist and we have completed first task which was deploying the contract the next one is to upload our nft and we can head on over to the nfts tab and here we can create our farmer nft so we're going to select single upload we're going to name him farmer we're gonna get our image of our farmer here and you can add descriptions and properties or traits to your nft once that's done we'll select a lazy mint nft here we'll confirm the transaction and once it has successfully minted you can see we have our token ID 0 our farmer nft here with a supply of zero now before we move on to the next contract we do have to set up the claim conditions for this farmer nft so by selecting the farmer nft we will come over to the claim conditions Tab and this claim condition is going to set the conditions for being able to claim this nft so we can set price and requirements for this specific nft down here at the bottom we're going to select add phase we can name our phase when it's going to start start how many nfts are going to be in this drop we're going to leave it as unlimited we're also going to leave it as free to claim and any wallet can claim this nft now the only restriction we're going to put here is you can only claim one of these nfts per wallet and once that is done we are going to save faces here and we'll confirm that transaction and once that has saved that does it for our farmer now we're going to come back to I'm going to open up another tab here and we're going to browse contracts again and we're going to do the same Edition drop this time this is going to be for the tools that we will be able to buy and stake in order to earn the carrot token so we're going to select Edition drop one more time click on deploy we're going to name it farmer tools and I'll just name this one with symbol uh F tools and I'll just select the image of our shovel here and again you can set all the royalties and wallet addresses to your like talking and we will deploy this again to the polygon zkevm testnet and we'll confirm that transaction and we'll sign to add this to our dashboard and once that has deployed successfully again will be brought to our dashboard here we can come to the nft tabs and just like our farmer nft we can now create our tools so I'm going to select single upload here we're going to do shovel first we got our shovel image here we're going to Lazy mint this nft we'll confirm that transaction once that is done we'll do that again this time we'll do wheelbarrow we'll get the image for our wheelbarrow tool we'll lazy mint that one and we'll confirm that and we'll do one last one for our tractor get our tractor image and lazyman this nft confirm that transaction and we now have our tools now we're not going to set up the claim conditions just yet because we do need to make sure that these tools are a able to be purchased with the carrot token which we haven't created yet so coming back to I'm going to open up another tab here back in our home page we're going to browse contracts again and this time we're going to select the token now the token is an erc20 now the token is an erc20 standard token and this is going to allow us to create our carrot token so we're going to click deploy now we are we're going to name this uh we'll name it uh farmer rewards uh symbol is going to be carrot and we'll upload an image of our carrot here and again you can set the wallet addresses and configure things to your liking and we're going to deploy this on the polygon zkevm testnet we'll then confirm this transaction and sign to add this to our dashboard once brought here we can see if we check our contract checklist uh we deploy the contract we just need to Mint our first token right now we don't have a supply we have zero carrots and we don't own any carrots as well so we'll come on over to the Token tab here and we can now mint our carrot token and you can put in what whatever Supply you want of carrot token so we're gonna do one million and I'm going to Mint this token we'll confirm this transaction and we now have a 1 million carat tokens now I'm going to copy this contract address for our erc20 token for our carrots I'm going to come back over to our tools section here now we'll set up the claim conditions for each one of these nfts now the shovel is we'll come over to claim conditions and add phase uh we'll have an unlimited amount of shovels it's going to be free to clean because we want our users to be able to claim at least one tool for free so that they can start earning carrot um the olymp the amount though we're only going to allow them to claim one free one per wallet so we're gonna save this this phase we'll come here and confirm this transaction once that has been saved it will click out and we'll come over to the wheelbarrow next we'll set up a claim condition for this one we'll add a phase again unlimited uh we're going to change the amount we want to charge for each nft and in this drop down you can actually add your own cut custom erc20 token we're going to paste in the address that we copied from our carrot contract hit save and we can select how much carrot we want to charge for this n of T so for the wheelbarrow we're going to do five and we're going to leave any wallet and you can claim an unlimited amount you just have to pay the fee and we'll hit save phases here we'll come over and confirm the transaction and once that's saved we'll click out and head on over to our last one which is the tractor again clean condition tab We'll add phase we're going to drop down and select our custom erc20 put in our carrot address and click on Save and we're going to charge 10 karat for the tractor and we'll click save face confirm the transaction and once that is done our farmer tools are set and our contract is finished so we have our farmer nft we have our tools and we have the reward token which is our carrot token now we're going to create one final contract I'm going to head open a new uh tab here come down and we're going to browse contracts and we're going to scroll down to the staking section and we're going to deploy a ERC 1155 staking contract and what this is going to allow us to do is when someone equips or Stakes a tool nft they'll be able to earn a certain amount of carrot per certain amount of time and that's how our idle game or our play to earn game is going to work people can stake these tools earn carrot use a carrot to buy more tools stake that to earn more carrying we're going to click on deploy we're going to name this we're going to name it uh crypto farmer and we'll just call it C Farmer for the symbol and we do need to add a few things in here we need to First add the contract address for our reward token then we need to add the contract address for our tools and then we need to also set the default time for our rewards and how much rewards they're going to earn for that time so let's get our carrot contract address first we'll copy that come back here here paste that address in we'll get our tool address next copy that paste that back in now default time this is the if we look here in numbers for example if you want to give rewards out per hour then enter 3600 as the number of seconds so we're putting in the amount of time that is going to pass and whatever time we put they are going to earn whatever amount of rewards we put in here so again we're doing one minute rewards so we're gonna put 60 seconds and now the next one down here is the rewards per unit time so every 60 seconds how much rewards are going to be earned now this is going to be the default amount what we're going to do later on once our contract is deployed is for each token ID from our ERC 1155 contract we'll be able to sign assign a reward amount to each one of those tokens so we'll be able to assign a reward to the wheelbarrow token and then to the Tractor token this is just the default value for the deploy now this value does need to be in weight so if you need a converter anything we can just come over here and search for a way converter we'll drop one down in the description below as well so the amount that you want to put is going to be in ethers so we want one carat per minute uh but the value we need to input is this way value here so we'll copy that come back to the contract address and paste that amount into the rewards per unit time once you fill those things out to your liking on what you want to reward and you put in your token address and your staking address you can deploy this to the polygon zkevm testnet we'll confirm this transaction and then sign to add this to our dashboard now once that has been deployed there are a few more things that we need to set up in this contract again the default amount is no matter what token we have staked it is going to earn one carat token per minute but we want to make sure that our users earn more tokens if they are staking a wheelbarrow token or a tractor token so coming to the explore tab on the left hand navigation here we can look at our read and write functions of our smart contract and if we come down to set rewards per unit time this is where we can select the token ID and how much rewards that token ID is going to earn so we come back and look at our tools here we have token ID 0 for our shovel that is already set to the default of one carat per minute we're going to set the wheelbarrow and the tractor so token ID is one and two the wheelbarrow is going to earn two two carats per minute and the tractor will earn three carats per minute so coming back to our staking contract here again let us put the token ID one this one is going to be two carats per minute again this value has to be in Whey so we can come here to our converter we'll just put two carrots we'll copy that way value come back here and paste that in then we'll execute this and we'll confirm that transaction and our transaction has gone through next thing we're going to do is token ID 2 which is a tractor and this one's gonna be three so I'm just going to change the first number here to three and we'll execute that transaction then we'll confirm this and there we go that transaction went through and we now have our rewards set for our wheelbarrow and tractor nfts when they are equipped or state and the next thing we need to do is we need to make sure that we approve the sticking contract and we deposit the carrier tokens into this contract so that it can reward out those tokens when people claim them in our game so we're gonna come over here copy our contract address of our staking address we're going to head back over to our carrots contract and head on over to the explore tab under the write functions we need to approve the staking contract to be able able to spend these carrot tokens so we're going to paste that contract address there and then we're going to enter the amount that the contract is allowed to spend now again this is in in way so we can come back to our way converter here and we'll just put uh we'll put 500 000 for now so put 500 000 we'll take that way amount come back to our carrot tokens here and paste that amount in and we'll execute that transaction we'll then set the cap to 500 that's 50 500 000. make sure that's right yep and we'll approve and once that is through we can now come back to our staking contract and we can deposit our reward tokens now the amount of reward tokens we're going to deposit is again that 500 000 in the way amount and we will execute this and confirm and once our transaction goes through if we take a look back at our our carrots here and come back to our overview we have our transfer and approval set and you can see we only own 500 000 carrots in this wallet that created the carrot token and the other 500 000 is now owned by our staking contract which it can use to now reward users of our game and there we go we finished creating all the necessary contracts that we need to deploy and create our play to earn idle game we created an ERC 1155 contract for our farmer we created an ERC 1155 contract for our tools that we are going to allow people to purchase and Equip to earn more carrot tokens and we created an ERC 20 token contract for our carrot token which is going to be our in-game currency or reward and we finally created an ERC 1155 staking contract which is going to reward our users different amounts of carrot depending on what tools they have equipped or staked in our game now the next thing we need to do is actually build our our game app and our front end that users can interact with to be able to play this play to earn idle game we're gonna do that right now and head back to the computer okay and now let's get started on building that front end so I'm going to go into terminal here just enlarge this screen and we're going to start off by creating our application now I'm going to run MPX third web I'm going to add latest to get the latest version and we're going to do create app we'll then have to name our project I'm going to name this crypto farmer we're going to use evm because again we are using the polygon ZK evm Network and we use next.js and typescript for this project and once that is done we'll just change into our crypto farmer folder here and what I'm going to do next is install chakra UI and Chalker UI is just going to be the UI library that I'm going to use for this project just to make our application look nice without having to do much custom styling now go ahead feel free to use your own Styles or follow along here but I will be installing chakra UI for this demo and once that finishes we're going to open this in our code editor Let Me zoom in just a bit and now that we have this open I'm going to head into the pages folder here and go to the underscore app.tsx file now in here we're going to first set up chakra if you are using chakra so I'm going to import chakra provider and we're going to wrap our component here and within our third web provider with the chakra provider I spelled chakra right there we go and we're also going to have to make sure that our active chain is sent set to the polygon ZK evm now to do that we are first going to import I'm going to get rid of this and import the polygon zkebm testnet from third web chains now once we have that set we're going to comment out this active chain here and we're just going to set our chain to this polygon zkevm testnet so right here in our third web provider the active chain set we're going to set to polygon zkevm testnet and that's going to set up our whole application so that we can now know what network our application will be interacting with with our smart contracts after that we will head over to our index.tsx page and there is some templated code here I'm just going to delete all of this for now and I'm going to just create a container here and set this container's Max width to 1200 pixels get rid of the Styles here and within our container We'll add a heading and we'll just have the heading say a crypto farmer we'll save that we'll open up our terminal and our code editor here and we'll run yarn Dev and we'll take a look at our app here so we'll let this load and you can see here we have our header that says crypto farmer so everything is looking good so far now if we take a look at our demo project we need to First create this little nav bar up here that's going to have a connect wallet button so even if we disconnect this wallet here we're gonna have a connect wallet button some navigation to our play screen or our shop and uh the title of our app which is again crypto farm so I'm just going to just close the terminal out here I'm going to get rid of connect wallet because we're not going to need it here in our directory here I'm going to create a new folder and this folder is going to be called components not in my pages though and within that components folder we're going to create a new file and we're going to call this one navbar and then.tsx now within this navbar file here we're going to create our nav bar I'm going to import a few things that we're going to use from Chakra and our connect wallet button from third web which is going to allow us to use the third the connect wallet UI component and with all that has the built-in features to connect any wallet you want to our application and then for our application we're going to create again a container with a Max width of 1200 pixels some padding on the top and bottom we're then going to add a flex here and give it a direction of row this will be so we can put in all of our navigation items and they'll be spaced out within the nav bar so first We'll add our heading which is going to be crypto Farm then we're going to add another Flex here to add in our two links we're going to use a link here first one is going to be play which is just going to give us direct us back to our home page and then the next one is going to be a link to our shop which we will create a shop page later on and then again we're going to use that third web UI component called connect wallet all we need to do is put in this connect wallet and it's going to give us a full functioning connect wallet on our app we'll save that and we'll go back to our underscore app TSX file and we're going to drop in our nav bar right above components here that way it's always shown above the contents of our page so coming back over to our app demo here you can see we now have our nav bar with our links here and we have our connect wallet button this is the heading that we just had in our index file now coming back to our editor we're gonna in our directory here again we're going to create a new folder and we're going to name this one const and this is where we're going to store a file that is going to hold all of our contract addresses just because we do have four contracts that we'll be interacting with and we do have to interact with them quite a bit so we're just going to store a file in here called addresses.ts and in here we are going to store our contract addresses now let me get rid of these demo addresses here and we're going to have to get our farmer address our tool address our Rewards address and our staking address so again we can get that from our third web dashboards you can just come back here we'll do our farmer first we'll copy that paste our farmer address come back we'll do our tools copy that then we have our reward token and then we have our staking address and again that is just so we can reference these uh addresses easily throughout building our application now let's head back to our index.tsx file here and let's set up our home page now the first thing we want to do is let's take a look back at our demo application here when a wallet is not connected we want to present this welcome screen here uh with a welcome to crypto farm and a connect wallet button and when someone does have a wallet connected it will prompt them to either claim a farmer or to our game so we first need to check if a wallet is connect did and we can do that by getting the user's address and if there is no address to get then we know that there is no wallet connected so we can create a variable here called address and we're going to use the use address hook and what this will do is it'll get the address of any connected wallet to our site here so what we can say is if there's no address then we can display this here so if there is no address what we'll do is display a container with a flex and a heading of welcome welcome correctly we'll display a heading saying welcome to crypto farm and then it will display a connect wallet button which we will actually import right here so if there is no wallet um attached we don't have an address therefore we will return a little welcome heading any connect wallet button next we want to check if a user owns a farmer because if they don't own a farm armor we're going to prompt them to a claim section where they can claim a farmer so that they can start playing our game now we're going to set up a bunch of stuff here first we're going to first set up all our contracts so we're going to get all of our contracts and we're going to use the use contract Hook from third web and all we need to do for this is pass the contract address of the contract that we're looking to get now we're going to store all of these into different contracts so we have our farmer contract we have our tool contract staking contract and reward contract and again we're using all of the matching contract addresses that we stored in our variables folder next we're going to check the owned nfts from the farmer contract so we're going to use a react hook called use owned nfts from third web and what this is going to do is it's going to take our contract that we want to check an own nft for in this case we want to check the farmer contract and we want to check the the address of the wallet connected so we want to check how much nfts does the connected wallet own from this smart contract and we'll store that data in owned farmers and we can also check if the data is finished loading by setting the is loading and we're going to put that as a loading owned Farmers so now under here we can check if owned Farmers dot length is equal to zero this means that they don't own any Farmers then what we're going to do is return a container with the claim farmer component and we're going to create that little claim farmer component in just a moment but again this is just checking we're going to check the length of owned farmers and if it's equal to zero we're gonna prompt the user to claim a farmer now we'll also just add a little loading area here so if we're still loading the farmers and checking to see if the wallet owns a farmer or not we're gonna put this container here with this loading spin dinner that way we have something visual to for our users to see that we are still checking to see if they own a farmer now we'll create this claim farmer component so under our files here in our components folder let's create a new component called claim farmer dot TSX and in here we will again import a few Hooks and UI components from third web or a farmer address and some Chalker UI components so for our claim farmer here we're going to get our contract for our farmer contract that way we can interact with it so we're going to use the use contract hook again and get passed in our farmer address and we're going to use the use contract metadata on our contract that we just got and that's going to give us back the metadata of our contract so it's going to give us things like the contract description the contract image which is what we are going to use and you can also get things like the contract name so for our claim farmer component here we're going to again create a container within that container we're going to create a flex and with a direction of columns so they're all stacked Along on top of each other and we're going to Center everything as well we're going to add a heading here called claim farmer to start farming just so our user knows what they have to do then we'll add a box and within that box we're going to use a UI component called media renderer which is going to take the metadata of our contract and within that metadata there is an image which is the image of our farmer contract and we'll just set the height and width to 300 pixels then we're going to use a UI component called a web 3 button now a web 3 button is a button that allows us to interact with a smart contract it requires we have at least two things the first thing is the contract address of the contract we will be interacting with in this case it is our farmer address and then the action so what action or what function is this button going to do on top of our contract so in this case we are on our contract we can specify it is an ER c1155 and we can call it a claim function now the claim function is going to ask us what token ID first we want to claim which in this case is token ID 0 because we only have one token ID or one token which is our farmer and then the quantity in which you want to claim and for this one here we're only going to allow them to claim one because again even with our claim conditions we made it so that a user can only claim one nft so we'll save that here and if we check back in our index.tsx we will make sure to import our farmer component and we can come back to our app here and right now we don't have a wallet connected so let's connect the wallet and once we have it connected we should be brought to our claim farmer because we don't have a farmer yet now our next step is to create the game dashboard so when someone has claimed a farmer the actual dashboard that they see so again we can take a look at the demo app that we had here we're going to be creating this dashboard where it's going to show our farmer and their carrot balance the inventory of unstaked tools that they have and then the equipped tools of the staked tools that they have so we're going to build this section next because this is where a user will be brought to once they claim a farmer so back in our code editor here we're in our index.tsx file and the next thing we're going to do is over here we are going to get our owned tools so we're going to check what tools does the user or the wallet connected owned and we're going to be again using the owned nfts and we'll be using this time the tools contract and we'll be checking it again with the wallet that is connected so the address and we'll store that in owned tools we'll do the same thing with equipped tools although equip tools because this is our staking contract we're going to have to use the use contract read hook here and the use contract read Hook is going to allow us to call any read function from our staking contract we first have to specify what contract we're going to be calling this read function from in this case it is our staking contract next is going to be what read function are we calling and after that is any arguments that that function takes so we're going to be calling the get stake info so if we come back to our staking contract dashboard here under explore and under read we are getting the get stake in full function here and you can see it takes in an address of the Staker which is the connected wallet that we have so again the contract is the staking contract we're calling the get stake in full read function and we're passing that address of the connected wallet and that is going to give us back the equip tools so it's going to give us back the nfts that the wallet has staked within our staking contract and then next we want to get the balance of the carrot tokens of our connected wallet so again we're going to use the use contract read this time on our reward contract we're calling the balance of and we're passing in the wallet that is connected because we want to know what the balance of or how much carrot tokens does the connected wallet own and we'll save that and we'll store that under reward balance next we are going to clear out this this kind of placeholder that we had for our home page and in replacement we are first going to again create a container with a Max width of 1200 pixels where then we're going to create a simple grid with two columns and this is going to be if we come to our demo app here this is going to be the two columns so the farmer section here and the inventory section here so this is just splitting those two sections up and in there we're going to create a card with a padding of five this is going to be for our farmer section so we'll add a heading called farmer and then we're gonna in there create a simple grid again of two columns on the left hand side we are going to create a box and within that we are going to get our own farmers and map through that and for each farmer and for the farmer that the wallet owns we are going to create a div and in that div again use the media renderer this time getting the nfts metadata and displaying the image and we'll set the height and width to a hundred percent now on the right hand side we are going to create another box and in this one we are going to create some text here I just created some small font size and made it bold and it's going to display our carrot balance now to get our carrot balance we're going to check our reward balance again remember if we come back up here this reward balance that we got from reading our reward contract and getting the balance of once we get that reward balance we're going to display that balance now the balance is a big number so we are going to have to format that big number so we're going to use ethers.utils dot format units and we're going to pass in our reward balance and we're going to format it to 18 decimals which will give us the whole number instead of like a way value or something of our carrot rewards now we'll set up the right hand side we'll create another card this again is going to be the section for our inventory so we'll add the heading of inventory here we'll then add a skeleton to check if our tools are still loading if they are not loading it won't show the skeleton and instead it will display our inventory which we are going to create in a moment right after this and then we're going to create the bottom section which is our equipped tools so so for that we are going to create a card with some padding and some margin on the top and bottom we'll then add a heading of equipped tools and we'll create a simple Grid in there and that simple grid is just going to be divided into three columns so one is going to be for our shovel the other for our wheelbarrow and the last one for our tractor now what we're going to have to do now what we'll do here is we'll check if we got our equip tools data and the first item in that equipped tools data is going to be the staked nfts that we have so what we'll do there is we'll map through that and we'll get the nfts that are staked and we will then create an equipped component to display those nfts and that does it for our dashboard now what we need to do is create this inventory section or inventory cards and our equip cards for our tool nfts so we'll start off with the inventory ones so back here in our components we'll create a new file and we'll call this inventory.tsx and in this inventory file here we're going to import some things that we're going to be using uh including our hooks from third web we're also going to be importing an nft type from the third web SDK our contract addresses and some UI components again from Chakra for this inventory we're going to first create some props here and nft is going to equal an array of nfts and what we're going to be doing for our inventory is mapping through the nfts that we passed to it to see which tools do we actually own so we're going to make it equal to the nft type an array of the nft type that we imported from third web then we'll create our inventory component here and the first things we're going to have to do is we're going to have to get a few things we're going to get the again the wallet address of the connected wallet we're also going to get our contract address we're also going to get our tool contract and our staking contract because one we're going to have to display the tools that we have purchased and secondly we need the staking contract because we're going to need the ability to stake those tools if a user chooses to do so now if a user doesn't have any tools we're first going to check if the nft dot length so if nothing is passed to through this component here we're just going to display that there are no tools and we'll link them with a button to shop tools and we'll link them to the shop page now if the connected wallet does have some tools we'll display them and to do that we will first create a simple grid and the grid will have three columns and within that grid we're going to map through the array of nfts that are passed through to our inventory component and for each one of those nfts we're going to create a card we're gonna give it its key and a little bit of a padding and in that card we're going to use a stack from Chakra which is just going to stack everything evenly and nicely within our card the first thing we're going to do is display the image so again we're going to use the media renderer and the image that we're going to display is from the nft that it is mapped through getting the metadata and displaying the image we'll set the height and width to 100 pixels here we'll also display the name of the nft we can get that from the metadata as well and then we're going to give a each nft a web 3 button and that web 3 button is going to allow a user to stake or equip this tool now again we're going to specify what contract address this is going to be calling this function on and it's going to be our staking address and the action is going to be we're going to create our own function here called stake nft and to stake our nft we need to know the ID of the nft that we are going to stake so let's create the that stake nft function will come back up to the top here and we're going to create an async function called stake nft that takes in an ID which is going to be a string now if there is no wallet connected or and we don't have an address we're going to return out of this function here next we're going to check if the user or the wallet is approved to stake the nft and we'll save this under and is approved variable here and what we're going to do is on our tool contract we're going to check if the tool contract is approved and we're checking approval for our wallet address to stake the the tool nfts to our staking address now if we're not approved we do have to set approval in order to stake and to do this we are going to on the tool contract specify that it is an ERC 1155 and we're going to set approval for all and we're going to set the approval for the staking address to True once we do have approval we're going to on the staking contract call the stake phone function which is going to need the ID of the nft being staked and then the quantity being staked and in this case we're just going to pass one for this demo and that does it for our inventory section so again this will display the ERC 1155 tools that the wallet owns and that can be staked and if they do want to stake it they can call and press our web 3 button which will run our stake nft function which will first check approval to make sure that the wallet address is approved to stake the two nfts to the staking contract and if not we can set approval before doing so next we're going to create our equipped section so in our components folder we're going to create a new file called equipped.tsx and again we're going to import a few things here including some chakra UI components um some things from third web some hooks our addresses and we're also be importing ethers from ethers to do some conversions as well and then for our equip component here we're going to create an interface with equip the props it's going to take a token ID which is going to be a number and then we'll create our equip component here and the things we're going to need to get for this component R1 the address so again we will use the use address hook store that in our address we're going to get the staking contract and the tools contract again and then we're going to need to get the nft data of a specific nft depending on the token ID on our tools contract so what we're going to do is use the use nft hook here again we're checking the nft data on the tools contract and the idea of the nft data is going to be dependent on the token ID that we get and we'll store that under nfts and we also want to be able to check how much claimable carrot each nft has when they are equipped or state and to do that we are going to use the use contract to read on our staking contract there is a refund function called get stake info for token and what we can do is check the token ID and the wallet address so we're going to check what token ID is staked for the wallet address and what we're going to get back is how much claimable carrot is claimable for that specific token and again what we are building is this bottom equipped tools section here and we're building this card this n of T card that we're going to be displaying so we're going to display the info how much are equipped because you can have multiple button to unstake or unequip the tool and how much claimable carrot this tool has and a button to claim that carry so what we'll first do is we'll just create a box here and within that box we're gonna check if our nft data if we got our nft data for that token ID and if we do we're going to display a card we have some we have some padding and we did add a little bit editing ourselves here and within that card we're going to create first a flex and a box and within that box we are going to use media renderer again to get the image of that nft so again the nft ID that we get back we're going to check the metadata get the image we're going to set the height and width to 80 and then on the right side we're going to display the information of the nft so we'll first display the name so we have some text here we made it a little larger and bold and we're displaying the nfts metadata name so the name of the nft so shovel wheelbarrow or tractor we'll then get the amount that is equipped so we'll create a text here with equipped and now the first item in claimable rewards is going to tell us how much of that nft we have equipped and we're going to format units and we're just going to set it to zero here and below that we are going to have a web 3 button that is going to unequip the nft if someone chooses to to unstick now again this is going to be calling it on our staking contract and we're going to be calling the withdrawal function which is going to need the token ID that we're withdrawing and the amount that we are going to withdraw next beneath that we're going to display the claimable carrots that that nft has for being staked we're going to display the amount of claimable carrots and the claim of awards the second item is going to be the amount that is claimable again we will format the units and set the decimal to 18 and then we'll add a web 3 button under that and for that web 3 button again we're calling this on our staking contract and we are going to call the claim rewards function and we just need to pass the token ID in which we're claiming those rewards for and that does it for our equip so we'll come back to our index.tsx file here we'll make sure we import our inventory and our equipped component that we just created and we we can come back to our app here now let's disconnect this wallet just for demo and again someone comes to our game they are prompted with this screen with a welcome to crypto Farm we have to connect a wallet so we'll connect our metamask wallet this wallet doesn't own a farmer yet so we can claim a farmer here and we'll confirm that transaction to claim a farmer once we claim a farmer we're brought to our game dashboard now you can see our farmer is here we do have a balance of 500 000 carats because this is the wallet that also deployed the carrot but if it was a brand new wallet of course it would show zero the inventory we don't have any tools yet so it's going to show no tools but it gives the option to shop tools and we don't have any equipped tools yet now if we click shop tools we're not going to be brought anywhere because we don't have that shop page yet which is what we're going to build right now so coming back to our code editor here we're going to create a new page page so in our page folder we're going to create a new file called shop.tsx and in that shop.tsx file again we're going to import a few things including our addresses and we're going to create a new nft component to display each nft so our shop page if we look at our demo here when we come to shop it should show us the nfts that we can purchase and it should load the cost of those nfts and have a button to purchase each one so what we're first going to do is get our tools contract so that we can we can set up claiming for each nft we'll also get use the use nfts hook here and pass our contract to get data back on the nfts and for our shop we're going to create a container again with a Max width of 1200 pixels and in the top left we're going to create a flex here with a link that brings us back to our home page with a back button just for navigation uh we'll add a heading that says shop we'll then add some text that will be our subheading here that says purchase tools with carrots to increase your earnings and then we're going to check our nft data and if we don't have it yet we're just going to show a loading spinner and if we do we're going to create a grid and display those nfts that we have in our shop now with the nfts we're gonna get we're going to map through each of those nfts within our contract and we're going to display them with an T component which we are going to create so to create that nft component will come back into our components folder create a new file called nft.tsx we'll import a few things that we're going to be using in this nft card we'll first create our type we'll first create our type prop of nft again importing nft from third webs SDK we'll then get our contract address using the use contract hook and then we'll use the use active claim condition hook to get the claim conditions including the price and everything of the nft and to do that we just need to say pass our contract and then we also pass the token ID in which we want to check the claim condition for because remember we are checking this on an ERC 1155 contract and each one of the nfts in that contract has their own claim condition so we want to make sure that we check it for the correct one and then for each nft in our shop again we're going to display it in a car hard we'll use media renderer and pass the nft metadata image and set the height and width to 100 we'll then display the name of the nft so we have some text here I just made it a little larger and bold and we can get that from the nft metadata named to get the name of the nft we'll then check if the data has loaded from the claim conditions and if it has loaded then we will display the cost of that nft we're going to display this with text we're going to display cost and we can get the cost from the data there is a price now the price is again in a big number so we'll use ether's utils format ether to make it a nice looking number that we can display and we'll also display the currency because if you remember in our shop our items are also sold in carrots which is our custom currency so under data we can get the currency metadata and the symbol of the currency and if it hasn't loaded yet we'll just show some loading text beneath that we'll add a web 3 button that will allow a user to buy that nft from our shop and this will be again calling it on our tools contract and we are going to be calling the claim function from our contract uh we are going to be claiming whatever the token ID is and we'll be claiming one so now coming back to our shop here if we look here when we map through the nfts that are within our tools contract we're going to pass that nft item to our nft component and it will render out a card with the image the cost and a buy button for each one so we can come back to our app here and when we go to shop tools now it'll bring us to our shop page where it will load our nfts we can see what they cost and we can purchase them so for this one because we have some carrot already let's go ahead and buy a tractor we can set the max to 10 because we're only going to be spending 10 carats so just to prove 10 and then we'll confirm the transaction to purchase the tractor once it has been purchased we can go back we should see our tractor and our inventory here with the equipped option so let's equip our tractor now it should ask us for approval first because we haven't staked anything before to this contract so we will confirm and then confirm the transaction to equipped or stake this tractor and once it has been equipped you can see now we have it staked down here or equipped we can unequip it and we can view the claimable carrot for this tractor and even claim that carrot we no longer have it in our inventory but we can go back and Shop more tools if we choose to do so and there you go we went and deployed our very own plate to earn idle game on polygon ZK evm we deployed a bunch of contracts from a couple ERC 1155 contracts to an erc20 contract and even an ER c1155 staking contract we also built an app to interact with those smart contracts so we can play this play to earn idle game and earn carrots we also built a built-in Marketplace so people can spend the cards that they earn to buy more tools which they can then stake to earn more carrots now if you folks enjoyed this video and you did find some value in it give this video a thumbs up don't forget to hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on tutorials just like this if you haven't joined our Discord yet join our amazing community of Builders just like yourself if you have any questions or you need any support you can drop them in our Discord and we'll be happy to help you out and again I hope you folks enjoyed this video found some value in it and until next time see ya [Music]

Channel: thirdweb

Views: 7,330

Keywords:

Id: nvtW4-29i9o

Length: 56min 51sec (3411 seconds)

Published: Wed Apr 26 2023