How to build a web3 game: Blockchain idle browser

what we're going to be building is a web 3 idle game this is going to be a very simple web 3 browser game and we'll walk through the game right now so this is our login screen here you can see web3 idle game login we have our embedded wallets here so you can sign in with your socials here or you can sign in with your email address you'll be given a onetime password where you can then verify a wallet will be generated for you and on top of that wallet we'll also create you a smart wallet or an ERC 4337 wallet we have gasless functionality turned on as well what we've done is abstract away all of the web 3 complexities out of this application so I'm going to sign in with my Google account here so I selected my email here you can see I'm signing in it's connecting to our smart wallet it's signing me in uh the sign in here we'll go over it in just a bit and once we're logged in here this is the basic dashboard of our game here we have our worker nft and our worker nft is just going to be an ERC 721 nft you can see we have our ID number here we have our balance showing so this is our in-game currency here called bit gold I currently have 106 here we're also displaying it up here at the top along with our connected wallet you can see here that we have a smart wallet connected and this is our businesses here now on the right hand side here is our businesses now this is a simple uh idle game and what this is doing is it's utilizing an ERC 1155 staking contract and what we'll do is we can buy these businesses which are ERC 1155 tokens and we can then stake those tokens and you can see here those tokens are receiving and earning a revenue here and these this Revenue here is what we can claim uh from our businesses and essentially this is what they're earning we can take those earnings buy more businesses so forth and so forth so let's just go through an example of what the game looks like here let's just go through an example of what claiming and purchasing a new business looks like so so you can see here I have a lemonade stand I actually have three of them this is the revenue that they're earning I have one ramen shop you can see I have one of them this is the revenue here that it's earning so I can claim my revenue from my lemonade stand so I can hit claim here now what this is doing is the Smart wallet is going through this transaction here but because we have gasless functionality turned on and we're using embedded wallet I don't need to sign any transactions or anything it's doing all of the onchain actions here behind the scene you can see here Revenue has been claimed so I claimed my Revenue now my total uh bit gold in my account here is 3,700 I can do the same thing with the ramen shop but we're not going to do that here I now that I have some bit gold let's go to the shop here and here in our shop we can buy these different businesses so you can see the cost of it here is 100 bit gold this lemonade sand owns 10 earns 10 bit gold per hour and so forth and so forth we have all of these different ones here now normally we did make a video older video on a game similar to this uh what what you would have to do is buy the nft then you would need to stake the nft you would have to confirm all those transactions and everything what we've done in this version of the game is we can just purchase one of these nfts so let's just say we want to buy a convenience store here it is 8,000 bit gold and it earns us 100 bit gold per hour what I'm going to do here is actually click buy now and again because I have Smart wallets I have gases turned on I have embedded wallets here I'm not having to sign any transactions it's actually minting the nft for us this 1155 token for us it's spending the Thousand bit gold it's setting all the approvals and what it's actually going to do here is stake this nft to our staking contract so we don't need to go through this multiple procedure of doing different steps and everything I'm just waiting here for my nft to be purchased and we should see it being staked in just a moment so there you go now it's staking our business and it's setting the approvals and everything all behind the scenes the user doesn't see any of this and once it it's staked uh we should be able to go back to our business and it's going to start earning uh bit gold already so if I come back to my business here you can see now I have right here my convenience store and it's already earning the bit Golds right over here we create this uh idea of a very simple idle game now the UI of it might not be uh the greatest but you can see here that it's one of those basic games where I purchase uh something that earns me Revenue I collect the revenue I can then go back in purchase more business is and you know earn more spend more and it's just one of those continuous games just like that but all of the assets are all on chain so again the currency here is actual an actual erc20 token the businesses are 1155 the worker is actually used as our access pass for the game so the next thing I'm going to go over is what happens when someone starts a brand new account like they're new to the game and everything so if you look at our shops here the minimum uh business here is lemonade stand which is 100 bit gold when you sign in how do you get a worker nft and how do you get some bit gold to start buying and purchasing businesses so I'm going to sign out here I'm going disconnect uh I'm going to sign in with another email here I'm just going to say plus one two 3 so I can get a variation of this let me get this uh onetime password here so once that's verified what this is actually going to do is when we sign in it's going to check if we have the worker nft that's our way of knowing if someone is new to this game or not the worker nft is non-transferable and if they don't have it what we're going to do is actually use third web's engine and we're going to claim a worker nft for the user along with minting them 100 bit gold tokens this way when a user is brand new to the game they'll have a worker to start off with they'll have 100 bit gold and they have enough to purchase their first business so you can see here we're claiming the worker in tokens and again this is finding out that this is a brand new account because we don't have this nft here so once someone signs in with a brand new account they're minted this nft it's non-transferable so it's stuck to their account and that's how we verify if they are new to the game or not so you can see here we now have a new worker automatically starts with 100 bit gold I can come to my shop here I can buy my first business which I can only buy a lemonade stand here so right over here you can see it's purchasing the business it's going to stake the business for us and we can start earning and from there we can start playing this little game and we can start purchasing businesses and earning more tokens so there you go now it's staking the business and once the business is staked we can go back our bit gold balance should drop down to zero because we spent all of our bit gold that we initially funded with and then again our business should be staked and we should start earning um 10 bit gold an hour so once that's done staking there you go if we come back to businesses here you can see we're at zero bit gold we have our Lemonade Stand staked and it is now earning some bit gold right over here we have to wait until we have enough we can claim the revenue and we can start playing the game and that is going to be the game that we are building here now another thing that we've implemented is O into here as well so let's disconnect here so none of the game is accessible until you sign in through our login page here this means if I go to our regular page our regular dashboard page I can't access it because I'm not logged in and I don't own the nft if I try to go to our shop page I also can't view our shop page as well because it's all locked behind us being able to authenticate and log in through this login screen here we're going to go through a few different things uh but this is the basic premise of the game and what we're going to be building in this tutorial hey everyone Sean Wata here back with another tutorial video and in today's video we're going to be building our very own web 3 idle game it's going to be a browser game we've done videos like this in the past essentially what we're going to be doing is building an ERC 1155 staking game so an overview of how we're going to break down this tutorial here we're first going to show you how to create an embedded wallet and smart wallet combination for your login this way users can log in with just an email or social login and a wallet will be generated for them next we'll look into third web's off and we'll see how we can build our application to make sure that a user is authenticated prior to being able to access any of the pages within our app we'll then deploy out all the smart contracts that we need for this tutorial and project we'll deploy our very own ERC 1155 nft which will be our worker and our access token to proving if a player is new or not we'll deploy an erc20 token which will be our reward token we'll deploy an ERC 1155 token which will be our businesses that we're going to be using in our game and then finally we'll deploy an ERC 1155 staking contract which will stake the businesses and reward the erc20 tokens to the user we'll then build out when a new player signs up for a game we'll be using third web's engine to Mint them a brand new ERC 1155 worker token along with 100 of our erc20 tokens so that they can purchase their first business we'll then work on displaying the game dashboard while a user can look at their token balance and their worker nft along with their businesses that they have purchased and view the earnings that each business is receiving and then finally we'll build out the store where a user can spend the tokens that they've earned to buy more businesses to earn more tokens and that is an overview of how we're breaking down this tutorial we'll link all the timestamps down in the description below if you ever need to jump back and forth between them and with that being said let's jump on the computer here and let's get started let's first start off by creating ourselves a new project so I'm going to come over to my terminal here I'm going to run npx third web create app and we're going to build ourselves a new third web project here we'll name our project here we'll call this our YouTube uh idle game and we're going to be using xjs and typescript for this example here and once that is done here we'll just change into our YouTube uh idle game and we'll open this up in our code editor and in our code editor here what we're going to do first is we're going to set up a way for a user to connect their wallet and to be able to utilize our embedded wallet plus smart wallet combination this means that a user can sign in with a social login or email and that will generate them a wallet but that will be used as an EA wallet to a Smart wallet or an ERC 4337 smart contract wallet and we can enable things like gasless functionality uh and a whole bunch of different things that we're going to get into so what I'm going to do here first is we'll set up our project so in our Pages folder going to thecore app. TSX file we first need to Pro uh set up our Third Way provider here and we need to provide it with our client ID uh this is going to be stored in environment variable so in our files you'll see a env. example folder here and we're going to grab our client ID here which is our third web API key so I'm going to come over to third web here and I'm going to come over to my settings tab and right here I'm just going to copy my API key now we'll link down in the description below a link to a tutorial video and some documentation if you want to learn a little bit more about API keys I'm going come back here I'm going to paste that into myv file and I'm actually going to rename this here get rid of example at the end and just leave it ATV coming back to our uncore app. TSX file that does it for our client ID next we need to set our active chain now it's set to this active chain variable which is right up here and by default it's set to ethereum now you can switch this over to whichever chain that you are going to be deploying your gameing contracts to uh in my case I'm going to be using the Mumbai Network so I'm going to switch that over to Mumbai and now that we have the two things uh required for our third web provider we're going to set up what wallets we want to support with this as well so in the third web provider we can add supported wallets and we're going to give it an array of the wallets that we want to support now the one wallet that we want to be able to support is our smart wallet and our smart wallet what we need to do is provide it with our wallet config and our smart wallet config so the wallet config is what's going to be the EA wallet for our smart wallet and for us we want to make that an embedded wallet so a user will sign in again with the social login or email that will generate them an embedded wallet which will be used as the EA wallet to the smart wallet if you want to learn a little bit more about what smart wallets are we have a whole course on our smart wallets account abstraction and we'll link that down in the description below if you want to learn a little bit more about what this tool and feature is and what it can offer now what we need to do is provide it with our smart wallet configs and our smart wallet config here we need to provide it with our Factory address and this Factory address is going to be our account Factory address or the Factory address that's going to generate our smart contract wallets for a user and then we have gas list here and we're going to enable gas list so we're going to set that to true so I'm not going to provide a Factory address yet we haven't deployed it yet uh we'll come back to that in just a moment next I'm going to come back to my file directory here and I'm going to create a new folder here going to name it components and and in that components folder I'm going to create a new file and I'm going to create a navb bar. TSX file now coming back to our demo application here let me just sign in again we're not going to build the login screen just yet what we're going to build is this nav bar right up here so we're going to give it a title we'll give it some links uh we're not going to display the balance yet but we'll create this connect wallet button right up here so in my navb bar. TSX file I'm going to create our navbar here and my navbar here we're going to uh return and we'll just give it a div here and we'll save this and in here what I want to do is I want to only display this nav bar if there is a wallet connected now I can do this by using a hook Cod use address so I'm going to store this in a address variable and I'm going to use a hook Cod use address and what this hook does is it gets the wallet uh address of a connected wallet to our application and if it doesn't have a wallet connected it just returns undefined so with that we can display and say hey only if we have an address do I want you to display our Navar here so within our Navar we will have a few different things we're going to have we'll just say a title here that says uh web 3 idle game then we'll have a div this will contain our links which will be like our business links and our uh shop links then on the another div on the right side of our nav bar we'll have another div here uh that will display our balance our token balance and a connect wallet button so we'll say connect wallet button here and that's a UI component from third web that gives us a fully functioning connect wallet button for a user to log out disconnect our wallet or connect the wallet so I'm going to save that and then I'm going to come back to rore app. TSX file and above my components Within my third web provider here I'm going to add my Navar here we'll import uh Navar here and oh I don't think I exported it make sure we export navbar there we go and then what we'll do here is open up my terminal and I'm going to run yarn Dev to run our application so right over here um you'll see that we have some boilerplate code here from third web now we can imagine that this is our login screen here and when we hit hit connect uh you can see we can sign in with our social logins and email and once we're connected we should see our navbar now we can't do this right now because we haven't set up our account Factory smart contract which is what is going to help us deploy smart contract wallets for our users so let's do that now we'll come over to third web we're going to come over to the contracts Tab and I'm going to hit deploy a contract here now it will be in our popular section you'll see account Factory um if not you can scroll down and there should be a smart wallet section here and you can deploy an account Factory contract from here as well so select account Factory we're going to hit deploy now and what you can do is if you want this account Factory to be the same um contract address across different chains you can deploy a deterministic address I'm not going to do that here uh I'm just going to deploy a regular account Factory contract um and I'm going to select my networking chain here in this drop down so again I'm using Mumbai testnet but you can use any evm compatible network or chain here main net testnet you can search your own you can add your own custom as well you can select your network here I'm going select Mumbai and I'm going to deploy this contract I'm going to get a transaction confirmation here I'm going to confirm that transaction to deploy my contract we get another transaction that pops up this is actually a signature request so we can design this request here to add it to our third web dashboard so hit sign there it's going to add it to our third web dashboard and then it should bring us to our contract dashboard of our account Factory there we go we now have our account Factory contract here so I'm just going to copy that account Factory contract address come back to my code editor here let me just drop down my terminal coming back to right here under our smart wallet and under our account uh our Factory address we're going to provide our contract address there so now when I sign in with our embedded wallet it's going to generate a smart contract wallet using this Factory address here and generate us a smart wallet so now I can come back to my demo app here and if we were to connect say we connect with our Google account this is going to log Us in it is going to then uh connect our smart wallet here and there you go you can see now we have our Navar here which has our title and our connect wallet button here uh we're going to add some styling and add our links in just a moment but you can see right there we now have a smartwatch wallet that is generated for us so we can disconnect that and let's come back over to our code editor and let's add some styling in here now I'm going to add a styling that I already have you can grab the same styling uh we'll link the GitHub repo down in the description below uh I'm just going to add some styling here so as we go through our tutorial uh we don't need to waste any time styling our application you can just throw in the class names that I'm going to be using so style here in this I'm just going to paste in my custom styling and then coming back to our navb bar. TSX I'm going to import our Styles here and then I'm going to in this div that wraps our whole navbar I'm going to add a class name of styles. navbar container and then for uh this middle div here we're going to add a class name of styles. Navar options and I'm going to actually add in My Links right over here so I'm going to add a link uh this is going to link just to our homepage and this is going to be called businesses so businesses and then we'll copy this and we'll create another link here actually we'll make wrap this in P tags and then we'll just copy this this will be our shop and this is going to go to a shop page that we're going to create later on I'm also going to copy this class name here and provide it to this last section here so now if I come back to my app if I connect a wallet uh we'll connect again with the Google Wallet it'll connect us to our smart account and there you go we now have our navbar up here on the top so now we have embedded wallet and smart wallet combination set right now a user can sign in with a social login or email we'll generate them a wallet set that as a ea to a Smart wallet where we can now uh use features like gasless transactions and everything so let's just sign out here next thing we're going to do is go over how to set up off with third web so we'll take a look at our documentation here we'll link this down in the description below as well but under the connect section we do have o where we can authenticate users and their wallets so what this will do is we can make sure that a user has to authenticate their wallet which is a smart wallet that we create them before accessing any part of our application so we can kind of block everything behind a login screen so that a user has to log in in order to access our app and what we're going to do here is we're just going to follow our doc mentations really quick uh we're going to install o here so you can either run this uh with mpm yarn or pmpm so just copy this come back to our code editor open up our terminal paste that in we'll install off then in our Pages folder we're going to create a new folder we're going to call that API we're going to create a new folder within that called o and then within that o folder we're going to create a new file where we're going to store our third web o so put third web and then in Brackets and then. TS and in this file here we're going to provide our we're going to set up our third web o so we're going to just export our variables here which we're going to get our third web o Handler and uh and a function called get users which is going to return uh our user when they are logged in with O and we are then going to use third web o here and we just need to configure o here and what we need to provide third web o is with our wallet and what we're going to do here is create a new private key wallet where we're going to have to uh provide our private key for our wallet uh we'll go over that in just a bit and then we're going to provide the domain that uh the signature to authenticate is going to come from so we'll store this in our EnV file here so we'll just say EnV do we'll say domain or this is going to be set as an empty string here so for our new private key we're also going to store for this tutorial our private key in our environment variable now star your private key in your environment variable you can do this for testing and development purposes in production you're not going to want to store your private key in your environment variables we'll link down in the description below some safer ways that you can actually store your private key again for this tutorial uh and example here we're just going to store it in our en environment variable so we're going to say EMV do private key uh not o but o uh next then we're going to import private key here uh nope so import private key wallet from third web-dev SLO SL evm and we need these to be commas not semicolons there we go we're also going to make sure that we export our default third web off Handler so in this file again we're just setting up our third web o if we come back to our documentations here you can look at getting started and you can follow this here which is basically what we just went through so once we have our third web off Handler exported uh we also need to set up our third web provider to make sure that it knows that we are using o so back in our uncore app. TSX file in our third provider after supported wallets here we'll add our off config and in our Au config we need to provide it with our domain which again is going to be uh stored in our environment variable so we'll say process. env. domain or uh we leave it as an empty string and then we need to set our o URL so and this o URL is going to be going to that API o folder where we stored our third web o and that's where we'll authenticate our users wallets so once we have that set now we can build out our login page and we can also add in the logic to our homepage and our shop page that we want to make sure that a user is logged in prior to being able to access that page so in our file directory here I'm going to create a couple new pages so in my pages folder I'm going to create a new file I'm going to call this one uh login. TSX then I'm going to create another page here or another file and call this one shop. TSX and we're going to start in our index. TSX file first so in our index. TSX file I'm going to delete everything in this uh return this is the boilerplate code that you get when you create a project with third web so I'm just going to delete all of that and I'm just going to throw in some empty div tags here and I'm going to get rid of this image and this connect wallet import so over here uh in my homepage I'm going to first use the use user Hook from third web and this is going to provide us if a user is logged in or if they are logging in in so we'll say is we'll get is logged in and uh is loading to see if a user is logging in and we're going to again use the use user Hook from third web then we're going to set our router here uh so we can route the user to the login page if they have to uh or we can route them to the homepage uh and give them access to it so we'll use router here and then we're going to create a use effect here and this use effect will'll make sure that that when a user is logged in or is loading or we'll say router as well uh what we're going to do here is check if the user is not logged in they're not logged in and it is not loading the user right so if we're not loading the user and we find out that they're not logged in which means that they are not authenticated we are going to them push them to our login page so we'll do router push and then to our Lo page here now to check to make sure that when uh someone loads this page here that they are authenticated or not we're going to create a server side function that checks if they are logged in so uh below this export default home here uh we're going to export an async function uh called get serers side props and what we're going to take is our context which can be any and in this server prop again we're going to check uh if a user is logged in and if they aren't uh which they aren't authenticated then we're going to redirect them automatically to our login page uh this one up here is checking to see hey if someone is logged in and they log out we're going to check and see that they logged out uh and then we'll redirect them to the login page so this is going to be our server side function that gets called every time this page loads to make sure that um a user is actually logged in so we can get our user to make sure that they are logged in uh what we're going to be using is is the uh get user function that we created in that we exported in our off file here right here get user so we're going to say uh get user so we're going to get user with uh the context request that we have see if they are logged in or not and if we do not have a user so if there is no user what we're going to do is return and we are going to redirect our user to our say the destination to our login page uh we'll set permanent to false and then at the end we don't need to we're not returning any props or anything so we'll just leave uh return empty props here but this is just going to again run every time our page loads it's a server side function that's going to check see if we have a user if there is no user we're going to redirect them to the login page so so they can log in with their uh social login our email and generate a wallet to use our game so with that we're going to create our login page right if they get redirected they're going to get redirected to our login page here so we're going to create our login and then we'll export our login page here and within our login page we'll just return and we'll add some empty divs here for now now in our login page we're going to use something called our connect ed so instead of having a connect wallet button button that we need to click the button UI and then it shows a popup and then we need to sign in with a social login or email we can just show that connect Modo itself uh and which we call connect embed so we're going to create a variable here called uh log in optional uh which we're going to set to not true false and this is something that we're going to provide our connect embed now we're going to use a hook called use show connect embed which will give us back if we should actually show The Connect embed or not uh essentially if we're not logged in or we don't have a connected wallet we can show the embed and if not then we shouldn't show the embed so we'll just say show connected embed and then in our div here we're going to give this outside div a class name here of styles let's import Styles really quick so give it a styles of container and in that uh div we're going to give it a H1 tag here and just call this our web 3 idle game again and then below that we're going to say hey if we do need to show the connect embed so if show connect embed then we will show the connect embed and if not uh we're not going to show anything so we'll say uh connect embed here now in Connect embed we do need to provide that we are using o so we'll say uh o here and we need to set uh the login option option here so login optional we can set as login optional which is the variable here that we set and what this will do here is uh show that connect screen so if we come back to our app here and I go to slash login there you go we now have this right over here and then you can stylize uh this connect embed however you want uh we'll drop a link down in the description below too on a video that we went over on how to customize uh your own custom connect Ed here and you can make this really look like a normal signin page that you see in your regular web applications so coming back to our code editor here we're going to do the similar thing that we did to our index. TSX page so I'm going to uh get is logged in is loading and then use use user again and then we're also going to get our router and use use router and then for right now we'll just check um we you we'll create a use effect here for right now that checks uh if a user is logged in and is not loading then we can push them to our homepage here and then down here below our export default we're going to again export um and create a get server side props here which is going to run every time this page loads to check to one get our user here which uh we are going to get user with our context requests and if there is a user we are going to and if there is a user oh actually we need to uh wait here so if there is a user then we will redirect them to our homepage here and set permanent to false and again no props are needed to be passed through so we'll just return empty props here so this should have our o set up here so we come back to our app uh we come if we try to load our homepage here um we need to set our private key so let's come back here uh so in our EMV file we're going to set our two variables for our third web o which is domain which I'm just going to say example.com and then we're going to set our private key so you can grab your private key from the wallet that you want to use uh I'm going to grab my private key put it in here and then we'll come back to our login. TSX page so I add it in my private key actually let's come back here to our terminal so in our terminal here we'll just restart our server we'll run yarn Dev so right over here let's uh try and load our homepage you can see right here we're redirected back into our login page so we can't go into our homepage or anything and we have off set up now we're going to do the same thing for our shop page really quick we're not going to build it out but we're going to make sure that we can redirect over here as as well so coming to our shop. TSX page we're going to let me just close my terminal here export uh default we'll call this shop we'll just return some empty divs here and then we're going to again get is logged in loading user we'll use use user we'll get router here so router using use router we'll create the same use effect here and then at the very bottom here we'll create our same server side prop or get server side props here to check to see if uh we'll import get user uh if there is a user connected and if there is no user then we redirect them to our login page so coming back here if we try to go to our shop page you can see we are redirected directly back to our login page cuz we haven't logged in yet so what I'm going to do here is a log in with my account you can see here we're connecting to Smart wallet you can see that we're actually signing in so normally when you have off set up and you have something like a metamask wallet or something you'll get a transaction that pops up asking for a signature for you to sign because we have embedded wallets connected to our smart wallet that embedded wallet will actually automatically sign that authentification for us now what this is going to do is actually deploy your smart wallet and from there you can see we have a smart wallet and we have a smart wallet connected to our application let's actually get rid of this uh extra connect wallet here so there you go and you see our nav bar displays uh we have our business we can go to our shop page which we don't have anything set up in our business page as well and then if we come here we can disconnect uh we're brought back to our login page I can't access the homepage I can't access the shop page until I am signed in with one of our wallets and I'm signed in with oth so that is O setup so again we've connect we set up our embedded wallet and smart wallet login combination we set up off so now a user has to sign in in order to get access to our game next thing we're going to do is we're going to start building out our game we have the layout of our application and game here so let's first deploy the smart contracts and then we'll start building the UI of our game so coming back to our third web account here I'm going to open up a new tab for contracts and we're going to deploy a few cont contracts so I'm going to hit deploy contract here the first contract I'm going to deploy is an nft and I'm going to deploy an open Edition erc721 now an open Edition ERC 721 is different from an nft drop basically we can set a individual metadata for our nft so all the nfts in this collection are going to be the same this is going to be our worker nft and we can leave this as an open Edition meaning that a new person will keep minting a new nft and there's an endless amount meaning that we can have any amount of players play on our game and we don't need to cap it off at a certain limit so I'm going to use an open Edition ERC 721 I'm going hit deploy now I'm going to name this uh worker nft we'll call this our worker and I'm going to upload a file or image here of our worker nft and I'm going to deploy this to the same network which is Mumbai here I'm going hit deploy now going to confirm the transaction to deploy our contract confirm the second transaction which is setting the nft metadata and finally we're going to assign the signature request to add it to our dashboard there you go we now are brought to our contract dashboard here what we need to do now is go over to our nft tab here on the left hand side and we're going to set the nft metadata so we're going to call this our idle worker and we can upload our image of our nft and we can add a description if we want and what we're going to do is set this as the nft metadata so every nft that is minted will have the same metadata right over here so we'll set that nft metadata confirm that transaction and there we go it's all set now so what we'll do next is set the claim condition and we're going to add a phase here and we're going to select only owner and what this means is only the owner will be able to Mint the nft now we're going to set it to only owner and what we're going to be doing is setting this to our backend wallet on engine our wallet in engine should be the only one that has access to Mint and nft or one of these worker nfts to a wallet or an account of our game so I'm going to set this to only owner for now we're going to set the owner of this contract to our back-end wallet in a moment we're just going to hit save phase here we're going to save this here and confirm it once that's saved we're going to come over to the permissions tab here on the left and we're going to set the transfer here to non transferable and again this is the uh nft that we're going to be using to validate whether or not an account that signing in is a new account or if they already are playing the game and we don't want this token to be transferable because then if they transfer it out then our game is going to recognize and say hey this person is new to the game Min them another nft so we want to make sure that once they log in the first time that we give them and provide them this nft we set up their new account and and they won't be able to claim or transfer another one of these nfts after that so again we're going to set that transfer to non-transferable and we're going to update our permissions here and we're going to C confirm and there you go we have that set and this is going to be our first contract here now I'm going to open up another tab here for contracts and the next contract we're going to deploy is going to be our token contract so I'm going to hit deploy contract I'm going to select the token contract here now I'm not using token drop I'm I'm going to do a regular token contract and I'm going to select deploy now and we're going to name this uh bit gold and we'll call this a bit G as the symbol and we're going to select Mumbai as a network I'll select an image here I have an image of the token and I'm going to hit deploy now going to confirm that transaction there to deploy our contract then we'll sign the signature quest to add it to our dashboard once that's deployed we're going to come over to the tokens tab here on the left and and we're going to Mint our first amount of uh bit gold here so we're going to hit mint and I'm going to just mint uh 1 million bit gold now you can mint more you can mint less for your game however you want to do the economics of your game you can set this here but we're setting this as 1 million and this is going to be the tokens that we Supply to our staking contract to reward out to people when they claim their rewards from their businesses so we're going to just mint a million tokens here we'll confirm that transaction and there you go you can see we have a million bit go right over here now we're going to have to come back to this contract in a moment after we deploy our staking contract uh but next let's deploy our business contracts so let's come open up a new contract tab here we'll deploy a contract and for this one we're going to deploy an addition drop contract now addition drop contract is an ERC 1155 contract and these are semi fungible tokens so we can just create our little businesses and and we can allow people to claim those businesses so business like the lemonade stand uh it'll be one nft but they'll have multiple owners of the tokens within that one nft so we're going to hit deploy now we're going to call this uh idle game uh businesses we'll call this I we just call this uh business and we'll give it an image we'll just give it an image of our lemonade stand and again selecting your networker chain I'm going to leave it as by here and hit deploy we'll confirm that transaction sign that request to add it to our dashboard once that's deployed in our contract dashboard here we're going to come over to nfts and for nfts we're going to just single upload I don't have the metadata here to batch upload uh but we're going to single upload here we'll call the first one here Lemonade Stand we'll upload the media uh you can add description if you want properties we're not going to do any of that here uh but we're just going to Lazy in this nft and I'll confirm the transaction here to save that and lazy mint it if you folks want access to any of the images and everything that I'm using within this tutorial uh will be in the GitHub repo down below as well so you guys can use the same images download them uh and then use them for your NFS here and then once that is done I'm going to do this for the remainder of the four business nfts that I have and then I'll come back once I'm done doing those and there you go I minted lazy minted all five of the business nfts that I have so a lemonade stand a Ramen Shop a snack shop convenience store and shopping mall now for each one of these we need to set claim conditions for each individual one because they are ERC 1155 tokens we can set different conditions um and prices for each one of these nfts so this first one here we're get Lemonade Stand we'll click on it we'll set the uh claim conditions here so set claim conditions in this tab We'll add a phase we'll leave it as public here and in public we're going to set it to unlimited and unlimited can be claimed per wallet uh the price though we're going to make this 100 and this is going to be 100 of our bit gold token so in this drop down here you can select different tokens here from madic usdc wrapped ethereum um usdt but we can select custom erc20 then we can come back to our token contract grab our bito contract address uh paste that in there make sure we hit save and then we can set it as 100 bit code so in order to purchase this you need to use the in-game currency in order to claim it so we can hit save phase here confirm that transaction to save and there you go we have our claim condition set for our lemonade stand so we're going to do this for the other businesses as well I'm going to do it for ramen shop Ramen Shop I'm going to set this one to 300 tokens so I'm going to say public and then for this one we're going to make it 300 we're going to make it our custom here paste in our bit gold address and hit save confirm that transaction there we go we'll come over to our snackshop this one we're going to set to 500 set our custom and you can make it whatever values and you know however much you want to charge whatever you know game economics that you think of you can create your own uh for this tutorial and this example game I just kind of made up numbers here so that's what we're going with hit confirm come back we'll go to our convenience store we'll set this one to 1,000 come down here custom erc20 paste in our address save that one then we'll come back to our final one which is our shopping mall we'll go to claim conditions set it to public and this one will set to 1,500 select our custom ERC 20 paste that in and save it and save our last phase here we'll confirm that and there we go we now have our idle game or our businesses uh and our ERC 1155 tokens ready that we can add into our shop later on the final contract that we're going to deploy I'm going to open up another tab in contracts here is going to be our staking contract so I'm going to hit deploy contract and I'm going to scroll down to our staking section here and I'm going to deploy a stake ERC 1155 our businesses are going to be the nfts that we're going to be staking and in return they're going to earn ERC 20 tokens or our bit gold tokens and then we're going to set the different um rewards for those so what we're going to do here is deploy now we're going to deploy our contract so we'll just call this our web 3 uh idle game uh staking contract we'll just call this idle here now we're going to have to add a few contract parameters here so first one is we have to provide the erc20 reward token so this is going to be the token that gets rewarded out to uh the user when they have a a ERC 1155 token staked so this is going to be our bit gold here we're going to come here copy our bit gold contract address paste that in next is going to be the ERC 1155 staking token address so this is going to be our contract address for our ERC 1155 businesses so this this one here we'll copy that then the default time unit for rewards so in our case I'm going to be saying say hey you're going to be rewarded this amount every hour so for an hour we have to put this in seconds so I'm going to say 3600 seconds and how much rewards are you going to earn every hour this is only going to ask this is the default reward so we're going to set this to the reward of the lemonade stand we're going to manually adjust the tokens uh for other businesses later on so in here under default reward tokens we do need to provide this in way so so I'm going to come to a whey converter here and Whey is just the smallest units here uh for ethereum uh ether is normally the values that we see like 10 10.5 uh but we need the wave value and for our lemonade stand it earns 10 bit gold every hour so I'm going to take this wave value here and I'm going to put that into the default uh reward units per time again networking chain I'm deploying this onto Mumbai you'll select the same networker chain that you've been using and I'm going to select deploy now I'm going to confirm that transaction to deploy our contract then we'll sign our request here to add it to our dashboard once we have our staking contract deployed uh we're going to head over to the Explorer Tab and we're going to set rewards per unit time here so if you scroll down under the right section here and what we're going to do is manually set the rewards for the other tokens what we set was the default reward per unit time and that's the default for any token that we don't set manually here so next one we're going to do is we're going to set token ID number one which is our ramen shop and the reward per unit time here we're going to come back to our converter uh for that one it's going to be 30 per hour and you can again make this whatever numbers you want uh just remember that you do need to provide the value in way so we'll paste that in here we'll execute that so this is going to set token ID 1's rewards to 30 bit gold an hour right once that's set we're going to set the second one which is our snack shop that one's going to be 50 bit golden hour uh we can just actually come here and just change this first number here to five and we'll execute that one next one we'll do is our convenience store which is going to be 100 bit gold per hour so while that's going let's just uh do 100 copy that there we go so we'll set token ID 3 to 100 EX that and then the last one will be our shopping mall which is going to be 150 we can copy that and that will be the last one here that we're going to set for token ID 4 and if you want to know what the token ID reference is if you come here the token IDs here on the left hand side uh but it's just the index of the token within our contract so here we'll say token ID 4 is 150 and we'll set that one there so I confirm there we go we now have all our tokens set with the amount of Rewards that they have now we do need to uh provide our staking contract here with the erc2 tokens um so that it can reward out those tokens to people who claim the rewards what we're going to have to do first is give approval to this staking contract to our token saying that hey this contract has the approval to distribute these tokens to uh whatever contract or whatever wallet address is claiming them so we're going to copy our contract uh staking contract address here we're going to come over to our bit gold contract and I'm going to come to the Explorer over here and then I'm going to set the approve here the spender is going to be our staking contract and the value that they're allowed to spend so in this case we did a million tokens so again we need to come over here set the way here to one million we'll get that we'll come back to our bit gold and say hey they are able to spend 1 milli million tokens so execute that here we will set the approval for them and approve and there you go they are able to now spend and distribute that 1 million tokens next we need to now deposit the 1 million tokens into that staking contract so coming back to our staking contract here we're going to write and we're going to deposit our reward tokens we're going to deposit the amount here and we are going to execute that so we're going to deposit the 1 million tokens and we can hit confirm and there you go we have deposited the 1 million tokens here to our contract so if we were to take our staking contract come to bit gold and hit uh read and we go balance of and provide our staking contract here you can see it has our 1 million tokens so our contracts are set for the most part we're going to have to come back and set the owner of our ERC 20 uh 721 contract but our staking contract our businesses and our token contracts are all set so what we're going to do here is come back to our code editor and we're going to create a new file or folder here so just create a new folder we'll name that one constants and in the constants folder we're going to name uh create a new con uh file Cod contracts. TS and we're going to just store all our contracts in here so we can use them throughout our application so I have my worker contract address my token contract address the business contract address the staking contract address I also have the account fact contract address so I can actually come back here let's store the uh account Factory in here and then we can use our account Factory address here instead so we'll come back to our contracts here and let's copy and paste in all of our contract addresses so we have our bit gold one here which is our token contract we have our worker nft we have our businesses and we have our staking contract all right so we have all of those contracts set now let's come back to our navbar and let's display our token balance like in our demo here so what we can do here is we can get our contract and we'll say this is our token contract and we're going to use the Ed contract hook and provide it with our token contract address and with that contract or that instance of our contract we can use the token balance hook uh we'll get back some data here we'll store that under a token balance variable so we can use the used token balance hook here provide it with the uh token contract and the address which is the address variable up here which is the wallet address that way we can get the balance for that wallet and then over here I'm just going to create a very uh simple truncate um function here that just will make our value a little bit smaller and then down here we can say uh by this Above This connect wallet so before it we'll say if we have a token balance we'll display the truncated number of our token balance do display value as a string here as a string and behind that we'll get the token symbol we can get that from our token balance. symbol so again we're just truncating the value shorter to the Token balance. display value and then we're displaying the symbol right after it let's try restarting this here so let's delete that one run yarn Dev again uh let's see it looks like it's getting stuck here again let's just throw a connect wallet button in here real quick uh we'll connect and there you go you can see we have our nav bar and we're now displaying the value right up here so the next thing we want to do is again in that demo game when a user is new and they don't have the NF that means they're a new user and we should mint them the nft and Supply them with 100 bit gold here so that they have enough to purchase their first business so we're going to build that functionality in here right now so we're going to come back to our code editor here we're going to go back to the login page and in this login page we're going to create the logic here to check the balance of the erc1 uh the ERC 721 nft and if they don't have it we're going to Mint them that and we're going to Mint them the 100 tokens that way they can purchase their first business so what we're going to need is we're going to need uh a wallet here and we're going to use the Ed wallet uh because one we want to make sure that we check the instance of the smart wallet and not the embedded wallet we also want to get the address uh which we again can use the use address hook and then we want to get uh instance of our SDK which we're going to use the US SDK hook here from third web we're going to create ourselves a couple State variables here so we're going to say uh loading uh worker status is when we're checking the uh status of the worker to see if the user actually has one so we'll set that to false by default we'll import use State uh then we're going to create a state for the loading status or sorry we'll set that to an empty string uh this is the string that will provide and display Where We Are are within the uh checking or claiming of the nfts and tokens so we'll say down here if uh we're loading the worker status then we are going to return we'll say a div here uh that has the class name of styles do container and in that div we'll just display some text that shows the loading status text so right here we're going to create our fun function and this function is going to say um and this function is going to be called uh check new player so we're going to check if the again the wallet connected is a new player and we determine this by seeing if they own the nft or Not So within this function we're going to run a try catch in the catch we'll just uh console error the error and we'll alert saying that there was a error checking for the status of the new player and in the try what we're going to do is we're going to utilize third web's engine to check the balance of the nft and if they meet the requirements or they don't have the nft we'll Min them the nft and send them over the tokens so we're going to create our engine API request here uh in the API folder we're going to create a new file we're going to call this a claim tokens. TS and in here we're going to open up a terminal we're going to wrun run yarn ad AT3 web-dev SL engine and we're going to set up our engine request right over here so we're going to create a Handler here uh which is going to take our next API request and next API response here we'll import those in here we're going to check if the request method is not equal to post we'll return a status 405 uh we'll say with a Json and a message saying that method is not allowed we're then going to get the uh variables that we need to get our instance of engine and we're going to store those variables in our environment variables uh the variables we're going to need is the engine URL or engine access token and our third web engine wallet which is going to be the backend wallet that can claim and distribute these uh nfts and tokens for us then we'll run a try catch here in the catch we're just going to console error the error and return a status 500 uh saying that there was uh we'll say error claiming tokens now in the try here we're going to make sure and say that if there is no third web engine URL or no third web access token or backend wallet we return a well we won't return actually we'll just uh throw a new error saying that the environment variables were not set now what we will be getting from our request is the address so we're going to get this from our request body this is going to be the address of the wallet the smart wallet of the account that way we know what address to send these nfts and tokens to if there is no address then we'll just throw a new error saying an address was not provided next we're going to get our instance of our engine here so we'll say engine this is going to equal a new engine that we can import here so import engine from third web-dev sleng engine and to get our instance of engine we need to provide it with one the URL which is going to be our third web engine URL and we need to provide it with our access token which is going to be our third of engine access token and again what we're going to be doing here is claiming the nft and the tokens to the connected address so in here we're going to say a variable called claim worker this is going to await our engine and it's going to say this is an ERC 721 and we're calling the claim to function now in here we need to provide the chain this is going to be Mumbai we need to provide the contract address this is going to be our worker contract address add we need to provide the backend wallet and this is going to be our third web engine wallet and then we need to give it our request body and for uh this we need to set the receiver which is going to be the address and then the quantity uh which is going to just be one then we are going to uh claim tokens this is going to be very similar to what we did above we are going to await engine we are going to say uh ERC 20 and then we are going to claim to same thing here we select the chain which is Mumbai we set the token address I'm sorry this one uh we're going to do mint to we're going to Mint new tokens uh we can't claim because this isn't a drop contract uh but we're going to Mint new tokens so we have the chain which is Mumbai we have our token contract address we have our backend wallet which is going to be our third we engine wallet and then we have our resp response body here which is going to be the uh two address which is going to be the address and the amount that we're going to Mint is going to be 100 so they they get the minimum amount of tokens needed to purchase their first business now we don't want to load the game until they have actually received these tokens because nothing's going to show in the game cuz they're not going to have these tokens available until they are claimed so we don't want to load the game until they actually have the tokens claim to them so we can wait for the status of these requests here to be mined and what we can do here is we can create a function called wait or mind status and this is going to be uh async function that is going to take the Q ID which is going to be a string that we get back from the request here when we claim the tokens and we'll just say let status uh right now equal a empty string and while status does not equal mind we can say hey get uh the response here is going to equal wait engine and we can check our transaction here and check the transaction status and provided the Q ID and then we'll set the status here equal to the response results. status uh as a string here so we'll set the status to whatever the status is and it'll keep checking the status until it is mined once it is mined so we'll say here if status does equal mind then we can uh break this Loop here and we'll just say await new promise and we'll check this every 3 seconds seconds so down here we're going to await wait for mind status and we're going to get the claim worker. result. qid and we'll do the same thing for our claim tokens once both of those have gone through then we'll res uh return our response of status 200 saying that our tokens were claimed so again that is going to be our request to engine to claim the tokens and the ERC 720 nft to any player that is brand new again we're utilizing if they own the erc721 to see if they are a new player or not so in this check new player here we're going to first check one if the wallet is an instance of a smart wallet right we want to make sure that the smart wallet is signed in and connected to our application and not the embedded wallet so we're going to make sure that we have an instance of our smart wallet and we have an address our instance of our SDK from use SDK here then what we're going to do is check um then what we're going to do in here is set the loading worker status to true because we're checking the status we're going to set the loading status to checking worker balance then we're going to check the balance of the worker here so we're going to say first get our worker contract and we can get this by awaiting our SDK and we can say get contract and we're going to get our worker contract here once we have our worker contract we can get our worker balance and we're going to await our worker contract. erc721 balance of and we're getting the balance of our address so the depending if they own the worker nft or not we'll say if the worker balance do to number cuz we're going to get a big number return so we want to make sure it's a a number here is equal to zero then we are going to set the loading status here to no worker found and then we're going to create another Tri catch and in this try we're then going to try and make our request to engine to Mint those nfts so we're going to set the loading status here to claiming uh worker and tokens we're then going to make get our response here and await and fetch our call to our API slash claim tokens and this is going to be a method of post we're going to have our headers here which is just going to to be our content type which is application Json here then we have our body which we're going to provide json.stringify our address which is the address we're going to send the tokens to when we get back our response we're going to get the data from our response which will just await our response and get our Json of it and then if our response is not okay we'll just throw a error giving our dat a message and then we will set the loading status here to worker and tokens claimed in the catch er uh in the catch here we'll set the console error to error and then here we'll say finally and in here for finally we'll set the uh loading status back to empty strings and we'll say a router push and push them to our homepage here and then here we'll say l if they do own the um worker nft already we set the loading status to empty strings here and push them to our homepage and then we'll set another else here saying that alert and this is for we'll say uh wallet is not a smart wallet there you go we have our function again to check our new player so to go over this really quick again we're first going to check if the wallet is an instance of smart wallet again we want to make sure we're checking the smart wallet address and not the embedded wallet address we'll then set the working status and the status here to checking the worker balance we'll get our worker contract we'll check the balance of that worker contract to see if the address connected owns that nft if they do not own that nft we'll make our call here to our engine API which is going to claim the tokens for them which in here is our claim token. TS which is going to claim the worker and claim the tokens using engine and then once that comes back we'll set the loading status back to an empty string and push them to our homepage if they already do own the token then we just push them to the homepage because they already owned the token so in here this use effect instead of pushing them directly to the homepage here we're going to run our check new player function and again if the it is loading the worker status we're going to show the status here and then once if it's not loading then it should show The Connect embed option down here so let's test this out and what we'll first do to test this out is we're going to add a few UI components to our homepage so we know if we have the token or not so in here I'm going to create a couple components here the first component I'm going to create I'm going to go into my components folder create a new file going to call this the worker. TSX and for this we're going to create a worker component which is going to just display our worker nft so make sure we export our worker here now in here we're going to have to uh make sure we display the worker only if the wallet owns a worker so we'll get the address uh using use address hook again we'll then get our worker contract so we're going to get our contract this is going to be our worker contract and we're going to use contract and use our worker contract address we're going to get our owned nfts from here so we'll say contract and then we're going to say owned workers and we'll say is loading so we can get the loading status of our workers we'll just call this loading workers and we're going to use the use owned nfts hook and we're going to provide it with our worker contract and the address that we're checking which is our connected wallet then we're also going to get our token contract because we want to display our token balance as well so we're going to do the same thing that we did above but for our token contract and then we'll use the token contract or we'll use the used contract with our token address here and then like how we did for our navbar we're going to get the token balance and use the token balance with our token contract and our address and then same thing here I'm just going to paste in a a quick truncate address here uh oh this is not supposed to be supposed to be data not contract so here in our div we're going to give this div just some inline styling here uh and give it a width of 50% and within that div we're going to say once we are no longer loading our workers uh we'll display our worker if we're still loading it we'll say here loading worker not contract just worker so so once we're done loading the workers we're going to get our owned workers and make sure that our owned workers. length is greater than zero and if it is greater than zero then we're going to get our owned workers we're going to map through each one uh each one is going to give us a worker and in there we're going to give a div we're going to give this div a class name of styles let's import Styles here so we're going to give this a class class name of styles. worker container and a key here of worker. metadata. ID and in that div we're going to give it a title here say uh worker stats and we're going to display our worker uh image here so we're going to use the media renderer component here from third web and we're going to provide it a source of the image which is is going to be the uh worker. metadata. image we'll give it a styling here um just a styling of order radius and some margins we're going to wrap these in a div here so we'll just make these go into a div here and then below that we'll create another div here this div is going to display the name of our nft so we'll just create some P tags here give it a styling of bold we're going to display the name of our nft and we're going to get the ID number here and display the ID number then we're going to say hey once we get the token balance let's display the token balance which is going to be uh we'll just say balance here and we're going to display the truncate number of the token balance dot display value as a string here and we're also going to display the token balance symbol so it's going to be token balance. symbol so that should show our nft that we own here so let's just take this worker here and then plug it into our index. TSX file so in uh where are we here we can get rid of the connect wallet button here and then we're going to display our worker here and we're we're just going to import the worker from our components so now when we sign in we'll be able to see that we have our worker nft so let's test this out here let's come back to our app let's sign out here so we disconnect so we're going to sign in once we sign in it's going to connect our smart wallet it should now be checking if we have this nft or not so it's checking our working balance it's claiming our tokens and uh we should have an error here cuz I just remembered we did not set our end um variables so looks like um oh our claim tokens does not match our export default function oh so in here let's check this really quick before we add in our variables uh we come back to our where is our claim tokens uh yeah we did not uh export our Handler here so we'll make sure we do that and now let's also add in our variables so we're going to have to add add in our variables here for our third web engine URL access token and engine wallet so if we come to our third web dashboard here and you come to engine let me just open this in a new tab you'll have your third web uh engine here you'll have your engine URL in permissions you can set your access tokens here and then you also want to make sure that you have a backend wallet here as well if you want to learn more about how to set up engine we'll link down in the description below a tutorial video and uh documentation and guides on how to do this so I'm going to set my environment variables for this for engine and then I'll be right back all right so we have our engine variable set up in ourv file let's come back to our game here let's disconnect let's try log in again so this time we'll log in and once we're signed in it's going to connect to a Smart wallet once we find out that it is a smart wallet again we're going to check the worker balance we're going to claim the worker balance and looks like we got an error again uh we got an error claiming our tokens here let's take a look what our error was um one of our environment variables were not set so let me just double check make sure my environment variables are good yep I did have a misspelling so let's come back here to our app let's disconnect this uh try one more time so we'll sign in with our email we should sign in with our smart wallet once our smart wallet is signed in it should check the balance of our workers which we don't have which now it is going to claim our worker token so if we actually look at our engine here really quick we have two transactions that went through and they look like they failed and I know exactly why they failed so remember when we deployed our contracts uh I said we had to set our back-end wallet as the owners and have give it permission to Mint the tokens and to claim the nfts so I'm going to copy my backend wallet here that I'm using uh with engine I'm going to come to my token contract here first we're going to come to permissions and we're going to set this backend wallet as a minor and creator of this token so they can Mint new tokens so I'm going to add that address here update permissions and I'm going to confirm that right over here there we go then I'm going to come to my worker NF here and in Explorer I'm going to set the owner here so let's look for set owner so we're going to set uh use the set owner function here and I'm going to set the owner as the backend wallet confirm that what we need to do here is set the same thing so in our permissions we're going to set the mentor and Creator we're going to add our backend wallet here and we're going to update permissions then we'll hit confirm and again this should allow now the backend wallet of our engine to claim the tokens and the nfts for our users so once we have that set so coming back to our game here let's refresh this and we'll attempt signing in one more time so again we're going to sign in we are going to sign in with a smart wallet once it detects a smart wallet it's going to check the balance of our worker now it's going to notice that we don't have a worker nft with this account so it'll then make our request to engine to then claim the nft and our tokens and then we should be able to view our uh worker nft right over here so checking the worker balance doesn't have it so it's claiming the worker and the tokens here and again in our request two it's making sure that we get the Mind status for the worker and the tokens being claimed before loading our worker here you can see we now have our worker which is ID number one uh we have a balance of 100 bit gold and we have balance of 100 bit gold here so again when a new player comes into our game now they can then claim this nft and they can start playing our game so now let's work on displaying the staking of our businesses and our shop here where we can purchase and stake our businesses to start earning some currency here so back in our code editor here let's create a new component here we're going to call this our uh businesses. TSX and in our businesses. TSX we're going to create our businesses component here we're going to return a div here and what we're going to do here is just get the Stak businesses now in order to get the sted businesses we need our address of our wallet so we're going to use the use address hook here then we need our staking contract so we'll get our contract this is going to be our staking contract we're going to use contract and use our staking contract address and within the staking contract we're going to call a read function uh called get stake info and what that's going to return to us um is the information of the Stak NF Ts for our address so we're going to get some data back here this is going to be our Stak tokens that we get back we'll also check the loading status and say loading businesses and this is going to use the use contract read hook and we're going to be reading from our staking contract we need to provide it the function name that we are going to be using or reading uh in this case uh is loading in this case we are going to be reading a function called get stake info and then we need to provide it an array of the arguments that that function takes and in this function all we need to do is provide it the address so it's only going to return back the Stak information for the address that we have connected here so for our businesses here we're going to give this a class name of styles let's import Styles here so we'll say styles do business container and then we'll just give it some inline styling here of a width of 50% and in this div we're going to display our businesses so one make sure our businesses are not loading and that we have the data of our Stak businesses uh if not we'll say uh loading businesses so we'll just get rid of this here once we have our businesses loaded we are going to uh create a header here uh we'll say uh businesses then below that we are going to create a div this div is going to have the class name of styles. grid and in here we're going to check our Stak tokens and once we have our stake tokens we are going to also check that our Stak tokens the first we're going to make sure that the stake tokens the first item in that array that is returned the length is greater than zero that first index here is going to be the information of our Stak tokens so if they don't have anything in there then that means there are no tokens Stak or no businesses St so we can just say here p no businesses owned but if there are some businesses owned we're going to take the Stak tokens we're going to take that first item in that uh array that's returned we're going to map through it and then for each one we are going to get a Stak token which is going to be a big number and for each staked token we are going to return our business now we're going to create a different component here for our business so we're going to create a new file within our components folder we're going to call this our business card. TSX and in our business card here we are going to display our nft with the claim rewards button how much rewards it's earning and all of that information so we are going to take in some props here and what we are going to take in here is going to be the token ID that's being displayed which is going to be a number not a string so we're going to create our component here we're going to get our address here import use address we're going to set we're going to get our uh business's contract so we'll set our contract and we'll say uh uh business contract we'll use contract here provide it with a business's contract address uh then we're going to get back the data of the nft so we're going to use the use nft hook and we're going to get the uh nft metadata back from the business contract using the token ID that is provided so with the information that we get back from our Stak tokens we can get the token ID that we have Stak or that that address has St provide that to this nft card here and then we can get the nft metadata so we can display that information we're also going to need our uh staking contract here so we'll say uh staking contract using our staking contract address and from our staking contract address we're going to need the rewards so we'll say uh business rewards we need to know how much of the rewards that that state to toen has so we use the used contract read similar to how we did getting the Stak info we're going to get the use the staking contract address we're going to read the get stake info for token provide it with our token ID and the address this is going to get a more detailed response in what amount of rewards does the token ID Stak have for the wallet that has its stake up to top here we're going to create a state variable here for claimable rewards uh we're going to use State here and we're just going to set this to a big number because that is what we are going to get returned and then down here we're going to update our claimable rewards so we'll create a use effect here that is going to check and update the balance and we'll just have it update every every second second so we'll check first if there is no staking contract or there is no address then we'll just uh return out of this we don't need to do this but if there is then we'll create a async function here called load claimable rewards and what this function will do is it's going to get the stake info which we are going to await our our staking contract. call and we're going to call the same function that we were calling before which is get our Stak information provide it with our token ID and address and then we are going to set the claimable rewards to the stake information but we're going to dis um set it to the second or index one item that we get returned then we're going to load claimable rewards and we'll create a interval ID here and we'll set we'll make that set interval to loadable claimable rewards and again we'll just run this we'll just say every second and then we'll return and clear our interval whenever we do so every second we'll check it clear it check it clear it and that should update our claimable rewards then here we'll create a truncate Revenue um which will take the big number and convert it to a more readable decimal point for us and then for this card here we're going to return we're going to create a div give this div a class name of styles dot oops let's import Styles so here styles. nft card and we'll give it some inline styling for a background color here within that div we're going to display our business so we'll just say a media renderer here to display our nft image the source of this image is going to be our nf. metadata. image then below that we'll create another div here we'll just give this div some inline styling of a margin on top and bottom uh we'll create uh H4 header here we'll display the business name which is going to be nf. metadata. name below that we are going to display the rewards that it has earned so we'll first make sure that we have our business rewards if we do then we're going to get our business rewards we'll get the second item in that make sure that that second item is greater than zero and if it is then we're going to display the quantity here so we're going to display this is going to be the quantity of oops the nfts of that token that we have St so this is going to be our business not contract uh rewards uh that first item do two number then below that we'll get the claimable rewards so we'll say claimable rewards and we're going to display here our Revenue that the business has earned which is going to be the truncated revenue of the claimable rewards as a big number then below this div we're going to create a web 3 button that is going to say claim revenue and this web 3 button here we're going to say it's going to call a function from our staking contract address uh what the action that it's going to call is is on the contract we're going to call a function we're going to call the claim rewards function and we need to give the token ID not the address just the token ID of the rewards that we want to claim then we can say on success we can alert that we claimed our Revenue we'll give this here A Class name of styles. nft card button so that should display our businesses so back in our businesses here we can say here we're going to display a business card for each one of those businesses and that business card is going to be uh one we have to set the key which we can just set to our state token. to string then we need to set the token ID which is going to be our state token. two number so coming back back to our app here oh let's actually add in our businesses to our index. TSX here so here below worker we're going to add our businesses component and then for this div here we're going to give it the class name of styles. Main and then we'll add another div here give this a styling here and then drop these components into here here so coming back here you can see loading businesses no businesses were are owned and you can see once we stake our businesses they will display over here so next let's create our shop page and let's display the businesses that we have for sale and how we can purchase them so coming back to our code editor here let's go to our shop. TSX which we already have some stuff set up what we're going to do here is get our business contract so we need to get the uh contract we'll call this our business contract it's going to use use contract again businesses contract address and from here we're going to get all the nfts from this contract so we're going to get data we're going to call this businesses and we're going to use nfts we're going to get all the nfts from our business contract now in here what we're going to do for what we return uh we're going to give this a class name so let's uh import Styles here we're going to give this div here a class name of styles. main we'll then get a title here we'll call this uh buy uh business below that we're going to create a div this div is going to have a class name of styles. grid inside of this grid we'll wait for our businesses make sure the business length is greater than zero we want to make sure that we have businesses to display we'll say no businesses available if there is none and then for each of the businesses so we'll get businesses we'll map through that uh back for each one we're going to get a business and then for each business we're going to display an nft card for that business so similar to how we created a card for our Stak businesses we need to create a different card for the businesses that we have for sale so components I'm going to create a new file we're going to call this nftc card. TSX for this one we're going to get back a type or we're going to require a type props of nft that way we know which nft we are displaying here so we're going to get back our address here so we use use address again we'll get our contract this contract we're going to get is our business contract so use contract use businesses uh for our businesses contract we're going to get the claim condition this is going to be able to provide us the price and everything of the tokens so we'll say claim condition we're going to use claim conditions here and we're going to provide it with the business and the nf. metadata. ID then we're going to get our staking contract as well so we're going to get our contract here this is going to be our staking contract using our used contract contract again we're going to create just a uh quick uh calculate earnings equation uh basically this is going to be the cost so whatever the cost of our nft is is going to we're going to divide that by 10 we're going to take 10% of that and that's how much the nft makes per hour so cost uh which is going to be a number uh return cost uh times .1 which is 10% so in here our card we are going to say div uh this is going to have a class name so let's import Styles here we'll say here class name is going to equal styles. nft card uh in our nft card we'll display the media renderer to display the image of our business nft uh the source is going to be set to the nft metadata. image below that we're going to have a div this is going to have some styling here we're just going to give it some padding we're going to give it a header three where we'll display the name of the nft so we'll get the nft metadata. name then we'll display the price of the nft so we'll make sure that we have our claim condition and that our claim condition do length is greater than zero which means that it has a claim condition set then we'll take that claim condition and we'll map through that claim condition which will provide us with a condition and a index and then for that we will display the claim condition we'll give this a key here of index and what we're going to do is display the cost which is going to be uh we'll see two ether of the condition price and then we'll get the symbol which will be the condition do currency metadata. symbol then below that we want to display the earnings so how much is this going to earn so we'll say earns and then for this we're going to calculate the earnings which we are going to provide it with uh did I spell calculate earnings wrong calculate earnings we're going to parse in the condition price to Ether create that into a number here and then we have the symbol per hour so that is what we are going to show as the cost and then finally below this div we are going to create a button and this button is going to claim and stake our nft so up here I'm going to create a state variable here so just import you state um we're going to have three stages the initial State the claiming of the nft and the staking we'll set the default to the initial State here we're then going to create a function to claim and stake the NF so we're going to say call this function here handle claim it's going to be an async function and one we need to make sure that we have an address so if there's no address then return if if there is an address then we're going to first set the claim to the claiming State we're going to create a try catch here catch will just console error and in the try here we're going to first await uh the business contract it is an ERC 1155 and we are going to claim the nft uh we need to provide it the ID that we're claiming and the amount so we'll just say whatever the metadata of the whatever the ID is of the the nft that's displayed we should only be able to claim one then we're going to set the claim state to staking now staking requires a few steps one we need to approve that we can stake and give permission to the staking contract so we do need to set approval so we have to say is approved so we'll check the approval first so is approved this is going to await the business contract and say is approved uh which we going to add here that this business contract is an addition drop which will give us the access to is approved here and we're checking to see the address here is approved for the staking contract then based on if it is approved or not if it is not approved we are going to set approval so if it is not approved we are going to set approval for all and we are setting the approval for the staking contract address to true if it is approved and once it is approved we will await the staking contract and we're going to call a function from there and the function that we are going to call is the stake function and we need to provide it with the nft ID which we're going to get from the nft metadata. ID and the quantity that we're going to stake which is going to be one because we're only purchasing one at a time and then finally here once it is Stak we will set the claim condition back to the initial state so down here in our button depending on the claim state of our button here we will display some different text so if the claim state is claiming the nft it's going to say purchasing business or if claim State equals staking it's going to say staking business if not it's going to say buy now for our button here we're going to give it a class name here of styles. nft card button we're going to say onclick it is going to run our handle claim function and we'll say it's disabled if the claim state is not the initial state so with that we can come back to our shop and for our businesses that we map through for each one we are going to display an nft card and we are going to provide it with the nft which in this case is going to be our business uh we also have to set the key here to business. metadata ID and there we have it so coming back to our app we now have our businesses here so you can see our businesses how much they make per hour we have the buy buttons if we come back to our businesses dashboard here we don't own any businesses but we do have a 100 bit gold so if we come back to our shop here let's buy our first Lemonade Stand it's purchasing the business it's now staking the business again this is setting approval and staking the nft so all within the buy now of this nft it's claiming it's setting approval it's staking and once the nft has been staked we should be able to see it in our business's dashboard so that is done we should see our bit gold go back down to zero here we should see our business now staked you can see the revenue is coming up here and we are now claiming revenue and bit gold for our business so if we hit claim Revenue here we'll be able to claim the revenue now we're not going to be able to claim a lot right now because we haven't earned a lot but this here is calling the claim rewards function from our state contract so there we go we can now claim the rewards our claimed our Revenue was claimed right over here and you can see we get an update right here of our bit Cod here and here and there you have it we built our very own Seamless Web 3 idle game for the browser and again this is using a lot of the functionalities and features that third web has to offer you look at the game in whole we abstract away all of the web three complexities a user doesn't need to create a wallet they don't need to pay for gas they don't need to sign any transactions and we can still create an onchain idle game where we can still utilize these Assets in different ways because they are all onchain so again I hope you folks enjoyed this video if you did give this video a thumbs up hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on more tutorial videos just like this if you have any questions or you need any support we'll drop a link down in the description below to our support team you can open up a support ticket and they'll be happy to help you out and answer any of your questions but again I hope you folks enjoyed this video and until next time [Music] [Applause] [Music] see

Channel: thirdweb

Views: 2,790

Keywords:

Id: mtaf6VtgcRo

Length: 102min 43sec (6163 seconds)

Published: Tue Mar 12 2024