How to Build Front-End Access Control with NFTs

Welcome everyone, and today we are talking about unlocking digital ownership and what this means. We are talking about how to start accounts using blockchain technology. And by the way, prepare your computer because we are creating a full application here, and I'm sure that you can do this with me. I'm doing this step by step, so slow, and I'm guaranteeing all the steps with you to be sure that you can do this with me.

Let's introduce myself first. You can call me Sol, but my name is Sol Enxigueros and I am a Developer Relations Engineer at Chainlink Labs. And Chainlink Labs is a company focused on bringing the connections between blockchain and everything that is not in a blockchain. And by the way, we are talking a bit more about the blockchain today. These are my contacts, and I am from Brazil, but now I am in Amsterdam because I'm here. You have here the ATALC in the React Summit and the JS Nation as well. So I'm ready here to meet some of you if you came to the event as well.

So let's start with the real content. And we are starting, this is an overview of what we are seeing today. We have two hours and we can do an amazing application in these two hours and do this together. So we are starting talking, what are NFTs, digital access, some use cases related to this development environment. We are creating a smart content here. Wow. And then we are connecting this smart content with the front end that we are building. And what you can do with this. What can be the future. Let's see. So I'd like to invite you now to go to this link. So I will be adding this link for you now in the chat.

And this is a collaborative path. Everyone can write together here. The same way you can delete everything, so be careful. And my first question to you here is what's your name? I am Sol and I came from São Paulo, Brazil. And you, I'd like to know a bit more about you. Hey Mariano. Welcome Mariano. Good to see you here. Wow, you are from Spain. Yes. Valencia. I'd like to know Valencia. I didn't know yet, but... Hablo castelhano. Podemos hablar, después. And we have Mihy, I'm not sure if I know how to say your name from USA. Amazing. And Asanka from Sri Lanka. Wow. And I don't know how to say your name. And Stoke did this from Cyprus. I did my master degree in Nicosia in Cyprus. And Nima, you are from Belgium. Wow. I'll be in your place in July as well to another conference. And I'm so excited to have all of you here with me. And you can see that we can write in the same line. So be careful with this. But we are together here and I mistake some spaces here. And we are almost done to go forward. Oh, we have Olek from Ukraine. Wow. Marco from Italy. And Harold from India. I was in an amazing hackathon in India last year as well. And Marius from Italy. Wow, welcome everyone. I'm so happy, so glad to have all of you here and prepare to create an amazing application with me. So let's move forward.

This is our basis. So every link that I may open on my computer, I'm sharing here with you. Every code that I'm doing, I will add in this collaborative pad how you can do this with me. So we are together all the time. Let's come back to our presentation a bit. And first of all, what are NFTs? We used to say that an NFT, it's an asset. But this is a unique digital asset. And this asset is based on blockchain. And what means based on blockchain? What is this like? We are talking about a different kind of technology where we have immutability. And we used to say that this is a trust environment, especially because when you have some transaction, some asset record in a blockchain, you cannot change this anymore if you don't have the permissions, if you don't have the right to do that. And when we talk about the many blockchains, we are talking about a public environment, a transparent environment. So blockchain brings to us more transparency and a place that we can trust a bit more. And we can say that blockchain is like a chain of blocks. And yes, we have blocks. We have the transactions in the blocks. Transactions can be like to create NFTs, to transfer NFTs, to do whatever they like to do with some asset over there. And every transaction, it's signed by an account. And on this way, this is tamper-proof. We cannot manipulate this kind of account as well. And this is the basic. So how can we use blockchain and NFTs to access something, to access an account? When you talk about traditional user access, we are talking about some user and some password. But when we talk about NFT-based access, we are talking about access made by your identity in a wallet. And you must sign a message or sign that you are the owner of this wallet to have this access. When we talk about sign something and proving that we are the owner, we are talking about managing some public keys and private keys, like imagine that you have a bank account and only you know the password. It's stuff like that. But this is in a way that, because it's in blockchain, another point related to blockchain, blockchain is decentralized. It means that it's not controlled by only one entity. And in this way, we can be sure that your account will not be blocked by a central entity, for example. And this is the main difference and one of the advantages of have accounts on blockchain. We are in a decentralized environment. And you can be sure that we are not blocked.

We are not being compromised by a central entity. And, OK. I have more to talk about this for you. But let's go to the code. Let's do this first. And then we can understand better what you can do. So this is what we are using now. React and Next.js to create our user interface. Also, we are installing a package, called VM, to connect to the blockchain. We are using Solidity. This is the language to create smart contracts. And also, we are deploying this in a real blockchain. And we can say that it's a EVME chain, Ethereum Virtual Machine chain, a blockchain compatible with Ethereum. And the smart contract itself, you build it. So this is the overview of what we are doing now. So in order to follow me, this is a GitHub. So this is the first point that I must share with you in our path. So we have all the content here. It's typed by spec to you as well. And remember, if you are not here yet, come to our, join our path. And here, your name, your city or country. And I'd like to be with you here, OK? And let's go.

