Build Web3 apps with Javascript

Hi, everyone. I'm Shane, and I'm the developer advocate for Decentology. And today, we're going to be talking about how you can build Web3 apps with just JavaScript. So, no smart contract code knowledge needed at all. And that's exactly what I'll be showing after this PowerPoint. So let's go ahead and get started.

So first, our company, we obviously love developers. So we make products that make their lives simpler, which is exactly what I'll show you today, which will be the Hyperverse. So our mission is that we want to onboard 10 million devs from Web2 to Web3. So obviously, you guys will be a part of that mission. And then our product, which I'll talk about even more after is Hyperverse, which accelerates and simplifies your blockchain development journey so that you don't have to worry about all the blockchain specific stuff.

So our agenda for today, I'll go over a little bit about Hyperverse and then go into some blockchain and crypto basics, and then start building some Hyperverse dApps. So I'll show two examples. One will be ERC-721, which is essentially an NFT. So how you can create an NFT minting site using just JavaScript. And then Tribes will be the other example, which I'll get into as well. So let's go ahead and get started.

So what is Hyperverse? So Hyperverse is a community-built, open, and audited modular on-chain smart contracts for all major blockchains. So I know that's a big blurb and a mess, but I'll break it down. So, you know, today in the web3 world, if you want to build an application, you need to build a smart contract layer and then as well as the client side application. Now, obviously for smart contracts, you would have to pick up a whole different coding language, whether it be Solidity, Cadence, whatever blockchain that you want to build for. But also it's a totally different paradigm than the web2 world, right? You have to think of code being immutable. You have to think of storage costs, all these things that are totally different than the web2 world. So we wanted to make it super simple for web2 devs to build apps without writing a single line of smart contract code and write with something that they're familiar with, which would be JavaScript.

So here would be an architecture of the hyperverse. So let's just break it down into three sections. So first, we would have smart contract developers who would build what we call smart modules. And essentially, these smart modules are just packaged up a single purpose, you know, on chain contracts. So they're all meant for, you know, single functionalities instead of having a full smart contract doing multiple different functionalities. And then once the smart contract developer has built these smart modules, it would then be sent off to our community of registrars, where they would actually validate the smart module, making sure that they have the proper metadata documentation, examples, whatnot in them. And then once that is validated, it would then be sent to our community of auditors. So this is where the auditors would actually look at the smart contract code and make sure that, you know, there's no funny stuff going on in there. Make sure that they trust this code and they would actually stake their tokens to confirm that, hey, this is trustful. So you can think on the JavaScript side of things, you know, if they're looking at a bunch of different smart modules, they see one smart module that does a similar functionality to another. One of the smart modules has, you know, 10, 20, 30 auditors that have actually staked tokens on them. Obviously that one would be, you know, more trustful and they would go and use that smart module. So this stake actually acts as an insurance layer as well, just in case something does occur. So now for most of you guys, the Web2 developers would actually just use our built, you know, JavaScript libraries to build these Web3 applications just by connecting their smart modules, kind of like Lego blocks, right? So you're choosing which functionalities you want, and you would put them into your Web3 application and built it how you wish. And, you know, if this sounds familiar to you, it's because it is, right? So if you have a payment layer in Web2World, you wouldn't, you know, go make it from scratch obviously. You would just use Stripe. So you'd use that functionality, submit it into your Web3 application, and use that. And if you have, you know, if you need notifications, you would use Twilio. You would take that API, use it in your application how you wish. So that is very similar to what is happening here. You would have a bunch of different smart modules, all with different functionalities that you can use throughout your application to build and connect and update stuff on the blockchain. So what we are essentially building is the NPM for a smart contract. So it is really that easy. And if you're wondering now, or if you're wondering before, you know, do I even have the proper skill set to build, you know, Web3 applications, and I'm here to tell you that you do. You absolutely do. You know, all you need to know really is HTML, CSS and JavaScript with the hyperverse.

You can just tap into the smart modules that are have already been built by the smart contract developers and use that as you wish, and built the client-side application with several different features using all the smart modules.

So now let's go ahead and get into some blockchain basics. So here we have a diagram of the web2 architecture. So we have someone trying to access a website on their mobile device or desktop, which then a request would be sent to the web server, which then would be sent to the API server, which then would be sent to the database server. Once this data has been accessed, it would then be sent back down the line to the API server, web server and then show up on the user's page, whether it be on their mobile or desktop or whatever.

