1. Introduction to Web3 App Development
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.
2. Building Smart Modules for Web 3.0
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.
3. Blockchain Basics and Crypto
Now let's compare the Web 2.0 and Web 3.0 architectures. In Web 2.0, the user's request goes through web server, API server, and database server. In Web 3.0, the request goes to a node on the blockchain. The blockchain workflow involves broadcasting the transaction, validating it, adding it to the blockchain, and making it permanent. Private keys are derived from random numbers and should never be shared. Public keys can be shared for transactions. Blockchain accounts are derived from private and public keys. An example scenario involves signing and receiving a message without sharing the private key.
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 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.
4. Digital Signatures, Wallets, Fees, and Token Types
It's important to note that blockchain wallets are only there to secure the storage for private keys and sign transactions. Transactions with very low gas are likely to be ignored, and higher gas fees result in faster processing. Fungible tokens are interchangeable, like dollars or bitcoins, while non-fungible tokens (NFTs) are unique, like cars with specific history and data.
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.
5. Demo of Web3 Application
Let's see a demo of a Web3 application. Go to docs.hyperverse.dev and navigate to the build Web3 apps section and environment setup. You can start from scratch or use the Hyperverse Monorepo. Clone the repo, go to the Tribes example dApp, install dependencies with yarn, and run yarndev. The example dApp allows users to join, leave, or create tribes on the blockchain. Connect your wallet, join a tribe, and confirm the transaction in MetaMask.
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.
6. Confirming Transactions and Starting a Battle
This part covers the process of confirming transactions, viewing them on Block Explorer, updating information on the blockchain, and starting a battle between tribes. The code is explained in more detail later.
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.
7. Initializing Hyperverse and Modules
We import blockchain-specific stuff and initialize the hyperverse with the desired blockchain. We can build on multiple blockchains by adding the necessary modules. The first module is for tribes, which allows creating, joining, and leaving tribes. The second module is for the battle function using chain link. After initializing the hyperverse, we wrap the entire app in the hyperverse provider for access to its nested components.
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.
8. Connecting Wallets and Retrieving Tribe Data
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.
9. Joining and Leaving Tribes, Creating Custom Tribes
We showcase tribes by mapping through them and allowing users to join. The mutate function handles the join tribe functionality, including MetaMask integration and updating the blockchain. After joining a tribe, we can read the tribe's information using the get-tribe-by-account function. The data includes the tribe's name, description, and image. The leave-tribe functionality is similar to the join functionality, calling the leave-tribe function on the use-tribes hook. Changing tribes is possible by creating custom tribes using the tenant architecture in Hyperverse Smart modules.
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.
10. Battle Functionality and ERC 721 Smart Module
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. Now let's look at the battle functionality. We're using the random pick smart module to handle this. It allows us to randomly choose a number and determine the winner between two tribes. Now let's move on to the ERC 721 smart module, which showcases how to create and mint your own NFT. You can create your own instance of an ERC 721 token and manage it using the app.tsx file.
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 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.
11. Creating and Minting Tokens
In this part, we'll create a brand new account called Shane token and request test ETH from faucets.chain link. After refreshing, we'll create a new instance with the token name 'Shane codes' and symbol 'SC'. We can confirm the transaction and view the pending status on Ether scan. Once the instance is created, we'll mint the token and ensure that we're reading from the correct address by updating the tenant ID parameter.
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.
12. Minting Tokens and Public Minting
Now we can mint the token to our own address and see if the balance updates. We can view the transaction on Block Explorer and see the interactions with the contract. The ERC 721 token transactions confirm the creation of the token. We can transfer the token to another wallet address and toggle between private and public mint. This allows us to build a public minting NFT site without writing smart contract code.
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.
13. Other Modules and Resources
We have other modules like ERC-20 tokens, staking and rewards, and support for other blockchains. Check out our Discord for examples of what others have built, including a tribes module for commenting and chatting. Visit docs.hyperverse.dev for step-by-step guides on building web3 apps and our website for blogs on authentication and other features. Feel free to ask questions on Discord or Twitter. We're here to help and support other blockchains in the future.
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.
14. Building Applications with Smart Modules
15. Transitioning to Web3 and Smart Modules
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.
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.