First step, I must start the blockchain part first. And I must have a wallet. Remember that we talk about wallets. There are different kinds of wallets. And we are using a wallet based on web, as well. It's an extension for my browser. I am using Chrome now. And I am in a Windows computer, so you know what I'm based here.

This is the way that I can install my wallet. And I just uninstalled to do everything with you from zero. Let's go. Go here. Remember, everything will be in the path. And also here as well, in the Hello World part. I have this related to the MetaMask. And remember that we must use, we must have Node.js and a text editor. I'm using VS Code, OK? Let's go. Let's install MetaMask first. I came here to the download. I am in Chrome. So let's click on Chrome. And install MetaMask to Chrome. Click on Add to Chrome. And add extension. Wait a bit more. Almost done. It's installing.

And for me, it's so important to do this with you to be sure that I will not go so fast and you cannot follow me. I'm doing this in a way that you can follow me. So here we are. I love this fox going out the window. It's so cute. So let's agree with the MetaMask themes of use. And we are creating a new wallet. So remember, create a new wallet. OK? And agree. This is an important point for you. Like, when you have a bank account and if you lose your password, you can call the bank and get a new password, for example. But when we talk about wallets on blockchain, we are talking about your ownership. So you are responsible for your wallet. And you cannot lose your password. This is the point. Nobody can help you if you do that.

So it's so important to bring the responsibility to you and to understand what you are doing. And this is MetaMask is saying here that they cannot help you if you lost your wallet as well, and to be careful with some information as well. So I agree. I'm creating a password. Now I'm creating an easy password. And remember, MetaMask cannot help me, cannot recover the password from me later. And create a new wallet. This is an important point now. Let's secure the wallet. OK? How can I do that? The wallet itself is made by cryptographic. So we have, and this cryptographic, it's based on a set of words. We have 12 words. And now, I reveal these words. You can't do that. Never, ever reveal your words to anyone. I'm doing this now because I'm teaching you. And I hope you don't get my tokens later. I'm helping you. But anyway, I will not use this wallet later, exactly because I'm doing this with you and sharing my wallet. So to make your wallet secure, you cannot share your wallet later, OK? This is to learn how to do that. But here it is. So let me reveal my 12 words and copy it. Do the same and don't share with anyone, OK? And as the copy is, go to the next. And check if you really know, copy it, and save in a good place for you afterwards. But now, we are having test tokens on these wallets. It means that these tokens didn't worth real money.

It means that these tokens didn't worth real money. And this is fine. This is the way that we are learning. But even in this way, it's important to understand everything related to this. I think it is the way to do it. Yes, I'm right. Yoo-hoo. Now my wallet is created. Amazing. Let's go next.

And then I don't need to do this now. You can manage it, but only close this, OK? This is look in the upper part of my screen, count 1. This is my wallet. This is the address of my wallet. Let's copy the address of the wallet and share with our friends. This is like the public part, your account, if you'd like to receive some money. You are sharing your account number with some person. So this is my wallet address. I'm copying, and then sharing it with you. And I can check if I'd like to receive something from you. I may be receiving on this wallet. And also you, if you are receiving something, you are receiving on your own wallet. So share your wallet with me.

Hey, congrats, everyone. Amazing. I'm so happy that you are doing this with me. We are creating an amazing application now. Hey, Nikita. We are here. The only link that we must know is this. OK, this is the pad that we have now. And I will ask you to add your name here as well, and your country. And here we are. We are on Metamask. We just installed our wallet. And every step you'll be here, and you can follow us. Here we are. We have our wallet now. Let's close something that is not so useful now.

Another important point here, important. Remember that I told you that we are doing this in a testnet. A testnet is like a mainnet blockchain, but it's only for tests. And it doesn't have no real money, no real value over there. And it is a safe place to us to understand and to learn and not do. Even if you do something wrong, it doesn't matter because it's you learning, and this is normal. So let's enable the testnet here. To enable the testnet, I must do this. On Metamask, here in the top left corner where I have the Ethereum mainnet, I go to Show Test Networks. Show Test Networks. I enable this. And then I am choosing Sepolya. And here we are. Again, in the top left corner, go here. Show Test Networks, and choose Sepolya. Select Sepolya. And here we are. Another important point is we must have tokens in order to publish a smart content. And I can't help you on this. We are going to a faucet. So what's a faucet? A faucet is a place where we can get some tokens, test tokens, to learn and to develop applications without being in a real environment. It's a safe place to us.

Show Test Networks, and choose Sepolya. Select Sepolya. And here we are.

