Build a Web3 Twitter clone using Solidity and Polygon | Rahul Agarwal | Skillshare
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build a Web3 Twitter clone using Solidity and Polygon

teacher avatar Rahul Agarwal, Flutter Developer & Trainer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Course Introduction

      1:01

    • 2.

      Create a hardhat project

      7:33

    • 3.

      Alchemy and metamask keys

      6:08

    • 4.

      Creating Twitter Contract

      7:37

    • 5.

      Functionality to add a tweet

      5:49

    • 6.

      Functionality to get all Tweets

      9:26

    • 7.

      Functionality to delete a tweet

      5:33

    • 8.

      Functionality to update user

      3:43

    • 9.

      Testing using Remix IDE

      9:25

    • 10.

      Deploy to Mumbai Test network

      4:59

    • 11.

      Setting up react project

      15:10

    • 12.

      Working on App component

      8:31

    • 13.

      Creating Sidebar component

      11:41

    • 14.

      Creating Rightbar component

      18:08

    • 15.

      Lets work on Home Page

      19:41

    • 16.

      Creating the Feed component

      14:39

    • 17.

      Lets work on Profile page

      14:23

    • 18.

      Lets work on Settings page

      13:13

    • 19.

      Authenticate User using Metamask

      22:45

    • 20.

      Verify if user already exists

      18:24

    • 21.

      Setup Web3 Storage IPFS

      11:52

    • 22.

      Function to add a Tweet

      11:23

    • 23.

      Function to show Tweets

      19:50

    • 24.

      Show User data in Profile page

      6:37

    • 25.

      Function to delete a Tweet

      4:22

    • 26.

      Function to update Profile details

      15:45

    • 27.

      Test the Complete application

      5:45

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

61

Students

--

Projects

About This Class

Twitter has been one of the most popular social media platforms for users worldwide. However, crypto users realize that a decentralized version of Twitter would be highly beneficial since it would eliminate the negative aspects of Twitter’s centralized platform. Thus, in this course we will build a Web3 Twitter clone from scratch. We will start by writing and testing the smart contract using Solidity and Remix. Then we will deploy the contract to Mumbai test network using hardhat. After that we will use React js to build our frontend and finally use ethers js to interact with the deployed contract. For uploading images we will use Web3 storage IPFS service provider.

To be successful in this guide, you must have the following:

1. Node.js and VS Code should be installed.

2. Metamask wallet extension should be installed in your browser with some test matic tokens in it.

3. Basic knowledge of Solidity, hardhat and React js required.

The stack

In this course, we will build out a full stack application using:

Blockchain - Polygon
Writing Smart Contract - Solidity
UI library - React js & Web3UIkit
Solidity development environment - Hardhat
File Storage – Web3 Storage
Client Library - Ethers js

By the end of the course you will learn all the concepts required to apply for a web3 developer job or even build your own startup in the blockchain industry. So without wasting any more time, enroll now and get into the next era of internet asap.

Meet Your Teacher

Teacher Profile Image

Rahul Agarwal

Flutter Developer & Trainer

Teacher

Hello, I'm Rahul. I am skilled in building cross platform application using Flutter. I am freelance developer as well as conduct workshops to share my knowledge with the community.

See full profile

