Build Web3 apps with React

Hi everyone. My name is Shane. I'm the developer advocate at Decentology. My Twitter handle, everything's down there. And today we're gonna be talking about how you can build Web3 apps with React using JavaScript, so no smart contract code needed at all. No need to pick up another programming language. So let's get into it.

So our company, obviously we love developers. That's why we are here, and we make products that make your lives easier. Our mission, as I was pointing to earlier, is that we want to onboard 10 million devs from Web2 to Web3. So you're in the perfect place if you are new to Web3. And then our product, the Hyperverse, which I'll be explaining even further and using, basically accelerates and simplifies your blockchain development journey. So you'll see exactly how throughout this workshop.

So the agenda for today, I'm going to be first sharing the Hyperverse overview. So just a how Hyperverse works. And then go into some blockchain and crypto basics. And then I'll show you a demo of two modules of Web3 applications using the Hyperverse. So let's get right into it. So what is the Hyperverse? The Hyperverse is a community-built, open, and audited, modular, smart contracts for all major blockchains. So that's a whole mouthful, but I'll break it down. Right now in the Web3 world, obviously if someone wants to build an application, there has to be a smart contract aspect, and then the front-end aspect. The smart contract aspect is a totally different ballgame than what we have in Web2 world. You have to think of so many other use cases and edge cases since that code is immutable once it's on chain. So that's a whole lot different than the Web2 world. And then as well as picking up a whole new programming language. So once those two aspects are combined, then you have a Web3 application. But what we are trying to do is make it super simple for Web2 devs to build apps without writing a single line of smart contract code and using just JavaScript. So you can tap into other smart contracts using just JavaScript and call these functions all with JavaScript and create your Web3 application that way. Instead of creating a smart contract from scratch. So here's an overview of the Hyperverse and how the architecture kind of works.

So first, you know, any smart contract developer could go on and build these, what we call smart modules, which are essentially just single purpose, you know, on chain smart contracts, and then we have a community of registrars that will go in and validate these smart module packages. And these smart module packages consist of, you know, things like metadata, examples of, you know, how the functionality works and all that. And then we have a community of auditors that would actually go ahead and read the code of the smart contract that was built in the smart module and stake their tokens as an indication that, you know, this code is been verified and, you know, there's no scammy stuff or anything like that going on in here. So it acts like an insurance layer for the smart modules.

So now for Web 2.0 developers, all they have to do would be use JavaScript and use our libraries to tap into the smart modules and use them how they wish. And, you know, if this sounds familiar, this sort of concept sounds familiar to you, it's because it is, right. In Web 2.0 world, if you want to build a payment layer, you wouldn't build it from from scratch, right? You would just call Stripes API. If you want, you know, notifications, you would just call Twilio. And few lines of code, you have an app up and running with both those functionalities. So it's very similar of what we are building here. You're just connecting these, you know, Lego blocks of, I want this functionality from this smart module, this functionality from this smart module. And you can connect them literally just like NPM for smart contracts, and then use those functionalities wherever you want throughout your Web 3.0 application. So it really is that easy. So here is a diagram of just showcasing how, basically in the Web 3.0 world, you don't really need to have, you know, smart contract programming language knowledge. You could just write the client side applications using just, you know, HTML, CSS, and JavaScript and use, you know, React or whatever you want and tap into these smart contracts that were built by, you know, obviously the smart contract developers that were written in various different languages depending on, you know, which blockchain they're on. And you can just tap into these and then call those functionalities how you wish throughout your Web 3.0 application. So again, no smart contract code knowledge needed at all.

So now we can get into some of the blockchain basics. So here we have a diagram of, you know, the Web 2.0 world. So we're going to be comparing the Web 2.0 to Web 3.0 architecture. So in here, you know, we have a diagram of, you know, a user trying to access a, you know, website or application or whatever it is on their mobile or desktop. That request is then being sent to, you know, the web server which is then sent to the API server which is then sent to the database server. Once that request has been accessed, the data has been accessed, it will then send it right back down to the API server, then the web server and back to show up on the user's laptop or mobile device.

So now for the Web 3.0 architecture, we have someone trying to access a decentralized application that was built using, you know, HTML, JavaScript and CSS. What happens is that that request is then sent to a computer or a node on the blockchain and then once that has been accessed, it shows up on the user's device.