So now let's look at the web three application. So now we have a user trying to access a decentralized application on their mobile or desktop device that was built using HTML, JavaScript and CSS. So what happens is that that request is then sent to a computer or a node on the blockchain. And then once that data has been accessed, it would then appear on the user's mobile or desktop device.

So now we have a quick high level overview of the architecture between Web 2 and Web 3. We can get into some of the blockchain workflow. So here we have a diagram where someone requests a transaction, which is then broadcasted to a network consisting of computers, which are also known as nodes. And then once these nodes validate the transaction, it would then be sent onto a block of data along with other users' transactions as well. And then it would be that whole block would then be attached to the blockchain where it stays forever. It's permanent and cannot be changed. And that is when the transaction would be complete.

So now let's get into some crypto basics. And the first thing we should go over is public and private keys. So how the private key is derived is using some large random number with some fancy, mad stuff which we won't get into for simplicity's sake. But the important thing to note is that private keys are not meant for sharing. So this is where your private key gets exploited by someone or you accidentally sign a transaction, which is actually showing your private key or anything like that. This is where hackers can technically get in and basically do whatever they want with your wallet if they have your private key. So it's very important that you do not share a private key.

Now, how your public key gets derived is using a private key with some even more fancy math stuff. But it's important to note that your public key can be shared with anyone if you wish. And it's also important to know that, you know, obviously, blockchain accounts are very different than user accounts in Web2. So you can see here that, you know, blockchain accounts are derived from, you know, your public and private keys that are randomly generated. So here would be a quick diagram of Bob and Alice who are, you know, signing in and receiving messages. So this is kind of like a workflow diagram. So here we have Bob who creates his message for Alice. So you can see that 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 it's the signature that is being sent to Alice. It is not, you know, his private keys that is being sent to Alice. So then once Alice receives Bob's signed message, Alice can then use the app to verify that this message does in fact belong to Bob using his public key. So this is where Bob can send Alice, you know, their public key, and then Alice can put the public key in and be like, OK, this message does belong to Bob. So now that we had a quick overview of signing and receiving messages, it's time to talk about the tool that's actually doing all this, which is wallets. So it's important to know that wallets are only meant for two things. It is to secure storage for your private keys and a tool to sign transactions. So, again, those are the only two reasons that the wallet would be there. There is no money in the wallet. There's no crypto in the wallet. It's only there for those two reasons, securing storage for your private keys and the tool to sign transactions.

So now that we're talking about transactions, we can get into blockchain fees, which are often called gas. So I'll go into the three main concepts, which would be the transaction fees themselves, the gas price and how it fluctuates, and then the transaction speed. So the transaction fee itself, often called gas, you can actually specify which amount you wish, but transactions with very low gas are likely to be ignored. And then you'll see how speed will also differ in the gas price itself as well. And then the gas price itself, you're probably wondering how is the gas price determined? So it is very dynamic and varies accordingly to how many other people are submitting transactions at that specific time. And then the transaction speed itself, transactions with higher gas fees are likely to be processed faster than than those with lower fees. So obviously, then if it's too low, it could be ignored, like I mentioned earlier.

So now we can talk a little bit about fungible versus non fungible tokens.

So this is obviously going to be showing the ERC-721 example, which would be a non fungible token. So this would be a quick overview of what the difference is between fungible and non fungible. So fungible tokens are interchangeable. So for example, if I gave a dollar bill to anyone of you and you guys gave me a dollar bill back, it wouldn't necessarily have to be that exact same dollar bill that I gave you. Right. A dollar is still a dollar. Just like one Bitcoin is still one Bitcoin, no matter how I got it or where I got it from. So it's all interchangeable. But non fungible tokens are not interchangeable. So things like your car, for example, is a unique VIN, unique parts that have unique history. So everything is unique about it. That, you know, you wouldn't just give some random car back and it would be the same sort of value. Right. You would want the exact same car back. So they are all unique. Cool.

So now we can actually get into the example dApps. So let's move on to docs.hyperverse.dev. So this is where all of our documentation is. It goes step by step of everything we'll be showing you here today. It'll actually go over building Web 3 apps from scratch, as well as from our monorepo. So this is mainly for JavaScript devs, but it also has the smart contract that side of side of it as well and how you create smart modules. So we'll go ahead and come here and I can actually just paste this in the chat as well for you guys to follow along.