Another important point is we must have tokens in order to publish a smart content. And I can't help you on this. I have a way that we can have some test tokens and then learn together. So how to do that? We are going to a faucet. So what's a faucet? A faucet is a place where we can get some tokens, test tokens, to learn and to develop applications without being in a real environment. It's a safe place to us. If you are not doing this live with me, you can use the Chainlink faucet to get to the Sepolya. You must connect your wallet and then do that. But for today, I have a better one to you. Let's use this. This is a workshop faucet that I used to have only to the workshops. And this is the password. Don't share this password outside this workshop, please. And by the way, we used to update this password. So this is working now. Go to this. This is the workshop faucet. This is the password. And here we are. I am on the Chainlink Sepolya. And in the same way that I paste my address in the pad, I am pasting my address here. So let's get my address again. And go to the faucet, not this, to the workshop faucet and paste it. And OK. For now, we don't need a link. We are only getting a bit of it. And send request. So what has happened now? There are transactions that sending 0.5 test each to my account, to my wallet. And remember that I told you before, blockchain has blocks with transactions. And we can have transactions to transfer some assets. And this is what is happening now. If I close this and check my wallet now, you can see that I have 0.5 Sepolya each. Let's see, how are you? It's amazing to have you doing this. If you have more people doing, please add it here as well. So your name, your address. This is the way that I can know if you are following me or not. I'm so happy to do this with you together. And if you came here, and the password is not working anymore, use the official faucet. You must have a GitHub account here. So we have more steps. Because of this, I prefer to use the workshop faucet now. Oh, if you have this problem, don't worry about it. Because sometimes we are doing this from, this is not the only workshop that's happening now. If you only refresh this, you'll be fine. You can refresh and try again. OK, OK, great. Let's go forward. I think we are good now. So I have a wallet. I have some tokens on my wallet. Now I'm creating my first smart content. After that, we are creating the frontend to this smart content. By the way, what is this smart content now? Let's come back here a bit, only to understand what we are doing now. So this is the smart content that we are creating now. It's an NFT. Like I told you before, an NFT is a digital asset in a blockchain. And NFTs have unique IDs. It means that the NFT in a collection is unique. And it's unique in our blockchain. So this is the NFT itself. And we would like to create an access-based NFT. So if you have the NFT, you have the access. If you don't have it, you don't have the access. And by the way, when we talk about NFTs, NFT means non-fungible token. And why this is different from a fungible token? A fungible token is like a bill. Imagine 100 euros bill. If you change one bill for another bill, it's the same value.

It's exactly the same. But when we talk about unfungible things, we are talking about things that are unique. So if I have a token that's unique, two tokens didn't have the same value. Even they don't work the same. It's this. We are using NFTs that are unique. And after they have the NFTs, we are integrating using React. So this will be the second part.

So let's create the NFT. In order to create my NFT, I'm using another environment, an online environment called Remix. So let's go to Remix. Probably it's your first time that you are using Remix. So let's make your Remix better. Go to the icon number 4. And I used to count this first home. So 1, 2, 3, 4. This is the needed compiler. And enable the auto-compile. This will be useful for you in the future. Remember that? Icon number 4, Solidity Compiler. Enable the auto-compile. After that, let's go to the next icon, Deploy Anterior Transactions. And over there, we must connect our wallet with this environment in order to deploy our smartphone.

You can see here in the environment that I am a Remix VM. This is a blockchain simulator in the memory of the browser. I'd like to update this and select the injected provider. And you can see there. And you can see the meta-mask over there. It means that I'm connecting with my wallet that I just installed. And I have funds over there to create my smart contract.

And I have funds over there to create my smart contract. Here we are. In order to do that, I must authorize my wallet. So my wallet is asking, oh, are you authorizing to connect with this website, Remix? Yes, I am. So let's connect. And here we are. I am connected now. Oh. Starting to create our first smart contract. So I'm going now to the icon number 2, File Explorer. So 1-2, File Explorer. And I have here the button Create New File. And my file is colored openaccess.sol. It can be another name as well. And it seems that I already have one. It's fine. So where I am now? Remember that we have the Git box? I have already did everything in the hello world part, the MetaMask wallet. And we are here, in the Access Token code. And all of this code is on GitHub as well. And you can see that we are here. And this is the smart contract that I'm creating now. So we are on Remix. And this is my contract. OK. Let's go. I copy and paste. And, oh, what is this? This is squared for me. When we are copying and pasting codes to Remix, Remix used to alert us that you must be careful. You must know and trust the code that you are copying. And I'm teaching you so you can trust my code now. But if we are using this other codes that you find on the internet, please be careful. OK? And here we are. This is our contract. And because I enabled the compile, I have the green button here. My contract is done. I'm explaining this for you now. So what I have on my contract? My contract has this command called pragma, where I'm defining the version of Solidity that I'm using. OK? So it's 0.8.20. And different versions have different behaviors. So be careful to not use an old version. And I'm using, I'm importing a library over there from Open Zeppelin. Open Zeppelin, it's an audit company that they create some smart contracts that we can import when we are creating ours and makes our life easy. So let's use that. I'm importing some kind of NFT, the ERC-721. Wow, what is this? Let's understand this better. So when we talk about tokens, we are talking about standard as well. So standard is not something that you really must follow. But a standard, it's a suggestion to you to follow that in order to have a better communication. So our NFT is with this standard, ERC-721. And I added here how this is standard, how it is. OK? And also, I put some reference related to this Open Zeppelin as well. Let's learn more how to do that. The result from Open Zeppelin is so useful. If I came here directly, let's update to a better link for you. Here in the wizard, you can create some tokens in an easy way. This is importing Open Zeppelin and now the code from Open Zeppelin as well. We are almost doing that. OK? Let's close this and this, and come back to Remix. So what I have here? My contract is this kind of NFTs. And here you can see that I'm managing the IDs of tokens. So I have a collection. This smart contract is a collection of NFTs. NFT has a unique ID. And this makes the NFT unique. Here I'm initializing my NFT. So I'm only defining the name and the symbol of my token. And I have a function called grant access. And this is the function that I'm using to guarantee that the people who has this NFT, you have access to something that I'm defining. OK? This is the special access that I'm creating now. And what is the grant access? The grant access is to create a new token.