So now that we have sort of a high-level overview of kind of the Web 2.0 and Web 3.0 architecture, we can go into the blockchain workflow and how everything works. So here's a diagram of someone requesting a transaction. Once that transaction request has been broadcasted, so the first step would be the request has been broadcasted to a network consisting of computers, which are also known as nodes. And what these nodes do is that they validate the transaction, and then once it has been verified, the transaction is then put onto a block of data consisting of other users and other transactions that is then added to the existing blockchain, where it stays permanent and can never be changed. And that is when the transaction is complete.

So now we can get into some of the crypto basics. So here we have the private and public key. So how is the private key, I guess, derived, right? So it's basically a large random number, and then it does some fancy math stuff, which we won't get into for simplicity's sake. And then you have the private key. Now, the main thing to point out here is that the private key is really not meant for sharing. So this is how people can get access to all things in your wallet and can do whatever they want if they have access to your private key. So that's never meant to be shared. Public key, you can share with whoever you want. That's for someone who wants to transfer you something or anything like that, you can always share your public key. And how that is derived is using your private key and then also some even more fancy math stuff, and then you have your public key.

So now that we have a kind of overview of private and public keys, we can compare blockchain accounts to user accounts in Web2. Now, obviously, they are very different, and it's not similar to user accounts in Web2. So here, like I explained earlier, the accounts on blockchain are derived from private keys and public keys that are randomly generated. So now that we have sort of an understanding of public and private keys, we can look at an example scenario of signing and receiving a message. So here we have Bob that creates his message for Alice. So Bob uses an app to sign his message with his private key, which creates a signature and sends it to Alice. So it's important to know that it's not the private key that's being sent to Alice.

It's a signature that was just signed using his private key that is sent to Alice. So now when Alice receives Bob's signed message, Alice then can use the app to then verify that this message does in fact belong to Bob using his public key. So this is where Bob would send over his public key to Alice and then Alice can put that public key in and verify that the message did in fact come from Bob.

So now that we've gone over that, wallets are the tool to basically sign these transactions. So it is important to note that these blockchain wallets are only there for two reasons. It is simply to secure the storage for your private keys and a tool to sign transactions. So again, it's important to note that the blockchain wallet does not contain any money or crypto. It is simply there for storing your private keys and a tool to sign transactions.

So now let's get into some of the fees. So these blockchain fees, which are often called gas, so I'll go over these three concepts. So the fee itself, how gas prices are determined, and then a transaction speed and how it affects gas prices. Well, so first, transaction fees, which are often called gas, you can actually specify any amount that you wish, but it's important to note that transactions with very low gas are likely to be ignored. And then you'll also see later in the transaction speed how this affects your speed. So the gas price itself. So you're probably wondering, you know, how are these gas prices determined? Well, you know, they are very dynamic and vary accordingly to how many other people are submitting transactions at that time. So it all depends on how many people are submitting transactions at that time. And that fluctuates a lot, obviously. Now, with transaction speed, so transactions with higher gas fees are likely to be processed faster than those with lower fees. So that was just just like before, I mean, if the transaction gas fee is very low, it's it could just not be processed at all. So it all depends on the gas fee price and the higher ones will go by faster than lower ones. So now let's just transition to, you know, fungible versus non-fungible. And what exactly does that mean? So fungible tokens are interchangeable. So if you think of, you know, me giving a dollar bill to any one of you, I could ask for, you know, a dollar bill back and it wouldn't have to be that same dollar bill. A dollar is still a dollar, just like, you know, one bitcoin will always be one bitcoin. It doesn't matter where you're getting that one bitcoin from, who you're getting it from. You know, they're not unique. So one bitcoin will always be one bitcoin. Now, for non-fungible tokens or NFTs, they are not interchangeable. So now if you think of things that are unique, so for example, your car would be something that is non-fungible, right? It has a unique VIN. There's parts that have a specific history and data attached to them that makes the whole car unique.

So that would be an example of non-fungible. So now let's get into the fun part and actually see a demo of a Web3 application. So first we're going to be going into docs.hyperverse.dev, which I can actually drop in the chat for everyone to see. What we will do is go to the build Web3 apps section and then go to environment setup.

