Enoch Promise

Welcome everyone. And today we are talking about unlocking digital ownership. And what does this mean? We are talking about how to start accounts using blockchain technology. And by the way, prepare your computers because we are creating a full application here. And I'm sure that you can do this with me. I'm doing it step by step, so slow, and I am 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 Solange Gaitos and I am a developer relations engineer at Chainlink Labs. And Chainlink Labs, it's 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 Talk 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. 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 about 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'm adding this link for you now in the chat. And this is a collaborative page. Everyone can write together here. The same way you can delete everything, and so be careful. And my first question to you here is what's your name? I am Sol, and I came from Sao 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. And we have Mihi. I'm not sure if you know how to say your name. You are from the USA. Amazing. And Asanka from Sri Lanka. Wow. And I don't know how to say your name. Tuukk did this from Cyprus. I did my master degree in Nicosias, in Nicosia, in Cyprus. And Nima, you are from Belgium. Wow. Are you being in your place in July as well, to another conference. And I am 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 of some spaces here. And we are almost done to go forward. Oh, we have Oleg from Ukraine. Wow. Marco from Italy. And Haro from India. I was in an amazing chapter in India last year as well. And Marios from Italy. Wow. Welcome, everyone. I'm so happy, so glad in having all of you here and prepared to create an amazing application with me. So let's moving forward.This is our base. So every link that I may open on my computer, I'm sharing here with you. Every code that I may do, 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 is a digital 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 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. 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 is signed by an account. And on this way, this is tamper proof. We cannot manipulate this kind of accounts as well. And this is the base. So how can we use blockchain and NFTs to access, access something, to access an account? When we 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, we have 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 something like that. So 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 be compromised by a central entity.And this is, 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. React and Next.js to create our user interface. Also, we are installing a package called the VM to connect to the blockchain. We are using Solidity. This is the language to create smart context. And also we are deploying this in a real blockchain and we can say that it's a EVM chain, an Ethereum virtual machine chain, a blockchain compatible with Ethereum. And then the smart context itself will be over there. So this is the overview of what we are doing now.So in order to follow me, this is a Git book. So this is the first point that I must share with you in our patch. So we have all the content here is typed by specs to you as well. And remember, if you are not here yet, join our patch and hear your name, your city or country, and I'd like to be with you here. And let's go. First step. I must start the blockchain part first. And we 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. And here we are. 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 patch 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. 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. Okay. 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 mean doing this in a way that you can follow me. So here we are. I love this fox going out the way. It's so cute. So let's agree with the MetaMask terms of use and we are creating a new wallet. So remember, create a new wallet. Okay. And agree. This is an important point for you. 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 like, lost your wallet as well. And to be careful with some information as well. So I agree. Here we are. I'm creating a password. Now I'm creating like a easy password. And remember, MetaMask cannot help me.

Cannot recover the password for me later. And create a new wallet. This is an important point. Now let's secure the wallets. Okay. How can I do that? The wallet itself is made by cryptography. So we have and this cryptographic, it's based on a set of words. We have 12 words. And now I need to reveal these words. You can't do that. Never, ever reveal your words to anyone. And doing this now because I'm teaching you and I hope you don't don't get my tokens later. I'm helping you. But anyway, I will not use them. I'm going to use them. And I'm going to use these tokens. I'm using this wallet later exactly because I'm doing this with you and sharing my wallet. So to make the other wallet secure, you cannot share your wallet later. Okay. This is how to learn how to do that. Here we are. So let me reveal my 12 words and copy it. Do the same and don't share with anyone. Okay. And after copy this, go to the next and check if you really know copy and save in a good place for you afterwards. But now we are having test tokens on this wallet. 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 you understand everything related to this. I think it is the way to do. Yes, I'm right. You know my wallet is created. Amazing. Let's go next. And I don't need to do this now. You can manage it, but only close this, okay.

This is, look in the up part of my screen, count one. 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 pass on. So with this, this is my wallet address I'm copying. And then sharing this 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.And if you just arrived, this is the pet we are here now. Amazing. Congrats. What happened with your account? You are there. I know that you are there. And this, remember that below the account, one, I have the address. And you click, I copy it and then I can paste it here.Another important point is, we must have tokens in order to publish a smart content. And I can help you on this. I have a way that you 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 you 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 the Sepoia. 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 use 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 chain of Sepoia 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 a request.

