Cronos 🛠 Deploying dApps on Cronos Chain & Building games with Cronos Play

[Music] hello folks what is up rick here from chronos.org today we are going to have a workshop on how to build you know a very simple react front-end application by using the create app method and then we want to build you know a little button that connects our front-end application with uh with our wallet of choice uh and finally we also want to build a function that helps us to fetch any nfts that might be assigned to that specific wallet and ultimately then fetch it onto our website but why don't we get started so the very first thing that you you want to do is you want to install a fresh create react app and you can use any of the official methods that is available on the create hyphen react hyphen app dot def documentation and then just create your um basic react template so once this is installed on your local machine and it's just a couple of things you want to be in mind so i am using react scripts 4.0.3 maybe you want to use the same just for consistency's sake and then also i'm using the web3 library web3 model and d for you know styling and stuff like that axios for api calls but you can use fetch if you want um that's that's really up to you and then finally we also want to use defy connect which we are going to use in the web3 model and yeah another thing is um so what i did is i just replaced the css the standard css with and the css as you can see in here that's and d slash dist slash and css and that's the one that uh i'm gonna use primarily in the app right now i just have a hello chronos text on the app so if you go and visit just launch the app npm start run run start um if you wanna go and see what's happening in the browser it can just go here on the localhost port 3000 and you see it just says hello chronos so i think so what we're going to do next is let's give it actually some styling all right let's just remove this piece here which one it's going to give it a name let's call it the chronos app the workshop app also maybe add an h2 header and that quick description and then maybe also some culture action so in here what i want to do is um the library that i mentioned before and the it's actually what i want to use for the styling in here so i want to use the primary button hey that's not necessary watch text let's go back okay i first have to import the button now from the package from the library i can see what's happening in here maybe refresh this and here we go now this is obviously an empty button so we have to add some configuration which we're gonna do next all right um so i think the very first thing is you want to create a state for two objects one is the data state the data object which is basically going to store some nft token values which we will need later on to basically you know populate the page with images and stuff like that you know give it some color and we're going to save that i'm going to set the state to an array and then as well we want to store set the state of our wallet address like so and these are our state objects that we will be using in the example app and now there's a couple of libraries that we want to import so the first one is we're gonna use web3 model once we click on the connect button we also want to import the web3 library and we want to import axios as well for you know api calls that you might want to do you can use other methods you know you can use fetch for example um but that's that's totally up to you okay now before we start to use the model the web3 model let's actually create a declaration actually now let's just create the declaration for our provider because we're gonna store the provider into here as well as declaration for web3 and now what you want to do is um there is a library you could post it in here but let's let's make a little bit cleaner let's actually create a new folder and call it provider and the provider is basically the method offered by um you know the provider is basically the the the wallet that you will use in order to provide the information to your decentralized app or your front end of choice um in the context of web dream model there's um there's an option that we can use and let's actually create just a file we're gonna store this option in here a constant and then export it let's call it provider options gs and then first thing we want to do is we want to import d5 web 3 connector from d5 connect which is uh the native chronos wallet that we will use in webchi models as well and then what you want to do is we want to add our provider options so this is available on our integration page so i'm going to copy and paste it in here but you can find that information obviously on the web extension integration so you have the details in here as you can see this is now outside of the context of webtree models specifically but you get the point you have the different options and the different variables that you want to use in the functions and we just use them in the context of webtree model by adding the custom example for the custom wallet that's how it's going to look like we have a display option the package which is the important piece it imports the package into the provider option and then the different options that we want to use such as you know the support chain ids the rpc methods the polling interval and then obviously the function the synchronous function to connect you know to the provider and then it passes it returns the provider which we then will use in in our app js file so now we can close this and go ahead what you want to do now is as i mentioned before we want to create a web remodel configuration i'm gonna call it web3 model so we initialize it with a new web3 model and in here we pass example we can the option for cage cage provider now this is um i'm going to set this to false but this is optional if you want to cache the provider details you can set it to true but it's optional really but the option that is not optional is actually the provider options which are required and the provider options they will come from the file that we just created okay oh it's checking oh yeah of course all right good to go miss the comma after the first option and now that we have the configuration for our webg model what we want to do is we want to create a function actually let's call it a synchronous function connect and this function is basically going to be triggered by our button so i'm going to call here an event on click and basically whenever we click on the button it will trigger this asynchronous function here but for now um the function is empty so i'll start let's actually start to populate it first thing we want to do is we're going to create a condition i'm going to check if there's a provider and if there's none provider then we want to start to first we want to do this invoke pride in web3 objects and since um they were declared initially in here so we can actually now initialize them like so with the web3 model.connect function and we initialize web3 with the new web3 and pass the provider now what we want to do is we want to get the account details your way to promise from web3 ethereum get accounts obviously you can also use the ethereum request method to get the accounts which is actually i think i was reading this is the currently the most recommended approach so i'm going to go ahead and use the web tree here and get accounts method now we want to set the address because what this does is it returns the accounts that are assigned to our provider and we're going to use the count that's assigned as index 0.