It's mint. We used to say that we are minting a new token to the sender, the account, the person who is calling this function. And this is the unique ID of this asset in the collection. So it's this. In fact, if you take off the comments, I can tell you that our contract, it's really simple. Our contract is the same here. It only has 1, 2, 3, 4, 5, 6, 7, 8, 9 lines closing everything. So this is an easy smart contract to you. And this is great, because this is the best way to learn is starting with a simple contract. OK?

Our contract is here. It's green. It's compiled. We are ready to deploy this contract. Let's go. Deploy and run transactions. So I came to the icon number 5 again. And in the icon number 5, now I must deploy. So come back here and deploy. And I am in the icon number 5 again. Click on Deploy. And if you are doing with me and if you like to have your token with me, I can interact with your token later as well. Let's deploy it. Here we are. I have my contract. If I scroll down here, icon number 5, Deploy and Run Transactions, scroll down until you find Deploy. And click. What am I doing now? Remix is creating a transaction that is being sent to Metamask. And I must authorize on my wallet to deploy this smart contract. And every time that we are sending a transaction to the blockchain, we are paying something to this. We call it a fee, a gas fee. Pay in the nativity token. In this way, we are using this poly8 that we got before in the file set. And this is the fee that I am paying now. And I am clicking on Confirm. And this is. Now I'm awaiting this big confirm it. Also, if I came here in the puzzle, it's dangerous I can pin my Metamask here and make it easy to see. And close everything. And you can see that the contract was confirmed. So my contract is created. If I come back to Remix and scroll down until this Deploy it, unpin it contract, this is my contract. So go here. And here you can copy the address of your contract. So in the same way that accounts and wallets has addresses, smart contracts also have address. So each smart contract has a unique address. And this is the address of our smart contract now. So I will copy it and sharing it to you. So if you'd like to do this and share it with me as well, I will be so happy. And I can interact with you. Yes, nice. I don't know your names. Minhi and Olek and Toh, Kittidis and Ivan. And Assanta. Well, I'm so happy for you. I'm so glad that you are creating your smart contract and follow the workshop with me step by step. And if you just arrived, remember that we are here in this collaborative pad doing everything together. Minhi, oh, perfect, Minhi. Now I know how to pronounce your name. So I'm happy, Minhi, that you are doing this. Amazing. Yes, we have our smart contract. And by the way, it's so important for you to save this address because we're using this in our front end. OK? Yes, starting to build the front end now. So let me go in here. This is the point that we are now building the front end. And we are using Next.js to create our front end. So first of all, open our terminal. Let's go. I think I have you on here. Here we are.

And I'd like to go to a specific, and let's make bigger for you. I'd like to go to a specific place. And over there, let's create a project. So the command to create a project, let's help you. It will be this. So I'm using this command now. And be careful. If you need to install some packaging, it's yes, it's OK. I did this before, so I'm not receiving this message. But I'm starting this now. And the name of our project will be this. So this is the project name. OK? Let's go.

So this is the command that I must run now on my terminal. I am in the terminal now. And project name, remember that I told you, next open token. This is our project name, next open token. Now I have some defaults here, but I'm using TypeScript ES. ES linked, yes. Tywin CS at, yes. Cessi directory, yes. Afterpay howtair, yes. Customize default import alias, no. And this is. So this is the configuration that I'm using now. And it's installing. I'm adding the configuration for you as well. So this is the configuration that you are using, OK? And after that, go to your project. It's still installing. If you have some doubts, you can write in the chat. I'm here with you all the time. Yes, it's starting. It's installing. It's installing. And this is a good point, good moment to come back to our slides a bit more to understand what's happening here. So in a few minutes, we are creating this CreateWalletClient. And you are using Veeam to connect with our account as well. And this will be the front-end implementation. We are using the access token address. That is the smart code that you created before. And this will be the front-end implementation when you create our component, OK? Let's see how we are now. OK, here we are. So I'm going to my directory, my folder now. Here we are. And let's install Veeam. And yes. So we are here now in the GitBook. We are installing Veeam. Here, install Veeam. OK. And then, update the next config. Let's do both of these. So installing Veeam, it's only this command. Let's do it. After installing Veeam, I will open my code on the VSCode, waiting the installation of Veeam, then. And then now, let's open on this. Let's open this on the VSCode. Here we are. OK. So where I am? We installed Veeam. And now, I open on the VSCode. With my project opened in the VSCode, I would like to update the next config and here. And I'm using some images. So it's important to update here to make the URL of my images traceable. I do that. I'm here. And I'm adding this domain over there. So this is a way to copy this directly. Then delete everything and paste. In fact, it's only this that I added in the middle.

