Build and Deploy a Modern Web 3.0 Blockchain App | Solidity, Smart Contracts, Crypto

web 3.0 has the potential to change the internet as we know it forever you're still early in catching the trend right now and building your first blockchain application acquire the skills get a high paying job or create your own web 3.0 projects that can make you money hello there and welcome to a project video where you'll build and deploy a modern real world web 3.0 blockchain application and let me tell you i haven't been this excited for a video for a long time with a stunning design connected to the blockchain metamask pairing interaction with smart contracts sending ethereum through the blockchain network writing solidity code and much more crypt is the best web 3.0 blockchain application that you can currently find on youtube you might be wondering what are the prerequisites for building such a fantastic website don't worry this course is entirely beginner friendly no web 3.0 blockchain or solidity knowledge required think of this as your first real blockchain application we're going to start easy and then move to more complex topics i will explain every step of the way in this video you'll learn how to connect a regular react.js application to the blockchain and pair it to your ethereum wallet using metamask you'll also learn how to write smart contracts on the ethereum network using the solidity programming language essentially in this single video you'll learn how to create a full-fledged web 3.0 application that allows users to send transactions through the blockchain each transaction will then be paired with a gif and it will be forever stored on the blockchain to support this video leave a like comment and subscribe it shouldn't take more than a few seconds and i really appreciate it if this video reaches 20 000 likes i'm recording a second web 3.0 video in the end we'll also deploy the application so that you can share it with your friends put it on your portfolio and get a job you can also turn this into a real web 3.0 application that other people can use please allow me to give you a quick demo of the application that you're going to build in this video as you can see we didn't only include the web 3.0 functionality and leave the page with no styles you're going to build a modern fully responsive website that's going to look like this so once somebody joins the application they need to click connect wallet button this is immediately going to trigger a meta mask connection and it's going to ask us which account do we want to connect in this case that's going to be account 1 so let's click next and let's click connect instantly you'll notice that the address of our account is right here on this nice ethereum card and if we open up metamask you'll be able to see that our account is now connected it might seem like we have five ethereum in our wallet but don't be fooled we'll be doing our entire testing on the robson test network with that said how do we actually send ethereum through our application we can do that by switching our account to account number two and let's copy the address of our second account now we can paste that address right here we can choose the amount of ethereum we want to send let's do 0.01 in this case and in here you can choose the keyword you want to attach to your specific transaction this keyword is going to be saved as data in the blockchain so in this case let's simply write test and you can also pass an additional piece of data which is a message so let's say hello there from account one and finally let's click send now metamask is going to ask us if we want to send one ethereum so let's go ahead and click confirm and then a second notification is going to appear and this is going to be a contract interaction so in here we are actually interacting with our solidity ethereum smart contract so let's click confirm as you can see our transaction is being sent as we speak and our loading is now gone so let's scroll down and see if our transaction is here we also have this nice section that explains our application and right here we have our latest transactions as you can see right here each transaction is stored in the blockchain forever we can see the address of the account that sent that ethereum and not only that if you click it it's going to open up an ether scan and you'll be able to see that this is a real address that's sending real transactions through the blockchain isn't this crazy we can also see who are we sending the ethereum to and the amount of ethereum that we are sending there is also our message and here is our gif in this case i think we type test so this is indeed testing and we can see the correct date and time of our transaction you can see right there we have some other transactions that have been made through our own network and that's it at the bottom we have a simple footer and that makes our entire application the real focus is going to be to implement web3 into our react application make it send transactions through the blockchain and then store those transactions and show them right inside of our application we've got a lot to cover so let's go ahead and get started [Music] before we start building out our project let's first get the hosting and the domain name for our new site hostinger is my personal recommendation and right now they're offering crazy deals so i simply needed to show this to you they offer a great price to quality ratio high speed servers and most importantly 24 7 chat support let's see what's offered with some of the most popular hosting plans and let's grab those deals hostingers plans are incredibly cheap i mean one dollar a month for hosting for one website and you also get a free ssl certificate that means that you'll have https security in my case i'm gonna go with the premium shared hosting because it offers a few great things we'll need when building out our crypt project it gives you a free email account free ssl but most importantly it gives you a free domain name of course if you still decide to get single shared hosting you can later buy the domain name separately all web 3.0 applications need to be fast reliable and secure that's why having a good domain name and an ssl certificate makes all the difference of course improving your load times will definitely make your page stand out from the crowd since i've partnered with hostinger they decided to give you an even bigger discount you can find the link and the discount code in the description enjoy once you visit the link in the description let's choose a plan i've selected premium shared hosting and here we have to choose the period of our hosting with this crazy discount going on right now i'll definitely choose 48 months to save the most money and down below you can choose your payment method and then you can enter your coupon code that's going to be javascript mastery all uppercased that's going to give you an even bigger discount on your hosting package after you purchase it you'll be redirected to hostinger's dashboard i'll see you there as you can see i'm personally using hostinger for my brand for all of my websites if you've purchased premium shared hosting then you should have this claim your free domain button right here if you bought a single shared hosting then you can go to domains and then purchase the domain from here in my case i'll click the claim domain button let's try something like cryptomastery.com and let's check availability and that seems to be free this is actually a great domain so let's go ahead and claim it and our domain name is being set up as we speak and there we go the process took about a minute and it's fully set up what we can do right now is go back to home and then we can set up our premium shared hosting we can click start now and as you can see hostinger offers immediate hosting for wordpress and woocommerce but in this case we can click this button skip i will start from scratch in here we can choose the domain name for our site if you haven't claimed your free domain you can do that right here but if you have you can choose it right here so i'm going to go with cryptomastery.com and let's click select finally we can finish the setup the setup is being initialized and after that is done we'll be able to start coding out our project and then at the end of the video we'll deploy our website while our hosting is setting up i just wanted to quickly let you know that there is a github repository containing the entire code for this project so if you ever get stuck just make sure to visit the github link down in the description and compare your code with the code that's on here that'll help solving all of your issues while you're here i would also appreciate it if you gave this repository a star with that said let's check if our hosting is fully set up and there we go our website is ready let's go to the control panel by clicking the manage site button at the end of this video as i've mentioned we're going to deploy our project using hostinger's file manager so with that said i know you've been waiting for it let's dive straight into the code as we always do in javascript mastery we are going to start from the bare beginnings and that is creating a new folder on our desktop just create an empty folder and call it however you like in this case i'm going to call it web 3.0 as soon as you create it feel free to open an empty visual studio code window or your code editor of choice and then simply drag and drop the folder into it now let's expand our editor and the setup process is going to be a bit different from our usual videos we're going to create one new folder which is going to be called client this is where our react application is going to be and we're going to create another folder which is going to be called smart underscore contract as the name says this is where our solidity contract will go now that we have those two folders we can initialize our react application we can go to view and then terminal we can clear the console and then cd into client now our client side is opened instead of using create react app to initialize our application in this video we're going to use vite this is a new technology that i found and it installs builds and starts your react applications in a few seconds we no longer have to wait until create react app initializes our application so let's get started the only thing you have to do to create your react application is scroll down and run npm init white at latest of course if you haven't used npm before then just make sure to download and install node then you'll be able to run all of the npm commands with that said let's go back to our terminal and right here we can just type npm init vite add latest if you're running this command for the first time the terminal is just going to ask you if you want to install wide so simply press enter in my case the project setup began instantly for our project name let's simply say dot slash because we are already in the folder we want to create our project in let's choose the package name which is going to be crept in my case but feel free to call it however you'd like let's choose a framework i'm going to go with react and a variant is going to be simply react and that's going to be it now we can simply run npm install this process took just 9 seconds and now we can run npm run dev and in only 500 milliseconds it loaded and you can control click localhost 3000 and our react app is initialized i'm still not sure how i haven't heard about white before for all of our styles in this project we're gonna use something called tailwind tailwind allows us to build modern websites without leaving our jsx pages it's a utility css framework which allows you to shape and style your designs without having to write a line of css you just write these utility classes and that's it down below in the description i'm going to leave the link to the installation with create react app but the process is the same with vid so let's go ahead and set up tailwind the only thing we'll have to do is run npm install dash d tailwind css post css and auto prefixer so let's copy it let's stop the terminal from running by pressing ctrl c and then y and let's simply paste npm install and install all of the necessary dependencies once that is done we can also run mpx tailwind css in it so right here paste it and that created a tailwind css config file there we go and also a post css config file now we can copy our template paths so let's go ahead and copy this and paste it to tailwind config right here now we have to add the tailwind directives to our css so let's simply copy this and inside of the source index.css we can delete all of this and simply paste tailwind base tailwith components and tailwind utilities finally we can copy this h1 go to our app.jsx remove all of the jsx from here because we won't need that and simply paste that h1 we can also remove the logo the app.css and the count right here and of course we are writing the most modern code so let's convert this into an arrow function there we go this is our react application finally to check if this works we can open up the terminal you can either press ctrl tilde or go to view and then terminal and finally we can run mpm run dev control click the localhost and there we go if the words are bolded and underlined that means that our react application and tail when gridded are completely installed great that was it for our front-end part now let's initialize all of the code that we're going to need for our smart contract we can stop this terminal from running by pressing control c and then y we can cd dot dot to go back into the root of our directory and then we can cd into smart underscore contract right here we're going to run npm init dash y this is going to initialize an empty package json and that's going to be the starting point of our smart contract but of course first we need to be able to see something to code out the functionality so we're going to focus on our react application first primarily the homepage part that allows us to send transactions and then once that is done we can go back and implement the functionality of our smart contract with that said let's start creating our react application let's start with our react application by creating a basic file and folder structure we can do that by creating a new folder inside of the source folder called components and then inside of there we can start listing all of our components the first component is going to be navbar.jsx inside of there we can create a basic functional component by typing const navbar is equal to a functional component there we're going to simply return an h1 that's going to say navbar and just below we need to say export default navbar there we go now we can copy this and then we're going to paste it into every single new component so the second component on our list is going to be footer.jsx we can paste it here and now we can hold the alt key and double click all of the parts where it says navbar with that we can simply rename everything to footer the third component on our list is going to be loader.jsx this is going to be a loading spinner so again make sure to paste it and then hold alt and then double click all of the words and simply rename it to the name of that component in this case that's loader the third component is going to be called services.jsx we can simply paste it and rename everything to services the fourth component is going to be transactions.jsx and you might be wondering what is the difference between js and jsx jsx just means that we're gonna write jsx code meaning the react code inside of that file it doesn't make any difference you could have used the js extension with all these with that said let's continue i'm going to paste our component and again rename it to transactions and the final component on our list is called welcome.jsx that's going to be the first part of our application so we can simply rename everything to welcome now to allow our application to import all of these components in one line we can create one final index.js file inside of the components folder this is going to allow us to export all of the components from a single file so we can say export default as loader from dot slash loader now we can repeat this a few more times and we can rename this from loader to navbar and then we need to repeat the process for every single component so let's do footer next then we're going to have the welcome page we need to have the transactions and finally services now that we have all of our components we can go into app.jsx and we can import them right here let's type import in curly braces navbar welcome footer services and transactions and all that is coming from dot slash components now inside of our app instead of having this h1 we can create a div that's going to have a class name equal to min dash h dash screen this is going to be a div with a specific width and then inside of there we can create another div that's going to have a class name equal to gradient dash bg dash welcome and inside of there we can put our nav bar and we can also put our welcome and just below that div we're gonna have the services we're gonna have the transactions and finally we're gonna have our footer with that said our basic file and folder structure is now fully set up this definitely took a few minutes but now whenever we start implementing another piece of code we can simply control click and we can start implementing that specific component the structure is done now we are ready to start coding now before we start implementing the code i like to have a clean working environment so we can hold ctrl and then press w a few times to close all of our currently open files the only thing we need right now is client source app.jsx we can also open up the terminal and we can cd into client and run it for one final time so that's going to be npm run dev let's open it up and as you can see we have navbar welcome services transactions and footer now this is just a blank paper with five different components but soon enough these are going to be entire sections of our front-end application let's start by importing some default css styles we're going to code out all of the components together but to give us a jump start on this video i'm going to just give you a list of all of the generic styles and backgrounds and gradients that way we won't have to write them by hand so let's go to index.css and right here you can paste the file that you can find in the description it's going to be under styles and other code there's going to be a github gist containing the entire index.css file as you can see we're not doing any logic here we're simply importing a specific font setting up some default styling and then importing all of the gradients i'm going to give you a moment to get this index.css file and then we can dive right in if you've imported the file correctly you should notice that there is a gradient on our navbar and on our welcome section so now is the time that we start coding them out let's start with our navbar so we can go to app.jsx and then simply control click the navbar component inside of here we can import a few icons by saying import h i menu alt for from react dash icons forward slash hi and below that we can import ai outline close and that's going to be coming from react dash icons forward slash ai in here we're also going to import the logo so we can say import logo from dot slash dot slash images logo dot png this logo is something that we don't yet have we don't have the images folder so i've also prepared an entire zipped folder of all of the assets that we're going to use throughout this project to get it go down in the description unzip it and then you can paste the images folder right here inside of the client directory just paste it that's going to give you an animated svg hello.svg and also a logo.png now if you control click images right here you can notice it's going to lead you to the crypt logo let's go back to our navbar and we can finally start writing out some jsx our navigation bar is going to be wrapped with an html5 semantic nav tag that nav tag is going to have a class name equal to w dash full flex md colon justify dash center and if you're not sure what some of these class names mean just make sure to check out detailing documentation if you go to tailwindcss.com forward slash docs the link is also going to be in the description you can search for every single property just right here in the search let's search for w dash full and you can notice that w full simply means that the div is going to take the entire percentage of the width and that's the situation with every single other property for example flex let's check it out this is going to set the display of our div to flex so whenever you're not sure what some of these properties mean just go to the docs and search for that specific name this means that on medium devices the justify is going to be center and on other devices justify is going to be between we can also have the items in the center and set the padding or p-4 now it would be great if we could see the changes that we code live in the browser so let's put our browser and the editor side by side and there we go i've opened up the browser side by side with the editor and we are immediately greeted with an error right now we are never actually importing react icons and for that matter we're not importing any single package we can see that if we go to package.json we only have the default installed packages so let's go ahead and install all of the necessary dependencies that our react application is going to use we can open up the terminal press ctrl c to stop it from running and then y in here we can type npm install and let's of course install a package called react dash icons and the only other package we're going to use is called ethers this is going to allow us to interact with the blockchain and with our smart contract everything else we're going to code on our own so let's press enter and wait until these two packages are installed and while i was speaking they were already installed so we can rerun our application by running npm run dev and again make sure that you install them and run the npm run dev inside of the client directory great as you can see now we no longer have the error but we cannot really see anything yet in the navigation bar so let's continue coding it inside of our nav we're gonna have a div and this div is going to have a class name where on medium devices we can say flex dash 0.5 in square brackets then usually it's going to be flex initial justify dash center and items dash center inside of here we're going to render our image so we can create a new image tag where the source is going to be equal to logo alternative tag is going to be logo and we can give it a class name equal to w-32 and cursor dash pointer and there we go here is our crypt logo just below this div we can create a ul and an ordered list and we can give it a class name equal to text white md column flex hidden list dash none flex dash row justify dash between items dash center and finally flex dash initial now of course if you save that nothing's going to happen because we have to add some list items we're going to create a new component right here above this one that's going to be a simple component for our nav bar item it's going to be a functional component and it's going to accept a few props it's going to be title and class props like this and the only thing it's going to do is it's simply going to return an li a list item that list item is going to have a class name equal to but it's going to be a dynamic block like this margin x dash 4 which means margin on horizontal axis then we're going to have cursor dash pointer and finally we can render out all of the class props that we pass into it and inside of our li we're going to simply render the title that means that now we can call our navigation bar item right here as a component and that's the beauty of react reusing it of course we don't simply want to have one navbar item so let's create a new dynamic block create an array where the first item is going to be market the second item is going to be exchange the third item is going to be tutorials and for the fourth one let's do something like wallets and then we can call a dot map method on it r.map is instantly going to return something meaning that we won't have curly braces here just regular parentheses and in our function parameters we're going to pass the item we're looping over which is going to be either market exchange tutorials or wallets and we can also get the index of our specific loop so for each iteration we want to show the navbar item like this as a self-closing tag and we're going to provide a key equal to item plus index to make it really unique and the title can simply be the item now if we save that you can notice that we have market exchange tutorials and wallets now let's also say that people can log in to our application so we can create one final ally that's simply going to say login inside of there let's give it a class name equal to bg dash and then in square brackets with a hash sign 2 9 5 2 e3 i found that color to work really good that's a basic blue color we can give it a padding y dash too just to give it some top and bottom padding we can also give it padding x-7 there we go and let's give it margin x-4 let's make it rounded dash full and also make cursor dash pointer and finally on hover let's change the background to be 2 5 4 6 b d and let's save it there we go so now we have that hover effect of course doesn't look that good right now because we are zoomed in to 300 percent but if we reset it you can notice that this is looking like a real navigation bar great now of course as you've noticed when we zoom it in this feels more like a mobile view and this is not good for mobile devices so let's implement the navigation bar for mobile devices below this ul we can create a div and that div is going to have a class name equal to flex and relative we'll also have to have a state that's going to indicate whether the mobile navigation bar is currently opened or not so we can say const toggle menu and set toggle menu that's going to be equal to react dot use state and let's simply pass false at the start it's going to be closed on mobile devices now inside of the div we can open a dynamic block of code and we're going to check if the toggle menu is currently turned on we can go into a new line and say if it is currently turned on meaning if part of this ternary operation in that case we can render the ai outline close icon as a self-closing tag and else we can render the hi menu alt4 also as a self-closing tag now we can hold the alt key and press on both lines right here and here because most of the properties are going to be similar font size is going to be 28 then we're gonna have a class name equal to text dash white md column hidden cursor dash pointer and we also need to provide an on click where we're going to have a callback function and we can set the toggle menu to be equal to if it is currently open we want to set it to false or closed and if it's not we want to open it up so let's save this and let's also reload our page open up the inspect element and notice where our error is it looks like we haven't imported react in this file and that error is coming from here where we're trying to use use state recently with a new update of react you no longer have to import react in jsx files but it looks like that in most cases you'll definitely need to import either react or just some specific hooks like in this case use state from react there we go let's save it and there we go we have our navigation bar and if you click it it changes the state from the menu to the close icon so now when our menu is actually toggled on we need to be able to show it so just below we can open a new dynamic block and say if toggle menu and and meaning that the code inside of this is going to show only when the toggle menu is set to true we can show a ul inside of there we can render an li and this ally is going to have a class name equal to text dash xl w dash full and margin y dash 2. inside of there we want to show the ai outline close icon that's simply going to have an on click property with a callback function and we simply want to set the toggle menu to be equal to false like this there we go this is only if the navigation bar is opened and then below that we need to again loop through all the items so we can simply copy this where we're mapping our market exchange tutorials and wallets let's copy it and paste it just below this li since this is a mobile navigation bar we're going to make use of that class props so let's pass class props is equal to mi-2 for margin and tax dash lg let's save it and there is our mobile navigation bar now it might be better to simply open up inspect and go to the mobile view there we go but now we can see both the desktop view and the mobile view we definitely have to fix that and i've noticed the error that i have in here instead of hidden i have an extra t at the end so if i remove it you'll notice that our desktop navigation bar disappears the only thing left to do is to provide the class names for our mobile navigation so just below right here we're gonna have a lot of classes for our ul so let's start by saying class names or class name is equal to a string and it's going to have the z index equal to 10 it's going to be fixed the top property is going to be set to 0 and also right property is going to be set to two padding is going to be set to three let's save it and see if that made any difference okay now you can see that this is coming on top of our navigation bar then we're going to have width dash and then in square brackets 70 vertical width like this there we go now it appears almost in the middle let's also set the entire height so height screen like this we can give it a shadow dash 2xl and on medium devices we can make it hidden then the list is going to be set to none because we don't want to have that list items and let's go into the new row it's going to be a bit easier to read and write let's make it flex flex dash call justify dash start items dash and there we go now we're starting to position it rounded dash md and we're gonna add a special class which is going to be our own gradient blue dash glass morphism that's going to give it that glossy glass effect let's make the text dash white and also animate dash slide dash in there we go so now this is looking more like a proper mobile navigation bar and it looks like it's not touching the right side so right here where we have right dash 2 let's put minus in front of it to move it to the right side this basically means -2 on the right side now if you close it that looks great and yes this is a proper mobile navigation bar later on once we have the gradients all over the place for services and transactions it's going to look even better because there won't be a white background behind it but that's going to be it for our mobile navigation bar now let's toggle off the device toolbar and this is how it looks like on desktop with that said our navigation bar is now done and we are ready for the main part of our show which is the welcome page with that great ethereum card and the ability to send transactions to start creating our welcome page we can control click into the welcome component we can start by importing a few icons by typing ai fill play circle and that's going to be coming from react dash icons forward slash ai then we can also import si ethereum and that's going to be coming from react dash icons forward slash si and finally we can import bs info circle and that's coming from react dash icons forward slash bs inside of here we're also going to import our loader component because later on something is going to load here so we can import that from dot slash that's it because we are already in the components folder now we can start with the jsx part of our welcome component we're going to have one div that's going to wrap everything right here that div is going to have a class name equal to flex w dash full justify dash center and items dash center this is centering the entire welcome part then we're going to have one more div that's going to have a class name equal to flex md flex dash row flex dash call items start justify dash between md padding 20 padding y 12 and padding x4 there we go you can see it provided some paddings and there is one final div inside of that div that's going to have a class name equal to flex flex dash one justify dash start flex dash call and md mr which is margin right 10 there we go now inside of there we can create an h1 this h1 is simply going to say something like send crypto and then we can have a br tag and say across the world if we save it it should be somewhere around here but it's black so it's not easily visible there we go so let's provide some class names we can say class name is equal to text dash 3xl that's going to make it a lot bigger on smaller devices we can say text dash 5 xl to make it even bigger on small devices we can make it text white give it a text gradient and finally padding y dash one there we go this is already looking so much better now below that h1 we can have a padding that padding is going to say something like explore the crypto world buy and sell crypto currencies easily on crypto this is just some placeholder text again we have to add some class names so we can say class name is equal to text dash left margin top dash five text dash white font dash light on medium devices width is going to be 9 divided by 12 and on all other devices it's going to be w dash 11 out of 12 spaces and we can also say the text base is going to be the size there we go now we have the left part of our welcome section now below that b tag we're going to have a button that button is going to have a type equal to button it's also going to have an on click and on click we want to connect to the wallet so we're going to have a connect wallet function which we can create right here const connect wallet is going to be a basic arrow function again it's not going to do anything yet but later on we're going to implement the functionality now this button is also going to have a few class names so we can say class name is equal to flex it's also going to be flex dash row justify dash center items dash center margin y meaning on top and bottom five b g dash and then in square brackets hash two nine five two e three that's that blue color padding dash three rounded dash full cursor dash pointer and then on hover we want to change the background color bg dash in square brackets that's going to be hash 2 5 4 6 b d and of course to be able to see something we have to write something inside of that button and that's going to be connect wallet of course we need to make our text wide so let's also wrap our connect wallet in a paragraph like this and that paragraph is going to have a class name equal to text dash white text dash base and font dash semi bold there we go looking better already now below that button we're going to create a div that's going to serve as a grid for all of our features so right here we can say class name is equal to grid on small devices grid dash calls dash 3 usually grid dash calls dash 2 with dash 4 and margin top is 10. now we can create a div for each specific cell so the first div is going to have the class name equal to and it's going to be a dynamic block like this rounded dash tl which stands for top left dash 2xl and then we also want to provide a variable which is going to be common styles like this this common styles is going to be just a string of common styles but it's going to be quite long so we're simply going to type it out by hand at the top and import it later on so const common styles is equal to a string and again just you don't have to write everything by hand and copy what i do i'm simply going to paste the styles right here it's going to have some minimum height paddings and setting up the flex containers with the borders the link to this line is also going to be in a github gist down below and as soon as you save it you'll notice that we have our first cell of our grid inside of there we can say something like reliability now below that we can create one more div that's going to have a class name equal to common styles again so we're reusing the same styles and in here we can say security now below that we can have one more div which we can basically replicate from here that div is going to say ethereum and instead of rounded top left it's going to be rounded top right or tr there we go then we can duplicate that below the bottom one can say web 3.0 like this this doesn't have to be uppercased and this is going to be rounded bottom left like this then we can duplicate this one where it says security there we go put it below and it's simply going to say low fees and the last one we need we're going to duplicate the web 3.0 and just change this to bottom right now we have our grid of features where we're mentioning all of the specific services that we provide and i've almost missed it the last cell is going to say blockchain now below three of these divs so right here we can create a new div and everything inside of here is going to be the right side of our desktop welcome view meaning our form and that nice card that you saw the start this here is what i'm referring to this is the finished application and now we're building this card component which is looking pretty great but that's mostly just a div with some gradients and then we're going to implement this form just below so let's go back and start implementing that card element first we have to create a few divs that are going to separate our left layout from the right layout so let's say div with a class name is equal to flex flex dash call dash one items dash center justify dash start w dash full then we're gonna have the md empty zero meaning on medium devices that margin top is going to be 0 and then usually margin top is going to be set to 10. of course we cannot see any differences because our div is empty so let's create the inner div right here that div is going to have a class name equal to padding dash 3 justify dash and items start flex dash column or call rounded xl height is going to be set to 40 so h40 on small devices the width is going to be set to 72 usually the width is going to be set to full margin y meaning on top and bottom is going to be five we have that special class called if dash card and finally we have that white dash glass morphism there we go and these are the classes coming from our initial index.css you can notice that in here we have that gradient welcome gradient services as well as the white glass morphism and that ethereum card and don't worry this wasn't written by hand there are a lot of online free services that allow you to create gradients for you with that said now we have this great looking ethereum card inside of it we can create a new div and this div is going to have a class name flex justify dash between flex dash call w dash full and height dash full we're basically making it a flex container now inside of there we can create a new div that's going to have a class name flex justify dash between and items dash start finally we can have one final div that's going to be a wrapper for the icon and that div is going to have a class name equal to w dash 10 height dash 10 rounded dash full border dash 2 border dash white there we go you can immediately notice it on the right side and it's also going to be flex justify dash center and items dash center inside of it we're going to put that ethereum icon so we can say s i ethereum and we can give it a font size like this equal to 21 and color is going to be equal to fff and there we go now we added that ethereum logo to the card now just below this div we can also put the bs info circle which is another icon it's going to have a font size equal to 17 and it's also going to have a color equal to fff there we go now below this div we're gonna have one more div this div won't have any class names but inside of there we can render a paragraph that paragraph is going to have a class name of text white font dash light and text sm inside of there later on we're going to render the address of the blockchain wallet that's currently connected to our application so right here we can now simply say 0x and then put some random letters dot and then close it again this is how usual addresses look like they are written in hexadecimal and finally we can duplicate this paragraph below it's going to have text white font is going to be semi-bold we can also put the text to be lg and give it a margin top 1. inside of there we can simply say ethereum and for now we can just say address here i think that looks a bit better there we go great so now we have the top part of our form which is this great looking card now we are ready to actually implement the form and to do that we have to go a few divs down so that's going to be 1 2 3 and now right here we're going to create one more div so this div is going to be our form this div is going to have a class name equal to padding dash 5 or p-5 on small devices the width is going to be set to 96 w dash full flex flex dash call justify dash start items center and blue dash glass morphism there we go you can notice that blue div right there but now we have to add some inputs inside of it and we're gonna have a lot of similar inputs so it might simply be easier to create a new component which is going to form our input so right here at the top we can create an input component which is going to be a basic arrow function and that input is instantly going to return some jsx code so instead of curly braces we can just use parentheses here and we can create a basic html input tag that input is going to have a place holder and a placeholder is going to be equal to placeholder so you might be wondering where is this placeholder variable coming from well we're going to pass it through the props so what are going to be some other things that we're going to pass through props well let's try to create a basic version of our input component it's going to look like this it's going to be a self-closing input tag we're going to give it a placeholder is equal to and our first field is going to be the address 2. so who are we sending the ethereum to then it has to have a name equal to address to in a camel case like this then it has to have a type which is going to be equal to text and finally it has to have a handle change which is going to be equal to handle change that handle change is a function that we haven't yet created so for now i'm simply going to put a basic callback function and as you can see we have our input right here now we know which props are we passing so we can get all of them right here we're gonna get the placeholder name type value and handle change below the placeholder we can say type is equal to type we can also set the step of our number input to be 0.0001 because ethereum values are incredibly high so even the smallest of amounts makes a huge difference then we need to pass in the value equal to value and then we are also going to pass d on change which is going to be equal to a callback function where we are going to get an event right here and we can call that handle change that we're passing through props and pass the name and the event like so and finally let's give some class names to this input classname is equal to and that's going to be a string of margin y dash 2. now let's save it right now it looks bad so let's add a few more classes w dash full this is going to make it extend rounded dash small this is going to make it rounded a bit padding dash 2 to apply some padding outline dash none bg dash transparent there we go text white border dash none text dash small white dash glass morphism and that's going to be it our input immediately looks so much better and you can see how much these utility classes that tailin provides us make things easy for us now we can duplicate this input a few more times just below that's the only reason why we created a new custom component in the first place so one two three we want to have four of these inputs our second input is going to be the amount of ethereum so we can say amount in ether and that's going to be amount which is the name of our input and the type is going to be set to number the handle change we can leave empty for now then the third input is going to be the keyword in parentheses this is going to be a gif or gif however we want to pronounce it and then that's going to be the keyword name and then our last field is going to be enter message that's going to be the message we want to transfer over the blockchain and the name is going to be the message type is going to be text and there we go this is already looking so much better below of our inputs we're going to have one more div but this is going to be a self-closing div it's going to have a class name equal to h dash and then in square brackets 1px like this w dash full bg dash gray-400 and margin y dash 2. this is going to be a line just like this one and right here just below that we can have the is loading state so if it is loading then we want to show something like this else we want to show something else we don't have access to this is loading variable yet so let's simply try setting this to true and then we're going to render out our loader like this if we save that you're gonna notice that we also have to type something in here so for now let's simply put that as a div and i think in here with dark flares it does say a loader later on we're going to implement that loader component but now if we are not loading so if it's false then we want to show a button and that button is going to have a type which is going to be equal to button that button is also going to have an onclick property which is going to be handle submit and this is going to be a function that we need to create just at the top so right here let's say const handle submit is a functional component right here that button is going to say send now like this and let's give it some class names so class name is going to be equal to text dash white there we go send now w dash full margin top or mt-2 border dash and then in square brackets 1 px like this p 2 border dash and then we have to type a color so let's do square brackets hash 3d4 f7c like this let's make it rounded dash full and finally every button needs a cursor dash pointer there we go that is our send now button so now let's also implement this loader component we can do that by doing a control click and our loader component is simply going to be a div a div that's going to have a class name equal to flex justify dash center items dash center and padding dash y3 and finally we're gonna have one inner self-closing div that's going to have a class name equal to animate dash spin also rounded dash full h-32 with dash 32 border dash b-2 and border dash red-700 now if we go back to welcome and set this to true you're gonna notice that nice red spinning border of course later on we're gonna have the is loading state here that's going to dynamically change as soon as we click the send now button now let's expand our browser just a bit to see how does it look like on desktop devices there we go now let's check out the finished version and it looks like this is panning a bit more to left and right it's taking a bit more space if you take a look this is all closed down to the middle so let's see what do we have to do to achieve this kind of look i'm going to collapse this one more time and to achieve this kind of look we're going to create a custom media query so far we've used medium right here but let's use something like mf which is going to stand for full we're going to use that mf right here we're going to also use that mf right here and finally we're going to use it in one last place which is going to be on line 66 right here right here where we say md is equal to empty zero that's going to be mf and if we zoom this out a bit we should have two mds left and we should have three mf's that way you'll know that everything is right so now you might be wondering what is this mf if you went to tailwind they're not going to have a specific medium full or something like that media query this is a media query that's going to be appended to tailwind by us more specifically you can open up your file explorer and then go to tailwind.config.js inside of here we just have the basic config but again in the description there's going to be a link to a github gist that's going to contain the updated tailwind.config.js the only thing that's changing here is the font as well as we're adding that specific screen which is medium full and that's going to provide it a bit more width we're going to also add the slide in animations so just go into the github just below copy the tailwind config and paste it straight into here and as soon as you've done that we can now expand this and zoom it in a bit and this is looking great i actually preferred having the window zoomed in so that you guys can see everything so much better with that said let's now bring this back right here we have our tailbone config and we are completely done with the layout part of our welcome component now we are able to write the address we want to send the ethereum to write the amount of ethereum the keyword and the message so now we are actually going to connect this to the blockchain and then we're going to write a solidity smart contract that keeps track of all of the transactions that went through the blockchain exciting part coming up right now to start creating the blockchain part of our application we can close all the files and folders right here collapse them and then open up the smart contract parts of the page we can also go to view terminal press ctrl c to stop it from running and then we can cd dot to get back into the root of directory and then cd into smart underscore contract great we've already set up the basic package json but right now it doesn't have any dependencies so down in the description you'll be able to find a list of all the dependencies that you need to install instead of typing them out by hand simply find this command and press enter this process is going to take about a minute and as soon as it's done we'll start creating our smart contract to create a basic structure for our smart contract we're going to use hard hat hard hat is ethereum development environment for professionals and it allows you to run solidity locally so it's going to allow us to test our smart contract first before deploying it there we go our packages have been installed and we are ready to run our first command which is mpx hard hat this is going to create a basic project structure so let's just click enter create a basic sample project let's click enter one more time because we want to create it inside of here and finally yes we want to add a git ignore so press enter one more time you'll notice that we immediately get a few files and folders for example this hard hat config file right here as well as the tests scripts and most importantly contracts we're going to explore all of these the first thing we can do to make sure that everything is running correctly is run mpx hard hat test this command just to run our test script which then created a basic greeter solidity contract of course this was just a test we're going to create our own contracts right away before we start writing the solidity code it's going to be a lot easier if you go to extensions and then install the solidity extension this is simply going to provide you some syntax highlighting so your code is going to look better and it's going to be easier to write it so just make sure to install it after you've done that we can go back into our explorer and we can delete the greeter.soul contract that is the demo contract created for us by hardhat we can delete it and we can create a new smart contract called transactions dot sol as in solidity inside of here we can start writing the code for our first ever solidity smart contract solidity is a fairly new programming language used for ethereum blockchain and it's a combination of a few languages the creators of solidity got inspired by javascript java c plus plus rust and many other languages therefore not only making solidity extremely versatile but also making it intuitive as we start to write code in solidity you're gonna notice that all of that seems similar maybe from java javascript but it's definitely going to make sense as it's almost written in pure english first we can start by choosing the version of solidity we want to use in this case i'm going to write pragma solidity and then the carrot sign which is shift and 6 on my keyboard and then 0.8.0 and we need to write semicolons at the end you'll also notice that we get a warning right here saying that we need a license so right here we can copy this spdx license identifier unlicensed so simply make sure to copy it and put that as the comment above your code that's going to make that warning go away and now that we have our license and we've chosen the version of solidity we want to use we can immediately create our contract so you can simply write contract you can give it a name in this case the name is going to be the same as the name of our file which is going to be transactions this contract is serving a purpose of a class in object-oriented programming languages one difference between solidity and javascript is that in javascript you can simply say let and then say for example test is equal to five and then later on you can redeclare that test to be a string of five in most other regular programming languages you cannot do that because they are statically typed meaning you have to define the type of the variable at the start that can either be a string or a number like integer so in this case let's define our first variable by saying you and 256 and we can call it transaction count this is going to be a simple number variable that's going to hold the number of our transactions just after that we can create something known as an event we have to give a name to this event which is going to be called transfer think of this like a function that we're going to emit or call later on this function is going to accept a few parameters each one of our transactions or transfers has to have an address from and this address here is going to be the type and the from is going to be a variable name then we also need to have the address of the receiver so that's going to be our second parameter then we want to have a number meaning you and again that is just a type and the name of the variable is going to be amount we also need to have a string equal to message which is just the name we need to have another you and 256 which is going to be a timestamp so this is going to be a number that's going to say when did we send that transfer and finally we can have one last string which is going to be the keyword this is going to form our event which later on has to be emitted from somewhere now similar to creating this event we can also create a struct or a structure let's call it transfer struct and that's going to be similar to an object but we're not actually declaring an object here we're just specifying what properties is this object have and of what type are they going to be so we can say it's going to have an address and the name of that property is going to be sender this is the type this is the name of the property it's also going to have another address which is going to be a receiver it's also going to have a u end which is going to be amount it's going to have a string which is going to be message uint 256 is going to be timestamp and finally a string that's going to be a keyword now we know what properties does our transfer or transaction needs to have we can also define an array of different transactions because we want to store all of them to define our array we can call it transactions like this but we have to define of what type are these transactions going to be so we can say transfer struct and then an array sign this means that our transactions variable is going to be an array of transfer structures meaning an array of objects hopefully so far everything here makes sense now we're going to create different functions we're going to have one function which is going to be called add to blockchain again this is just a name that we personally chose it's going to look like this just like a regular javascript function but we immediately get a warning saying no visibility is specified did you intend to add public since this is a class you have to define the visibility of this specific function so we're going to say that this function is public meaning everybody can access this function now we can copy this to create two other functions that we're going to use the second function is going to be called get all transactions this is also going to be a public function but it's going to be public view returns and now we need to specify what is this function going to return and it's going to return transfer struct meaning an array of different structures and it's going to get it from memory of course later on in here we're going to return transactions like this and our last function is going to be called get transaction count and it's also going to be public and it's also going to say view returns in this case we simply want to return a number and the number we're going to return is going to be return transaction count remember that's the variable we created at the start now i know that this public view returns and then transfers struct and then returns a number we don't have that in javascript and that might be a blessing and a curse statically typed programming languages are great because they set some rules in that way they are defending you from yourself to create some mistakes or errors or bugs in your code now you know that this function needs to return the transaction count which is a number that getall transactions needs to return a transfer struct array which is just an array of objects and so on you also know that the add to blockchain doesn't return anything it's just doing some actions so add to blockchain is going to be the main part of our smart contract so what are we going to do in here well first we're going to increment the transaction count so we can say transaction count plus equal to one there is one more transaction right now than there was before and in here the linter immediately says undeclared identifier looks like i called it counter at the start but i meant to use just count so i'm gonna rename it and we no longer have an error okay so now we just have a number one transaction two three four and so on but we haven't actually pushed our transaction into our array of transactions so whenever we call the add to blockchain from our react application we're going to pass specific parameters into it more specifically we're going to pass the address payable receiver the first parameter we're going to pass is going to be the receiver and that's going to be a payable address then the second thing we can pass is going to be the u end which is a number which is going to be called amount we can also pass a string memory message and this memory here it just means that this is some specific data stored in the memory of that transaction whereas receiver is something that must be there because it's an address amount also must be there but this message is just some additional data that we're passing through that blockchain and finally we're gonna have one more string memory field and that's going to be our keyword now we have access to all of these variables and we can do something with them more specifically we can call our transactions array and call a dot push method on it yes solidity also has a dot push method and it behaves almost in the same way as it does in javascript we're going to say what do we want to push and that is our transfer struct as you can see right here and the last thing we have to do is pass in all the parameters that our transfer struct needs let's start with the first one which is the sender and we actually have that already in the object called message message.sender this is something that you immediately get whenever you call a specific function in the blockchain it's already going to be stored there the second thing we're gonna get is going to be a receiver and the receiver is just coming through our parameters then we're going to have the amount which is also coming through params then we're going to have a message we're going to have the timestamp which is going to be equal to block.timestamp so that's going to be the timestamp of the specific block that was being executed on the blockchain and finally we're gonna have a keyword this is it we're pushing a specific transaction into the transactions array this here is not actually transferring the amount or doing anything because we haven't yet emitted the transfer event right now we're just adding this transaction to the list of all transactions but we are not actually making the transfer to do that we have to emit this event so to do that we can say emit transfer and then we can pass all the same things that we're passing right here let's copy them paste them here first we have message.sender then we have a receiver amount message block.timestamp and the keyword and don't forget to add a semicolon finally now that we know that our transaction count is actually being updated we can uncomment this line so now we can actually send back the transaction count and we also know that our transactions are being added to the list of the transactions make sure that you have semicolons at the end of every single line and this is going to be it this is our ethereum solidity smart contract it's used to transfer the amount and also to store all the transactions that come through it great now there's gonna be a bit of a setup when it comes to deploying and testing this smart contract so writing it is not the only thing you have to do but no worries i'm going to show you how to do everything right now to deploy our smart contract we can go to file explorer and then scripts inside of the scripts you'll be able to find a samplescript.js we can rename that script to deploy.js and we can delete most of the things from here let's delete all the comments and require at the top let's also remake this function as an es6 arrow function by saying const main is equal to async arrow function like this there we go we also don't need these comments we don't need those comments and let's also turn the main into an async await function that's going to look a bit better so let's call const run main is going to be equal to async arrow function if you haven't worked with async await before don't worry it's just a different way of writing and dot catch methods basically dealing with asynchronous code inside of here we can create a new try and catch block let's invent it properly and inside of here we can simply call a weight and then call the main function this is going to execute and deploy our contract once we await the main function we also have to call the process dot exit with a zero which means that the process went successfully okay let's indent that and if we go into the catch we can say console.error and we're gonna pass in the error and simply process dot exit with a 1 which means that there was an error and we also have to run this function run main at the start so we're going to execute the deploy.js file first this line is going to be executed which is going to call the run main function and then that's going to call our main function which is responsible for deploying the contract so what do we need to change here well before the solidity contract was called greeter but now it's called transactions so we can rename this with transactions with a capital t that's going to be equal to await hre dot ethers dot get contract factory and then transactions this is like a function factory or a class that's going to generate instances of that specific contract so just below we're going to have one specific instance of our contract which is going to be called transactions with a lowercase t and that's going to be equal to a weight transactions with a capital t dot deploy and we don't have to pass anything as the first parameter we're going to await transactions dot deployed and then we're going to say transactions with a capital t deployed to and that's going to be transactions dot address with a lower case d so when we run this script our transactions are going to be deployed and then we're going to get the address of our smart contract deployed on the blockchain network but for our contract to be deployed we need to have some ethereum on our own wallet already because everything that you do on the ethereum network requires something known as gas which is small fractions of ethereum used to make something happen so how are we going to get our test ethereum to fund the gas for the deployment of our contract we can go back to our browser and more specifically to the robston testnet faucet the link is going to be down in the description on test networks faucets simply provide you with some test ethereums free of charge the only thing you have to do is enter your wallet address and the ethereum is going to be transferred to your account some of these faucets run out of ethereum from time to time so there are a lot of them available on the internet and since we are using the robsten ethereum test network you can simply google for robs then faucet and then simply open a few of them up if one of these faucets doesn't work you can try the next one and so on you can see we have this one this one seems to be down for whatever reason this one sends you one ethereum and this is the one that i found to work the best keep in mind that retrieving ethereum through the faucet is not an instantaneous process it can take anywhere from around 30 seconds all the way to a few hours but again i found this specific test network to work the best hopefully this is going to allow you to get your ethereum in no time but to be completely sure to receive some ethereum definitely google robsten faucet and then go ahead and enter your address in few of these the link is going to be down in the description of course in here we have to enter our own ethereum wallet address so to get it we'll have to set up our metamask account let's do that right away to set up metamask you can go to your chrome web store or the extension store of the any other browser that you use just make sure to search for metamask although i already have it here and metamask is simply an extension for accessing ethereum enabled distributed applications so this is going to allow us to inject ethereum web 3.0 api into every website's javascript contacts essentially it's going to let us interact with the blockchain and smart contracts so let's go ahead and add it to chrome and add extension it's going to appear at the top and we can also pin it once you click it you're gonna see this nice fox and it's going to follow your cursor around and welcome you to metamask let's click get started if you're first installing metamask you most likely don't already have an account so let's click create a wallet let's click i agree and you have to choose your password in this case i'm going to use a demo password and let's click create now when working with cryptocurrencies your password is not the main thing guarding your account your secret recovery phase is you're going to be given a phrase of 12 words that are the master key to your wallet and your funds so if this is your first time working with cryptocurrencies or wallets make sure to watch this video first you can pause my video right here and then we can click next i'm going to pause it and click next right away and in here you can click to reveal your secret words this has to be secret and you have to save these words somewhere to be able to access your account if you uninstall metamask so i'm not going to reveal them here what you can do is open up notepad on your pc and then simply copy and paste them there then you'll have to click next and in the next step you'll have to type them out one by one okay i copied my words and you simply need to click them in the order that they were first shown to you i'm going to do that myself here without revealing the secret recovery phase and then we can click confirm after you've entered your words correctly you're gonna see a congratulations screen with the tips on storing it safely let's click all done there we go we can close this and this is our first ethereum wallet what you can do right now is go to the top right and we want to show and hide test networks once you click that it's going to lead you to the settings and you want to toggle this on now we can scroll up and we can change from ethereum network to robsten test network there we go now all ethereum shown on our wallets is going to be robsten test ethereum not real ethereum what you can do right now is click on this fox on the top right and simply click here to copy your account address once you do that we can go back to the robston test faucet and paste it right here and say give me robsten ethereum there we go it sent 0.15 ethereum to our test wallet let's click metamask again and let's see if it maybe arrives in about 30 seconds for me the process took about a minute but again it's going to depend from time to time depending on how many people are currently mining ethereum on the robsten test network if this doesn't work for you make sure to test out all of the other faucets available online and also give it some time maybe an hour or two and then we'll be able to continue with the video but it's crucial that you have some ethereum available here it doesn't have to be a lot just 0.000 something is going to be enough but we needed to pay the gas to deploy our smart contract with that said we are now ready for the next step of our video and that next step is to go to alchemy.com alchemy is going to help us with the blockchain development meaning it's going to help us deploy our blockchain smart contract what you can do is click get started for free once you do that you're gonna have to enter your credentials and create your account but as you can see in my case it immediately logged me in so after you create your account you should see a dashboard page that looks like this as you can see i've already been testing with a lot of different ethereum wallets and different networks but i decided that robsten is the best one to test with so now you can click the create app button on the top right and let's give it a name something like crypt of course feel free to use your own name in the description we can say blockchain smart contract the environment is going to be development the chain is going to be ethereum and the network is going to be robsten it's incredibly important that you choose the robsten test network for this to work of course later on you can deploy the same contract on the main ethereum network but for now we're gonna stay on the test network so that we don't have to pay real ethereum gas fees let's click create app let's click view details for our newly created application and now you can click view key in here you're going to get an http key which you need to copy now we can go back to our application more specifically we can go to hardhat.config.js we can delete this entire file and for now simply paste this here as a comment so that you don't lose it to start creating our hard hat config let's first require that's going to be a string add nomiclabs forward slash hard hat and then that's going to be waffle if we google what hard hat waffle is you can see that it is a plugin to build smart contract tests so that's exactly what we're going to use it for going back to our application we can create a module dot exports file and in here we're going to export our hard hat config we first need to specify the version of solidity that we're going to use which is going to be 0.8.0 then we can specify the networks we want to work on that's going to be an object of networks and we can call it robsten our robsten needs to have a url and this is the url that we got from alchemy so right here we can copy this comment and paste it here as a string then we need just one more thing which is going to be accounts right here we need to type accounts which is going to be equal to an array and we need to pass the address of the account that we're going to use to fund this contract more specifically it's not going to be an address it's going to be metamask and then right here you need to click these three dots account details and then export private key that's what we need once you click that you'll need to enter your password click confirm and then you're gonna get a private key that you can copy and simply paste straight into here great now we have our config file we have our solidity smart contract and we have a script that we're gonna use to deploy that contract everything seems to be ready so what do we need to do to deploy it let's open up the view and then terminal let's clear it and let's run the command mpx hard hat run scripts forward slash deploy dot js dash dash network robston and let's press enter as you can see our contract compiled successfully and now we are waiting for the terminal to give us the address of the deployed contract and there we go transactions deployed too and now make sure to copy this we're going to use this back in the client side of our application so let's go to the client side go to the source and let's create a new folder called utils or utility functions inside of here we can create a new file called constants.js inside of here we can say export const contract address and that's going to be equal to to that address you just copied from the terminal right here but that address was not the only thing that was generated once we run the deploy command the other thing that was generated was in the smart contract artifacts contracts transactions that sold and then right here transactions transactions.json this is called an abi and an abi is the contract application binary interface that's the standard way to interact with contracts in the ethereum ecosystem both from outside of the blockchain and for contract to contract interactions this contains all the information about our specific smart contract so we need to copy this entire transactions.json and we need to paste it into utils more specifically create a new file called transactions.json and just paste it right here and then back in constants we can import that api import api from dot slash transactions.json and just alongside exporting our contract address we also need to export const contract avi which is going to be equal to abi dot abi now we have everything we need inside of our react application to interact with our ethereum smart contract and let's also check if we wasted some ethereum gas fees for the contract deployment process if we go back to our application you can notice that now we have 0.1482 which means that 0 0 28 ethereum was wasted or spent on gas fees but let's not worry about that at all that's great because now we actually have a smart contract that's going to save and store all of our transactions in the blockchain now that we've built the react welcome part of our site and deployed an entire ethereum smart contract now we are ready to connect the smart contract to our react application and actually make it send ethereum through the blockchain network let's go ahead and do that right away we're going to start by cding back into our react application with cd dot and then cb client and then we can also run npm run dev to have our application up on localhost 3000 now that that is done we can close all of our files and folders just so we have a clean working environment and we can go to client source and then we can right click the source and create a new folder that folder is going to be called context we're going to use react context api around our entire application that's going to only serve the purpose of connecting to the blockchain that's going to allow us not to write our logic all across all of our components we're only going to write it in one centralized place and that's going to be transaction context dot jsx inside of here we can import react as well as use effect and also use state and these are of course coming from react then we're going to import in curly braces ethers and that's going to be coming from eaters package then we need to import the contract abi as well as the contract address and these are the things that we created just now in dot dot slash utils forward slash constants we also need to create our react context and we can do that by saying export const transaction context is equal to react dot create context great also since we're using metamask we're getting access to the ethereum object which we can get by typing const in curly braces ethereum and that's going to be equal to window we are basically destructuring the ethereum object from window.ethereum and that is one really interesting thing if we go back to our browser go to inspect and then open up the console right here and go to info we can try typing window dot ethereum and would you look at that there is an entire object that's going to allow us to handle our ethereum and blockchain relation and all of this is here only due to the fact that we installed and set up metamask okay now we know that we have our contract api contract address ethereum window object and we are ready to access the blockchain we are first going to create a special function that's going to fetch our ethereum contract and we can do that by saying const get ethereum contract and that's going to be equal to an arrow function inside of there we can type const provider is equal to new ethers and that is the package we installed previously dot providers dot web 3 provider and then we call that as a function and pass in ethereum window object now that we have our provider we can also get the signer const signer is equal to provider dot get signer and we don't have to pass any parameters of course let's go ahead and console.log all of these things right here inside of an object provider as well as signer and we're going to also have the third thing which is going to be const transaction contract is equal to new ethers dot contract and then we pass in the contract address we pass in the contract abi right here and we pass in the signer these are the three ingredients that we need to fetch our contract the contract address remember we have it here from when we deploy the project then the contract api which is this json file and then finally the signer which we're console logging right now so you'll see what that is and we can also console log the transaction contract so once we actually call this function we're gonna get this kansa log but right now we have to create our context because where are we going to call this we have to have a specific place where it's going to serve a purpose for that reason we can create a new export const transaction provider and that's going to be a react arrow function and every context provider needs to get one thing from the props and that thing is children every context provider also needs to return something and this return statement is in most cases just the context so transaction context right here and then dot provider that way we're wrapping our entire react application with all of the data that's going to get passed into it and inside of here we have to render the children that means that whatever we wrap inside of this transaction provider is going to be rented and it's going to have access to this value object let me show you what i mean we're going to take this transaction provider go into domain and right here we can import it let's do so by saying import transaction provider and that's going to be coming from dot slash context forward slash transaction context the only thing we have to do is wrap our application with a so-called transaction provider there we go put this here and that's it now our entire application is going to have access to the data that we pass into it and by data i mean whatever we put in here if i say value is equal to test let's see if we can get this value of test somewhere else in our code for example in the components and then welcome to get our data we need to go to the top of the component and then import that's going to be transaction context coming from dot dot slash context forward slash transaction context and also we have to import react and with react we have to import the use context hook and this is of course coming from react now inside of our component just at the top we can simply say const destructure the value and that's going to be equal to use context and then we call it as a hook and of course we need to provide the name of the context we want to access in this case that's the transaction context finally let's try to console.log the value if that works that means that we are transferring all the data from this file successfully to any of all of our components back in our application we can see that we got test from the line 25 of our welcome jsx file that means that the data has been successfully transferred of course we don't want to simply transfer a value of test we want to transfer some data that's going to help us connect to the blockchain more specifically we're going to have a new function inside of here that's going to be called const check if wallet is connected so check if wallet is connected is an async function like this and inside of there we can check if there is no ethereum object in that case we can return the alert that's gonna say please install metamask because we cannot do any of this if the user hasn't installed metamask then we need to get our metamask connected accounts and we can do that by saying const accounts is equal to a weight ethereum dot request and we need to specify an object that's going to include the method and then in here we can say what do we want to request and that's going to be eth underscore accounts now we can console.log that to see if we are indeed getting something and of course we also need a use effect because we need to call this function so i'm going to create a use effect right here and we're going to call check if wallet is connected right inside of there and it's going to happen only at the start only at the load of our application let's see if we indeed do get our accounts i reloaded the page and we can see just an empty array meaning there are no accounts so it might be a good idea to create a functionality for our connect wallet button that way we'll be able to click this button and connect our localhost application to metamask the function for connecting our wallet is also going to be in our context so right here we can create a new function const connect wallet is equal to async arrow function and we can create a try and catch block because we need to be sure that this succeeds inside of the try we again need to check if they have metamask installed so we're going to add this here then we have to request a metamask account which is going to be really similar to this line so we can copy it right here but this time we're not going to check for ethereum accounts we're going to check for ethereum request accounts request accounts with a capital a right here that way we're gonna get all the accounts and then the user will be able to choose to connect one or in this case we can set the current account to be equal to accounts and then zero that's going to connect that first account set current account is going to be a set state and you can see that because it's starting with set but we haven't yet created it so at the top of our transaction provider we can create a new use state field and that use state field is going to be called connected account and also set connected account and at the start that's going to be equal to an empty string great we also have to provide some error handling so we can console.log the error and we can also throw new error that's going to say no ethereum object like that and of course we need to pass this function right here connect wallet is equal to connect wallet of course if both the key and the value is the same in that case we only need to provide the key and now we're passing this over to all of our components with all of the components of course that's also going to be coming to our welcome so right here we can get the connect wallet or did we say account let me check that's going to be connect to wallet right here and we can now call that function right here looks like we won't need this function right here because we have one in the transaction context and we're calling it on the button now let's save it and see if something happens once we click that button i'm going to reload the page and press connect wallet and there we go there is a meta mask notification asking us if we want to connect this wallet with metamask and we can choose the account one and click next finally let's click connect it's at connecting and now if we reload the page there we go in our transaction context we have our connected account that's great right here inside of the check if wallet is connected we can check if there is an account by saying if accounts dot length and then if there is one we can simply set the current account to be equal to accounts and then zero that way at the start of every single render we're going to have access to our account and then later on in here we also want to get all of the transactions so we're going to have a function call to get all transactions but of course we cannot do that yet because we don't have the part of our page where we can list them out and we also haven't sent a single one yet so we cannot really check that out and then we're gonna have an else part and in here we can simply cons a log no accounts found great of course it would also be a good idea to wrap all of this in a try and catch block so let's do that try and catch the entire code that we have so far is going to go inside of the try and then if we are inside of the catch that means that there is no ethereum object so we can basically copy what we have here and paste it here great so now at the start of our application we're calling if check if wallet is connected right here and we're setting that current account looks like i chose a wrong name right here i said connected account but this here was supposed to be current account and that's going to be set current account there we go now we are setting it and we can also pass it through context right here current account now back in our welcome we can also get access to the current account variable and right here where we have our button we can say if there is a current account or rather if there isn't a current account then we want to render this button but if there is a current account in that case there is no need for us to render this button so now if our account is connected then we shouldn't be able to see this button and that's exactly the case we can no longer see the button which means that our account is connected now we have a function for checking if a wallet is connected at the start and also a function for connecting the account so now might be a good idea to create that one most important function which is going to be called const send transaction that's going to be an async arrow function and this is going to be where our entire logic for sending and storing transactions is going to be we can again create a try and catch block inside of the catch we're going to have this simplicons logging the error and saying there is no ethereum object inside of the try we of course have to first check if the person has metamask installed and then below this we have to get the data from the form so in some way we have to get the data from these item fields right here all the way to our transaction context how are we going to do that think about that for a second where are we going to create those states how are we going to pass that data the answer is we're going to create those states right here inside of our context so right here we can say cons form data as well as the set form data and that is equal to use state and that's going to be an object that's going to have the address to property which is going to be set to an empty string it's also going to have an amount which is going to be a string it's going to have a keyword which is going to be an empty string and a message which is again an empty string so now that we have that form data we also need to create a handle change so we can say const handle change is equal to a function all handle change functions that interact with inputs except the event the keyboard event the key press as the event and also we're going to pass in a name this handle change is dynamically going to update the form data by saying set form data is equal to now whenever you're updating the new state using the old state you have to provide a callback function in the state where as the first parameter react gives you prev state and we're going to instantly return an object and you can do that by first using parentheses and then writing an object and that object is going to have the previous state spread like this and we can update dynamically name to include the e dot target dot value this here is nothing block chain related but it's definitely a hard to understand function this requires some a bit more advanced react knowledge so if this doesn't make a lot of sense try setting up your own small react application where you're just going to have the form with a few inputs and then see how the data changes or how the state changes once you type into those inputs with this handle change function there isn't really an easy way to understand this rather than trying everything yourself on a real project with that said we have our form data set form data and also the handle change function so let's go ahead and pass those to our context object so right here we can pass the form data as well as the set form data and also the handle change now back in our welcome we can accept all of these from the context that's going to be form data set form data as well as the handle change so now if we scroll down right here instead of having an empty callback function in the handle change we can delete that again i held alt and then double clicked and in here we can simply use the handle change function that's going to update these inputs dynamically depending on the name of that specific input so it's really important that the names exactly match what you have in the state right here with that said let's see where do we have to use our set form data or anything else we have our handle submit here so if we click it we have to implement that handle submit function and right here we can destructure all of the properties from the form data by saying const in curly braces address 2 amount keyword and message is equal to form data we simply destructured these properties then below we can call e dot prevent default usually when you submit a form the page reloads but in react applications we want to prevent that from happening and that's why we're calling this function then we have to check if the user has filled in the fields so we can say if no address to or if there is no amount or if there is no keyword or if there is no message in that case we simply want to leave this function and not submit anything so we're going to simply return nothing else if the user successfully filled in all the fields we can call the send transaction function like this we've created that send transaction function which is right here but we haven't passed it through props so we can do that right away right here send transaction and we can get it right here instead of set form data because we're not using that so make sure to get the sent transaction right here so that we can call it at the end now we've created that circle we've created the state variables here passed them through the context value right here into the welcome the welcome is dealing with some data and then it's calling the send transaction button which is then triggering this function where we're gonna get the data from the form i know this might be a bit hard if you don't have a lot of experience with react but keep practicing with state inputs and context and i'm sure you're gonna get the hang of it so now we can destructure the values the same way we did in the welcome we can even copy that line right here and paste it here now we have access to the form data variables we also need to get our ethereum contract and remember that is the function we created right here and we haven't called it before so what we can do is we can call it right inside of the send transaction that's going to be get ethereum contract at the start it's not going to do anything besides simply cons logging the values so let's see what is it going to cause a log looks like we have a typo so let me quickly go here and check where that typo is coming from i'm missing a curly brace right here but after i added that's looking good and now we of course have to click our send now button so let me type test here let's send 0.0001 by the way you can use these arrows here for the key award looks like i have a typo there we can type test and we can type test right here and click send when we do that obviously we've got an error saying e is not defined to fix that we can go to our welcome and simply get the event from the parameters i simply forgot about that but now that shouldn't be an issue anymore going back we can now clear the console by pressing this icon right here and we can click send now one more time and there we go we got an object with the provider i'm going to make this a bit bigger for you provider is going to be web3 provider with a lot of different properties that we can choose from then we have the signer as well and finally we have the transaction contract which is the most important part right here and take a look this transaction contract is not just any contract this is our transaction contact containing the function add to blockchain get all transactions as well as the get transaction count if you remember correctly these are the exact functions that we have created inside of our solidity contract that means that now we can go to our transaction contract and instead of cons logging all of these values we can simply return the transaction contract now we can go back to our send transaction and instead of simply calling it we can say const transaction contract is equal to get ethereum transaction contract now we'll be able to use this variable to call all of our contract related functions great we're doing a lot of stuff now and i hope it's all coming into place with just a few more lines we'll be able to send our first transaction through the blockchain now that we have all the data we need let's send some ethereum we can say await ethereum dot request and it's going to accept an object with all of the options the first option is going to be a method which is going to be if underscore send transaction like this and then we have to pass some params params is going to be an array with an object inside of it and it's going to have a from property and this is going to be the current account remember that's what we stored straight inside of our state then it's also going to accept a to address and where can we find that well look we're accessing it from the form data so right here we can say address 2. then this is going to be a weird one but we have to choose the amount of gas we want our transaction to take or spend and all of the values that you use in the ethereum network are written in hexadecimal or hex so we're going to do something like 0x5208 and this has to be in a string now if you cannot immediately transfer this to decimal let's take this value and google something like hex to decimal go to the first link and paste it here and click convert this is going to take 21 000 but it's not going to be 21 000 ether it's going to be 21 000 way and that's a sub unit of ether so if we type 21 000 here you're going to notice that that is actually 0.000021 ethereum so we have to write everything in hexadecimal values that are then converted to whey and then that's behind the scenes actually just ether but way is a subunit of ether like a cent is to american dollar so now we know that this is 21 000 way and we also have to choose the value we want to pass so the value is going to be the amount right the amount we are sending right from the form data but that's not the case if you think about it the amount is going to be something like 0.001 or whatever we choose on our form but this here is a decimal number so we have to find a way to convert this into grey or hexadecimal and we can do that by saying const parsed amount is equal to ethers dot utils dot parse ether and then in there we can pass in the amount the ethers package provides us with utility functions that we can call and one of those utility functions is called parse ether which just parses the decimal amount into grey hexadecimal amount so instead of passing the amount we're going to pass in the parsed amount but we also have to do dot underscore hex like this and that's going to be it for our ethereum transaction but this is only sending ethereum from one address to another we also have to provide the part where we call the add to blockchain function so that we store the transaction that just happened so let's do that right below this to store our transaction we can call the transaction contract dot add to blockchain as i've mentioned that's our own function that we've created on this transaction contract great so what does our add to blockchain function need it needs an address the amount the message and the keyword so let's take these values and put them into here the address is going to be address 2 then we want to pass the parsed amount we want to pass the message and finally we want to pass the keyword and we can get a transaction hash which is a specific transaction id so we can say transaction hash is equal to a weight transaction contract this is an asynchronous action and it definitely takes some time for the transaction to go through so we need to add a loading state right here at the top we can create a new use state field which is going to be called is loading and then at the start it's going to be set to false then we can scroll down and right here below our transaction hash we can say set is loading and we're going to set it to true below our set is loading we can cons a log and say in a template string loading and then dynamically transaction hash and then dot hash finally we can call the await transaction hash dot wait this is going to wait for the transaction to be finished of course with 1a here i had a typo now after that is done we can call these two lines again but we're gonna set the loading to be false and we're gonna say success after that is done we can also get the const transaction and that's going to be transaction count which is going to be equal to a weight transaction contract dot get transaction count and once we get the transaction count we can store it in the state so at the top we can create one new state use state and that's going to be transaction count and set transaction count at the start is going to be equal to zero but in this case the zero might not be the best way to set up our transaction account because it's going to get a reset every time that we reload our browser but we're going to store our transaction count into local storage so right here we can say local storage dot get item and then that's going to be transaction count later on we're going to store it there so we can always keep track of the current transaction count now we have this set transaction count and just below we can call set transaction count and we can pass in our transaction count then dot to number like this great and believe it or not that's going to be it for our send transaction if we've coded everything out correctly we should be able to send ether through the ethereum network back inside of our browser we can open up metamask and we can create a new account because we need to have a different address that we're going to send the money to so let's click account here and let's click create account we can call it account 2 or whatever you prefer and let's click create now we are on the account 2 and let's copy the address to clipboard we can paste it here under address 2. let's send 0.0005 the keyword can be something like test and the message can also be test let's open up our inspect element go to console and let's click send first metamask notification appeared sending it 0.0005 that is correct and we're going to pay a bit extra for the fees but that's completely okay let's click confirm and then the second metamask notification is going to appear and it's going to say contract interaction so we're going to pay a bit in fees and this is going to store our transaction on the blockchain let's click confirm there we go our hash is loading and this process usually takes about half a minute but again it depends on a lot of factors so it might take a bit longer for you and there we go i've gotten success right here now let's close this and let's open up our metamask on our account 2 we now have 0.005 ethereum isn't that crazy and if we go back to our count 1 we're definitely missing 0.0005 here so are you sharing the enthusiasm with me even before creating this video blockchain related technologies and cryptocurrencies were incredibly interesting to me we just send ethereum through the blockchain from one address to another the second address could be anywhere in the world and we just sent something that holds real value potentially all across the world in about 30 seconds isn't that crazy of course we can go back to account one and then we can open up our contract interactions right here you can click it go to transaction data and then go to send right here open activity log and then click transaction confirmed this is going to open up the ropes robeston test network and as you can see we have our transaction hash the status block confirmations and the value of ethereum send we can also see from which account to which account was this sent so let's go to our account one and you can notice that now we have a few interactions here the first one was the contract creation and we have two outs one for sending and one for storing you can also see the current balance right here once again i hope you're sharing my enthusiasm about this because this is definitely a revolutionary technology with that said we can now focus on finishing up the rest of jsx part which is the services transactions and the footer once we have those parts then we'll be able to retrieve all of the store transactions and then show them just below so now we're going to move just a bit away from all that blockchain functionality and focus on writing pure jsx using react and tailwind but we're gonna be back to blockchain in no time let's start with the services section let's go to file explorer and then services inside of here we're gonna import a few icons the first one is bs shield fill check and this is coming from react dash icons forward slash bs the second icon on our list is import bi search alt and this is coming from react dash icons forward slash bi and the last icon on our list is import ri heart to fill and that's from react icons forward slash ri now for our services let's simply create a div and this div is going to have a class name equal to flex with dash full justify dash center items dash center and gradient dash bg dash services now we can save that and we can put our browser and editor side by side so that we can see the changes we make there we go now inside of this div we're going to create one more div and that div is going to have a class name equal to flex mf flex dash row flex dash column item stash center justify dash between mdp-20 as in padding 20 and padding y meaning on top and bottom is going to be 12 and padding on x axis is going to be four as soon as we save that you're going to notice that we have a bit more padding right here now let's create one final div inside of which the content will go so right here we can say class name is equal to flex dash one flicks flex dash call justify dash start and then items dash start inside of there we can finally create an h1 element right here and let's say something like services that we and then inside of a new row we can say something like br as in break tag to provide some space and then say continue to improve like this if we save that we're gonna notice that it's right here but it is dark so let's provide some class names class name is equal to text white there we go now let's also make it larger by saying text 3 xl on small devices we can make it even larger by saying text 5 xl there we go and finally let's give it padding y 2 and text gradient there we go services that we continue to improve now just below this div we're going to have one more div and this is going to be for our services cards so right here let's give it a class name that's going to be flex dash one flex flex dash call justify dash start and items dash center there we go now we have this on the left side and right here we're gonna have our services cards since we're gonna reuse our service card three times and it's going to be the same every time but the only things that are going to change is going to be the title subtitle icon and caller for that reason we can create a new component that we're going to reuse and we're going to call that component const service card and that's going to be equal to like this to an arrow function component with an instant return each service card can have a div with a class name equal to flex flex dash row justify dash start items dash center white dash glass morphism padding dash 3 margin dash 2 cursor dash pointer and then on hover shadow dash xl great now just so we can see the changes we're making inside of our card let's make use of that card just below right here we can call our first service card component right here as a self-closing tag and now we can provide some parameters in this case we're going to provide a caller so let's do bg dash and then in square brackets that's going to be hash 2 9 5 2 e 3. great below that we're going to also give it a title which is going to be security guaranteed like this let's also give it an icon by saying icon and we're gonna provide a component bs shield fill check with a font size is equal to 21 and class name is equal to text dash white and the last thing we can provide is going to be a subtitle so we can say subtitle is equal to and we can put some placeholder text something like security is guaranteed we always maintain privacy and maintain the quality of our products something like that should be fine and that's going to be it for our service card now we know that our service card accepts a few properties it accepts a color title icon and subtitle and all of these are props so we need to destructure them right at the top meaning we have to put them inside of curly braces so now inside of this div we can create one more div this one is going to be for the icon so let's give it a class name and then we're going to make it dynamic like this with dash 10 height dash 10 and that should be enough to already see it so right inside of here we can dynamically render the icon as soon as we save that you notice that something appeared here but we cannot yet see it so let's continue by providing more classes rounded dash full flex justify dash center items center and then finally let's give it a color like this if we save that you're gonna notice a blue dot right here and that's not exactly how it should look like just to show you how a finished version should look like i pulled up the finished site and you can see right here we need to have an icon a white icon on all of these circle backgrounds so let's go back to our app and figure out why cannot we see our icon yet and i've just noticed the reason in here i had icons instead of just icon if we fix that the icon is going to appear right here and now below this icon div we can have one more div this div is going to have a class name equal to margin left 5 flex flex dash call flex dash 1 and inside of there we can have an h3 that's going to simply render out the title like this and below that we can have a paragraph that's going to simply render the subtitle of course the entire text is dark right now so let's fix it let's give it a class name equal to mt as in margin top dash 2 text dash white text lg and that's going to be it for our h1 for our padding that's going to be text wide text small sm and also on medium devices we can say width is going to be 9 divided by 12 or 9 out of 12. great so now we have this great card and you still might be wondering why did we create this separate component if we're just going to render it right here well the reason is now that we extracted the code we can reuse it as many times as possible and that is the beauty of react so now if i duplicate this two times and if i change the bg color a bit the second one is going to be 8 9 8 4 5 f 8 like this in here we can say something like best exchange rates the icon can be bi search alt and then for the last one we can change the color to be f eight four five five zero in here we can say something like fastest transactions and the icon is going to be ri hard to fill if we now save this you can immediately notice that we get two more of these cards instantly without any work needed it just looks like we're missing the caller for the second service card so let's see this is going to be just eight nine four like this and we immediately get this nice purple color now if you expand this a bit more you'll see that this is looking great we have our initial section and with that we have our services now that we have our services done let's also check how our services look on mobile devices so let's open device toolbar and go to mobile and as you can see it looks like we're missing just one thing and that is to make this into a column on mobile devices to fix this we can go back to the code and right here say flex dash column there we go and then say on medium devices md flex dash row so now for medium or higher we're gonna have a row and on mobile devices we're gonna have a column so it's looking great on mobile and now if we go back you're gonna notice that this looks great on desktop as well now that that is done let's focus on rendering out the list of our transactions to do that we can go back to our file explorer and go to transactions just to immediately have some transactions to work with we can go to our utils and down in the description you'll find the dummy data file in here and you can just paste it in here this is going to be a list of six demo transactions just so we immediately have some data that we can start rendering out on the screen so you can just paste it inside of the utils once you find it down in the description with that said let's open up our transactions and right here we can import react as well as use context and that's coming from react then we can import our transaction contacts because we're going to definitely use it later on once we want to fetch real transactions so that's coming from that dot slash context and then transaction context and here i have a typo that's going to be just react we also want to fetch that dummy data so we can say import dummy data from dot slash utils and then forward slash dummy data inside of here we can render a div and that div is going to have a class name right here equal to flex with dash full justify dash center items center 2xl px20 that's going to give it a padding x20 on extra large devices then we want to have the gradient dash bg dash transactions if we save that nothing is going to happen yet but now we can add something inside of this div let's add a div that's going to have a class name equal to flex flex dash call mdp-12 py-12 and also px-4 that's going to provide it with some padding and right here we want to have a heading that says something like latest transactions if we have our account connected but if we don't have our account connected in that case we wanted to say something like connect your account to see the latest transactions so to do that we can pull some data using the context right here at the top we can say const current account and that's going to be equal to use context and then we simply pass the context we want to fetch and that is transaction context so what we can say open a dynamic block and if there is a current account in that case we want to render that's going to be an h3 it's going to have a class name equal to text white text 3 xl text center and margin y dash 2. inside of there we can simply say latest transactions and now if we don't have the account connected then we can create the else part of our ternary and copy that same h3 paste it here but now we're gonna change it to say connect your account to see the latest changes great now we can remove these comments because we have our heading let's take a look right now i can see connect your account to see the latest transactions that's great and i also have this button this might be different for you because you might be already connected i paused the recording of the video for some time so metamask logged me out this is going to happen from time to time you just have to retype your password and you'll be straight back in there we go now i'm going to reload the page and as you can see we can see latest transactions that's great one thing that we were also missing at the start was the address right here we implemented the entire transaction sending process but we never got into the point where we show the address of the connected account on this card which is definitely a nice detail so let's go back to our welcome right here and remember our current account is coming through the context so now just below we can find where are we listing the address right here and we can simply render the current account there we go as you can see that is quite a long string so to shorten it we're going to create a new utility function inside of utils called shorten address dot js inside of here we can say export const shorten address and that's going to be a function that accepts the address and then instantly returns a template string where we're going to take the address slice it from the start and take only the first 5 characters or this is going to be 6 because it's starting from 0. then we want to say dot dot we can copy this same part again and instead of slicing from 0 to 5 we want to slice from address dot length minus 4 all the way to the end so we're taking the first five characters and then also showing the last four now we can go back to welcome and right here we can import our shorten address function which is coming from that slash utils forward slash shortened address and the only thing we have to do is right here where we're rendering the current account we can simply call the shortened address and paste the current account into it that's going to give us this nice format and that's the exact same thing that metamask does right here great and the only reason we put it in utils is because we're going to use it in transactions as well so right here we can also immediately import shorten address from dot slash utils forward slash shorten address great now that we have this heading right here we of course have to loop through the transactions we can do that by providing a div right here let's fix this that div is going to have a class name equal to flex flex-wrap justify dash center items center and mt-10 there we go and now inside of there we can create a new dynamic block we can render our dummy transactions for now so we can simply say dummy data and then we can call a dot reverse method on it to reverse it because we want to start from the last to the first or rather from the newest to the last and then finally we can also map over it by saying transaction get the index and then instantly return something and that something is going to be a new component that we're going to create which is called transaction card like this as a self-closing component we can give it a key equal to i and also right here we can spread all of the properties that we get from transaction that's going to take all the properties from here and put it right into our transaction card as props and these things are going to be id url message timestamp address from amount and address 2. so inside of our transaction card we'll be able to work with all of these values let's create our transaction card right here const transaction card is equal to a functional component and as we said we're going to get all of these values address 2 address from timestamp message keyword amount and url and that has to be in curly braces because it has to be structured for now let's simply return a string that's going to say transaction there we go and we should be able to see there we go six time transaction transaction transaction transaction but now let's implement the jsx for each one of these transaction cards let's do that right here instead of this return so let's return a div instead of a string and that div is going to have a class name equal to bg dash square bracket and then hash one eight one nine one eight also margin-4 so m-4 flex and then flex-1 inside of here we'll have to provide different widths for different device sizes and we can do that in a new line still inside of this class name string first on two xl devices we can set the min dash width or just w and then in square brackets 450 pixels now we can duplicate that line and then set the max dash width equal to 500 pixels on two xl devices now we can copy that paste it below and then on small devices so sm we want to set the minimum to be 270 pixels and then let's do 300 for the maximum on small devices we can also provide the flex dash call rounded dash md and finally hover shadow dash 2 xl great now inside of there we can have a div that's going to contain our content so there's div let's give it a class name equal to flex flex dash call items center w dash full and empty three there we go now we have these gray rectangles now we can render out all of the data for our specific transaction so let's do a div we can give it a class name equal to display dash flex justify dash start with dash full mb as in margin bottom dash 6 and padding dash 2. now inside of that div we can render two different anchor tags so let's create an anchor tag right here there we go and this display flex was supposed to be just flex so right here we can create an anchor tag that's going to have an href equal to and now bear with me https colin forward slash forward slash robston dot ether scan dot io forward slash address forward slash and then dollar sign curly braces address from like this of course we have to make it a dynamic template string like this and also at the end close it right here let's put this into a new line this anchor tag is also going to have a target underscore blank and it's also going to have a url equal to no opener no referrer it is advisable to put this tag right here whenever you're using the target underscore blank inside of that anchor tag we can create a paragraph that's going to have a class name equal to text white text dash base let's fix this right here as well and it's going to say from and right here we can call the shorten address function and provide the address from into it that way we'll now have the address from for every single transaction and when you click it you'll be able to see that address and all of the transactions on the robston test network on etherscan this is just providing that extra level of connectedness to the blockchain now let's also duplicate this anchor tag and just below we can right here put the address 2 this is also going to be address 2 and we can say 2. now we have the from and also to below that anchor tag we can create a paragraph that's going to have a class name equal to text dash white text dash base and right here we can render the amount is equal to amount of ethereum there we go it looks like we don't need this to be a flex container at all we simply need to have a full width so you can simply remove the flex and justify start from here there we go and now we have the from the two which are clickable and also the amount of ethereum being sent finally if there is a message with that specific transaction so message and end in that case we can render a new react fragment it's going to have a break tag right here to divide it a bit and it's going to have a paragraph that's going to have a class name equal to text white text dash base and we can simply say message is equal to message there we go since these are our demo transactions they don't have a message but all of the ones sent through our own network will have a message property great and before actually rendering out the image which is going to go right here we can render the timestamp the timestamp is going to be a div that's going to have a class name equal to bg-black 3 p x 5 w dash max rounded dash 3 x l minus dash mt-5 and shadow dash 2 xl right now that's not really noticeable but we have a small rectangle right here and we can provide a paragraph right inside of that div right here that p tag is going to have a class name equal to text dash and then in square brackets hash 37c 7da and it's going to have dash bold in there we can simply render the timestamp right now we got an error because at the top i misspelled the timestamp so if we spell it correctly you can see it right here of course this is not yet aligning properly because we don't yet have a gif corresponding to our keyword that we're mentioning right here and we can also fix this keyword right here i noticed that i misspelled it so let's search for keyword and let's remove this o which is a dipole right here that's a lot better to fetch our gifts we're going to use developers.gifi.com the world's most popular gif platform so let's create a new account right here you can go to sign up you'll have to enter your details and then i'll see you right in their dashboard and there we go if you successfully created your account you should be on your own account page so now let's explore the giffy platform by going to giphy and we're not interested in these gifs right here we want to go to developers.gifi.com now you can click read the docs right here or create the account whatever it says and then at the bottom left if you're successfully logged in you can click create an app in this case we're going to choose a giphy api because we don't need any gif creation tools we simply need to be able to query all the existing gifs and click next step we can enter our app's name which is going to be crypt in my case and how will we use our gift key that's going to be to query different gifs and let's click right here and create an app there we go you just got your api key and that's all that we need we can copy it go back to our application and we're going to create a new dot env file so right inside of our client folder not inside of the source right here right click and click new file and call it dot env instead of react underscore app in this case we're going to use vite underscore giphy underscore api is equal to and then you can paste your api key right inside of here now you can open up the terminal press ctrl c to stop it and then just npm run dev again to run it and then you'll have access to your giphy api environment variable now we were on our transactions page right here where we had everything besides our gif image so what do we have to do to fetch this image well we're going to create a custom hook so right here we can create a new folder in the source folder called hooks and right inside of there we can create a new use fetch dot jsx hook inside of here we'll write the logic for fetching the gif based on a specific keyword but since this is not related to the application to fetch the gif we can import use effect and use state and that's coming from react we can also say const api underscore key is equal to import dot meta dot env dot vite underscore giphy underscore api this is going to give us access to that api key variable then we can create a new use fetch hook a custom hook to be more precise right here we can create a new use state field which is going to be the gif url and at the start it's going to be set to an empty string then we can create a cons fetch gifs function that's going to be an async function and it's going to have a try and catch block inside of here we can try getting the response from the gephi api by saying await fetch and then in here we have to enter the api we want to fetch from and to find that api we can go into documentation right here and we want to fetch specific apis so let's go to quick start guide and let's try to find different endpoints so right here gif and sticker endpoints search endpoint and you can see that it is api.giphy.com v1 gifs and then search this is exactly what we need so let's copy this paste it into this string right here but we have to provide https column forward slash forward slash at the start and then we have to provide some parameters things like queue as in query and api key so at the end let's simply say question mark to provide parameters api underscore key is equal to and then dollar sign curly braces we have to turn this into a template string to be able to use logic inside of our string right here we can render our api underscore key and then we're going to say end q is equal to that's going to be dollar sign curly braces keyword dot split and we want to split it by space because someone might actually type a few words into our input field right here and how are we going to search for gifs then so we're going to first split our string with spaces like this and then we're going to join it right back by saying join and then we don't pass a space right here that way we'll just have one word without spaces in our keyboard at all times and finally at the end we can say and limit is equal to one because we need to be able to find just one gif now that we have our query we can destructure the data from the response by saying const in curly braces data is equal to a weight response dot json and finally we want to set the state of our gif so set gif url is going to be equal to data 0 question mark dot images question mark dot down size underscore medium dot url and let's also put a question mark dot right here and to handle the catch we can go to our utils dummy data we can copy one demo url from these go back and simply say set gif url to be equal to a string of that specific gif that's going to be a random gif so if a new gif isn't found we can just use a demo one and finally when are we calling this fetch gif function well we'll call it just below inside of the use effect our use effect is going to happen whenever the keyword changes so right here we're going to pass the keyword and the keyword is going to be coming through props to our use fetch function or use fetch custom hook so right here we can say keyword and whenever the keyword changes we can simply say if there is a keyword in that case we want to call fetch gifs function and the last and only thing that our use fetch function is going to do is it's going to return a gif url and finally we have to export default use fetch again just make sure that this specific query for fetching gifs is written correctly and also that you don't have any mistakes in the logic right here if something doesn't seem to be working in that case you can check the github repository and find the use fetch.jsx file and compare it with your own so now that we have our use fetch function we can go back we can import that's going to be use fetch from dot slash hooks forward slash use fetch and now right inside of here inside of our transaction card we can say const gif url is equal to use fetch and we're gonna pass in an object that's going to contain the keyboard great so where are we going to render that image that's going to be right here we can simply say image as a self-closing tag and then we're going to provide a source which is going to be just a gif url or url this is going to be for our demo images we can give it an alt which is going to say give and then finally we can give it a class name w dash full h-64 2xl then we're going to make it height 96 rounded dash medium shadow dash lg and object dash cover now if we save that you can see right here something seems to be broken it always has to be broken first only so that it can work later so let's see what are we missing i'm going to open up our console reload the page and right now we shouldn't even be fetching real gifs because we're rendering just the dummy data so in here we should have or and not just one single straight line as soon as we add or our gifs are right here there we go so now we have the six of our dummy transactions and looks like the timestamp is going into the image which shouldn't really be the case so let's see the image and this div with a timestamp should be outside with the entirety of the other content if we save that now you'll see that the timestamp goes nicely over the image this is looking great but of course these are just dummy transactions these are not the real transactions that we send through our network and they're not read from the blockchain anybody could have done this right this is not a web 3.0 application so right now let's just finish up our site with the footer which is going to be incredibly quick and then we're going to replace these transactions to show the real transactions that are sent through our ethereum blockchain to implement the code for our footer we can go of course to our footer component and right here the only thing we're going to import is going to be the logo right here and that's coming from dot slash dot slash images forward slash and then that's going to be logo dot png everything else we're going to code straight away so right inside of here we can create a div and this div is going to have a class name right here which is going to be equal to with dash full flex md justify dash center justify dash between items dash center flex dash call padding dash 4 gradient bg dash footer there we go now we have our entire page fill in these gradients inside of that div we're gonna have one more div and this div is going to have a class name equal to with dash full flex on small devices flex dash row and usually flex dash column justify dash between items dash center and margin y dash 4. finally we're going to create a div that's going to contain our image so right here we can create an image that image is going to have the source equal to logo alt is going to be logo and class name is going to be width dash 32 if we save that you can see the crypt logo right here let's provide some class names to the outer div some things like flex flex dash and then 0.5 this is going to take just half of the space then justify dash center and items dash center there we go now we positioned it right here and below that we want to have one more div this div is going to have a class name equal to flex flex-1 justify dash evenly items center flex-wrap on small devices mt-0 usually empty-5 and with dash full now inside of there we can put our links and these links are just going to be different paragraphs let's do something like market and then let's give it a class name equal to text white text dash base text dash center mx-2 and cursor dash pointer there we go and now we're going to duplicate this four times or rather three more times and change this to say exchange then something like tutorials and finally wallets and there we go we have our four links with this script logo right here we can also do something more for our footer so let's create one more div but make sure to do it below these two divs and right here we can give this div a class name equal to flex justify dash center items dash center flex dash call mt-5 inside of there we can create a paragraph that paragraph is going to have a class name equal to text dash white text dash small and text center inside of there we can say come join us and then just below that we can enter our email something like info at cryptomastery.com and there we go come join us is right inside of here and that is one great thing about custom emails and custom domain names if you purchase the hostinger's shared hosting plan you're going to get plenty of email addresses completely for free and then you can create your addresses such as info ad and then yourdomain.com if you're building a serious site or a portfolio website it definitely makes sense to have this as it provides an extra level of authenticity to your site someone is much more likely to purchase something or use your site if you have a custom domain like cryptomastery.com so if you haven't yet purchased the hostinger plan you can still do that by the end of this video now let's continue and finish up our footer by creating a self-closing div tag with a class name equal to sm colon w dash and then in square brackets 90 percent like this with dash full height dash in square brackets 0.25 pixels and then vg dash gray dash 400 mt-5 this is going to create this nice line right here and finally we have to have the last div of our footer so let's create that div this div is also going to have a class name and it's also going to start with small width 90 so we can copy that with dash full flex justify dash between items center and mt-3 now inside of there we can copy this paragraph where we say com join us paste it here and we're gonna say add cryptomastery 2022 and we can duplicate that one more time and we're going to use that famous line all rights reserved there we go this is looking so much better this just concluded the entire design of our website starting from the nice welcome page with the form to send ethereum across blockchain nice header at the top the services page latest transactions page and finally the footer now is the time that we get back to some blockchain work and actually retrieve the list of all transactions that were sent across our network let's do that right away to get our transactions we're going to go into context and then transaction context now we can go just below our check if wallet is connected function and right here we can create one new function which is called const check if transactions exist and that's going to be another async function like this it's going to have a try and catch block and in here we also want to get that ethereum contract so we can copy that line from here khan's transaction contract is equal to get ethereum contract paste it here and then we want to get the transaction count which we are already doing here so we can copy that from here that happens once we are sending the transaction so we get the transaction contract and then we get the number of transactions the only thing that this function is going to do is going to be window dot local storage dot set item and in here we want to set the transaction count to be equal to transaction count that's going to be it and we can copy the error from here because it's going to be the same now we can call this function just below calling our check if wallet is connected right here and that's going to be it that's essentially just going to set up the current number of transactions so that for every new transaction we know which one is it and now finally the part you've been all waiting for we can create a new function just below our handle change which is on top called const get all transactions that's another async function that's going to have a try and catch block inside of it we also have to check if people have metamask installed so we can say if no ethereum object then return please install metamask and the only thing we have to do is say const available transactions is a weight transaction contract and then dot get all transactions this is a special function we created on our smart contract that's going to return all the transactions but we first have to get this transaction contract and to do that we can simply copy this line construction contract is equal to get ethereum contract let's paste it here and that's going to be it now we can console.log all available transactions right here and also for the error let's simply console.log that error there we go we can reload the page and we have to call get all transactions somewhere but of course we won't be able to see this console log because this function is never called so in the check if wallet is connected right here we want to get all available transactions great now we can reload the page go to console in the info right here we can see an array with one element if i'm not mistaken we only made one test transaction and this is it you can see it has keys from 0 to 5 and also it has some object properties such as the amount keyword message receiver sender and timestamp but this is in a bit of a weird format here with the numbers as keys and then the real keys so let's create a new structured transaction we can do that by saying const structured transactions is going to be equal to available transactions dot map and then we're gonna get each transaction and we simply want to instantly return an object you do that by putting parentheses and then inside of them an object sign so what do we want to do we want to have the address to property which is going to be equal to transaction dot receiver then we want to have the address from property which is going to be equal to transaction dot sender then we want to have a timestamp which is going to be equal to new date transaction dot timestamp and then dot 2 number times 1000 and finally dot to locale string this is going to give us that nice time and date representation the thing i'm referring to is this format right here then we're gonna have a comma then we need a message which is simply going to be transaction dot message we need to have a keyword which is going to be transaction dot keyword and finally the amount is going to be parse int transaction dot amount dot underscore hex and then we're going to multiply that by 10 to the power of 18 because if you think about it we already discussed it that all values are written in hexadecimal and not only hexadecimal ethereum but hexadecimal wei which is the subunit of ethereum so to get ethereum we have to multiply it by extremely large 10 to the power of 18. that is going to give us the real ethereum amount now that we have r i have a typo here structured transactions we can simply set them to the state by saying set transactions and that's going to be structured transactions great and let's also console log them so we can see if everything is right if we go back reload the page we should be able to see that one transaction set transactions is not defined let's see that's because we don't yet have the use state hook for our transactions so we can create transactions and set transactions and at the start that's going to be set to an empty array if we save that and reload the page you can now see that we have an array with one object and that is a nicely formatted transaction but we have few issues one is with the amount and the other one is with the timestamp the amount seems too big and the timestamp is an invalid date so let's fix those right away for our timestamp we need to say newdate transaction.timestamp.2 number but this here is supposed to be a function so if we now save this and reload the page now our timestamp is going to be correct it is right here and for the amount we have to say parseint transaction.amount dot underscore hex and then this here is not going to be times is going to be divided by 10 to the power of 18. if we now save this reload you can see that the amount is 0.0005 ethereum great so now we have the list of our transactions and we can go back to our transactions page and instead of rendering dummy data we no longer need that we can simply render real transactions right here that we're going to get from the context so transactions we render those transactions right here but don't forget we have to pass them right here into the context so value we're going to pass the transactions as well as the is loading state because we have to use that as well now we can reload the page before sending another test transaction let's go to our welcome page and i remembered that we forgot to implement the loading because if you remember right now we have this to false to never show a loader but at the top we can simply get the is loading from context right now because we're passing it through the context so if we scroll down now we can simply say if is loading render out the loader else render out a send now button so now if we scroll down we should be able to see our test transaction and there it is from our own account and we can verify that if we go to meta mask 0x53c and there we go it starts with 0x53c ends with 73aa and that seems correct and we indeed sent 0.005 ethereum and the message was test and here is a gif representing our keyword of test as well great now to verify that everything absolutely works let's send a few more transactions i'm going to again go to metamask accounts account two click this miss right here and copy the address i'm gonna paste it right here let's send another 0.005 or let's be generous and send a bit more 0.001 the gif can in this case be hello and the message can be hello from account one and let's go ahead and click send now we get that metamask notification i'm gonna click confirm and we get that contract interaction and i'm again going to press confirm the loading now works and this is looking phenomenal in about 10 to 30 seconds the transaction should go through and we should be able to see it just below and there we go the loading stopped i'm gonna reload the page and now if we scroll down as you can see we have two transactions right here this one is saying hello as we specified and the message hello from account one is here 0.001 ethereum so that's looking good as well so there we go that's it we have our two transactions and just for good measure let's try to send one more i'm again going to paste the same address of the account too let's do something incredibly big this time let's see how much do we have in our account 0.14 so let's do 0.1 the 10th of one ethereum and in this case instead of hello let's try with hi and the message can be here's a gift for you and let's click send again we'll have to verify it through our meta mask confirm and then contract interaction confirm as well we have that nice loading and as soon as it's done we can reload the page or we can also go to our transaction context right here and we also increment the transaction number we can do window.reload that's going to reload the page as soon as the transaction is done and there we go hi there here's a gift for you and let's check if our ethereum wallet 2 actually received the ethereum and there it is 0.1015 that is it as i've said the other account could have been on the other part of the world and in just about 20 to 30 seconds you can send any amount of money through the blockchain network isn't that crazy with that said we're slowly coming to the end of this video this has been a phenomenal project and i haven't been this excited for a video in quite some time now and for the end i'm going to teach you how to deploy this project to hostinger that way we're going to have a custom domain and you can also create as many custom emails as you want with that said let's go ahead and deploy this project together right away and we are back on our hostingers dashboard i already purchased the domain cryptomastery.com if you purchased yours it's going to be right here as well if you haven't you can do that right away again the link is down in the description if you haven't yet connected the domain to your setup the setup is going to be right here but if you already connected it it's going to be right here under premium shared hosting and then your domain name right here in this case we're going to go to manage you can scroll all the way down and go to the file manager you can click this new file manager right here that's going to lead you to your age panel you can go into the public underscore html document and right now we just have this default.php which you can delete right here and press yes now we have to put our build folder right into here and we can create our build folder by going back to our application we can close all of our files by holding ctrl and then pressing w collapse our file tree and then open up the terminal by going to view and then terminal we can stop it from running by pressing ctrl c and then y we can clear it and while still staying in the client we can run npm run build this is going to create an optimized version ready for production and there we go with the white it's incredibly quick we have our deployed version under dist so you can right click it and then click reveal in file explorer once you've done that you can simply drag and drop only the dist folder right into here once you open this in file explorer it should look something like this and then you can enter this folder the only thing you have to do is drag and drop the assets and the index.html right into here that's going to take just a moment and your files are going to be right here right away and that's about it if we now go back to our hosting panel scroll to the top and click your domain name right here you should be able to see that it's going to load out instantly but there's one really important thing left to do and that is to enable the ssl certificate because our site is currently not secure so we can go back we can search for ssl right here click it and then hostinger just makes it so easy the only thing we have to do is say install ssl ssl is being installed as we speak and this process usually takes just about a minute i was wrong it actually took just about five seconds i reload the page and there it was so now if we go back in here and if you reload the page as you can notice we have this lock right here which means that connection is secure and again especially with cryptocurrency applications having a custom domain name ssl certificate fast load times and a custom email definitely comes in handy because there are a lot of cryptocurrency related scams and you need your page to be secure and reliable with that said let's see if our blockchain transactions are going to work on our deployed site as well as you can see we haven't yet connected our metamask wallet to our deployed site and that's why we have just these three dots right here so let's click connect wallet a notification is going to appear and in this case let's connect the account number two next and connect just like that our address appeared right here we can open our meta mask go to account number one dismiss copy the account address paste it here let's send 0.1 back let's do something like blockchain and say here take your ethereum back and a smiley face and let's press send now sending ethereum confirm and then contract interaction confirm as well the loading is happening let's go to account 1 and wait for the transaction to happen and there we go in about 30 seconds the transaction went through and we now have 0.14 ethereum on our account 1 on robsten test network let's reload the page scroll down and there we go our blockchain gif stored on the blockchain forever looks like ethereum is climbing to fight the bitcoin king and all of this is happening on our new deployed domain which means that absolutely everyone can create their own metamask account wallet and send ethereum through the application that you created and deployed phenomenal job thank you so much for watching this video it's been a crazy experience at least for me connecting a react application to the blockchain it's a revolutionary technology and it's going to definitely take the world by storm in the upcoming months or years so if you'd like to see more web 3.0 videos just let me know in the comments like this video and share it with that said thank you so much for watching and have a wonderful day [Music] [Music] you

Channel: JavaScript Mastery

Views: 1,719,750

Keywords: javascript, javascript mastery, js mastery, master javascript, ethereum app, ethereum developer, ethereum solidity, dapp ethereum, ethereum development, ethereum web3, ethereum mist, programming ethereum, blockchain app, ethereum dapps tutorial, ethereum solidity tutorial, ethereum solidity project, web 3.0 explained, web 3.0, web 3.0 tutorial, web 3.0 crypto, web 3.0 projects, solidity for beginners, solidity tutorial, solidity blockchain, solidity smart contracts

Id: Wn_Kb3MR_cU

Length: 193min 47sec (11627 seconds)

Published: Tue Dec 28 2021