So first, we'll go into build Web 3 apps and we'll go to the environment set up. So just making sure that you have the proper system requirements, VS code or any other ID for editing JavaScript installed, get NodeJS and yarn. Cool. So now that we have two different paths, so we can obviously start from scratch and go from a newly built, you know, template Next.js application and start importing some Hyperverse modules and build it that way. Or use our Hyperverse monorepo which consists of all of our example dApps, all of our packages, and you can simply just run yarn dev to get something started. So it's much simpler and easy to use so I'll actually be demoing that for today. So we can go ahead and click that.

And you'll see right here, all the commands you can go ahead and clone this and then CD into the first example dApp that I'll be showing you, which is tribes. So you can actually see here that we're going into the Ethereum folder since the Ethereum blockchain as well I'll be demoing today, but we're also on, you know, flow, Algorand, Metis, all these other blockchains as well. So we'll go ahead and go to tribes, and then all you would need to do is run yarn to install all the dependencies and then run yarn dev, and you have the app up and running, which is exactly what I have right here. So you can go ahead and see that this would be the homepage of the tribes example dap which uses the tribes smart module. So essentially what this dap allows you to do is, users can come on connect their wallet and join leave or create tribes as you know anything really from like teams to anime characters anything that community of people can you know join and have their own community in and then leave, or even, you know if you're building your own application you want to create your own to join.

So what a user would actually do when they first come on is go ahead and connect their wallet. In this case we're on a theory and we're using metamask. So you'll see right when I click Connect Wallet, that our wallet modal will pop up so this is actually using something called RainbowKit on the backend, which does all this UI, this nice UI and everything for you. So we can go ahead and click Metamask since that's the wallet that we have. And then all this is doing is, you know, I have multiple accounts on my metamask wallets, it's just asking, you know, which account. So we'll go ahead and click the Decentology account, and then it's just asking to connect to the site. So this is obviously like authentication and in the Web2 world, we'll go ahead and click Connect. And then you'll see that our wallet address pops up right here as well as our balance. Now obviously, I don't actually have 11 ETH, this is all on the testnet, so everything the same as the mainnet of Ethereum, but you know, the testing version essentially. This is all fake ETH, essentially. So you'll see right here that the Join a Tribe button has also popped up. So what this will do is when we click on it, it will actually be fetching, it will actually be reading tribes off the smart contract, off the blockchain and showing you which tribes are available to join. So we'll go ahead and click that. Join a Tribe. It'll be processing and it shows all the tribes that are available for you to join. It's important to note that when you are fetching or reading information off the blockchain, that does not cost any money. When you actually want to update or put information on the blockchain, then there is a transaction involved. Therefore, it would cost money. So, that's exactly what we'll see right here. If I click on any of these to join, it's obviously going to want to update the user's info on the blockchain and say that this user is now joined in say Dragon Tribe. So then it will cost a transaction. So you'll see the Metamask wallet extension pop up. So let's go ahead and click Dragon, and then you'll see the Metamask wallet extension pop up telling us to confirm, there's the gas cost, the fees, and we'll go ahead and click confirm. And then it'll be processing and actually updating this information on the blockchain. And it's important to know all this stuff is happening with just using JavaScript functions. So I'll actually go in and dig deeper into the code as well right after this. So you can see right here now it shows the information of the tribe that we just joined. So it shows you the name, image, description, and all that good stuff. So you can probably assume that when I click leave tribe, that it will also have to update the information again. So it's going to ask for the transaction to confirm as well. So we can go ahead and click leave tribe, you'll see it pop up, we can go ahead and click confirm, and then it'll be processing and going through.

