Build a Solana Blog DApp with React and Anchor

[00:00:00]in this video we're gonna be making a blogged app on the Solana blockchain if you're a web developer and you want to get started with web3 this is the tutorial for you I'll be showing you guys step by step on how to make your first Solana smart contract using anchor which is just a framework of rust for a blog app we need to be able to create posts so what's special about this is we're going to be able to create a post with a Solana smart contract and store them onto the blockchain well then fetch all of those posts from the Solana blockchain so that we can display it back to our app and making our app decentralized to do this we're going to be using quick node which is our RPC node provider to help us get access to the blockchain and from there I'll show you guys how to set up your Phantom wallet so that we can store our Solana and sign all of our transactions we'll be doing all of that Salon of code on something called Solana playground which we can use to build compile and deploy all of our Solana code as well as my favorite part is testing all of our functions so you can understand how it all works together so before before we get started make sure you use our CLI tool to get the front end code that you need to get started right away and now further Ado let's get to the demo welcome to the demo of the blog app so it's gonna be pretty simple guys I want to show you how this works first thing I want to draw your attention to is this right here so already off the bat our app will auto connect to Phantom you'll see it when I refresh really quickly so let's do that see connect and then boom we're connected right we're connected to this specific wallet I have wallet number four and at the moment there's no user how do I know there's no user because the way I have my code set up is that if I did have a user there would be a picture and there would be a random username that gets generated so let's generate and initialize a user bam okay you'll see that our code uses our Phantom wallet to approve uh Solana functions on the blockchain so we can hit approve all right give it a second and Bam look at that all of a sudden we have nervous Alliance right that's the random name and the random Avatar it generated for me and now we have a user now that we have a user that button that said initialize user is now create post right so what you'll learn today besides uh creating a user will be able to create posts on the blockchain so get excited for that so welcome to the video right right this is for you guys all right so if I hit post there it is this is how you know we're making transactions on the blockchain I hit approve it disappears and Bam there you go there's our post welcome to the video and if I click on it it takes me to the full post page right very Bare Bones front end and we're not even going to focus on what the front end is we're going to be focusing on how to make a smart contract and how to connect that contract to our front-end app so let's get started all right now that we're set up with quick note let's go ahead and look at our app I know you guys saw me use the demo but go ahead and press Ctrl J and make sure you see the interior app so you're in the same root folder as I am right so if I do yarn Dev here all right we're on localhost 3000 so what I'm going to do is open up my browser again and let's go ahead and type in localhost 3000 and let's take a look and Bam there we go here's our app right what's the difference though you notice a couple things there is no posts right but would you say this is a working app I'd say not yet right the things that you see here like my random robot and the create post right it doesn't work right it's all static I can click this nothing right I can uh this is not even a user registered on the Solana blockchain all right so what does this app do right let's take a look so what I'm going to do next is show you the difference so if I open up my app let's go to the source and let's head over to our Pages all right the page that I care about is the dashboard right so in this dashboard right look at this comment here and it's our static data right this random robot here let's turn it to Lance all right so if I save this let's open up my app see how the name has changed it's using static data we want to change this the gold of this app is we're going to turn all of our static data using our Solana code right so I'll simplify it for you all right this is where you can change the Avatar so that means we need a user object right there's another thing here that says connected true right so if I say connected false let's see what happens look at that my name is now gone right and I have this connect button right here that doesn't actually work either okay and then you also see post is equal to this and just some static functions that don't do anything right but the cool thing that you can visualize is if I change the show model to true all right look what happens right this is the modal that we make to create a post all right so that's another thing that we keep in mind think of this as our little controllers that we want to give functionality to right so those are the main things that we will work on the functionality and fetching and creating right another thing that we need to know is how exactly does this app work so let's go ahead and review that okay so what I'm going to do is open up a website and I'm going to use this website to just illustrate how our app works and remember I said you need the prerequisite is to understand uh react well or one the one pretty good that I said is to understand fundamentals of JavaScript and HTML right so let's talk about HTML and react all right so basically there's a tree when it comes to components right so uh the best way I can illustrate this is let's format it so let's take a look what would you say is the parent component right the most top level component that holds the whole entire app well if I were to tell you it would be this app.jsx right here see this if I were to remove this router right the app would break all right we want some proof if I do this boom all right just blank screen I'm gonna bring it back we're good okay and I can't even exit out this model because I need to change this to false boom okay cool all right you got the idea so this is our main component here and there's something called a Blog provider which I'll get to and then there's something called a router all right let's illustrate what this app looks like by making a little rectangle here let's call that app all right so this is our most top level component and the app has children right you do see this router here but we'll talk about that in a second right so if you go let's figure out what router is so it's in Source router boom okay so the child of app is inside a router right and in this router right you see route path we can go to two different pages this forward slash for path means just the regular URL and this read post by ID right it's a dynamic URL so this leads us to another page which is essentially uh in the demo when you saw me click the post it's going to lead you to a page with that post all right so there's two ways routes right two routes our app can go so to illustrate this right we can either load the dashboard right or we can load the full post right so let's uh write that down so let's say dashboard and we'll say full post you with me so far cool so in my app there's two routes dashboard full post right if we go to our folders here underneath sort if we open up the pages folder guess what we see we see dashboard.jsx and we see full posts right so what did I just change where was where does the static data live guys does it live in uh full post or does it live in dashboard what do you think I think it lives in dashboard right because this is dashboard.jsx and this is where the static it is all right so if you understand that you're in a pretty good standing so let's go ahead and make this a little bit smaller cool so now what I want to talk about is what's in the dashboard right so let's go on the dashboard let's scroll down let's look for any other components right we see jsx here that's normal right that's how we can see home and blog right the image that holds my avatar right if I keep scrolling I keep scrolling here line 133 you're going to see something called posts dot map all right let's post then you might not know but post is an empty array or what should it contain it should contain all of my blog posts all right right now it's empty which is why you see nothing right but that map is a built-in array function right if you didn't know map will iterate through an array and basically make a new uh array right if you had like a can of blueberries right you take the blueberries and put it in a new can of blueberries all right depending on what you want kind of like filter but different similar all right so what does this map make right so for every single item and you can read this as post for every single Post in posts make all of this HTML so if we have zero posts how many uh of this jsx elements will it make zero if you had one or two posts how many of these you would make right it could make two right this isn't really a component but we'll label it with one we can call it article right so and then the dashboard right let's do a dude within the dashboard all right it's gonna make articles all right we can illustrate like this articles article article okay think of these as posts they're really just posts cool is there any other components that we need to care about right there's nothing called post form all right when does this post form shown well it's it's going to be shown when show modal is true ah okay so remember when we were changing the static show models true or false right this is our flag that's going to tell us hey this is when you should see the modal this is when you shouldn't see the model so that's how that's working there and if you look we also have components right these are buttons that we made if you go to components you can see that we have a component here called button and I'm just reusing this that's the cool part about react and components is that you have reusable uh jsx that you can use for whatever you need so notice how many times I'm using this button it's like three times I believe all right so this button's right here one and there's another button right here and we're going to create a button use it together soon cool other than that we can take a look at full posts right if I look at full posts here right pretty standard right there's no um it's another article tag but there's no components with it so this is it for full post I don't want you guys to worry about this just yet right we're gonna worry about it later and what I do care about is dashboard so what do we want to do then what's the point of this well let's make some pseudocode to make some pseudocode I'm just going to go down below here and let's make kind of a to-do list right what do we want to do first well if you look at our app can I connect anything no what should we connect to we want to connect to our Phantom wallet okay so first step it set up Phantom connection yeah it's a couple different steps for that we want to set up our Phantom connection to make sure that we can use our test Solana to write to the Solana blockchain right I want you guys to start thinking salon on blockchain for now as like on any other database right what do we want to store on the sauna chain I want to store blog posts right anytime you store something on Solana you need to pay Solana to do that right you're gonna say like hey uh think of it as like space right if you're going to a storage facility you can't just throw your couch in there you need to pay the people to store it there right so we want to set um make payments using our Phantom wallet okay so I'll show you guys how to do that set up Phantom connection the second thing is set up our blog context yeah our blog context right you guys know what do you mean by that right set up our blog context right uh another thing that we should do actually let's make that step three we should do for step two is write Solana functions right we need to be able to create posts right and sign up users right so maybe we can indent this oops we can indent number two and say we need to be able to initialize a new user all right and then we also want to create posts there you go all right so if you were coming from this to do app this is going to be even simpler than the to do app with Solana all right so we all want to do initialize a new user create posts and then set up our blog context right call Solana functions from the front end right because we can make the Solana functions on the Solana Network on the blockchain but we need to call them from our front end right which I'll show you how to do that as well so this is really exciting all right and other than that if you do all this right that's pretty much done so without further Ado let's talk about the Phantom connection all right there's a couple things that you need to do to set up this Phantom connection all right then one of the first things that I want you guys to do is uh make a new tab and let's get Phantom if you don't already if you do go ahead and Skip ahead to where I start connecting the buttons all right so if you don't have Phantom or don't know what it is Phantom wallet is essentially your virtual wallet that's gonna hold Solana for you right it's going to hold any other tokens it'll even hold any nfts that you own on the Solana chain now which is awesome so what you could do is type in Phantom wallet extension right and this is going to work if you're using Google Chrome so since I am using Google Chrome click on this you'll see the extension and go ahead and click install in section uh extension I already have it so you should be good to go all right once you do you should see it over here or if you don't you can click this up extensions puzzle piece and make sure you pin it so that I can click it easily it's going to tell you your recovery phrase make sure you save that somewhere and don't don't share your recovery phase with anybody else or your private Keys alright so when you enter your password I'm just going to do this as you can see you can make multiple different wallets I have four I actually have six now right all for testing purposes and what you need to do first is go to settings here right you can change the name of your wallet right here what I care about is this change network so change the network and make sure you're on the same network that we're developing on so which one we're developing on guys I know you can see it so it's definite you got it good job Jason all right so you can click devnet if you're working on the mainnet click mainnet vice versa Okay cool so we're on devnet we're on the same page but if you notice something here oops not model three we want all four you might not have any Salon all right I have 26 Soul right I'm not rich or anything but I can show you guys how to get test salon right around the devnet this doesn't mean anything to get free Solana on the test net right you can type in seoulfosset.com and all you have to do is open up your wallet again see this cvr6 that is my public key or in other words that is the address of where my wallet lives on the Solano blockchain so let's hit copy click just click on it and go click on this input field paste and there you go there's my full address right if you want to send me money you or send somebody money just send Seoul to that address right same logic here right we can airdrop up to two Soul right I usually do two and make sure you click devnet so let's remember how much I have right now I have 26. cool if I click on this boom successful airdrop I got to Seoul to this address right I can click on my Phantom 28 right get as much as you need uh you won't need a lot you may need like up to six Soul so maybe do this three times right because when we deploy the smart contract that's gonna cost some Salon as well remember anytime you put something on the salon and chain it's gonna cost some so it's a good practice for that so got as much Solana you need other than that you should be good to go and set up with Phantom okay so for now I'll X these out all right so let's set up the Phantom connection the first thing to understand is we need to make sure that my Phantom connection Phantom connection or Phantom wallet connection right we want to make sure that this connection is available in my entire app right so if I want to make this available should I set this up in full post is that going to be working on my entire app no should I set up a dashboard no what if I set it up an app yes all right because if you set it up an app technically Phantom wallet will be available throughout the whole thing the circle is simplifies the where the Solana while the connection is from okay cool so where do we want to set up let's set up in the app okay so I'll put this here to visualize it for you guys and let's go ahead and move to this and let's go ahead and go to our app.jsx what we can do is make this smaller and let's make it a little bit more visible for you guys how's that cool and you're going to see there's already an import ready for you guys to use uh there's the context our block provider which I'll explain later when we get to it our router which controls which page we're at and this is our jsx right here so how do we get the connection right let's go ahead and do that so like I mentioned before we need to wrap our entire app with the connection right so we want to wrap this router with that connection we need to provide our router with the connection so if you understand what we want to do the blog provider will start to make a little bit more sense right so like I said we want to provide our router with the connection so we're going to need to import a couple things so let's go ahead and write import uh let's write this curly brackets here to the structure and let's write connection provider right you're going to see this Auto Import connection Provider from Solana wallet adapter react cool and there's another thing that we're going to need from this it's going to be something called a wallet provider right the first one is providing the connection you can look at the second one is providing which wallet we're using because uh there's multiple walls it's not just Phantom on it I just prefer to use that one so let's go ahead and do wallet provider right and like I said we are using Phantom so we can actually import the Phantom wallet adapter from salana wallet adapter wallets all right you should say wallets yep cool so we got these three Imports uh that should be it I believe cool so the next thing you want to do is set these Imports up so let's go ahead and set up our endpoints right so to use the connection provider what we can do is wrap this entire thing with that provider so let's bring it out I'll show you what I mean connection provider boom I'm would you say this is wrapped inside this not quite so let's go ahead and bring that up here boom so now we just wrapped an entire connection with our app right you can look at it with that Circle again so if I do whoop this is our connection it's provided right or at least the skeleton of it is yeah cool we want to do the same thing for the wallet providers let's go ahead and type in wallet provider all right bring that all in here and let's just bring it out here let's give it a nice indent cool so what did we just do right if this is our connection provider we also provided a wallet around our whole app so think of it like two circles right and again this snap might be super accurate but I think it's a good visual to kind of understand uh what's going on okay cool uh we're not done yet though mostly because we set up the skeleton but we didn't provide a connection and we didn't say which wallet we're using so to do that uh we're gonna need to pass in a prop called endpoint and tell him tell him what endpoint we're using so remember that quick node endpoint that we use this is where you're going to plug that in cool so endpoint equals let's just put this empty object here and let's define what our endpoint is so let's say const and point I'm just going to hold in the variable you don't have to do this but it's going to make this a lot nicer because if you remember our HTTP provider if you copied it it's gonna be pretty long so I'm going to go ahead and put this here we go and we can just write endpoint awesome okay so we have the end point another thing that we need to do is get our wallet set up so what wallets are using we're using Phantom so we're going to need to use this Import in just a second so let's do kant's wallet is equal to use memo all right it's a react hook and inside this react hook it's going to take in an anonymous function I'm gonna put this right here and inside this array let's write new new Phantom wallet adapter right let me put parentheses here comma comma after this uh end of this bracket and then another empty array right here cool so then now that we provided the end point let's provide the wallets for our provider say wallets is equal to wallets and another cool thing is we can write autoconnect here so that it will automatically connect and there you go we set up our connection but at the moment we're not connecting right because there's nothing set up um to use that connection or make use of it so let's go ahead and do that so let's refer to our little diagram here and if I want to use the connection that I just made which component should I be looking at should I look at full posts app or dashboard I'll give you guys three seconds three two one all right if you said dashboard ding ding ding you got it all right so let's go ahead and use the dashboard I don't know why I use my epic pen but let's go ahead go to dashboard.jsx right and let's get started and see what we have here so again I gave you guys a little bit of help here I used all the Imports already right but the Imports that we care about is this use wallet right and we also care about uh Phantom wallet name all right this might be a news already okay cool so let's scroll down we can go back to this app and remember how I said connected is false right we don't have to use this all right calm this out you're gonna see there's errors all right because connected doesn't exist what you need to do is grab connected from use wallet right we imported that from here use wallet is a hook from Solana wallet adapter right and you can get something called connected here all right connect it is basically going to read our connection and say hey there's a wallet connected if there is right it will be true and if it's not it's going to be false okay so let's go ahead save okay cool another something here it doesn't say uh what's called connect there's no connect button right it's the same as if I were to undo this and bring this back it's the same as me switching this flag or this variable from true I mean from false to True right except I didn't have to manually change it right this is called Static right and me taking this out is making it what we call Dynamic right so if I wasn't connected for whatever reason oh let's refresh this or let's actually just uh see if there's a way to disconnect here okay now I'm a different person cool I guess there's no real way to disconnect oh I know maybe if I do uh different network let's try this I actually don't know what will happen here [Music] okay so it says I'm connected even though I'm in a different network that's fine but basically if I my wallet wasn't connected which you might see when I mess around with this right it's gonna say connect but remember that um property right here autoconnect it will automatically connect our wallet if it's already there so let's try and not having this there we go cool so I removed auto connect so now it's a better visual connected is what guys is it true or false false I click this right it should work right we should auto connect boom awesome Okay cool so the connected is working now and let's see what else on connect select connecting true boom okay nice awesome so we're Auto connecting we already have our Phantom connection up and running let's see what else do we need here I actually think that's good all right so we'll come back to this right but with that said we have our Phantom wall connection up and running which is awesome all right so what's next let's take a look at what we wrote right what we want to do next is write Solana functions right that was a very simple way to say um edit write Solana smart contract right so if you didn't know if you don't know what smart contract is basically it's exactly what it sounded like it's a contract right where you have a list of things that you need to do and depending on what you wanted to happen it happens instantly that's what makes it smart right so how do I write a salon a smart contract well I'm glad you asked so let me show you so I'm gonna make this full screen We're not gonna go into vs code for a while we're going to come back to it in later all right so we want to do let's make a new tab here and let me show you a website it's going to be called beta.sol.pg.io if you guys are coming from solidity at all this is essentially the remix of Solana it's an online IDE where that helps you write Solana smart contracts all right I already have a new project set up but let's say you want to make your very own project what you could do is hit create and there's three Frameworks we could use native rust uh anchor rust it's just a framework of rust and then there's new support for something called seahorse which is right you can write Solana with Pike with python right let me try it again and there's a new framework here called seahorse which is very exciting it's basically writing Solana code with python which is cool all right but today we're going to be using anchor so let's go ahead and name our project let's say uh Solana blog let's click anchor rust click create and boom there we go right and you should see basically the same thing I had before right uh let's just go over what is here right so there is essentially an import here this is the ID of our smart contract or what we'll call in Solana programs right so when I say program it also means smart contract and I'll use them interchangeably cool so if you see this hashtag program this is what we call a macro in Rust and underneath it is uh the actual program right so if this is a macro for program underneath it is our smart contract this is everything about our smart contract this is a function there's structs here don't worry about those just yet but uh we'll get to it so what I'll do for you guys is I'm going to erase everything except declare ID because uh we're gonna need that for a second I want to build it from scratch just for you this is Solana playground the reason why I love it is because not only you can build you can also test all of your salon as well as deploy right because after you write this smart contract we need to deploy it on the blockchain right so let's illustrate that right so basically what's going to happen is we're going to write a rectangle here that's a smart contract let's make a giant one this is called the Block Chain right so if this is the Smart contract right we're going to write something here all right once we finish writing it we can deploy it so that it lives on the blockchain right let's make a circle here this is our our app what we want to do is use our endpoint right we use our endpoint to connect to the blockchain call our smart contract and what let's say we want to create a post we'll call the create post from this smart contract we'll create the post right the post will get created right here this is the post on the blockchain and then we're gonna fetch the post right fetch post and this is a visual of what's happening what's going to happen all right so what's the first step we need to make right so if we just rewind a bit what we need to do first is make the smart contract so this is the step that we're on visually you with me cool so let's get started Okay cool so as you can see our main file that's going to have all the main information is lib.rs this is our entry point uh for Solana to read our code so declare ID um is our is the program address all right so let's get started to get started remember when I use the word import where we're importing usually a library a hooked from react right with anchor the closest equivalent we have is something called use we want to use anchor Lan right uh anchor Lang is a library within anchor which again framework for rust so when I do colon colon basically I'm going inside that folder or inside that library and there's going to be a couple different folders or different other libraries right so within anchor Lang I want to get something called Prelude simple enough right and you don't have to fully understand what Prelude is but just know that we're going to import it into our liv.rs of course if I do call again I'm going inside what I'm looking inside Prelude and then I'm going to write Star right get me everything from Prelude which is coming from anchor Lang we're good all right let's say we had but now the question is let's say we had other files here right we've got other files here let's make other files to say a new file and say uh constant dot RS right RS stands for rust and let's say a state star RS cool how do we bring these files whatever's in them Insider app right so the first step is you want to say Pub mod constant and then you want to say Pub my States right then to import them as modules we're going to say use create all right think of crates in Rust like um closest thing I think of for JavaScript would be like npm it's like packages right so I want to get let's do this get constant all right which is going to be this file and basically if I do this what am I saying now get me everything within constant right now there's nothing but we'll put something nowhere and let's do a comma here and get me States and how do I get everything within States we'll do this another thing to notice is if I put a semicolon here right in JavaScript we can get away with this right in Rust we can't right every time you end the line right that's the last piece of that line of code you need to put a semicolon otherwise it'll think that it'll rust with read it like this which is going to give us an error right so make sure you mark the end of your code or line with the semicolon if you don't do this it'll yell at you after that usually the program the declare ID goes here awesome and remember how do we Define a program right we can use a macro you could say hashtag square brackets program just like so cool so what we could do here is a pub mod and this is where you can name your smart contract or your program what do I want to name this I could just say blog so all right and then if I put curly brackets here this whole scope is the Smart contract or what we call the instructions right what are the instructions of this contract right cool so quick recap basically we are importing any libraries or files that we need to the global scope over here everything I'm highlighting it's in that scope we can just use this as is but we can also just bring these variables into this scope right we can do that by saying use super star this liner here to my understanding right basically if this bring if these lines of code brings it to this scope you super will bring all of these into this scope all right so that I can just use it easily in the program otherwise I still have to do like create this and then get what I need from it I can just call what I need without uh saying crate or States okay cool so let's make our first function all right to create a function on uh Solana I'm going to do is write Pub FN boom FN is like in JavaScript if you write function here so FN is function next is just the name right you guys know this and let's say let's call it init user right when I say knit it means initialize the user right so if we go back to our app we want to initialize a user for this app and the user should be related to our wallet right so essentially we can sign up using our wallet address as our user right that's the idea here you don't have to do there's many different ways to do it but it's the way we'll do it cool and just like any other function we put parentheses uh the difference is you need to put a dash greater than sine to make an arrow and then you're going to say result and do something like this right basically you're saying hey this function will get you a result and what and then we put these curly brackets and that is what the function does this is a skeleton of a function in Rust so you would basically write oops right logic here and what do we write in logic of it's initializing a user all right so let's build this like in JavaScript and I'll turn it to rust so basically uh we're gonna put in a couple parameters okay so again for JavaScript what should making a user take in right I can see a name and I could see a profile picture so I could write that name and uh we'll call it Avatar boom right so this is how you write it in JavaScript but now I'll show you in Rust it's a little bit different right if you guys are familiar with typescript this might make a little bit more sense so with rust you have to specify the type of the variable JavaScript it doesn't care what it is it'll figure it out later right rust it needs to know so name you want to put a colon here to define the type and then you can say space string so I'm basically saying uh this function init user is going to take in a parameter called name and it's going to be a string if it's not a string you should it's just it's a problem right so then Russ will say like hey this isn't a string that's the reason for typecasting okay so for Avatar right what should this be if you're not sure we could take a look at our vs code and we can go to dashboard where is a URL an image or an avatar is essentially with these quotes it's a string so we can actually say string here too cool so you might think we're done but there's one more thing that rust needs he needs to take in uh context something called or we'll say a CTX okay well what is the context right uh essentially is I look at context to my understanding is what information should init user have when it comes to um destruct and rust right so you might not that might not mean anything to you but that's okay all right so what is the type of struck it's not a string right it's going to be type context okay and you're gonna put these two things here and inside this right if you look at the docs will usually be t or something like that inside this you want to describe the struct or what that context is well uh usually the convention here is the context will be similar to the name of the function so I'm just going to be init user right so take in whatever context whatever init user means taking the name and taking the Avatar right there's the reason why we need context here is because there's some validation there you go so we need init User it's going to take in context name Avatar uh this this doesn't exist yet all right if we were to run this and say init user is undefined or I don't know what this is right so what you need to do is we're going to pause like put a pin on this pause it and let's create this init user context right so it's going to be pretty simple you want to go outside the scope of your program so I'm going to go to line 19 for me and let's define this struct so uh in Solana the most simplest way to do this what we're going to do is uh if we can create something called accounts right or a program derived account basically we're going to use our program to create accounts that hold information right so this might hold a user right so basically our smart contract created this and we can call this an account right this account will have its own public key right it'll have its own address on the blockchain and information that I put in right so in order to set that up uh we're gonna have to write these structs so I'm going to say hashtag and we'll say derive right this is why I'm going to say the word counts built-in macros that's going to make our life easier okay next we're going to say instruction here because this is an instruction right then we can say the pub struct and then we need to make sure it's the exact name of this right otherwise I won't know what you're talking about so this is init user right same spelling right it's good and then we need this again and we need to write info right again like for me when I was getting sauna it was so hard to understand info talked to a lot of different developers about this but the simplest way to my knowledge about how I can explain this is that info is what we call a lifetime variable right uh the way I'll explain it is in JavaScript if I say let array is equal to this right how long will this array exist in memory in JavaScript it's essentially going to exist Forever Until you don't use it and then something called uh the garbage collector in JavaScript will remove it right but otherwise it's just gonna stay there until you do something a lifetime variable tells us tells rust how long this will live four in the code and the reason why info is confusing is because info you can look at it as it'll live this will live as long as it needs to right yeah I know all right cool so all you need to know is that usually when we're going to make a struct we're going to add info to it all right we need to tell them how long this is going to live for you don't need to fully understand how how long I need to live for you just need to put input okay cool what is important though is within this two color brackets is the scope of the context and within that we're going to write another macro here it's going to be a count all right the cool thing about uh anchor is that we don't need to set up the account itself we can use this macro to initialize it or set it up so how do we initialize an account um it's really difficult guys just gotta write in it boom it's initialized right cool next thing what I have here is something called seeds right seeds is what's going to help us find the program address for our account right let's let's say we want to make a user account right it's going to be at like some sort of address like something like this right the address already exists we just need to get a place we need a place to put this user right at this address right so in order to verify or trace it back we're going to use a seed to generate that address right the closest thing I can relate to it's not exactly the same thing is let's go to something called dice bear right dice bear is you put a custom seed right and then you get a random Avatar so if I say cat right this is the Avatar it generates so the equivalent here is I put in a seed right we get uh instead of a picture or an avatar we get a public key or an address right it's not a new address it exists it's just a place we can put it all right so let's say my seed is a strand called user and let's get and usually we do our Authority or our public key so let's copy this and paste it right it's these two things together will make our public address so this is our public address or our our PDA right so yeah that's what we want to do for seats right and for the seeds itself right I'm just going to write user seed here this is a variable right there's if I were to run this it's going to say this is undefined cool don't worry about it yet now we're going to put a comma here right and say another C that this is going to take is Authority right who Authority is basically um who is in charge of this account and typically it will be though the person what wallet that you're connected with right so this is my CV right this is why I put this there TV right and to get that key and make it Dynamic you're going to say authority.key dot as ref and you don't need to know exactly what as ref does just know that it gets it basically formats the key to something that the seeds can read right this can read okay so we set that up let's set up this variable right where am I getting this variable from you could Define it at the top here there's nothing wrong with that I just want to show you guys an alternative and that's going to go into constants all right we can go into our constants right here and what we want to write is say use anchor Lang Prelude star all right and to make a constant we can say constant sorry like this and say Pub const right it says constant user seed right that's where I get the name and what's the type of this it's going to be and u8 uh just means unsigned integer right and it's going to be equal to a binary string called these right so this is a fancy way to put a string as a seed all right you'll see that when I test it right don't worry this doesn't make sense to you once we test this it will all make sense okay then we're going to do a constant here let's put another one since we're here we'll say Pub cons we're gonna need a post seed later on so to save time I'm gonna make it same thing and you ate all right because we need this in bites and bites of a boom so we have our constants all done all set up and now because of this we bring it to Global scope because if you super I can just write uh user seed well actually no it's because of this it's still Global I can still write user seed right here instead of doing a constant or something like that right so we have that seeds done another thing that we're going to need is something called bump right right so what bump is basically let's say I want to put this user at this address but well let's say there's something in there let's say there's a tweet in there right I can't put this there if there's a tweet so bump is going to go to the next available one right which is at a different interest which could be Asda Das and then different set of numbers right we could put the user data at that address right the equivalent on dice bear would be like this is my seeds oh wait there's already a picture there let's put a one in there this is our program address clearly different right cool so I hope that makes sense that's what bump is for and again if whenever we store something or puts even though it's our program creating this account we still need to pay so we can say the payer is equal to the authority and the authority you can just look at it as us or who owns it the next thing I need to do is space right how much space is whatever this is gonna take okay well to determine that right we need to figure out what the hell we're getting space for so before I Define how much space it is what I want to do is say what this macro is for and again do that underneath the macro so we say Pub user account right user account right so how much space does a user take I don't know either yet right we got to find out okay so I'm lying I do know but let's find out together so again what type is user account well user account is going to be a type of an account right this should be an account uh inside of it we're going to put info of course and put a comma here and put user account right so what kind of account uh what kind of type is user account it's going to be an account what kind of account is user account it's going to be something called user account does this exist yet I tell you no so if I run this it's going to say hey I get it yeah this should be an account that's cool but what the hell is a user account right that's what it's going to say so I'm gonna put a comment here and let's make another macro to set up the rest of it I'll say account mute and it'll say Pub Authority signer info right another thing is Pub system program is going to be program all right this signer uh attribute here is coming from somewhere else this program is coming from anchor link all right so we could just say info system boom all right so within this context we figure we give him we give this function knowledge about what the hell a user account is and Authority what are the authority is which is US who's ever signing the transactions and the system program which is going to be essentially this Okay cool so that's all said and done but uh we still need one more thing we need a user so let's go ahead and make that so remember the states file this is what we're going to do so similar that we did the constants right we can say use anchor Lang Lang Prelude star semicolon did I put a semicolon here sometimes I forget cool so we end that import now how do we Define an account right so we made a constant here how do we get an account well luckily there's also a macro for that so we can say account right and we're gonna knock another one we say derive default and we're good to go so let's define what the name of this account and we want to make sure that's the same name as this otherwise it'll still be undefined so we say Pub struct user account all right so you might not know what the hell is going on right but if you're coming from JavaScript let's say I want to make a user all right how would I make this user object right if you think back it's going to be name right and it's going to be uh Avatar this is the rust equivalent or the anchor equivalent right so how do we make a user object well we can say that a user account will always have a name and what's the type of that strap yeah cool what else should a user account have I think the cheat sheet is right here guys it's a pub Avatar string right cool and now do you got it this is the user account and you could leave it as is but I'm going to add more properties to a user account uh to make the rest of our functionality a lot simpler this is the way you can think about your code right the way I'm getting better and better at Solana I'm no expert yet is by constantly making these projects right it's not the projects that yourself that gets a job it is you practicing them and understand the concepts so once you figure out the pattern right you can use it for one so let's say I want to make a tweet account a Twitter account all right how would you make that all right same structure so for the authority I'll say I'm gonna have another property called Authority here and this is gonna accept the type of Pub key right because when I make a user I want to make sure that the public key of my wallet is associated with it all right that wallet has authority of this user and it should be different and dynamic another one that's going to be is a last post ID right because when I map through the posts I want to give it an ID I don't want any duplicate IDs out here so we can say u8 right if you're expecting a lot of posts you can do u16 u32 right depending on the size so I'll say you ate for Onsite integer comma there and uh we also want a total post count how many post accounts has gotten have in total just in case you want to use that somewhere you wait so again optional this last one but it's good to know okay so that is a user account I think that should be it um let's go ahead and build so a good way to test if this code is all valid is to build and if you get any warnings uh there's something wrong and usually I do because I forget a semicolon I might type something wrong or I might forget which I just remembered thanks for reminding me guys I never said how much space does this take right so there's some anchor documents out there that tells you how much space this could take and for Strings usually it's going to be four plus how long you think the string will be and I'll say 256 bytes or character that's equivalent to one character I think and then we can do four plus Avatar which is an image URL so which one thing would be longer a name or an avatar an avatar you got it guys you guys are geniuses right so what I'll do is this what I did before was figure out what's the longest URL we can put and this would be the longest URL 2048.