and what will happen now is if i log the address so what happened now after clicking on connect and the web3 model is triggered and it shows me the default address which is metamask and d5 wallet and now i'm specifically using metamask for this exercise because my nft wallets are my nft assets are stored on to my kronos address which i passed to my metamask wallet and what i want to do is if i click if i select meta mask okay let's go back see what happens provider webtree oh of course i need to pass the provider not the provider options in here so if i go back now and try to test it again and connect now i should see my address being logged here we go now that that worked let's go ahead with our exercise um because the next thing we want to do is we want to actually get all um my token ids so that i can use the um token uri method that i have in in the contract that i will add in a second and this is a bit of a work around to actually get all unique images assets that i own and for that we will use the contract and ap abis that are assigned to the nft contract where the nfts are being generated and the first thing that we want to do is we need to create a new folder and this time we're going to call it contract and in here you want to create a new file which you want to call nft collection gs and in here i'm going to post and paste the the con the abi details and the contract uh where the nfts are hosted so if you go i'm going to quickly show you what i mean by that so there is an nft faucet that chronos provides and i have used this nft faucet which works very similar to the open source openc test net platform that allows you to create nft assets and on a test net so that you can play around with nfts as well and what i do here is uh i do have a contract address for those test nfts and uh the contract address if you use kronoscan or the explorer will also help you get information on the api which you can then copy into this constant in here so now that this is done what i want to do is i want to import um i want to import these details like so and i want to create wanna create a constant for contract and here we're going to use the webtree ethereum contract to pass some the two options that we just created let me have a look contract nft collections oh okay now let's test if you're able to lock the contract and here we go so as you can see here we have all of the inputs and we will be working a lot with the token uri which we will use you know to get the unique um metadata of each of the tokens that one of these addresses owns or specifically the address that i use for this exercise okay in order to achieve that first thing i want to do is i want to get all of my token data and i'm going to use access to achieve that and the kronos explorer api endpoint i'm just going to paste in the address here that i i'm going to use so https chronos.org explorer testnet 3 api the module is account and the action is token and address that's what we want and also i see that i was outside the condition we want to keep this within the main condition in the connect function next i want i only want because this is going to return a couple of fields and arrays um the value that is important for us let's say we're going to use only the data results which contains the specific information that we want to use and then i want to use a function to only retrieve the unique unique ids so function get unique and then i'm going to map to index i store the keys of the unique objects then i eliminate the debt keys and store the unique ids last but not least i remove you know any key when the result is no and by doing that i will be able to have my unique unique token details which you will need you know to create an array with the collection that i own so if you're going to lock that you want to see what happens with our token our token is basically declared and initialized with the function that we just created to return the unique ids and here we go these are basically my unique tokens but as you can see i don't have the metadata in here yet to get the metadata i want to use the token uri that was set in our contract so what we want to do next is we want to create a collection so let's declare connection as an array and initialize it as an array and what you want to do next is you want to create a for loop i'm going to just paste it in here so let's have a look at this for loop so it starts as as index 0 and it goes for as long as there is a token length so the token length is basically the amount of tokens that i have and it will run incrementally until it reaches the token length and the first thing that i want to do here is we want to create a variable for token meta uri and we want to wait a promise um and we want we are going to use the contract methods token uri which i mentioned before and in here we're going to use the token index in order to get the token id and run the call also what you want to do is because we are using ipfs to in this specific example to store the metadata of the nfts we want to replace the the standard ipfs protocol here with an http https protocol so that the server is blocked when we try to fetch the details and then we want to fetch the metadata and save it as a json and again we will replace the ipfs with the https method because we want to specifically get the images and once we get the images we want to return push the return data into the collection array that we have declared here and what will be returned is actually so if i log the collection we should see the specific metadata for yeah here we go the tokens that they own and that's the image so now that this worked what you want to do is set the state of our data object by passing the collection that we just created and what we can do is we can create here in the front and a new field i'm going to call it maybe we don't need the h1 header here but here we're just going to write nft collection owned by address keep it simple and in here now we want to run the loop with the new data that we have like this and what we want to do here is we want to pass maybe first you know standard key which is our index and then our source and in our source we will want to loop through the image fields and also maybe alt tag maybe let's just put the index and alt tag maybe you can put the name here you used uri token id and image maybe you could have passed the name as well and you could have put the name here in the alt tag but for now let's just use use it this way and we also want to add a little bit of styling maybe here so nft image and this comes from our ab css file as you can see here i created a css class with height water and border radius and then as a little bit of margin and yeah i think also another thing we could add is as you can see the address is assigned but the value is never used um let's just assign let's actually just print out the value in here okay now that this completed let's actually go and check out yeah it worked so if i go and connect with my metamask address first i get my address and then i will be able to fetch also my items into the page and this is it in a nutshell i hope you like this workshop and if you have any questions please feel free to reach out to us today we're gonna have a workshop on chronosplay which is our latest sdk and it will allow game developers such as yourselves to bridge your games with the latest blockchain technologies more specifically the chronos play sdk includes certain functions and methods that have been introduced by chainsafe already and it also allows you the opportunity to use the kronos functions as well such as you know um the the the the kronos rpc methods and everything that's that evolves around the kronos network more specifically we will have a look at some functions such as getting the balances but as well we will look at how you can actually get the ownership of specific tokens and finally we also have a look of how you can import nft images and replace it with game texture so that you can actually start building games that import nft images and then replace it with in-game textures as well but why don't we dig into it okay let's get started so first off the sdk assumes a couple of prerequisites in terms of understanding so you should have a little bit of unity knowledge maybe i've done some example apps if you haven't there's a lot of good tutorials available on on youtube which i would recommend um there's there's a number of them and also perhaps a little bit of knowledge on on erc seven to one erc 20 and other evm practices might be also some good prerequisites to have if you don't have them yet don't worry at all there's a lot of good material out there that can help you to pick up very quickly on those concepts now another thing to bear in mind is the sdk is currently supporting webgl ios and android belts and other platforms may work but there's no guarantee really um that they will and we also will only extend our support to other platforms after we have stabilized our work on architecture apart from that i think there's a couple of things that we will need such as you know mobile ide if you want to build on on mobile devices for for android or ios and define connect which we will need in the browser so whenever we want to use um you know a browser based game we should have that extension as well as you know any other wallet that you might be working with such as metamask for instance and last but not least um it would be very good to have some assets you know some some nft assets you can use our nft faucet to create some test assets or if you have already some then you can use those as well now the first thing that you should do is if you haven't installed unity yet you can just go on our docs and click on the download link which is going to bring you to the unity page and then just follow the instructions over there and then another thing to keep in mind is we will be using the rpc method in the functions and the scripts that we have in our unity build in the sdk and you can choose between whether you want to use let's say the mainnet which is the chain id25 it uses this specific endpoint here the rpc method or the order chain which is the testnet chain which has a chain id of 338. so the first thing to do is you can choose whether you want to clone the repository or you just download latest release from chainsafe by clicking on the link here in the documentation and then you can start to create a new 3d game or 2d game if you want to build let's say a top-down game or something like this that's totally up to you but for the purpose of this workshop we want to focus on 3d objects so i have done that already i'm not going to go through all the steps but what i want to do is i'm going to open my latest environment in here in unity then we have a couple of examples okay so one thing that might be good to know is you might need a specific library so if you're going to have an error output for the json.net library and what you can do is you can just go to package manager and at the json.net library for unity and then import it and then that should solve the json.