And so then it'll go back to the home page. But a quick thing to look at would be the actual interaction with the contract that we just did the transaction of leaving a tribe. So you can actually view this on block explorer. So essentially what Ether scan is, is that you can see everything and anything on the Ethereum network, you can search by someone's wallet address, see their, you know, history of transactions, whatever it is. And then also a transaction. So this would be the unique transaction hash, which you can copy and paste and then look up the transaction if you wanted to. So it shows you which wallet address, this is coming from, where it's going, so you can actually click on this to see which contract actually interacted with. And you can see that there's multiple different transactions that have happened with this contract as well. So that's pretty cool. And then we can go back and you'll be able to see, you know, when this transaction has, you know, gone through successfully and whatnot. So cool. Let's go back. And now that we're on the home page, we can actually look into the code now. So let's go into Ethereum and then Tribes, and then we'd go into the source folder, Pages, and then we'll go look at app.tsx. So this is where the app is actually getting hooked up to the Hyperverse so that we can actually use these modules and interact with them. So you can see here that we have these Hyperverse modules that we're importing in, whether it be some blockchain specific stuff, also initializing the Hyperverse and then the Hyperverse provider, which will wrap with all of its nested components so that the entire app now has access to the Hyperverse. And then you'll see right here as well, that we have the Tribes smart module being imported here. So the smart module is what the smart contract developers would create and package up into the smart modules. And then all we're doing is importing that smart module here to go ahead and use it throughout our application. So right here is when we're actually initializing the Hyperverse. So you can see here. Very simple. I mean, you know, I asked which blockchain it is. In this case, we're using Ethereum. But if you wanted to use, you know, Flow, Algorand, Metas, anything like that, you would simply change this to Flow, change this to Flow, and then you would have access to Flow. And you can, you know, simply put that here as well. And then the network, since we're on test net, that's just network.testnet. And then this is where you would put in all the modules that you are using for this application. So a quick thing that I actually forgot to mention would be the battle functionality. So if we go here to battle, it actually chooses randomly which tribe will win this battle. So if I go ahead and start this battle, we can see this pop up. We'll go ahead and confirm the transaction. And then a fun thing I like to do is come back to this later so you guys can go ahead and guess in the chat which tribe do you think will win this battle and then we'll come back to it to see if you guys guessed correctly. So if you come back to to the modules array, this would just be the array of all the different modules that you want to use right throughout your application for those specific functionalities. So in this case, we're using tribes and then the battle functionality, which would be the random pick. So that's the array that's that's being thrown in right there. And then this tenant ID, which essentially this is the structure that is within all of hyperverse. So you can think of tenant ID as some sort of storage of data. Right. So linked to an address. So in this case, you're probably thinking, you know, how come those tribes were the only ones that that showed up? What if I want to create my own tribes? So you can actually do that here. So right now it's reading from this address's tenant and showing those tribes. Let's go, Alchemist. Yeah, so right now it's showing those tribes. But if you wanted to create your own instance, there's actually a route for that as well, called setup. So you would just go to slash set up the connector wallet and you would just upload your own file, your own name, your own description, and you can create your own tribes. And then you would just update this tenant ID to the address you used to create those tribes. And then it would showcase those tribes instead of these default tribes. Right. And then right here we have the hyperverse provider, which we have wrapped within the entire application.

So now we have access to the hyperverse. I think Mage will win this time. We'll see, we'll see right after we go through how exactly tribes is working. So let's go ahead and and look at index.tsx. So this is obviously the first file that is being hit. And we see that the first component that we are bringing in is the nav bar. So we can go ahead and look at that. So we can go to components and Nav. So you can see here that the only thing that is being showcased is this connect component. So we can see, you know, how exactly and where are we getting this from? You can see this one line. Right. We're extracting it from this user ethereum hook. And then where does this user theorem come from? We're just importing this from the hyperverse. Right. So this user ethereum hook gives us access to this connect functionality. This a bunch of wallet functionality to read the wallet address, all that stuff. So you can go ahead and see all the different functionalities that you can call. So we can do in this one line is just extract the stuff that you want from the user theorem hook. In this case, we want this connect component, which handles the whole rainbow kit UI of the actual connect modal popping up, all that stuff for you. So all you have to do is render this and then it'll do everything for you. Once you know a user clicks on this connect wallet button. So pretty cool, pretty easy. I mean, in three lines, essentially, you have, you know, the whole functionality of authentication in the Web3 world done for you. And you can see the confetti here. It looks like there you go. Mage one. So let's go back over here. And then let's go to the index dot TSX file.

So after we showcase the Nav bar, we then have, you know, once there is an address that we can read from, which again is coming from the user Ethereum hook, right. So user Ethereum hook which is extracting the accounts address and then reading from this address and saying, you know, if this address is available, then showcase join a tribe button. Otherwise, you know, if you're already in a tribe, then view a tribe button. So here we'll see all this is doing.