This is to return that the Next.js can use it to get my image. And don't forget to save it. Next step, we must create a dotenv file. Because over there, we are in the before the style. Let's do that. Let's create a dotenv file. And you must add this in your file. And after that, update your smart contract address. My turn. Let's go. Create the dotenv file. Here I am. So in the main directory, create the dotenv. It's here. Then I am adding the next public access token address. And I'm updating this address with my smart contract address. Let's get my smart contract address. I'm happy that I have it here in the path. Here we are. Or you can get it directly on remix. It's the same. And update it here. Here it is. Nothing. Save the file. And remember, I created the dotenv file with this configuration. This is my smart contract. OK? Great.

Next. We can start the server. How can I start the server? For example, here on the VSCode, I go to the terminal. So let's go to a new terminal. And then, I'm using the npm run. You can see here, down. And it's starting the server. Let's paste this for you as well. So what are we doing now? Here. So we are starting the server. OK? On this page. Perfect. OK. When you saw that it's ready, go here. It's mine. Right. There you go. It's ready. You can see here, that it's ready. OK. So I can go to the local host, and see my website. Let's close the markings that I'm not using. If anyone is here. In a few minutes, I will have my website ready here. Let's see what's happened. You can see that it's compiling. And if you have some doubts, please let me know. Write in the chat. I'm here to help you, and to be sure that you can do this with me. Compiling, compiling. OK. Probably it's done. Let's see. Yes. This is my website now. Nothing related to my access yet, but back. Build our project. So next step. Let's see what's happening. Next step. Let's style it. Let's do some style.

So the idea is go to the search app. And we are updating this truth file. And I may follow the GitHub. So here you are, global CSS. So copy this and replace the content. Where is it? Search the app, global.css. Let's do a Control A to select everything and delete. Now paste the content that I got over there and save it. I must do the same with the layout.

So let's delete everything first. Go here. I did a global. So scroll down a bit. You can see the layout as well. Yeah, must be in the right. Copy. And do the same. Here we are. Let's see if there's something changing our project. Yes. Yes. The color changed now. It's fine. Mini, yes. We must have node at the minimum is 18.17. Yes. Sorry about that. You can try to install it now. No problem. This one is done.

It's time to add the constants. So here we are. I'm going now through the adding the constants part. Let's go here. Nothing again. The view is at the front end. We are here. Remember. And yes, sometimes this can help. Don't worry. And adding the constants. Here I am. OK? So I must create this constant abis.cs. And so if I go here to the search app and I create on this way I'm creating directly the folder and the file. Let's see.

Let's go. I'm here. And I am in the app. Go to the new file. Constants abis.cs. And here we are. I have the folder. I have the file. Then I can copy from here the content of my file. Is this copy? Come back here. Paste. And save. It's done. Now I'm creating in this same folder, I'm creating the image. So how can I do that? Here that I am directly in the constants now. Let's create the images.cs. Let's go. I'm here. Images.cs. And then I can scroll down a bit. And this is the images.cs. Copy. Paste. And you can see here that I have a base image, a URL from a base image, and from a VIP image. And this is the access that we are doing now.

In the same way that I'm updating, you can have your basic access or a VIP access. You can unlock any kind of content with this using the NFT on this way. And the images came from the ET. So let's see the image. It came here. You can see one and the other, not here. It came here. It is one of the images as well. No image for now. This is one of them. So we have two images over there.

And now it's time to do the connection with the blockchain. We are creating the wallet client. Create. So let's go here now. Create the wallet client. So I am in this part of the Gitbox. Create the wallet client. So in this first, I'm creating the lippwalletclient.js. In search, create this. Let's go. Not on F, on search. Now I am on search. Create the folder lipp. And then the walletclient.js. Here we are. This now has app and lipp, Wallet Clients. Over there, let's copy the content. So this is the wallet client. And I must explain this code very well to you. This is important. Let's understand this.

First of all, remember that we installed VIM to connect with our wallet. OK? Here I'm importing the create wallet client from VIM, also the custom. And we are on Sepoia. So we are saying that we are importing the Sepoia network. And this VIM window, it's a component import that do the connection with the wallet. OK? We have this function to do the connection itself. The transport, you check this. This is an old standard from blockchains that we use to connect to wallets, the window.Ethereum. Most parts of the client's Web3 wallets, they have this window.Ethereum. OK? And if we have it, the transport is going over there.