net error that you might have when you start your first project let's go back to our docs and let's have actually a look at our first um example in here so what we want to do is we want you to run the script so what we're going to do is you want to create a script in here let's let's go to our scripts folder and that's actually in the evm folder yes let's do it in the avm folder just give it a random name [Music] okay and i'm going to use esc for this so what we want to do here is just paste this in here um the class is going to be example since um that's what we have been using when we created the script but we also want to have a prefab so let's just go into our web3 unity folder and create a prefab i'll call it example and add a component and then let's look for example so here we go and what we want to do now is we can test this actually but we still have to fill out a couple of things so let's change this to say test net has changed rpc method in here and what we want to have as well is our testnet address i'll go ahead and open metamask copy my address from here and that's it that's the script and what this script is going to do it is going to use the evm balance off method and it's going to print the balance so if i run the script now in unity i should see [Music] balance in here okay so i have two audio listeners let me actually go back just remove this one here [Music] i'm still running here let me just close this off uh let's remove the scene okay now the shot this should work it's gonna and here we go so obviously [Music] um that's not the converted value it's still in its wave format so um it's uh it's around that's the test tokens that i have in my wallet and uh it basically just tested my wallet balance the test net which is around 20 125 crore obviously you can convert this anytime there's a couple of options to do that okay now that this one is working let's actually have a look at my nft balance that i have on the testnet so i'm just going to take this piece here but obviously you can follow the the guide which i will show you how to create different scripts and prefabs but let's just go ahead and copy this elements in here those strings it actually might not make sense to remove everything because there's a couple of stuff that we want to to use let's remove this and now we also need um contract address and what we want to do here is we want to use um faucet address that i have uh if i go and have a look i think i added it in another application in here the one that i used for the web app and here we go i'm just gonna take it that's the contract address here and then i post the contract address of my nfts in here save it and now if i go back into my unity environment what i want to do now is i want to rerun this okay it's a compiler error oh okay i have a duplicate when i copy pasted the information before now it should work then we run this again and now it should print the balance of of the nfts that i have and in fact there is around four test nfts that i have all are erc 721 so that worked as well and now let's just go back and try to get the ownership of a specific nft what we want to do here is um actually just need the token id um and the contract i need to contract by mistake i don't need the account don't need rpc method here we're going to put in let's say 53 which is the id of one of the nfts that i have now it should print out my address so come back here and i run the script to run the build play it okay didn't go through let me try to save this again okay i didn't save it now it should work it's played and here we go now it printed my address and this is how you know you can check the ownership of specific nfts as well but uh let's do one that's a little bit fun um it's actually uh about how to import specific um nfts and for this example um we it's just gonna i'm just gonna remove this prefab here for this example we're gonna create a quiet object so you can just go here and create a 3d object i use the quad give it some scale and then i've added a script in here that's the one so for now uh we don't want to use the player prefs method actually want to use just a hard coded address and then in a minute i'm gonna use the player prefs once we start to create the will okay so we have our account we have the contract and the token id now you're gonna see how the token with ad 53 is going to look like we use the testnet rpc method we used a string on or off method here in the function we check for chain network contract token id and rpc method and then we have a condition so we want to compare the owner off um and the account so basically if the owner of that nft equals to the count that i'm specifying here in the string then i can start with the process of fetching the uri from the chain but i also want so because this is using the ipfs method i want to replace ipfs in the string with edge with the https method so that it will work in our unity build once that's done we we use um we fetch json from the uri and we do that by using unity web requests and we then use uh the raspbian's data method um to um you know get the json response from the request and what we will do then is we will pass json to get the image uri and here again we want to make sure that we replace the ipfs with https and once that's done we should be able to fetch the image and display the image in the game and basically you know get the texture of the image and replace it with the white um the white color that we see here in the quad so i'm going to save this and i'm going to play this and now you can see it's logging the details from the uri and it should replace this white quad as you can see here with this little helmet that i have in my nf nft faucet test faucet it's actually one item that i've been using or top-down game example which you can google app on youtube it has been presented with the blockchain gaming alliance and also with chainsafe very recently so if you have some time try to google it or research and it's on youtube it's quite interesting okay now um that this is working i'm gonna put this back to player prefs i'm going to save this and what i want to do now is i want to build and test it this in our in our browser so i'm just gonna show you what you can do you can use the web login scene uh and then when you go ahead and in the build settings a couple of things that you have to do you have to select webgl and in the player settings if you want to use the d5 wallet you will select the kronos login here for the d5 wallet if you think you will mainly work with metamask then you can go ahead and select the second template in here so what you want to do now is just build and run this see save it now it's going to take a bit to build the scene all the scenes because it's two scenes what it will show is basically a login scene where you have to connect your wallet and then once that is done it will basically replace any nfts that you might have um with the white quad in the second scene if you don't have any nfts then the quad will basically remain um white and no texture will be loaded to the game okay now that the build has completed let's go and check out our game in the browser as you can see we have a login screen we have our meta mask in our e5 wallet in here um let me see if my meter mask is connected it's not so let's go ahead and here we can see the d5 wallet the wall connect option and as well meter mask i'm going to use metamask this time because my nfts have been created with my chronos meter mask account i'm just going to go ahead and improve and now i should see my image yeah here we go yeah and that's it in a nutshell so i hope this was helpful um and i hope you have enough information to start to build your own nft games