Okay. And here we are. Again, in the top left corner, go here, show test networks and choose Sepoia, select Sepoia. And here we are.Another important point is, we must have tokens in order to publish a smart content. And I can help you on this. I have a way that you 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 you 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 the Sepoia. 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 use 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 chain of Sepoia 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 a request. So what is happening now? There are a transaction that is sending 0.50. Test it 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.50. Let's see how are you? Amazing to have you doing this. If you have more people doing, please add here as well your name or address. This is the way that I can know if you are following me or not, OK? I'm so happy to do this with you together. And if you came here and the password does not work 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. If you have this problem, don't worry about it because sometimes we are doing this. 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. 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 you 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 all the blockchains. So this is the NFT itself. We would like to create an access based on the NFT. So if you have the NFT, you have the access. If you don't have it, you don't have this access. And by the way, when we talk about NFTs, NFT means non tangible token. And why this is different? And why is this different from a tangible token? A tangible 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. OK. It's easy. We are using NFTs that are unique.

And after the NFT we are integrating using React. So this will be the second part. OK. 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. Here we are. And the probably is 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, the Solidity Compiler, and enable the auto-compile. This will be useful for you in the future. OK. Remember that icon number 4, Solidity Compiler, enable the auto-compile. After that, let's go to the next icon, deploy and run transaction. 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 on 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 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 smartphone. 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, yes, I am connected now. Oh, starting to create our first smart contact. So I'm going now to the icon number 2, Fio Explorer. So 12, Fio Explorer, so 12, Fio Explorer. And I have here the button, create a new file. And my file is called openaccess.sol. The other 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 already did everything in the Hello World pack, the meta-mask 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. We have a little bit of a problem here. This is the smart contact that I'm creating now. So we are on Remix and this is my contact. OK, let's go. A copy and paste. And, oh, what is this? This is correct 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 you are using this with other codes that you find on the internet, please be careful, OK? And here we are. This is our contact. And because I enabled the Auto Compile, I have the green button here, my contact is done. I'm explaining this for you now. So what I have in my contact? My contact has this command called pragma, where I'm going to give you a name. I'm defining the version of Solidity that I'm using, OK? So it is 0.8.20, and different versions have different behaviors. So be careful to not use an old version. And I'm importing a library over there from OpenXamplin. OpenXamplin, it's an audit company that they create some smart contracts that we can import when we are creating ours, and it makes our life easier. 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 standards as well. So standards is not something that you are really must follow, but a standard is 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 how it is, OK? And also I put some reference related to this on OpenXamplin as well. We have to learn more how to do that. The wizard from OpenXamplin is so useful. If it came here directly, let's update to a better lib for you. Here in the wizard, you can create some tokens in an easy way. This is importing OpenXamplin and now the code from OpenXamplin as well. We are almost doing that, OK? Let's close it. Let's close this, and this, and come back to Rebix. 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 is my NFTs 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 have this NFT, you have access to something that I'm defining, okay? 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 a 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 is really simple. Our contract is the same here, it only has one, two, three, four, five, six, seven, eight, nine lines closing everything. So this is an easy smart contract to use, and this is great because this is the best way to learn, starting with a simple contract, okay? 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 into the icon number five, again, and in the icon number five, now I must deploy. So come back here and deploy. And I am in the icon number five again, click on deploy. And if you are doing with me, and if you'd 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 five, deploying transactions, scroll down until you find deploy, and click. What I'm 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 are paying, we call it a fee, a gas fee, paying in the native token. In this way, we are using this Epoli8 that we got before in the file set. And this is the fee that I'm paying now, and I'm clicking on confirm. And this is now I'm awaiting this big confirm it. Also, if I came here in the puzzle extensions, I can ping my Metamask here and make 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 deployed unpinned 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 thing. I don't know your name. Mini and Olek and Tolkididis and Ivan, and Asanka. Wow, 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, to remember that we are here in this collaborative pad doing everything together. Mini, oh, perfect, Mini, now I know how to pronounce your name. So I'm happy, Mini, that you are doing this. Amazing. Yes, we have our smart contract, and by the way, it is so important to you to save this address, because we're using this in our front end. Okay? Yes, it's time 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 it 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 package, it yes, it's okay. 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. Okay? 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. Yes. ESLint, yes. Tywin. ESLint, yes. Search directory, yes. Afterpay, yes. Customize default import, yes. 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, okay? 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, installing, 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 create wallet client and you are using Vim 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 contract that you created before. And this will be the front-end implementation when we create our component. And this will be the front-end implementation when we create our component, okay? Let's see how we are now. Okay, here we are. So I'm going to my directory, my folder. Now, here we are. And let's install Vim. And, yes. So we are here now, in the git report, we are installing Vim.