Once someone clicks join a tribe is that we're going to all dash tribes route. So we'll go ahead and go to that file and see exactly how are we fetching from the chain. So we can go here, click here. How are these tribes actually showing up? So if we go here, we can actually see that we're mapping through data, right. We're mapping through something called data. And then we're showcasing these images, which would be the tribes that show up. So where does this data actually come from? So we can actually look up here, find where data is coming from. And you'll see right here in this line that we're calling this get all tribes function on this tribes variable. So you can see right here where are we getting this tribes from? We're getting it from use tribes hook.

So essentially what this use tribes hook is doing, what we have imported right here, is it's essentially a bridge between the smart contract that the smart module code and then the client side, the front end code. So it's extracting. As you can see, there's 15 more functions. It's extracting all the smart contract functionality into JavaScript. So now you can call with just JavaScript the functions that you want to, you know, read, fetch, update, put whatever you want on the block chain instead of you having to know anything, you know, no smart contract code needed at all. You can just do it with with JavaScript.

As you can see here, all we are doing is calling this get all tribes function. So obviously that will get you all the tribes that are available. And then we're just extracting that in data and then using that to to map. So here we're just mapping through data which has the list of all the tribes that are available and then showcasing this, this image with the image URL, the name and all that stuff. And then you can see here what actually happens when we click on a tribe. We're joining a tribe, we're updating information on the block chain. We're going to call or we're calling mutate on this on click. So right when someone clicks, we call this mutate function. Now, what is it? What is that doing? Right. So we go up here and you'll see it's a very similar pattern. Right. All we are doing is calling this join tribe function right on tribe. So, again, it's using this use tribes hook and then it's figuring out which functions do we want to call within this use tribes hook, which has already extracted all the functionality for you. You can go ahead and do join tribe, get all tribes and all that good stuff and automatically do everything for you. The Mana Base wallet pop up, the confirmation of the transaction updating information, all that stuff done for you. Cool.

So then after that, we'll go ahead and go to the my dash tribe route. So let's go ahead and look at that. And we'll see right here that it's, again, very similar pattern. Right. We're importing the use tribes hook. And then we have this tribes variable for the use tribes hook. And then all we are doing is getting the tribe that getting the tribe information that the user is in currently. So get tribe by account. Which account that the user is currently in. Right. So they've already joined a tribe. So now we're just getting the tribe that they're in by accessing the their account address and just reading which which tribe they're in. So that will go ahead and give you this data. So then when we go down here, we can just display that data like we had shown earlier. Right.

So we'll go ahead and click this. This is all being done for you. We click confirm. And then when it showed the, you know, the image of the tribe, the name, the description, all that stuff is literally just being done by calling, you know, data, name, description, all that fun stuff, which actually popped up right here. So there we go. And now you can you know, you probably assume that, you know, how does this leave try button work? Very similar to to join tribe. So we go ahead and we can see that here, this leave tribe button. What do we do when someone clicks on it? We call this mutate function. What does this mutate function do? We call leave tribe on this mutate function and then go back to the home route. So that's how all of tribes works.

So now we can actually go ahead and look at the battle functionality. So let's go ahead and click confirm here. And then when we go to the battle functionality, how exactly does this work? Right. So this is entirely new smart module, right? So these are two smart modules put into one application. So this is an example of showing you can put in tens and hundreds of smart modules if you really wanted to, throughout your application to do several different aspects. So we can go ahead and look at that. So obviously this is where the first file was. So we imported the random pick smart module. So we can see that here. All random pick is doing on the back end is using something called an Oracle. And the most popular one is Chainlink. So that's what it's using. But essentially because the blockchain is deterministic. You can't do a random number on the blockchain. So we have to use an Oracle, which essentially is a bridge between the real world and the blockchain. So it can actually fetch things like sports scores of the weather information, all that stuff. But one of the most important things it can do is is generate a random number. Right. Since that's not possible on the blockchain. So that's exactly what we have here. So we're using this random pic smart module in this battle dot tsex file. So we can see it's very similar pattern again. Right. We're using this use random pic hook instead of the use tribes hook. And you can see the functionalities that use random pick allows. So you can see the start random pick. You can see the get random pick. So you can assume how that's working and we actually have it all here. So all we're doing is essentially getting two random tribes and then choosing a random number, right. Zero or one and then displaying that tribe as as the winner. So we can see that, you know, it's doing get random pick. So it's getting the actual random number after we have started it. So the start random pick get random pick. So it's very similar functionality and pattern to two tribes. So you can see here that we're calling this random mutate on on one and two. The number is one and two to choose between one and two. And then we go ahead and show that tribe as the winner. Cool. So now that we have, you know, the entirety of tribes in this random pick module in this example DAP finish, we can go ahead and look at the ERC 721. So the essentially the NFT minting site and creation that you can build using just JavaScript.