[00:52:50]for Pub Key this is going to be consistent it's usually 32.

[00:52:53]for u8 you can just say one and one right cool all right so this is how much space it takes you just add it all up and we get the number that we want and that's how much space we get right so for space I already I already did the math it's going to be 2302 312 bytes all right another thing that we need is something called an account discriminator when you're storing stuff in memory you want to separate the stuff that you put in memory so we do that by running plus eight here right and again I'm still learning what this means but I just know it's necessary so I'll do plus eight cool so now we have how much space I believe this should be good let's just run it build cool and there you go right I already forgot the semicolon up here let's go ahead and try again you super needs a semicolon course result oh okay okay all right cool I know what's going on now all right so that should be enough of the semicolon Fiasco but we didn't write any function we set up the structs and the context but I forgot we gotta write some logic here so let's quickly write some um logic so if I write CTX here right if you were to con to log this in JavaScript right this doesn't work in Rust but if I were to write this in JavaScript we should see all this information right that's the context all right uh if I wanted to get the information of a user I can say dot accounts or dot accounts dot do I want a Authority a program I want the user account user all right so this gives me this yeah so with that in mind let's uh organize it with variables so it's easier so we can say let user account is equal to and mute all right writing mute here means that this variable can change all right in JavaScript we can write let user is equal to Lance and then say user is equal to David right and that would just be just fine no errors but if I did this in Rust it'd say hey you didn't say this was mutable why are you changing it right so here I'm letting rest on hey uh this can change all right and it can be cat ctx.accounts dot user account all right just storing that in this variable and saying that hey this could change it doesn't have to be Lance all the time could be whatever user is made right cool so now we also want to set up uh this Authority variable of course we say and mute and say ctx.account and make sure it's accounts Dot Authority all right so it's kind of like an object with DOT notation Okay cool so now if I console log or say user account it's basically the same as this line right so if this gives me this how do I get the name all right how do I get the name if it's an object or it's like an object we can say dot name all right so now I got access to the name I can say here that the name will be Lance all right why is this bad if I just run this and you know put it into my blog app why would this be bad it would be bad because every user from now on will be called Lance and that would be so confusing right we want to make this Dynamic rights how to make this Dynamic well we can say is equal to name all right well where's this coming from ah now regular parameters right how we use them in JavaScript it's going to be the same cool with that logic it's going to be just like how we did it before so we can say user uh account dot Avatar is equal to Avatar right and then we have a user count dot last post ID it's equal to right we don't have it ID parameter but we do know that when I knit a user it should start at zero and when we first make a user the ID should be zero okay user account dot post count is equal to right how many total posts should they start with we can also say zero okay and who should be the authority of this all right do we have access to that we do and it's in this variable right we can say Authority right but I want their public key right like the CV right you can say get it by saying dot key it's a built-in method and I can say semicolon all right so now we have a complete function uh usually in JavaScript we have something like a return here the equivalent or the closest thing it's not the same thing is okay all right and if you wanted to return five you can put five here but we won't return anything so we'll just say Okay building build successful let's go cool and uh they're saying it's a this one when you ever see a warning that is your program will still run it's just letting you know like hey uh just so you know this should change but it'll still run so there's something with the post seat here and it's right it should be cap let's build one more time hey okay build successful right so now we can hit deploy and this is gonna cost some Solana so another thing I forgot to mention is with Solana playground there's this button here make sure you click it you might have figured this out at this point in tutorial but it's going to connect you to a playground wallet so this wallet is different than your Phantom it's a built-in IDE notice how the address is different make sure you have Solana here if you don't you could take this address and bring it to Solana Fawcett and do the same thing cool so this is the address of this playground wallet awesome uh let's go ahead and deploy cool so now it's going to deploy our smart contract right we wrote it right here and we're going to deploy it to the blockchain all right so if I were to erase all this you guys should know what this means now so we wrote Our smart contract we are deploying it to the blockchain as we speak with all the little code that we wrote in it awesome deployment successful and now it's on chain and we don't it's on the blockchain but we're not going to call it yet from our app right one thing I want to do first is now that it's deployed if you look at this test tube we can test our function right so we can see if we can actually initialize a user right so let's let's go ahead and do that let's say our name is Lancy all right let's make it fun Lancy and then the Avatar all right let's just use this we already have this uh we'll say um we'll copy this link here and we'll paste it and now again if you didn't understand a word I said maybe us testing it will help you understand right so best part you should you should know we're passing in Lancy has the name and the Avatar is going to be the string or it's the image but now you're going to see something called accounts here where is this coming from that's not an argument technically it is it's right here it's our context right our context is the accounts right so what accounts do we need well it looks like we need a user the authority and a system program so let's open this up we have a user account an authority and a system program all right if I were to ask you a question uh do we already have a user account no how can I tell if you scroll down you can see all the accounts that you set up which is really cool by the way shout out to Atron the guy who's behind beta Soul playground he taught me a lot about Solana and how this all works but once you set up an account you should see it here and you can click this fetch all button and you should be able to fetch all the accounts right and right now there shouldn't be any accounts or user accounts so they're going to see nothing okay cool and all I'm going to do is actually we can actually change this endpoints because sometimes we get an error let's do genesis go let's do a fetch all boom so now you should see empty array because there is no object right there's no account so if this does this exist just yet no how can we get it to exist or find a place to store my user account which is this little square right how do we find a place for it well we can get it from a seed right so what seeds do we need user C that's our first seed but you don't want to write uh user seed here that's the variable I want to go to constant and write the string so what's the string here let me user okay uh what's the other seed Authority key as ref right for me I didn't know this for a while but this is gonna be a Pub Key a public key and it's usually your key the one who made this all right so I can say add seed say Pub Key and copy your playground wallet right so that we can make a user based off your playground wallet hit generate and now this is the unique address where we can put our user if this was if this already had stuff at this address it'll go to the next available one cool so now for the authority we want to do is put my address which should be the same as this cool and if everything went well you're gonna test and it should work look at that init user pass I love seeing that I get really happy when that happens especially a first try which is awesome so if you guys got in on the first try give yourself a pat on the back right so how do we know it passed well what should happen after we emit a user if I fetch all we should have a user right when we fetch data from a database like let's say Firebase we can usually get it back as an object so what kind of object did we get we've got an object with a public key right this is the user account right you get this here six seven y six seven y then we have another property called account which holds an object which holds our user information there's Lancey my avatar The Authority which is the same as my wallet the last post ID and post count so when I create a post what should happen to these two should increase right should be one let's keep that in mind for the next function but other than that that's how you make a function all right so take what you learned from this and let's put it to the test with our second to last or actually our last function all right all right so on to the next function so let's go ahead and move to here and to create a function it's going to be the same kind of pattern guys so how do we make a function we can say Pub have fun we can say the name which will just be create post here is going to be the parameters we just know it takes an error result and you write it like this and here we go this is the scope of the function right now we can write what parameters it takes in and as you know with rust it will usually take a context right what kind of type does this expect it's going to be context and it's going to be create post and as you know create post doesn't exist yet so what else does a post take in as a parameter to think takes in a title and it takes in content right but we also need type so if we need type it's going to be string content also going to be string okay from there right oh how's that from there we can say uh the logic goes in here but let's pause this and let's make create post so I'm going to scroll down and to make create post if you ever get lost we can look at this as a template of how to make this struct right like I said it's important that you understand the patterns because it'll make this a lot more easier and simple to understand okay cool so to get started we'll take our macro to make an account we'll say to arrive counts we also want to use instruction here and then we could say Pub struct right name of the context which is just create post to create post oops say info then from here we can do hashtag account right so how do we make an account remember uh anchor does it for us when I write init we're initialize an account at this point you might be asking what account are we making Lance well we have so far a user account we also need to make what I'll call a post account so we could say Pub post count all right say account you can say info oops comma here we can say post account right and if I ask you does this exist just yet nope we're gonna make it soon right so just keep that in mind let's add a comma here and let's make the rest of these parameters so we also want to put in seeds for this so if you remember in our constants we have a postseed right here okay post seed we're going to say post seed all right we also want to put in our Authority dot key oops dot key but kamaki dot key dot as ref right and the issue with this seat is that every time I make a post it's going to generate the same image or the same uh address right we don't want the same address over and over so we got to make it unique so how will we differentiate that let's add another seed that's what we can do and for this we're gonna use um if you go to States here we're going to use the last post ID that number as part of the seed so what that would look like is if I were to say um the custom seat is post right that's the string it takes in our Authority or our wall address and then it takes in a number of the last IDs so if the last post ID was three this is the unique um profile picture or the unique address or the public key right what if it was four five six seven see how it's a different one every time all right we can you know replicate that with our code here by putting last post ID as part of the seeds so I'll put a comma and we're going to put it in a format that this likes right you can't just write the user account last post ID I'm going to say end user account I'm not going to go too in depth of this because again uh it's not necessary just know that you need it in this format as the eight dot as ref Okay cool so with this the format should be good and user account that last post ID as you ate cool and that's the seeds right and doesn't need anything else oh yeah we need bump right you guys remember what bump does that address has stuff already it's not available to us we can just say bump go to the next one say pair is equal to Authority okay and then for space you can set that equal to how much space does a post account take I don't know let's find out cool so pausing that again I know we're pausing a lot of stuff and coming back to it so keep just keep track of everything all right but we'll Circle back all right so we want to make um the post account state so we could say a pub struct post account right and another thing I want to mention is that you don't have to name this user account you could just say users you could just name this post right I'm just using this naming naming convention to kind of help you guys understand uh what has happened right so this is essentially this post account just represents each post so each post account is a post right so I can say Pub all right what properties does a post account need and ID you wait okay all right I'll save you some time it's gonna take in the title it's going to take in content it's going to take in a user and this user will be Pub Key and this Pub Key isn't going to be our wallet address it's going to be the pub key of the user account right so if you remember uh where there's Lana playground oh this is our playground oops if we fetch a user real quick this is the address of the user account where that data lives right that is also going to be stored in this post account right here so this six seven it's gonna go here when I make a post that way we can identify what user made that post right cool then we also need the authority which is going to be different than the user right it's going to be the pub key of your wallet so that would be our 6D here all right because this wallet should sign whatever we want to do with this post if you want to delete this post later right that address should be able to do it right now my friend David shouldn't be able to delete my post because he doesn't have the authority Okay cool so what we know here is that this is 32 right this is 32. uh content right content can be really long right especially if it's a Blog so again um we'll just make it really long string so we can do that for title it should be 256 as well it could be just like that and this is going to be one cool so if we add that all together you can go back to lib we can write the space now and I already did the math it's going to be two three seven six I believe plus what guys let's see this count discriminator it's going to be eight you got it cool that said right the payer is us is how much space it takes and we're good to go all right another thing that we need to know right we need to get access to the user publicly like how does my post know what this is right well we can give it some context right ah all right so how do we get the context of a user account right we can just say account all right we can say mute right because this user account could be different it could be me making a post it can be David making a post or it doesn't have to be just one person uh the seats right we can find the exact user account by passing in the same seats right if I want to get my user account I would pass in that string users the user string and my wallet address but again we can make a dynamic because if I passed in David's user address or wall address we get a completely different seat we'll get his PDA right so boom just in case and another thing is we can write this as one has one Authority and it's gonna be us cool as you can say Pub user account say account take some info and a user account up here okay another thing we need is the authority and the system program and usually when you make this it's exactly the same as before so go ahead go to line 45 48 for me and you can just copy that you can write it out it's going to be exactly the same no matter what cool that's the shock for create post we have our constant we use it we have our state that we just created and now let's make the logic so let's walk through the logic of creating a post right we need to uh initialize the post I mean what else we need to do we need to increment the post total and the ID set properties okay let's do that then so to do that it's going to be very similar to how we initialize the user here let's make a variable say let post account and how do we get the post account information from this context right well we first we need the context then we need to go to the accounts and now we have access to post account user account Authority and System Program which one do we need we need dot post account I believe yep dot post account semicolon okay now with that logic how do we get a user account ctx.accounts.user [Music] simple enough cool last thing we need and we don't have to do this but you know again just for consistency uh and ctx.accounts.authority boom cool so what are the properties that we need to initialize we need the ID title content user Authority and that order so if we do Post account right we have this object how do we get the ID right we do Post account dot ID and what do we want to set it equal to right if we set this is equal to zero every post will have an ID of zero and that's not good right it should be right the last user ID right so this first one based on that it should be zero after we make a post it should be one two three right so how do we get access to this user account from here luckily we set that up with this variable and us doing this this user account we have the context right that's why it's important so if you have the context we could say that user account variable dot last post ID right so there you go that was the power of the hardest one right so then we could do a post account dot title is equal to our per our argument title post account dot content equal to content and then we also want the user who made it right so user we need access to the user account again which we do we can say user account and if you look at the object right we don't need to dot account right we can just say uh user account dot key and parentheses to get this public key make sense right us doing that key is getting this putting it here cool okay semicolon and then last but not least post account that Authority is equal to Authority dot key that's how we get our wallets public key and we're not done yet remember we need to increment the post total and the ID right so there's an easy way to do this or you can just do the math yourself or we can do it last post ID is equal to user count dot last post ID right I'm gonna do a DOT I'll build a method here checked add right and because of the semicolons uh it can format it like this that oops dot checked add one then dot unwrap cool and remember don't put a semicolon here or else you're splitting this dot on wrap right you want to put it right here so basically uh it's going to increase post ID buy one or if you wanted to increase it by two you put two right so it's just a built-in method that would take this number which is zero add one and unwrap it to a format that Russ likes okay so that's not it though we also need to do the total right increment that by saying that post count is equal to user account dot post count dot checked oops checked add one dot unwrap cool all right so we incremented two things the last post ID the post count right which will make this seed validation more Dynamic right we're not going to get the same seed we don't have to rely on bump all the time right and last but not least we can say okay that's it awesome and that's it that's creating a post guys all right this should be I hope this is very easy to follow right let me know down below alright drop a like comment down below like thank you Lance right and again if you we're gonna be harder and harder ones than this right we can look at Airbnb we can look at the to-do app which is just slightly this harder than this all right let's go ahead and build and see if there's any errors hey cool post account instruction I spelled that wrong struck that happens to me a lot okay trait not satisfied okay oh that's right have to put the accounting I have to tell them hey this is an account oops this is going to use the account macro and we need to derive the default and this should be a lot better cool all right different errors I can live with this uh cannot borrow as multiple I think I know why already Yep this is why we need the and mute perfect example of that and mute there we go build successful right cool so I will just refresh this so you don't see the errors you could see that if I build now boom build successful so all I did was make sure in your states you have this account and derive default otherwise it's not going to be satisfied with just this next in your create post make sure this is mutable otherwise it's going to be like hey you can't change you can't change what's in there cool another cool thing about Solana is that usually with solidity once you deploy to the blockchain you can't really add more code onto there right with solidity at least I don't know if it changed since I've recorded this video but the cool thing about Solana is uh you can take your copy of the smart contract right make a new lines new structs everything like that and deploy all of that together right you can update your contract with this new stuff okay that's the cool part about this all right that's why it says upgrade here instead of deploy so let's upgrade right now that we know that this is stable and you know and successful and then let's test it and we should be good to go okay it's almost done bam deployment successful right if we look at our tests now create post is there and post account is there as well right we can do a fetch all there is one user Lancy all right and then there's a post account no post right that makes sense we haven't created a post yet so let's create a post and again let's break it down right it takes in two arguments title and content right we can say uh welcome to my blog all right content this is my first post right what is what else do we need is this it we need to provide the context so when we go to accounts all right we need to put information for all of these right so I'm not going to start with post account let's start with authority right who has authority of this post me my address this wallet does right assistant programs there by default right user account we need to put this do we need to make a new user account associated with this post let's see is this initializing a new one nope we're reusing one based off the seed right so basically I'm saying is we want to use this six seven y right so what you can do is just copy that put it here right or you can get it from seed again put in user put in your Authority and you should still get the same number right six seven y cool but now for the Post account from seed all right this doesn't exist yet we want to find a place to put our post data right so for the seeds it's all right here the answers are in front of us we want to say post because I believe that's the string I wrote yep post you want to put the pub key which is our key and to make this a unique uh PDA we need to add a u8 here right how do I know it's u8 because I said as you wait and it should be a number of the last IDs what was the last ID of this zero so I'm putting zero if we already had a post if this is our second post it should be one all right but it's zero so let's generate that this is the will be the public key where that post information will live let's hit test hopefully it passed let's go create post past right how do we know let's fetch this and Bam this is our post right there we go right welcome to my blog this is my first post now that said this is it this is our Solana program guys all we need to do now right is like let's say we made our account we also made a couple posts right all we need to do now is use our endpoint to call these functions right to create more posts right and then we will use our endpoint right to get the program and get fetch all the posts Associated right all the users all the posts Associated to our app right and that is what the final part is so let's go ahead and figure out how to do that cool so with that out of the way I'm super proud of you guys let's go ahead and clean up some things here and let's say you guys want to make a brand new program right you don't want to use these users he wants to start fresh right we can do that all right so to show you guys how to do that right we're going to go to this toolbar the build and deploy section and go into program credentials and let's say you want to use a different smart contract right but you want the same logic all right you just don't want you just don't want you want to start fresh you don't want any of these accounts uh we didn't set anything to delete them or to close these accounts so what we could do is we could say new right this is our program address right now our program ID if I hit new here right if you don't save this it'll be lost forever I'll you'll forget what this program ID was I don't care just hit generate and this is our new program ID so when I hit build this is going to change boom everything stayed the same but this changed why is that significant because now this program has no uh accounts associated with it so now it's kind of like we started fresh right and it's not deployed so let's deploy it let's put this smart contract on the blockchain all right so deployment successful right we put our new smart contract with its new address on blockchain and now I can prove it to you let's see if lancey's still there he's gone and any post he's gone all right and that's okay why is that okay because now we're gonna make a user Make a post from our very own app so get excited for that let's get it set up so one of the first things I want you guys to do is head over here go to your IDL and hit export right when you hit export and if you're using Chrome you should see an idl.json in your download so go ahead and go to search for this idl.json in your downloads could double click it and it should open it up in vs code so I'm just gonna make this bigger if I do a save here oops cool so take a look at this basically it's a Json file right that represents our Solana program right the instructions this is our init user function create post function right has all our accounts all right all the information we need right we need this IDL and need to put it in our front end right so go ahead and press Ctrl a uh you can press copy or if you want to be really sure press cut right control X and go over to your ideal.json so this idl.json right here is different it's the same thing this is the demo idea all right and the only difference between the one you just copied and this one is that it has metadata address alright so we want to copy that let's go ahead and paste it underneath this Json right and what we could do just to keep the same formatting right this is important you don't need to have metadata address on there but the way we're grabbing the address uh is through this file so I'm gonna oops I'm gonna copy this even up to the comma and I'm going to bring it all the way down here and what we'll do next is let's erase the old one all right cool let's hit save and and X Out the downloads version I'll hit don't save just in case you need to get it back later cool so let's just go over this right this is essentially right our new IDL with the old address of the demo smart contract right so what we need to change is this right here this shouldn't be FB all right this should be CSX so let's copy that and paste it here so now we're using the updated IDL with the correct uh metadata address let's hit save and that very first step is done right the next thing that you're going to need to do is head over to your contacts and head over to blog.jsx this is what's important here um we need to understand how context works okay cool so to give you a visual of how context Works let's go back into our program and let's move to our app here are we going to erase this to avoid confusion but let's say this is our app right and usually with react right when you make a variable let's say a user right this holds Lancy or my user information you created an app and you can pass it down as a prop to dashboard so then dashboard knows what user is if you don't pass it as a prop if you say user in here it's going to be like what the hell is user Lance you didn't tell me all right so that's why you need to pass it down as props right in react let's say we had like multiple components right on uh as a child if I were to bring if I need to bring user all the way down to this bottom component you have to go like prop pass down as a prop pass down as a prop promise not a prop and that could lead to issues way down the line this is what's known as prop drilling right so there's solutions to this actually so the solutions is using something called Redux or uh creating context right and context is essentially think of it like a little store or a bubble right we call that contextblog.jsx and I can create the user here right or in other words I can fetch a user in my contacts right and the cool thing about using context is that I don't need to pass it down as a prep I could still but I could call it from whatever I want right I just have to bring that context into here right so that's what's the beauty of context so let's work on our blog context okay so what do we have so far all right if you didn't know how to create context this is how you do it use the react hook and then you just need to make a provider for that context remember the wild provider I reset it here and let's say now let's say you want to make a variable or a function right remember that visual I just did like this would be the code equivalent let's say Lance all right cool or let's just make this even more weird so you understand dog right cons User it's a dog right and better yet let's make this an object and we can say name is uh dog right Avatar all right it's not a dog but we can get it from and splash so let's go here I'm gonna quickly get an image of the dog you don't have to do this step it's a dog this pug is perfect actually let's use this one copy image address go to our code and say that the Avatar is this very long string and let's say I want to use this static user right anything that I want to bring outside of our context put it inside here in line 24 this value right here so I'll say user okay and let's say I want to bring this user into my app right well not app sorry our dashboard right all you need to do is use blog right so you can go down below here you can say import use blog from your contacts and then say const curly brackets to de-structure equal to use block right and then from here you say what you want right let's say I had like five things in here but I only wanted user you can just say give me just the user here and then from there let's erase this right we did erasing our static user data and saying static user from the blog all right let's see if it worked look at that it's dog now right so now my little drawing right that's the application right we got user and we're putting it into dashboard static this is still static we still need to make it fetchable okay cool so now we have static user from the blog context but that's the gist of it we're going to be building out this blog context with right we need the functions from the Solana smart contract and we need to fetch all the accounts so that's the goal with this context okay so I'm gonna head over to our blog.jsx and this is where the majority of the code is going to be written um everything on dashboard.js is pre-set up for you we just need to write the logic right and if you're interested in learning more react stuff and next.js stuff right leave a comment down below I could I'll be happy to go over that with you the focus again is just the web 3 Salon code okay that's it let's keep it going so we are in back at the blog context right uh one of the first things I like to do is let's get our program key right and my program key I mean our address right so uh what I mean by that if you go to let's see our app go to our program we need this address right because this is we need to first use our endpoint uh and then get this program which will then help us get everything else right and I could just hard code this in here but I hardcoded it in our RDL so let's do do that okay so to do that the first thing I'm going to do is get some imports one of the Imports that I'm going to get here is Star as anchor from hold on second from quotes project or sorry at project at project serum anchor there you go that's what we want and basically it'll get everything from anchor and call it anchor okay first thing uh the next thing is let's import another hook here custom hook and say use anchor wallet from slana wall adapter and there's a couple of things that we're going to need here it's going to be use connection and use the wallet amazing okay next we need import public key all right and then you also need System Program right again don't worry about all these Imports yeah they're going to come into play as we go okay um and there's a couple functions that we need to make so again this was given to you guys but if you go into this functions folder you're going to see something called uh get random name right this is a function that we set up for you guys right this is getting a library called name generator to give us a random name right you could set this up to give uh your self name like make a input field like a modal and put in your name and sign up right here we'll just get you a random name and we'll get you a random Avatar using these functions okay my challenge for you guys if this is making sense to you guys is make it so that you put an input field and then you can sign up a unique user otherwise I'm just gonna get a random user to save some time okay so to get that information we could say import uh get Avatar URL from this path right cool you also need to get random names so let's get a random name I'm just importing everything we need random name sorry spelled it yep from sorry C functions get a random name perfect cool so we have the random name uh what another thing we're going to need we're going to need to import the IDL right so remember the ideal we set up right here we need to bring that in we can say uh import IDL from oops source slash I believe it's just ideal.json perfect and to fetch the program addresses or the pdas we can say import find a program address sync from Project CM anchor right and then we want to import uh utf-8 this is for formatting purposes later on and with that uh we should be good to for now we might need some react hooks later on but we'll import those when we need it blog context that's fine let's go ahead and get program key all right so to get program key let's make a variable let's make cell caps program key is equal to uh IDL right and remember in our IDL how do we get this we say dot metadata dot address right and what type would this give us string exactly right because this is a string duh right but we need this as a public key right so we're going to use this import public key and we'll say new public key parentheses right this is going to generate a public key based off this address that's all we're doing here amazing cool so we have our public key right we are using blog right returning contacts cool right they're basically taking our our context putting it in a hook and then using a hook and dashboard that's why it says use block okay cool so in let's see in our blog provider right still have static dog we can leave that for now until we get an actual user but underneath this I'm trying to think let's set up uh our anchor wallet right here so we're going to make use of this use anchor wallet right here and underneath the user I'm going to say const anchor wallet is equal to the hook use anchor wallet which we're going to use and place this somewhere else later on all right this is one of our parameters for something okay so we need a wallet we're using anchors default wallet we'll say const connection all right I'm destruction connection from use connection all right I'm gonna get a connection oops not from I keep saying from should be equals but this is from use connection and we also need to say const public key all right public key oops not the Capital One we need the lowercase one and set this equal to use wallets all right so this this one specifically I don't know why I'm putting semicolons it's because of rust but you just use wallet Hook is going to get us publicly and if I were to console log it uh it should tell me the public key.2 string all right let's see what this is all right anytime you want to see what this all means I just console log it that's how I usually go about it and see if we can see it from here oh what can I have any properties from now okay so I didn't like that let's just try without the two string first [Music] no okay yeah so it's not right now so you can't tell no to string but if I connect now [Music] I'll enter my password of course should have a wallet now okay that was weird I'm just fresh a couple times but uh I had to log into my wallet and we're good to go anyways as I was saying uh back to blog.js we console log the public key inspect element let's see if it's no there we go right so notice how it's not null anymore it's an actual public key but if I were to do that to string now there you go CVR right CVR right so that tells me that this public key right this usable hook always knows what while it's connected and it'll tell me the public key of that wallet connected when I say public key okay connection is our connection whether that's devnet or n or quick note and uh while we're using it's an anchor wallet so we're going to be using this for something in just a second next we can say const program right is equal to use and we don't have this hook but we need to get use memo it's going to say uh I'm actually going to form it like this because you might need a couple different things from react so let's do comma and say use memo okay so program use memo takes in an empty function cool and what we want to do with this is if anchor wallet exists right we want to say that the provider is equal to new anchor dot anchor provider all right we have to pass in um the connection right are we set up up here we need to pass in the anchor wallet we need to pass in anchor itself and you can say anchor dot anchor provider dot default options you don't need to fully understand this just yet you just need to set it up cool so that's our provider right we want to return from this uh new anchor dot program right which will have our IDL our program key and our provider that we just set up cool and we're going to run this uh when the connection changes or for whatever reason the anchor wallet changes okay so when I say program when I console log this it should give me something console up program here and see if we can there we go so we got our actual program so if you open this up we can see all the accounts right we can see the instructions all right this program has create post the net user all right what accounts does this program have has a post account and a user account so when I say program dot account right look at that we see all the accounts associated with it so that's how you get the program I thought it was all the setup for this when you say when I say lowercase program I mean the program and all its information you with me cool all right so we got the program the next thing I want to do is set up a use effect right so I don't believe I have a use effect hook set up yet so let's import use effect it's not like that cool and if you don't know what use effect is essentially it's a react hook right that's gonna set up things when our component uh first loads when that component updates when that component gets removed so basically what do you want to do when your component or your app loads all right so when what I want to do is set an empty function here and let's just say uh cons start let's make a function I'll make this asynchronous because we're gonna need to do that later let's say I wanna whenever my app loads we have to run the start function and say uh starting pack and fetching data right that's what our start function is doing I can say uh start this and then we can put an empty right here because this is going to make it only run when it first loads once cool so what we should see starting app and fetching data all right so that's essentially what we're doing here right I'm setting up my app so what do we want this start function to do really all right it's is to check if there is a user right if there is a user get or fetch posts if no user what do we want to do all right set state to false and say to false right if no user sets date to false and we need a button and need a button to emit use all right we don't have to set up the button in here but we just need to check if there's a user that's what this is going to do if this user got all the posts if there's no user just keep the state as false so that's what I want to do to start you with me cool so uh how do we get started with this then right well the first thing I want to do is if if there's a program right because uh if this if this doesn't exist there's no point right we can't get the accounts right you saw me do program.account so we need to make sure this exists and we also when I say and both things have to be true so we also need a public key so what I'm setting up here is a check that says hey if there is a program and if my wallet is connected right it's essentially what this check is doing then we can write that logic here oops which is check if there's a user all right so how do we check if there's a user let's set up a try catch block okay cool so we're gonna try if something works if it doesn't if we tried a promise and if that promise doesn't work right it's going to catch it and it's gonna console.log the error okay so what do we want to try well we want to try to see if there's a user check if there is a user account all right so let's do all this the way I like to write this is think about what do we know and you do this with every single coding problem this is Problem Solver here check if there's a user account I go back to my Solana playground go to my testing with this current program that we're all using in my front end now is there a user account no there is not I fetched it there's no user account is there a user account with this wall address that I made no hasn't been made all right so what do we know that there is no user right but we can check if there's a user right by um checking if it exists right on the blockchain how do we do that well let me show you it's going to involve this find program address so we're going to find if that address exists and if it has information we need okay check if the account exists we need five program address so to do so we can say oh wait uh find program address sync right and the cool thing is that you do is put seeds here right so basically if I want to find a user account right I just need to get the seeds of it right and what seeds does a user account take so I use this as my cheats as my guide it takes in a user seed or a string of user and that Authority right so check so how do I get this string and how do I get this my Authority or my check if there's a user with my public key all right so this is the fun part let's see if we can put it together so what we need to do is go into here make sure this is an array right and one of the first seeds is utf-8 dot encode all right this is the uh import from here utf-8 dot encode the string user that's like me going in the test and writing user all right how many seats does a user account need two second one is my wallet address think back what did I say holds my wallet address aha public key yes but we need it in a format that the seeds like right so we need to use a built-in method here called to buffer amazing cool and uh after you put the seeds it does take in a program ID so we can get this by saying program right this is the all the informational program dot program ID okay so this is gonna basically it's async right which lets us do in weight so basically weight for this function to run and when it's done you can do the next thing right another thing you want to do here is do some destructuring because this will give back an array and from that array right we want to get a variable I'm going to call that variable user PDA right this would get us the address right but we need to get take that address and fetch the account with that address get the information at this PDA all right so how do we do that well the next thing we need to do after waiting for that is await program all right we're getting information over program dot account right so what accounts do we have user account right Dot and this is a built-in method I don't expect you to know this one but you can see fetch fetch fetch fetch fetch right fetch user PDA basically get me all the user accounts with this address and how many should that be it should be one right cool so we want to set this to a variable right because I don't want to say this every time I want to do that const use it so let's say there is no user here right we can just say console log instead of the error all right we'll say no user so it's easier to read that's the only reason I'm doing this if there is a user though right then we can get the posts right but at the moment we know there's no user so let's see what do you think is going to run this console log no user or this uh this fetching user no user right so we have no user okay so if we have no user then it should just be blank right okay so now the first part of our use effect is done right and we can now change this data right we don't need the static user anymore all right let's make a state all right so let's go up here let's say use State comma and then we can write that all within the provider we can say const user or actually make it like this const use it set user is equal to use State and the initial state of a user um it should be like an empty object okay and I know to see this Google because it's already user here so let's erase that and this will still work because this is called user and this user right here is still here okay cool so let's see what happens now now we don't have an image or a name right and if you were to write down this logic right if there's no user we should be able to create one so that means we need a button here to initialize user okay keep that in mind and how do we keep track if something's initialized well what we can do is make another state we can say const initialized is an inset initialized right that's equal to use State as well and the default state for initialize is false okay cool so let's work with this logic okay so at this point uh in my code should the user be initialized should it be true no is it true yet no is it true yet no if it's here right this should still be false and you don't have to write this unnecessary but let's just put it here for safety set initialized is false when should it be true well it should be true if there's a user or if this exists right technically uh this should be empty yep doesn't break still so it's empty so if there is a user from here and it didn't go to the catch right then we can set initialized right to true you with me so far cool all right so now let's make a button that shows up when initialized is false it should say initialize user all right and then if it's true create a post right you'll only create a post if there's a user so which buttons do we have we have create post but we don't have initialize a user so how do we get that let's refer back to our drawing we need to go to the dashboard that's where that button lives you with me cool all right so we're going to the dashboard let's make a new button so basically there's something called conditional rendering here if we're connected right show me the create post button if we're not connected we see that connect button right I showed this way back at the beginning of the video okay what I want to happen next is a conditional rendering for this right so basically if there's no uh let's do it like this all right so to start conditional rendering you need to make put this in a jsx right put this in color brackets I mean and we'll take everything in here so we can say mix this out boom so I just erased that for a second and yeah we could put that there cool so let's just say initialized is our condition if initialized is true right we can load this this colon right here is if it's false right so if it's true we want to show the image and if it's false we need a button here I'm going to copy this uh button here for connecting let's do the let's just copy this button and let's go here paste uh on click essential model true that's fine but we want to say initialize user okay so that means we can take this and put it up here cool so basically I move the image out of there hold on so basically I move the image out of the condition right so if initialize is true create post if initialize is false initialize user and right now it doesn't actually initialize the user but let's see if it works oh it's going to tell me initialize is false so we haven't brought it in yet but let's make a static version let's say initialize right here initialized is true so which one should we see if it's true you see creates post what if it's false we see initialize users that's good right so now we don't need the static one we can get the dynamic one all right so how do we bring the initialize to our dashboard you can just say initialized right here oh don't forget the comma and go to your dashboard go to the use blog and say initialized so now we'll see initialize the user and it's not going to work because I didn't make the function for it okay cool awesome so this is basically conditional rendering inside conditional rendering right awesome so this will pop up this will be filled once we fetch the user and we initialized it okay so all right so we set up our use effect but it's not done right we haven't got all the posts yet right but I'm gonna just stop that because we should make the rest of the logic of initializing a user right that shouldn't be in our start function it can be right you can't make it like uh right when you load the app you can say Hey you have to make a user sign up all right but let's give our users a little bit more choice right and we kind of set it up so that when I click initialize user that's when we run this init user function right so let's learn how to make that function on the front end okay so underneath my use effect right we can say const init user right this is not different from the front end the Solana smart contract function this is a front-end function I'll show you the part where we use the salon code Okay cool so make a standard function like so make it asynchronous and again I have my standard checks here all right I can't uh it's kind of like over engineering but I shouldn't be able to initialize a user if there's no program and my wallet isn't connected you won't even see the button if the wall is not connected but again just an extra check cool so if there's a program if there's public key let's get to the logic we can set up a try catch [Applause] okay because we're dealing with promises here okay and a console.log pair Perfect all right so when we initialize a user what do we want to try well we want to try calling the Solana smart contract function all right so how do we do that okay so the first thing that we're going to need is all the parameters right so what are the parameters if you want us on a playground go to init user the first thing it's going to need it's a name and an author an author a avatar and then we need the account so let's deal with name and Avatar first okay so to get name and Avatar we can just say const name is equal to get random name and where the hell did this function come from I'm importing it from a folder right so what's function do it gets us around it returns a random name I'm storing it in this variable okay let's go to Avatar const Avatar is equal to get Avatar URL it's going to get me a random Avatar cool so those are our two parameters right well now we have the arguments we need our accounts now all right so we need a user account and an authority and again when we were testing right this is where all the understanding comes in this is that user account exist yet it does not so we need to get it from the seat right so essentially we're going to do the same thing here we can actually copy and paste this whole thing this constant user PDA thing it's the same thing we need to find if there is an address there if there's not we'll use that address that's the goal right so the first time where you're writing this line we're checking if it's there the second time where you like this time we're using it to put information here and run our function okay so we're going to use our PDA like so and then we can say oh wait program all right so remember what is program it is the variable that holds all the information about my program right how do we call the instructions or the functions within that program you say dot methods right and again we can chain this by saying dot within that method so you got to say what methods you want to use well I want to be knit a user okay only init user we need to pass in the actual arguments so if you remember its name Avatar right and then another comma here actually I need to come here what you can do is uh after this line at the end of it hit enter again and do dot accounts the starter counts this is the context right the context that you're going to pass in so I'm going to put curly brackets there and let's write what we need we need a user account and Authority so you need to write that exactly and say user account and then you want to say Authority cool but what is the user account do we have the PDA like are we using our seeds we do we did it right here and we store it in this variable so we can say the user account is user PDA all right this this part right here or this part right here specifically is the same as me doing from seed user and then doing Pub Key like so all right generate this three I UL that's basically what user PDA is and I'm putting it in as user account for Authority it's actually pretty simple you can say public key and that's it because it's already a public key and last but not least System Program uh make sure it's lowercase with the capital p and you can just write System Program dot program ID right and we're getting this from our import System Program right here Solano web 3.