So it's important to note the system requirements, just making sure you have Visual Studio code or any other IDE for editing JavaScript installed, and then get node.js and Yarn. There are two different ways to go about this. You can obviously start from scratch and just import these NPM packages as you build. So this would be the process for that, where you can create a next application and then go from there. Or what I'll be showing you today, just for simplicity sake, will be the using the Hyperverse Monorepo. So this repo consists of all of our example dApps, packages, everything you need, and you can simply just run, you know, yarndev, and then it'll have an example dApp running for you. So the first step would be to obviously clone this repo, which I've already done. And then once that is complete, you can actually go into the folder for Ethereum, and then the first example dApp that I'll be showing to you today, which will be Tribes. So you can go ahead and do that. And then all you would do is just run yarn to install the dependencies and then run yarndev to have it running. So I've actually done that for you already. So right here, we have the tribes example dApp running.

So what this example dApp does, is that it allows users to essentially just join, leave or create tribes. So you could think of, you know, tribes being anything like, you know, from teams and games that, you know, people can join or even communities that people can join and leave. And this is all happening, obviously on the blockchain, there is a smart module attached to it as well. But today, I'm going to be showing you how you can interact with that smart module using just JavaScript and call all these functions, you know, update data, update information, all that stuff. So the first step would obviously be for the user to connect their wallet. Once they have connected it, they can then join a tribe. So first we click join a tribe, and you'll see processing. So what it's actually doing is that it's just fetching its reading information off the blockchain off the smart contract and showcasing the tribes that are available for you to join. So it's important to note when you're reading from the blockchain, that is not cost any money. But when you actually want to interact and maybe update or put information on the blockchain, there will be a transaction involved, it will cost money. So you'll see that right here. So if we want to join a tribe, that will be updating information that now this user has joined this tribe. So you'll see a pop up of the MetaMask wallet extension that says, confirm this transaction. So we'll go ahead and click that.

It'll tell you, the gas fee, the transaction costs, we'll go ahead and confirm. And so now this is actually a processing and updating that information on the blockchain.

So a cool thing to look at would be the actual interaction, the actual transaction that we can view on Block Explorer. So we can go ahead and do that. So everything that's happening is all on the Rinkeby test network, which is just the test network for the Ethereum blockchain. So here you'll see the actual transaction. And EtherScan, what EtherScan can do is that you can search up any address, any transaction hash, and look up pretty much anything you want. So in this case, we see the transaction hash, and then we see a bunch of other information like the gas price value, what the wallet address, who interacted with the transaction, so who it's from, where it's going to, which would be the contract address. So you can see everything is working here. And then it just loads, and then it'll show when the status has been completed.

So if we go back to here, we can see that it's reading the information of the tribe that we just joined. So we see the name, the image, the description, all that good stuff. So now you can probably guess when I click leave tribe, it's going to be updating information on the blockchain. So it'll ask us for a transaction. So if I click leave tribe, you'll see that we click confirm, and then it'll be processing and it'll take us back to the homepage.

So now another fun thing that we have in this example DAP is a thing called battle. So basically it chooses, you know, two different tribes to do a battle with. And then it'll choose that random which tribe wins. So we can go ahead and do that. And I'll explain how all this is working when we dig into the code. So we can go ahead and click start battle. And it'll ask us for a transaction to confirm. We click confirm, and then it'll start the battle. So a fun thing that I like to do is, you know, you guys can type in chat who do you think is going to win out of these two, and then we'll come back to this and look at it after we dig into the code. So feel free to throw your guesses in the chat, Hila, for sure. Let me know if you guys can see the code fine. Nice. Okay, so first, we're going to be going into the same folder that was there earlier, so we're seeding into, you know, the apps, Ethereum, and then the tribes example DAP. And then the first file that we'll look at is the app.tsx file. So here is where pretty much everything is getting hooked up to the hyperverse for us to use.