If we don't have it, we have an error that we must install it. We already installed it, so we are fine now. This, after installing, after connect and, like, identify your wallet, we must do the connection itself. So we create a component that is the wallet on Sepoia with that connection with using our Web3 wallet. OK? And this is. This is the component to connect our front-end with the wallet that we installed before, the metamask wallet. I think I must save something here. And this. Perfect. Next.

OK. It's time to create the access controlled content. And imagine that you can be anything that you'd like to have. So create the access controlled content. In the future, it can be some exclusive access that you'd like to do. This is the point. This is the access. So with this, what are we doing now? I'm coming back to the app. And I'm creating the components folder and the access controlled view. So let's do that. And we are in this point now, OK? Exactly this, create the access controlled content. So let's create this. And here, open here, and I must be in the app now, not in the library. Came into the app. New file. Paste. And you can see that now on the app, I have the content, I have the components. We just created this now. Inside the components, I have the access controlled view. And let's paste the content over there. Here we are. I came into the Gitbook as well. And copy the content. And copy the content. Paste. On my VS code. Here we are. Let's understand this, what you have. You are using client. This is basically on Next.js. You are using the image to select between the basic image and the VIP image. Remember that we did this before. This is the key for us. We must discover if the user has access or no. If it's granted the access or no, based on the NFT. So if it is granted, we are returning the VIP image. If it's not, we have the basic image. Is this. This is the access controlled view that you have in a few minutes. Let's move forward. We must create now. We must check for the access token. This is the key point. So how can I do that? And remember that you can follow the Gitbook directly. And I'm going to paste some parts in the pad to help. OK? But I'm here now. Checking for the access token. How can I do that? In the components, now I'm creating the grant access view. Let's do it. So here I am in the components folder. And create the grant access view. Let's copy the content, this is. Then paste here. And let's explain to you what I have here. So here we are. You can see that I'm importing the VM. But this is the important part. I'm connecting my wallet. I'm importing the wallet client. I am getting the access, the APIs.

Let's look a bit at the API. API, it's application binary interface. And this is a part of our smart contract where we have the definitions of the smart contact itself. So if I come back here, and getting the constants part to the API, you can see that the API has all the information that I need to access some function inside in my contact. My contact will have like a balance dot. This is a read function. And they must have the address over there. Or I have the grant access. This is the write function. I'm writing a transaction. And I don't need to pass any parameter over there. So this is the things that I must have in the API to connect, to communicate with my smart contract.

And let's come back here in the grant access view. And over there, you can see that I am also importing the control view that is showing the VIP image or the basic image. And I am only controlling the state of everything here. And here you can see that I'm using the smart contract access, the address of my smart contract. If not, we have this that was deployed before. You can use that as well. And we are doing the connection first. And I'll also get in the information over there. Here is to grant access. We can connect. We can grant access. And it seems that this is good. Let's move forward.

Now it's time. We are almost done. The last point is to update the main page. Let's do that. How can I update the API? I like this. Yes. Oh, I like this image as well. Let's see your image. Oh, so cute. I love your image. Yes, I like you. Yes, maybe you can change. You can use this image. It's so cute. So cute. I love it. And in fact, I'll change mine. I really love it. It's not changing our GitHub, but I can change here. It's cute. And I love when the students like you are interacting with me. It is so cute. So let's come back.

We must update our main page, the page.cfx. Here we are. In fact, the best is to delete everything and then update the new content. It's easy. Go over there. Update the main page. We only have this now. Let's understand what we have here. So what I have here? I'm importing my main content. Everything is on this component, the grant access view. And it's only this. I'm doing some styling and grant access view. It is done. Let's see if it's working. Fingers crossed. Let's go. Maybe I must update. Probably yes. Yes, also cute. I love it. And OK, we are waiting. We don't have access. What can we do now? First of all, let's connect our wallet to discover if you have access or no. Maybe even connecting you don't have access yet because you don't have the NFT. Let's go. Connect wallet. And you can see here that I'm connecting my wallet. And like we did with Remix, we're doing with our application now. So we are authorizing our application to interact with our wallet. This is the goal. And let's see. Probably I am connected. To be sure that I'm connected, I can come here and close it. Yes, we don't need this now. But here you can see that I have a green button over there, and the account one is connected. It's a bit small, but I think you can see. OK, I am connected. I still don't have access. What am I doing now? Oh, I'm connecting to the account. What we doing now? Any grant access. Imagine that you can have some conditions to do this. Maybe we must pay. Maybe your access is based on the time, and you have a one-month access, or a one-year access, or one day. Or in order to have access, we must have another NFT, whatever. Or we'd like to be sure that you have access, and we must have this NFT, and also check the weather in your city, and check some API that's not on blockchain. It's possible as well. But let's do this. We must grant access just now. I click in the Grant Access button, and now you can see that I'm sending a transaction to the blockchain. I've granted my wallet. I'm only authorizing my application to interact with the wallet. Now I'm sending a transaction to the blockchain to mint a NFT. And this NFT, you give me the access to this content. OK? Confirm. I must wait. My transaction will be confirmed. And again, close it. It's confirmed. You can see here a contract interaction confirmed. OK. So if I came here, I'm not updating nothing automatically. So if I came here and refreshed my website now, my application, I'm back. I'm not updating anything. I'm not updating anything. Refresh my website now, my application. I must connect the wallet again. Let's connect. Yes! Now I don't need the grant access anymore, and I am a VIP. I have access to amazing content that I could not see before. And imagine what kind of content you'd like to share with our audience.

We can use this to create any kind of account. This is a new way to access content, to create accounts. And I think this is really, really cool. And what's happen if I have another wallet? Let's see. I'd like to change my wallet now. So, OMETA Mask. When I have the account 1, in the arrow down, I may add the account and add a new account. Let's call it Account 2. Create. And this is the Account 2, and I even don't have it separate. I have nothing here. And if I came in here, I can see that Account 2 is not connected. So I let's see here. You can see that is not connected. And let's connect to wallet. But seems that's connected with my first account. Yes, I must connect. Yes, I must connect with the second account as well. I'm connected. If I refresh again, you can see that this account didn't have access to this NFT. And even I cannot have access because I don't have any token on this wallet. So nothing for now. Let's think in the future how you can give access and tokens to someone new that is starting and didn't have tokens yet. We can do that. Let's think in the future.

Another point that I'd like to do, I'd like to access your token, not mine. Let's see. So if I come back here and get your content, like meaning I'm using your content now. This is yours, not mine. So if I came here and go to the.env and use your content now, not mine, save it. Also I'd like to come to my account 1 that I at least have money over there. I have some tokens. And refresh here. Connect to my wallet again. And you can see that I am in the mini NFT now. It's not mine. So her content is controlling the access. It's not my content anymore. So I can click in grant access. And I'm minting an NFT that is not my NFT but her NFT. And we have these running locally. But imagine that if you are having these, I will feel public with these. We can interact with the others as well. Let's see. Probably it's confinement. Connect. And yes, I am a VIP now on Mini's content as well. Oh. So cool. So cool. This is interesting because you saw that I can even access content from other people as well. And Mini is in USA. I am in Amsterdam now. I am in the Netherlands. And I can access this around the world. So this is so cool. And if you have any doubts, let me know. And I am going forward with the content. I have a bit more to share with you.

So a recap of what we did. This is the NFT. This is so basic, so easy. Remember that this is the version of Solidity importing a library that is audited, that we can trust. Create our content importing this library. Manage it to have a unique token IDs. Create the name and the symbol of our token. And have the grant access function managing the IDs and the minting the tokens. You can create the revoked access. You can do other things late with this. But this is our basic smart content. And this is Solidity, the language that you can use to create smart content on EVME blockchains, blockchains compatible with Ethereum. And this is the way that we interact. So we have the wallet client to do the connection itself. And this was the front-end implementation where we are getting the address of our smart content, publish it, and get everything inside that. And the front-end, this is the key point to discover if it is going or no, the access.

And oh, I have some question here from Alec. Oh, Alec, yes. Oh, yes. Alec, maybe it depends on the kind of application. Make things to have these on Ethereum mainnet used to be more expensive. I totally agree with you. But in the same way, when you talk about blockchains, we have a lot of what we call the layer 2s that are other blockchains that they are faster. They are really, really cheaper, like 100 less than Ethereum. And you can use this kind of blockchains and have only some validation on Ethereum as well. So today, there are many solutions to use blockchains in a very cheap way. Yes, and this is a really amazing comment, Alec. You are really right. But we have solutions to do that, and it's easier and easier to use blockchains, other blockchains at least.

Okay, and we're going to see this live. We have a different, so if they came here, it would be here for you. Let's go to the end. And I have this public here for you. And you can see that this is the old image, and the code is here as well. We have an extra button with the code because it is live. And I can connect my wallet here. And my wallet is not... I created this wallet with few lives, so it's totally new. And probably I can refresh. Oh, I'm not connected. No worries. Grant access. Now I'm minting the token to my wallet. And after that, let's see if I am a VIP in the real application. It's pending, so it's not confirmed yet. We must have this access here to have it confirmed. And I have one here, another in the chat. So I can talk with you. It's confirmed it. So let's go, refresh. Connect. And what I did wrong. You'd be right. Let's refresh again, because probably I did it. I think I have the access. But I think I have it... When I'm using the real app, I have some problems with the cache, and I could not really refresh this. Let's see if my wallet is connected. Ah, probably I had some problems with the connection between this and the others. Because both are the same, maybe. Let's see. I may take off my connection here. This connected. Okay, I'm not connecting anymore. Let's see if now I can give it the access, the right access, yes. Ah, now yes. Okay. Now I can do the grant access again. Okay. Refresh, grant. I think it's not yet spending. Let's wait this. And okay, anyway, let's go a bit forward. What are the possibilities of this? What do you think you can do with this? Do you have any idea? I'll present some possibilities to you first. This is in a few minutes. So, some examples related to this. I have some here. Imagine, do you know that the NBA used NFTs to create some dynamic NFTs and this is for each player in the 2022 NBA playoff? And this was a collection of NFTs. So, imagine that you can use this with 240 players and we have 30,000 NFTs, and this was really, really cool with the players. And what about some monster, I will talk about the fish a bit later, okay? Don't worry about that. So, what about a game with monsters, cute monsters, I think. I like that. They are so cute, but they are monsters. And I added the link here that this is a use case for you, how they use NFTs as well. And this is so interesting for you too. And also, what about to use this in real state? Did you think about that? And I have here like an article for you and I can see how you can have a tokenized real state.

And it's interesting that how you can do that. It's like an NFT. So, NFT are unique tokens. So, owning the NFT can be owning the property or transferring the NFT can make a thing in the property ownership, or you can have some critical parts like address or a unique identifier in the country, something like that. And even one important point, when we talk about NFTs, NFTs can be dynamic. Imagine that you are an NFT, I am an NFT. And why that? We are unique, we have a unique DNA, but we are not the same. We are being older day by day. I hope to not be fat, to not change too much, but I would change. And I am a dynamic NFT as well. And imagine that any person can be represented like an NFT and even to have a unique identity. And talk about unique identity, imagine that we can have a different kind of identities like we used to say that they are the sole bond NFTs. This is another standard where we can't transfer the non-functional tokens or we have some rules. Like if it's your identity, you cannot transfer your identity to another person. So we can have different kinds of NFTs.

Okay, let's come back here. If you'd like to learn more, I just added a lot of links for you to learn. And also you can go to our developer hub, you can see some use cases over there and videos and more tutorials. And we have some bootcamps, starting from zero for beginners, more not related to the front end part that we are in React conference in the JavaScript conference. So you are expert here, but the other part you can learn more. So related to the blockchain stuff, you can learn more in the bootcamps. And let's come back and talk about this. Where does the thesis go? So when we talk about blockchain, the blockchain has the transactions in the blocks. So in order to these transactions being the block, we must have someone validating the transactions. We used to have to say that we have computers, the nodes that are validating the transactions. And we have people behind the nodes, managing the nodes. So the nodes must receive something in order to validate the transaction. And this is the fee. So we pay to a node validator, get the transaction and add the transaction inside a block in the blockchain. Before, did you see that I have some transactions that I had some transaction that was pending? In that moment that the transaction is pending, the transaction is in the blockchain, but it's in the main pool. It's like a waiting area, and waiting to be in a block. To be in a block, the node validator, you get my transaction, and you check if my transaction is valid. I'm doing something that I really can do in the blockchain. I'm trying to spend the same token twice. I'm trying to deploy as much content in a way that is not compiled in a successful way. I'm doing something wrong. The validator is checking that before adding my transaction inside the blockchain. And if the validator adds a non-valid transaction in the blockchain, he will be penalized. And in order to be sure that he will take care of our transaction, we must pay a small fee to do that. Okay, it's a small fee, but like Ethereum is the older blockchain with smart contracts, and is not the cheaper one now. But like I said before, we have some layers too. That is another layer on top of Ethereum that we have. It's like other blockchains, they are faster, cheaper, that they do a validation on Ethereum, but they itself are not Ethereum directly. They are compatible. And they are cheaper, so it's good to use them as well. And you can check about any kind of EVM compatible blockchains. Okay, but this is the fee is going to the node validator. This is the point.

And almost finishing here. So this is the presentation. Let's maintain this some seconds here for you to copy this. And I'm missing you here. If you have more questions, I'm awaiting your questions. One thing I'd like to say is, thank you so much for being here with me. And especially for doing the workshop with me.

It's like other blockchains, are faster, cheaper, that they do a validation on Ethereum, but they itself are not Ethereum directly. They are compatible. And they are cheaper, so it's good to use them as well. And you can check about any kind of EVM compatible blockchains.

Okay, but this is... The fee is going to the node validator. This is the point.

Okay, and almost finishing here. So this is the presentation. Let's maintain this some seconds here to you to copy this. And I miss you here. If you have more questions. I'm awaiting your questions. One thing I'd like to say is, thank you so much to be here with me. And especially to do the workshop with me. I really love you and have people interacting with me during the workshops. It really make me happy and feel that I'm making difference in our life because we are learning something together. And you can see here that I'm also doing special thanks to Richard and Valentina because they helping me creating this presentation and this workshop. I used to travel around the world to go to blockchain conferences, to do workshop in many conference. And sometimes I have people that help me creating the material and they help me here. And I'm so glad and special thanks to them as well. And this is, I hope to see you around. If you are in Amsterdam, if you are in person in the conference, I have some talks. I have a talk Thursday and another talk Friday. Feel free to come to talk with me and to be in real life as well. And this is, bye.