[02:02:23]cool so we did it we passed in all the accounts right and uh last but not least though last chained method is dot RPC if there's a user are we initialized now yes so we can use our U State here say set initialized to True which will then in turn um update our react app so that this initial is true we usually create posts instead of initialize users so it's all coming together I hope it's making sense the thing I like to do is make another state and say const uh Trend section pending all right we need a state for this it's basically a loading State set transaction pending okay and default is false right same reason we use this it's another flag right basically uh when I knit a user we should set transaction pending to True right and when it's all done after this cap you can actually add a finally and say set transaction pending to false right it's done loading okay [Music] and while we're at it we can set that up in our use effect as well you can say uh oh I already said it oh I put it in our use effect well that's perfect we need to do that anyways we also want to do it here uh try set transaction pending true and and add a finally to our net user one set transaction pending false cool all right I think that's it yep I mean that user and now let's bring it out of our context by doing this go to our dashboard okay we're at a dashboard and now we can get it from our use blog knit user and where do we want to use this function well that should be pretty obvious we should use it here when I say init user I don't have to pass anything in because it gets passed in inside this function cool so now let's save now let's hope it all works so again for good luck let's restart the process we're connected there is no user because our use effect so it's building initialize user I click this and not illegal arguments undefined [Music] all right let's take a look on click we want to init a user so let's try let's make it empty first let's see if this just runs so save and let's just say it's a log initializing user this is how I troubleshoot stuff initialize and use it okay cool so this function is running for sure what point does it doesn't like so let's take out this [Music] console log the use our PDA [Music] legal arguments undefined so that tells me that there's something wrong with this right here okay let's take a look okay so I was doing some troubleshooting and I realized that it's nothing to do with this this is perfectly fine my issue was that before this didn't have anything right when we generate a random name I want to get an avatar based on that name so once we put name here you can see all of my testing right we could do initialize user and Bam we actually see on a transaction right but this doesn't enough to make sure that it works oh we have to go to console right and you know what let's refresh it and let's uh click approve actually let's cancel this first and let's click initialize user all right this is a good sign but it doesn't mean it's done is it approve awesome okay I wasn't sure if that worked but let's see if there's a user account generated here there was stoic Pastor that is amazing so it did work right I'm not sure why it's not working here yet oh I know why all right so it did work but the reason it didn't show up is because our use effect right so now we do have a user all right so if I correct it's correct here this should say great post for some reason it's not unless it's still static let's see dashboard initialized initialized in our blog set initialized initialize [Music] Ed well I spelled that wrong completely put the a in the wrong spot that's what's going on here oh yeah because my use effect I know why Okay cool so the reason why we don't see A change is because my use effect is only running once why is it only running once because you can make your use effect only around one time when you load the app that's it right if I put this what we call a dependency module there right let's say you don't want it to run once you want to run once when you first load but again when program changes when the public key changes or when there's a transaction pending so it said save now see cool and now this isn't actually running and see a transaction pending to true if there's a user set initialized ah there we go cool and then I had to make the spelling correct so there if this if this is true if we see create post that means there is a user right but there's no user yet because we need to set that right so again uh user is empty but we can set the user here it's a set User it's equal to user you can hit save and Bam there it is stoic pasture right so we were successfully able to create a user and now we need to create the post so the next thing I want to do is set up the create post functionality right so there's a couple things that we need to do to set that up and one of them we'll need to look at our dashboard and look at our static data right there's something called a show model here that when I create when I click create posts this flag should turn to True right so we have static uh data here let's make them real so to make them real I'm going to go here say const uh show modal and set show modal and say equals uh use State and we'll set that equal to false first right from here we can just bring it in show model set show model right and once that's here we can delete this don't save yet though all right and we want to be able to bring it from here so we can say uh show model set show mode perfect so now we shouldn't see any errors if I click this boom look at that all right we can see it perfectly like so great post boom X all right again this was the modal itself is given to you we just set up the functionality right what I want to happen is for us to write something and I hit post all right if I click post it doesn't actually make a post on Solana all right nothing we want to set up the same way we initialize user let's set up how to create a post now Okay so same thing as before we're going to scroll down to our blog.jsx and underneath init user we can go ahead and make another function so just like before we'll give it the same name create post equals async okay uh we'll do our standard check here again optional and oops and public key right there's multiple ways to do one thing you'll realize that as you code more and more so if you have a better way that's more efficient than mine please share it down below in the comments and I'm happy to hear it so cool if there is a program we can set transaction pending to True right for our state and then we can do a try catch at any point our try fails it will catch that error and we can console log better cool so what do we want to try we want to try calling our Solana function right so let's review what do we need well if I want to create a post right for my arguments I'm going to need a title and content and I'm also going to need post account user account Authority and System Program so let's talk about the arguments first so unlike init user where we got the arguments from within the front end function right here we're actually going to pass them straight up so we can just say title oops title and content here okay now to get the arguments now I mean the accounts let's open that up does user account exist yes it does we're going to be using this user account right the user account with my wallet address CVR okay so that exists does the Post account exist not yet right we want to write to that address does Authority exist yes it does all right so how do I get the user right so I'm copy and pasting this but it's literally the same thing right you can put this right here right so This Is Us fetching the user all right find programmers are just sync get that user right and it will exist and the ad account will exist at that address right because we made it before the only time we call this function is if it does exist right the next thing that we need which I won't copy paste is the post PDA and guess what to get the post PDA just like in our test we're going to get it from our seed and what seed does it need post seed or authority and the losers last post ID okay so do we have all those information let's find out so we say find program address sync all right here comma program dot program ID I believe that's what we do and now for the seeds all right we can copy this utf-8 code but this time instead of user our string is post all right for our Authority we can just say public key so it should match and we say to buffer to get it in a format that it likes and now how do we get the last ID if we were to do this with uh on Solana playground we say post we say Pub key right we just put in our Pub Key and then we get u8 we need to get a number here and based on this zero it should generate three t two this is the address that we're gonna write to it's always going to be the same it's predictable in Solana right it's not random this address okay but how do we get the users last ID well do we have access to the users without asking myself [Music] and we actually do right what do we have access to user in this check right here right if there's a user right if I were to console log this and console.log user user stuff okay that's console log it so you know what I mean a lot of understanding for me was taking Solana code that everyone wrote and console logging in oops this is running like crazy let's make this run once for now okay cool it's running way too many times uh program cool object user stuff Okay cool so in our user State we have access it's last post ID right and we can separate that right into another state so we could do that by saying over here const uh last post ID I think we'll call it last post ID comma set last post ID and to be honest we won't need this Set uh last post ID because I don't believe we're going to set it to anything else because in Solana we are incrementing it we're not doing anything on the front end with it so I'll actually do well actually no we will need to set last post ID because underneath set user right here we can say set last post ID to user dot last post ID and that's the only time we'll set that state again okay cool all right so we got it last post any and we let's see if I put transaction pending here with a freak out oh so transaction not pending oh no it still doesn't like that [Music] nope okay so we can't use this just yet uh it might be because we're using it here [Music] we go yep awesome so I'll put public key back and now it's not going to run their use effect too many times right because it makes sense if I put set transaction pending here it's going to run way too many times the set initialized there spelled that right cool okay cool transaction pending it's all good all right no more issues awesome all right so I got that settled um let's go back to our code so we have our last ID now so anytime I say last post ID it will be the user's last post so it should be zero okay so with that information we need to add another seed okay so how do we add this next seed well there's a lot of uh things that we need to do to format it right we can write last post ID but it needs to be formatted we can't just write zero here it should be an unsigned integer eight U eight right so how do we make this a you wait um to do that I'll just erase this for now right I'm just going to say uh you int right you're gonna see eight array Dot from parentheses and put in a right here last post ID and that's how you're going to u8 from this ID Okay cool so we have user PDA the post PDA right we have title and content and now we have to actually call the program method so we can say await program right dot methods dot create post okay it takes in two things title content right which we're getting from when we pass it then we can say dot counts then what accounts does this program need if you're unsure at all we can go ahead and look at our Solana playground when you post account user account and Authority so let's go ahead and do that I can say post account we need a user account we need a Authority and we need a system capital P program Okay cool so do we have what we should put for each account we do Post PDA remember this is checking if it exists if it doesn't exist right that's the address we're making that the address that we write the account to for user account it's going to check if this exists and if there's an account there it does so we're going to say user PDA Authority right so with the authority we can say a public key and we don't need to format that resistant program we can say System Program dot program ID comma dot oops dot RPC cool right and we also want to close that modal so we can say set show modal false okay and then we add our finally here you can say sets transaction pending to false as well awesome okay cool let's pass down create post and go to dashboard we can erase static create posts and now we can just get it from here get it from use blog create post and where do we want to put this create post well let's find it create posts right here on submit right so I don't have to rewrite anything this is the same name luckily it's using our States from our title and content and putting it there so in theory if I create post it should work so let's try it so welcome to my blog this is my first post that's the description we hit post let's go we got a transaction right so now we approve and if this closes it should work it closed and we don't see anything here because we didn't fetch those posts yet all right well we can test it though if we fetch this there you go it exists right this is my first post welcome to my blog so there we go we were able to create a post which is amazing let's freaking go guys so we gotta create posts I'm excited last but not least let's figure out how to fetch post all right so you want to learn how to fetch all the posts well what you could do is go ahead and to go into your code and you're already One Step there right so remember how we did program dot account dot user account right I went ahead and console logged program right if I can't select program by itself what is that guys program by itself is literally all the information about your program I can get the ID by doing that program ID if I do a DOT account let's take a look at what we see all right you might know this already but if I do dot account you should see if I refresh this oops let's make sure this is running uh yarn Dev okay make sure this is running and there you go cool you see this object here and you see all the accounts that are associated right with this program which is user and just posts so which one do we want out of these well I want the post all right so if I say dot post account let's see where we go from here all right this is how I figured out uh what everything does it's a lot of content logging and testing cool so as you can see when I do that post account this is all the information about it right here and another thing that we'll need is the method so let's see if we can find any here provider coder prototype object cool awesome so you can see right you can say fetch multiple fetch right there's also unsubscribe subscribe but there's also an all right this will fetch all the accounts that are posts all right even if you yourself didn't make it right for our scope of our project there's only going to be uh one user associated with it it's kind of how we made it but if you were going to get multiple users and want their unique post right you can filter it by their public key all right but again because of the scope we don't have to do that but this time so let's set it up okay so if this is the case then what we want to do here is say const post accounts or make a variable it's equal to a weight program dot account dot post count all right so this should give us all of the posts right and of course if we want to save this we're going to need to we're going to need to put it in a variable we'll put in a state really rather let's fix this and let's make a state for it so to make a state you guys know how to do this by now it should be post posts set posts and set this equal to use State and the default State can be an empty array so what do we do here we say set posts is equal to post accounts and if you want we can console log the post account so how many post accounts should we have guys all right if you've been paying attention all right as you should be should have one post cool so it'll take a second to load let's see console array one right but is it just the object itself take a look at this right it's an object with a public key with another property or a count but if I open it welcome to my blog this is my first post blah blah blah and there we go all right so all we need to do now is take posts right because that's what's holding all these posts and bringing it out to the block so you can go below here we can say posts right we can go to the dashboard and let's bring it in here so I'm gonna go to the use blog hook and say posts right and you can see post is declared over here it's our static data and actually erase this and now we don't have any more static data so if I save this look at that we got our post right and this makes sense we only should see one so if I do this all right and let's let's hear this is my first post welcome to my blog right so our second page this is our router right if you go back to our model here this is full posts when I click on this it loads to the full post page right and loads said item all right so let's put this in action now let's go back to the code just double check our create post function oh yeah that's in blog so I'm gonna create post awesome so transaction so let's see if it loads let's create a post uh this is how to build a block all right this Vlog uses the salon chain all right let's hit post there's our transaction we hit approve it loads and there it is this blog uses the Solana chain right and if you want to put even go even more in depth with this and you want like a date with each post right you can get the date from the front end right and to your user account or your post account you can add a date feature right so if you want right there's another video we have Airbnb on Solana this should help you out with that so with that said all right we're done with the app guys this is it because all you have to do to set up write a smart contract on chain to make an account to creating a post and now you have a Blog so I hope this helps you guys all right let me know down below if this helped and I'll see you guys in the next video peace