Here, install Vim, okay? And then, update the next config. Let's do both of these. So installing Vim, it's only this command. Let's do it. After installing Vim, I will open my code on the VSCode, waiting the installation of Vim, done. And now, let's open on – not this. Let's open this on the VSCode. Here we are. So, where I am. We installed Vim and now I open on the VSCode. With my project opened in the VSCode, I'd like to update the next config NGS. And I'm using some images, so it's important to update here to make this the URL of my images trustable. I do that, I'm here, and I'm adding this domain over there. So the easy way is to copy this directly, then delete everything and paste. In fact, it's only this that I added in the middle. This is to be sure that the next JS can use it to get my image. And don't forget to save it.Next step, we must create a.env file. Because over there, we are – and before the file, let's do that. Let's create a.env file. And you must add this in your file. And after that, update your smart contract address. My turn. Let's do. Create the.env file. Here I am. So in the main directory, create the.env. It's here. Then I'm 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. Or you can get it directly on remix. It's the same. And update it here. Here we are. Save the file. And remember, I created the.env file with this configuration. This is my smart contract.Next, we can start the service. How can I start the service? For example, here on the VS Code, I go to the terminal. So let's go to a new terminal. And then, I'm running the npm run there. You can see here down. Let me start in the server. Let's paste this for you as well. So what I'm doing now. So what I'm doing now. So we are starting the service. Okay? On this way. Perfect. Okay. When you saw that this red go here. It's mine. There you go. It's ready. You can see here that's ready.

You can see here that's ready. Okay. So I can go to the local host and see my website. Let's close the markings that I'm not using. Even save 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 right in the chat. I'm here to help you and to be sure that you can do this with me. Compiling. Compiling. Okay. Probably is done. Let's see. Yes. This is my website now. Nothing related to my access, your website. My access yet, but build our project.So next step. Let's style it. Let's do some style. So the idea is go to the third app and we are updating these two files. And I will follow the Gitbook. So style. Here we are. Global. CSS. So copy this and replace the content. Where is it? StirstyApplications.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 if the layout. So let's delete everything first. Go here. I did the global. So scroll down a bit, you can see the layout as well. It must be in the copy. And to do the same. Here we are. Let's make something changing our project. Yes. The color change now. It's fine. Minimum. 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 time is done. It's time to add the constants. It's time to add the constants. So here we are. I'm going now to the adding the constants part. Let's go here. Not in the agenda. Build the front-end. We are here. Remember. And sometimes this can help. Don't tell me. And adding the constants. Here I am. Okay. So I must create this constants, ABI.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, ABI.cs. And here we are. I have the folder, I have the file. Then I can copy from here the content of my file. It is 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.ts. Let's go. I'm here. Images.ts. And then I can scroll down a bit. And this is, this is the images.ts. 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 a basic access or a VIP access. You can unlock any kind of content with this using the NFT on this way. And the image is coming from the NFT.Okay. So let's see the image. If I come here, you can see one and the other, not here. If I come here, this is one of the images as well. No image for now. This is one of them. Okay. 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. So let's go here now. Create the wallet client. So I am on this part of the Gitbox, create the wallet client. So in this part, I'm creating the lipywalletclient.ts. Insert, create this. Let's go. Now, not on F on start. Now I am on start. Create the lipy, the folder lipy, and then the walletclient.ts. Here we are. Let's now have app and lipy. Okay. Wallet client.

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. So what I have here? First of all, remember that we spelled VIM to use to connect with our wallet, okay? Here I'm importing the create wallet client from VIM, also the custom. And we are on Sepolia, so we are in that we are importing the Sepolia network. And this VIM window, it's a component import that do the connection with the wallet. Okay? We have this function to do the connection with stealth. The transport, you check this. This is an old, like standard from blockchains that we use to connect to wallet, the window.ethereum. Most part of the client Web3 wallet, they have this window.ethereum. Okay? And if we have it, the transport is going over that. If you 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 Sepolia with that connection with using our Web3 wallet, okay? And this is, this is the component to connect our frontend with the wallet that we installed before, the Metamask wallet. I think I must save something here. Here, and this. Perfect. Next.Okay. It's time to create the controlled content. And imagine that you can be anything that you'd like to have it. So create the access controlled content. In the future, can be some exclusive access that you'd like to do. This is the point. This is the access. So what are we doing now? I'm coming back to the app, and I'm creating the components folder and the access controller's view. So let's do that. And we are in this point now, okay? Exactly this, create the access controlled content. So let's create this. Come here, open here. And I must be in the app now, not in the library, came to 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 controller's view. And let's paste the content over there. Here we are, I came into the Git book as well. And copy the contents, paste on my VS Code. Here we are. Let's understand this, what do 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. Like we must discover if the user has access or no. If it's granted access or no based on the NFT, okay? So if it is granted, we are returning the VIP image. If it's not, we have the basic image. It is. This is the access controller's view that you have in a few minutes. Okay, 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 Git book directly, and I'm going to paste some parts in the pad to help, okay? 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 contents, which is, then paste here. And let's explain to you what I have here. So here we are. I, you can see that I'm importing the Vim, but this is the important part. I'm connecting my wallet, I'm importing the wallet client. I am getting the access, the ABIs. Let's talk a bit, the ABI. API, it's application binary interface. And this is a part of our smart content where we have the definitions of the smart context itself. So if I come back here and getting the constants part of the ABI, you can see that the ABI has all the information that I need to access some function inside my content. My content will have like a balance dot.