So we can go ahead and look at that. We'll see the out of here. And obviously, if you, you know, LS, you can see that there's obviously other example DAPs in here as well for different scenarios. We have a stake on rewards and all that stuff. So but for today's sake, we're just going to go ahead and look at the ERC721. We'll go ahead and run Yarn Dev since I've already run Yarn previously. And then we'll go ahead and refresh this and get that started. Cool.

So now what we have here is basically displaying all the several different functionalities that are possible with this ERC721 smart module. So this is the example DAP that showcases that easier for you. So you can see how you can mint an NFT. You can actually turn it on to a public mint instead of private mint. Right. So right now, only the owner of the creator of the NFT can go ahead and mint and actually mint for someone else or transfer the NFT to someone else or something like that as well. But you can see right here this create instance. Right. So just like how I discussed in tribes, if you wanted to create your own tribes, you would have to create an instance. You create a tenant ID, which is essentially just your wallet address. You with your wallet address, you create an instance and then you update the code with the tenant ID of your wallet address. And then will actually read the information from there. So we can actually go ahead and do that. So I believe already created an instance of a token on one of my accounts. We'll go ahead and look at that first and then we can create one from from scratch. So Shane token, if we switch to this and we'll go ahead and connect. Let's go ahead and connect Shane token. Click next, click connect. And then you'll see here that this updated to, you know, you already have an instance. So it knows that I already have an instance that this address already has an instance. It's already created in ERC 721 token. And then this is where we can actually go ahead and mint or get the balance of and all that stuff. But before we even do that, we have to make sure that we update the wallet address in the code. Right, because otherwise it's not reading it's not looking at that information. So we can actually get proxy here as well. And it shows the proxy contract address that it's actually on as well. So that's pretty cool. So let's go ahead and go to the codes. We go to the ERC 721 module. We go to pages. We can go to the App.tsx. So this is where the default wallet address is is put. Instead, we want our Shane token wallet address. We can go ahead and copy this and put this in here. So it's reading from that information, paste it in their safe refresh. And then we'll just let it load a bit and then and then it should show up. But this is where we can go ahead and mint something new. We can get the balance of an account so we can see, you know, the balance of the account. Currently, we see that it's zero. Let me go ahead and actually refresh this. There we go. So it has you already have an instance.

Now we can see that it's updated to two. Right. So now it shows that, you know, this user is already minted two of its own tokens. We can get the owner of we can put the token ID. So the first mint or the second mint, anything like that. You just have to put in the ID of the actual token and then we can actually mint here. So if I'm minting to this address, I can go ahead and click mint. And you'll see that, you know, very similar. Since we are putting information on the blockchain, we would go ahead and click confirm. So we can go ahead and do that as well. So there's the transaction going through. And then when we go ahead and actually look at this mint functionality, we can view this on the block Explorer so we can see that as well so we can see where this is coming from. The contract that it interacted with, which we can see as well in this other tab. So we can see that this is the token that was created by Shane tokens account. It was called Shane codes and the token symbol was SC, and you can see the transactions that it interacted with. So we can see if we were to fetch a token ID, one or anything like that, then it'll do that as well. And then if we go ahead and transfer tokens, we can do that as well. So if we wanted to transfer to another wallet address that and which token ID we wanted to choose from, we can go ahead and do that as well. So now we can see that this token ID or this balance of actually updated as well before show, too. Now it shows three because we just mentored one as well.

