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.