So you'll see right here that we're importing some blockchain-specific stuff as well as, you know, Hyperverse Provider, all that stuff to initialize the hyperverse and get some of the functionality that we need for, you know, reading the user's wallet and all that stuff. And then we have Tribes, which is the smart module that we're importing right here. And then you'll see right here is where we're actually initializing the hyperverse. So all we are doing here is assigning, you know, which blockchain that we want to use. So it's important to note that we also have, we're also on Flow, Medus and Algorand. So you can always, you know, change that to whatever you want, and you would always change this to, you know, hyperverse dash flow or whatever it is. So you can build on, you know, multiple different blockchains and simply do the same process of, you know, the same modules and all that stuff that you would like. And then Network, we're obviously on Testnet. And then this is where you would add all the modules that you're using, right? So if you're using multiple modules for multiple different reasons, this is where you would add it. I'll go over both of these modules. The first one was tribes that we saw where you're, you know, creating, joining and leaving tribes. And then the second module is this random pick. So this module is actually for the battle function that uses chain link. I'll explain all that in a bit as well. So now after we've initialized the hyperverse, we go ahead and wrap our entire app in the hyperverse provider, and then that will give us all its nested components access to the hyperverse. So essentially, the entire app is now hooked up to the hyperverse in just, you know, a few lines of code.

So now the first file that we'll look at is the index.tsx. And you actually note here that we bring in the nav component. So we'll go ahead and look at that. So if we go here to the nav component, we'll be able to see how this connect wallet functionality works. How do we even get this connect wallet to work? And Heeler won, by the way, whoever said heeler, congrats. So how does this connect wallet feature work? And how do we see the wallet address and all that stuff? Like, how exactly does this work?

So on the back end, we're actually using something called Rainbow kit, which handles most of that functionality for you. But we simplified even more for you. All you have to do is simply import this use Ethereum hook, which gives you access to this connect and also gives you access to, you know, the account address, all that stuff that you can just extract from the use Ethereum hook like we are doing here. So we're just extracting connect from the use Ethereum hook, and then and then using this connect component here. So that by itself handles all that for you where it's, you know, connecting the wallet knows the user address, the account balance, all that stuff is done for you in simply, you know, three lines of code. So yeah.

And so now we can go back to the index dot TSX and see exactly how we are joining and reading from the tribe. So here, the first thing they'll show is that, you know, once the user's logged in, we show a join a tribe button. So we go to the route all dash tribes. And since we are using Next JS, that would actually go to the all dash tribes file. So once we go to this file, we can actually scroll down here and see how exactly is it showing all the tribes, right? So if we go back to here, we click join a tribe, where are these tribes coming from? And how are we pulling these tribes? So if we see here, we're mapping through something called data. And it's showcasing an image for each one. So obviously, that would be these tribes that are showing up each of these images. So where is this data coming from? So if we scroll up here, and go to data, we see that we are calling something called get all tribes on tribes. And where's tribes coming from? It's coming from this use tribes hook. And that is what we're importing here. So this use tribes hook, you can see that there's, you know, 15 more functionalities that you can call. All this is doing is essentially, you know, it's a file that's bridging between the smart contract and your front end code. So it's extracting all the smart contract functionality into JavaScript. So now you can call whatever functions you want, using just JavaScript. And you really don't need to know the smart contract, programming language at all, right? Since you're not creating a smart contract, you're not interacting, you're interacting with it, but only with JavaScript. So this would be kind of like, you know, your push, fetch, all that stuff would be done through calling these functions. So here, again, we're just extracting or using the get all tribes function from the use tribes hook. And then that's where we're extracting this data from. And then that already gives us, you know, a list of all the available tribes that are on the smart contract.

And then we're just simply showcasing those tribes by mapping through them. So now when someone actually clicks on the tribe, we are putting information on the blockchain, right? We're updating information and we're actually making the user join the tribe. So this is where, you know, on click this mutate function is called. So now let's look at what the mutate function does. So if we go up here, you'll see it's a very similar pattern, right? We're calling this join tribe function, which handles everything for you on the back end. So you know how the MetaMask wallet popped up, all that stuff is done for you. So again, if I click on this, this is all done for you. This is all being done for you on the back end. It confirms and then it updates information on the blockchain saying that you have joined the tribe. So that's all done through just a couple lines and calling this function.

So now we can actually look at what happens after we join a tribe. So all we are doing is reading, so there's no transaction involved. We're just fetching information of which tribe they just joined. So now we can actually look at that. So we can go into the my-tribe file, and we can look into here. So you'll see it's a very similar pattern. We're importing the use-tribes hook, and then all we are doing is calling this get-tribe-by-account function, which essentially just returns this data that consists of the name, the description, and the image of the tribe that you just joined. So if we look down here into data, we see that it's displaying the image, the name, the description, and a leave-tribe button, which is everything that we have right here. So now you can probably guess, it's very similar functionality for leave-tribe-button, just like how it was for join. We call this mutate function, which really just calls leave-tribe on the use-tribes hook, and that does, again, everything for you on the backend. So we click leave-tribe, we click confirm, it updates the information on the blockchain, takes you back to the homepage.