So now we can actually look at the code a bit and see exactly how this is working as well. So if you can see here, the you know, obviously this is very similar. Right. Initializing the hyperverse. In this case, we're still using a theorem test net. In this case, we're just using the different module, which would be the ERC 721 module. And then we have our own wallet address as the tenant ID. So we can see that, you know, very similar. We're importing all three of these things. And then we're wrapping the entire application with our provider. And then we go into the indexed TSX file. We see that the first thing we are doing, obviously, is the nav component, which, again, very similar to what was in tribes. Right. We have just the Connect wallet button being displayed, which is right here, which does everything for you. So now let's go back to indexed TSX. We see this container component being rendered. So we can go ahead and look at that. And what this will show is all the different functionalities, all these different boxes that allow us to, you know, get the proxy address, get create an instance, do the mint, all that stuff. So we can go ahead and look at some of the stuff as well. So you can see here that they're split into two different folders, two separate folders. You can see the read function, the write functions. So obviously the ones that make us, you know, confirm the transaction where the MetaMask wallet pops up and the ones that are just reading, that doesn't require any transactions. So you can see when we're trying to do the balance of. Obviously, it's a very similar pattern again, right? So we're just using the USERC721 hook instead of the tribe's hook, instead of the random hook, all that stuff. You can see that there's 15 other functionalities that you can use in this hook that already extracted all the smart contract functionality into JavaScript for you. So now you can just call all that in JavaScript. This is where we're doing that. And then we're just doing get balance of whichever address the current user has. So that's where we're doing all that. And then data is where we are actually displaying it as well. And then we're just getting the address right. We just call that function get balance of the address. So we would put in the address, and then it would automatically do that function for us. And then get owner of, again, very similar. You'll see a very similar pattern here. We import the hook, and then we go ahead and call get owner of in this case instead of the other function. And then we're getting the owner of a specific token ID in this case, so we go ahead and call that and that will return us who the owner addresses of that token. So yeah, I won't go through all of this since it is, again, very similar functionality. All we are doing is just calling different functions. So in this case, for minting, we're calling a different function. You know, .mint. Transfer, we're just going to be calling .transfer and all that stuff. So it's very similar. Very easy to use. Again, you know, all done in JavaScript. Everything's pretty much done for you on the back end. All you have to do is just call these functions. Cool. So now let's get back into the PowerPoint. And now, so here is all the information on the Hyperverse and Decentology.

You can go ahead and join our Discord. There's actually a channel that showcases all the different applications that the community has built. And so it showcases all those applications on there as well for you to go ahead and take a look at, look at the repo, find examples. You can go ahead and, you know, tack on and choose what you like from those and build your own or do as you wish.

And then docs.hyperverse.dev, which is obviously very important for you to have handy. This goes over step by step of exactly what I showed you today of how to clone the Hyperverse monorepo and do that or start from scratch from a brand new Next.js application. It also shows the how to build a smart module if you are a smart contract dev as well. And then our blog posts, we have how to step by step from scratch, from a Next.js application. It shows how you can build the Connect Wallet feature, how to do the Chainlink random pick module. So it separates everything out. So it's much more simpler and easier to look at and understand. So that's all there for you as well.

So, yeah, you know, we are very excited to see what you guys build with this. I know that there are some smart contract devs in here as well and some JavaScript devs. So it will be interesting to see, you know, what you guys build down and what you guys like. Cool. So now I'll open up to questions if anyone has any. You can always hit us up on Discord or Twitter or anything like that. Whenever you guys have any questions or need access to something or anything like that. I know this whole record, that this whole thing has been recorded and it will be sent out to all the participants as well. Could share the links in the chat. Yep. I think we have someone from from Decentology that can do that as well. I believe it's just discord.gg slash Decentology. But correct me if I'm wrong, Sheeley. And docs.hyperverse.dev was shared earlier as well. And then our, our main website or homepage will just be decentology.com. And then you can go ahead and look at, you know, our blog post their hyperverse we also have a fast camps that are going to be starting soon so essentially what fast camp is is a mini boot camp where we kind of do similar to this and then you can go off and build your own, you know, ERC 721 minting website or whatever it is and we'll help you throughout the way with, you know, office hours and all that good stuff story has a question I believe she can probably answer that better as well. Are there any similar startups to sell or solid, yes yeah versus rolling your own. What are the advantages for us of using the hyperverse well, I mean, you know, first instance you wouldn't have to build all this from scratch there's a bunch of different steps to go about of, you know, building a smart contract and all that stuff but well, you know, for JavaScript as it's much easier right if you want to build tribes without the hyperverse, you're going to have to learn, you know, obviously how to build that smart contract learn solidity or whatever it is, and then, you know, put that up onto the ethereum blockchain and then connect that to your client side application and use it there. Obviously this is extracting it to much simpler way where you can just call these JavaScript functions, and you're just, you know, importing these like NPM modules, and using the functionalities that way, which are actually interacting with the smart contracts on the back end for you. What if I need to ask, add custom logic to the smart contract should I move all the business logic on front end. It's going to depend but I mean if if that logic, you know, make sense for someone else as well I mean I think it would be good to have a smart module that, you know, does that as well that that sort of functionality, whatever you're thinking of so that way, you know, other users could also then just use that smart module as well. If they want the logic that you know that that you want in a smart contract. We can just put in the discord link as well. I accidentally clicked on it. There we go, yeah. So someone just asked a question about use query. Cool nose answer to use query handles everything for you. Yeah, we're just trying to make it very easy and simple for for, you know, anyone to pretty much get a DAP up and running and, you know, whether it be less than an hour and I mean you just saw here that, you know, us, you know showcasing two dApps pretty quickly. And then obviously you can you can go in and you know customize it to yourself just by updating the tenant ID address. And then obviously you have your own custom, you know tribes DAP. So we've seen a lot of cool things that other people have built like, you know, chatting inside of tribes. So once you have joined a specific tribe. You can actually chat with your tribe members, so it kind of makes it a little social so that's a cool article as well. The how to build blog article would just be on our decent ology.com. And then there's a tab for blogs, so you just click that and there's several different things like you know how to get hooked up from the hyper to the hyperverse from scratch and there is you know how to build this authentication one there is how to generate a random number using the chain link module. There's that one as well. So there's a couple different ones on there. There was another, there's another idea for tribes as well.

