**Building a Blockchain App from Scratch**

In this article, we will walk through the process of building a blockchain app from scratch. We will go over each step and provide explanations for what is happening.

**Step 1: Setting up the Environment**

The first step in building our blockchain app was to set up our environment. The developer began by saying "um so we got the like icon and then we got the comment icon all right let's go ahead and refresh our app." This suggests that they were working on a graphical user interface (GUI) for their app, and were setting it up from scratch.

**Step 2: Accessing the Wallet**

The next step was to access the wallet. The developer said "let's go to our context here and inside of our context I'm going to go to around line 47 where in my check if wallet is connected function". This suggests that they were working on a JavaScript-based app, and were accessing a specific part of the code where they checked if the wallet was connected.

**Step 3: Calling the Function**

The developer then called the "get all transactions" function. They said "let's call that function get all transactions all right". This suggests that they were using a JavaScript library or framework to interact with their blockchain app.

**Step 4: Fixing the Error**

However, when the developer tried to access the wallet again, they got an error message saying "cannot read undefined". The developer said "so hold on let's see what's going on here all right so is a t it's actually a typo here so amount doore heex it's amount doore heex on line 40". This suggests that there was a simple typo in the code, which was causing the error.

**Step 5: Viewing Transactions**

After fixing the error, the developer was able to view transactions. They said "there we go we're getting all the transactions and our transactions are showing up I mean that is nice that looks beautiful okay that looks great". This suggests that they were successful in accessing their blockchain app's transaction history.

**Step 6: Sending Transactions**

The next step was to send a transaction. The developer said "let's go to our account one and we're going to copy okay I'm going to paste the account 2's address so we can send them the money we'll put in a message thanks for the ether there we go". This suggests that they were setting up a simple payment system, where users could send Ether (a cryptocurrency) to each other.

**Step 7: Confirming the Transaction**

After sending the transaction, the developer confirmed it. They said "let's hit confirm and look at that it's loading loading loading loading right and let's see okay and account three or account two yep the money has gone". This suggests that they were successful in confirming their transaction.

**Step 8: Demoing the App**

Finally, the developer demoed the rest of the app. They said "so there you go that is your entire app so with that said I really really freaking hope that you enjoyed building this from scratch I hope you get to deploy it I hope you you know share in the comments that you did it". This suggests that they were satisfied with how their app turned out, and were encouraging others to build similar apps.

**Adding an Ad**

The developer also added a simple ad to the app. They said "I'm not going to go ahead and build this out this is going to be a challenge for you to build out and add to this app if you get stuck you can always just check out to the main branch because if you did npx clever programmer right for this project you can check out to the main branch that always has the full solution". This suggests that they were leaving some challenges for the reader to overcome, and providing a way for them to access the full codebase.

**Conclusion**

In conclusion, building a blockchain app from scratch is a challenging task that requires knowledge of various technologies, including JavaScript, React, and blockchain development. However, with persistence and dedication, it is possible to create a fully functional app that demonstrates the capabilities of blockchain technology.