This is a read function, and I 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 these are the things that I must have in the ABI to connect to communicate with my smart content. And let's come back here in the grant access view. And over there, you can see that I have, I'm also importing the control view that is showing the VIP image or the basic image. And I'm only controlling the state of everything here. And here you can see that I'm using the smart content access, the address of my smart content. If not, we have this that was deployed before. You can use that as well. We are doing the connection first. And I'm also getting the, the information over that. Here is the grant access. We can connect, we can grant access. Okay. And it seems that this is good. Let's move forward.And 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... 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. Feel free to 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's 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 contents. 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. Is it done? Let's see if it is working. Fingers crossed. Let's go. Maybe I must update. Probably yes. Yes, also cute. I love it. And okay, 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 not. 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 are 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 this.

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. Okay, I am connected. I still don't have access. What are we doing now? I need 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, you 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 on the grant access button. And now you can see that I am sending a transaction to the blockchain. When I connected my wallet, I'm only authorizing my application to interact with the wallet. Now I'm sending a transaction to the blockchain to mint an NFT. And this NFT, you give me the access to this content. Okay, confirm. I must wait my transaction to be confirmed. And again, close this. It's confirmed. You can see here a contract interaction confirmed. So if I came here, I'm not updating nothing automatically. So if I came here and 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, amazing services, 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 happened if I have another wallet? Let's see. I'd like to change my wallet now. So, on Metamask. When I have the account 1, in the arrow down, I may add the account and add the new account. Let's call it account 2. Create. And this is the account 2. And I even don't have anything here. And if I came here, I can see that account 2 is not connected. So, let's see if here you can see that it's not connected. And let's connect to the wallet. But it seems that it's connected to my first account. Yes, I must connect to 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 we come back here and get your content, like, I'm using your content now. This is yours, not mine. So, if I came here and go to the.envy 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 it here. Connect 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 this like running locally, but imagine that if you already have this, I will feel public with this. We can interact with the others as well. Let's see, probably confirm it. Connect.