Since we also have a stake and rewards module where users can can stake and earn rewards from a specific token you can try to integrate that with with tribes as well. So, you know, once maybe every tribe has their own custom token. And then once you have staked at X amount of tokens for that specific tribe you get some sort of access to, you know, maybe the access to the chatting feature or whatever. Access to learning more about the tribes or anything like that so there's different use cases that you can think of like, you know, obviously like a subscription model or something like that like a premium account, whether you have you know XML token staked to get a premium account or anything like that.

What might be some use cases to use the hyperverse novice. Yeah, so obviously anything that's interacting with on chain stuff so you know if you want to build decentralized, anything you can use our smart modules to interact with it with those several different functionalities, and you can build it, you know, just know by So that's, that's the good part. Yeah, so there's several different you know decentralized applications out there I mean obviously there's, you know, defy there's, you know, social apps that are decentralized as well just depends on obviously what sort of application, you want to build but, you know, essentially, our goal is you know you'll be able to build the first place that anyone will want to go to to build, even a decentralized application will be the hyperverse since it's so easy to get gets up and running. And you don't need to know you know the smart contract program language or anything like that. Correct.

Yes. So to what someone saying in chat is that. Am I right saying that to join a tribe etc I need to own Ethereum to pay gas for the transaction. Correct, yeah so any any transactions you would need to own, you know, Ethereum or whatever chain that it's on currently to actually pay for that gas fee. In this case I showed it on testnet obviously so you can actually get, you know, free Ethereum for testnet as well. I can actually drop that link in the discord chat as well to easily get and transfer you.

Are you planning to roll out to other blockchains? Yes. So any and all, you know, blockchains as they get rolled up to the Hyperverse will all be listed there as well in our packages folder. So right now we have you know Algorand, Metis, Ethereum, Flow. I think that's it. Correct me if I'm wrong, Sheely, but Avalanche there we go. Polygon. Yep. Cool. So for any smart contract devs out there there's also a kit that we've made it's called the builder kit. So you can essentially, it's basically like a simple packaged up smart module for you, like a template, so you can go ahead and create your own, you know, smart contract on there, and then it'll all have you know where to update and all that stuff that's all in the documentation. And we're going to be rolling out a video tutorial on that as well. Tomorrow, I believe, so you can go ahead and look at our YouTube as well for that, but essentially it's a templated kit for you to build a smart modules on the hyperverse so you can go ahead and create your own smart smart contract of pretty much anything you want, you know specific functionalities, and then do that as well. Thank you guys for being here. We'd love to see you guys in the discord. I'll pop in there for a bit right after this workshop as well. See if you guys have any more questions or throw all the links in there as well. So yeah, and I'm excited to see what what you guys will build on the Hyperverse, so keep track of our, you know, Twitter discord and YouTube will always be posting little snippets of even basic you know what the topics on there as well as well as on our Twitter. And then as well as tutorials. And then fast camp will be coming up soon so watch out for that as well. Yeah.