So now we can look at something back in app.tsx file. So you're probably wondering, what if I want to change these tribes? What if I want to create my own custom tribes? I don't want to use these tribes. I want to create my own. So this is where this tenant architecture comes from, which is in all of Hyperverse Smart modules. So it's actually reading from this address. So anyone can create an instance and have that as a tenant owner and then create tribes or whatever amount of tribes that they want. So that'd be saved to that address. So it's essentially reading the data from this address that lives on the Smart Contract. So, you can essentially just change this to your address, create an instance, which would be create your own tribes.

And it would show all those tribes instead of the tribes that are being shown right now. So that's how you would have your own custom application and mess around with it.

So now we can actually look at this battle functionality and how this works. So if we go back to here, we can actually stay here at the App dot TSX file, and we see this, right. So this is the random pick smart module that we are importing. And then we're using right here. So this is the smart module that is handling this battle functionality.

So if we actually go to battle, we'll see a very similar pattern. You'll see this use random pick hook now instead of use tribes being imported, which gives you access to the smart contract or the Yeah, the smart contract functionality in JavaScript that allows you to randomly choose a number. So in this case, we're just extracting numbers in terms of how many tribes are and then we're showcasing or making the smart contract choose a random number. So you'll see right here is where we're doing very similar functionality to what we were doing in in use tribes. We're using this use random pick, and we're extracting the start random pick and get random pick functions. And that's all we are using to create or get a random pick, and then choose from one of the two tribes to win to showcase that they won. So yeah, pretty simple, pretty easy. Everything done, you know, in JavaScript, and, you know, no smart contract code needed at all.

So now I'll be going to the second smart module, which will be showcasing the ERC 721. So how to create how to mint and create your own NFT. So we can go into ERC 721, and I'll simply run yarn dev. And then we can go ahead and refresh this. So you'll see in here, this basically displays all the different functionality that you can do within this smart module, which is the ERC 721 smart module. So you can see here, we can create our own instance, which, you know, I, I explained earlier, which would be, you know, creating your own ERC 721 token. And then you would change the address in the app.tsx file, so that it reads from your address. So it showcases the token you just created. So we can actually go into the ERC 721 folder, we can go into pages and then app.tsx. So you'll see right here is where the tenant ID is showing up. So this is where it's reading from currently. So if we were to go ahead and, you know, get the balance of or even mint, so we can mint to an account that's meant to, you know, the current account. So we can go ahead and, or we can actually just get the balance of and see if there even is a balance. So there you go, so it tells you that, you know, there's zero of these ERC 721 tokens in this address, in this wallet. So we can actually go ahead and create our own instance from scratch.

So I'll go ahead and show you that. What we can do is create a brand new account. Let's just call this, you know, Shane token. Let's go ahead and create this. And we already have some ETH in here, but, you know, a good website to get some Rinkeby ETH to test with, would be this faucets.chain link.

So what you can do is just request a test ETH on here, and then it'll automatically transfer you some test ETH so that you can actually use it for transaction since, you know, the transaction would cost money. So we can go ahead and do that here. It will initiate and then it'll put in, 0.1 test ETH to my wallet.

So what we'll go back to here, we can go ahead and refresh, and then we can create a new instance. So let's go ahead and make sure that we are connected to Shane token. And then we can go ahead and create a new instance. Let's just call this, you know, token name, Shane codes, since that's my Twitter handle. And then SC would be the token symbol. So we can go ahead and create this. There's the transaction since we are creating something. So we click confirm. And then we can actually look at this just like how we looked at tribes. We can see this pending and everything on Ether scan. So we can go ahead and see, you know, who made the transaction, what it's interacting with. So if we open this contract address, we can see all the interactions that have happened with this contract. So we can wait for this to load, and then go back. And then once this has been created, which it looks like has been created, we can go ahead and mint this. But before we actually mint, we have to make sure that we are actually reading from this address right now. Right.