"WEBVTTKind: captionsLanguage: enwe're going to be building the venmo Clone with solidity and infura this is going to be a very powerful D that you're going to learn how to build from scratch we're going to be coding up the react part along with the smart contract and the blockchain part there are a lot of Concepts you're going to master as a result of this from blockchain Concepts to programming Concepts but more importantly I think you're going to have a lot of fun and you're going to learn that building blockchain apps don't have to be a painful experience they can actually be quite a pleasant experience so while my fire is burning behind me let's have a Fireside app building session with that said smash that like button turn it blue or white depending on if you're on the light theme or the Dark theme on YouTube subscribe to the channel because this is where we help you become a developer and a web 3 developer and let's get straight into the video step number Uno which is we are going to sign up on infura it is completely free it is a RPC node provider and it will make your life so easy okay so that's what we're going to use when we're building our dap so go ahead to the link below that we've provided for you okay use that special link that way we'll know that you're coming from this video it will be helpful for infura to know this um and yeah just click the link in the description below okay it's going to be info. whatever that's going to be the link click that below and go to this page right here hit sign up once you're on this page all right and then just create an account so I'm just going to create my account right here hit uh resend email so it'll send you a confirmation go to your email address go ahead and confirm that bad boy once you're done it's going to send you to this page Pick Your Role so let's say you're an engineer okay slev developer so solo freelance whatever and pick your category and then just hit next all right now you're going to create your first project so you're going to do web 3 API former early ethereum and uh the last part you're going to do is my first project name it whatever you want I'm just calling it my first project okay all right so there you go now we don't need to touch this in here okay everything you can leave as is because we're going to use an extension later called truffle and that will allow us to interact with infura and pull all of this information okay so there you go your project should be created in here my first project okay and uh that's effectively it okay so make sure you go ahead and do that and I'll see you in a second all right so here is the demo of this app so take a look at it right I am here on my venmo clone the first thing I need to do is actually go ahead and connect my wallet so I'm just going to type in my password on metamask and log in once I am logged in I'll just hit I'll connect both of my you know any of one of my accounts I'll just start with the account one in this case once I'm in you could see on the left hand side that I have all these transactions going through and it's showing the notes as well so here what we're going to do is I'm logged in currently okay so you could see my metamask wallet and you can see that I'm connected okay and here's my other account so here's account two right and then here's my first account and I'll paste in the second account that I want to send my money to and I will drop a message okay you could send your ethereum to really anybody that you want but I'm just going to send it to this address I'm going to say here's some money now metamask opens up and asks hey do you want to do this are you sure blah blah blah yes I'm sure I'm going to put in my password all right it's telling us about the gas fees let's hit accept Okay it's doing a little loading all right blah blah blah contract interaction go down hit confirm and we'll wait a couple of seconds here okay let's wait and it says p uh pending so I'll speed it up contract interaction okay we'll speed it up and boom it's done look at that on the left hand side it loaded right away and it says here's some money and you can see it says 4 seconds ago that is beautiful okay and again now I can switch the account as well so I could go to a completely different account okay and I could send money to the other account so I can change accounts and send money to wherever I want okay so I'll refresh you can see that the account just changed over here okay it's a completely different account as you can see keep going I'll paste the account number and I'll say thanks for the money and I'll send some money in return okay thanking the person for sending me some money there we go and now we'll hit confirm and let's wait for it wait for it sending and I'll hit speed up contract interaction is done and look at that right away it shows up all the way at the bottom right it says thanks for the money beautiful so there you go I hope that you're excited about this project this will be the venmo Clone that you will be building I hope you're excited is going to be happening with solidity so with that said let's just rock and roll and right before we get started ladies and gentlemen I just want to give a huge shout out to this man right over here um M at this screen screen thing but JavaScript Mastery uh a lot of the smart contract part is from his video called Crypt uh where he built the Crypt portfolio uh so definitely check it out we'll Link in the description below uh it is awesome resource and on top of that we built our own styling and everything and then converted it into this beautiful venmo app that you see in this video so with that said let's get back into the video shout out JS Mastery all right now open up your command line and let's go ahead and what we're going to do is I want you to just write npx clever programmer this is a clever programmer npm package that we have made and the benefit of this package is really that it actually gives you everything you need so we're giving away The Styling a bunch of the app assets uh and we just make the whole app really really simple for you all you have to do is just type in that command it will install it for you okay and uh once you're done installing it make sure that it's going to ask you hey which uh what's your email address just pop in your email address and then after that it's going to ask you for your name and it's going to ask you for what project you would like to initialize so for example in this case we're building the venmo app so make sure to just initialize venmo it will initialize a whole bunch of helpful files for you so that we don't have to spend a bajillion years trying to build this app you know the styling will already be done will do the interesting more fun INF fura SL web3 solidity Parts okay is that's really the focus of this video right so boom there we go it uh now it's installing it and setting it up on your computer getting the dependencies for you so this is the magic of when you set it up with npx clever programmer okay it's going to basically start the project and it's going to automatically open it up for you okay if it's giving some kind of error or whatever just understand that all we've done is we've cloned the repo put on your computer so you could point and click and kind of go inside of it as well if you wanted to okay so let's go ahead and now see what is happening all right now that the project is opened up what I want you to do is just open up the terminal and I want you to type in yarn start that will inst start your server okay that'll start your project now just go ahead and I want you to open up your Local Host 3000 okay and you could put it on the side of your computer like this all right so on the left hand side your server is running on the right hand side your app should be up and running so that's where you should be at and let's go to index.js okay and you can also go into your app.js and you can see that this is a regular react file right pretty much vanilla um except the only difference is really we've given you a lot of the styling all right so let's keep rocking and rolling here okay on the left hand side you will see in Source you have assets components and styles and normally you won't have assets or components like that's something we've created for you and given you and in Styles we've created extra selling for you as well okay so that's the structure so we're going to go into our app.js and we're going to delete everything in anything that's inside of that class name app div okay remove go ahead and remove everything so now your app should be this blank canvas we're going to get rid of that logo.svg as well we don't need that let's refresh and again your app should just be not giving you any errors but also not really showing you anything okay now inside of that Dave we're going to basically just put in hello world and once you do that that is enough for this part we're already ready to get started with the web 3 and truffle and infura part I hope you're excited let's just get to it all right so here we are now we're going to be getting onto the Truffle part okay we're going to be setting truffle up and we're going to be setting infura up so let's go here now in the main main directory what I want you to do is create a new folder okay and we're going to call it backend AKA blockchain part so in this case our backend part is really going to be our blockchain part AKA our smart contract part okay so let's go into our back end but what's cool about this when you're in the blockchain world is like you don't really need to deal with Firebase or uh it's funny I'm saying Firebase and I fire behind me but like you know your back end isn't the traditional mongod DB or Firebase your back end is the blockchain okay that's where you're storing your your data majority of the times all right let's go ahead okay so let's go ahead and now I want you to type in Truffle in it okay um and before we actually do do that do that let's go ahead and make sure we're in our C back end so go ahead and do CD backend for me once you're in there I want you to type in Truffle in it by the way quick thing if you don't have truffle installed put in this Command right here and that will install truffle for you and if that doesn't work Google it with that said let's keep on going okay so after you do truffle init it will pretty much set this up for you okay and kind of uh initialize the repository for you on the left hand side a couple of things should happen okay you should have this contracts part the migrations part and test part get built out and truffle config should start showing up so before your backend should have been empty but after doing this you should have these three folders plus that one file ready to go okay now inside of your contracts you have something called migrations okay so that's what's going to be there and then also you have a migration folder that will have your initial migration okay this is what you're going to be using pretty much to deploy your contracts afterwards as well so all of this information is pretty important now inside of your contracts you're going to create a new file and that's where we're actually going to create our smart contract okay so let's go ahead and call it trans actions. soul. O Okay is short for solidity and then we're just going to put in a little license here and we're going to say spdx okay Dash license and since this one is not licensed the identifier we're going to pass it is unlicensed okay and then that warning at the top you know is basically taken care of so you could just say hey it's unlicensed that's totally fine all right next up we're going to go ahead and make a contract and we're going to call it transactions all right now that we got our transactions contract just we we're just going to leave it at the blank right now okay and then what we're going to do is here's what I want you to do okay I want you to go ahead and get this extension truffle okay so at the bottom left you see that I have this truffle and extension okay right over here okay that's the extension that I want you to get all right so what you're going to do is go to your extensions you can also do command shift X or control shift X go into your extensions type in truffle and just go ahead and install truffle okay truffle for vs code this one right here and then once you have it installed go to your truffle extension okay and this going to make your life really easy when you're developing this is really nice and what we're going to do is we're going to go ahead and hit connect to network and then it's going to ask you do you want to use the gach service or you want to use the infura service or other the one we want to use is we want to use the infura service right over here okay so go ahead choose infura and then I want you to go ahead and choose sign in so let's go ahead click sign in um and then just simply sign into your infer account okay if you don't have an inferior account just make a new inferior account cuz you're going to need that for this app and excuse my dog she's a little crazy bulldog and she's wild so she'll be barking in the back but we'll ignore her all right here you have um this little error thing showing up you could ignore that it's not important here okay it pops up all the time but it doesn't doesn't really matter all right all this stuff pops up here and all I want you to do now is um simply just go scroll to the bottom and hit authorize okay now that that's done it says you are signed in you can now close this page so simply go ahead close this page okay and now at the top here it's going to ask you to put in the project name okay right right over Yonder boom right there okay so go ahead put in your project name I'm going to just simply say uh venmo clone or whatever okay so let's go ahead and write that in venmo Clone all right and then hit enter and then we're going to just make this project public cuz there's no reason to make it private okay and now you can see on the left hand side we can see infu service showing up and now I'm going to go to infura doio and on here let's go ahead and click uh start innovating button okay so go ahead and click that and right when we click it you could see that we see that there's a ven mclone okay this is the one that we created from our command line little tool thing that popped up over here and now it says this project is active it was created today and boom okay this is good to go right now it should have zero requests okay and on the left hand side you could see that if you click your infu service and ven mclone you could see all the networks you have access to so main net you have access to gorley Rinke rosin and then Layer Two you have access to all these other Main and test Nets okay so with that said you've done a wonderful job now we're going to move on and we're going to start working on the smart contract so let's get to that in the next part all right here we go now we're on the fun part we're going to be making our own contract okay so let me take that photo away and I'll show you why I have that photo in just a second but let's go ahead and work on our smart contract here okay so let's go inside of transactions and I'm going to uh add in a very specific version of solidity here so we're going we going to go ahead and choose a specific version of solidity so I'm going to put a carrot and do 0.815 okay that's a version I want you to use and uh usually the first line of code in any solidity app is usually that pragma solidity blah blah blah put your version okay so go ahead and do that then inside of my contract I want to do a un 256 and I want to have transaction count this variable here will be keeping track of how many total transactions we have at any given time all right let's keep going now just so you understand what I mean by this okay I'm going to bring this into the view so remember in our finished version of the app we'll have a transaction or a transfer and then we'll have multiple transactions so that transaction count will be keeping track of how many times the user for example sends a particular like sends transactions right so if we've sent five or 10 transactions and all users have sent 10 transactions then the transaction count will be 10 so just keeping track Global track of the count of transactions okay the next up what we're going to do is we're going to create an event that will be fired when a transaction is made okay so for example we're going to say event and I'm going to say transfer and here's what I want transfer to do so I want to show who the transfers from okay uh the receiver okay who received the transaction the amount of the transaction and the message of the transaction and just so you can understand what this means from is going to be this address of the user that's logged in okay receiver is going to be who you're sending it to amount is going to be the amount that you want to send and then the message is going to be this right here okay but now when you're using uh languages like solidity or whatever you have to Define data types so I know that this is a string data type so I'm going to say string um the amount I know is going to be an integer okay so I'm going to go ahead and say int all right now if you have a little bit of programming experience you might be like wait a minute Cy how the heck is a mount a a int a u int by the way is unsigned integer meaning it could be negative and you might be like wait how the heck is an integer if this is 0.002 under the hood everything is being calculated in the smallest denominator in ethereum which is way so a way is much smaller number so under the hood it's not actually um in decimals is just showing you here in decimals because this is not in way okay so uh there's actually no float type in um Sol solidity which is pretty interesting but yeah all right and then we're good with adding all of that stuff and the last thing we're going to add in our event actually is the Tim stamp so that thing is the thing that's not visible right now so for example timestamp isn't showing up in anywhere uh in any any of those okay so time stamp what we're doing is under the hood right when the user hits send we're going to log that time so let's just say it's like you know it's 12:33 a.m. and this dude is sending some money to his friend um for cleaning what kind of friend does he have that cleans at 12:33 a.m. I don't know he sending the friend some money for some okay we don't know what it is uh he maybe maybe gave him some food and now he's he's paying his friend at 12:33 a.m. and that time stamp we're going to log and it's going to get log lowkey under the hood and we're going to pop that in right there okay that is going to be attached to right when the user clicks send okay just to kind of give you a little insight onto what we're doing here all right now the next thing we're going to do is we're going to create a struct okay uh of the transaction that we will be storing on chain okay and um stru is kind of a ugly name and it makes things sound confusing but it's really just a structure or like a data type here and so we're just going to say hey when you see a transaction or a transfer this is the type of stuff it's going to have inside of it okay so expect it to have a sender expected to have a receiver expected to have an amount you know expected to have a message and expected to have a Tim stamp okay that's all what we're saying here all the rest of what we're saying here is uh about these data types okay so the main thing I want you to notice is sender receiver amount message time stamp those are all the things that are happening here okay now what what is this other stuff addresses a specific data type inside of solidity when for wallets it understands it when you say address okay same thing for the receiver uh it's not just the string so it understands how addesses work underneath the hood all right and then amount is in in string message is a string and then time stamp we're going to make it a uh in 256 now you might be wondering uh why is this u in 256 and why is this int just by itself if you don't say 256 and you just use int like this by default it's actually in 256 okay so both of these are both of these here are actually in 256 okay so that's really the one thing I want to clarify here okay beautiful so now that we're done with that now we're going to create an array of those transactions okay so the the struct that we make we're going to make an array out of that so let's go ahead I'm going to say transfer struct and let's go ahead and rename it and call it transfer struct the reason why we're going to call it that is it's very clear that it is a struct okay and then when you get better as a developer you could just call it transfer or you could call it transaction okay uh that should be fine now we're going to create a variable called transactions and here's the interesting part about this okay we're we're declaring a variable called transactions but we're saying that this variable here is going to be an array of transfer structs meaning it's probably going to look like an array okay an array and it's going to contain these transfer struct object so it's going to basically contain you know if you're a JavaScript or a react person imagine this so imagine um I have my receiver and the receiver is 0x blah blah blah I have my sender 0x blah blah I have my uh not sender I believe it's from it's one of those and then I have my uh let's say my message and it's hello okay and then you know and that's just like one transfer struck let's say okay and I'm I know the transfer struct test some more stuff but let's just say for Simplicity sake this is one transfer struct and then there's more transfer structs so in a classic JavaScript scenario imagine that you really have an array of objects okay and more specifically the objects will represent the transfer struct meaning that whatever Keys the transfer struct has these objects will have and if you don't put that in if you have an object that doesn't have those keys it'll error out okay okay so uh there's a lot of type safety into the code and that way your code will have less bugs and errors but at the cost of like really being very verbose and explicit um upfront cool okay so let's keep going now what we're going to do is we're going to make a function uh to add a transaction to the array to the blockchain okay with our struct so let's create this function and we're going to call it add to blockchain but really what this function is doing is adding you know essentially it's adding a transaction to the blockchain that's what we're doing we're going to create a so the variable here that we're creating is called receiver all right so here the actual variable here is receiver okay that's the main thing these two are these two are think of them like data types okay address is a data type and payable is a special keyword that makes it so you could actually pay the receiver that's it okay let's keep going so address payable receiver then we're going to have an amount we're going to have our uh message as well okay so but for this one we're going to say string memory message don't ask me why you have to say memory if you don't write memory you'll get an error so just write memory string memory M message okay all right then all we want to do is you want to say public meaning that even outside of the smart contract you should be able to actually call this function so we have access to it all right and um payable keyword means okay that the receiver is actually able to receive ether from the sender okay so something I said earlier but this is just to make it really verbose and clear for you and co-pilot wants to do a lot stuff but we're going to skip that now here's what happens in this function when we are in this function what we want to do is when the user calls this function meaning you're calling your function add transaction right well the first thing we want to do is we want to increment the transaction count by one right that should be obvious it's like I'm adding a new transaction to the blockchain increment the the count of and the number of transactions okay and then what I want you to do is take the transactions array that I created earlier push new uh transaction to it okay and all we're all we're pushing to that array is literally from my JavaScript World okay my JavaScript peeps you're literally just sending an object okay this object is going to be like uh you know sender ZX something uh you know receiver ZX something message hello whatever okay timestamp timestamp some Unix Unix timestamp okay so that's all you're sending okay so this over here uh is a Constructor transfer struct here is a Constructor and once you pass it all of this information it's going to literally make an object for you at the end of the day that's all it's doing and message do sender just in case you're wondering what it is you know when you're signing with metamask so like when you're doing this thing with metamask right where you're literally signing yeah that is what refers to the message. sender okay so the dude that's logged in with metamask and hitting send and then hitting confirm it's pulling that dude's account address okay from message. sender now if you're wondering how it's pulling the receiver it's pulling okay for so this is the sender and then this guy who we're sending it to is the receiver okay the amount that we have okay wherever the amount is let's just say that's the amount that's going to be the amount that it's pulling and then the message is whatever message you wrote in and the timestamp is like the exact moment you added it to the blockchain okay so that's why we're getting it from that special keyword block and this MSG is also a special keyword in solidity so both of these block and MSG is a special keyword okay um my my big head is blocking some of that stuff so there you go that's what I was showing you like that little transaction there is the amount okay now I'm going to hide it again because I like myself uh being huge like a big giant on the screen so I'm going to make this small and I will hide it away from you and I'll just bring this back for now and let's keep going okay all right and then next up what we're going to do is we're going to Adit the event we actually created earlier so we want to Emmit the transfer event we created okay so let's go ahead and just Emmit that event we're going to give it to Sender receiver amount message block Tim stamp and all that good stuff it's the equivalent of doing the you know a console log let's say all right so let's keep going over here and we got our amount we got all of that okay I'm just going to check if I'm on the right solidity version I am yep so there you go that's your emit event that you're going to have there okay now we're going to write a function to actually get all of the transactions from the blockchain so let's go ahead and do that so I'm going to call this function get all transactions and I'm going to give it a public View and we're going to return a transfer struct that's the data type we're going to return and we're going to actually return so think of like we're going to return an array of objects and the array of objects is going to be of type transfers or transactions okay and we're just going to put memory there because if you don't put that you get an error so so just put it okay and then we're just going to return transactions at the end of the day and um yep and then we're going to make another function and this function is going to get the number of transactions and we'll say get transaction count okay and uh again it's going to be a public function and it's a view so for a view we're telling we're telling the blockchain hey there's no transaction happening here we're not going to be changing the data so you're not going to don't you don't need to charge us here for anything it's just going to be a view and then public is so you can access it from outside returns is what data type and what specific things are we going to return so we're going to return an integer and then I can just go ahead and say return transaction count and that's about it so yeah and then lastly what I want to you know just explain really is the view keyword right that basically means that the function can only be used to view the data all right that's that's all that means all right and and that means that no ether is needed to run this function okay that's something that I want to highlight to you with that said we are done with the contract part now we just sit back we watch the firework and it's time to deploy the contract let's go all right now that you've made the contract it's time to deploy your contract okay it' be kind of like if you had all this wood behind you but you never lit it on fire okay if you didn't do that what's the point of having a fireplace it's useless so when you have a contract there's no point to just having a contract it's like having a bunch of wood we got to deploy it okay we got to add the fire we got to turn it into a fireplace and that's what makes it usable by everybody in the world including yourself so let's go and do that now so what I'm going to do the first thing inside of contracts you see transaction here I'm going to hover over it and I'm going to rightclick okay I'm going to right click and what that will allow me to do all right so now what we're going to actually do is inside of our migrations folder we're going to create a new file okay so let's go ahead and let's create a new file and before we do that go into your 1or initial migration copy everything inside of that and then I want you to go ahead make a new file toore deployed. JS paste all of that and everywhere it says my migrations we're going to change that with transactions okay so you could also do right click and rename all occurrences or you could just do this in this fancy way or you could use the shortcut command D which I on Windows I believe might be controll D that right there okay that should allow you to do that multi- select on everything let's keep going and now what we're going to do is we're going to rightclick on our transactions right here okay and I'm going to choose build contracts now if you're wondering how do I have this build contracts right here it's only possible you guys if you have this truffle extension okay if you don't have the Truffle extension okay this extension right over here if you don't have that the build contract right here will not show up okay so make sure you have it okay so we're going to hit build contracts now my contract has started building so we'll keep going through it okay it's going to take a second to build and here's what happened okay I just ran into a little bit of an error let's go ahead and I'm going to choose truffle for vs code so go click output and then here choose truffle for vs code so we can actually see what the error is okay and here I'm checking to find we're checking to find what the error is and it says hey there might be something you need to fix in truffle config so I'll show you what we need to do so first choose truffle for vs code scroll down till you can see the error and you can see the error says truffle is currently using Soul uh solidity version 0.811 and it does not match what we have inside of our file right there so let's go ahead to our truffle config.js right here and fix this problem okay so let's go truffle config and scroll down to line 8 4ish and where it says version you see it says 0.811 go ahead and change that to 0.815 okay so we're going to go choose just put a five there let's hit save okay and now let's try to deploy this again and see if it works okay it's going through and let's see okay looks like we have a build folder now that's starting to show stuff so that's a really good sign and there we go you could see it says compiled successfully using Soul version 0.8.1 5 okay so our contract is now deploy uh sorry it's built now what we need to do is SE let's go ahead and right click on transactions and this time we're going to choose deploy contracts so let's choose that okay now here I make an error okay so I choose the robsten network but I don't want you to choose the robon network do not choose this choose gly okay so I want you to choose the gly network that's the one okay that's the one I want you to pick don't pick robon just want to make that super super super clear so in your case you should be picking you should be picking that guy right over Derek gley once you click it it's going to ask you to paste your pneumonic now remember earlier in the video when you made your wallet with metamask that's when it gives you a pneumonic it tells you to write it down so grab that pneumonic that it gave you and I want you to bring that here and paste it here okay so we're going to paste our pneumonic now and it's going to ask you to save it now you could save it anywhere you want okay um so I'll just go to my own folder here and I'm just going to hit key. EnV and there we go we've saved it and at the bottom you should see it's saying deploying contracts okay and your project name is going to be different than mine for you should say deploying contracts to venmo clone okay I just have to create another project cuz I was getting some errors or whatever but hopefully you won't be getting errors if you are also getting the same errors then it might actually help you to create a new project okay so just a little note for you and pretty soon this in um deploying will be completed and it is okay so now that the deployment is completed it gives you this very important contract address you're going to need access to this so hover onto this and I want you to copy it okay this is a very important contract address and then I want you to go ahead and grab this contract address okay so let's go ahead and grab this contract address and what we're going to do is we're going to make in our source folder we're going to make a new folder and we're going to call it um we're going to not a new file we're going to call make a new folder we call it utils okay and inside of utils I'm going to make constants and inside of there I'm going to save a new constant constant file it's going to be called constant. JS and inside of this file we're going to make a contract address and we're going to paste the contract address in front of it now a little note for you uh just put const here I forgot to put that okay so just put const contract address and we'll come back to this file and we'll fill it fill it out completely okay all right so with that said right now you're doing great your contract is deployed so congratulations cuz that's a huge part of the process and at this point we're pretty much done with the smart contract blockchain part pretty much completely and now we're going to do the fun frontend part where we're going to connect to this back end and then now we're going to really make the app sing so I hope you're excited I'll see you in a second all right now what we're going to be building is going to be the Navar okay so it's going to be the nav bar we're going to build for our project this is what it's going to look like so boom right there okay that's what it's going to look like right there so that's the target that's what we're building remember it's not built yet okay it's just a photo so I'm going to leave that it here as a target of what we're building or actually let's leave that here so that could be like a use as a reference point okay so now let's go ahead and build it together all right first thing I'm going to do I'm going to go inside of source okay inside there let's go into our app.js and inside my app uh what I want to do is let's go ahead and remove everything from the top and I'm going to say import style from style. module. CSS okay that's where a lot of the uh styling we've already written for you so it's in there go ahead and call the class we're going to use this a wrapper okay and we're going to inside of our wrapper we're going to put in our header and inside of our header we'll put in our nav bar okay now no nav bar is going to show up so once I hit run on this we're going to really when we do yarn start we're going to get an error okay and the reason why we're getting get going to get an error is cuz we never imported it okay so let me actually move this a little a little bit out of the way here as you could see a navbar is not defined so now what we want to do is in components you could actually see that we have created Navar inside of components right so we're just going to go ahead import that right over there import Navar from components SL navbar okay and now that it's imported let's go into our Navar we're not getting an error anymore let's build out our Navar from scratch let's get in our nav bar styles that we've already made and for this nav we're going to say navigation container for Styles okay and then we're going to make a container div inside and then inside of that we're going to use a logo image class logo container rather okay and then we go we run that and we get an error all right so let's go ahead we're getting error here right this is not loading the logo we'll fix that in a second first let's just go ahead and give it a class name and we're going to say styles. logo image for the style on this okay and let's fix this source so we're going to change the source to do do/ assets SL venmo logo.svg still not loading okay so let's drag the assets folder and we'll move the assets folder inside of our public folder there we go and now we change it now we run and look at that venmo is showing up that is beautiful okay so let's continue all right now we're going to add in an actions container and we're going to say hello and then we're going to give it an accent color and this is where the user address will go so we're going to say hello comma user address okay and remember right we're mapping it to this one that's our reference point so we got that part now we got the hello part okay and then we have the user address there now we're going to put a hand wve and last but not least we do need to put the image the circular image that we have so let's go ahead and do that okay so we're going to first get our down icon okay cuz we need that icon for right here okay so let's call our Chevron down icon let's give it a arrow down icon styling and let's make it a self-closing tag okay now we're getting an error can't resolve hero icon so obviously what we need to do is we need to install this package right here and let's run it cool now it's showing up so you should have this package already installed when you do npx clever programmer you get all the dependencies installed by default so just make sure you add in the slash outline and then you should be good to go all right the last thing we need to add is the image so let's go and do styles. Avatar container so I'll make a new div and then inside of this div we're going to put in image and this image we're going to give it Avatar image style u make it a self-closing tag as well and the source okay is going to be this specific Source right here at y kang. me/ avatar. jpeg okay you can get your image from wherever you want Yap is somebody who just works with us on the clever program on our team and so that's the image we're using you could use your image or anybody else's image right and boom look at that okay let's get to the end of this boom right if I show you this look at that right we started with that reference and we got pretty much a onetoone match so that is absolutely phenomenal we are done with our navb bar uh and now it's time to move on and add our wallet connection let's go now what we want to work on is the metamask connect wallet functionality so basically we want to be able to do this thing okay where you it'll pop up connect with metamask It'll ask for your account you'll be able to hit next and then move on to the next part okay so let's go ahead and start working on this bad boy now there is no front end part to this so just letting you know that there is a there this is going to be mostly a backend thing we're going to be doing for connecting to wallet because this front end is metam masks like default uh front end when you open metamask okay all right so make a new folder called context and you're going to make it inside of your Source okay inside of this context I want you to hit new file and then in there we're going to put context. JS all right go ahead and import use effect and we're going to put in use State and create context from react okay just like that and then go ahead and do import ethers from ethers cuz we're going to need access to that okay and let's go ahead and do export cons transaction context okay and create context so we're going to need access to all this data in our other files that's why we're creating this context here so we can do that all right we're going to create a transaction provider here which is going to take in children children is going to be the entire app and what I'm going to say is I'm going to hit return and I'm going to say transaction context context. provider and we're going to give it a value and right now we're going to leave the value kind of empty okay and we're just going to pass in children in between and make sure you have the tag saying transaction context. provider okay that's what the tag should be saying all right let's go back yep let's go right there and in our index.js what we're going to do is let's go and do transaction provider fromc context context and and uh we're going to create a transaction provider in our index.js and wrap up the entire app inside of it okay that's what we're doing so make sure you put your app here transaction provider and import your transaction Provider from Context uh with that said let's go back to our context and we're going to create we're going to keep track of the current account and we're going to see if the current account is logged in or not okay the default state is just going to be blank empty string we're going to have a function which is going to be check if wallet is connected it's going to be an async function okay and what we're going to do is we're going to create a TR catch block here and under the catch we're just going to console log the error and in the try what I want to do is I want to say hey if ethereum does not exist here and you might be wondering where is ethereum coming from we're going to get we're going to destructure ethereum from window window is a global JavaScript object that we have access to and if ethereum does not exist then return Please connect metamask that means metamask is not connected please install metamask that's what the error we want to say um and then what we're going to do is we're going to create accounts and we're going to await the ethereum request and the method is ethor request accounts and then what we want to do is we want to say if the accounts length meaning if the accounts exists then set the first account as the main account so maybe you choose five accounts the first one you chose is the one that gets chosen because we can only choose one account and then we if no accounts are found we're just going to say no accounts found let's create a use effect hook that's going to fire off every single time the page refreshes and we're just going to run this function check if wallet is connected every single time the page refreshes okay then next up what we're going to do is we're going to create a connect wallet function all right now we're going to create this connect wallet function this is going to be pretty much copy paste so honestly you can copy paste there's really just going to be very very minimal difference from this function and the other one uh but this is more so of just a little technicality okay so you're going to be writing the same thing that you just wrote okay so nothing really new here um and then you could see that it popped up so I'll remove this from here you could see that it popped up the wallet and you can connect to it right so we can see it running we can see our um connect functions running okay let's keep going and then we're going to set the current account to zero the only difference is we're going to do a window location reload this is just to kind of catch any edge cases and make sure there are no errors happening so just put in the window. location. reload you should be fine and let's keep going okay next up what we're going to do is we're going to throw a new error if there is an error okay and we're going to say no ethereum object found okay object um okay so make sure you pass in the connect wallet to your transaction context provider because now your entire app will have access to the connect wallet function that you've made okay so let's go back to our navb bar. jsx now we're going to start using all of this stuff that we got okay so let's go ahead and use it so let's make sure that okay everything is looking good here connect wallet ah we want to not just get connect wallet but we also want to get access the current account that the the current user that's logged in so let's go ahead import transaction context from our context and let's get the used context hook as well from react and then we will use the context hook we'll pass in and we'll say hey we want to use our transaction context we created we're going to destructure our current account and connect wallet from that and then we want to wrap the entire app up in certain um in this conditional here in this turn operat okay so you want to say hey if the current account is logged in then show this otherwise show that all right so I'm going to take essentially what is the homepage I'm going to cut that bad boy and we're going to paste it in here because hey if the current account is logged in then show this okay otherwise show a button that says connect wallet okay so our connect buttons give it the styling of connect button and then on click we're going to say connect wallet all right and let's take a look at what's happening okay so let's open up our metamask here let's go to our metamask let's go to uh where it says connected let's click the collapsible Three Dots and let's disconnect okay so now that we disconnect let's refresh our page and you can see that it brings up the connect wallet again and if I remove the connect wallet you can see that there's a button right behind it all right so now I'm going to hit that next button right there and you can see I just got connected okay and basically everything that I'm doing is working okay beautiful so our check if wallet is connected fires off every single time we refresh the page so there you have it you did a fantastic job building this wallet connection so far next up we're going to shorten the addresses let's go and do that now the next thing we're going to be building is a shortener so we're going to take a big address turn it into a small one let's go ahead and do that so I've drawn this out for you here this is what it's we're going to be doing we're going to take an address that looks like this and we're going to turn it into that okay so let's go ahead and do that now so let's make a shortener and then once we make that shortener then what we can do is we can actually show that user address right there otherwise this would be too big right and it wouldn't fit so let's go to where we have user address and I'm going to change that and I'm going to go ahead and say current account okay so now you can actually see that our app is showing us this okay that's what you should be seeing right now CU pulling it directly from the current account now what I want to do is let's go inside of my utils and in there I'm going to add shorten address. JS and I'm going to say export cons shorten address and it'll take in an address and here's what will what it will do okay so it'll we'll say first and then we'll create another variable called last so first we'll just take the first five uh string so like 0x 35d okay so we're going to put that and then last is just going to take the last four essentially okay and then we're just going to say first dot dot dot last all right so you got your first and last here let's go back and now we're going to use this URL shortener or uh wallet address shortener I mean on current account let's import our bad boy shorten address and make sure you import it from the right place okay so let's just go ahead import it from UT Tails SL shorten address that's where we've put it and then we're just going to call our shorten address pass it our current account and we should be Gucci there we go look at that we got it right you could see it right over here and you can see that we've went from this to that beautiful so we're done with shortening stuff now we are going to work on our transaction form so users could put in stuff and then you know be able to pay other people let's go all right now time to make our transaction form this is what you're going to be building by the end of this one okay so we're going to be building this form now yes it looks ugly hideous but don't worry about that we're going to initially build it without styling and then then we're going to make it look pretty okay so don't worry about that I'm going to leave this bad boy kind of like floating here for reference as we go through this um and yeah let's rock and roll so I'm going to go into app.js okay and inside of here let's go ahead and um all right so I'm going to add in transaction form here okay if you don't have main container activity container make sure you add all of these here as well okay but transaction form is I'm going to be adding now obviously it's going to give an error and says transaction is not defined so at this point you know what the error is right you know what this means if you see that error clearly you didn't import something so just go ahead start your import process we're going to go ahead and do transaction form uh and we're going to grab it from our transaction form component that we have made now I want you to go ahead into your transaction form okay and uh all right so we have the transaction form here it should be pretty much empty let's go ahead and build it out now okay so we're going to grab uh transaction. module. CSS all right so now that I've got my transaction styling let's go ahead I'm going to create a div and uh in here we're going to say container okay and then we're going to grab uh make an H3 it's going to be form title and we're going to send payment and request it says Styles is not defined okay let me go ahead and fix that styles. form title there we go and now it's starting to show up okay so send payment SL request next up I'm going to create a form inside of there we're going to have a form container inside of there I'm going to have a swap container and then we're going to add in our switch vertical icon and you'll see what this so This icon is this bad boy right here okay so just keep in mind this is what we're making okay this is a target so we got a form container we have a swap container right then inside of that we have a swap Icon now we're probably going to write swap to SL from okay so just keep remember this is our reference point okay let's go ahead and do styles. swap text and it's going to be swap to/ from and now we can see it on our screen that's looking good okay let's keep going I'll put this here cuz I think this will be fine there not in the way of anything all right and then we're going to create a form body here okay and then inside of there we're going to add in a form input container okay and then we're going to give it an H4 and the H4 we're going to say form input title okay and we're just going to say it to so who are you sending your money to right that's where that goes and then the next part we're going to be doing obviously is going to be this message part okay so that's going to be also an input the type is going to be text and we're going to have autocomplete false all right let's keep going for input container and I'll get rid of this move it over and this is going to be an H4 as well form input title and we're going to say amount okay and we're going to have input here okay and class name for this one is going to be form input and type is going to be a number okay so once you choose a number it will give you just make sure autocomplete is off on there and instead of amount we're going to say message and instead of that we're going to change it to text okay and then underneath that we're actually going to make our amount so let's go ahead and do form footer let's give it an H4 I'm going to say footer title is amount so there we go amount is showing up now all right and then we're going to have a div here and we're going to put a footer container and then I'm going to put an amount container div inside of there and then I'm going to put an input container inside of that okay and we want to put a icon here currency dollar icon which is this icon right there okay and then we're going to do styles. dooll icon so now it's showing up on the screen you should be able to see it okay I'm going to get rid of this guy here for a second okay next up we want to make our we want to make this look a little bit better and then we want to make our send button so I'm going to paste the same input styling except we're going to change this to a number and there we go since we added our form input styling it fixed it and made it wider hide myself here all right so now I've changed it to a number and then what I want to do is I want to create a button and this button is going to be send okay and we're going to make it a send button that's the styling I'm going to give it okay now it's looking much better make it type submit and when it comes to our form you know this is what it's looking like right now that's about it okay for our form so if you got to this part great job you you've done an amazing job now next up we're going to be working on the activity header let's go all right next up that right there is what we're going to be building right now the activity header okay so there's going to be a lot of fun to build and I hope you're going to learn a bunch of things out of this but with that said let's get to it let's start building that bad boy okay so I'll bring it right over here so you could have like a frame of reference here as we build it and let let's go so I'm going to go into my app.js and I'm going to hit import activity okay and then let's open up our tabs here and in files you can see I have a folder called activity and then I have activity card okay so let's go ahead and import that so I'm going to go ahead import activity card from components activity activity card okay all right so now it's been imported and now we're going to start building this out right over here let's close everything out all right so I'm going to pop in my activity card here okay pretty soon it will actually start showing up and I'll leave it just here as a reference so let's go into our activity card and now we're going to build it out from scratch okay so let's go ahead and import styles from Styles and activity module. CSS okay make sure you do do do/ do dot because we have to go back out to directories okay then we're going to return a container and then inside of that div we're going to have another div and this going to be a tab container okay and then in there we're going to put a P tag and we're going to have a tab title activity so that's going to be this part right over here where it says activity okay so boom right there it's showing up okay after activity we want to add an in a class name and we're going to do styles. navigation container okay inside of that we're going to add in navigation item and then we're going to do data- current so just so you understand what this data. current is that this is how it will give it this active styling over here okay so that's how we do that all right let's keep going I'm going to make a globe icon let's go ahead and import it from the top Globe icon from here icon react outline and then we're going to go and do styles. Navigation icon okay just like this and then let's create another div here we're going to give it a class name and I'm going to say navigation item and in here we're going to put a user icon and just so you know what this icon will be it'll be this icon right over here right Globe icon is this guy here user icon is that guy okay so once we add in that icon let's go ahead and we're going to add in another NV na ation item and this one is going to be a user group icon the third icon all right and you could see all of these being added here okay so let's go ahead and boom it's showing up that's great let's go all the way at the bottom we're going to add another div and for this I'm going to give it a Styles and say feed list okay let's go to our index.js and here I'm going to remove import from index SL CSS so I'm going to remove the global styling that we were doing everywhere and I'm going to change that and we're going to go ahead and say go into our Styles and grab our global. CSS so now when we do that boom look at that the entire app styling is looking beautiful our form is looking beautiful so that Global styling there fixed almost everything okay so now when I full screen it look at how much better that looks right that's beautiful and like our Target that we had here is matching what we've built there so with that said we are done with this activity header part great freaking job and next up we're going to work on our transactions let's go quick thing that I want to highlight um earlier when we created that send button the problem that was happening with that was it was like overflowing and doing all kinds of weird stuff so I just need you to go in your Styles and go into your transaction Styles transactions. module. CSS and we're just going to change something inside of our container so here uh for our container we're just going to make the width 400 pixels okay if you didn't have that already change it to 400 pixels and then you shouldn't have any problems whatsoever you should be good to go okay all right let's keep on going now so now our button looks really good our send button looks awesome no problems anymore okay let's now go to our context and get to work on setting up our smart contract that's the big main thing that we need to do now okay so we're going to keep track of some states so let's just Define all of those here so the two address we're going to keep track of that state the amount we're going to keep track of that state as well all right so we're going to keep track of this amount State obviously right let's keep going default it to zero because it's an amount it's a number it's not a string so we're not going to have it empty message we're going to leave the message blank to start off with okay we're going to keep track of our loading State and obviously in the start it's false it's not loading and uh we're going to keep track of our transaction count because we want to know how many transactions we have okay and um yep and by default we're not going to set it to zero or anything by default what we're actually going to do is we're going to pull it from local storage okay so that is a very clean way of doing it we're going to pull it from local storage uh so when a page refreshes or whatever by default we're going to pull it from local storage and then otherwise we're going to pull it dynamically okay now what we want to do is let's go down and we're going to check if transaction exists we're going to create this function and this is really a getter and Setter function that we're making here okay so let me write that down here it's going to be a getter and Setter function and what this function will really do is we want to get uh transaction count so okay so this is going here's another way of saying this right get and set transaction count that's what this function really does so what we want to do is we want to get the transaction count and once we get it we want to set it in our local storage okay now where are we getting this transaction count from we're going to be getting this transaction count right from our back end our blockchain smart contract part all right so that's what we're that's what's really happening here okay so let's keep going with this function check if transaction exists we're going to go async on this bad boy and it's going to be a try catch and we're going to say hey if we have ethereum meaning if uh you know so this is saying if you have metamask installed then go ahead and uh do the following then we're going to go ahead and create transaction contract and we're going to create the ethereum contract now this is going to be a helper function we'll create in a second so don't don't worry when it gives you an error don't freak out not a big problem so let's go ahead and actually create this ethereum contract function now and really this is just a boilerplate code for connecting a smart contract that you've made on the blockchain side to your front end so we're just doing that connection part right now okay so let's go ahead and I'm going to set our provider and we're going to choose the metamask as our provider so we're going to say ethereum then we're going to get our signer and this is going to be our provider better. geter so this is whoever is signing the contract meaning like the logged in user with the metamask and then what we want to do is we want to get the transactions contract okay and so let's go to ethers contract and we need to give it our contract address okay we need to give it our contract address and we need to give it our contract API and we need to give it our signer and then we're going to return this transactions contract okay so now contract address and contract ABI those are things that we're going to go ahead and set it up so let's go and get uh on line three let's go ahead and import contract address from utils SLC constants and then we're also going to go ahead and get let's go to our um let's see where we're at let's go to build so we're going to our backend blockchain part let's go to build and let's go to transaction and let's copy that so what we've copied here all right so what we've just copied is all of all of the contents inside of that transactions file okay so uh we're just going to create that same file inside of here okay so let's go and now paste all of that boom there we go so now that I've pasted it so just copy um click right click on utils right and you're just going to hit paste it's going to paste the transactions. Json that we copied over earlier let's go to our constant. JS and we're going to go ahead and say export const contract address so we get access to this and then we're going to do the the following okay we're also going to import ABI inside of here from our transactions. Json and we're going to export our ABI our contract AI so we have access to it in our other file so make sure you do ai. ABI at the end let's go to our uh uh let's go to our context okay and inside of there let's pull contract address and cont contract ABI and now let's scroll down to our check if transaction exist function and here we're going to do the following okay let's go ahead and do current transaction count and we're going to await this and I'm going to say transaction contract. transaction count okay or sorry. get transaction count rather okay this is the function that we have on the blockchain side so I can show you that let's go to our backend let's go to our contracts let's go to our transactions here and boom you can see our get transaction count all right so we got the transaction count on our back end right that's what we're interfacing from our front end so that's freaking exciting because we're literally going from our front end going to our blockchain part using the blockchain solidity function to get the data retrieving that and then putting it out on the front end I mean I don't know that is pretty freaking cool like that's super super exciting right so that's why the await promise needs to happen cuz we're doing a bunch of stuff asynchronously here and then once we pull that bad boy we're going to go ahead and in our local storage we're going to set that item and we're going to say transaction count all right so now we got our current transaction count okay so we have our current transaction count which is we get our count first so then current transaction count becomes a number like let's say eight or something and then we on line 70 right we set in our local storage and we set the key with transaction count and we set the value to that okay so whatever that may be eight or five or whatever however many transactions have happened okay and uh that's looking really really solid to me okay and then now let's go to our you know use effect hook that we created earlier where we added check if wallet is connected now let's go ahead and add check if transactions exist so basically anytime we Refresh on our page that function should fire off and work and you could also you know check in your console log what it's returning and it it it'll show you it's returning like a number okay however many transactions you have like three or four or five or whatever okay so with that said um now the last part that we want to add to this is we want to fire off this use effect hook every single time transaction count changes and the cool part about this is whenever there's a new addition a new Trans action that occurs your page will automatically refresh and show that transaction okay so that's what's happening great job on that now the next thing that we're going to add is the ability to send money send ethereum let's get to it all right time to send some money so let's get into it okay so let's go and add the ability to be able to send money okay this is going to be important and when I say money I mean ethereum so let's create a function we'll call it send transaction async okay and um here's what we're going to do we're going to add a TR catch block here and if it's an error then obviously just show an error okay if it's not an error then try all right so here I'm going to say hey if metamask is installed then I want you to go ahead and add in this transaction contract and create it okay so we're just going to create the transaction contract and then what I want to do is I want to have a parsed amount here okay and we're going to do it with ether's utils and I'm going to parse the ether and I'm going to parse the amount that was passed so if the user gave us a certain amount we're just going to pass it in here so that utils up pars ether amount what that's really doing is if I go here online to a uh eth Dash convert so just go to E eth Dash converter uh and here if I put in like a small amount of eth like 0.001 it'll convert it to way so it'll convert it to whatever way that is okay so that's really what that function is doing okay because remember there's no floating amounts there's only integers then I'm going to request so I'm going to wait ethereum or metamask in this case and method is going to be send transaction and we're going to give it pams pams is going to be an array of object in this case and we're going to say we're going to give it a from address all right so here we go right so we put our gas just for gas just put 0x 52 all right so this basically right here 0x 528 is just a short nice way of saying something like hey I'm I want to pay like 21,000 way or whatever in gas to just cover some basic amount of gas okay that's really what it is and then just choose value pars amount so we got a from which is a current account which is this bad boy right here that's logged in the two is going to be whoever fills out the form or like whoever we're sending it to for the form uh we have we're just going to pay this amount of gas every single time the value is going to be the parsed amount and then we're going to uh turn it into Hax all right so that just converts it to a hexadecimal that's it but we don't really need to worry too much about it we're going to create a transaction hash and that's going to be from the transactions transaction contract and we're going to do add to blockchain okay so basically you know that's where we're doing you know trans uh send transaction okay that's really what we're doing and we're going to pass in our address to our parsed amount our message and then yeah that's pretty good okay those are all of the things that we're going to send then we're going to set is loading to True while that's sending and then we can uh say loading and then we're going to put a transaction hash all right now what we want to do is we want to await the transaction hash here and just do transaction has. weight and then once we're done with that we're going to say success transaction hash and then we want to set the loading to false because loading is done we're done waiting for it and transaction count at the end is going to be updated so now we're going to going to get the updated transaction count okay and then once we get that we're going to set the transaction count to whatever the new transaction count uh is and we're going to convert that into a number so it comes as like a big in or a big number so we just cast type cast it to to like a regular number and then we're fine and then we're just going to do this window location reload thing thing to make our app more robust and then we're going to add a else here and I want to say you know if that doesn't work then No ethereum Object okay meaning like no metam mask or whatever and doesn't work cool with that said we are done adding that send functionality now it's really just adding in the UI the beautiful front end for the form everything is ready to go and then we should be able to send money and see everything okay let's go ahead and do that now all right now the functionality we're going to add is really where we add real functionality of the form meaning that when you actually put in an address and you put in a message and you put in an amount it will actually open up metamask and then ask for you to confirm and then you're actually able to send the transaction so that is the functionality that we will now add with that said let's get into it so let's get started from where we had left off we created our send transaction function now all we need to do is make sure that in our context we actually pass it so the rest of our app has access to send transaction function so go ahead and do that and then I'm going to go into my transaction form and inside of my transaction form we're going to use our use context hook and get access to the transaction context and I'm going to destructure send transaction function from there set address to address to and set amount hook okay and the amount hook and message set message Etc right so we we're just going to get access to kind of all of that that stuff and we need to send that stuff over too so just make sure you copy all of that and you paste it here so you want to make sure that in your context you're actually passing all of that information right the set address to hook the address to uh set amount hook amount State Set uh message set message all of that okay so we're going to go ahead and do that okay cool now that we're doing this let's go ahead and make sure that we write our handle submit function okay and in this we're going to take the event okay and the first thing we're going to do is prevent default and what that does is it makes sure that you don't refresh the page doesn't refresh once you hit submit and we're going to say hey if the uh address doesn't exist or amount doesn't exist all right so we're going to say if none of these exist then just do nothing okay just ignore that okay we only want this to work uh if those exist and so basically this is like a guard Clause that we're adding here and then uh if none of those are true then obviously we're going to send the transaction okay so the transaction is going to send when these things exist okay and then we're just going to for the input um for our form title we're just going to say value uh is the address to okay so that's the address to right here and we're going to say on change we're going to set the address to whatever you're typing in the two and then we're going to do the same thing for for our message and then we're going to do the same thing for our amount so right now we're working on our message okay value on change same idea and then we're going to do the same thing for amount it's going to be literally the same pattern okay so let's go ahead and do that for amount on change set amount Target value okay good good old react stuff and if you're wondering yes yes my hair did change okay um I went to get a haircut in between the shoot so shout out haircut gang if you saw this um you know not most people will make it to this part but if you're one of the lucky few good job all right let's keep going let's wrap up this entire bad boy that we have written in a form and we're going to add a handle submit to that form okay so the handle the function essentially that we created right here so this form is going to be looking for when you press that juicy send button when you send that send button when you send that send button I mean to when you click that send button your send transaction or whatever function or handle submit function is going to run okay but let me ask you is it going to run right now that this is empty I'll give you 4 seconds to answer that 4 3 2 1 no it will not well the function will run but it won't send the transaction right because there's nothing here so that won't happen but if you have all of these filled out and then you hit send will it run I'll give give you 4 seconds to answer that 4 3 2 1 hopefully said yes and yes if you have it filled out it will send so let's keep on rocking and rolling here and let's open up our console on the right hand side okay and then we're going to go to our code um just on change with the capital c okay so the that that's where the error was coming from so just make sure it's a Capital C that you have cool all right now it looks like it's working now let's go ahead and type in our two address ignore my dog she's a little baby bulldog she's wild all right there we go we got our two address sometimes you know I order Uber Eats they show up at the door to drop the food and then she just starts barking and I'm sick and tired of having to edit that out so you guys are just going to Hear What I Hear at my house every day so if you got to this dog barking part feel free to comment that as well and um yeah let's write our message have a great day and we're going to put in some amount and we're going to hit send and now notice that it is opening up metam mask how beautiful is that let's hit confirm there we go metamask is popping up I will make myself tiny here so you can see confirm boom look at that and the loading transaction hash is showing up too that is nice right that was real clean and there the transaction has taken place right and if we go to the other account where we sent this money it looks like we got the eth so we are now able to send money I mean 99.9% of the functionality of our venmo app is complete you know functionality wise but now we still got to make sure that we render the recent activity and we show all that stuff so I hope this was exciting to you I hope this enlightened you and with that said let's keep on rocking and rolling next up the component we're going to make is this guy right over here okay this is going to be your recent activity SL recent transactions component so you know what who's making the recent uh transactions right this is what you see on venmo as well so let's go ahead and work on that component now get rid of this here and let's go I'm going to pop this in the purple thing in the back is not really what you're actually going to be adding okay that's just like interesting looking padding that I added but this is the part that you're actually going to be building I just wanted to make sure like I wanted to just make it stand out Okay cool so let's go ahead and work on this now all right let's go into our activity card. jsx and inside of my activity card let's go and import my context from react and then the next thing I want to do is I want to get my transaction context from my context file we'll get shortened address from utils okay it's going to be SL util slsh shorten address yep just like that and then we're going to uh pull transactions and current account from our context let's go and get all transactions inside of our context let's go and get all of the transaction so it's going to be async it's going to be a try catch here we're going to console log the error and then we're going to say hey if metamask is installed I want you to create the transaction contract and we're going to create the ethereum contract once that's done we're going to get the transactions okay so we're going to say const available transactions and we're just going to await the transaction contract and we're going to call the get all transactions function which is on our back back end okay in our blockchain part so if we go to our transactions. Sol you can see we have get all transactions right there and it's a view function and it Returns the transactions we're going to say get us the structured transactions all right so basically structured transactions all we're doing is we're transforming the data that we're getting and so I'll kind of explain to you what I mean by that right let's go ahead and write this um okay so we are now just going to pull our address to from there this is the um transaction receiver okay that's the who we're sending it to okay uh next up we're going to get our address from and that's a transaction sender and then we have our amount um or actually in this case let's just do our Tim stamp and uh let's call our time ago that we got imported added earlier all right and we're going to say format okay and I'm going to create a new date in here and we're just going to put in the transaction okay. timestamp so each transaction will have a timestamp from the blockchain and I believe the blockchain puts their transactions in Unix all right so all right so there we go you heard that confirmation in there uh our developer confirmed with us that it is UNIX our developer being your boy Kevin um and basically if you pass it that Unix right and you give it as a number and uh we pass it to new date all right so what what the what the multiplied about thousand Shenanigans is because you're getting a okay here it's annoying you don't really need to worry about it but I'll tell you anyways you're getting Unix in milliseconds so in order to turn it into Unix in seconds you multiply that bad boy by a th000 now it turns into Unix seconds you give the Unix seconds to your new datetime object it turns it into a daytime object then you call time ago format on that daytime object and it knows how to turn it into a time ago naturally you know written language kind of like here where you're seeing uh you know 23 minutes right there or 31 seconds right there that's what time ago does okay there we go all right so we're going to say comma mini here all right the mini is a time ago thing so you can give it mini so that means that it's instead instead of minutes or mins it's going to say m or s for seconds okay there we go and then message um we will call it transaction. message okay so now that it's uh restructured like this or AKA transformed you won't have to Loop through it go transaction. receiver transaction. sender you can actually just Loop through and go do address to do address from timestamp so it'll be much cleaner so your code won't look like transaction. transaction. receiver pass in your amount will parse in and we will give it the transaction amount in HEX and we will divide it by 10 to the power of 18 so if you're looking at this and you're like what kind of n Jitsu garbage is this um I'll explain real quick we are going my friend from way this is like the ugly stuff about blockchain I don't know why they do all this trash like this development experience is going to get better at some point but that's what it is right now it's in way and we're converting it to e so remember when we went from like a really tiny 0.2 number and we turned it to like a 10 billion way number when we went to e-con converter.com well now for the front end we got to go from way back into eth and show it to the user okay so we're reversing that all right hope that makes sense okay let's keep on rocking and rolling all right and then we're going to import time ago from JavaScript time ago and we will also import en from JavaScript time ago loal okay and then we're going to add that local to the time ago and we'll say time ago and we'll make it a uh enus okay so then it'll look like American time zones okay um and time ago if you're looking for it right in your package.json we have it either added and if we don't have it added we can just go ahead and install it now so in our command line we're going to go ahead and say npmi and we're going to go ahead and say JavaScript and just do dash time ago beautiful hit enter and now it will install it all right so basically now guys we have it installed okay and once it's installed your time ago is going to work okay let's keep on going through this all right let's go down and we're going to add our set use our set transactions hook that we got earlier okay um or actually let's define it here so I'm going to say transactions and set transactions and in the start is going to be an empty array okay it's going to be an empty array and then what we're going to do is we're going to set the transactions to structure transactions uh and else we're going to say No ethereum Object okay and in our context provider make sure you also export this value so we're going to say transactions let's pass it to our app so we have access to transactions everywhere else in the app now inside of our activity card you can see that we're extracting transactions all right guys so there we go okay so now transactions will make more sense right because we're pulling it out because we actually have access to it and now this feed list that we have inside of that feed list we're going to all right so we're going to go ahead and do transactions. map and now we just want to Loop through and render those transactions out this is like mainly the front end part here okay so we're going to go ahead and structure an ID an address from our timestamp our message our address from all right so we destructured all of this stuff id address from time stamp message address to Etc um and then we're going to also get the index okay okay so we got this right now We're looping through this and now let's go and render this out so I'm going to do an implicit return here right arrow and then parentheses is an implicit return okay so there we go now class name so key is going to be the index right that's why we pulled the index when we were looping and then we want to give it a class name of feed item for this here class name here we're going to give it a styles. avatar container okay and we're going to give it an image and it's going to be an avatar image and for Source we're going to Generate random Avatar all right guys so now you know Generate random Avatar obviously doesn't exist but we're going to go ahead and uh create that now so let's go ahead and do Generate random Avatar and this function it's going to work in the following way we're going to say random Avatar and I'm going to randomly pick a number between 1 and a th000 okay I'm going to be using this as my seed number and we're going to use this dice bear API which is very nice okay and um we're going to pop in the random Avatar that's how we're getting this by the way this is using the uh dice spare API okay that's how we're getting all of this and how it works is you give it a random seed so we're just going to give it a random Avatar plus current account and we're going to say um SVG at the end of it okay and um there we go all right so now it will generate a random Avatar every single time and make sure we're going to create another div and this one is going to be feed details so the point of this is so we can actually see the details part okay so here we have U you know this this uh feed details is going to be obviously the details part that we're going to be adding to this okay okay and then we're going to have a feed author that's where we're going to put the wallet uh and shortened address so there we go we got the shortened address so we're going to put the shorten from address and then we're going to put the shorten to address so that will say you know from and then it'll say to okay so there we go that's very nice and then what we want to do is we want to add a span tag here and we want to do created at so this is going to be our Tim stamp here which says 23 minutes or 31 seconds Etc and we're going to put our timestamp there okay right here we're going to put a globe icon right next to it just like this so that's why we're doing this globe okay and let's go class name we're going to go styles do feed author or sorry feed body this case actually and for the feed body we're going to add in a message so this is the message like have a great day or thanks for the ether all right perfect uh all right let's make another div and for this one I'm going to give it the uh feed CTA so this is going to be the call to action or these buttons like like and comment just like how we have on venmo and we're going to give it a heart icon and we're going to give it a like icon for that one and for the next one we're going to give it it and just so you could see right there we go that's the heart icon so I'll leave this here so you can kind of see the heart icon and the other icon or actually let's put it here why not so you could see it okay um so we got the like icon and then we got the comment icon all right let's go ahead and refresh our app let's see here actually let's go to our activity card or sorry let's go to our context here and inside of our context I'm going to go to around line 47 where in my check if wallet is connected function and we're going to get access to all of our transactions okay so let's call that function get all transactions all right and let's just make sure I'm going to full screen and let's check here if it's pulling it through it's giving us an error it says cannot read undefined okay so hold on let's see what's going on here all right let's look for it all right so is a t it's actually a typo here so amount doore heex it's amount doore heex on line 40 so that fixed it there we go we're getting all the transactions and our transactions are showing up I mean that is nice that looks beautiful okay that looks great and you could see oh wow you can see right address from you can see address true the amount sent message and Tim stamp and all of that is showing up here so this is really really good so far let's go to our account one and we're going to copy okay I'm going to paste the account 2's address so we can send them the money we'll put in a message thanks for the ether there we go and we will put in uh some eth and let's go down and send it let's hit confirm it says loading so you could see that right away okay let me hide myself so you can see loading right away there we go and once the loading is done we could speed it up right once the loading is done boom right there there you go now the transaction is showing up how freaking beautiful is that that is fantastic so great work on that so far that is wonderful and with that said we're done with this part at this point we're pretty much done with the entire app we're just going to put the finishing touches and we're good to go so I'll see you in just a second all right so now we're going to pretty much just be demoing the app but you might have noticed that I have this ad thing here now this is pretty much just react I'm not going to go ahead and build this out this is going to be a challenge for you to build out and add to this app if you get stuck you can always just check out to the main branch because if you did npx clever programmer right for this project you can check out to the main branch that always has the full solution right now you're on the CLI starter Branch so you are doing this from scratch yourself okay so if you can always switch there and then code um or sorry find the solution but I would say you know everything you need to know at this point to be able to put this together okay or make a ad looking thing similar to this and you should give it a try okay you already have the assets and everything like that so I'm just going to go ahead and demo the rest of the app so like let's just play around with the app right and let's just make sure that it works I'm going to go right here I will click into account one I'll try to send some transactions over to another account let's go ahead and um refresh the page you can see the Avatar's changed right the logos the random generated avatars have changed we're pulling in the transactions the time stamps or the transactions are showing up I'll put in a new address here we'll put in a message and then we're going to go ahead and put in the amount let's see if it works with Emojis okay so I'll put in an emoji here ah no Emoji showed up oh well let's hit send and let's go ahead and hit confirm there we go we'll go Ahad ahead hit confirm and look at that it's loading loading loading loading right and let's see okay and account three or account two yep the money has gone and without even refreshing the page you can see that it's says 26 seconds ago thanks for dinner all right so there you go that is your entire app so with that said I really really freaking hope that you enjoyed building this from scratch I hope you get to deploy it I hope you you know share in the comments that you did it I mean I'm really excited that you were able to follow along build this you should be very proud of yourself if you enjoyed this video smash that like but button turn it white turn it blue depending on if you're using dark mode or light mode on your YouTube subscribe to the goddamn Channel I love your beautiful face this is ky and as always I'll see you in the next videowe're going to be building the venmo Clone with solidity and infura this is going to be a very powerful D that you're going to learn how to build from scratch we're going to be coding up the react part along with the smart contract and the blockchain part there are a lot of Concepts you're going to master as a result of this from blockchain Concepts to programming Concepts but more importantly I think you're going to have a lot of fun and you're going to learn that building blockchain apps don't have to be a painful experience they can actually be quite a pleasant experience so while my fire is burning behind me let's have a Fireside app building session with that said smash that like button turn it blue or white depending on if you're on the light theme or the Dark theme on YouTube subscribe to the channel because this is where we help you become a developer and a web 3 developer and let's get straight into the video step number Uno which is we are going to sign up on infura it is completely free it is a RPC node provider and it will make your life so easy okay so that's what we're going to use when we're building our dap so go ahead to the link below that we've provided for you okay use that special link that way we'll know that you're coming from this video it will be helpful for infura to know this um and yeah just click the link in the description below okay it's going to be info. whatever that's going to be the link click that below and go to this page right here hit sign up once you're on this page all right and then just create an account so I'm just going to create my account right here hit uh resend email so it'll send you a confirmation go to your email address go ahead and confirm that bad boy once you're done it's going to send you to this page Pick Your Role so let's say you're an engineer okay slev developer so solo freelance whatever and pick your category and then just hit next all right now you're going to create your first project so you're going to do web 3 API former early ethereum and uh the last part you're going to do is my first project name it whatever you want I'm just calling it my first project okay all right so there you go now we don't need to touch this in here okay everything you can leave as is because we're going to use an extension later called truffle and that will allow us to interact with infura and pull all of this information okay so there you go your project should be created in here my first project okay and uh that's effectively it okay so make sure you go ahead and do that and I'll see you in a second all right so here is the demo of this app so take a look at it right I am here on my venmo clone the first thing I need to do is actually go ahead and connect my wallet so I'm just going to type in my password on metamask and log in once I am logged in I'll just hit I'll connect both of my you know any of one of my accounts I'll just start with the account one in this case once I'm in you could see on the left hand side that I have all these transactions going through and it's showing the notes as well so here what we're going to do is I'm logged in currently okay so you could see my metamask wallet and you can see that I'm connected okay and here's my other account so here's account two right and then here's my first account and I'll paste in the second account that I want to send my money to and I will drop a message okay you could send your ethereum to really anybody that you want but I'm just going to send it to this address I'm going to say here's some money now metamask opens up and asks hey do you want to do this are you sure blah blah blah yes I'm sure I'm going to put in my password all right it's telling us about the gas fees let's hit accept Okay it's doing a little loading all right blah blah blah contract interaction go down hit confirm and we'll wait a couple of seconds here okay let's wait and it says p uh pending so I'll speed it up contract interaction okay we'll speed it up and boom it's done look at that on the left hand side it loaded right away and it says here's some money and you can see it says 4 seconds ago that is beautiful okay and again now I can switch the account as well so I could go to a completely different account okay and I could send money to the other account so I can change accounts and send money to wherever I want okay so I'll refresh you can see that the account just changed over here okay it's a completely different account as you can see keep going I'll paste the account number and I'll say thanks for the money and I'll send some money in return okay thanking the person for sending me some money there we go and now we'll hit confirm and let's wait for it wait for it sending and I'll hit speed up contract interaction is done and look at that right away it shows up all the way at the bottom right it says thanks for the money beautiful so there you go I hope that you're excited about this project this will be the venmo Clone that you will be building I hope you're excited is going to be happening with solidity so with that said let's just rock and roll and right before we get started ladies and gentlemen I just want to give a huge shout out to this man right over here um M at this screen screen thing but JavaScript Mastery uh a lot of the smart contract part is from his video called Crypt uh where he built the Crypt portfolio uh so definitely check it out we'll Link in the description below uh it is awesome resource and on top of that we built our own styling and everything and then converted it into this beautiful venmo app that you see in this video so with that said let's get back into the video shout out JS Mastery all right now open up your command line and let's go ahead and what we're going to do is I want you to just write npx clever programmer this is a clever programmer npm package that we have made and the benefit of this package is really that it actually gives you everything you need so we're giving away The Styling a bunch of the app assets uh and we just make the whole app really really simple for you all you have to do is just type in that command it will install it for you okay and uh once you're done installing it make sure that it's going to ask you hey which uh what's your email address just pop in your email address and then after that it's going to ask you for your name and it's going to ask you for what project you would like to initialize so for example in this case we're building the venmo app so make sure to just initialize venmo it will initialize a whole bunch of helpful files for you so that we don't have to spend a bajillion years trying to build this app you know the styling will already be done will do the interesting more fun INF fura SL web3 solidity Parts okay is that's really the focus of this video right so boom there we go it uh now it's installing it and setting it up on your computer getting the dependencies for you so this is the magic of when you set it up with npx clever programmer okay it's going to basically start the project and it's going to automatically open it up for you okay if it's giving some kind of error or whatever just understand that all we've done is we've cloned the repo put on your computer so you could point and click and kind of go inside of it as well if you wanted to okay so let's go ahead and now see what is happening all right now that the project is opened up what I want you to do is just open up the terminal and I want you to type in yarn start that will inst start your server okay that'll start your project now just go ahead and I want you to open up your Local Host 3000 okay and you could put it on the side of your computer like this all right so on the left hand side your server is running on the right hand side your app should be up and running so that's where you should be at and let's go to index.js okay and you can also go into your app.js and you can see that this is a regular react file right pretty much vanilla um except the only difference is really we've given you a lot of the styling all right so let's keep rocking and rolling here okay on the left hand side you will see in Source you have assets components and styles and normally you won't have assets or components like that's something we've created for you and given you and in Styles we've created extra selling for you as well okay so that's the structure so we're going to go into our app.js and we're going to delete everything in anything that's inside of that class name app div okay remove go ahead and remove everything so now your app should be this blank canvas we're going to get rid of that logo.svg as well we don't need that let's refresh and again your app should just be not giving you any errors but also not really showing you anything okay now inside of that Dave we're going to basically just put in hello world and once you do that that is enough for this part we're already ready to get started with the web 3 and truffle and infura part I hope you're excited let's just get to it all right so here we are now we're going to be getting onto the Truffle part okay we're going to be setting truffle up and we're going to be setting infura up so let's go here now in the main main directory what I want you to do is create a new folder okay and we're going to call it backend AKA blockchain part so in this case our backend part is really going to be our blockchain part AKA our smart contract part okay so let's go into our back end but what's cool about this when you're in the blockchain world is like you don't really need to deal with Firebase or uh it's funny I'm saying Firebase and I fire behind me but like you know your back end isn't the traditional mongod DB or Firebase your back end is the blockchain okay that's where you're storing your your data majority of the times all right let's go ahead okay so let's go ahead and now I want you to type in Truffle in it okay um and before we actually do do that do that let's go ahead and make sure we're in our C back end so go ahead and do CD backend for me once you're in there I want you to type in Truffle in it by the way quick thing if you don't have truffle installed put in this Command right here and that will install truffle for you and if that doesn't work Google it with that said let's keep on going okay so after you do truffle init it will pretty much set this up for you okay and kind of uh initialize the repository for you on the left hand side a couple of things should happen okay you should have this contracts part the migrations part and test part get built out and truffle config should start showing up so before your backend should have been empty but after doing this you should have these three folders plus that one file ready to go okay now inside of your contracts you have something called migrations okay so that's what's going to be there and then also you have a migration folder that will have your initial migration okay this is what you're going to be using pretty much to deploy your contracts afterwards as well so all of this information is pretty important now inside of your contracts you're going to create a new file and that's where we're actually going to create our smart contract okay so let's go ahead and call it trans actions. soul. O Okay is short for solidity and then we're just going to put in a little license here and we're going to say spdx okay Dash license and since this one is not licensed the identifier we're going to pass it is unlicensed okay and then that warning at the top you know is basically taken care of so you could just say hey it's unlicensed that's totally fine all right next up we're going to go ahead and make a contract and we're going to call it transactions all right now that we got our transactions contract just we we're just going to leave it at the blank right now okay and then what we're going to do is here's what I want you to do okay I want you to go ahead and get this extension truffle okay so at the bottom left you see that I have this truffle and extension okay right over here okay that's the extension that I want you to get all right so what you're going to do is go to your extensions you can also do command shift X or control shift X go into your extensions type in truffle and just go ahead and install truffle okay truffle for vs code this one right here and then once you have it installed go to your truffle extension okay and this going to make your life really easy when you're developing this is really nice and what we're going to do is we're going to go ahead and hit connect to network and then it's going to ask you do you want to use the gach service or you want to use the infura service or other the one we want to use is we want to use the infura service right over here okay so go ahead choose infura and then I want you to go ahead and choose sign in so let's go ahead click sign in um and then just simply sign into your infer account okay if you don't have an inferior account just make a new inferior account cuz you're going to need that for this app and excuse my dog she's a little crazy bulldog and she's wild so she'll be barking in the back but we'll ignore her all right here you have um this little error thing showing up you could ignore that it's not important here okay it pops up all the time but it doesn't doesn't really matter all right all this stuff pops up here and all I want you to do now is um simply just go scroll to the bottom and hit authorize okay now that that's done it says you are signed in you can now close this page so simply go ahead close this page okay and now at the top here it's going to ask you to put in the project name okay right right over Yonder boom right there okay so go ahead put in your project name I'm going to just simply say uh venmo clone or whatever okay so let's go ahead and write that in venmo Clone all right and then hit enter and then we're going to just make this project public cuz there's no reason to make it private okay and now you can see on the left hand side we can see infu service showing up and now I'm going to go to infura doio and on here let's go ahead and click uh start innovating button okay so go ahead and click that and right when we click it you could see that we see that there's a ven mclone okay this is the one that we created from our command line little tool thing that popped up over here and now it says this project is active it was created today and boom okay this is good to go right now it should have zero requests okay and on the left hand side you could see that if you click your infu service and ven mclone you could see all the networks you have access to so main net you have access to gorley Rinke rosin and then Layer Two you have access to all these other Main and test Nets okay so with that said you've done a wonderful job now we're going to move on and we're going to start working on the smart contract so let's get to that in the next part all right here we go now we're on the fun part we're going to be making our own contract okay so let me take that photo away and I'll show you why I have that photo in just a second but let's go ahead and work on our smart contract here okay so let's go inside of transactions and I'm going to uh add in a very specific version of solidity here so we're going we going to go ahead and choose a specific version of solidity so I'm going to put a carrot and do 0.815 okay that's a version I want you to use and uh usually the first line of code in any solidity app is usually that pragma solidity blah blah blah put your version okay so go ahead and do that then inside of my contract I want to do a un 256 and I want to have transaction count this variable here will be keeping track of how many total transactions we have at any given time all right let's keep going now just so you understand what I mean by this okay I'm going to bring this into the view so remember in our finished version of the app we'll have a transaction or a transfer and then we'll have multiple transactions so that transaction count will be keeping track of how many times the user for example sends a particular like sends transactions right so if we've sent five or 10 transactions and all users have sent 10 transactions then the transaction count will be 10 so just keeping track Global track of the count of transactions okay the next up what we're going to do is we're going to create an event that will be fired when a transaction is made okay so for example we're going to say event and I'm going to say transfer and here's what I want transfer to do so I want to show who the transfers from okay uh the receiver okay who received the transaction the amount of the transaction and the message of the transaction and just so you can understand what this means from is going to be this address of the user that's logged in okay receiver is going to be who you're sending it to amount is going to be the amount that you want to send and then the message is going to be this right here okay but now when you're using uh languages like solidity or whatever you have to Define data types so I know that this is a string data type so I'm going to say string um the amount I know is going to be an integer okay so I'm going to go ahead and say int all right now if you have a little bit of programming experience you might be like wait a minute Cy how the heck is a mount a a int a u int by the way is unsigned integer meaning it could be negative and you might be like wait how the heck is an integer if this is 0.002 under the hood everything is being calculated in the smallest denominator in ethereum which is way so a way is much smaller number so under the hood it's not actually um in decimals is just showing you here in decimals because this is not in way okay so uh there's actually no float type in um Sol solidity which is pretty interesting but yeah all right and then we're good with adding all of that stuff and the last thing we're going to add in our event actually is the Tim stamp so that thing is the thing that's not visible right now so for example timestamp isn't showing up in anywhere uh in any any of those okay so time stamp what we're doing is under the hood right when the user hits send we're going to log that time so let's just say it's like you know it's 12:33 a.m. and this dude is sending some money to his friend um for cleaning what kind of friend does he have that cleans at 12:33 a.m. I don't know he sending the friend some money for some okay we don't know what it is uh he maybe maybe gave him some food and now he's he's paying his friend at 12:33 a.m. and that time stamp we're going to log and it's going to get log lowkey under the hood and we're going to pop that in right there okay that is going to be attached to right when the user clicks send okay just to kind of give you a little insight onto what we're doing here all right now the next thing we're going to do is we're going to create a struct okay uh of the transaction that we will be storing on chain okay and um stru is kind of a ugly name and it makes things sound confusing but it's really just a structure or like a data type here and so we're just going to say hey when you see a transaction or a transfer this is the type of stuff it's going to have inside of it okay so expect it to have a sender expected to have a receiver expected to have an amount you know expected to have a message and expected to have a Tim stamp okay that's all what we're saying here all the rest of what we're saying here is uh about these data types okay so the main thing I want you to notice is sender receiver amount message time stamp those are all the things that are happening here okay now what what is this other stuff addresses a specific data type inside of solidity when for wallets it understands it when you say address okay same thing for the receiver uh it's not just the string so it understands how addesses work underneath the hood all right and then amount is in in string message is a string and then time stamp we're going to make it a uh in 256 now you might be wondering uh why is this u in 256 and why is this int just by itself if you don't say 256 and you just use int like this by default it's actually in 256 okay so both of these are both of these here are actually in 256 okay so that's really the one thing I want to clarify here okay beautiful so now that we're done with that now we're going to create an array of those transactions okay so the the struct that we make we're going to make an array out of that so let's go ahead I'm going to say transfer struct and let's go ahead and rename it and call it transfer struct the reason why we're going to call it that is it's very clear that it is a struct okay and then when you get better as a developer you could just call it transfer or you could call it transaction okay uh that should be fine now we're going to create a variable called transactions and here's the interesting part about this okay we're we're declaring a variable called transactions but we're saying that this variable here is going to be an array of transfer structs meaning it's probably going to look like an array okay an array and it's going to contain these transfer struct object so it's going to basically contain you know if you're a JavaScript or a react person imagine this so imagine um I have my receiver and the receiver is 0x blah blah blah I have my sender 0x blah blah I have my uh not sender I believe it's from it's one of those and then I have my uh let's say my message and it's hello okay and then you know and that's just like one transfer struck let's say okay and I'm I know the transfer struct test some more stuff but let's just say for Simplicity sake this is one transfer struct and then there's more transfer structs so in a classic JavaScript scenario imagine that you really have an array of objects okay and more specifically the objects will represent the transfer struct meaning that whatever Keys the transfer struct has these objects will have and if you don't put that in if you have an object that doesn't have those keys it'll error out okay okay so uh there's a lot of type safety into the code and that way your code will have less bugs and errors but at the cost of like really being very verbose and explicit um upfront cool okay so let's keep going now what we're going to do is we're going to make a function uh to add a transaction to the array to the blockchain okay with our struct so let's create this function and we're going to call it add to blockchain but really what this function is doing is adding you know essentially it's adding a transaction to the blockchain that's what we're doing we're going to create a so the variable here that we're creating is called receiver all right so here the actual variable here is receiver okay that's the main thing these two are these two are think of them like data types okay address is a data type and payable is a special keyword that makes it so you could actually pay the receiver that's it okay let's keep going so address payable receiver then we're going to have an amount we're going to have our uh message as well okay so but for this one we're going to say string memory message don't ask me why you have to say memory if you don't write memory you'll get an error so just write memory string memory M message okay all right then all we want to do is you want to say public meaning that even outside of the smart contract you should be able to actually call this function so we have access to it all right and um payable keyword means okay that the receiver is actually able to receive ether from the sender okay so something I said earlier but this is just to make it really verbose and clear for you and co-pilot wants to do a lot stuff but we're going to skip that now here's what happens in this function when we are in this function what we want to do is when the user calls this function meaning you're calling your function add transaction right well the first thing we want to do is we want to increment the transaction count by one right that should be obvious it's like I'm adding a new transaction to the blockchain increment the the count of and the number of transactions okay and then what I want you to do is take the transactions array that I created earlier push new uh transaction to it okay and all we're all we're pushing to that array is literally from my JavaScript World okay my JavaScript peeps you're literally just sending an object okay this object is going to be like uh you know sender ZX something uh you know receiver ZX something message hello whatever okay timestamp timestamp some Unix Unix timestamp okay so that's all you're sending okay so this over here uh is a Constructor transfer struct here is a Constructor and once you pass it all of this information it's going to literally make an object for you at the end of the day that's all it's doing and message do sender just in case you're wondering what it is you know when you're signing with metamask so like when you're doing this thing with metamask right where you're literally signing yeah that is what refers to the message. sender okay so the dude that's logged in with metamask and hitting send and then hitting confirm it's pulling that dude's account address okay from message. sender now if you're wondering how it's pulling the receiver it's pulling okay for so this is the sender and then this guy who we're sending it to is the receiver okay the amount that we have okay wherever the amount is let's just say that's the amount that's going to be the amount that it's pulling and then the message is whatever message you wrote in and the timestamp is like the exact moment you added it to the blockchain okay so that's why we're getting it from that special keyword block and this MSG is also a special keyword in solidity so both of these block and MSG is a special keyword okay um my my big head is blocking some of that stuff so there you go that's what I was showing you like that little transaction there is the amount okay now I'm going to hide it again because I like myself uh being huge like a big giant on the screen so I'm going to make this small and I will hide it away from you and I'll just bring this back for now and let's keep going okay all right and then next up what we're going to do is we're going to Adit the event we actually created earlier so we want to Emmit the transfer event we created okay so let's go ahead and just Emmit that event we're going to give it to Sender receiver amount message block Tim stamp and all that good stuff it's the equivalent of doing the you know a console log let's say all right so let's keep going over here and we got our amount we got all of that okay I'm just going to check if I'm on the right solidity version I am yep so there you go that's your emit event that you're going to have there okay now we're going to write a function to actually get all of the transactions from the blockchain so let's go ahead and do that so I'm going to call this function get all transactions and I'm going to give it a public View and we're going to return a transfer struct that's the data type we're going to return and we're going to actually return so think of like we're going to return an array of objects and the array of objects is going to be of type transfers or transactions okay and we're just going to put memory there because if you don't put that you get an error so so just put it okay and then we're just going to return transactions at the end of the day and um yep and then we're going to make another function and this function is going to get the number of transactions and we'll say get transaction count okay and uh again it's going to be a public function and it's a view so for a view we're telling we're telling the blockchain hey there's no transaction happening here we're not going to be changing the data so you're not going to don't you don't need to charge us here for anything it's just going to be a view and then public is so you can access it from outside returns is what data type and what specific things are we going to return so we're going to return an integer and then I can just go ahead and say return transaction count and that's about it so yeah and then lastly what I want to you know just explain really is the view keyword right that basically means that the function can only be used to view the data all right that's that's all that means all right and and that means that no ether is needed to run this function okay that's something that I want to highlight to you with that said we are done with the contract part now we just sit back we watch the firework and it's time to deploy the contract let's go all right now that you've made the contract it's time to deploy your contract okay it' be kind of like if you had all this wood behind you but you never lit it on fire okay if you didn't do that what's the point of having a fireplace it's useless so when you have a contract there's no point to just having a contract it's like having a bunch of wood we got to deploy it okay we got to add the fire we got to turn it into a fireplace and that's what makes it usable by everybody in the world including yourself so let's go and do that now so what I'm going to do the first thing inside of contracts you see transaction here I'm going to hover over it and I'm going to rightclick okay I'm going to right click and what that will allow me to do all right so now what we're going to actually do is inside of our migrations folder we're going to create a new file okay so let's go ahead and let's create a new file and before we do that go into your 1or initial migration copy everything inside of that and then I want you to go ahead make a new file toore deployed. JS paste all of that and everywhere it says my migrations we're going to change that with transactions okay so you could also do right click and rename all occurrences or you could just do this in this fancy way or you could use the shortcut command D which I on Windows I believe might be controll D that right there okay that should allow you to do that multi- select on everything let's keep going and now what we're going to do is we're going to rightclick on our transactions right here okay and I'm going to choose build contracts now if you're wondering how do I have this build contracts right here it's only possible you guys if you have this truffle extension okay if you don't have the Truffle extension okay this extension right over here if you don't have that the build contract right here will not show up okay so make sure you have it okay so we're going to hit build contracts now my contract has started building so we'll keep going through it okay it's going to take a second to build and here's what happened okay I just ran into a little bit of an error let's go ahead and I'm going to choose truffle for vs code so go click output and then here choose truffle for vs code so we can actually see what the error is okay and here I'm checking to find we're checking to find what the error is and it says hey there might be something you need to fix in truffle config so I'll show you what we need to do so first choose truffle for vs code scroll down till you can see the error and you can see the error says truffle is currently using Soul uh solidity version 0.811 and it does not match what we have inside of our file right there so let's go ahead to our truffle config.js right here and fix this problem okay so let's go truffle config and scroll down to line 8 4ish and where it says version you see it says 0.811 go ahead and change that to 0.815 okay so we're going to go choose just put a five there let's hit save okay and now let's try to deploy this again and see if it works okay it's going through and let's see okay looks like we have a build folder now that's starting to show stuff so that's a really good sign and there we go you could see it says compiled successfully using Soul version 0.8.1 5 okay so our contract is now deploy uh sorry it's built now what we need to do is SE let's go ahead and right click on transactions and this time we're going to choose deploy contracts so let's choose that okay now here I make an error okay so I choose the robsten network but I don't want you to choose the robon network do not choose this choose gly okay so I want you to choose the gly network that's the one okay that's the one I want you to pick don't pick robon just want to make that super super super clear so in your case you should be picking you should be picking that guy right over Derek gley once you click it it's going to ask you to paste your pneumonic now remember earlier in the video when you made your wallet with metamask that's when it gives you a pneumonic it tells you to write it down so grab that pneumonic that it gave you and I want you to bring that here and paste it here okay so we're going to paste our pneumonic now and it's going to ask you to save it now you could save it anywhere you want okay um so I'll just go to my own folder here and I'm just going to hit key. EnV and there we go we've saved it and at the bottom you should see it's saying deploying contracts okay and your project name is going to be different than mine for you should say deploying contracts to venmo clone okay I just have to create another project cuz I was getting some errors or whatever but hopefully you won't be getting errors if you are also getting the same errors then it might actually help you to create a new project okay so just a little note for you and pretty soon this in um deploying will be completed and it is okay so now that the deployment is completed it gives you this very important contract address you're going to need access to this so hover onto this and I want you to copy it okay this is a very important contract address and then I want you to go ahead and grab this contract address okay so let's go ahead and grab this contract address and what we're going to do is we're going to make in our source folder we're going to make a new folder and we're going to call it um we're going to not a new file we're going to call make a new folder we call it utils okay and inside of utils I'm going to make constants and inside of there I'm going to save a new constant constant file it's going to be called constant. JS and inside of this file we're going to make a contract address and we're going to paste the contract address in front of it now a little note for you uh just put const here I forgot to put that okay so just put const contract address and we'll come back to this file and we'll fill it fill it out completely okay all right so with that said right now you're doing great your contract is deployed so congratulations cuz that's a huge part of the process and at this point we're pretty much done with the smart contract blockchain part pretty much completely and now we're going to do the fun frontend part where we're going to connect to this back end and then now we're going to really make the app sing so I hope you're excited I'll see you in a second all right now what we're going to be building is going to be the Navar okay so it's going to be the nav bar we're going to build for our project this is what it's going to look like so boom right there okay that's what it's going to look like right there so that's the target that's what we're building remember it's not built yet okay it's just a photo so I'm going to leave that it here as a target of what we're building or actually let's leave that here so that could be like a use as a reference point okay so now let's go ahead and build it together all right first thing I'm going to do I'm going to go inside of source okay inside there let's go into our app.js and inside my app uh what I want to do is let's go ahead and remove everything from the top and I'm going to say import style from style. module. CSS okay that's where a lot of the uh styling we've already written for you so it's in there go ahead and call the class we're going to use this a wrapper okay and we're going to inside of our wrapper we're going to put in our header and inside of our header we'll put in our nav bar okay now no nav bar is going to show up so once I hit run on this we're going to really when we do yarn start we're going to get an error okay and the reason why we're getting get going to get an error is cuz we never imported it okay so let me actually move this a little a little bit out of the way here as you could see a navbar is not defined so now what we want to do is in components you could actually see that we have created Navar inside of components right so we're just going to go ahead import that right over there import Navar from components SL navbar okay and now that it's imported let's go into our Navar we're not getting an error anymore let's build out our Navar from scratch let's get in our nav bar styles that we've already made and for this nav we're going to say navigation container for Styles okay and then we're going to make a container div inside and then inside of that we're going to use a logo image class logo container rather okay and then we go we run that and we get an error all right so let's go ahead we're getting error here right this is not loading the logo we'll fix that in a second first let's just go ahead and give it a class name and we're going to say styles. logo image for the style on this okay and let's fix this source so we're going to change the source to do do/ assets SL venmo logo.svg still not loading okay so let's drag the assets folder and we'll move the assets folder inside of our public folder there we go and now we change it now we run and look at that venmo is showing up that is beautiful okay so let's continue all right now we're going to add in an actions container and we're going to say hello and then we're going to give it an accent color and this is where the user address will go so we're going to say hello comma user address okay and remember right we're mapping it to this one that's our reference point so we got that part now we got the hello part okay and then we have the user address there now we're going to put a hand wve and last but not least we do need to put the image the circular image that we have so let's go ahead and do that okay so we're going to first get our down icon okay cuz we need that icon for right here okay so let's call our Chevron down icon let's give it a arrow down icon styling and let's make it a self-closing tag okay now we're getting an error can't resolve hero icon so obviously what we need to do is we need to install this package right here and let's run it cool now it's showing up so you should have this package already installed when you do npx clever programmer you get all the dependencies installed by default so just make sure you add in the slash outline and then you should be good to go all right the last thing we need to add is the image so let's go and do styles. Avatar container so I'll make a new div and then inside of this div we're going to put in image and this image we're going to give it Avatar image style u make it a self-closing tag as well and the source okay is going to be this specific Source right here at y kang. me/ avatar. jpeg okay you can get your image from wherever you want Yap is somebody who just works with us on the clever program on our team and so that's the image we're using you could use your image or anybody else's image right and boom look at that okay let's get to the end of this boom right if I show you this look at that right we started with that reference and we got pretty much a onetoone match so that is absolutely phenomenal we are done with our navb bar uh and now it's time to move on and add our wallet connection let's go now what we want to work on is the metamask connect wallet functionality so basically we want to be able to do this thing okay where you it'll pop up connect with metamask It'll ask for your account you'll be able to hit next and then move on to the next part okay so let's go ahead and start working on this bad boy now there is no front end part to this so just letting you know that there is a there this is going to be mostly a backend thing we're going to be doing for connecting to wallet because this front end is metam masks like default uh front end when you open metamask okay all right so make a new folder called context and you're going to make it inside of your Source okay inside of this context I want you to hit new file and then in there we're going to put context. JS all right go ahead and import use effect and we're going to put in use State and create context from react okay just like that and then go ahead and do import ethers from ethers cuz we're going to need access to that okay and let's go ahead and do export cons transaction context okay and create context so we're going to need access to all this data in our other files that's why we're creating this context here so we can do that all right we're going to create a transaction provider here which is going to take in children children is going to be the entire app and what I'm going to say is I'm going to hit return and I'm going to say transaction context context. provider and we're going to give it a value and right now we're going to leave the value kind of empty okay and we're just going to pass in children in between and make sure you have the tag saying transaction context. provider okay that's what the tag should be saying all right let's go back yep let's go right there and in our index.js what we're going to do is let's go and do transaction provider fromc context context and and uh we're going to create a transaction provider in our index.js and wrap up the entire app inside of it okay that's what we're doing so make sure you put your app here transaction provider and import your transaction Provider from Context uh with that said let's go back to our context and we're going to create we're going to keep track of the current account and we're going to see if the current account is logged in or not okay the default state is just going to be blank empty string we're going to have a function which is going to be check if wallet is connected it's going to be an async function okay and what we're going to do is we're going to create a TR catch block here and under the catch we're just going to console log the error and in the try what I want to do is I want to say hey if ethereum does not exist here and you might be wondering where is ethereum coming from we're going to get we're going to destructure ethereum from window window is a global JavaScript object that we have access to and if ethereum does not exist then return Please connect metamask that means metamask is not connected please install metamask that's what the error we want to say um and then what we're going to do is we're going to create accounts and we're going to await the ethereum request and the method is ethor request accounts and then what we want to do is we want to say if the accounts length meaning if the accounts exists then set the first account as the main account so maybe you choose five accounts the first one you chose is the one that gets chosen because we can only choose one account and then we if no accounts are found we're just going to say no accounts found let's create a use effect hook that's going to fire off every single time the page refreshes and we're just going to run this function check if wallet is connected every single time the page refreshes okay then next up what we're going to do is we're going to create a connect wallet function all right now we're going to create this connect wallet function this is going to be pretty much copy paste so honestly you can copy paste there's really just going to be very very minimal difference from this function and the other one uh but this is more so of just a little technicality okay so you're going to be writing the same thing that you just wrote okay so nothing really new here um and then you could see that it popped up so I'll remove this from here you could see that it popped up the wallet and you can connect to it right so we can see it running we can see our um connect functions running okay let's keep going and then we're going to set the current account to zero the only difference is we're going to do a window location reload this is just to kind of catch any edge cases and make sure there are no errors happening so just put in the window. location. reload you should be fine and let's keep going okay next up what we're going to do is we're going to throw a new error if there is an error okay and we're going to say no ethereum object found okay object um okay so make sure you pass in the connect wallet to your transaction context provider because now your entire app will have access to the connect wallet function that you've made okay so let's go back to our navb bar. jsx now we're going to start using all of this stuff that we got okay so let's go ahead and use it so let's make sure that okay everything is looking good here connect wallet ah we want to not just get connect wallet but we also want to get access the current account that the the current user that's logged in so let's go ahead import transaction context from our context and let's get the used context hook as well from react and then we will use the context hook we'll pass in and we'll say hey we want to use our transaction context we created we're going to destructure our current account and connect wallet from that and then we want to wrap the entire app up in certain um in this conditional here in this turn operat okay so you want to say hey if the current account is logged in then show this otherwise show that all right so I'm going to take essentially what is the homepage I'm going to cut that bad boy and we're going to paste it in here because hey if the current account is logged in then show this okay otherwise show a button that says connect wallet okay so our connect buttons give it the styling of connect button and then on click we're going to say connect wallet all right and let's take a look at what's happening okay so let's open up our metamask here let's go to our metamask let's go to uh where it says connected let's click the collapsible Three Dots and let's disconnect okay so now that we disconnect let's refresh our page and you can see that it brings up the connect wallet again and if I remove the connect wallet you can see that there's a button right behind it all right so now I'm going to hit that next button right there and you can see I just got connected okay and basically everything that I'm doing is working okay beautiful so our check if wallet is connected fires off every single time we refresh the page so there you have it you did a fantastic job building this wallet connection so far next up we're going to shorten the addresses let's go and do that now the next thing we're going to be building is a shortener so we're going to take a big address turn it into a small one let's go ahead and do that so I've drawn this out for you here this is what it's we're going to be doing we're going to take an address that looks like this and we're going to turn it into that okay so let's go ahead and do that now so let's make a shortener and then once we make that shortener then what we can do is we can actually show that user address right there otherwise this would be too big right and it wouldn't fit so let's go to where we have user address and I'm going to change that and I'm going to go ahead and say current account okay so now you can actually see that our app is showing us this okay that's what you should be seeing right now CU pulling it directly from the current account now what I want to do is let's go inside of my utils and in there I'm going to add shorten address. JS and I'm going to say export cons shorten address and it'll take in an address and here's what will what it will do okay so it'll we'll say first and then we'll create another variable called last so first we'll just take the first five uh string so like 0x 35d okay so we're going to put that and then last is just going to take the last four essentially okay and then we're just going to say first dot dot dot last all right so you got your first and last here let's go back and now we're going to use this URL shortener or uh wallet address shortener I mean on current account let's import our bad boy shorten address and make sure you import it from the right place okay so let's just go ahead import it from UT Tails SL shorten address that's where we've put it and then we're just going to call our shorten address pass it our current account and we should be Gucci there we go look at that we got it right you could see it right over here and you can see that we've went from this to that beautiful so we're done with shortening stuff now we are going to work on our transaction form so users could put in stuff and then you know be able to pay other people let's go all right now time to make our transaction form this is what you're going to be building by the end of this one okay so we're going to be building this form now yes it looks ugly hideous but don't worry about that we're going to initially build it without styling and then then we're going to make it look pretty okay so don't worry about that I'm going to leave this bad boy kind of like floating here for reference as we go through this um and yeah let's rock and roll so I'm going to go into app.js okay and inside of here let's go ahead and um all right so I'm going to add in transaction form here okay if you don't have main container activity container make sure you add all of these here as well okay but transaction form is I'm going to be adding now obviously it's going to give an error and says transaction is not defined so at this point you know what the error is right you know what this means if you see that error clearly you didn't import something so just go ahead start your import process we're going to go ahead and do transaction form uh and we're going to grab it from our transaction form component that we have made now I want you to go ahead into your transaction form okay and uh all right so we have the transaction form here it should be pretty much empty let's go ahead and build it out now okay so we're going to grab uh transaction. module. CSS all right so now that I've got my transaction styling let's go ahead I'm going to create a div and uh in here we're going to say container okay and then we're going to grab uh make an H3 it's going to be form title and we're going to send payment and request it says Styles is not defined okay let me go ahead and fix that styles. form title there we go and now it's starting to show up okay so send payment SL request next up I'm going to create a form inside of there we're going to have a form container inside of there I'm going to have a swap container and then we're going to add in our switch vertical icon and you'll see what this so This icon is this bad boy right here okay so just keep in mind this is what we're making okay this is a target so we got a form container we have a swap container right then inside of that we have a swap Icon now we're probably going to write swap to SL from okay so just keep remember this is our reference point okay let's go ahead and do styles. swap text and it's going to be swap to/ from and now we can see it on our screen that's looking good okay let's keep going I'll put this here cuz I think this will be fine there not in the way of anything all right and then we're going to create a form body here okay and then inside of there we're going to add in a form input container okay and then we're going to give it an H4 and the H4 we're going to say form input title okay and we're just going to say it to so who are you sending your money to right that's where that goes and then the next part we're going to be doing obviously is going to be this message part okay so that's going to be also an input the type is going to be text and we're going to have autocomplete false all right let's keep going for input container and I'll get rid of this move it over and this is going to be an H4 as well form input title and we're going to say amount okay and we're going to have input here okay and class name for this one is going to be form input and type is going to be a number okay so once you choose a number it will give you just make sure autocomplete is off on there and instead of amount we're going to say message and instead of that we're going to change it to text okay and then underneath that we're actually going to make our amount so let's go ahead and do form footer let's give it an H4 I'm going to say footer title is amount so there we go amount is showing up now all right and then we're going to have a div here and we're going to put a footer container and then I'm going to put an amount container div inside of there and then I'm going to put an input container inside of that okay and we want to put a icon here currency dollar icon which is this icon right there okay and then we're going to do styles. dooll icon so now it's showing up on the screen you should be able to see it okay I'm going to get rid of this guy here for a second okay next up we want to make our we want to make this look a little bit better and then we want to make our send button so I'm going to paste the same input styling except we're going to change this to a number and there we go since we added our form input styling it fixed it and made it wider hide myself here all right so now I've changed it to a number and then what I want to do is I want to create a button and this button is going to be send okay and we're going to make it a send button that's the styling I'm going to give it okay now it's looking much better make it type submit and when it comes to our form you know this is what it's looking like right now that's about it okay for our form so if you got to this part great job you you've done an amazing job now next up we're going to be working on the activity header let's go all right next up that right there is what we're going to be building right now the activity header okay so there's going to be a lot of fun to build and I hope you're going to learn a bunch of things out of this but with that said let's get to it let's start building that bad boy okay so I'll bring it right over here so you could have like a frame of reference here as we build it and let let's go so I'm going to go into my app.js and I'm going to hit import activity okay and then let's open up our tabs here and in files you can see I have a folder called activity and then I have activity card okay so let's go ahead and import that so I'm going to go ahead import activity card from components activity activity card okay all right so now it's been imported and now we're going to start building this out right over here let's close everything out all right so I'm going to pop in my activity card here okay pretty soon it will actually start showing up and I'll leave it just here as a reference so let's go into our activity card and now we're going to build it out from scratch okay so let's go ahead and import styles from Styles and activity module. CSS okay make sure you do do do/ do dot because we have to go back out to directories okay then we're going to return a container and then inside of that div we're going to have another div and this going to be a tab container okay and then in there we're going to put a P tag and we're going to have a tab title activity so that's going to be this part right over here where it says activity okay so boom right there it's showing up okay after activity we want to add an in a class name and we're going to do styles. navigation container okay inside of that we're going to add in navigation item and then we're going to do data- current so just so you understand what this data. current is that this is how it will give it this active styling over here okay so that's how we do that all right let's keep going I'm going to make a globe icon let's go ahead and import it from the top Globe icon from here icon react outline and then we're going to go and do styles. Navigation icon okay just like this and then let's create another div here we're going to give it a class name and I'm going to say navigation item and in here we're going to put a user icon and just so you know what this icon will be it'll be this icon right over here right Globe icon is this guy here user icon is that guy okay so once we add in that icon let's go ahead and we're going to add in another NV na ation item and this one is going to be a user group icon the third icon all right and you could see all of these being added here okay so let's go ahead and boom it's showing up that's great let's go all the way at the bottom we're going to add another div and for this I'm going to give it a Styles and say feed list okay let's go to our index.js and here I'm going to remove import from index SL CSS so I'm going to remove the global styling that we were doing everywhere and I'm going to change that and we're going to go ahead and say go into our Styles and grab our global. CSS so now when we do that boom look at that the entire app styling is looking beautiful our form is looking beautiful so that Global styling there fixed almost everything okay so now when I full screen it look at how much better that looks right that's beautiful and like our Target that we had here is matching what we've built there so with that said we are done with this activity header part great freaking job and next up we're going to work on our transactions let's go quick thing that I want to highlight um earlier when we created that send button the problem that was happening with that was it was like overflowing and doing all kinds of weird stuff so I just need you to go in your Styles and go into your transaction Styles transactions. module. CSS and we're just going to change something inside of our container so here uh for our container we're just going to make the width 400 pixels okay if you didn't have that already change it to 400 pixels and then you shouldn't have any problems whatsoever you should be good to go okay all right let's keep on going now so now our button looks really good our send button looks awesome no problems anymore okay let's now go to our context and get to work on setting up our smart contract that's the big main thing that we need to do now okay so we're going to keep track of some states so let's just Define all of those here so the two address we're going to keep track of that state the amount we're going to keep track of that state as well all right so we're going to keep track of this amount State obviously right let's keep going default it to zero because it's an amount it's a number it's not a string so we're not going to have it empty message we're going to leave the message blank to start off with okay we're going to keep track of our loading State and obviously in the start it's false it's not loading and uh we're going to keep track of our transaction count because we want to know how many transactions we have okay and um yep and by default we're not going to set it to zero or anything by default what we're actually going to do is we're going to pull it from local storage okay so that is a very clean way of doing it we're going to pull it from local storage uh so when a page refreshes or whatever by default we're going to pull it from local storage and then otherwise we're going to pull it dynamically okay now what we want to do is let's go down and we're going to check if transaction exists we're going to create this function and this is really a getter and Setter function that we're making here okay so let me write that down here it's going to be a getter and Setter function and what this function will really do is we want to get uh transaction count so okay so this is going here's another way of saying this right get and set transaction count that's what this function really does so what we want to do is we want to get the transaction count and once we get it we want to set it in our local storage okay now where are we getting this transaction count from we're going to be getting this transaction count right from our back end our blockchain smart contract part all right so that's what we're that's what's really happening here okay so let's keep going with this function check if transaction exists we're going to go async on this bad boy and it's going to be a try catch and we're going to say hey if we have ethereum meaning if uh you know so this is saying if you have metamask installed then go ahead and uh do the following then we're going to go ahead and create transaction contract and we're going to create the ethereum contract now this is going to be a helper function we'll create in a second so don't don't worry when it gives you an error don't freak out not a big problem so let's go ahead and actually create this ethereum contract function now and really this is just a boilerplate code for connecting a smart contract that you've made on the blockchain side to your front end so we're just doing that connection part right now okay so let's go ahead and I'm going to set our provider and we're going to choose the metamask as our provider so we're going to say ethereum then we're going to get our signer and this is going to be our provider better. geter so this is whoever is signing the contract meaning like the logged in user with the metamask and then what we want to do is we want to get the transactions contract okay and so let's go to ethers contract and we need to give it our contract address okay we need to give it our contract address and we need to give it our contract API and we need to give it our signer and then we're going to return this transactions contract okay so now contract address and contract ABI those are things that we're going to go ahead and set it up so let's go and get uh on line three let's go ahead and import contract address from utils SLC constants and then we're also going to go ahead and get let's go to our um let's see where we're at let's go to build so we're going to our backend blockchain part let's go to build and let's go to transaction and let's copy that so what we've copied here all right so what we've just copied is all of all of the contents inside of that transactions file okay so uh we're just going to create that same file inside of here okay so let's go and now paste all of that boom there we go so now that I've pasted it so just copy um click right click on utils right and you're just going to hit paste it's going to paste the transactions. Json that we copied over earlier let's go to our constant. JS and we're going to go ahead and say export const contract address so we get access to this and then we're going to do the the following okay we're also going to import ABI inside of here from our transactions. Json and we're going to export our ABI our contract AI so we have access to it in our other file so make sure you do ai. ABI at the end let's go to our uh uh let's go to our context okay and inside of there let's pull contract address and cont contract ABI and now let's scroll down to our check if transaction exist function and here we're going to do the following okay let's go ahead and do current transaction count and we're going to await this and I'm going to say transaction contract. transaction count okay or sorry. get transaction count rather okay this is the function that we have on the blockchain side so I can show you that let's go to our backend let's go to our contracts let's go to our transactions here and boom you can see our get transaction count all right so we got the transaction count on our back end right that's what we're interfacing from our front end so that's freaking exciting because we're literally going from our front end going to our blockchain part using the blockchain solidity function to get the data retrieving that and then putting it out on the front end I mean I don't know that is pretty freaking cool like that's super super exciting right so that's why the await promise needs to happen cuz we're doing a bunch of stuff asynchronously here and then once we pull that bad boy we're going to go ahead and in our local storage we're going to set that item and we're going to say transaction count all right so now we got our current transaction count okay so we have our current transaction count which is we get our count first so then current transaction count becomes a number like let's say eight or something and then we on line 70 right we set in our local storage and we set the key with transaction count and we set the value to that okay so whatever that may be eight or five or whatever however many transactions have happened okay and uh that's looking really really solid to me okay and then now let's go to our you know use effect hook that we created earlier where we added check if wallet is connected now let's go ahead and add check if transactions exist so basically anytime we Refresh on our page that function should fire off and work and you could also you know check in your console log what it's returning and it it it'll show you it's returning like a number okay however many transactions you have like three or four or five or whatever okay so with that said um now the last part that we want to add to this is we want to fire off this use effect hook every single time transaction count changes and the cool part about this is whenever there's a new addition a new Trans action that occurs your page will automatically refresh and show that transaction okay so that's what's happening great job on that now the next thing that we're going to add is the ability to send money send ethereum let's get to it all right time to send some money so let's get into it okay so let's go and add the ability to be able to send money okay this is going to be important and when I say money I mean ethereum so let's create a function we'll call it send transaction async okay and um here's what we're going to do we're going to add a TR catch block here and if it's an error then obviously just show an error okay if it's not an error then try all right so here I'm going to say hey if metamask is installed then I want you to go ahead and add in this transaction contract and create it okay so we're just going to create the transaction contract and then what I want to do is I want to have a parsed amount here okay and we're going to do it with ether's utils and I'm going to parse the ether and I'm going to parse the amount that was passed so if the user gave us a certain amount we're just going to pass it in here so that utils up pars ether amount what that's really doing is if I go here online to a uh eth Dash convert so just go to E eth Dash converter uh and here if I put in like a small amount of eth like 0.001 it'll convert it to way so it'll convert it to whatever way that is okay so that's really what that function is doing okay because remember there's no floating amounts there's only integers then I'm going to request so I'm going to wait ethereum or metamask in this case and method is going to be send transaction and we're going to give it pams pams is going to be an array of object in this case and we're going to say we're going to give it a from address all right so here we go right so we put our gas just for gas just put 0x 52 all right so this basically right here 0x 528 is just a short nice way of saying something like hey I'm I want to pay like 21,000 way or whatever in gas to just cover some basic amount of gas okay that's really what it is and then just choose value pars amount so we got a from which is a current account which is this bad boy right here that's logged in the two is going to be whoever fills out the form or like whoever we're sending it to for the form uh we have we're just going to pay this amount of gas every single time the value is going to be the parsed amount and then we're going to uh turn it into Hax all right so that just converts it to a hexadecimal that's it but we don't really need to worry too much about it we're going to create a transaction hash and that's going to be from the transactions transaction contract and we're going to do add to blockchain okay so basically you know that's where we're doing you know trans uh send transaction okay that's really what we're doing and we're going to pass in our address to our parsed amount our message and then yeah that's pretty good okay those are all of the things that we're going to send then we're going to set is loading to True while that's sending and then we can uh say loading and then we're going to put a transaction hash all right now what we want to do is we want to await the transaction hash here and just do transaction has. weight and then once we're done with that we're going to say success transaction hash and then we want to set the loading to false because loading is done we're done waiting for it and transaction count at the end is going to be updated so now we're going to going to get the updated transaction count okay and then once we get that we're going to set the transaction count to whatever the new transaction count uh is and we're going to convert that into a number so it comes as like a big in or a big number so we just cast type cast it to to like a regular number and then we're fine and then we're just going to do this window location reload thing thing to make our app more robust and then we're going to add a else here and I want to say you know if that doesn't work then No ethereum Object okay meaning like no metam mask or whatever and doesn't work cool with that said we are done adding that send functionality now it's really just adding in the UI the beautiful front end for the form everything is ready to go and then we should be able to send money and see everything okay let's go ahead and do that now all right now the functionality we're going to add is really where we add real functionality of the form meaning that when you actually put in an address and you put in a message and you put in an amount it will actually open up metamask and then ask for you to confirm and then you're actually able to send the transaction so that is the functionality that we will now add with that said let's get into it so let's get started from where we had left off we created our send transaction function now all we need to do is make sure that in our context we actually pass it so the rest of our app has access to send transaction function so go ahead and do that and then I'm going to go into my transaction form and inside of my transaction form we're going to use our use context hook and get access to the transaction context and I'm going to destructure send transaction function from there set address to address to and set amount hook okay and the amount hook and message set message Etc right so we we're just going to get access to kind of all of that that stuff and we need to send that stuff over too so just make sure you copy all of that and you paste it here so you want to make sure that in your context you're actually passing all of that information right the set address to hook the address to uh set amount hook amount State Set uh message set message all of that okay so we're going to go ahead and do that okay cool now that we're doing this let's go ahead and make sure that we write our handle submit function okay and in this we're going to take the event okay and the first thing we're going to do is prevent default and what that does is it makes sure that you don't refresh the page doesn't refresh once you hit submit and we're going to say hey if the uh address doesn't exist or amount doesn't exist all right so we're going to say if none of these exist then just do nothing okay just ignore that okay we only want this to work uh if those exist and so basically this is like a guard Clause that we're adding here and then uh if none of those are true then obviously we're going to send the transaction okay so the transaction is going to send when these things exist okay and then we're just going to for the input um for our form title we're just going to say value uh is the address to okay so that's the address to right here and we're going to say on change we're going to set the address to whatever you're typing in the two and then we're going to do the same thing for for our message and then we're going to do the same thing for our amount so right now we're working on our message okay value on change same idea and then we're going to do the same thing for amount it's going to be literally the same pattern okay so let's go ahead and do that for amount on change set amount Target value okay good good old react stuff and if you're wondering yes yes my hair did change okay um I went to get a haircut in between the shoot so shout out haircut gang if you saw this um you know not most people will make it to this part but if you're one of the lucky few good job all right let's keep going let's wrap up this entire bad boy that we have written in a form and we're going to add a handle submit to that form okay so the handle the function essentially that we created right here so this form is going to be looking for when you press that juicy send button when you send that send button when you send that send button I mean to when you click that send button your send transaction or whatever function or handle submit function is going to run okay but let me ask you is it going to run right now that this is empty I'll give you 4 seconds to answer that 4 3 2 1 no it will not well the function will run but it won't send the transaction right because there's nothing here so that won't happen but if you have all of these filled out and then you hit send will it run I'll give give you 4 seconds to answer that 4 3 2 1 hopefully said yes and yes if you have it filled out it will send so let's keep on rocking and rolling here and let's open up our console on the right hand side okay and then we're going to go to our code um just on change with the capital c okay so the that that's where the error was coming from so just make sure it's a Capital C that you have cool all right now it looks like it's working now let's go ahead and type in our two address ignore my dog she's a little baby bulldog she's wild all right there we go we got our two address sometimes you know I order Uber Eats they show up at the door to drop the food and then she just starts barking and I'm sick and tired of having to edit that out so you guys are just going to Hear What I Hear at my house every day so if you got to this dog barking part feel free to comment that as well and um yeah let's write our message have a great day and we're going to put in some amount and we're going to hit send and now notice that it is opening up metam mask how beautiful is that let's hit confirm there we go metamask is popping up I will make myself tiny here so you can see confirm boom look at that and the loading transaction hash is showing up too that is nice right that was real clean and there the transaction has taken place right and if we go to the other account where we sent this money it looks like we got the eth so we are now able to send money I mean 99.9% of the functionality of our venmo app is complete you know functionality wise but now we still got to make sure that we render the recent activity and we show all that stuff so I hope this was exciting to you I hope this enlightened you and with that said let's keep on rocking and rolling next up the component we're going to make is this guy right over here okay this is going to be your recent activity SL recent transactions component so you know what who's making the recent uh transactions right this is what you see on venmo as well so let's go ahead and work on that component now get rid of this here and let's go I'm going to pop this in the purple thing in the back is not really what you're actually going to be adding okay that's just like interesting looking padding that I added but this is the part that you're actually going to be building I just wanted to make sure like I wanted to just make it stand out Okay cool so let's go ahead and work on this now all right let's go into our activity card. jsx and inside of my activity card let's go and import my context from react and then the next thing I want to do is I want to get my transaction context from my context file we'll get shortened address from utils okay it's going to be SL util slsh shorten address yep just like that and then we're going to uh pull transactions and current account from our context let's go and get all transactions inside of our context let's go and get all of the transaction so it's going to be async it's going to be a try catch here we're going to console log the error and then we're going to say hey if metamask is installed I want you to create the transaction contract and we're going to create the ethereum contract once that's done we're going to get the transactions okay so we're going to say const available transactions and we're just going to await the transaction contract and we're going to call the get all transactions function which is on our back back end okay in our blockchain part so if we go to our transactions. Sol you can see we have get all transactions right there and it's a view function and it Returns the transactions we're going to say get us the structured transactions all right so basically structured transactions all we're doing is we're transforming the data that we're getting and so I'll kind of explain to you what I mean by that right let's go ahead and write this um okay so we are now just going to pull our address to from there this is the um transaction receiver okay that's the who we're sending it to okay uh next up we're going to get our address from and that's a transaction sender and then we have our amount um or actually in this case let's just do our Tim stamp and uh let's call our time ago that we got imported added earlier all right and we're going to say format okay and I'm going to create a new date in here and we're just going to put in the transaction okay. timestamp so each transaction will have a timestamp from the blockchain and I believe the blockchain puts their transactions in Unix all right so all right so there we go you heard that confirmation in there uh our developer confirmed with us that it is UNIX our developer being your boy Kevin um and basically if you pass it that Unix right and you give it as a number and uh we pass it to new date all right so what what the what the multiplied about thousand Shenanigans is because you're getting a okay here it's annoying you don't really need to worry about it but I'll tell you anyways you're getting Unix in milliseconds so in order to turn it into Unix in seconds you multiply that bad boy by a th000 now it turns into Unix seconds you give the Unix seconds to your new datetime object it turns it into a daytime object then you call time ago format on that daytime object and it knows how to turn it into a time ago naturally you know written language kind of like here where you're seeing uh you know 23 minutes right there or 31 seconds right there that's what time ago does okay there we go all right so we're going to say comma mini here all right the mini is a time ago thing so you can give it mini so that means that it's instead instead of minutes or mins it's going to say m or s for seconds okay there we go and then message um we will call it transaction. message okay so now that it's uh restructured like this or AKA transformed you won't have to Loop through it go transaction. receiver transaction. sender you can actually just Loop through and go do address to do address from timestamp so it'll be much cleaner so your code won't look like transaction. transaction. receiver pass in your amount will parse in and we will give it the transaction amount in HEX and we will divide it by 10 to the power of 18 so if you're looking at this and you're like what kind of n Jitsu garbage is this um I'll explain real quick we are going my friend from way this is like the ugly stuff about blockchain I don't know why they do all this trash like this development experience is going to get better at some point but that's what it is right now it's in way and we're converting it to e so remember when we went from like a really tiny 0.2 number and we turned it to like a 10 billion way number when we went to e-con converter.com well now for the front end we got to go from way back into eth and show it to the user okay so we're reversing that all right hope that makes sense okay let's keep on rocking and rolling all right and then we're going to import time ago from JavaScript time ago and we will also import en from JavaScript time ago loal okay and then we're going to add that local to the time ago and we'll say time ago and we'll make it a uh enus okay so then it'll look like American time zones okay um and time ago if you're looking for it right in your package.json we have it either added and if we don't have it added we can just go ahead and install it now so in our command line we're going to go ahead and say npmi and we're going to go ahead and say JavaScript and just do dash time ago beautiful hit enter and now it will install it all right so basically now guys we have it installed okay and once it's installed your time ago is going to work okay let's keep on going through this all right let's go down and we're going to add our set use our set transactions hook that we got earlier okay um or actually let's define it here so I'm going to say transactions and set transactions and in the start is going to be an empty array okay it's going to be an empty array and then what we're going to do is we're going to set the transactions to structure transactions uh and else we're going to say No ethereum Object okay and in our context provider make sure you also export this value so we're going to say transactions let's pass it to our app so we have access to transactions everywhere else in the app now inside of our activity card you can see that we're extracting transactions all right guys so there we go okay so now transactions will make more sense right because we're pulling it out because we actually have access to it and now this feed list that we have inside of that feed list we're going to all right so we're going to go ahead and do transactions. map and now we just want to Loop through and render those transactions out this is like mainly the front end part here okay so we're going to go ahead and structure an ID an address from our timestamp our message our address from all right so we destructured all of this stuff id address from time stamp message address to Etc um and then we're going to also get the index okay okay so we got this right now We're looping through this and now let's go and render this out so I'm going to do an implicit return here right arrow and then parentheses is an implicit return okay so there we go now class name so key is going to be the index right that's why we pulled the index when we were looping and then we want to give it a class name of feed item for this here class name here we're going to give it a styles. avatar container okay and we're going to give it an image and it's going to be an avatar image and for Source we're going to Generate random Avatar all right guys so now you know Generate random Avatar obviously doesn't exist but we're going to go ahead and uh create that now so let's go ahead and do Generate random Avatar and this function it's going to work in the following way we're going to say random Avatar and I'm going to randomly pick a number between 1 and a th000 okay I'm going to be using this as my seed number and we're going to use this dice bear API which is very nice okay and um we're going to pop in the random Avatar that's how we're getting this by the way this is using the uh dice spare API okay that's how we're getting all of this and how it works is you give it a random seed so we're just going to give it a random Avatar plus current account and we're going to say um SVG at the end of it okay and um there we go all right so now it will generate a random Avatar every single time and make sure we're going to create another div and this one is going to be feed details so the point of this is so we can actually see the details part okay so here we have U you know this this uh feed details is going to be obviously the details part that we're going to be adding to this okay okay and then we're going to have a feed author that's where we're going to put the wallet uh and shortened address so there we go we got the shortened address so we're going to put the shorten from address and then we're going to put the shorten to address so that will say you know from and then it'll say to okay so there we go that's very nice and then what we want to do is we want to add a span tag here and we want to do created at so this is going to be our Tim stamp here which says 23 minutes or 31 seconds Etc and we're going to put our timestamp there okay right here we're going to put a globe icon right next to it just like this so that's why we're doing this globe okay and let's go class name we're going to go styles do feed author or sorry feed body this case actually and for the feed body we're going to add in a message so this is the message like have a great day or thanks for the ether all right perfect uh all right let's make another div and for this one I'm going to give it the uh feed CTA so this is going to be the call to action or these buttons like like and comment just like how we have on venmo and we're going to give it a heart icon and we're going to give it a like icon for that one and for the next one we're going to give it it and just so you could see right there we go that's the heart icon so I'll leave this here so you can kind of see the heart icon and the other icon or actually let's put it here why not so you could see it okay um so we got the like icon and then we got the comment icon all right let's go ahead and refresh our app let's see here actually let's go to our activity card or sorry let's go to our context here and inside of our context I'm going to go to around line 47 where in my check if wallet is connected function and we're going to get access to all of our transactions okay so let's call that function get all transactions all right and let's just make sure I'm going to full screen and let's check here if it's pulling it through it's giving us an error it says cannot read undefined okay so hold on let's see what's going on here all right let's look for it all right so is a t it's actually a typo here so amount doore heex it's amount doore heex on line 40 so that fixed it there we go we're getting all the transactions and our transactions are showing up I mean that is nice that looks beautiful okay that looks great and you could see oh wow you can see right address from you can see address true the amount sent message and Tim stamp and all of that is showing up here so this is really really good so far let's go to our account one and we're going to copy okay I'm going to paste the account 2's address so we can send them the money we'll put in a message thanks for the ether there we go and we will put in uh some eth and let's go down and send it let's hit confirm it says loading so you could see that right away okay let me hide myself so you can see loading right away there we go and once the loading is done we could speed it up right once the loading is done boom right there there you go now the transaction is showing up how freaking beautiful is that that is fantastic so great work on that so far that is wonderful and with that said we're done with this part at this point we're pretty much done with the entire app we're just going to put the finishing touches and we're good to go so I'll see you in just a second all right so now we're going to pretty much just be demoing the app but you might have noticed that I have this ad thing here now this is pretty much just react I'm not going to go ahead and build this out this is going to be a challenge for you to build out and add to this app if you get stuck you can always just check out to the main branch because if you did npx clever programmer right for this project you can check out to the main branch that always has the full solution right now you're on the CLI starter Branch so you are doing this from scratch yourself okay so if you can always switch there and then code um or sorry find the solution but I would say you know everything you need to know at this point to be able to put this together okay or make a ad looking thing similar to this and you should give it a try okay you already have the assets and everything like that so I'm just going to go ahead and demo the rest of the app so like let's just play around with the app right and let's just make sure that it works I'm going to go right here I will click into account one I'll try to send some transactions over to another account let's go ahead and um refresh the page you can see the Avatar's changed right the logos the random generated avatars have changed we're pulling in the transactions the time stamps or the transactions are showing up I'll put in a new address here we'll put in a message and then we're going to go ahead and put in the amount let's see if it works with Emojis okay so I'll put in an emoji here ah no Emoji showed up oh well let's hit send and let's go ahead and hit confirm there we go we'll go Ahad ahead hit confirm and look at that it's loading loading loading loading right and let's see okay and account three or account two yep the money has gone and without even refreshing the page you can see that it's says 26 seconds ago thanks for dinner all right so there you go that is your entire app so with that said I really really freaking hope that you enjoyed building this from scratch I hope you get to deploy it I hope you you know share in the comments that you did it I mean I'm really excited that you were able to follow along build this you should be very proud of yourself if you enjoyed this video smash that like but button turn it white turn it blue depending on if you're using dark mode or light mode on your YouTube subscribe to the goddamn Channel I love your beautiful face this is ky and as always I'll see you in the next video\n"