Level: Intermediate

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Introduction: But that has been one of the most popular social media platforms worldwide. However, crypto uses realize that a decentralized version of Twitter would be highly beneficial since it would eliminate the negative aspects of a centralized platform. In this course, you will learn to build a decentralized Twitter clone using solubility and polygon blockchain, users will be able to authenticate using MetaMask wallet and then can share their thoughts with everyone on that platform. Every user will have a random of a tag generated when they sign up for the first time. They can even change their display picture and banner in your profile section. Later on, we will start by writing and testing that smart contract using solidarity and remix. Then we will deploy the contract, the Mumbai test network using hearted. After that we will use React js to build our front-end and finally use Ito's JS to interact with the diploid contract. For uploading images, we will use a web two dots storage IPFS service provider. By the end of the course, you will learn everything required to become a full-stack web developer without wasting any more time. Enroll now and let's get started. 2. Create a hardhat project: Hi, welcome to the very first video where we will set up the development environment. Before moving forward, let's discuss the course roadmap. The first thing we will do is set up that hardhead project. Then we will create a smart contract that tracks and stores tweet data. After it. We will test our smart contract. We might not write unit test, but we will test it using remix. Then after all the methods are working properly, we will deploy smart contract to the polygon destination. After that, we will create a React js front-end and use a ptosis and MetaMask to interact with the diploid contract. At the final session, we will test the whole application and make sure there are no bugs in it. I also make sure you have installed MetaMask and have some test metric in your account. You can just Google it if you want. I'm not going to set up again. You can watch any tutorial. It's just a few clicks off buttons and continue with that course. Yet again, you can see the whole tech stack of our decentralized application. That blockchain will be polygon solidity, hardhat. We will use my damask. The node provider will be Alchemy. It has just the front. Then we will use HTML, CSS, and JS. So let's start creating that project. Now let's start by creating a folder. I will name it. Tweeter dab. Here we will create a hardhat project. By the way, I hope you know what is hard, hard. Hard hat is an environment developers use to test, compile, deploy, and debug decentralized applications based on titanium blockchain helps coders to manage many of that task that I acquired, developing and writing smart contract and make this process easy. So in this folder, bring out that terminal. And before creating or installing hardhead, we have to create a empty and PM project using this command npm in it. Why? And after that, simply in style. Hardhead using this command npm install, save dev. I'd had. So read more about hardhat. You can simply go to hardhead, say here. And you can read the documentation as well. Because whatever code we are using, It's all written here step-by-step, like this, npm init y, and payments Teilhard had Dev like this. Now to create a logic, we have to use n px hard hat. Then select the first one did is create a JavaScript project. Press and tap press Enter. Now, it is telling us to install this dependency as well. It is a toolbox simply wasted and press Enter. This toolbox bundles are less commonly used packages and how that logins recommended to start developing, such as ethers. Ma Cao Dai, I'd had chai matchers, hardhat, it'll scan, etc. Now the dependencies are installed, just append our project in VS Code. I will just write code. It will open it into VS Code. And also in VS code, make sure you have extensions such as solidity, tailwind, hardhead, these kind of extensions you have already installed. But that's it for this video. In the next video, we will get the alchemy and MetaMask keys in our project. Thank you. 3. Alchemy and metamask keys: Hi, hardhead gives us few folders and files. We will discuss all of those step-by-step. But first, let's go to hardhead config dot chairs and make sure we are pointing our network to polygon test network. And for that to work, we need polygon node URL, any valid address. As I already have accounts, I wouldn't be creating a new account on alchemy. You can just go here, then you can login and sign up for a new account. If you don't already have one. After signing into alchemy. After signing into alchemy, simply create a new app. I will name it. Third, tab chain will be polygon. And it will be polygon mean by that is that test snake. Then click on Create app. Here, we will need that key. But before that, make sure you have installed MetaMask as well. You can install my Tomas by going to my Thomas.io website and install the extension for your browser. Make sure you pause the video and watch that setup of a new wallet. Anyone on YouTube or Google. And also know how to guess, get test polygon. That is automatic in your wallet. You can get it via polygon for set. One way like this. Yeah, just simply go paste the address and get test tokens. Let's say this. My mask. We will require that private key. And we will store those keys, that is the alchemy key and then my Dmowski in our project. And for that purpose we will use a dependency called dot ENV. Because it is not recommended to paste those sensitive information directly in our files. That is like here directly. I don't want it to be pasted. Simply bring out your terminal and right. And PM and style dot ENV. Now, make sure it's installed Yes. In the root folder. Simply create a file called dot ENV and create variables like polygon. Mumbai is equal to like this. And let E is equal to like this. But the polygon mode by simply go here, click on View key, this key, and paste it here. For the wallet private address. Simply open your Meta mask. Click here. Or in this dots. Account details. Export private key. Simply enter your private key. That's only enter your password. Then it will show you a private key and make sure you don't expose your keys to anyone else. Copy that key. Go to dot ENV file and paste it. That's it. Save it. After that. Go to Hardware dot config file and import that keys. With this command activated our bright require dot ENV. Going to freak. After that in the module.exports, simply write network networks. Then I will name it Mom Bye. Then in the URL, you have to write process dot ENV variable name, which is polygon Mumbai. And in a const, which is an array, you simply have to write process dot ENV, wallet, vibrate, like this. So that's it. Your hard hat configuration is done. In the next video, we will write the smart contract. Thank you. 4. Creating Twitter Contract: Hi, welcome back. Now let's start working on writing our smart contract. Remove all the hard hat files, contract scripts and test folder. It is, I will just remove it in the scripts as well. I will remove it in the contract. Just copy or no, you don't have to copy. You can just rename these dots soul. And simply move everything else. Just flag must solidity code. Now let's start getting with a new contract and name it. First. We will have some state variables. First one will be owner. Second one will be counter. This is, it will present id, a toy like this. Then in the constructor. Let's initialize that is the owner variable width, message sender. That is whoever deploys the contract and counter with 0. That is the first idea. We'll start from 0, like this. Now since we are writing a contract which will consist of tweaked. So let's have a struct of a name it tweet name, we do it like this. Okay, I'm destructor which struck. Okay. Now it will consist of a return address, that address and name it Twitter. Then it will have AD, then it will have the weight x. Then the person may or may not upload image. It will be optional. Then whether that person wants to delete, it's tweet or not. And finally, we will have that timestamp so that we can show that date of that toy. This is the structure of a tweet. Next thing we will have a structure of a user. It will consist of name being that profiling, that is, the user will write a bio India profile. Afternoon. That user can have a profile image. After that, the user can have a profile banner. Like this. Because if you have seen a feasible very few even have seen it. Twitter. The person can upload a bio is username, is profile image, and the profile Banner as well. After that, I will have, have some mapping, which we'll first, it will map now ID to a tweet structure that is id to wait. And I will name it. The weights. And the second mapping will be address. And it will point to a user. That is, users. Simply address to a user. So we just its address. We can find out the knee bio profile image of that particular user. Let's say. Also. We will have some events. The first event will be due, it created. It will have address. Same thing. It will have ID. It will have weight text, string. It will have the weight image. That Boolean is delayed dead and that timestamp. So this will, this is an event which will, which will be emitted in the ad tweet function, which we will create in the next video. The second event will we delete, then? It will simply have that tweet ID. Tweet ID and Boolean is deleted. Like this. That's it. That's it for this video. In the next video, we will work on the functionality to add it to it. Thank you. 5. Functionality to add a tweet: Let's continue writing the smart contract. Now we will write the functionality to add a churn tweet. It will accept the weight and the weight image. It will be a public as well as a payable function. Why? Well, because we would require that person to send us 0.01 in order to make sure are in order to upload historic, please submit 0.01 magic. Here we have to write ether, but we will be sending in metric value. If this is okay, that is, this requirement is fulfilled, then we will have a pointer to them. It's mapping. The right knew is you're going to do the weights at 0. It is here the idea that 0 ID, we will start adding the data new to it. Dark text is equal to text here, then New. And this should be Tweet. Tweet. Great. Image is equal to this. Then you do it. Dot is equal to message. Sender. Id is equal to counter. Then new tweet is deleted, is equal to false, obviously. Then finally, dot timestamp is equal to block dot timestamp. After that, we will simply emit our tweet. Created event. Will send these values like that. Twitter is message sender, then AD counter, then tweet text. The way you manage than is deleted false, and the timestamp. Timestamp. Like this. Afternoon, I will just increment the counter because the next tweet ID should be one. And finally, I will pay the owner. That is, I will just simply transferred. Now value o node, like this. With the owner, I will transfer this value. I hope you have understood this line of code. It was very basic. First thing we will require 0.01 ether that is demotic. Then I just pointed here to our state variable, which is tweets. That data type is struct. That's why I didn't hear tweet and simply added all the data inside it. And we did that you aren't incrementing the counter and just simply transport the value which is 0.01 Ito. That's it. That's it for this video. Thank you. 6. Functionality to get all Tweets: Hi, welcome back. Now let's work on the functionality to fetch all tweets. That is, like tweets will be shown on the user's timeline. Just write mattered, which are the weights and Chen, on which it will be a public function. It will simply view returns at a structure like this. Now. Now first thing we will do is create a temporary empty variable. That is, I will just like temporary is equal to nu. Tweet. It will be empty and the land will be counter. That is our lateral number of tweets. Then I will have the weight down to its is equal to 0. This will just count the total number of tweets you might be thinking what I'm doing. I'm just having a for-loop to make sure we display only that tweets which is not being deleted. You int I is equal to 0, I less than counter I plus, plus. And then I will have a if statement like this. If I dot is deleted is equal to false, then only add that to it. In this temporary. Eddie, in that position, count to eight is equal to the weights. I like this. And simply increment the count tweets. After that. I will have Alda plates which are not being deleted. After that I will simply have an empty variable, which will be result is equal to mu 28. Now that land will be proper, that is, count to its. If we directly send this one, then the length of the edit E will be much more bigger. That is why I just created, and I just created another variable of an empty array. And again, you do the for loop. And this time I will be less than count tweets. And here, simply copy everything from the temporary variable to this result variable. And finally, I will return that result like this. N here. What I did that mistake, what? It should be new tweets small. That's it. I hope you have understood. First, we'll have an empty array of counter length, which might be 50. Then we would have for loop and Alda tweets which have not been deleted, which suppose is tardy. Then since the length is 50 and inside that only the items will be 30. So I created another area with just a tiny land so that the length of the array will be equal to the items inside it. That's it. This is the function. Fetch all tweets. Next thing I will write. The method to get tweets. But, but the cooler user. Because if the user goes to his profile page, then only the tweets he has uploaded should be seen. There. We'll just write function, get my tweets. It will be an external, same thing, external or public, whatever you want. A few returns. It will return an array of tweets structure. Again, I will do the same thing here. They said I do it. Mammary. Stem ready is equal to a new way of land. Then I will have count, my weights variable. In the for loop, I will do the same thing you were. Int I is equal to 0. I less than count I plus plus. Then I will do that if statement, if weights I partition is equal to message sender and make sure it is not being deleted. I dot is the equal, equal false, then only we will add that in that temporary variable. In that partition, count my tweets I position. And then I will increment count my tweets value. After the for-loop, every login. Then click create a new empty array. Name it result. You do it. My new int, I equal to 0. I less than count my tweets. I plus, plus. Yeah, we'll just exchange that is everything from temporary variable to the result variable, that's it, nothing else. And finally, I will return the result where everyone, that's it. This was the functionality to get tweets of all users and get tweets of a particular user. Thank you. 7. Functionality to delete a tweet: Let's continue working with the functions. The next function we will write is to get a particular tweet. So I will just say my third color. I'll just like fun churn. Get to it. We have to send a tweet ID. Well, bleak view returns. It will return string mammary, mammary, and then address. The first thing is, which is required is makes sure that id is less than that counter. That is the maximum number of tweets. No, such to eight. Then we will just have the how are very well point towards that tweet, that is tweet ID here like this, then make sure that weight is not deleted. The day should it should be false, is deleted. And after that, if everything is okay, I will just say return the dot, text, dot, image, dot like this. These three value I will send. This is just a method if, if whatever, for whatever reason you are required to get that tweet. After that, Let's create med tech to delete it, do it. When churn. Delayed weight. We have those send the ID and Boolean is deleted. External. Simply, we will require that the person should be the owner of that tweet ID. If not, you can honestly delete your own tweet like this. After that simply to its id. Is deleted, is equal to, is deleted like this. And I will admit to it deleted event here. As we emited to it created a same way. On live, we will send, simply send that tweet ID, ID and is deleted. Like this. That said, this was punching to delete it, do it, It was very basic. We just change the value of E is evaluated to true so that whenever the user wants to get it, if he cannot fetch those who, which are denoted as we cannot directly delete the value from a blockchain. We will just change that particular value. That's it. Know that if we want, we can alter that blockchain. We can have a new array and then put that area inside that area like that. If you want, you can do it. But I will just simply have the data stored forever in queue. 8. Functionality to update user: Hi, welcome back. This is the last video of the contract module. We will just write down my turn to update user details. I will just name it funtion. The user doing except remembering new name. String mammary, new bio, sharing memory, new file image. And finally string memory, new file, banner. Leg this. It will be a public function. Now, simply have get that user or you can say insert that user in their users mapping message sender like this. Then I will simply write user data. Dot name is equal to new name. User data. Bio is equal to new bio. User data dot file image. Girl two new profile image. User data. That profile banner is equal to new file piano like this. That said, this is how you update a user detail. That last functionality will be mattered to get user detail. It is for a particular user. Simply fun Chen, get user. We will send the user a dress. It will be a public view function which will return a user like this. And I will simply return user's address as this user mapping excepts address and it will send the user struct that, say, this is that function to get a user. It is all the user details. And this is the function to update. User retains. That's it. That's it for this module. In the next module, we will complete smart contract. Thank you. 9. Testing using Remix IDE: So our Twitter contract is ready. It's time to test all the methods and make sure there is no bug in it. I will be using a remix online ID for this purpose. If you want, you can write unit test as well using mocha and child library. It's up to you. But just to save time and do it quicker, I will be using remix. So just go to remix dot m dot o, r g. Then here in that Contracts folder, simply create a new file and name it twitter dot soul. After that, I will just copy this license. And pragma solidity. After that, I will just copy the contract and paste it here. See, it's done. Okay. So when we will test it in the remix IDE, we cannot test far as 0.01 eternal because when we are doing the transaction, we have to send in numbers no decimal. So I will just write here one eater just for testing purposes, but in the main code it will be 0.01 in 30. Yesterday. Remember that? Okay, so here I will go compile to inter dot soul. We have this green check mark here. That means everything is okay. No adult is there. Now. Okay. Go to this deploy and run transactions section. Simply click on the Apply. Okay. We have this reply. That is, our address has been deployed. See Alda methods and functions are there. If we click on owner, we can see we have the owner address, that is this address C4. C4. You can see this is the correct address. Now, what I will do is simply change the account. And now we'll try to add a new tweet. I will just give the value one since it is asking for one. And now we have to send a tweet text. It will first do it and do it image something like www dot, dummy URL, something like that. Okay? And I will just click on add to it. I think it again went to 0. If I click on again, add to it. Okay, here it should not be way, it should be eater. Now, if I tried to click, see, we have this green signal here. That is that we has been added. And if you check that first account, it's now a 100. Because this payable function transfer that amount from this to the owner of that account. Like that's why that was incremented. Now, if I click on, Get all tweets. See we have this address, this text first tweet, and dummy URL or listings we have. And if I write, if I update a user, that is this user, if I write Arapaho, then what this is asking. As you can see here, we have bio web dev. Then we have profile image, again, www dot dummy image. And then then we have the profile. By now I will just write www.banner.com and updated. And now if I right, get users, that is user address. If I have to send a user address, and we'll just right-click Copy, getUser, and getUser see mapped to developer, dummy image and banner.com so that user has been updated. Like this only any further I'd get my tweet on need the dose to its idea, which are mine. Now, if I change the account to account number three, and now if I write, get my tweet, then see it's empty because this user haven't added any to it. But if we get all tweets, then obviously all the tweets are there, which are being posted in there in this app like this. Now, if this person wants to remove that tweet, if he clicks, see reverted, you can only delete your own to it. But if I go to the second and now if I try to delete that, it will get deleted because he's the owner of this. And now if I right click, Get all tweets. Just wait, let's see what is going on. I think there is some added to it. If an ID, we have this address. First, do it. Okay. When we are deleting the tweet, we have to send more values that is here, id as well as the Boolean value as well. It was the editor. If you want, you can check that and divert it as well. I will just read through and delete it. If I write ketones which see it's been deleted. This get to it. Let's see what happens. Transaction reverted by saying it is deleted because that tweet was already deleted. So I hope you have understood this remix ID because this was better and faster way of testing that smart contract. If you want, you can enter multiple traits and STR contract for any other box which I may have missed. But right now, everything is working flawlessly. In the next video, we will deploy this contract in them. Polygon Mumbai test network. Thank you. 10. Deploy to Mumbai Test network: Hi, welcome back. In this video, we will deploy our smart contract to the polygon test network. So for that, let's like deployment script. First in the scripts folder, create a new file and name it deployed dot js. Now here it's writing code. First thing is required is the hardhat laboratory. Then we will have a sinc function called main. Then we will get, get contract, factory will get contract. For instance. This is the name of our contract. It is here in say Twitter. Then we have to write this command. It is small d and then deploy. It dot, dot, deploy like this. Then we have to weight. It is being deployed as it is it. It takes a little bit tiny. And they're very end. We will console dot log contract address, contract deployed to then address like this. And now we have to call this main function and simply catch any error which is being thrown. Console.log says Exit code equal to one like this. So this is the only code required for the deployment. Now, we have to bring our terminal in the main directory that is in that folder directory. And write this command and px. I'd had run scripts. Then the ly dot js. And we have to mention than network, which is moved by and press Enter. It might take a few minutes. Now we have direct effects folder created and see their contract deployed to this address. Makes sure that you have copied this address because it will be needed in the next video. So just to make sure everything is okay, we can just check Mumbai polygons can go to this website, copy that contract address, base state here, and just search. See, five seconds ago this block was created and this contract creation and it has 0 might take value. This symbolize that our contract is successfully deployed. That's it for this video. In the next session, we will work on the front end, which is React JS. Thank you. 11. Setting up react project: Our contract is successfully deployed. Now it's time we worked on the React JS front end. For that. Let's create our setup ADF JS project for that, simply write np x to the eight React app client like this and press Enter. I hope you have React js installed in your system. If you have, I feel getting any and I simply install the ageism globally. So React project is now set up. Now in order to interact with our deployed smart contract, we will need two things, contract address and the ABA. To get the ABA simply copy that twitter.json file from artifacts contracts. Here. This file just copy it and go to client folder. Then source here, create a new folder and name it ABI, and just paste that Twitter JSON file here that is in that line source folder. Yeah. Okay. Then we have to create a new file called config dot js inside the source folder, like gun-free ab.js. And here we will paste our contract address. Contract address is equal to like this. Simply go and copy your address. Paste it here, like this. Now, to move forward, we have to install few dependencies. Simply change that directory to client folder. Here, write npm in style. Ethers, then react. And outer dome. Then that web UI kit, core. Then add that eight reps, three UI kit. I can then grab tree model and finally, cartoon dash. So if you see here. We have 123456 dependencies and press enter this eight test.js. That is, ethos is required to interact with the deployed smart contract. React router dom enables the navigation among various components in React application. Web three, UIKit provides us beautiful and lightweight UI components far by two developers. This library will speed up our dab development. Then. Then we have three model which allows us to connect our app too many valid providers such as Coinbase wallet, MetaMask, wallet connect. And finally, this cartoon Avatar generates random avatar for us. We will use this as a dummy profile image later on. Now if you go to package.json here, and we'll just check Web three model is there are out there now. Ethers cartoon, Avatar. Everything is dead. Now. I really simply go and write npm. Start to start our React JS cellular. Okay? So the React app is running successfully. Now it's time we work on the index.js file. Let's go here. We are importing React, then the dough index CSS app. Then I will import browser and outer react. And outer dome. And I will import defecation. Defecation provider. Web three, you write code, notification, provide that just an impulse. That app. It is at the root file. It will enable all the files to display notifications. So we simply have to go remove this three-act strict mode here to use defecation provider, an app that app inside and defecation provider. And then use browser router and wrap the app inside browser router. Like this. That's all we'll say. Okay, it's running. Now. I will create new files and directories. Inside the source folder. I will create folders and name it. Come on Nance, components, images and pages. These three folders and insight pages. I will create multiple files. Home dot js, form dot CSS. Again. A file dot js, file dot CSS, then settings.js, settings dot CSS. Okay? These, these many files created $9 home dot js. I will write the code. First thing I will import React. Then I will import link from React router dome. Then I will import here in this home dot js, I will import home dot CSS file form dot CSS this way, okay? Then I will simply have a home component and export default the very end. Then inside the home component, I will return, I will return some link tags like this. And I will copy it. I will look up paid two times. The first one single slash. And in that day it will be home. Then next one will be profile. It will be profile. The next one will be settings and heavy like tears, settings like this. Now just copy all the code here. Go to profile dot js. Paste it here. Right. Now file dot CSS file and export the profile at the very end. Similarly, go to settings.js, paste it here. It is. The same code here. I will import settings. Then the component name will be settings. I will export settings at the very end. So that's it for this video. We have done a lot here. Now our React JS project is started. And then next videos, we'll just work on that basic UI of our application. Thank you. 12. Working on App component: Hi, In this video we will work on that app component. So go to app.js file. Here. I will remove this logo and start importing dependencies. First one will react from React. Second one will be out as well as outs. Then I will import home component from dark pages home. Then I will import file component. Then I will import settings component. And then I will import that app dot CSS file. Now in that function, I will remove everything and start. We empty brackets. Then Dave, class name, I will name it page. I will do the CSS later on. Then we'll have the live class name, sidebar, say bar. Then I will have Dave, className main window. Then I will have some routes. The routes I will have singled out, which will which will be slash on Lee, and the element that will it will display the home component. Similarly, I will have refine. It will display the Phi component, and then I will have settings. And it will display the settings component. After this main window will have the last name, right? Bar. And had I read write bar like this. And at the end, it is exporting the app. Now, I have these days, but definitely it will need some stylings. Simply go to app dot CSS file. Yeah. I will remove everything. And start with page. I will write this CSS fast. I hope you have knowledge of CSS because this tutorial is about Web three and not about HTML and CSS. Sticky pixel week. And read the blue minus 800 Excel into 0.45. Then border, right. I will be one pixel, solid, RGB. Sixty three. Sixty three, sixty three. And colored them white and red VH. Then I will have the class of light bar. I will just copy and paste it here. Volition sticky, top 0, weight. Yeah, it will be simply border, left, not right. One pixel solid days. And right by. Then, we'll have main window, intended pixel. Then anchor, rep, get any link. Any link cursor will be a pointer. Then the text decoration to be none. And it will be important. Then height will be 0 pixel. It is important. Then I will have the login page, which I will make later on. But we should write the CSS here. Because as I always say, the focus is not on the CSS portion. The focus is on building a complete decentralized application. Display flex, justify-content center. Flex direction, column, cap, the pixel. And this is done for the index dot CSS. But the only change we need to make in, sorry, this was abducts, this is the next change. We have to make it in index dot CSS here. After the above the margin, I will just add background color to hash, one for one to six. That's it. Now save the file. And let's go and check out the output. C. We have the sidebar, then home profile settings here. And we have done and I divide here, so we have different sections in our app. In the later videos, we will work on particular section separately. Thank you. 13. Creating Sidebar component: Hi, welcome back. In this video we will work on the sidebar component. Simply go to 02 components folder. Here, create two new files. First name we sidebar dot js and another sidebar dot CSS. In the sidebar JS, I will just close everything. And only insight but dot js. Yeah, first thing, import, React, react. And then next thing we have to import the CSS file, which is sidebar dot CSS. Okay? Then the sidebar simply turn anti-tax for now. And export default Sidebar. Okay, in goto app.js, here, in the sidebar from components sidebar. Here in this, Dave did this sidebar div, simply ways does sidebar component like this. Now, we will work on this sidebar components. First few imports, which will, which will be required. First will be some few icons. I really like Twitter, cube, user and COG, cog from web kids icon here. And second thing which will be required is the link bank from a Create React router. No, Yeah, we didn't. Return statement will return a div and give it a class name of data, site content. Then I will have another div and name it menu. Now, then I will have another div and name it details. In that details, I will simply have that Twitter logo or the Twitter icon, which will have font size of 50 pixel. Then after the details, I will simply have a link tag, which will simulate too. The homepage and class name will be a link. Then below this, I will have another name it menu items. Inside the menu items. Now. And this div is not finished here. I will have this link tag. And inside the link tag will be finished. Outside the menu items. And inside it will have a cube logo or icon with font size 50 pixel. And here I relate home. Like this, that said, Details section. Then menu. Now, like the same way, I will copy this link, paste it two times. That second will be profile class name inside the menu items. And here only I will write phi. That third one will be settings, lastName, link. And here I will write settings like this. Okay, That's sidebar component is done. Now we have to work on sidebar dot CSS because obviously there will be some styling or else it will look very bad. The first styling will be cidal content. Padding. Top will be 20 pixel. Budding, right? 90 pixel. Justify content. Space between display, flex, flex direction, column, height. Five, we etch align items. And then the details class will have display, flex. Reading than pixel, gap. Pixel. Justify contents, start. Align items, center. Text, decoration, none, and it will be important. Then the menu items, glass, display, flex, justify contents that gap. But in pixel, margin, top, between tip Excel. Then Elaine. Items will be center. Then font. Weight will be 600. Font size. Between typic cell, padding, ten pixels. Border radius will be thousand pixel. Color will be white. And it will be important. Decks declaration will be none. And it's again important. Then. I will have menu items. And what will happen if you hover it over, over it, then cursor will be pointer. Background color will be 2828 to eight. Then we have the profile class. It will have display, flex, flex direction, column, and gap will be five pixel. Now save everything. And let's see how the UI looks with this sidebar. See, and now what mistake I did was here that cube. This will be user and the last one will be Kg. Now, see, we have different, different icons here. Profile settings. Now this sidebar is done. In the next video we will work on that right bar. Thank you. 14. Creating Rightbar component: So in the last video, we have formed in the left sidebar. It's time. We work on the right bar here, that is this section. So let's go to components. Here. Create two files. Firstname it, right bar dot js. And second file will be right bar dot CSS, right Pod dot js. Simply import thing is React from library. And second, secondly, we will import the CSS. That is right, bar dot CSS like this. Then a function. Right now, we'll just return empty brackets. And finally I will write export default. Right bar. Leave. Does CSS file empty for now? Go to app dot JS. Yeah, import, right bar component. And in this sidebar section, simply call out. And I bought this one like that earlier here we have what's called the sidebar component. In this section we will call it right, but save it. Next thing we want is in the source folder there we have images folder. Put any dummy images here. You can download whatever image you want from the Internet and just paste it here. This will be dummy advertisement or news or whatever you see on the right one. I have used these images. You can pause the video if you want. After that, after we have images simply at the very top, import those images. That is important. I will just name the first one, hard hat. From images, r hat dot JPEG. Copy it three times. Second one, I will write solidity. The image name is solely the D, and the next one is Meta mask. And here I will write my Dallas. Right now we'll just import three majors. Okay, I have this CD act as well. Let's import the reactive which they react image is a PNG file and GIF file like this. Now, since I will have dummy data here, I will create a variable which will be an array. It will consist of objects. The image I'd had. Learn how to use hardware dev. And if you want, you can use link as well. If you want the user to really redirected somewhere. But right now, this is just an empty link and paste it three times more. Secondly, we'll be solidity. I will simply write master smart contract. Development 30s react mastery act just in 2022 or 20, mask. Yet I really like to become a web developer. Now, these are just dummy data. Just remember, after that, I will have a dummy search box. So important. Input from UI code, web three UI code and I will import search and that input I will be capital N here. Search icon from Web three UI icons like this. Now, let's have a div content. I will name it. Then I will have an input. Like this. The level will be search. Name, search. We end up prefix. I will have this icon, that is the search icon. Like this. And background color will be hashtag. One for one, small d to six. Like this. Then I will have another div. That last name will be trends that I will just give me a heading lending. And now I will simply loop through the eddy like this. And I will return here. Dave. Class Name, trend. On click. I will simply write window dot open, E dot link like this. And inside this div there will be image E dot simply. It will be e dot image. Class Name, trend image. We will style it just after some time. And then another div with that text that is trend. Next. Here it will output e dot text like this. That's it. Now, it will look horrible if we don't do that styling portion. So let's go to write bar styling that is read by dot css. First thing, I will stay at eight bar content by adding unify Fix cell with 80 per cent. Then dark trends. Background color, Aztec to be 34. Then border-radius of five pixels. Then minimum height, I guess, do we h minus 200 pixel? Maximum, rated 90 pixel. Margin, top tip, axilla. By adding the pixels. Font-weight, bold, font size, 18 pixel, overflow. And then I will style trend. This trend. Simply display flex. Justify contents. Start. Align items. Center. Gap between the pixel margin, top 15 pixel. Padding, ten pixels. After that, I will have some hover effect. Pointer and background color. When hovered, should we Aztec? See 353 e. Then brand image. You made it red. And red pixel, border, radius, big cell. And finally, next, one size 15 pixels. Font-weight, normal. Now, save all the code. Let it be compiled. And see that you just see it is looking good. I think the bonsai is not looking good. Let's see. We have a spelling mistake here. Trend. See. Now the font size is also descent. We have here, these and all. So I will check and padding. So here we have the right content. Let's see. It's okay. What if I do 90 per cent? Okay? By adding d, we have this deeper sent. Okay? Then trends, background-color, border radius, minimum height, max rate. If I increase the max width, nothing changes. Margin, top on size. This, then we have trend, justify content, center margin, top 15% by adding 10%, Let's see how it looks. Just some issues with this side. I just feel should we didn't make it should be in one line like this one and all. The image in the app dot css. Why do here? Okay, right now it's looking good. If I want to change something, I will do it in the next video. Thank you. 15. Lets work on Home Page: Hi, welcome back. In this video we will work on the homepage. But before moving forward, I just want to do a little bit change here in the app dot CSS in there, right bus section, I will just change the width from 45 here, the 55, that's it. So now our app looks decent competitively to before it has proper distance and all. And also, we need some dummy images. I have these images here. If you want, you can just Google avatar or any background image. If you want to. Use it just for the purpose of creating the UI. Anyway, it will be changed later on. So create a new file inside source directory and name it. Default images dot js. Then simply write export. Const. Default. Images is equal to n here. Simply paste those two images. This one just any random avatar image. And this one is used to be used as a banner for the profile section. Like this. And save it. Okay. Now go to pages and in the home dot js file. Now let's start writing some code. Input from web. Three UI kit icons are the core, not, not diagonal step code. If you want, you can go and check out Web three UI kit and what are the UI elements they provide? And secondly, I will import image with three UI icons. And finally, I will import default images. Default images here. Now since I won't be requiring any of these, these are just dummy data. I will also remove that link egg as well. And start, I think from scratch, I will have a development. And we'll give it a class name, main content. Then I will have another Dave. I will never grow five to eight. Then I will have another section like this. And here I will use the avatar element from the Web three UI kit. And I will simply is around dead, then image will be, right now it will be default. This one that is default, images at 0 position in image size 60, like this. Then I will have a text area. Label. That right now I am not planning anything. Yes. Name plate. Next, area, lease holder, equal to what's going on. And glass name will be text, area like this. Then I will have this Dave. And after this div will have an address. Dave. And I will give it the same class name that is tweet section. Inside it. I will have Dave, This one have className image div. Then I will use the Image image element getting from the icons on size will be 25. Like this. After that you made Steve, I will have simply another div. I will write the weight and the class name will be to eat. After the styling, you will know, you will understand all less sections right time just getting the SDM abortion. After this div. Here. I will have I will have I will have simply net section, the feed section. And we'll have the fruit section here. I will have the fruit section that said, okay, now let's go to the home dot CSS. Let's do some styling. Start with text area. The five per cent colored capital, then background, transparent. Border, two pixels. Then border-radius. Keep Excel. Then minimum height. And red pixel by adding 15 big cell. Overflow it. And then I will have weight. Bottom one pixel, solid RGB, 63363. And padding. We're in the pixel. Then I have that tweet section. Display. Flex. Justify content space between wait, 95 per cent. Align items, center, margin, top ten pixel. Then I will stay led to it. Class. Background color. For seven, E5. Then pick cell and 20 pixel, border-radius, thousand pixel white. Then we hammered. So image, they've border-radius 50 per cent. Adding then pixel. Margin left, it depicts seller. And then I will add image div hover, Curtis, binder, background, color. Do it, do it like this. I will just save everything. And let's see. In the app.js, we have the Home section. Okay. It's not it's in the settings. That's why. Let's go to home and see. It is looking nice. Now only thing is the text area. Let's see. Let's see what's going on to the text area. They will just check CSS. We've got lateral border, died ADS, minimum height reading is the overflow hidden. Then I really go and check this. Now it's working. I haven't done anything. I just remove that code and simply write the same thing. Again. It's like textarea class name, last name, this one, and up placeholder, what's going on? That's it. Now we are able to write here, it's working. The next thing I would like to work on is this image section. That is how to select an image from the user's directory. I will just import from React. You state, use, ref. These two. Then after some variables here that is, input file is equal to use RAF night. Then const selected image, set, selected image. They use data. Then I would require another const text. That text is going to use date and empty string. Then I will create a function, name it on image, click, input file, dot, current, dot, click. And then I will have change. Handler. Event. Const. Image file is equal to event dot dot files 0. Then I will set selected image URL object, URL image file like this. After that, simply. We will go to the text area. Yeah. And I will write their own onChange method, which will simply set text to whatever it's being written here. E dot, dot, dot value, like this. Okay? And then I have this image, which I will give the onclick and simply write on image, click. Uncheck. After that. Inside here, I will have an input tag, which were the file. Type will be five. Friends, will be input file. And change, will be change. And learn and style. This is something you have to see. I will just display none. I don't want this input tag to show, input element to show. I just want the users to be able to click in that image. And I will just have an if-else statement. If selected image is true, then I will simply show image egg, which source. Selected image width will be 150. And if it is not, then I will show this tag. That is the image icon. That's it. Save all the flesh. Select the file and see. Now I am able to select an image. And if the user wants, he can change it again by clicking in here. That's it. That image section is completed. In the next video we will work on the feet section here. Thank you. 16. Creating the Feed component: Hi, welcome back. In this video, we will work on this feed section. For that, we have to create a new component, go to Components folder and create a new file in feed dot js. And also have a CSS file for it. The weight in id dot CSS. In intuiting feed chairs File. Import the act, and also import the weight in the dot CSS. Let's tonight. We may explore new-found neck days. Go to home dot js. And here plus the file import wheat in feed component. And simply call the component here like this. And here I am sending a prop rho phi is equal to false. That means don't want all that feeds here, not for a particular profile. Then. Good IGS file. Let's have some imports. Board, default, images, then. Import core. And in bold, message, circle, star, and magic icons like this. In the return statement, Let's write Dave class name to feed to it. Let's have our data here. Is rounded. Image is equal to default images. These are just some images right now. Team image, say 60. Then let's have another Dave. Lastname, complete gouache. First, Dave is hold that this was they tended to eat and just writing a land mask one now. And then. Simply a count like this. And here I have a dummy account like this. Then Dave, className, content. Nice. They're learning from scratch. And I will show that image. There was some light source. You fall default images. And one lastName image. Then. After days, Dave, I will have the class name. Class name is the. Generally in their interactions. Interactions will have a div. With lastName. Interaction numbs. Numbs will have I will have here message circle, icon, font size 20. Leg this copy weighs twice. Then here it will be, I will just simply write died. And I will lay magic. Now. I have these two component ready now it's time we do that styling portion. Let's go and read tweet. Max rate and red percent. Border bottom. One pixel's RGB. Sixty three. Sixty three. Sixty tree. Like this. By adding green, pixel, colored white. Justify content, space between display, flex, cursor, pointer. Then we tweet our background color. I will just change it to this hex code one. C, do it. Before. Then I will stand that complete. Tweet. These flags. Justify-content, start. Relax net action. Column, gap. Then pick cell D9 percent. Okay. Then I really have in the elections, the elections mitogen. Then pixel. This play. Lax. Yes, D5 content, center, gap, 150 pixel. Then I will change this interaction nums ash, T F T, F, T F. Display, flex. Justify contents, dark, gap, then pixel. By adding pixel, border, radius. Thousand pixel. After that. I know there's lots of styling. If I wanted, I can just give you the file, but I'm just writing on all the stuff on the CSS code as well. Because since you guys are also building that stuff, it's better. We do it from scratch on 28600. And align items. Center pixel. Then we'd content is flex. Justify-content. Start. Flex direction, column, gap, thin cylinder. Max height to pixels. Then wait. Image, wait, 98 per cent, radius and pixel height 90%. Then I will have another class here, loading which we will use later. I like static, column, gap, doing the pixel lead, right? I know there was a lot of code now, save on. We will go and check our homepage. There is some mistake here. Let's see what is dumb mistake. This class name. I wrote it wrong. I will just give it a small f here. Save and see. Everything is not perfect. We have the account here, image here, that text. If the user uploads any image, it will show here properly. It is looking very nice. These are just dummy icons. This shows it's on the polygon network. So nice. Our home page is done. That is the UI is completed. In the next video we will work on this profile page. Thank you. 17. Lets work on Profile page: Hi. In this video we will work on that profile page. Go to profile dot js. And here, the very top. Let's import something. First, let's import default, default images from default images like this. Then I will import the weight in component like this. Okay, Let's remove this links and start with active, not Dave, I will start with an image, last name file by another source. Images one. Then we'll have another div, F, B container Name. We'd like this profile. And that's how an image again. And now this image is displayed picture. Simply write file images and z, you know, here. After this in HD, haven't just made this image stiff self-closing. Have another div, which will be profile name, hello. And Raphael wallet. Just have a random entrance here. Then I will have a link which will send the user to the settings page. The class name. Raphael. Fine. After this link, Let's have another day of bio plus three, which is me. Then let's have and I will have a profile, web apps. And inside it only I will have one tab of my weights. Then at the very end, I will have to wait in fade. Component. Width. Profile is equal to true. Like this. Now, obviously it will look, it won't look good. I have to do the styling to go to profile dot CSS here, and let's do that styling. Everything. Here is about the styling. So weight percent, max weight percent. Height to be doing typic cell, check, cover. And b, f, b, container. Max rate and lead per cent. Display. Flex. D5 content, start. Flex direction. Column. Bottom. One pixel. Solid, RGB, 63. Like this. File, VFB. With Excel. Radius. Deeper, sent one tactic pixel by pixel, solid. One for one day to six. Relative minus 65 pixel. Left. Depicts. Then do the styling of the file. Name. White. Lesion relative minus 55 pixel. Left. The pixel, size. Tip Excel. Find the weight. After that. I know there are a lot of styling to be made. Rough file wallet. I don t know that we have the profitable, right? Yes. This one. Color RGB. When, when? When, when is for when, when? When, when for you Shen relative. Then minus 50 pixel. Left pixel. Font size 14 pixels. Then Jane stuff, sort of bio. Learn light. Well you shouldn't relative minus for the pixel. Left, what the pixel size, 16 pixels. Font-weight, 500 bucks, or only apply when the lights right. Then I have failed. And its section, like for deletion, relative minus 1 16th pixel, left, 50 pixel. Size, 16 pixel. Font weight 0.5 pixel. Solid white. Wait. And red pixel, justify-content center. This leaves flags. Then raw file in it. Go to cern. Pointer. Refine. Apps. Display flex, justify content centered, white, bold. And finally, Profile. Tab. Bottom. Then pixel, border. Bottom, two pixels. Solid. One, capital a, capital F. Do. I know there was a lot of CSS in this file. Now, save it. And let's see how our profile screen looks. Now. I think I have done some mistake here because I learn so it was not there. Let's see. Refine. This was the mistake. Save it. See that profile page is looking so nice. I know here that binary image and this image is same because we are just using the mediators. Later on. The images will be different, but I guess it is looking very beautiful. Our homepage and profile page is done. The only thing left is the settings page, which we will do in the next video. Thank you. 18. Lets work on Settings page: Hi. In this video we will work on our settings page. Go to settings.js. Let's start our work here. First of all, I will remove all these lengths. Then I will import input as well as upload. What I'm there were three UI code. And I will use use state from React. Since this will involve files and all. So I will create some variables are states. First we will be file, file set, file file called to use date like this. Then bounced file, set, banner file. They use state. Then const name. Setname is a good thing. Use date. Then const bio. Set bio. To use state like this. Then I will have two functions. Balanced. Banner is the event. If event not equal to null. Same place set by now file. That event. And second one will be const file handler. Is it going to do event? Same thing. If event not equal to null? Then that raw file. Should we event like this? Then let's work here. That is the returns, a return statement where Dave, lastName, settings page. First will be input, label, name, name, name change, rate, and read per cent labeled by ground color. Hashtag one. For one. The 26. An onchange will be simply set name, target value. Like this. Second input field will be called bio. Name, bio change. And leading will be set bio. Then I will have the last name, PFP, which I change my image. I will use that glowed component or you can say, this is given to us by them at three UI kit. And I will use Profile handler here. And similarly, I will have had change. Binary image. And here it will be banned that handler. And finally, I will have Save button which I will edit in the CSS. Go to Settings dot CSS file. Let's say Settings page. By adding 1880 pixel. Display flex. Flex direction will be column gap. The pixel. Then I will have this one. Velar and stack 6878. The padding left. And I will use the CSS to save background color. One D, A1, F do than reading will be then pixel and wing tip, axilla, border radius. Then white. On weight six and red. Red and red per cent. Display flex. Justify contents center. Then at that however, I will just say Kolkata is carceral should be pointed. Let's save and let's see. Look at our page. It is looking decent. Profile settings page is also done. We have all our pages ready. So before ending this video, I would lastly like to create a basic login screen for the user, because obviously the user has to authenticate before he goes to this home screen. So far that go to app.js file. Here. At the very top. I will import button. Three UI code as well is important week and met the Mask icon from three UI icons. Now here I would like to have some state and I hope we have used it. No, we don't have you stayed here. So just have to use a const. Is our ten decay dead set is ten gated. They use the files at the first value I would like to have it's false. Return. I will just have an if else statement. Iv, authentication is true. Then I will show this div of ours. If authentication is true, every show is the flow of hours here. And if not, then I will show this screen, which will be Dave lastName. Now login page. Like this. Then I will have to tell logo on say D. And I will have a button. I will have a button here now, which will unclick. It will just do nothing. Size X L, X two. When we login with MetaMask, team, primary icon will be this mask. I can like this. N in the app dot CSS, we have this login page. Css, as you can see. As I will just say, well, if I go to my website and if I refresh, it's compiling, let's see if it's there in the editor. Okay, see, our login screen is also looking very nice. It is very basic, but it does our job. That's all for this video. I hope you have learned a lot. In the next video, we will work on that functionalities such as login with my mask. Then eventually we will fetch data from our blockchain using a test.js. So just stay tuned and keep learning. Thank you. 19. Authenticate User using Metamask: Hi, welcome back. In this video, we will authenticate user week MetaMask. Earlier we had this login screen. Now it's time to write the functionality. So let's go to app dot JS file. Here, I will make sure how important all the dependencies. First thing I would need is used effect. Then I have done from a core will require used notification as well as loading rigid. Then I have this, I can simply rotate. And after that, I will import ethers and Utils from eaters. This we require. Then I will require web tree model. From web tree model. After that, we will require font, Drag, address. Rom. Can freak phi prime here. After that we will require ABA, ABA folder, then click that dot Jason. And finally, require our dependency. I will just sit Like you require and then tune our Todd. These are the dependencies. And I believe we have the cartoon. Is our dy installed already. Let's see, everything is fine now some error is there, is compiling. I guess everything is fine, okay. Now, we need some state variables. Like we will, we will require this data set. Provider is a cool to use state and we will have window dot it tedium as the very first date. After that, we will require the notification library from Web three UI kit. And then we have a state just to show whether that's getting is loading are not set. Loading state is willing to use it. And the first thing we read files. Now, to read about notifications, you can go to the three UI Kit website, official website and see how to use these notification and all. I will just have a warning notification function. Vacation is equal to like this. It will just say no defecation. That is this one. It will simply have this. And inside it, we have to send some parameters like type, warning, message, change, network. Who polygon to visit this site? After that, I will have it simply switch to polygon network. And after that I will have simply the position of the notification in the top right. Like this. That's it. This is how we show a notification. Okay. Same, we will require another we will have another notification which will known as info notification. Type will be in full. It will accept and account number. In that message simply will show the account number. And here we will write that I tell connected to polygon account. That is, if the user switches It's polygon account, then also we will show a notification because that user cannot use another network such as quarterly or Rob Stone and all. But he can definitely switches accounts in polygon Wallach. That's it. Now, let's start writing that function. I will name it, connect, wallet, sink, like this. Now we will require the Web three model for it. I will simply write Web three in 70, escape it. Small tree model is equal to new model. Then we need connection equal to await model.fit connect. After that, we will have the Cloud provider is equal to new eaters, that providers, Dodd Web three provider. And we will send that connection here like this. After that, I will get the network that is which network is connected. Because only on polygon network does site will open. Await provider dot get network like this. And we know that for an IgA1 polygon chain, id is equal to 80001. This is a chain idea of a polygon network. I will now have an if else clause. If get network dot jane ID, not equal to polygon chain idea if it is not equated. Then first of all, I will show a warning notification. Afternoon. I will I do add our switch. Then network. What I mean by that, I'm just going to extreme. Let's select it down. So simply this else. It will execute if polygon chain is connected. Okay? And now we will work on this try. I will simply write await provider, provider that the request. So what I will request, I will request that my Ted let It takes medium chain. That is whether if it's connected to something else that is godly or whatever network between switch the network. And paradigms. Paradigms, we will write chain chain ID. Utils, dot hex value. Simply will send the polygon id. And here, if it is successful, then we will simply you reload, that is window location, not reload like this. And this adder code indicates that that chain has not been added to my damages. That is that user doesn't have that chain. Okay? But definitely we have to add that chain. That is the polygon test network to users Matter mask. We're just trying to make their website as full of functionalities. Okay? Now, that means we will and polygon network. You. Dad, my dad mask. Okay. Now let's check if switch dot code is equal to 4902. In that case, simply dry. Yeah, I would just add that edit is while we are adding there, it was thrown. Okay. And here I will just try to add the account. Sorry did that in blockchain provider, that request method is called wallet. Add. It tedium. In-depth patterns. We will have everything. That is. Jane ID will be utils, that x value. We have to write polygon chain idea than airline light chain name polygon net. Then RPC URL's. Simply have an RPC. Or if you can change the PC, you are done by just Googling it. If, if this URL doesn't work, Mumbai dot chain, stack, labs.com, block x low URLs, HTTP and HTTPS. Mumbai polygon scan. It really Mumbai, Mumbai dot polygon scan.com. And then I will have native garden. See. I will have the native currency. Here. We have to send. Symbol, magic and decimals 180 k. And here simply I will have it. Then that is a weight. And after this is done, simply the load window dot location, dot reload, like this. So here we are adding the stadium chain, that is the polygon chain if the user doesn't already have it. And in the earlier one we are simply adding, switching that chain. That is, if the user have, if the user is using another chain, then here it will simply change it. I hope there is no error. Everything will work. Okay. And now we have to work on this L section. It will execute if polygon chain is connected with the MetaMask. So what we will do here is we will verify if user exist are not. In our blockchain. We will update user details in our contract as well as local storage. What I mean by this is we will use local storage here as well. So first of all, what I will do is I will get desk sign out from that provided this provided that gets signer like this. Then I will get this sign that I dress, signer dot get and dress like this. Then I will get that contract. Instance of the contract, this new contract, this contract C will capital like this. N here, what I will send his Twitter contract address. Then Twitter ABI dot aba. And finally the signer, like this. And here I will call the get user detail fund Chen, that is getUser await. On track. Get user. If you go to the smart contract that this solidity one, you will see this method that is getUser, where it is accepting address. So now what we're doing is we're checking whether that user is a new user or it has already been authenticated earlier. That's it. That's what do we add? Debt. So what we are validating the here we will simply get user detail. If profile image value exist. That is, if user exist are here, we will simply a first time user get and, um, and update in the contract. Okay? This we have to do. And after did this as that is here, we simply have to read set provider with their provider value. And set is our 10th ticketed to true. And this function or this if-else statement we will write in the next video. I know there was a lot to do in this video, this video as long. But as you see, this video was our most important video in our section. Thank you. Let's continue in the next video. 20. Verify if user already exists: Welcome back. Let's continue with our connect vallate function here. First of all, just make this small change IMG that is profile image. And if the user already exist, then I will simply set that I dumped in that local storage by the name first thing I will write active account like this. And I relayed Jason dot stringify. And here it will resign their address, but I will just simply copy this again. And here it will be, this will be sine at dress like this. So I'm just storing it in the user's browser. It is his account name. Then, then I will write, user name, will be here, getUser detail, and it will come in a JSON format and I will simply write name. And similarly I will copy paste. Second will be user bio. It will be bio, then it will be user image. And the next one will be user banner. And here change it to profile image. And second one will be profile, like this. Okay? So this will happen if the user exists and after that, it will set that, provide that and set these authenticated to true. Otherwise, if the user is a first time user. Now here, we will first write set loading state is equal to true. Then I will simply write LED is according to tune our tar dot, generate our tire like this. So I will have a default banner here. I will use the default by now from default images. Then I have this one. I will use it as a default banner. Okay? Then similarly, I will do the same thing here. Set than local storage. So user name will be empty as this is a new user. So username will be empty. User bio will be empty. Since the user will update the bio later on. User image will be our Todd. This one. Just a random avatar. And user binary will be this one, default banner like this. So here I hope you have understood till here. After that, I will simply try and have that catch block like this. In that dry, I will simply write const transaction is equal to a rate contract dot update user. Now, we have to send few things, username, user bio, profile, picture and banner like this. Then I will right away transaction, transaction data weight like this. Okay. And if there is some error, I will first of all write console.log adder. Just for debugging purpose. And the user have no magic in its account. Just for that purpose, I will show a notification type warning message. Get the best magnetic RAM polygon or a set. So obviously for this transaction that is update user transaction, we will need some kind of somatic tokens because there is gas and all these are involved here. Require minimum 0.1 med tech. This much is required to view in our website. And partition. Top right. Like this. After this multiplication rule, set loading state to false. And from here I will simply return. So this was the else block. That is, if the user is a first-time user, then we have the default avatar, which will be randomly generated. So obviously, every user will have its own avatar. And farther default banner. I haven't choose any other library. I have just simply dummy image. Now, it's time really done the HTML portion. So here we have authenticated side divide is their main window, o k. Now in the login page, we have this. Then Twitter image. Now here I will have this loading. If and else it is loading. Then I will show a loading rigid. Same place size, 50, spinner color green. And as I will show this, but done. Okay. In this, but then it will simply connect wallet. And other than that, we have XL. Everything is okay here. Save it. Let's see our website. I hope everything is okay here. Now, what I will do is I will trigger that wallet function using the US effect hook. Here. I will use effect like this. It should trigger when the page loads. Now FASTA file, what I will do is simply write if that provider is not there, that is. There is no My Thomas installed. I will simply write window dot alert. No. My mask installed like this. And I will assimilate window.location dot replace HTTPS. Mask.io will go to the official website. And if not, then I will simply call the connect wallet function. And also I will have this methods are provided that this provider dot on. First thing will be accounts changed. There will be a function call handle at gowns changed. Then I will have changed. So we'll will have a function called handle gene changed. Then I will simply write this connect. And it will simply handle heavier function called handle this connect. Let's create this functions and delete accounts changed. It will give us accounts. Here. I will do a check. If provider dot chain id is equal to demotic chain ID, that is, this one is the mitotic chain id. Then I will show in for notification and simply send accounts 0, that is the account number. So it will display on the website what account has been choosed. Second one. After that, I want it to reload obviously. But there were some issues. So just to prevent reloading twice for the very first time, I am using this if statement. Otherwise it was not needed. But you can try without this if statement. And you will see that website was loaded twice and it was asking for what you say. That transaction multiple times for the same transaction. So I want to just today get item active account here. If it is not equal to null. We'll set timeout. Simply. I will write window location dot reload. And it should reload within trees. That can. I'm just saying it again. You can try it without this statement, but it will reload twice. Then. Now I will have another function called chain changed. So we have the chain ID here. So if Shane ID not equal to our magic one, then we will have a warning notification. And we will simply window dot, location, dot reload. And finally, like now I'm not doing anything. In this statement. Here. If you want, you can do it, do whatever you want. So here we have everything ready. Now it's time to test it and make, just remember, I already have tested this. So I might have some kind of sessions or locals in our local storage previous one. So first of all, I'm trying to I'm making sure there is no account attached to it. I think there is no account. Okay. Because it will trigger this function. Okay, for testing. Let's go to some other chain ID and we'll just show you. I'm going to go early test network, okay? Now, if I save all, see that first thing. It is asking, Okay, connect with my thomas. I will say next. Connect. Then it is asking us to suits them into your polygon test net. I will go and simply switch it. Now it is loading, and now it is asking us do that transaction to update the user. I'm confirming. Now let's see what happens. Do here. Have any editor or everything is fine. It might take some time. See, we are now sent to the screen. And if I refresh it, Let's see what happens. See nine directly sent to the home screen because this account is already being connected. See here, this account is connected here. And if I go to contract address and reload it, see I have this transaction 31 seconds ago to update the user. It is now successfully updated. Our authentication part is successful. In the next video, we will write the functionality to add a toy by this user. Thank you. 21. Setup Web3 Storage IPFS: Hi. In this video, we will work on Tao Te storage portion. That is, we have to enable some kind of IPFS in order to make sure that user can upload images as well apart from text. So there are multiple IPFS storage provider. One is pinata, second one which I will be using is three storage. If you simply go to the website as well. See, this is the official website, web three dots storage. We are here looking to store files. If you want to store LFTs, then there is NFT dot storage as well. So if you want, you can read the documentation. I'm just going to sign in. So I'm now logging into my account. See, this is the dashboard. Here. I have to get a new token key. Obviously there are a lot of files already in my storage, but you should go to API tokens and create a new token. I will name it Twitter API. And simply created. After that, just copied, make sure you do not share this token key with anyone else. I will definitely the delete it later on. Simply in that config dot js file here, right? Export. Const three storage. Api is equal to and paste the key here. Then go to home dot js file here. And now imports few things. In the Web three UI code. I would like to impose loading and use notification. After that. After that, we have to wait in feed. Then I will import ethers. Ethers, but from the Ethernet library, not hardhead. Then import tree model from web to model. Then I will import these two files, that is a contract address. And this one, our web tier Storage API. From config. Then I will import ABA, ABA slash return json. And finally I will import the lab treats told age from 18. Um, we have installed web tree storage or not. Let's see. I don't remember. Dots door age, I guess. We haven't installed web two dots storage. Let us see three dots. To rage npm. We have to install this. Simply. Go. And PM in style. The T dot storage. After successful installation, again, npm start. And here we have this web t dot storage installed. Okay? Now we have this input file, the lactate image. Then after that I will have few things. Let's start with const. Use that image. Is it good to JSON dot parse, local storage, dot get item. So simply I am getting the user image from the local storage as when, when we were authenticating, we had a random over time. Right? So we're using that. We're getting it from the local storage. Then we have gone selected file, selected file to use state. Then we have the loading state. Loading, set. Uploading, sorry not loading, it's uploading. To use the pause. Then we have a BFS loaded URL empty. And finally, we have done notification is to use notification. These are all which, these are all things which are required. Then we will have a sinc function to store the file in our IPFS. Let's write it down. You can get those methods in the documentation as well of web tree storage if you have any confusion here. Simply that const client is equal to new web taste storage. Then. So can the tree storage API. Then const root CAD is equal to await. Blind. Vote. Fine, like this. And finally, I will have IPFS URL is equal to this. This is above the Tab. Tab button. Like https slash dollar sign, roots CAD dot b, fs de web dot link than slash dollar. Selected file. Name. Like this. This was a function to store the file only this much. Then we have image click, Okay, and then we have change handler. Cost. Image file is going to target file, then set selected image. We have this. And then set selected file. Event dot target, finds. That's it. Save on. I hope there is no issue. So in this video, we have just worked on the IPFS functions and all. In the next video, we will write the complete functionality to add it to it. Thank you. 22. Function to add a Tweet: Hi. In this video we will write down Panchen to add it to it. So simply, let's create a new function when Chen and I will name it, add to it. So first of all, I will have an if else statement. If tweet text dot dream is less than five, then we will have a notification showing a delegation of warning. That message will be minimum, five. Dose will be required. Jewish and upright. And here I will simply return. That is, I don't want the other functions to execute. If this is not the case, I will simply write set uploading. True. If image is selected, this, you've selected image is there. Then I will call the store file function. From here. It is this function which will get us the IPFS uploaded URL. After that, I will simply have our connection, that is Web three model is equal to new model. Then same thing, const, connection is equal to await the three dots connect. Cons of height is equal to new. Test that providers Dodd Web three provider. And I will send the connection here. Then const sine is equal to provider that gets Signer. Then I will get the contract. Ito's the contract. It will have the contract address EVA and cyanide. Then I will have that tweet value is equal to 0.01. Cons price is equal to E dot dot plus e value. Because if you remember for adding it to it, we have to send this magic. Try. Catch, block, buster farther. Let's have our transaction is equal to await, contract and tweet. We have those sent to a text, a BFS URL, and our value of price transaction that way. And after I will have a notification, they success. To it. And then successfully Shen Dao upright. Then I will set the selected image. Do another set. Two, it takes two empty set selected. And finally set up polluting false. And if we have an adder, then again, I will show a notification. They added. Here, I will write transaction transaction error message, error message. And after that set uploading to false like this, so that the user knows what is going on. Okay? Then we have to return the HTML file here. Let's check each and every line will be user image. Let's see where we have the user image here. And I will just make it small letter. Use that image. Then we have text area. Then we have deck Sadia here. Value will be text and on tinges. Okay. Then we have tweets section by Liz, their friends onchange display none selected image. Wait one, day, everything is okay. Then we have this section here. On click. Add to eight fun Chen. And inside it will have a if statement like if it is uploading is true, then I will show the loading indicator as a real right, like this. And here I will send uploading prop as well, so that later on when the user adding new to it, then this tweet in fluid component also refreshes that. Sorry. Nothing else. Let's see. Let's see if there is any error. I don't think so. See, we have our random, our time here. So that means that it is working. So we just write, this is my first 28. I will use this image. I will simply write to it, say this is the loading indicator. Now it will start uploading. After uploading, it will call them Meta mask. To add that to it. We have to give 0.01 metric. I'm confirming. Obviously it will take some time. You have to wait. See tweet added successfully. We have a notification here. And if we go to the contract and refreshes, let's see. See, we have this add to it. Three seconds, so I guess, and the value is 0 and so everything is working properly. In the next video, we will write the functionality to show that tweets from the blockchain. Thank you. 23. Function to show Tweets: Hi, welcome back. In this video, we will work on the function to show tweets in our home as well as Profile screen. So go to wait. In feed dot js file. We have to get some things. We have to import fruiting. So I will just see use. I will just copy and paste this here. It will require use, affect, use date, these things. Then after that, we will require they have tweaked SCSS from the core, we will require avatar loading. Use notification. Then in the icons, apart from magic, we will require bin icon as well. Then we require a terse tree model and Twitter contract address. We don't require the web tree Storage API. And finally, we require that we tell contract. You can name it whatever you want. It's not like you have to name the same in all the files. Dot Jason. Okay. We will require some states. So first of all, we should, we're sending some props here. Is first of all, every day I said const on the user is going to do props dot profile. And let the load component is equal to props dot reload. Like this. Then I will have to, it's set to its is equal to use state EMTALA. Then I will have const loading data. Set. Loading state is equal to use state stuff and I will not loaded. And finally, I will have done notification is you're going to use notification. Okay? Now, I will write that function to fetch only users on to relate a sinc funtion, load my tweets. So here I will copy paste few things. That is Web three model, connection and that contract here. So here we have web tree model, then the connection, then the provider, then signer and contract here. It will be simply have not EBI dots signer here. And then I will add cons, data is going to await contract. Get my tweets from the blockchain. Then I will add const. Username is equal to JSON.parse, local storage dot get item username. And similarly, I will have use that image is equal to JSON dot parse. Here it will be used that image. And then I relate const result is equal to await. What I'll miss, dot data, dot map. Here, a sink. First, let's get that. Time. Uniques is a good way to do it. Dot timestamp. Then guns, they will do New. And just converting the timestamp to the local date. Unix time multiplied by thousand. This I got by Google. You can Google it as well. How to convert units, unit a Unix timestamp to the JavaScript date. Funds to date is the due date to local date string f, RC. Okay? Then I will add lead item. I am converting it to an object is equal to weight. Twitter. And this will not be equal. This is the column ID, tweet dot id, text dot txt. Gouache image. That image is deleted. Rate is username. Username. Use that image. Use that image. Date, date. This is the item object, and here I will simply return this item and create an ad in this result radio. But then I will simply said result dot reverse because I'm just reversing the edit and set loading state to loaded like this. After this, I will create a similar function To fetch. All tweets. That is for the home screen. I will name it, load our tweets. So this web to model, these things are common. Here. Now a few things will change, but not everything on track. Then here we get all tweets, get all tweets. Then here we don't require this username and image because this will be random for all the user. Obviously we are getting older tweets. That is why. Then result promise dot unix time to a dot timestamp date. Everything is okay. Then we require get user detail is equal to await. Contract. Dot get user. Here we will send wait dot, Twitter. We will get the user detail. We have this function in our solidity smart contract. Then we need to return is their ID to a text. Image, is the username will be get user detail, and here it will be named and use that image will be rho phi i m g image. Way that that return, then everything is same. Now we have to return HTML accordingly. I will here, right? If loading state is equal to not loaded, then here. And return the class name. Loading. Here, like loading widget 60 and printer color hashtag a 2475. Similarly, we will have if loading state is equal to load in and do a dot length is not there. Then we will return to one tag class name. I will just gave it loadings. And here it will add no weight available. If the user haven't posted anything, then this will be the case. And if not, then here we have everything. Here. Hey les dot map. Then we will have the weight and index. I will cut everything and paste it here. Then we have to do some changes. Obviously. Image will be weight. Use that image. Then here, instead of a land mass, I will write username. In that account. I will write to it. Then in that tweet content here, I will tweet text. And in that image I have to check whether the iris image available or not. So I will simply write tweet, tweet image not equal to empty. Then only show this. Then only we have to show here dark image like this. Okay? Then in the interactions masses circle is okay. Numb I said circle, I would simply write 0. Here in does not start. Instead of this style, I will write calendar and simply paste tweet date. And then finally, I will do a check. If, unless the user is true. Then I will show a bin folder that is Dave, class name, interactions num. And I will show been folded. Weight, color F, F 0000. And right now this will have on onClick of null. Null. Okay? And in the else portion, I will write this, might take one. It is here in the else, and we'll just paste them Arctic. That's what this logic is there. If it is a profile section that the user must be able to delete using this bin. I can do his own tweets. Now, everything is done. The only thing I have to do is called a huge effect. Because obviously we have to call this function that is load my tweets and all. I really like, if if this is a user profile, then I will call lord, my tweets. As I will call load all tweets. And this page will refresh. If we send an eating lake here, the load component and all. If this is changed, then this page will get refreshed. Now save and let's see if there is any error or not. Refreshing. See, we have our two. But I none. And I was about to say that the image is not there, but the image is also shown. That that means everything is working flawlessly. In our profile section also, we have this, that is our tweets and all that data is also correct. See here we have this bin folder. But here we have this metric sign, which simply means we can delete that tweets from our profile section. I hope you have enjoyed and learned a lot. In the next video, we will work to show that correct information in this profile section. Thank you. 24. Show User data in Profile page: Hi, welcome back. In this video, we will work on this profile section. Go to profile dot js file. First of all, we have to import few things. This copy, this CDX thing that is used statin use effect. Then we need in bold letters from eaters. Import web tree, model, three model, and then import from icons. Now here we will require a lot of states. Let's start by getting the active account information from that local storage. Jason. Bars. Local storage, dot get item, active account. Similarly, I will just copy and paste few times. Second one will be user name. Here it will be username, then it will be user bio. It will be user bio. Then it's user image. We have the user image, then it's Use the banner. Then the key name is user banner. Then I will have a state called account balance. Account balance is equal to you state. The first state will be 0. I will get that account balance from the wallet as well and show it in our website. So simply write a sinc funtion, get count, balance. Like this. I will have the verb tree model, model, new web tree model. Then that connection, as always, guns connection is we'll await Web three module 18. It will have to model that connect. Then I will let, let. Vida is due new eaters, providers, web to provider. We have to send that connection. Then lead. Valence is equal to await. Either get balance. We have to send that account number, which is in the active account. Local storage. Then I will just converted by lenses a good eaters. Do Tails. Dot format a table. Great, we were very long number. I will adjust genes that balance to substring. Show four digit only 0 to four. That's it. And I will let set account balance, will balance. Then in the US effect, I will call this function get account balance. And I will show those information here that is filed by node, will be user banner. Then profile, image will be used image name. If there is any name, username. Here, it will be active account. Then I will show the magic. I can write the account balance like this. Then you have user bluff bio. I will just write user bio here. Username is their bio image by not everything is there. Let's say, Well, see, I have 4.7. Dramatic, this is my profile picture. Account number, username, any user bio is not there right now because it is a new account. We will update it later on. But this profile section is working flawlessly. Thank you. 25. Function to delete a Tweet: Hi, welcome back. In this video, we will work on the function to delete a tweet. So obviously in that profile section, we have that button of the debt is to delete eight-week. Let's go to this profile that js and C not in profile dot chairs. We have to code to do it in fluid. Here. And here you will see this. We have this been. Simply go here. Then the function name it, delayed weight. We will need that tweet ID for it for that purpose. Then FASTA file I will set downloading state to not loaded. Then I will require days few things to model. Connection of either. Ebi data is equal to here it will delete to eight. Then id, and we have to send to that this is deleted. Then await dot data dot weight. Then I will show in notification, success. Successfully. Audition. Dark, bright. Now also we can give some default. We can change the icon. I will change the icon to this bin. And after that, I will call load my tweets just to refresh it. Okay? Then here in this onclick, we have to write, delete to wait and do it. Dot ID. That's it. That is the unlit change required. Now save all n. Just for simplicity, I have already added another tweet, which I will now delete. See, this is a tweet. Without an image. I will go and click on this icon and see where there's delayed to confirm the night will take some time as always. See, that tweet is deleted successfully, that Twitter is now gone from our profile screen as well as from the home screen. That means that delete functionality is also working perfectly. That's all for this video in the next session. Thank you. 26. Function to update Profile details: Welcome to the final video where we will work on the Settings page to update a user's detail. Go to settings.js file. And let's start working. From the core. I will require loading as well as use notification. Then from React, I will require use date and use effect. Then I will import things. I think if I go to profile, the chairs are home dot js. I will find all of these things here. And we'll just paste that is eaters web to model with a contract address and storage. Then to tell ABI and web storage. Now, in the settings page, I will need, I will let first notification. Is it good to use notification? Then const username? Is it going to Jason, bars, local storage, dot get item, username. Similarly, I will require user bio. Use image and user band out like this. Then I have Prof profile file, then binary file name. The first thing it will have is username bio, the first state it will have user bio. Then I will have bounced. Loading and loading state. Use the bars. Then let phi. Lord, you are going to use image at the very first beginning that Ben upload URL is equal to user panel. I will explain everything. But here, what I'm doing is here name, the very first, at the very first beginning, it will have predefined username, which is in the local storage, showed that. So here I will write, I will write two or it will help as a placeholder, whatever the previous name was. Just for that reason. Now, I will have functions. For that. I will simply again go to home dot js, get dust door file function here, paste it. Here. It will have selected file. It will have selected file and everything is now k. And I will return this IPFS upload URL. This upload URL, I will return it. Every other thing. This will be lead. Because this was not predefined. We're declaring it here. Okay? Then in their banner handler, we have this, which is we don't need to change anything in their profile handler. Event. Said profile. Okay. And we'll just have this huge effect is done with MDF stuff. And it will change according, whenever this loading state changes, it will refresh the page. Then we have to write the function. We have to write the function to update the profile. Now what I will do set loading to true. Then if profile Phi not equal to null, then what we have to do is new lead, new file. Url is equal to await store file. And we have to send in an Add a profile file like this. And then we will write profile load. It is here. It is. Phy payload that you are run. By. Now upload that URL. Okay. I will just go and insert here. This one that is new profile uploaded here. It will be new Raw file uploaded URL if the user has changed anything. Similarly, what I will do is if banner file changes, what I will do is I really hear like new banner uploaded URL. And yet I will like banner file. And then again, here I will change by not uploaded. And here it will change because it's conditions because the user may or may not change profile picture. He just wants to change their username. It's up to him. That is why I'm doing so many IF checks. Okay. Then I will require after that, I will require, again less things. Weight. Had a lot of code. So now I'm just thinking where here, this code again and again we require go to settings here I have this base date. We have to model, we have the connection, gets center. Then we have that Twitter Aba here. We aba dot aba. Then we have that transaction is able to contract. Dot update user. The user name, bio file uploaded URL, banner, uploaded URL like this. Then I will add await transaction that weight and update this changed. Now what we have to do is make sure we update the local storage as well. Username, JSON.parse, stringify, name. Then use bio. Jingle fi, bio. You is image, profile uploaded URL, Banner. By not uploaded URL. Then I will just send a notification. Success. Fine. Successfully audition upright. And finally we will add set loading false. So this one has the function to upload the URL. Finally, we have to return HTML also. Here. Name is dead. On changes. The S simply we have to add value is equal to username. Similarly, here we have to write value is equal to use bio. Then we have the profile image, which is okay. We have that banner images also. Kay? Then I will just show a loading that if it is loading, then show a div lastName Save. And I will just show the loading button here. And if it is not loading any onclick, onclick, I will just call the update. This is this function. I will cut it and paste it here. Now, let's do save all. Let's see, I hope everything is fine. Just name it. Were three. Developer profile picture. I will change to Ben. And here I will write. I will change that. I've tried to change the binary to this one. Obviously it will take some time because they are two images uploaded to IPFS and all simply save. Wait for some time. So it is asking to update. That is why louder transaction confirming. Let's wait. So the profile of the dead successfully this showing. Now, let's go to our profile. See, it is looking so nice. All our information is now updated. We have this profile picture, we have this new banner run. If I go to Home Screen, see here, and also my profile picture is now changed. So all the functionalities and now working perfectly, our app is completed. I hope you have enjoyed and learned a lot. In the next final video, we will just again test that complete application and see if there is any bug or not. Thank you. 27. Test the Complete application: Hi, welcome back to the final video of this course. In this video, we will test that complete application. So let's get started. First of all, I will just copy the local host and create a new incognito window. Here, I haven't installed matter mass. Let's see what happens. See a normal, dumbest install. If I click Okay, then it goes directly to them MetaMask website. So the user have to install it to visit our application to this. So this makes it error-free. And now let's go and change an account. Originally I had this account already connected, and I have also added a new tweet. Now we'll use this account tree and click on Connect metal mask. Often indefinitely it will ask update depth profile. Let's see what our data I get. So see, This is the hour that I get and this is the home page. And this tweet was made from my other account. If I go to profile section in here, it will show no tweet available. And also, if you want, you can just change the color of this black to white. It doesn't look good. And now I will just say this too. It is from second count. And I just say tweak. Confirm that tweet to us, edit successfully. Obviously it took some time, but it is now added with this random r dot. And you can see we have this as well evidenced go to and go to the settings and just change to. I will just write here. Mark Zuckerberg, founder of social media. And just save it. Save profile updated successfully. If I go to profile, name is Mark Zuckerberg. And here is really just showing Mark Zuckerberg. All these sections are working perfectly. In the right hand side. You can just do whatever advertisement you want. Suppose training courses, trending news, trending blogs, whatever you want, you can just hard code it to your website. Now, I would like to show you the functionality which we added. Suppose if we change the account from a con, want to account too. See if I connect it. Again. He actually connected the polygon icon, this one. And now I am again, switch back to my first account. So these all are done within here. It is. In the app.js. We have an account change and change genes and all. So what will happen if I go and change the polygon network to go limp. See, so it's two polygon network. And now if I click here, it is asking us to switch network. And if I switch network, then again, I am sent back to the website or else I won't be able to visit it. So this website has all the functionalities. Everything is working. You can just make it live and eventually it in your portfolio, It's up to you. I hope you have enjoyed. Make sure you watch my other courses as well. Thank you. Have a nice day and keep practicing.