So we created a brand new token, but we're not reading from this address right now, we have to change that in this tenant ID parameter. So let's go ahead and copy the address we just used to create this token. Let's go ahead and change this to our address. Save that. Let's go ahead and refresh. And now let's make sure that the create instance went through.

Good. And so now we can go ahead and refresh this. And then we can click mint. And so now we would just put in an address that we want to mint this token to. So what we can do is just paste in our own address. So we can mint it to ourselves and see if the balance updates to one. So we can go ahead and mint that, and again, if we want to go ahead and look at this, you'll see this on Block Explorer, and you'll see the contract that we interacted with. And you'll actually see us minting an SC token as well in this transaction. But we can go ahead and see if it has loaded yet. So let's go ahead and click balance of, we can just see if this transaction has gone through yet. We're just waiting on Rink to be test net to make the transaction go through. But once that has gone through, you'll see the get balance of change here. Seems like it's taken a while. Yeah, but essentially, you can see all the interactions with this contract as well, right? So this would be where you would see the interactions. We see the wallet address that I just used. So you can see right here, my transactions and the ERC 721 token transactions. So in here, you can see that this in fact did create the token right, Shain codes and SC. So you can see all that here. So now if we go back, you can see right here, there we go. Now it shows one since we have minted one. Now it's important to note that obviously there's all these other functionalities that we can transfer this to another wallet address and then showcase that as well. We can also toggle this for public mint. So as of right now, I am the only person that can mint because I'm the tenant owner. But if you wanted anyone else to come on your site and be able to mint just like a normal NFT minting site, you can do that as well. So you can basically have a private mint or a public mint. You have both options to use here. So this is very cool. And you can basically build a public minting NFT site and create your own NFT token without ever writing a single line of smart contract code. You would just simply, again, just import these modules like any other NPM modules and then call these functions how you wish. So, yeah, those were the two example dApps that we wanted to go over today.

It's also important to note, though, that we do have other modules that you can use. We obviously have a token one as well. So ERC-20 instead of ERC-721 that you can create your own token as well. And then we also have a staking and rewards module, which allows users to stake tokens and then give out rewards based on how long or whatever they have staked with. And then similar to these modules, we also have it on other blockchains, so Flow, Medus, and Algorand. And we'll be adding more and more blockchains as they get hooked on to the Hyperverse.

So, yeah, that's pretty much it for the demo. And then all the resources are listed here. So just make sure that you're on our Discord. We have a channel for showcasing what everyone has built on the Hyperverse. So there's a channel that you can go through and see examples of everyone else that's building on the Hyperverse. There's this really cool one that someone had made last time when we held this thing called Fast Camps, which we are actually holding pretty much coming up here soon, which are essentially just mini boot camps that we go through a similar thing and then we also build apps together and then showcase them and stuff like that. So someone had built a tribes module where you can actually comment and chat with your other tribe members within your tribe. So that was pretty cool and there's a bunch of other stuff being built that you can check out on our Discord.

And then, the most important one is probably this docs website. So docs.hyperverse.dev and that'll show you step by step of how to clone, how to create a web three app from scratch, hook it up to the hyperverse, all that good stuff. And then, we also have blogs on our website that you can access that go also step by step from scratch, so from a basic Next.js application of how you can build the authentication, so the Connect Wallet feature, how to build the random pick module as well from scratch, all that good stuff. And yeah, if you guys have any questions, feel free to always hit us up on Discord or on Twitter. You can DM any questions that you want. So, I'll open up to the floor, and if any of you guys have questions, feel free to ask. And we also have people from the Decentology team here as well that can answer any questions that you have. I would also love to hear from the the people that were new and never had built a Web3 application. You can type in chat if you don't want to turn on your camera and say something, but I guess, what did you guys think? Does this seem pretty easy to now to build Web3 applications? Feel free to drop any questions you guys have as well in the chat. Still processing. You are not out of the loop. I've never heard of the term smart contract before. Am I out of the loop? You're not out of the loop. Smart contracts are essentially a program that is being run on chain. Do you plan on supporting other blockchains like Chia? Yeah, we plan on supporting all other major blockchains as they come and get hooked up to the Hyperverse. What kind of applications can you build using these tools? So again, there's a lot of examples on our Discord.

There's a channel that people have built applications with. But essentially, I mean, you can build, for example, if you wanted to build using the tribes application, you can have someone join a team or something, and then you can combine multiple modules together, right? So you can have custom tokens for each team that is on your application. Maybe if a person holds X amount of tokens, they get access to read some more information, or then they get access to chat with other members. There's a lot of different variations that you can do with the modules that are available right now. But obviously, the NFT minting site would be an obvious one for people to use. And they can build that pretty easily. And more and more smart modules, obviously, come as more and more smart contract devs come and build these smart modules for specific use cases. So then for JavaScript devs, all you would have to do is just look through some smart modules and be like, hey, that sounds like a cool functionality. I want to add it. And then you would simply just call those functions or import it and then call those using JavaScript and you would have a working application.

Minting is basically how you saw when I minted the NFT. It's essentially creating the NFT and then transferring it to whatever address that I put in there. So someone's asking in chat, the smart modules shall connect your code to smart contracts, right? Who would code the smart modules? So the smart modules would be coded by smart contract developers. So if I go back to here, right, so these smart modules are packages with smart contracts built that are built by these smart contract developers. And we have a package for that as well, that makes it easy for the smart contract developers to build these smart modules. But once they have built this and coded up the smart contract for whatever specific functionality that they have, we also want to obviously confirm and have that code be secure and know that there's no leaks or anything in the code for the JavaScript developers to use. So that's where our registrar, our community of registrars and community of auditors come in, where they'll stake their own token. So basically putting money where their mouth is and saying this smart contract, this smart module is good to go. And then that would act as an insurance layer just in case something does happen.

Can any technology smart contract integrate with our JS React application to use? Can any technology smart…so I'm assuming you just mean, in this case, these smart modules would be connecting to your JavaScript or React application. So someone can, you know, build a smart contract, just like, you know, the NFT minting functionality, that'd be a smart contract, that is then packaged with some code and then packaged up and built as a smart module for our platform, and then any JavaScript dev can, you know, import and use these smart modules. And yeah, it would be for any of the chains that that hyperverse supports. Is there any additional production deployment steps to deploy an application like this? So everything currently is all on testnet, not on mainnet, but obviously that is coming soon and Sheely can probably answer that better since he is the engineering head for Decentology. There are no dumb questions, but what was the NFT that you built? I didn't get that. So that was essentially me creating a NFT token, right? So I typed in a token name. I typed in a token symbol and created that NFT, or that token from that function. So someone's getting a couple errors on their repo after running Yarn. First, I would make sure that you have all of the system requirements and if that is the case, then you can always take a screenshot of that error message or anything that you have and post it in our Discord, and anyone from our team will be more than happy to help you. To use all that, you have to run host react app and an Ethereum node. So nope.

Yeah, everything. Yep. Like she just said everything is done for you with just the packages on testnet. So no, literally nothing else that you need to do. Let me leave up the last screen so you guys can take a look at all the resources again. But, you know, if you know this was also a lot going on but you know if you guys want to look at some some great articles that that we've done, and it literally takes you from the scratch of building, you know, just the next biggest app. And then, you know, importing and hooking up to the hyperverse, step by step, and then as well as how to, you know, do the connect wallet feature all that stuff is all in our blog post. So we have a couple blog posts there that, you know, first do the random pic, they do authentication, they do all that stuff. So, you know, that may clarify it. Some more questions as well.

Cool. So I'll just wait here for a couple more minutes if there's any more questions coming in. If not, then we'll be good to go. Do you have any comment regarding the transition from web two to web three? I guess it's specifically in terms of what? Obviously, we're trying to make it, you know, very easy for someone to transition from Web two to web three, which is why we built this, and you can interact with all this stuff with your previous knowledge of JavaScript and web dev. So you know, that is one of our that is our main goal, is to get more and more web two to build web two applications.

So yeah, the latest image on. Yeah, yeah. So if you guys are having any problems after pulling from main branch, try switching to the feature rollup branch, which is the updated one right now. And then there'll be merged into main soon. So if you guys are having any problems on main, feel free to switch to that branch. Repo link. So everything is in the docs. So if we go into the docs, you can go ahead and look at it all here. So use the hyperverse monorepo. And then we go into here and I'll just paste it in here as well. This also goes over an introduction to the hyperverse, you know what it is. All of our socials all that stuff. And then if there's any smart contract devs on this call, then there's also a tab for creating your own smart module and how that works as well.