And yes, I am a VIP now on Mini's content as well. So cool. This is interesting because you saw that I can even access content from other people as well. And the 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'm going forward with the content. I have a bit more to start with. So, recap 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 unique token IDs. Create the name and the spin box. And the symbol of our token and have the grant access function managing the ID and minting the tokens. You can create the revoke 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 questions here from Olek. Oh, Olek, yes. Oh, yes. Olek, maybe, depends on the kind of application, make things to have it is on Ethereum mainnet used to be more expensive. I totally agree with you. But in the same way, when we talk about blockchains, we have a lot of, we call it the layer 2s that are other blockchains that they are faster. They are really, really cheaper, like 100,000, 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, Olek. You are really right. But we have solutions to do that. And it's easier and easier to use blockchains, other blockchains at least. And we'd like to see these slides. Oh, we have the different. So, if they came in here, it would be here for you. Let's go to the end. And I have this public slide for you. And you can see that this is the old image, and the code is here as well. We have the extra button with the code, because it is a slide. And I can connect my wallet here. And my wallet is not, I created this wallet with a few lines, so it's totally new. And probably I can refresh. Ah, I'm not connected now. No worries. Grant access. Now, I'm minting the token to my wallet. And after that, let's say I'm 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 line here, another in the chat, so I can talk with you. It's confirmed. 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's connected. 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.

Disconnected. Okay. I'm not connecting anymore. Let's see if now I can give you the access, the right access. Yes. Ah, now yes. Okay. Now, I can do the grant access again. Okay. Refresh. Wait. I think it's not yet. Yeah, it's pending. Let's wait this. And okay. I'm waiting. 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 will 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 had 30,000 NFTs. And this was really, really cool with the players. And what about some monster? I will talk about the fizz 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. Okay. And I added the link here that this is a useful case. How they use NFTs as well. And this is so interesting for you, too. And also, what about two usages in real estate? 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 estate. 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 change in the property ownership or you can have some critical part, like address or a unique identifier in the account, 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 like 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 set to not change too much, but I will 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 talking about unique identity, imagine that we can have a different kind of identities, like we used to say that they are the soulbound NFTs. This is another standard where we can't transfer the non-transferable 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. We used to say that they are the user's soul and they are not transferred. So, this is a different kind of NFT as well. And let's see what more I have related to the access. Oh, I have one more to share with you that maybe it's interesting to you. You can see this article later related to NFTs for real-world assets. We are talking about this so much in the new times and all of the kinds of real-world assets that you can have and applications, like physical collectibles, not only related to art but other things as well. This is interesting to you. And let's see what more is this. I'd like to share one more link to you related to the collectibles as well, how the brains are using NFTs. I already told something to you related to this. And what more? Okay, my last slide, almost last slide. I'm almost finishing, so 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, not related to the front-end part. We are in a 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 the fees. Where do the fees go? When we talk about blockchain, the blockchain has the transactions in the blocks. So, in order to these transactions being in the block, we must have someone validating the transactions.

We used to have to say that we have computers, the node, 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 had some transactions that I was spending? In that moment that the transaction is spending, 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't do in the blockchain. I'm trying to spend the same token twice. I'm trying to deploy a smart contract in a way that is not compiled in a successful way. Am I 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'll 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, 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. But what is this? 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 these some seconds here for you to copy this. And I'm still here if you have more questions. I'm awaiting your questions. I'd like to say thank you so much to be here with me and especially to do the workshop with me. I really love it when we have people interacting with me during the workshops. It really makes me happy and feel that I'm making a 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 helped me creating this presentation and this workshop. I used to travel around the world to go to blockchain conferences, to do a workshop in many conferences, 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 to be in real life as well. And this is. Bye!

React Summit

React Summit 2024

How to Build Front-End Access Control with NFTs

Cómo Construir Control de Acceso Front-End con NFTs

React Summit 2025

Today's workshop explores the concept of unlocking digital ownership through blockchain technology. NFTs are unique digital assets that provide transparency, immutability, and trust. The workshop covers topics such as wallet setup, securing wallets, obtaining test tokens, creating NFTs, deploying contracts, building front-end applications, granting access, and the possibilities of NFTs. The importance of transaction validation and the availability of alternative blockchains are also discussed.

Understand the fundamentals of NFT technology and its application in bolstering web security. Through practical demonstrations and hands-on exercises, attendees will learn how to seamlessly integrate NFT-based access control mechanisms into their front-end development projects.

Solange Gueiros

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

JSNation 2025

JSNation US

I’m attending JSNation US. Join me there for free with 10k other JS engineers and 50+ great speakers. Just follow this badge.

How to Build Front-End Access Control with NFTs

FAQ

Comments

Available in other languages: