Cronos 🛠 Getting Started with Cronos: Integrating Web3 games with Cronos Chain - Ricardo Arcifa

foreign [Applause] [Music] 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 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 um hyphen react hyphen app dot def documentation and then just create your um basic react template so once this is installed on on your local machine um it's just a couple of things you want to be in mind so I'm using react scripts for DOT zero dot tree maybe you want to use the same just for consistency sake and then also I'm using the web Free 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 D5 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 this CSS the standard CSS with uh and the CSS as you can see in here let's add the slash dist slash ENT D CSS and that's the one that uh I'm gonna use primarily and yeah right now uh 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 want to go and see what's happening in the browser you 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 oh maybe let's just remove this piece here which one it's going to give it a name call it the Chronos app the Workshop app also maybe add an H2 header on 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 maybe that's not necessary too much text let's go back okay I first have to import the button now from the package from the library and I can see it's happening in here let me refresh this and here we go now this is obviously an empty button so we have to add some configuration what you're going to 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 when I 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 State objects that we will be using in an example app and now there's a couple of libraries that we want to import so the first one is you're gonna use webg model once we click on the connect button we also want to import the web Free Library and we want to import access as well for you know uh 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 declaration actually now let's just create the Declaration for our provider because we're going to store the provider foreign as well as declaration for web3 and now what we want to do is um there is a library you can post it in here but let's let's make a little bit cleaner let's actually create a new folder and call it um provider and the provider is basically uh the method offered by you know the provider is basically 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 webg 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 tree connector from D5 connect which is uh the native Chronos wallet that we will use in webtry models as well and then what you want to do is we want to at 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 web3 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 uh in the context of web3 model by adding the custom example for a 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 um you know to the provider and then it passes it Returns the provider which we then will use um in in our app just fine so now we can close this and go ahead what you want to do now is as I mentioned before we want to create um a web dream model configuration I'm gonna call it web3 model so we initialize it with a new one tree model and in here we pass for example we can pass the option for KH provider now this is um I'm going to set this to false but this is optional if you want to catch the provider details you can set it to True um 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 uh just checking oh yeah of course all right good to go Mr comma after the first option and now that we have the configuration for our webp 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 all buttons so I'm going to call here an event click and basically whenever we click on the button it will trigger this asynchronous function here but for now um the function is empty it says that 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 which is a provider and if there's nump provider then we want to start to first you want to do this invoke pride and web tree objects and since um they were declared initially in here so we can actually now initialize them like so with the web3 model dot connect function foreign tree with the new web tree and pass the provider now what we want to do is we want to get the Account Details be aware the promise from web3 ethereum get accounts obviously you can also use um ethereum request method to get the accounts just actually I think I was reading is um is the currently the most recommended approach so I'm gonna go ahead and use the web3 at you 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 um now I'm specifically using metamask for this exercise because my nft wallets are my nft assets are stored on to my Chronos address which I passed to my metamask wallet and what I want to do is if I click if I select metamask go back see what happens provider web tree 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 work let's go ahead with our exercise um because the next thing we want to do is we want to actually get um my token IDs so that I can use the 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 um images assets that I own and for that we will use a 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 we want to create a new file which you want to call nft collection [Music] .js and in here I'm going to post in paste the con the ABI details and the contract uh what 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 the Chronos provides and I have used this nft faucet which works very similar to the open source openc test net um platform that allows you to create nft assets on a test net so that you can play around with nfts as well and um what I do here is I do have a contract address for those test nfts and the contract address if you use chronoscan 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 on our create a constant for the contract and here we're going to use the web tree ethereum contract to person 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 uh metadat 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 Chronos Explorer API endpoint foreign s.org Explorer testnet3 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 um 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 the value that is important for us let's say I'm going to use only the data results which contains the specific information that we want to use and then I want to use some a function to only retrieve the unique the 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 dead keys and store the unique IDs and last but not least I remove you know any key when the result is null 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 will 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 do you want to do next is we 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 um as as index 0 and it goes for as long as there's a token length so the token length is basically the amount of tokens that I have and it will run incrementally until it reaches um 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 await 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 HT https protocol so that the server is blocked when we try to fetch the details and then we want to fetch the metadat 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 here we go the tokens that they own and that's the image so now that this worked what we want to do is you want to set um 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 gonna write nft collection owned by address keep it simple and in here now we want to run a loop with the new data that we have like this and what you want to do here is we want to pass maybe first you know standard key which is our index um and then our source and in our source we will want to Loop true the image fields and also maybe Alt tag maybe let's just put the next in the auto tag maybe you can put the name um here we used to write 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 it this way and we also want to add a little bit of styling maybe here so nft image and this comes from our app CSS file as you can see here created a CSS class with height water and water radius and then as well a little bit of margin and yeah I think um 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 actually just print out the value in here okay now that it's 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 so today uh I will walk you through some of the updates of our chronosplay SDK and more specifically I want to guide you through our documentation so that you have everything that you need to build your next gen game during the eth hackton in India so what you will see here is this is um the main path of the documentation you know if you visit our docs.

crones.org you will obviously have many other um tabs but I guess you know the one that is relevant for the specific Workshop is called chronosplay and maybe a couple of words about what Chronos play really is so in a nutshell it is a gaming SDK that we have been preparing together with chainsafe and it essentially connects the world of gaming with Chronos so it allows you to integrate your next Generation game or any game that you might be working on with Chronos and then ultimately really help you to create seamless experiences for the players that might be playing your game in the end so a couple of things that you will be able to do with the SDK obviously you will be able to connect and interact with the chromos network but you also will be able to provide in-game nft functionality as well as the ability to use authentication modules with different wallets and I think another very important point is that we do not only support Unity but also unreal and C plus plus um so a couple of things to bear in mind what I want to do is I really want to I want to walk you through every step from start to finish you might have already some familiarity with unity if you don't that's fine because the purpose of this Workshop is really to pick you up from from from from from step one and walk you through to get you started with the unity Chronos play SDK um there's a couple of things that we will be doing uh obviously whenever you get lost or whenever you have some questions you can always consult our um our SDK it really has the the steps that I will work you through today uh so I think it makes sense to familiarize yourself as well with the SDK so first things first the top that is the most relevant to us is the unity tab um so obviously we are assuming here that you have a basic understanding of unity if you don't that's that's okay as well um also to have some ERC 721 and evm practices would be a good prerequisite to have if you don't again it's still fine but yeah so the supported operating system for this is um for this specific Workshop I'm going to use webgl but you can obviously also explore the possibility of IOS and Android builds um then what we want to do is we want to there's a link so you can go ahead and download the unity SDK uh you can either um you know follow this link you know go to the official Unity website that's uh definitely um you know a good uh a good way to get familiarized with the SDK with the unity framework as well and now for example if you would be running on a Windows machine you would go for the windows version if you're running on a Mac machine you would go for a Unity Hub version you just have to choose the one that's right for you then another thing to bear in mind if you were to use the RPC methods you can always switch between you know the mainnet RPC method and the tested RPC method now the news from from from quite some a couple of weeks ago is that now we support the sub graph and we have deployed our sub graphs which means that in theory there's no need to use the RPC method in the development mode anymore but I will show you a couple of examples just in a couple of minutes so there's two ways of importing the SDK the first one is by either using GitHub you know to to clone the repository into your machine or you just can go ahead and you know um download the latest releases from uh from chainsafe from the SDK and once you have downloaded it the first thing that you want to do is you want to import it into your um let's say project if I were to create a new project then I'm just gonna leave it as this just gonna show you what happens here so all you want to do is creating your project and once that is created it's going to take a couple of seconds once that's created I want to copy or import the library and the package that I just downloaded here into my asset folder and voila this is as simple as it is to import the SDK into your game build let's just close this for a minute and go back into the documentation so before even starting um with the few examples that I have prepared I want to quickly walk you through the documentation so the first um the first one is evm so what this is it's it's really a standard interface for evm methods and there's a couple of methods outlined here in the section for example the player account you know the player prefs get string is basically the one that will um help you retrieve the the address from your wallet once you uh um you know log in through your wallet of choice in the game scene and basically obviously we can use a hard-coded account by just copying our account address but using the player pref get string method is basically dynamically fetching the equivalent account address that we have in our wallet then we can use the block number which is basically going to get the current latest block number obviously here you can see you can switch between Main and test net and yeah once we create the integer for block number then we await uh we await to promise of the evm method and then we basically pass the chain in the network and if you want to print uh the plot Number it will basically return the block number the current latest block number then we can use balance off which is basically getting the balance of uh of Chronos um that is related to a specific address that we have and the specific Network that we have so for example if I wanted to know what my current address is once I log in I would basically pass in here um you know my wallet address or you know as I mentioned before the player prefs get string method near then we also can use the verify method to verify signed assigned message so basically what you do is the evm.verify method we pass a message and a signature which we Define in here for example and it then Returns the address of the verification with the message we also can print a nonce if we need it announce in this example we're using the RPC method but as I mentioned before we don't need to necessarily use the RPC method anymore so this is optional if you prefer to use the RPC method you can if you use prefer to use the subgraph method all you have to do is remove the RPC option in here also something that might come in handy is you know a way to convert your way to Crow and vice versa and that's that's the option to do that here basically you will find it under the evm method now for ERC 721 contract tokens um basically there's a couple of methods that you can use you know such as the balance off uh option that is basically going to count all the ERC 721 tokens that are assigned to one specific wallet address and then we can use as well the owner off method which is basically a way to find the owner of a specific uh ERC 721 token and here the option that we have again chain Network contract and token ID and then we want to verify the ownership by passing The Chain Network contract and token ID into the owner of function of the ERC 721 method now we can also use the owner of batch method basically to get a balance of the batch of uh of uh and the list of a specific set of token and the way we do this is by you know creating a specific list in here with different token IDs and then we have the Yuri so this basically Returns the metadata of a specific token and we will have a look in this uh very shortly as soon as we jump into the unity editor because this is something we will be using um when we want to replace let's say a game object with the data the the raw image data that comes back when acquiring for the Yuri and then the last one in here is the uh the method that gets all specific uh ERC 721 tokens that belong to a specific address now there's a couple of other options like your C20 custom RPC and also some login some some examples such as the login example and other useful links and even a 2d game example it might be helpful um but in the interest of time what I want to do now is I'm going to close what we have in here and jump directly into the unity editor so what you'll see here is I prepared a couple of game objects with a couple of scripts so if you go to the first one that is basically as you can see in this um some code snippet here and where is it so it's called ERC 721 balance of Chronos I think it's self-explanatory what it does uh it basically uh is the one method that we use to get the specific balance of nfts that belong to a specific address in this case it's my address it's it's one of my test accounts test addresses in here I put in the nft asset address and also you know the network which is tested in Chronos so this is actually very cool because before I go ahead um I want to show you something we have a faucet that is quite um quite helpful so whenever you want to create an nft a test nft on testnet you can do so by visiting our nft faucet so I'm going to open this now as you can see that's the website all you have to do is you know you connect with your address and it's going to take a couple of seconds to load but essentially what will happen here is it will it gives you an option you know to create uh your specific nfts description attributes and also an image file that you can upload and once that is created you can basically use it to create Tesla nfts which I have done as you see it is there's a lot of different nfts and helmets that I'm using in unity so I think that's quite cool that's something you can test as well when when you want to create some test nfts okay let's go back to our Unity editor so let's try to run this script I'm going to unmute it so this is going to return the amount of nfts that I'm owning so there's around four nfts okay so next thing I want to do I'm just going to stop this mute this again and then we jump to the next method which is going to check for the ownership of a specific nft I don't know what happened here yeah okay so in this case I'm using the RPC method as you can see this is basically the way the SDK was working for Chronos before but since we launched the sub graph we don't really need this part anymore but let's just use it to give you a sense that both options are actually possible and what this will do it will print the owner of token with the ID 53. and here we go yeah I can confirm that's definitely the address that I used so that worked as well okay I'm gonna stop this again untag it and the next one that I want to check is a the balance of Chronos the evm method and in here again all I'm using is the option for chain Network and account I pass them into balance off and then whenever I print it should print my current balance of test grow in wave format and that is correct as well they're going to stop this again and now I want to actually test something that I mentioned before how to import nft texture into the game so what I did here is I created a quad game object and then I assigned the component the script component to import the nft texture you can check out here so there's a couple of things that I've been setting up here I have a response with an image which I'm going to use in my Unity Web request so what happens here is we have four options Chronos testnet the the contract ID the contract address and the token ID then we have the the Yuri from from which we will get the specific so basically this is our URI that will be generated once we pass the chain the network the contract and the token ID and we query for this information and it will return the UE if it is available after specific metadata and what we want to do here is a little condition we want to check whether um the URL the UE starts with ipfs and if it does we want to replace it with the https https protocol to ensure that we don't have any strange Arrow locks when we try to retrieve the data so next step is we fetch the Json from the Yuri and then basically we start our this is how we start our Unity Web request it's a get request so we get the Yuri we rate the web request and then we create a response data object and in here we're basically going to use the Json utility to You Know download the data that will contain our response and more specifically it will contain the the image URL and here again we want to make sure obviously there's a bit of repetition here in the real world scenario we will try to reduce this in a smarter way but essentially we want to check if the image you you restarts with ipfs and if it does we replace it with the https protocol and then ultimately we just fetch the image and we replace the empty game object with the image texture but let's have a look and try to see how this will look in action so if I run the script it just imported the image that I created before some time ago by using the nft faucet which I showed you a couple of minutes ago okay so how can I actually make sure that I can display only nfts that belong to my address so the last option will answer that question it's a login example it's a little bit longer but essentially what the login example does it it basically makes use of the player perhaps get string method by which I check I retrieve them the the account once I log in with my wallet and I want to make sure that the owner of the specific nft and the account owner are the same and if they are if the condition turns true then I run exactly the same script that I just showed you so if you were to to do this in a real example and obviously okay this is set up I can try to just create an example login so we have the web so click on build and run save and what I want to do now is click on login select metamask and here we go I basically authenticated with my address I made sure that my address is the same as the account it owns this asset and if the condition turns true it basically turns uh loads the the asset into the game by replacing it with the game object okay and with this uh I want to conclude this Workshop if you have any questions please feel free to reach out you will find most of the information on the documentation but we are here to help so any questions just let us know thank you everyone bye now