**Building a User Profile System with Smart Contracts**

Building a user profile system is a complex task that involves several steps, from designing the frontend to deploying smart contracts on the blockchain. In this article, we will walk through the process of creating a user profile system using smart contracts.

**Step 1: Designing the Frontend**

The first step in building a user profile system is to design the frontend. This involves creating a user interface that allows users to sign up and create profiles. The frontend should also include features such as login functionality, profile editing, and profile viewing. In this example, we will use HTML, CSS, and JavaScript to create a basic frontend.

**Step 2: Setting Up the State**

Before we can deploy our smart contract, we need to set up some state variables that will store user data. These variables include `initialized`, `account`, and `pending`. The `initialized` variable is used to track whether the user profile has been initialized or not. The `account` variable stores the user's account address, and the `pending` variable is used to track whether a transaction is pending.

**Step 3: Deploying the Smart Contract**

Once we have designed our frontend and set up our state variables, it's time to deploy our smart contract. In this example, we will use Remix, a popular IDE for building blockchain applications. We will create a new project and add our smart contract code to it.

**Step 4: Creating the Smart Contract**

Our smart contract is responsible for creating and managing user profiles. It takes in three parameters: `name`, `email`, and `password`. The contract checks whether a user with this email address already exists, and if so, returns an error message. Otherwise, it creates a new profile and stores it on the blockchain.

**Step 5: Deploying the Contract**

Once we have written our smart contract code, we need to deploy it on the blockchain. This involves creating a deployment configuration file and uploading it to the network.

**Step 6: Interacting with the Smart Contract**

Now that our smart contract is deployed, we can interact with it using our frontend application. We will create an `initialize` function that calls our smart contract's `createProfile` function when a user signs up.

**The `initialize` Function**

The `initialize` function is called when a user signs up for the first time. It takes in three parameters: `name`, `email`, and `password`. The function checks whether a user with this email address already exists, and if so, returns an error message. Otherwise, it creates a new profile and stores it on the blockchain.

```javascript

function initialize(name, email, password) {

const account = web3.eth.accounts.create(email, password);

// Check if user already exists

UserContract.instance.methods.getUser(account.address).call().then((result) => {

if (result) {

alert("User already exists");

return;

}

// Create new profile

UserContract.instance.methods.createProfile(name, email, account.address).send();

});

}

```

**The `createProfile` Function**

The `createProfile` function is called when a user signs up for the first time. It takes in three parameters: `name`, `email`, and `address`. The function creates a new profile and stores it on the blockchain.

```javascript

function createProfile(name, email, address) {

UserContract.instance.methods.addUser(name, email, address).send();

}

```

**Testing the Smart Contract**

Once we have deployed our smart contract, we can test it using Remix's testing tools. We will create a new test file and use the `web3` library to interact with our smart contract.

```javascript

const UserContract = require('./UserContract');

describe('UserContract', () => {

it('should create a new profile', async () => {

const account = web3.eth.accounts.create('test@example.com', 'password');

await UserContract.methods.createUser(account.address).send();

expect(UserContract.methods.getUser(account.address).call()).to.equal(true);

});

});

```

**Conclusion**

Building a user profile system with smart contracts is a complex task that involves several steps, from designing the frontend to deploying and testing the contract. In this article, we have walked through the process of creating a user profile system using Remix and Solidity. We have also discussed some common challenges and edge cases that developers may encounter when building a user profile system with smart contracts.

**The Frontend**

The frontend is an essential part of any web application. It provides the user interface and allows users to interact with the application. In this article, we will focus on creating a user profile system using HTML, CSS, and JavaScript.

```html

User Profile System

Name:

Email:

Password:

Sign Up

```

**The Backend**

The backend is responsible for handling the logic of the application. It receives input from the frontend, processes it, and returns output to the user.

```javascript

// script.js

const UserContract = require('./UserContract');

document.getElementById('sign-up-button').addEventListener('click', async () => {

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const password = document.getElementById('password').value;

try {

const account = await web3.eth.accounts.create(email, password);

UserContract.methods.createUser(account.address).send();

alert('User created successfully!');

} catch (error) {

alert('Error creating user: ' + error.message);

}

});

```

**The Smart Contract**

The smart contract is the backbone of our application. It stores data on the blockchain and provides a decentralized way to interact with the application.

```solidity

// UserContract.sol

pragma solidity ^0.8.0;

contract UserContract {

mapping (address => string) public users;

function createUser(string memory name, string memory email) public returns (bool) {

require(bytes(users[email]).length == 0, "User already exists");

users[email] = name;

return true;

}

function getUser(address account) public view returns (bool) {

return bytes(users[account.toString()]).length > 0;

}

}

```

**Conclusion**

In this article, we have walked through the process of creating a user profile system using Remix and Solidity. We have discussed some common challenges and edge cases that developers may encounter when building a user profile system with smart contracts.

"WEBVTTKind: captionsLanguage: enAirbnb on salana let me know if this sounds like you you're a developer who wants to get into web 3 and you have no idea where to start well I hear you guys and I'm on this coding Journey with you and today I have the perfect build for you to get started today we'll be making Airbnb web 3.0 dap with nextjs on the salana blockchain I'll walk you through how you can create your very own smart contract on the salon chain using anchor which is just a framework of rust we'll then show you how you can take that data and store it on chain think of it as a database that is fully decentralized we'll use Quick node as our RPC node provider to access the blockchain I'll then show you guys Salon playground which you can use to create deploy and more importantly test your functions of your smart contract so that you can understand how it all works we'll use Phantom wallet to authenticate our users and sign them in and we'll use Salon Explorer to verify that they are 100% real now before we get started make sure you use our CLI tool that we'll provide you so you get the fully built front end so we can focus on the salana blockchain code so with that said I'll see you guys in the demo and let's get started all right so let's get started so the first thing you should do is open up that terminal and type the command npx clever programmer at latest this is our CLI tool that's going to give you all the files that you need so that we can have the same files and start at the same place and while it's initializing it's going to help us get signed up for quick node because for this app we need an RPC node provider to connect us directly to the blockchain so while it's initializing we can do that so let's type in that command type in your email address then your name and then select the project you want to initialize and of course it's the salana Airbnb awesome so there we go look at that so it takes you directly to this page and if you don't have an account already sign in so you can make use of quicknotes free tier so I'm just going to sign in and I'll come back once we get to the same landing page perfect so now that you confirmed your account The Next Step which is nice and quick to get started is Click create an endpoint and here you'll see all the different chains you'll see ethereum you'll see uh polygon you'll also see avalanche on here as well but we're going to be using salana so let's click salana and see the three networks there are three networks main net uses your real Soul do this if you're sure you want to develop on there for us and learning purposes we'll be using the devet okay so let's hit continue and then click create endpoint and voila it's done that's all you have to do to get started all you need to do next is take this HTTP provider and hit copy and we'll save it for later so by the time you finish sigining up you should have vs code open right it opens it up automatically for you guys with our CLI tool so we can do what we can do is hit control contr or command J CD to the front end folder and hit yarn Dev once you do that you can also press control click and there we go awesome so you can see this is the static version of the Airbnb it's different from the demo right because there's no wallet connection as you see here and there there's just static data right here how do I know it's static well let me show you why it's static cuz if I were to delete this and then refresh it's back right because it's static data that is just set up right it's not actually being saved that was deleted right what's what's the point of this L well our goal is to take this front end with static data and use the data that's stored on chain and learn about it okay and don't worry I'll break down the app with you guys because that is the main focus so I know you haven't seen what the code looks like and a lot of this is set up for you already so if you're a beginner watch this part and if you're a little bit more advanced feel free to skip ahead when I start coding okay so welcome my beginners let's head over to this fancy whiteboard and let's figure out what we want to do with this app okay so one thing you'll notice is it's not connected with Phantom like I mentioned before so that will be our first step so let's write that down as pseudo code okay so our first step together guys it's going to be set up Phantom connction next right Phantom is a wallet which holds all your soul that we can use to authenticate the users that log in okay what's the next thing we want to do well let's think about the app right this is a essentially a crud app create read update delete right so we want to be able to add a listing right don't worry about how this works just yet just know that we want a function that will add a listing on the salon chain right cuz this is just going to add it to our local environment and not anywhere else okay so let's write that here create salana program and I'm going to use the words contract and program interchangeably just know that's the same thing okay so create Sal of program and for the functions it should be add listing right we also want to and let me say create listing so it's more sense create listing we want to uh fetch listing right read listings right fetch listings and what do I mean by fetch well with fetch if you look this is essentially an array of objects that I'm mapping through and displaying right what we want to do instead is fetch the accounts from salana right and then map through them fetch listings right from there we want to update listings right what do I mean by update if you go back to the demo right we can edit this and change every aspect of it we should still be able to do that on salana on chain okay from there we can also delete listings right since we're going to be creating accounts on chain we can also close the account and that will be considered deleting right cool so this is our goals so let's talk about how this app works and usually when I talk about how an app works I think about the tree or the parent child relationship between components okay so what we can do is let's just bring it over here and bring the code over here okay we're going to share some real estate right so if you open up front end right the first thing you'll notice is on the folder pages that there is app right and maybe we could just make this bigger for now first thing that you'll notice is that there's an app.js and it holds all of this right it has a head which the title and then this component right this component right here right is actually the index.js right so what do I mean by this I mean that there is a parent called app right there is a app all right and inside of app it has a child in here it says component but that is the index okay sorry for the terrible drawing but I'll make it look nice in a second right so that's the index okay so how do I see what's inside of the index right how do I see what's inside of this component well I could just click the index outs here so within the index there's a bunch of different code here right it might be overwhelming but let's just look at what's important right there is components within the index component right so that means the index has children so let's go through together what children does it have so let's clear out all of this and give me a second to organize my files amazing Okay cool so we got our app right here and let's just build out that tree here so we all understand what I mean okay so what do we know we know that we have an app right here app we also know that it has a child called index index okay so now let's go to it together and figure out what is the children of Index right so a child of the index component would be another set of components right so let's see if you guys can see the first component so these are functions all right scrolling right is this a component right not necessarily right it has something within it called Airbnb clone that's the title okay but is this a component yes it is it is a component called what header awesome you got it so if it's a component called header oops let's undo that I can going draw a line right here and say hey index has a component or a child component called header right and you might ask what does header header do right so in order to understand what header does right let's look at the app right this is what it looks like look what happens if I comment out that header boom right what do we lose we lost we lost that little area right here that held our Phantom connection right then that's the header of a normal app so if we common out the header component we lose the header make sense cool awesome okay so we got that out of the way figured that out next is the filter menu right what's the filter menu is that a component yes yes sir so that is a component so what we'll do right here we'll write filter filter menu nice okay this isn't too bad right guys so we have the filter menu and at the moment I'll tell you the filter menu isn't that important for what we're going to do but it's good to note down awesome okay the next thing that's a component is listings oops listings listings all right and I'll move a little bit faster this is all models right what do you think this ad listing model means well if I click add listing this component right here is the add listing model right if I click uh this pencil icon from the listing I get the edit listing model and if I click this heart icon I get the reserve listing model right they all exist in the index right but when does it show it only shows right when this is clicked right so there's a function that's toggling this on and on on and off and I keep the models here so what I'll do to simplify this is there's a picture there's a bunch of children right but I'll just label it as one all the models right so I'll tell you right now which ones are the important ones right the important ones which I'll mark in blue is going to be the header right the header the listings and the all the models right that's where the functionality is going to live right and a good question to ask is do any of these components have children well if you look let's see if oops let's see if add listing model has children so let's find that go to components go to listing go to add listing model if you look they have no no real components just a transition right which is not that important for you to learn at the moment but what you do need to know is that the listings component right this one right here that has a child right because for every Airbnb listing we want to map through it and create a listing item right so if I were to draw this relationship right there could be multiple right and actually this will be multiple too multiple multiple listing items right these are all these squares are listing items right so if I ask you guys on Airbnb right how many listing items do you see right I tell you one 2 3 four okay so that is the tree of our app right so what we want to do for step one oops for Step One is set up a phantom wallet connection right so where do you think I'll need to focus on to do that right if I'm going to make a phantom wall connection do do I need to look at the filter menu no do I need to look at the listings maybe right but if I want to ensure that I'm connected throughout my whole app right I should look right here right Phantom wallet connection should go right here okay so with that in mind let's minimize this and if we go to the pages and then go to the app this is where we want to set up that wallet provider right that wallet connection provider okay but at the moment we don't have a wallet connection provider so let's go ahead and set that up so to give our app some context of what a wallet connection provider is what I'm going to do what we going to do is create a new folder and let's call it context okay and once we have a new folder called context within the context folder I'm going to make a new file and I'm going to call it wallet connection provider. JS this is what you're going to need to do to set up that wallet connection right and once you're there let's import a couple things we're going to say import connection oops not connection connection Provider from salana wallet adapter react so I press tab so that's automatically imported oops how's this guys can you see that cool so after that you can do wallet provider we got connection provider we got wallet provider and then let's import wallet model provider as well and this is going to come from the react UI Yep this one Sal salana wallet adapter react UI okay and then what wallet are we going to be using we're going to be using the Phantom wallet so I'm just going to say Phantom wallet adapter and this is from at salano while adapter wallets perfect okay and last thing we're going to do is let's import uh use memo okay cool all right so we did a lot of imports but we don't have the provider itself so let's set it up by saying const wallet wallet connection provider is equal to Boom all right so this is our provider which we will then bring back to our app right and wrap our entire index with that provider right if you don't understand what I mean just yet just bear with me so we have our wallet connection provider we will then need an end point right and another thing is in the parenthesis here let's add children it's going to take in children cool all right so inside a provider let's set up our end point so we's say const end point is equal to use memo right so this is a react hook and within this hook it's going to take in an empty or Anonymous function right and then you're going to do comma array all right the key thing about this endpoint is this is where we're going to write WR the URL of our endpoint and if you remember the keyword here endpoint right we're going to need you can put our quick node connection here so let's go back to here let's bring this up copy this or if you have it saved somewhere bring it back and then in quotes go ahead and paste that over here right and if you don't like how long it looks sometimes what I do is I'll take this cons connection is equal to this right and then you can just pass in connection right here okay that should work and let's just put some space between those awesome all right so that's our endpoint set up all right the next thing we want to do is say const wallets is equal to use memo again all right and then we we got to get the wallets that we want to use which in this case is just Phantom right so you can leave the parentheses blank in there and just write new we're going to create a new instance of phantom wallet adapter so we're making use of this right here okay and then you know to call this put parenthesis right here and then comma empty array okay so we got our endpoint set up we got the wallet set up and now we just want to put what do we want to do with this provider well we want to return parenthesis the connection provider okay and what do we want to do with the connection provider we say endpoint right is equal to end point right so where is this endpoint coming from we use you use memo to set up and get the connection right we're going to be doing something with wallets next okay so we set up the connection provider if you look at our Imports we still haven't used the wallet provider all right so let's use that next let's use a wallet provider okay and in here we're going to pass in a prop that's just going to be wallets is equal to wallets right just like this right exactly the same as this endpoint wallet goes here right another cool thing we could do is auto connect right if your Phantom wallet is already connected just autoc connected if you don't want to do that you want to make it you know manual you don't have to put this line right here cool awesome we also want to provide the model right so when you click on the connection you'll see like the list of wallets right this is the wallet modal provider let's go ahead and add that as well wallet modal provider okay and that is going to take in children all right so now what whatever we pass into the provider will be passed into the wallet modal provider as well and next which is last but not least make sure you do this so that it actually exports so it's going to export default the wallet connection provider right why do you do this we export it so that we can import it somewhere else and where do you want to import this connection provider if you remember should import it right here awesome cool so in terms import this is already set up kind of for you guys we need to do next is say const wallet connection provider is equal to Dynamic right which is coming from this input right here parentheses and then Anonymous function and you can say import parentheses quotes do do context right and why am I going into context because that's where the provider is okay and then in between these two parentheses you can put a comma here and then let's put the scope in with the two curly brackets and just write SSR FS Perfect all right that should be it now we're all the way back to that first thing I said we want to wrap our connection provider within the app itself right so what we could do is go in here right underneath head headit enter and type in wallet connection provider and put that component which is our index right in there amazing right so everything in this connection provider is set up from our context right here cool so we have that set up now oh look at this so look it already it's already autoc connecting and it's asking me to connect my Phantom wallet but if you look on our Airbnb we haven't set it up on the front end so the connection is working but not on the front end so what do we do well if you don't have Phantom are ready go ahead and type in Phantom uh Chrome extension all right and it should take you to this page right here make sure you add the extension so you can have the Phantom wallet right here okay awesome once that's done set up your account and you should have a wallet it should look like this and you're going to need some soul right this isn't real Soul so don't get too excited right when you're on devet you can do something called Soul faucet and get Soul or Salon tokens that you can use to test your app right so if you want your address right your wallet address click copy clipboard up here and then you want to paste it and for the airdrop I usually put two then you can hit devet and Bam all right we just got instantly two Soul tokens that we can use to play with and now instead of 10 I have 12 right so that's how you set up your salana that's how you get some soul right so let's work on the front end part of this so X out this x out this boom all right so if you want to set up the front end portion about this we need to work on the wallet connect button which is going to go right here what component does that live in right is it going to be on listings on Index right take a look at this where do you think it's going to be at okay cool if you said header let's go you got it right that's that makes sense it's like intuitive okay so if it's in the header let's see if we're right can ex this out let's see if for right and head over to the header whoops okay so if we go to our Index right we think it's in the header right and if we go to the header component let's find that button ah there it is okay see this user Circle icon this is it right here right if you're never sure about what you're doing go ahead and comment stuff in and out and that's how I do it to learn what app I'm us so if I com this out boom notice how it's gone right here right instead of this div we want to replace this with the Phantom or just the wallet connect button we get from salana all right so it's it's there then it's gone see it so what do we need to get this done well let's scroll up to the top of header for now and if you look right here we have the wallet multi button that's what we're going to be using for this we're also going to need something else now that I'm thinking about it we need to require at salana wallet adapter react ui/ styles.css right this is to get the styling of the react router not the react router sorry the salano wallet adapter okay so we're going to require that right keep this one in mind wallet multi button and let's scroll down what we're going to do next is let's set up the wallet multi button so the wallet multi button we're going to take that import and just say wallet multi button okay and I already have styling for this so we can just do class name is equal to Phantom button right and then uh there's also an icon that I have with it let me see if I have it still right okay cool so then we can do something like this start icon uh is equal to user Circle icon self close and the icon is going to have a style and the style is going to be height 32 width let's make that 32 as well and the color I have the safe you guys it's going to be #f or 1f 2937 that should be it and let's just test this out by saying span connect wallet okay let's just see what that looks like so far okay all right hey there it is you can see the connect wallet but the styling is a little off so let's fix that okay so in our span let's go ahead and give it a class name and for the class name we can do text small uh font medium medium text black okay let's see if this helps there you go that looks way better I can actually see it now um I think it's missing a little something actually I think that's fine for now so what we want to do next is let's click on the button in and look at that it all works the functionality we didn't have to do anything we just had to set it up right cool so if I click Phantom bam right I clicked on it I'm connected I know it doesn't look like I'm connected right but there's a way to test it okay so what we could do to prove it to you that I'm connected is head over back to this right here and I want to talk about something really quick so you're going to notice that I'm passing down something called connected here this is what we call props and react and assuming you know what props are where is this connected uh variable coming from right well if you don't know where it's coming from go to the parent right so who's the parent of header the if you know it from our ziteboard the parent of header is the index so let's go back to the index so back in the index you can see it right here I'm directly passing connected to that header Okay so what that means is what is connected right let's find out what that is so if I go contrl F Type in Connected boom boom boom boom Oh I saw it there we have something saying connected is equal to True right so if we are connected right I should see this connect wallet button change to something else I want it to actually just say my address so my address is like this 8 something okay so let's keep this static for now and then let's go back to header right so how do I set up that condition then if we're connected don't show me connect wallet show me something else right so let's do that real quick what we can do right here is turn this to uh a template leral by making this an object right and it's actually not a template leral just make put curly brackets around this right so what we want to do next is put this in quotes boom it still should be the same thing but now let's set up something called conditional rendering and say if we're connected right if connected is true which is it is question mark right we're going to show uh 8 T dot dot dot dot dot this is my address right a static version of my address and then put colon here and then quotes right so what did I do with this line let's do alt Z can you guys see that better cool so what did I do I put curly brackets around the the text and I say if connected is true show me my address if connected is not true show me connect wallet button so what happens when I hit save here boom right look at that oops you see it shows me my wallet connection right here right so my my wall address is at tkz right it's not the full address right it's just whatever static thing I wrote so let's go back to this I'm not sure what this is oh I think I opened up the SVG all right perfect cool so I I can literally make this anything I can say LOL right so now when I'm connected that's what it looks like if I hit disconnect and then we do something like this oh yeah connected is still true all right so even though I disconnected right it's still going to say LOL so let me just connect it real quick but if I change the connection to false right which we set up believe over here then it's back to connect wallet you see that cool so we need to make this Dynamic and we also want to change this SVG here here not this SVG sorry we also want to change this to our actual address and how do we do that well we have something called truncate all right truncate is essentially a function that's going to take my public key and make it to something more readable so if I do this to string oh there you go there you go so it's undefined right and I know it's undefined because what is public key right you can't do a public key of undefined and public key is something I'm passing down already but it's not it doesn't exist if I go to index I go to header there's no public key right there's not even a public key anywhere here right no results right so how do I make public key exist well that's where we can do something called use wallet all right so let's go over here we don't want this static connected right we want a dynamic one so we want to check the connection of our app right there is actually a hook that does that for us already so let's do this use wallet right and if you see we need to import use wallet from salana wall adapter react so again we don't have to write any logic right solono wallet adapter has the logic we just got to plug it in so say const and I'll separate this so it's easier say const object or curly braces right because this is deconstructing and then use wallet right so this is the hook what do we want from use wallet we can break it down by saying we want connected and public key right so what does connected do connected will let us know if we have a wallet connected or not so remember how we had true or false we don't need to write that anymore it will just automatically check if there's a wallet connected public key is our wallet address right so when we're connected we have access to our wallet address right so it's going to know it's 8 right so anytime you see public key that's going to be the public address of my wallet so now when I pass down connected it's not our false that variable it's from the hook another thing that we want to do since we're here is add that public key so we can say public key is equal to public key so now it shouldn't be undefined I hit save let's go right take a look at this guys that is our wallet address it should look different from you if you have a different address right so let's connect wallet boom we're connected there's our address we disconnect it's gone right and and it's dynamic because if I switch to wallet number two hit connect I got to log into wallet number two bam it's 4 a now there you go you have your Phantom connection and now you made it Dynamic to whatever user so essentially you user can log in to the app how's that amazing so we have our Phantom wallet connection set up so what's next so if you take a look at our plan you'll notice that the next thing we need to do is actually set up the salana program itself so if you want to get started doing that the cool part is we won't have to code on vs code for a while we can actually go to this website so let me make this bigger and let's go ahead and write beta. soul. pg. this is called salana playground right if you're coming from solidity if you heard of remix at all this is essentially the remix for salana what does that all mean it means right you can go into here and create a salana project you can build and deploy through here and you can test all your functions right so what we're going to do is we're going to create a new project right and we can call this uh Airbnb salana and another cool thing it's just new we can also it has seahorse support which means we can write python with salana and we might do a video about that soon so drop a comment below if you want to see us do a python video with salana that could be really fun so uh we're going to be using anchor so let's hit create and now we have this right here so what I'm going to do is make sure we build on this boom build successful yep yep cool so this is essentially the starter files for our project okay so what I'm going to do next is go to the files and I'm actually going to just delete everything CU I want to start us from bare bone scratch right we gave you a lot of the front end I'm going to give I'm not going to give you any of the anchor code right we're going to build from scratch together how does that sound good all right so if you're with me let's get started now before we get too excited writing salana code what we want to do first is we need to save the changes we made so far right we did a lot of phantom stuff so open up your vs code and if you did a get push right you'll notice that it says for me everything up to date but for you guys you're not going to have permission right so let's make our very own repo to save your changes right and I'll walk you guys through so go ahead and make a new t Tab and head over to github.com and there's multiple different ways of creating repositories use get Kraken or whatever thirdparty app you have I'm going to go ahead and click new repository right and for here we can say uh salana Airbnb right cool oh I already have one we can do Airbnb Salon there you go cool and then you can make this public or private but let's just not click anything else and click create repository if you do it that way you'll see right that GitHub tells you exactly how to create a new repository right but we're going to do something a little bit different than these steps right here cool so going back to your vs code right this is already a repo right this CLI starter branch is coming from another repo how do we make this your own well all you have to do is say get remote set URL or origin and then let's copy this link right here okay so I'm going to bring this back then let's paste that and let's hit enter boom right so from here we can say get status right and notice how it has the context cuz we added that and we can just do a get add Dot and if we do get status again now it's going to be green right the package Json is red because if you do a CD dot dot then do a get add let's check it out boom so now it's all green that's a good sign what we can do next is a git commit dasm initialized our own repo right you can put whatever comment I'm going hit that and if we do a get push right it's going to push to our new you repo if I refresh this bam there we go right so you can push to your own repo now without changing any of our files right and you can see over here that it's that David right who helped me work on the last app is still a contributor as well okay so now you can save your code and anytime you make a new change I encourage you to push those changes on GitHub okay so that's my quick GitHub lesson the reason why I did this guys cuz I want to show you guys that we can deploy our app and make it live right so today we're going to be using digital ocean so there's going to be a link in the description right go ahead and click that link so it makes the sign up process a lot quicker so that link should take you to this beautiful landing page made by our friends a digital ocean and if you use that link we get $100 to learn with digital ocean okay so go ahead and sign up and create a free account I recommend you use GitHub because it be a lot faster boom so I signed up through GitHub and once you have everything set up for digital ocean go ahead and click apps and this is what we're going to need to do right here so what is digital ocean digital ocean is infrastructure as a service what does that mean well this web page hosts multiple servers that we as developers can use for ourselves right one of the use cases that we're going to be using today is creating a static server Live app right you can also connect it to a database right you can use kubernetes and then we can also create an app of course so click create an app you'll see see create resource from source code I want to click GitHub so click on that and wherever you want to use next thing I want to do is find my Airbnb salana which is going to be this one cool and this is the branch and this is the source directory right so this is one is important right what's the source directory it should be the directory of the front end right so what you want to type in is slash front end right here okay and the cool part about digital ocean is that it has an auto deploy feature so remember I said every time you make an update we want to push those changes every time you push those changes autod deploy will redeploy your app so that's always the latest version and it's synced with this repo all right so that's super awesome go ahead and hit next right go ahead and hit next next next right we don't have any environmental variables set up just yet right so we can just click create resources and let's see anything else all right cool awesome so our app is called cining uh you're free to change it as soon as it's done to whatever URL name that you want for this project and from there we're just going to let it build all right so the build is complete now what we could do is click on the live app and there we go right this is live you can take this link and I always say you could share it with your friends you could put on your portfolio and at the current moment you can only connect your wallet and that works so cool so anytime you push changes to your repo your live link should be up to date so that's it for a live link let's get back to salana playground okay so moving on we're back at the li. RS and to get started what I want you guys to do is type in the word use right the reason why I'm typing in use is this is the way on anchor to import right so you know import from JavaScript use right is going to get anchor Lang if you don't know what anchor Lang is it's a library for anchor right and we want to get certain things from this library or crate sometimes it's called right so what we want to do we want to get something specific from anchor Lang So within anchor Lang I want something called Prelude okay and then you could if you go colon colon think of this as going inside a folder right first uh it's Airbnb salana and inside we go to the front end and inside we go to index.js right so within Prelude right if I do a star here we want everything within Prelude as well awesome so that's our first import that we'll do for now what you want to do is type in a semicolon here if you didn't know unlike JavaScript right we need to put semicolon semicolons here to indicate the end of the line otherwise we get an error okay cool awesome and then from there we can do a hashtag square brackets program right this is essentially uh a macro which is going to Define what a program is so what you write underneath underneath this directly underneath this is the program so from there we can say Pub mod clever Airbnb all right and if you put curly brackets right here this is the scope of our program okay so if you guys are with me you're in a good spot all right the next thing you want to do uh in between these two things let's declare ID oops declare uncore ID and then put exclamation point and then put parenthesis okay so every program has a unique key right represents the address of that program like that's where it is on on the blockchain right and salana playground will generate you a program ID if you click this toolbar right here on the left hand side click copy and then you could just paste that there that's your program ID it's going to be different from mine of course so if I hit build oh yeah I just mentioned we need a semicon here hit build it should say build successful right so that means this is a a valid program right if I asked you does this do anything at the moment it does absolutely nothing cuz there is nothing right so let's make it do something right let's give it functionality okay so what we can do is we can say Pub FN right FN is function right in JavaScript to make a function I would write something like this function uh add user right it looks it would look something like this right for rust or with anchor you can say Pub FN and then the name name initialize user right then you put parentheses right and then you can do uh this an arrow and write in result like so and there you go cool so this entire thing is a function right okay so don't mind that what we could do next is all right so don't mind that error it'll fix itself in a second what we do care about is this function right here so this is initializing a user right basically what we want to do with this program is create accounts or create a PDA right so uh just temporarily we want to create a PDA all right you might ask what is a PDA well PDA stands for a profile derived account right essentially right we want to create accounts right or pdas PD are essentially accounts created from the salana program right and we could do this to hold certain amount of data I'm simplifying this but a what kind of what kind of account do you think initialize user should create right initialize user user oops should create a user account with default data okay so what we want to do is have this program create a user account which stores all of our user information Okay cool so in order to create a PDA we have to give it some context so what we could do is pass in context as a parameter right so all I have to write is CTX okay if if I was going to add two numbers it could be like num one num two right this should look familiar in this case we're going to do CTX right and with anchor you need to specify the type what kind of what type is CTX looking for well it's going to look for context right and this is a struct in Anchor right and the type of context it's going to be initialize user right to understand what I mean by this is I'll ask you this does initialized user exist anywhere on our app no it does not right so that means we're going to have to create it later on so usually when we create a function this is the pattern we create the function it's going to take in a context and the context usually has a similar name to the function we created okay so we're going to hit pause on the function right and we're going to move on to creating some struct so at the end of your scope down here let's create the uh initialize user struct okay so to create a PDA right create the context right all right what we want to do is do hashtag derive parentheses accounts right so again similar to program right in this case what you WR underneath this maer right here is going to be the PDA or the the context right so we can say Pub struct and then this right here this Name Pub struct initialize user right and then you're just going to write info okay after writing that you can put curly brackets right here and then you can do hashtag account mute right we making this mutable meaning uh this can change right what can change whatever I put underneath here so the authority right what does the authority represent whenever you're working with salana and you make a transaction Phantom will open up and ask you to approve uh that transaction right so if I want to send money to someone you have to approve the transaction because you have the authority right so here when I say Public Authority what kind of type should it expect it's going to expect a signer right and the signer is one of the things that come from anchor Lang anchor Prelude right so this we don't have to create okay and it's going to be mutable because the authority is going to depend on the user it's not one static thing okay so now for the actual creation of the account itself okay so to create the account we can say hashtag square brackets count knit oops and actually say enter here it's going to take in a couple things now it's going to be init right if you write this anchor automat automatically initialize an account for you so we don't have to set any of that up what you do need to set up is the seeds all right uh you can think of seeds as a variable that will create a unique hash or address for your PDA okay from for now uh you it takes in strings right but I'm going to write something here it's going to say user tag right which is going to be a string but it's the uh variable holding the string but pause that for now it's also going to take our authority. key right do as reference okay cool and then from there uh we're going to write bump okay so when you're ever you're this will make more sense later but let's say that hash exists bump will just go to the next available hash Okay cool so who's paying for storing this data right or running this transaction it should be the authority right whoever the owner of this user should pay for it the next thing that the account is going to need is the space right because with ankor or just salana and rust in general they care about how exactly how much space does it take right it needs to know so to figure out how much space it takes or you got to think of what does the user need to hold right so if you're thinking about what a user needs to hold I'm thinking that it needs to have store its Authority it's last Airbnb and how many airbnbs does it have right so if I were to uh show you guys what object would look like right so let's say user one is equal to object and uh let's see if I can make this oops okay let's make it like this right user one has uh a key of the authority right and it's going to and then the authority is going to equal uh 8T right this is my account from Phantom right it's also going to have the last Airbnb right which I'll say is zero right and then it's also going to have uh Airbnb count think of Airbnb count as the total amount of airbnbs and that should start at zero right each of these things are going to take different space depending on the type right so this right here this Authority is going to be type public key and a public key is going to take up 32 bytes usually this u8 we can say that it's going to it can just be one right same thing with this this can also is a u8 an unsigned integer 8 byes you can just say one okay so in terms of space it's essentially 32 Plus + 1 oops + 1 + 1 right Plus 8 right the reason why I'm doing Plus 8 here is because there's something called an account discriminator that is going to be added right to essentially make space between this account and the next account right so when I say Plus 8 this is what it means Okay cool so that's how much base it takes up don't worry if this makes much sense yet we're going to be doing it over and over till you get the pattern got it cool so that's it for this space in terms of this account right here and remember underneath it is um all this information is going to go so this is going to be the what we'll call the user profile right and the user profile it's going to expect a type of box which is holding an account right which is what we're creating and that account is going to have info comma user profile okay awesome and then account is something from anchor Lang and so is box right but user profile right is an actual struct that we need to create it doesn't exist yet either right so let's follow this pattern right so initialize User it's a context the context of what initialize initializing a user is is that it will have an authority and that's going to have a user profile but then we need to Prof Define what the hell is a user profile right so we need to create this later as well okay cool and then we could say Pub System Program and then we could say uh program right this is built in you're going to you're going to write this over and over for the other context again so it's going to be info and then system perfect Okay cool so we finished the context uh if I were to run this it would fail because user profile it's not going to know what that is right so to Define what a user profile is we can actually make that struct here right Pub struct and then you can say user profile right or right we can make another file right we don't have to put everything in one file or else it could get really bloated right so what I'll do is create a new file and then you can go over here and call this one States okay and within this stat we also want to import anchor Lang Prelude and we'll get the star cool semicolon awesome all right so what did we do we defined the context for initializing user uh we then need to Define what that account looks like so let's define the user account right so to Define an account we're going to say an account right and we're going to do hashtag derive default right okay then underneath we're going to say Pub struct user profile cool awesome and then remember what I said it's going to take in an authority right and what's the type of authority that it spec it's going to be a public key uh it's also going to take in a last Airbnb which will be an unsigned integer 8 right and then also going to be Airbnb oops count u8 okay cool and remember just so you remember how much space each type takes right I can write it right here so this is 32 this should be one and this should be one as well right so that's where I'm getting those numbers so this is the account for a user this is the user account okay uh here's a question if I would run this it would still fail right it's still going to fail because why right does user profile exist on this page it does not right so how do we make it exist on this page right think of this import right here right so what we want to do is say Pub mod States right and then we'll say use right here's use again create colon colon and we'll say States colon colon Star right basically what I'm saying with this is get me everything oops everything from States right so what's in States all of this give me all of it right and bring it to this scope right here so that means I can call uh user profile in here in this scope okay we will need to do one more thing right we can erase this and what we can write is use super colon colon star semicolon right what what the hell did I just do well remember how I said this brings states to this scope right use super takes anything from this scope into the program scope so I can refer to user profile uh as normal okay so it should know that this exists Okay cool so just want to make sure it's still there States awesome all right and if I were to run this it'll still give me an error because this you user tag here it's going to say what the hell is user tag and like I said uh this is a variable that's going to hold in a string right so the seeds that it takes in to generate that hash is going to be a string and then my public key essentially right so let's define this variable right so you can say like something like uh const user tag right is equal to right and then Define it here but just just to keep in with our pattern we can make another file so I'm going to do that as well and I'll call this constant. RS so now I have constant. RS and what I'll do next it should be anchor Lang prel right anchor Lon Prelude colon star boom not eight semicolon okay all right so here we can Define our constants right so and again there's nothing wrong with putting it all in one file right I'm just showing you guys that you can separate it so I'll say constant here and then we could say Pub const user tag right and then we can reference itself as a u8 is equal to the string user state right cool all right so now we have you user tag and that state set up uh in the file called constant and then we are need to get the constant so get Pub mod constant okay and then here we can write uh constant constant col star parentheses right and use super we'll take that from this scope and bring it into this scope cool so it should know what user tag is and it shouldn't give us an error Okay cool so last but not least on the function before we write any logic usually in a function we need a return if you write okay here think of that as a return in JavaScript right let's say I wanted to return the number five you would put that right here uh for if I leave it blank it's not returning anything it's just going to run the logic and then be like okay done all right so if I hit build uh there shouldn't be any errors now awesome so this means the build is successful right we're only going to get warnings warnings aren't bad right if you see something like a warning it just says unused variable CTX right because that's true it's just letting you know hey uh you put this here but you aren't using it so don't worry about warnings right it's errors that um really matter so we have the initialized user set up now let's just write the logic for it okay so all the setup is done let's write the logic of initializing the user right and again if you want remember we want to initialize the user profile account with default data right if you go back to your States here this doesn't have any values associated with it it's just an authority that's expecting a pub key it's just expecting a number right but doesn't have a value so what number should it start with right how many airbnbs should each user have at the beginning it should have zero all right so if it has zero let's get that information and set it up okay so first thing we got to do is say a variable let right user uncore profile right nothing too crazy this is just one variable and we can set that variable equal to and mute right so this mute here is saying that this variable can change uh depending on the user profile right when JavaScript right when I make a ER let uh num equal one right if I wanted to redefine the value for this I can say num is equal to 9 right if I did this in Rust right it would say would give an error because I'm not allowed to change this right I can change it or make it mutable by writing mute okay and then I can say CTX what is CTX right if I were to console log CTX if I could do that incher I would see um this initialize user content text right cool well what do I want from that if I do do accounts right and then do Dot and then let's look in here if I do user profile then I should see in the object itself right the user struct so I can say user uncore profile there we go cool so when I say user profile I essentially get this struct or this account or if you're JavaScript this object okay so if um user profile is giving me an object right I'm thinking I'm saying object because I'm thinking JavaScript how can I get the total amount of airbnbs right what do I write after this to get the Airbnb count if you remember dot notation all you have to do is just write dot Airbnb count right and what do you want to initialize that count to be right if you're just making a user how many air bnbs should they have they should have zero and there we go okay from there let's just do the rest of them so I'll say user profile. Authority is equal to CTX do accounts right I'm getting this again right and I want to get my authority here right and remember this the pub Authority we can call on that so if I say Authority right I can get the key by calling the method here key okay and set that equal to this key right cool this stays the same right but we could also add user profile do what what else are we missing all right I need his last Airbnb all right so the last Airbnb is going to be last Airbnb equal to zero as well okay awesome and guess what guys that's it for initializing a user so what can we do next well let's hit build let's hope for no errors hey build successful right uh doesn't look like there's any unused variable either so let me just refresh this to show you guys right clean terminal hit build build successful not even any warnings so super clean code right now the cool part the reason why we're on Salon a playground is oh is that we can build but we can also deploy right what does deploy mean it means I'm going to take this program or this smart contract and deploy it on the salana blockchain right and when we deploy it on chain we can then get this program by its address and then call any of the functions towards it so let's deploy it right and when you deploy you're going it's going to ask you to connect to your salana playground wallet so that's going to be uh on this left hand corner here so click on that to connect your playground wallet if you hit deploy and it says you don't have enough salana what you could do is click this wallet click this this right here and click airdrop and this will help you get salana sold right so there it is I got two sold just now right so do that to get enough Salon to deploy the contract you shouldn't need much to deploy it since it's not that big yet cool so not only did I got two Soul the deployment was also a success which means if you hit this cool test tube here we can see the user right and another thing right it's reading so basically Salon playground is reading the the program and it's saying oh here are all all your functions and here are all the accounts you set up which makes sense right we have a user profile account and initialize a user all right so did this program create any users at the moment let's click fetch all and you can see it's fetching all the user accounts and you'll see an array empty because we didn't create any accounts our function right here initialized user should create an account all right so let's go ahead and test this function works and maybe you'll understand a lot better after we test it so so the authority remember the authority is expecting a public key right here and it's also the signer right so that should be your address your playground wallet address or your Phantom wallet address so you're just going to click that drop down click my address and you're good to go now here's the important part for you to understand it also needs a user profile right it needs an address for your PDA right um at the moment we don't have a place to put that data for the user account right we can get that address or that hash I mean through seeds right so which is user tag which is what guys a string and then your own authority all right so if you click this you want to click from seed right and you want to write in that string so you don't write user tag here this would be wrong what you want to do is type in the value of this this is a variable right and the variable is going to equal user state so that's what you want to write you want to write user State all right this is important because we going to do it again later okay so the next seed right there's one user State string and then the authority which is just going to be copy this and then paste it here and then it'll generate unique hash and this is where that user account uh will be living so if I hit test boom look at that test passed I love seeing that and now if I fetch a user profile there we go this object right here represents a user so how many users do we have guys we have Uno right we have one right and you can see how many airbnbs total he has zero what was the index of his last airnb zero okay cool and also it has your Authority and there's the public key right there so I hope that makes sense to you we're going to do this over and over again with the functions and hopefully it's going to stick right so let's work on on the next function all right so moving right along let's create our next function which is going to be adding an Airbnb I believe right we want to add or create an Airbnb so let's go back to playground and let's set it up right so how do we create a function guys well it's going to be Pub FN add Airbnb right it's going to take in context of course and we can write Arrow result like so okay cool so I want to move faster and faster as we do these functions because the pattern is going to be very similar right what is different is the logic here so we want to uh basically initialize an airb account with um information pass right what does that mean that means we're going to take more than context in this uh function right here so what I'll do is I'll put enter and we can also press enter and we can actually leave it like this right so it's going to take in context it's going to take a location uh it's going to take in right it's going to take in a country right what else goes into an Airbnb I look back it's going to take in Price Right Price and it's going to take in an image URL right and we can't forget with rust we need to type in the typ and context is going to be the similar right what's the pattern guys for context it should be the same name as the function most of the time and we can say add Airbnb all right does this exist yet nope not yet all right so we have to make it eventually so keep that in mind location uh location when I'm running this function right what should location be should it be a number No it should be a string that's kind of how you want to think about this so same thing with country string right price string right and this is interesting right I'm doing price and I'm doing it as a string right because in our Airbnb clone right when I want to add the price I'm inputting it as a string it doesn't have to be a number right if you did want to make it a number you can put uh u8 here okay but let's make it a string and for image URL we also want this to be a string boom okay so all the parameters are set right we're going to take these parameters later and apply it to our Airbnb account but right now we don't have our Airbnb account set up right so let's set up the context first let's create the Airbnb context okay so how do we create the PA context well we need the derive accounts again so we derive accounts and then let's see oh yeah we also want to do instruction here and this is new we're going to say instruction boom okay cool instruction right make sure I spelled that correctly cool so we got these two macros set up let's write Pub struct and then if you remember what I wrote it was add Airbnb put in the info right here and then after that Curly brackets bam that's the struct for the context and here we're going to say hash account right and I want to get the user profile right so here I essentially created or initialized a user account and here I want to uh use that same user account right so to do that instead of uh saying init right oops init I'm going to say mute right because when I add an Airbnb it can be different users I can add Airbnb you can add an Airbnb Kazi can add an Airbnb right so I'll say mute and seeds right so seeds if this is going to be a user profile what seeds do we need to fetch a user right how did we generate this seed well we took in a string right that string was called user tag right to find that user that we're talking about and we also need to do authority. key. asre okay cool and then we also need to add bump right and then has one Authority right who has control over this Airbnb it should be one person right Kazi shouldn't be able to mess with my Airbnb accounts right so we can say has one equals Authority okay and then directly underneath this you can write Pub user profile which is expecting a box that holds an account right which is holding the account of a user profile and that's the account that this box is holding okay that's how you can read it boom okay so we have a user profile right we need this so that we can determine who owns this Airbnb right who has authority over it then we need to actually have the Airbnb account so if I ask you guys do we have an Airbnb account setup right we do not we only have a user profile setup right so how did we create a new account it's going to be very similar to this so if you get lost keep this in mind okay so again to start we're going to say hashtag account right and hit enter here and how do we initialize an account with anchor we say init we take in seeds right but is it's not going to take in user tag this time right the seeds that to make or generate the uh public key of this Airbnb account is going to be Airbnb tag right another variable right which we'll make later it's also going to take in our Authority right so that's the same do asre right but what also helps us generate a unique hash will be to put um the index of the user right I need to know what was the last index of the Airbnb so if this was the first Airbnb the last index should be zero right so if I make a second Airbnb the last index would be one right so that's going to help us generate a unique one so we don't get the same thing over and over right we're just going to say user profile right we have access to this because we have user profile and then we can getl Airbnb right and that's it right so that's how we get the unique hash and these are the three seeds that it takes three variables that generate a unique uh like this okay from there we just need to write bump and then who pays for the the the space or the creation of this account should be the same as the authority and the space right let's look at well we're going to need to think about what an Airbnb account is so we'll come back to space in a second just know that there's going to be an eight here okay so I can write Pub Airbnb account that's going to be a box that's holds an account right and that account is going to be an Airbnb account awesome okay so you'll notice right away this is the Airbnb account that we need to create so what I'll do is let's define what that is so go to States right we're in States now and now that we're in States we can create the Airbnb account itself so to do that same thing as above right just going to write that this is an account right and it's going to derive default and then we can say Pub struct Airbnb account make sure it's spelled exactly the same as you wrote it here okay just want to make sure cool all right so hopefully this will help you understand a little bit more if you didn't understand what the user account was when I have an Airbnb account I mean what is the information that describes an Airbnb right so let's think about this air every Airbnb right is going to need a location what's the location of this Airbnb and the type of that is going to be a string it should start to look familiar right what about uh you know where it is right but where is that location located right so you describe that as the country what country is this in right okay what else do we need well we also need the price right and again this could be an integer but we can also do it as a string okay cool what about um an image yeah it's going to need an image right cool so an image and we can say string as well and we're going to say Pub price right and that's going to be a string as well wait no we did the price already we need one more thing we need location country price image and oh this is another thing that's going to be important later but it's going to be is reserved and usually you write this uh in snake case but in our front end we have a camel case so I'm going to write it as that it doesn't have to be written this way right I'm just going to write it like this cool so this are the keys to our Airbnb object right now translated to us this is a struck and all of this is what makes up that struck Okay cool so that's our Airbnb account right uh one things that I do realize that we're missing is we need to keep track of the authority and that's going to be type public key and we also need to keep track of the index which I'll write as idx okay cool all right so this is it full thing now this should be defined right so now this exists and now we can work on how much space does this account take up well if we're going to do the same thing here let's think about it Pub Key is 32 all right index one location uh is going to be a string this is going to be unique because string is usually four plus how long do you expect the string to be right in char characters right so I say 256 is the max that we can expect and then same thing with country 4 + 256 and then price this could be 4 + 256 right again you can make this smaller but just know that if you make the location longer than this many characters or bytes uh it may fail right for the URL it's going to be 4 + 2,048 right because this is the longest URL string that you can have okay and now we can do for a Boolean usually that's going to be eight Okay cool so all of this together it should equal up to uh I have it here oh yeah 2,865 just could did a quick addition on my calculator on the side but there you go this is how much spacee it takes up plus the account discriminator that I was talking about okay cool uh one last thing we'll need is the account Authority right remember this this is the part that I said you're going to repeat the authority is going to be the signer and this is going to be system program program info oh infro info system boom okay all right and is there anything else that I need no I think that's it oh I just remembered Airbnb tag would be undefined here I'm going to go to my constants and let's define that real quick and it's going to be the same thing as above you just do constant Pub const U airb BN B tag right and again you don't have to name this Airbnb tag just name it whatever variable you want and it's going to equal a string right that says Airbnb state so what do I write when I'm generating a seed I write the string I don't write Airbnb Tech okay because this is a variable holding the string good awesome okay so now that that's defined shouldn't be any errors but I wouldn't be surprised if there is ah mismatch types got oh I see yeah we didn't even finish the function guys so let's do that real quick yeah so we have all of the we have the strs and the context set up we need to now write the function duh so let me just write the function let's hit enter right here so let's make a variable let's say let Airbnb account right so what am I doing with this variable here what do I want to set it equal to think about user profile what did I set that equal to I set it equal to the context and I got the user profile so what I could do with this one is set it equal to the context right and remember this can change so we want to do mmute right and if I do do accounts now I'm in here right and I want to grab the Airbnb account so in the accounts I can say Airbnb account okay cool awesome I will also need the user profile and that's because I need to set the index of the airb as the user profile's last Airbnb okay so let's do that let user profile is going to be and mute CTX accounts let's grab the user profile and now we need to fill the context of the contents of Airbnb account with all the arguments here all right so if I write airbn account if I were to conso log this in JavaScript I'd see an object right how do I get the authority I say do Authority right what should I set this equal to I mean to get the actual key right you can say context. counts. uh authority. key all right that should work because inside here I can get the authority from this right here and Doc key we'll get it in a format that it likes awesome what's next Airbnb account. index set that equal to user profile right calling this variable and from this object get me it should be the same as his last Airbnb okay and then we can do Airbnb uh low. count I mean underscore account. location is equal to location right this location is coming from this argument okay Airbnb count we need country country and I'm just going to quickly move through the rest of it this should make sense equal to price Airbnb account. image is equal to image and then we need Airbnb account do is reserved equal to false right notice how I'm not using any of the arguments I know when I first make an Airbnb uh it shouldn't be reserved or not it shouldn't be reserved already it should just be false are we done nope not yet because I can set the index to the last Airbnb but if I don't change that last Airbnb it's going to be the same index going to be 0 0 0 0 so let's increment it multiple ways to increase Airbnb index for PDA right so user profile is another reason why we initi iiz this user profile. last Airbnb oops is equal to user profile. Last Air Airbnb right and I'm just hit enter here and say do checked add right essentially uh check or increment it right and then do unwrap unwrap it cool just to simplify what this is doing it's basically setting the last a vnb to be whatever it was plus one we will also need to do this for the total Airbnb count right how many airbnbs does this user have right well it's going to be user profile. Airbnb count right is equal to the user profile do Airbnb count right so if he had zero airbnbs after he makes this first one he should also have one as the count all right so we can do do checked add one and Dot unwrap it to get it in the right format cool notice how I can put enter here because the semicolon is what marks the end of the line right and there is check add but there's also check sub check multiply that we can use later awesome all right from there let's go ahead and write the okay and again this is like kind of like a return and let's see if there's any errors got it so it says accounts. authority. key is an unknown field all right so I got to double check any spelling or missing semicolons that's usually what it is so let's see ah okay so I forgot to define the type of this u8 okay and I think it said it had something to do with this this looks good this looks good um is this wrong oh that's good oh comma right here and then it had something wrong with this box count info oh I forgot to close this off there you go always said see how this color is off it didn't finish closing off for the box so now let's try let's hit build hey build successful and we do get one warning and it's this bully in our mention here right it should be snake case it should and best practice should be like this is reserved but again uh just for this project I'm going to do it camel case because when I pull it from the front end I don't have to change anything on my front end Okay cool so if you look here right we have the Airbnb instruction and the Airbnb account but we can't test it just yet because we need to upgrade the build first so you will need some salana to upgrade your build and it's going to be cost you more than last time but since we're on the devet we should be to good to go and in case you're getting any errors uh with Phantom right like if you were getting any errors previously with connection go make sure you click settings and make sure you are on the right Network you should be on devet not main net right because uh this specific playground is also on deite right make sure it all matches okay so it's almost done deploying and Bam okay so we upgraded our smart contract we didn't make a new deployment right so how many users do we have we have one user how many airbnbs do we have created right we have none right so how do we create an Airbnb account well that's what add Airbnb does so let's do this let's do let's make a location let's say space actually no location should be a rocket ship right the country right I'm not going to be traditional let's say space the price 9999 and the image so for image let's use unsplash I think I have it saved for spaceship let's use this one right here it's pretty cool they're on Mars so back to playground you can literally paste this image here and now this is the context part the accounts right so what user is creating this account all right so let's fetch users it can only be one user creating this account and what is that user's public key right so what's the PDA of that User it's going to be this right here cool what's the authority we can answer that question it should be my address my public key right the public key who also owns this user okay so what's the PDA of the Airbnb account right that's not created just yet right that's going to get created through the seeds right so this is what you need to put for the seeds so let's do from seed Airbnb tag right shouldn't be Airbnb TCH should be Airbnb state right next is the pub key which should be your address which I can copy here or you can get it from my authority and last but not least it does take in a number right so I believe it should be a u8 you can double check that right here yeah user profile last Airbnb and the last Airbnb is a u8 okay so takes an A u8 and since it hasn't made anything it should be zero right I can double check that here zero okay so let's hit generate there you go it generated a unique hash from the seeds and then if we hit test let's go it passed boys and girls so now what does that mean if I fetch an Airbnb account we have one Airbnb in this array right think of it as an object right so when we fetch this later we can take the information and map it through our listing items right can you kind of start to visualize how we're doing this so this is is good I hope this is starting to make more sense we have a couple more functions to go so let's keep on going okay so moving right along let's get back to our lib and what we can do next is now let's do edit the Airbnb or what I'll say is update Airbnb so let's create that function Pub FN update Airbnb okay okay and then we can do this Arrow result like so and then curly brackets there we go so that's updating Airbnb going to hit enter here and it's going to take in a couple arguments as well right so of course it's going to take in the context and the context which we'll need to make later is update Airbnb okay and from here it's going to take in the index u8 location string right we need to pass all of this in because depending uh on what we want to do we want to change the location maybe you want to update the country maybe you want to just change everything right so let's pass in everything and only keep what we need okay so location country price and they're all going to be type string string okay awesome all right and then here it's going to be the logic but let's wait on that for a second and let's work on the context all right so you want to make contacts for updating Airbnb what you have to do is just follow the same pattern as last time right so it's only going to get easier from here I'm just going to do accounts and then we can say hash instruction again but this time we're going to take in Airbnb idx 8 okay cool I always spell instruction R instruct nice okay cool underneath this we got to write prob struct update Airbnb info curly bracket and from there we can do the hashtag account again okay I'm say enter here cool so uh what I'm going to set up is the user profile so if it's the user profile right we can do seeds is equal to user tag right and remember this is user profile right so to get the user profile we have to find it through the seed so we're going to take in the user tag the authority. key. asre and that should get us the hash that we need all right right and then bump and then has one okay cool this is all for the user profile um this isn't anything new this is essentially what we did last time right we're getting we're getting access to the user profile again and you could have literally copy and pasted this if you wanted to but I'm just going to write out box account info user profile comma cool so we this is how we're getting access to user profile when we're updating the Airbnb we need access right keyword access to the Airbnb account itself so how do we get the Airbnb account well it's going to be very similar as before and let me not make the same mistake cool now this is the right color so it's going to be similar to how we got the user profile so we want to say mute here cuz it's going to be a different Airbnb account each time uh we got to pass in the seeds to get that hash which will be Airbnb tag authority. key asore ref comma and right it's a Airbnb index dot as R okay cool and then we can say bump okay then we can say has one equals Authority all right then we can say Pub airb account and we can say box account info and then what account that you're getting I'm getting the Airbnb account there you go so we have we got user Prof file we got Airbnb account right and then we just need the usual stuff which is the authority and System Program right and I'll save you the time literally you could just copy and paste this same thing here cool and that's it for update Airbnb do I have to create an account again no because I'm using accounts that already exist we already have a user profile account I already have an add Airbnb account all right so what we want to do now is just utilize the context right right so this should go a lot simpler so we're updating the Airbnb and we just want to change it to whatever we pass in right so let's just get the Airbnb account right and set that equal to and mute context. accounts. Airbnb account okay cool and then we can do Airbnb count that location right is equal to the location we pass in right then we can get the country set that equal to the country oops semicolon not comma okay then we need Airbnb account again price is equal the price and Air B and B account image is equal to image okay and then from there you just got to do okay and that's it and now that I'm thinking about it we're not actually using the user account at all yeah cuz we don't want to we don't need to update it because that user is already has the authority so you know what let's see let go to here yeah we're only we're using the Airbnb index anyways cuz before we're using user profile last Airbnb but that should be the same as this anyways so what I'll do is let's erase user profile and this should still work all right that's update a b i just remove that it should still build let's see if I missed anything hey okay so if we get the is reserve that's fine uh line 59 yes we're not really using this right but we do need to pass it in so let's just do that cuz that's going to come in handy later boom so now we only have one warning and it's the is reserve that one I can live with right we can change that to snake case if you want but it should be fine cool so let's upgrade the contract and let's test update Airbnb awesome so it looks like it was successful and now we have update Airbnb so let's test it out so when we update the Airbnb let's pass in the index I don't know from memory that we should only have zero but we can double check index zero perfect okay uh what's the location let's just say du buy right and if you know where to buy is you set UAE as the abbreviation we'll say 88 and for the image right I don't have an actual URL for this but let's just say it's I don't know like um let's go back here let's say Dubai and I like this one so let's take this paste that here Airbnb account what Airbnb account should we pass in right I don't need to create a new one but we should just take the one that's already made because I know what it is the authority is going to be me and let's hit test hey update yourb me passed so this is what it looks like current L the rocket ship in space if I do a fetchall now you'll notice that it says do buy now and we have different image and a different price and that's what updating an Airbnb should do cool on to the next function all right so the next function that we're going to create is going to be removing an Airbnb which is essentially deleting or closing the account right so let's go ahead and work on that so if you want to make a new function you guys should know the drill by now we're going to say Pub FN remove Airbnb okay make the arrow result like so curly bracket and Bam that's a function all right so now that we have our function let's take in its arguments and when we remove an Airbnb all we need to know is the context right which is going to be context and it's going to take in remove Airbnb which we'll make in a bit it's also going to take in the Airbnb index okay and then we're just going to say u8 for the type awesome all right and there's nothing really we have to do with the user profile besides decrement the total Airbnb count right so let's set up remove Airbnb so just going to scroll down below here hash derive accounts # instruction Airbnb idx u8 and then we're going to do Pub struct remove Airbnb all right so similar to update Airbnb we do need to take in the index of the Airbnb we want to remove just like we take in the index of the Airbnb we want to update right so this needs info as well and then we can do curly bracket and from here let's set up uh the user profile account so we can say hasht account can say mute and then Tak in the seeds of the user so what are the seeds that we need to get a user hash which is going to be user tag and Authority do key do asre and comma we add the bump here and we'll say has one which is equal to Authority Okay cool so with that done this is what a user profile is and the type that it expects it's going to be a box that holds an account and what is that account it's going to be a user profile account which we created again in our states okay amazing okay so we have a user profile we'll also need to get the airnb account Airbnb account right so then we'll do the account like this oops then we'll say mute close is equal to Authority and then we'll say seeds is equal to Airbnb tag oops this also takes in authority. key do oh yeah asre and again if you ever confused what what seeds do we put in think back to when we initialize the Airbnb right this is the seeds that it uses to create the hash right and we can use the same seeds to get that key so we can just say and uh Airbnb index do as ref okay and that should give us the Airbnb account that we want oh yeah it's not done yet we need bump has one as well and that should be it from there we could say Pub Airbnb account which is expecting a type of a box that holds an account I feel like I'm getting really repetitive but this is the same pattern guys so once you get used to it think about what you need access to right that's my keyword and what do you want to do with it right so we have user profile rbb account and we can copy this because it's the same thing the context will need the authority and the system program now quick question do I need to make any accounts or create any new States here nope I'm just reusing these again that are created and getting the specific uh like keys I need or specific account pdas okay now for the actual logic this remove function is kind of misleading you're not removing you're not writing any removing logic right the key here is in remove Airbnb right is this close equals Authority right it's basically saying hey who can close this or are we closing it like it's all handled through this right here right notice how this close isn't in here right when we're referencing the Airbnb account the close is in remove right so that's hand Ling uh removing or closing that account what we do want to do here is uh decrement Airbnb total total count I believe I forgot what we called it already oh yeah Airbnb not total Airbnb count okay so how do we go about doing that well first we need to get the user profile right luckily it's in our context right and so we can say and mute cx. accounts. user profile okay so now we have the user profile what do we want to do with it all right think back to adding Airbnb account right this is increasing the index we now want to decrease not index but a number so we can do that by saying user profile which is the variable do Airbnb account right so this will get us the Airbnb account of the user in this case my user and you at the moment this current point in time that I'm talking about it we have one Airbnb account so this is actually one right now but to decrement it we can say equals user profile. Airbnb count. checked sub right one and then unwrap okay then semicolon because that's this whole thing is one line okay so check sub it's essentially similar to check add except instead of adding one we are removing one and then setting that equal to the new Airbnb count and that's what remove Airbnb is doing right and we can just say okay awesome all right that's remove Airbnb see if we have any errors or spelling errors yes we do okay so I'm assuming it has something to do with the struct so I'm just going to take a quick look at it so it looks like the error this is definitely closed this is definitely closed oh forgot to put a comma here and maybe that would fix it hey okay build successful right again warnings warnings we can live with right it's just the is reserved which I pointed before so we're good to go and test it right so after we wrote all this code let's make sure we upgrade the program on chain so I'm just going to quickly upgrade and check back when it's done all right deployment successful okay so with that said we can go ahead and test remove Airbnb right so again quickly remember that we have one it's this du buy one right here and let's see if we can remove it so what does removing it look like if I were to fetch this it should go back to being an empty array all right so what do we need to remove an Airbnb we need the index so what is the index of this right we know because we fetched it it's zero and order the accounts right so it now ask yourself if youever get confused here am I generating a user profile public key no am I generating Airbnb account publicly no I'm just passing in what already exists right so with that in mind you just need to get the public key of this user account paste it on there right then you're going to take the public key of the Airbnb account paste it on there then you're going to put in your Authority which is your wallet address essentially then test and look at that all remove Airbnb passed and if I fetch all no more Airbnb right the account got closed and what you'll see too when you store stuff on the salon chain you need to pay some soul and when you remove it since you're not paying that Soul anymore you get some of it back right so that's cool you'll get your salon back because you're not you're not no longer using that space right doesn't really matter on devnet because essentially everything is free we're just testing and learning with salana cool so that's remove Airbnb next up we have the book Airbnb function right so this should be uh pretty simple because we're going to do it in a certain way right so let's just review real quick we have two accounts a user profile account and an Airbnb account right so what should be the difference between an Airbnb account and a booking account well if you look at the Airbnb clone if I heart this I set it for 910 then I do Reserve you'll notice that it's exactly the same as it was before except for a slight difference which that this time it includes a date right it includes a date okay and includes the date because right whenever you create a booking you should know the date that you reserved it for so I reserved it for 910 and this is my nice little Hut in the Philippines awesome and the cool thing is that it's Mark by a heart so what's the idea with a booking account right so with salana I the only people that have the authority for the Airbnb accounts is the person that created it so if I wanted to book it I essentially can't um edit that account and transfer it to me right because I need to sign over that Authority and that's not always the case so what we're going to do instead with booking an Airbnb is we're going to create a booking account which just passes in the same data from the front end right so that's the workaround for this right we're doing this just a practice creating functions right so this one I want you guys to pause the video and try it yourself and see if you can make a booking account right so I'm going to give you guys 3 seconds 3 2 1 you got it cool so let's reveal the answer as I explain it all right so you guys want to book an Airbnb right it should be pretty simple it's just going to be the add Airbnb function all over again with one extra uh property right so let's do it say Pub FN book Airbnb parenthesis arrow and result yep so if you did this so far you are killing it okay it is going to take in a couple things so I'm going to format it like this Tak in the context which is book airb B we will take in the index it's going to be u8 going take in date string location string country string oops price string and look Force image almost forgot that string cool all right so from here right we need to create the context so just going to scroll all the way to the bottom here and let's do one of these okay make this a little bit bigger for you guys and let's make the context so whenever we're making a context we want to derive accounts right cuz we're creating a new um PDA for booking accounts that's the goal right but the first we got to define the context we can write instruction here then we can say Pub struct book Airbnb info and there we go cool so what do we need for a book Airbnb we're going to need uh the user profile account so let's get that how do we get that we're going to do one of these oops not that one we going to say mute seeds what seeds does a user profile account take in takes in my variable user tag and authority. key. asre Bam and we can do bump then we can do has one equal to Authority all righty so then from there we could do Pub user profile and you guys know it's Jo at this point box account info then write user profile so we can get the actual struct of the user profile account okay okay I forget the comma um oh yeah so we have that and now we need to create the booking account right initialize it right so luckily we don't have to do the work of initializing it because anchor can take care of it with for us by saying account parenthesis and init right that's what's taken care of it uh now let's define the seeds what are the seeds of a booking account right so again entirely up to you but I'm going to do is make a variable called book tag right very similar to user tag and Airbnb tag this is going to be a variable that holds a string okay then we're going to take in whatever our Authority is and then let me see dot as ref cool and actually we don't need to add anything else right that can be it okay and then from there we'll just say bump and set that equal to oh no sorry bump and then we do payer and set that equal to Authority right again if you did want to make unique uh even more unique hashes for the seed right we can add an index here but again let's keep we can keep it simple all right how much space does this take up not entirely sure yet so let's just leave that blank for now and then we'll do a pub booking account right this is us initializing the account which takes in that box that we always use okay account info booking account right so the cool thing is guys if you wanted to make any kind of app right let's say you wanted to make I don't know uh a Amazon for example right you can Define your items here like you can make a item account right and then put what uh properties an item has right so that's the benefit of what I'm showing you guys like feel free to use this however you want right now if you want you can even add more properties to each account we can have like the owner um how far away is it from you and so forth right so after booking account we just need the authority and the system program again so we can save time by just pasting the same exact thing and that's it for the struct right the next thing we'll do is need to Define book tag and we also need to Define booking account so start with book tag because that's going to be the easiest and to do that just come down here say hashtag constant then you can say po const book tag and u8 and set that equal to the binary string of book State all right so that's the string that we write when we're inputting our seeds remember that now for the states right we need to Define what the hell a booking account is and if you think about it it's exactly the same as this except what all right so I'll copy this I'll paste it cuz it's exactly the same but make sure you change it right if you're going to copy and paste it make sure you did everything right so it's going to be booking account not Airbnb okay so what's the difference the difference is it's going to have a date right so underneath this Authority you can really write it wherever make sure that it has a date and that's going to be a string and again this how much space does this take up it should be uh 256 all right same amount of space as location country that should be plenty for the date that's it that's the booking account itself we can now Define how much space this takes up and if I add up all the numbers together um it should give me like 3,000 something I believe let me just quickly do it yep 3,125 plus the account discriminator okay cool and if I barring any spelling issues or missing uh commas this should be good to go oh yes forgot to make the logic of booking account yes okay cool so give me an error because I didn't finish writing out the function but we have everything we need set up we just have to write the logic okay so writing the logic what we did if you remember the add Airbnb we needed to get the booking account right and we can do this because that's in our context so it's in our context accounts booking account boom okay so now we got to fill up this right with all the values where do we get all the values for the date location and stuff like that well we passed it all in okay so what we can do is say um booking account oops booking account account. idx equal to idx and let's get the date equal to date booking count. location is equal to location booking account. country is equal to the country and now let's work on price so you can just say price I guess what of that will equal to it's it's price again I know all right so we're almost done let's get the image can say IMG right because that's what I wrote here I think yep and I think I wrote init okay next we need booking account do is reserved and this shouldn't be false right because if it was um adding an Airbnb it would be false right because it's not booked yet but when we make a booking account oops I went too far it should be true and you might ask and it could be possible to go into the Airbnb account and switch that to True right the thing is The Authority right if I make that let's say I put up a nice cabin in the Philippines and kazy tries to book it and he wants to change this to true he wouldn't be able to because I have the authority cuz I made the account right so I could ask him and then he would sign it but there's no guarantee you know he'd be there to sign it or again it's just it's just not right with in terms of authority the easier workaround is to just take the data from the front end pass it to this function call and make a brand new booking account all right cool this again this is just a practice creating the function and that's why uh you guys should get the pattern by now so that's okay let see if it likes it now and Bam build successful yep yep yeah so now we have two warnings cuz there's two is reserves now but again totally okay right so now we have book Airbnb let's go ahead ahead and hit upgrade so that we can finally test it all right there it is there's the magic words deployment successful right let's go ahead and create a booking account before we create a booking account we should probably um make another Airbnb so again I'll use uh Dubai uh the country price and the image okay for the user profile we're going to need to get that from here take this public key and the Airbnb account does not uh it exists but we need to get the right hash for it so we're going to get the seed which is Airbnb state right it's going to take in the pub key and I believe the pub key is just the authority can make sure right here yep my authority which means it's my wallet address and it takes in number and we can put u8 say zero generate and my authority my address test o I do something wrong no unauthorized sign let's see real quick okay I just did the same thing again I might have put the wrong um public key so this is different 60 Let's test PR program oh I see it's cuz the last Airbnb so see yeah last Airbnb was one right so we need to put in one I'm pretty sure that's it so instead of this from seed Airbnb State we need Pub Key my address let's do this try one there you go it passed right I put in the correct uh seed for it now right so now this should say two and total Airbnb is one all right so we're keeping track of its last Airbnb and also keeping track of the Airbnb account okay this is so that uh if we have three airbnbs and they have 0 one2 right it remembers what the last index was so we don't have multiple right so now if I fetch this we have one perfect and now how many booking counts gone right to simulate the front end we're going to book this Airbnb so to do that we're going to pass in the index which I believe it should be one yeah one one the date we'll say September 9 through September uh 10 right is this how it's written yeah Dash Okay we could do that put a dash right here boom do buy right and this will be all automated when you book an Airbnb you won't have to input anything it's just going to take the info of the Airbnb account and then pass that as the parameters so we'll do that $88 image you can uh pass the same image okay cool uh user profile account pass in that booking account from seed uh this should be book State and just my public key right remove the index thing we can just uh do this generate my address and test boom passed there you go that's what we want to see and now when we fetch this there you go so I have my booking account and we have the date of when I'm booking it right so we can do stuff with this right so that's the booking account all right believe it or not we're on our last function which is we should be able to uh unbook an account so if I click that we are no longer have that account booked Okay cool so let's go ahead and work on that so I'm just going to scroll to the top here and let's make that function at this point it should be very easy to make a function right you can just say cancel booking all right and when we cancel the booking it's going to have a result like this okay and the difference between this cancel booking and the remove Airbnb is that we don't need to decrement the account right if you were keeping track of the last booking account then you would do that but for us uh really you can just write okay here and we're pretty much done okay we do still need to write a context though because it's in the context that matters so we'll say cancel book for short and we should also take in the booking index all right I'm passing this in so we know which uh booking account you want to delete okay so we need the index that's okay uh I'm just make a note here closing account is handled in context but if you did want to do anything else like change uh I don't know decrement the total booking accounts right then we could do that here but we don't have that set up right cuz you get the idea so we just need to set up the context all right so this should be pretty straightforward then so we're can say derive oops the Roy derive accounts and we can just say Pub construct cancel book say info right here and within this we need to get the booking account I believe we I think that's the only thing we really need yeah just need the booking account so what I'm going to do is say mute here and let's just say close equal Authority seeds equal to book tag authority. key. as ref then we do bump then we do has has one equal to Authority all right cool and that's the book which will just have this box that we have again yeah as you can see there's a lot of repetition in a lot of things I'm doing right so just know depending on what you want to do it might be the same thing cool so we got the booking account and we just need the authority and System Program once again and there you go we don't need to make any uh account struck because we already have a booking account um yeah just taking in the ID let's see is there anything else doesn't even really need the ID now that I'm thinking about it but we'll keep it in there for now all right so let's just see if the build would pass awesome build successful let's let's upgrade it and then we'll test it all right deployment is all said and done let's test this out right so we should have a booking account right yep we do just to confirm oh it doesn't have an authority that's what I realized why don't you guys tell me the authority should be the same so let's see let's go back to this uhhuh yeah we did miss one thing for booking an Airbnb should have made the Authority booking account. author Authority dot uh equal to CTX accounts. authority. key okay yeah so if you see this 1111 if I didn't specify the authority the default is just this 1111 right here okay awesome and yeah we have this yeah the authority should be my wall address but it's just the default one that's fine all right so we finished deploying we can now test the cancel booking right so we're going to pass in the booking index I lost it so let's get it pack which is going to be one all right uh the booking account is going to be this thing over here and the authority should be ours but since I didn't put an authority we I think we have to use the default one which is this let's see if that works if not it should be ours Okay cool so signature verification failed let's try my address yeah one constraint failed so this this might be a uh account that I don't have authority to change not too sure to be honest with you guys but let's just make a new one let's just book an Airbnb the index of this uh we'll say to the date can be September 9 or that's do 12 to September 13 the location this doesn't exist but we'll do space or rocket ship rocket ship country space price 9999 and the image uh can be test all right so again the user should be me all right that's the user profile the booking account can come from the seed we can say book state right here then the public key which is my wallet address generate and the authority and this time it should have the right Authority oh rent exempt threshold oh I see okay okay good okay so I quickly just redeployed the whole contract and let's just start from scratch okay so we have no users no Airbnb account no booking account right brand new contract right I can show you guys how to do that later but let's go from the top and then we can move on the authority is my address the seed user State and oh not string we need a Pub Key which will take in public key generate test boom cool we got to use it right here's the proof all right this is the public key for that user we know we'll need it later let's add Airbnb right so let's do du buy Let's Do U ae88 and for the text I mean the image address we can do this guy right here and for the user profile we got that it's right here the V7 uh Airbnb account we need to figure out what's going to be the Airbnb account so we can say uh Airbnb state all right then we can do Pub Key which again will be my address and also it's going to take in a number which is going to be the last Airbnb that they did which will be zero all right we can then generate it my address test boom we have an Airbnb Okay cool so we have an Airbnb here's the proof let's book that Airbnb account so to do that we're going to need to book it taking the index which I believe is zero as well yep it's zero the date we can say September uh 6th to September 7th location right we can do do buy same thing right again we wouldn't have to manually put this in when I'm calling this function it'll be automatically passed forward in the front end and we can take this image paste it cool all right user profile it's that V7 thing the booking account we need to generate from seed which will say is um book State Pub Key and we can say my account which is this generate Authority my address there we go okay so we were able to make a booking account right nothing weird going on Boom okay now we want to remove our booking account right so if we want to remove our booking account we're going to use cancel booking pass in that Index right get the exact booking account address right the public key pass in the authority and should be taken care of from the context and Bam cancel booking pass all right after all that if I fetch all boom no more bookings right so functionality wise Airbnb clone is done all we have to do now is plug all of those functions in with our front end so you guys ready for that if you guys made it this far drop a like in the video comment down below that this was helpful and you know what type in marshmallow in the comments so I know you made it this far Okay cool so let's work on the front end now all right so all the functionalities done let's let's figure out how to bring this functionality and call these functions right from our front front end so what I'll do is I'll bring back vs code for a second here and let's go ahead and let's make a custom hook all right so if you don't know how to make a custom hook right all you need to do is just make a folder called Hooks and not make sure it's not in Pages or anything like that it should be its own folder so inside that hooks folder right I'm going to make a new file and I'm going to call it you use Airbnb do JS cool so this is going to be important for later I'm just going to put a pin on this and uh let's talk about a couple things so you have your salana program on chain right if you look under constants you're going to have something set up for you which is going to be the index right and the index.js right you need to set this up in order to get the program right we need to First fetch the program and what we going to do first is get the key right the address right so what's your address well it's easy to find out cuz if you go to the top of your lib my DZ KS right I got it's different from earlier cuz I just redeployed it I got a I started a new program what you want to do next is hit copy this all right get back your VSS code and then replace this cuz this is the demo with yours right so now that should be good right the next thing you want to do right is go to this toolbar right here go to IDL and hit export IDL right you'll see this id. Json uh it says eight here cuz I have like eight of them when I was testing this but yours doesn't have to say that you can double click that for using Chrome and it should open up that IDL in Chrome I mean in vs code so I'm going to press alt Z so you can see what this IDL is and essentially is a Json file of our app right you can see uh all the information like our constants right user state in here right we can also see all the functions we did like update Airbnb what you want to do is just copy this and within the constants on Airbnb Json right crl a and then erase what's in this Airbnb Json and paste well not the image.png I don't know what happened there you want to take all this stuff copy it and paste that in this Airbnb Json all right so that's part of the setup for this hook we can go back to use Airbnb now right and once you're here let's import a couple things that we're going to need for this right and I'll explain more what we're doing here so first let's import Star as anchor from uh at project serum anchor U let's import some react hooks while we're here we're going to need use effect um use memo and use State we might not use use memo but we're definitely going to use use State and use effect okay okay from here we're also going to be using uh import the Airbnb program Pub Key from constants all right this is what we set up earlier in our constants folder right remember where we put the program ID I'm exporting it and importing it here okay next we want import Airbnb IDL from do dot dot constants slash Airbnb dojon right we're importing the IDL as import uh Airbnb IDL cool let's also get uh System Program from anchor actually no we don't want this from anchor we want it from salana web3.js there you go we want System Program from there we then want to use UTF 8 from Project oh at project serum anchor slash dist SL cji slail SL bites Perfect all right utf8 cool we also want to import uh let's see find program address sync and don't worry we're going to be going over all these and whatever I end up not using we can erase right cool from here let's do use anchor wallet use connection and use wallet okay oh yeah so there's also an author filter so let's see do I have that here details I think it's a new toils oh yeah so this is the uh account discriminator right it's all set it's already set up for you guys right need to have this here because what we're going to do is import it in our hook import author filter from utils and let's import public key from salana web 3 and there's just two more things we we can use uh set right this is going to come from the date so when we're going to book stuff later this is important import TR yeah I'm not sure if we're going to fully use those two but we'll see update Fess local perfect okay cool we got all the Imports I know that was a lot right but what do we want to do here well we want to use this hook in order to write the functions we need and then we can call any of those functions within our index so the alternative right guys is if I open up the index right the alternative is I write all the functions in here kind of like how all these static functions are right or I can write all the functions in here and then uh deconstruct it and call it here kind of like how I'm using use wallet okay that's what the custom Hook is going to do all right just for organization purposes awesome so how do we get started can say export const use Airbnb whoops use Airbnb is equal to an empty function cool so all we need to do at the very bottom is return like this and we're good to go right so essentially uh if I make a variable here let's let's try it let's just show you what I mean let's say const uh number or message is equal to what's up YouTube right let's say this is my message to you guys all right and I'm storing it in this hook right what you can do is return that message okay this is how you make a custom hook all right and so once you do that go ahead and hit save go back to your index page let's say import uh use Airbnb and you're going to see this suggestion on vs code you can click it to finish it use Airbnb from hooks sluse Airbnb and let's say const and we're going to deconstruct use Airbnb here we can get whatever we want from that return so right now it's just message right so if I do console.log message right let's go back to our code inspect and let's see all right cuz I don't think we're running it yeah we're not we're not even uh running the app right now let's do yarn Dev or let's CD to the front end would would be a good idea then do yarn Dev there you go right we see what's up YouTube right we see it a couple times but it's not supposed to do that but it should just load as what's up YouTube Once right cool so that's how we can get ususer for a hook right whatever I write in USB Airbnb I can export later right I can set up my use effect there so I don't have to put it in the index as well and then yeah we can call in all our functions there so let's bring back that code and let's keep it right here awesome all right so you got the idea with the hook right yes all right so let's set up a couple different things here uh one of the first things I want to do is get the program okay so how do we get the program well I think we are actually going to use use memo for that all right like I said we're going to be using use memo and use memo it's going to take in an anonymous function okay cool all right so what do we want to do here with this used memo we want to figure out what the program is right so what we can do here is erase message and I did this already but I removed message from here right so it's just an empty here take out that conso log and we're caught up so let's go back to use Airbnb awesome from there let's do if uh there's a wallet right so we have anchor wallet we're making use of this here we can make it simple by saying anchor wallet okay so if there's a wallet we need to set up a provider all right so what's our provider well the provider is going to equal to new anchor do anchor provider okay and it's going to take in a couple of things we'll need a connection uh we'll need a wallet and what else we we need yeah we'll need the anchor default options as well so to get the connection all right to get the connection all we have to do is say cont connection right we're deconstructing this and getting it from not from sorry from use connection right one of the Imports that we have uhhuh and again this anchor wallet doesn't exist yet so let's bring that in we can say const uh anchor wallet set that equal to use anchor wallet cool so we got a wallet we got a connection let's pass it all in so we can say connection anchor wallet and we can say anchor. anchor provider. default options cool all right I'm just going to do an ALT Z here so you can see that a lot better how's that guys awesome all right what do we want to do with all this information well we want to return new a an er. program and here is going to pass the IDL where we can see all the parameters IDL the program ID and the provider right if there's no provider we use the anchor provider right so let's do that let's say Airbnb IDL IR BNB program Pub key right then we could say provider cool yep if statement and then put a comma here and then we can say uh connection and in wallet right we'll run this if any of these variables change Okay cool so let's try to conso log the program let's log in the program and let's put a little note here says program is here okay not that window Oh and before I move on I had I just realized there's a typo here this is not coming from anywhere we're not deconstructor it deconstructing it I'm setting it equal to this anchor wallet so now let's bring in the right window should be this one boom okay cool program is here that means that this VN right here is the program and inside has these attributes right it has the methods all our instructions right you can see add Airbnb in here right so if I do program. instruction I can call in all of these functions that we made right and now we have account we can see all the accounts as well with this program Airbnb account booking account and the user profile right so which account do we want to work on the user profile that's correct right so with that said we don't need to this anymore right what do we want to do right what do we want to do when we load app we want to get all of the accounts right all the necessary accounts right we need to get all the airbnbs and the user or just the one user right cool so what your should we do first first right first check if there is a user right user profile account right exists right if it doesn't exists right something else should happen right so if exists right if there is already user what do we want to do load all Airbnb Airbnb accounts okay if does not exist initialize the user initialize user right or call the initialized user function from our contract right so let me make this a little bit bigger and before I do that actually let's get that uh Airbnb cool so if I ask you guys really quick how many users do we have on this program we have one right but is this user the same as this user it is not right we didn't initialize a user yet right so if I were to run uh all this code am I going to run this if statement or this if statement exactly if the second one right it's not going to exists so we should run and initialize user right if it does exist load all the Airbnb accounts right right so how can we make this code a reality this is called pseudo code right well one way I can think about it is let's make a use effect all right use effect is a react hook right that's going to let us do stuff when the component first loads when it updates and when it gets destroyed right so what I want to run first is this function call it start right and it's going to be asynchronous and let's figure out what start does start is basically starting the app initializing any files we need right that's why I'm calling it start cool so if there's a program and if we have a public key right how can I tell if I have a public Key Well I think uh use wallet can help us out okay so const I can say public key public key is equal to use wallet right so if we're connected we'll be able to see the public key that's connected and it's in this variable right here here okay so we can put public key right there and not comma sorry we need a double an right if this is and both have to be true for this if statement to run so if there's a program if there's a public key we are Gucci all right so what do we what do we want to happen then right well we can set up a try catch well okay set up the catch perfect cool cool so what do we want to try though well remember let's go back to Sal of playground right I keep going back to Sal of playground because the tests really help you understand what's going on right so when we were getting this user profile how did it generate this unique hash this V7 right it generated it from the seed right so the same way it it figured it out right it gave us that uni cache we can find that PDA or that unique address okay I'm using interchangeable words here all right so we can for now we'll say const square brackets is equal to await and we'll do find program address sync right we want to put in the seeds right so to get started we're going to put an array here and we're going to say utf8 right oops sorry do encode right and here we put in that first seed so what was our first seed again it was a string right what was that string it was user state right we're turning it into or we're encoding it here to make it similar to the seed from our Sal playground what else did we pass in as a seed we passed in our public key right but we can't pass it as is we have to to buffer it to cut it in a format that it likes so that's that then we can do a comma here and then we can say program right and then we how do we get the ID from the program we do program ID right H save here it's like no different it has the system program here it has the user profile has the authority our public key Okay cool so from there we'll get the profile PDA right so that's what in this square bracket here from this right it's going to check if there's already something there and it's going to come out as profile PDA but what's the next step guys the next step right let's say uh we did find program address sync we found it right it's this V7 thing but how do we get all the information with that right so let's pretend all I have is this what we need to do is take that profile PDA and fetch it so then we'll get a user right if we if I were to put something random like this and hit fetch it wouldn't work okay so let's fetch that and it's actually pretty simple to fetch it what we have to do is just say con Pro profile account we're going to make a variable to store it in and say await program right this is the program itself if you remember it has access to all the accounts. user profile. Fetch and then what do we want to fetch we'll want to fetch whatever we got from profile PDA okay so from here I know I'm running a lot of code right now but if there is a profile account right if they found something right let's console log load oops load airbnbs right else what do we want to happen right we want to essentially uh initialize a user and we're not actually going to initialize a user right here we're going to count to log need to initialize user okay so which do you think is going to run load airbnbs or need to initialize user or are we going to get an error right could be anything at this point right I'm not sure let's go ahead and check it out okay so let's hit refresh okay nothing saying it's a error just yet let's look at the console okay reading properties of null that's not good um ah I know right so it's because uh we're not calling the function let's call the function so say start all right we wrote The Recipe but we didn't make an order for it hey okay so we got an error the user does not exist right there's no user account that means this o wait failed it went into the catch so that means this catch ran and we know we need to initialize a user but now the question is when do we want to initialize the user right when do we want to initialize the user well if you remember if you watch the to- do app we can set up a button to initialize that user right cuz I don't want to overwhelm the user initializes them right away let's make a button for it all right so the question now is where can we initialize the user or where should we initialize the user so let's take a quick look and understand what we're looking at I'm going to open up Airbnb clone awesome cool so the way I'm thinking about it is if you look at this this is our Phantom wallet connection if you remember the to-do app there should be a button right here that lets us initialize the user right we can actually make it the become host button or we can set up a another button right here so what component is that area that I'm I'm writing in right what component is this is this the listings this this the index like let's take a look right and this looks a little different because I I got unsaved so I redrew this again but it should be the header that's where it is okay so let's let's go and look at the header I'm going to open this real quick go to components go to header and there we go right and you can see that I've already done it for you but I've already imported initialized user and something called initialized right so if you go down below here awesome this is probably where we want to put that button so let's put a temporary button for now and say uh initialize initialize all right we'll just say initialize for now bring this back and there it is right there's the initialize button right no styling whatsoever but we want it to be conditional right what do I mean by conditional well if we're already initialized right remember how we got that uh account doesn't exist right if the account does not exist we should see this button initialize if we don't see that button I mean if you don't see the if the account does exist we shouldn't see initialize you with me cool so easy way to do that right let's say we're looking for something called initialize that's a variable let's say uh if const initialized is equal to true if that's true should we see the button no we should not see the button so what can we do here we can say curly brackets and we can say if initialized right this is called conditional rendering right this is a turnar statement if initialized load nothing all right cool and let's put it in here so it doesn't give us an error and then this colon right here is like an or statement if it's not initialized if it's false load the initialized button oops Let's do an ALT C here contrl b boom should be a lot easier to see Okay cool so if initialize true load nothing if it's false load the initialized button oh okay so it's already declared as a cons that's fine let's say let might because it's already declared somewhere cons initialized let's see am I declaring it somewhere I'm going write initialized no there's no results okay so does not not defined yet so what's the problem let say lit I'll make it easier I'm just going to make this outside of a header all right so we're going to go up one parent and then bring it back down does that make sense so if we go here let's just say let uh initialized is equal to True make sure I spell it right and go header and let's add that in there initialized is equal to this is called a prop and I'm passing it initialized as a prop and the name I'll give it is going to be initialized okay and if we go to the Airbnb let's see if it's undefined oh now I see it cuz it's cuz of this spelling I keep spelling wrong so let's go back to the header scroll down initialize okay cool awesome so look at that initialize is true right so we don't see the initialize button this conditional rendering is running this one right and what's happening how come initialize is not here but it it's working right it's cuz I passed it down as a prop right so if you're not sure what props are if you're a complete beginner right think about it that like this right I defined the variable initialized over here right what happens is I passed it down as a prop to here so header knows what initialized is because I brought it down like this okay what we want to do eventually is have uh our custom hook right to picture this as a hook our custom hook which defines initialized right this is our used Airbnb hook it's going to Define initialized and then we bring our hook into here and then we pass that down to header that's the goal okay right so we know what happens if initialized is true what if initialized is false so we can go back to the index not that index let's go to this index and I believe it's at the top right here set that to false and it should come back up there you go so depending on what state it is this button will show up right so let's give it the styling we want and the function so what I'll do is let's move this initialize to use Airbnb so I'm going to erase this right it's going to say it's undefined that's right cool let's go to use Airbnb and instead of making it a static variable let's make it into a state yeah so if we're going to make it into a state want to say const initialized initi ized and set init initial initialized is equal to use state right think of this as a toggle right so the value of initialize should start as false right and it's going to turn true if there's a connection okay all right so this is a state then I can return initialized okay and it should be false at the moment because that starts at false and then what we could do is go back to this index and we'll bring it back here and now it should be defined again okay are you following cool right awesome what else can we do here we can set up the set initialized button now well we set up the button but we need the function okay so let's make our first function in here which is going to be initializing a user right so this is and keep in mind we already have initialized user on the blockchain right we're going to call that function but we need to make a function on the front end that calls it right so we can say const initialize user is equal to asynchronous okay and we always have to have some check here if there's a program and a public key all right cuz we don't want to initialize the user if there's no program that goes with it and we can do a try catch here catch just shorten this to error and then we can console. log. error cool and in this try catch we can um let's call it right so remember how we got a user all right so first we can do const oops const is equal to find program address sync right and then we have to put in the seeds again so let's put in the seeds we can say utf8 incode all right what's the string that we put for the seeds you got it user State okay then public oops public key. to buffer can do alt Z real quick and this should be in the array still and then we can do comma program. program ID okay cool all right so what's basically what we're doing is we're getting the profile PDA as we showed before right and um it's going to find the PDA for us and remember there's not there shouldn't be a user there this is like the test uh if you go back to this this is literally like the test that we were doing for initializing a user This Is Us generating from seed the the PDA address and then we're going to put the user account data at that address okay and for whatever reason that fails it's going to conso log an error but what we want to do next is set up the transaction that happens right so we can say cons TX for transaction and say await program all right this is our program remember uh looking at that object if you do methods we have access to all the methods right so I can write this in one line or I can format it like this I can say initialize user right this is me directly calling our smart contract right cool then from here we can say uh accounts right what is accounts accounts is our context all right so we need to put in this this is the account so we need to put in our Authority our public key right our Authority our Authority our public key and then the program ID right so I'll do the authority first I mean our our PDA first right and that's the one we generate from seeds so we can say user profile is Prof oops profile PDA right that's going to be the PDA that we generated oh yeah this should be an object actually okay cool no error anymore and then what's the authority right the authority is our public key we have access to that and then do we have access to the system program right we do this should be the lowercase one program is the capital System Program it's one of our imports. program ID okay and then we can do a RPC cool awesome that's it all right cool so now that's done we can actually put a comma here and pass that function initialize user and then let's go back to Pages let's deconstruct it from our hook initialize user and let's bring it to the header yep initialized user is equal to initialize user and this doesn't have to be the same name as this you'll see that in a second and then let's go back to use airbn and uh we also need to change the state right cuz once we initialize the user this shouldn't be false anymore should be true and then we shouldn't see the button yeah Okay cool so let's do that okay initializing the user that means after this RPC we can do set initialize to True right and that's the not the only time we want to set it to True right in our use effect if you go back to it when should this be true right it should be true this should be true if there's a profile account right we need to set initialized to True right that's should be one of the first things so I'll put it at the top okay cool uh if it's not true right we need to initialize the user so just in case it's not the last state was true we should make it false and that's pretty much for this out statement right the US seeing the button is literally telling us we need to initialize it okay uh the last thing I want to set up is something called transaction pending right if there's a pending transaction we need to sign for we can make a state for it we can say transaction pending and set transaction pending is equal to use State and again this is just a flag right just like before it's going to be true or false depending on what happened and it should be false at first okay and what I want to do with this is essentially uh loaded again if the transaction is pending so we want to do is make another and here and if transaction pending is false if there's no pending transactions you can load the try catch um this use effect here oh yeah we only want this use effect to run based on this dependency module if I don't put anything here it's just going to run once but if I put the public key it's going to run again when the public key ever changes uh and it'll run again if the program ever changes and it's going to run again if transaction pending ever changes okay so what do we want to do with this transaction pending is whenever we start a transaction we can say set transaction pending to True turn that flag on right and once that flag is done right we can do something called a finally here and do a set transaction pending as false right so we don't have to refresh all the time something sometimes this will take care of it cool amazing Okay cool so we can head back to the header let's go to the header yep and what we want to do now is let's fix up the styling of this right this button should have the styling that's very similar to the become host button so we can actually just copy in that where is that button okay so we can say class name and just paste that in there and more importantly we need an onclick onclick on click is equal to and we should have access to this initialize user okay there you go should be defined now let's save that and let's see what happens all right moment of truth I refresh this we should see initialized if I click this onclick function got object okay cool it thinks it's an object let's figure that out why is this an object okay we can test if this is an object by right before we pass down here you can say console log initialize oh I see I see I see right did I put it the same name initialize user oh okay I did we can say console.log initialize user comma yo let's see it's a function okay looks like it's a function it's a function in Index right now the trick is is it a function in the header quick refresh got to type object that's strange oh I think it's because I way the M the way I made the on click let's put this in here you might like that better hey okay cool it's a function now all right now we do some testing okay that's something initialize user is not a function okay that is is interesting ah cuz it's spelled wrong here too God damn it okay so we're going to have to spell it wrong over here without the I well this we can spell right but the use Airbnb it should be without the I and now I might like it how do I spell here initialize user all right I'm just going to hit refresh one more time hit initialize and see what's up cuz apparent I know it's a method I spelled it wrong but right and let's see initialize oh do account okay um yeah this should be do counts hit save hit this hey okay if you see this this is a very good sign it means that uh this the transaction is going through what matters is if I hit hit approve uh that it works so let's hit approve oh look at that you guys saw that the button disappeared automatically without me refreshing right so there's some comments down below saying we shouldn't have to refresh you can just set a state that Flags if a transaction is pending or loading and once it's done that should go away so let's see if that function worked I'm going to there should be two user profiles now let's go so this 8cd right this was generated from our function right we successfully called a function from our smart contract right the only issue is I spelled it wrong right here right but we can fix that right you can just redeploy the contract I mean upgrade the contract and then just export the IDL again right but for now initializing initializing user is doneAirbnb on salana let me know if this sounds like you you're a developer who wants to get into web 3 and you have no idea where to start well I hear you guys and I'm on this coding Journey with you and today I have the perfect build for you to get started today we'll be making Airbnb web 3.0 dap with nextjs on the salana blockchain I'll walk you through how you can create your very own smart contract on the salon chain using anchor which is just a framework of rust we'll then show you how you can take that data and store it on chain think of it as a database that is fully decentralized we'll use Quick node as our RPC node provider to access the blockchain I'll then show you guys Salon playground which you can use to create deploy and more importantly test your functions of your smart contract so that you can understand how it all works we'll use Phantom wallet to authenticate our users and sign them in and we'll use Salon Explorer to verify that they are 100% real now before we get started make sure you use our CLI tool that we'll provide you so you get the fully built front end so we can focus on the salana blockchain code so with that said I'll see you guys in the demo and let's get started all right so let's get started so the first thing you should do is open up that terminal and type the command npx clever programmer at latest this is our CLI tool that's going to give you all the files that you need so that we can have the same files and start at the same place and while it's initializing it's going to help us get signed up for quick node because for this app we need an RPC node provider to connect us directly to the blockchain so while it's initializing we can do that so let's type in that command type in your email address then your name and then select the project you want to initialize and of course it's the salana Airbnb awesome so there we go look at that so it takes you directly to this page and if you don't have an account already sign in so you can make use of quicknotes free tier so I'm just going to sign in and I'll come back once we get to the same landing page perfect so now that you confirmed your account The Next Step which is nice and quick to get started is Click create an endpoint and here you'll see all the different chains you'll see ethereum you'll see uh polygon you'll also see avalanche on here as well but we're going to be using salana so let's click salana and see the three networks there are three networks main net uses your real Soul do this if you're sure you want to develop on there for us and learning purposes we'll be using the devet okay so let's hit continue and then click create endpoint and voila it's done that's all you have to do to get started all you need to do next is take this HTTP provider and hit copy and we'll save it for later so by the time you finish sigining up you should have vs code open right it opens it up automatically for you guys with our CLI tool so we can do what we can do is hit control contr or command J CD to the front end folder and hit yarn Dev once you do that you can also press control click and there we go awesome so you can see this is the static version of the Airbnb it's different from the demo right because there's no wallet connection as you see here and there there's just static data right here how do I know it's static well let me show you why it's static cuz if I were to delete this and then refresh it's back right because it's static data that is just set up right it's not actually being saved that was deleted right what's what's the point of this L well our goal is to take this front end with static data and use the data that's stored on chain and learn about it okay and don't worry I'll break down the app with you guys because that is the main focus so I know you haven't seen what the code looks like and a lot of this is set up for you already so if you're a beginner watch this part and if you're a little bit more advanced feel free to skip ahead when I start coding okay so welcome my beginners let's head over to this fancy whiteboard and let's figure out what we want to do with this app okay so one thing you'll notice is it's not connected with Phantom like I mentioned before so that will be our first step so let's write that down as pseudo code okay so our first step together guys it's going to be set up Phantom connction next right Phantom is a wallet which holds all your soul that we can use to authenticate the users that log in okay what's the next thing we want to do well let's think about the app right this is a essentially a crud app create read update delete right so we want to be able to add a listing right don't worry about how this works just yet just know that we want a function that will add a listing on the salon chain right cuz this is just going to add it to our local environment and not anywhere else okay so let's write that here create salana program and I'm going to use the words contract and program interchangeably just know that's the same thing okay so create Sal of program and for the functions it should be add listing right we also want to and let me say create listing so it's more sense create listing we want to uh fetch listing right read listings right fetch listings and what do I mean by fetch well with fetch if you look this is essentially an array of objects that I'm mapping through and displaying right what we want to do instead is fetch the accounts from salana right and then map through them fetch listings right from there we want to update listings right what do I mean by update if you go back to the demo right we can edit this and change every aspect of it we should still be able to do that on salana on chain okay from there we can also delete listings right since we're going to be creating accounts on chain we can also close the account and that will be considered deleting right cool so this is our goals so let's talk about how this app works and usually when I talk about how an app works I think about the tree or the parent child relationship between components okay so what we can do is let's just bring it over here and bring the code over here okay we're going to share some real estate right so if you open up front end right the first thing you'll notice is on the folder pages that there is app right and maybe we could just make this bigger for now first thing that you'll notice is that there's an app.js and it holds all of this right it has a head which the title and then this component right this component right here right is actually the index.js right so what do I mean by this I mean that there is a parent called app right there is a app all right and inside of app it has a child in here it says component but that is the index okay sorry for the terrible drawing but I'll make it look nice in a second right so that's the index okay so how do I see what's inside of the index right how do I see what's inside of this component well I could just click the index outs here so within the index there's a bunch of different code here right it might be overwhelming but let's just look at what's important right there is components within the index component right so that means the index has children so let's go through together what children does it have so let's clear out all of this and give me a second to organize my files amazing Okay cool so we got our app right here and let's just build out that tree here so we all understand what I mean okay so what do we know we know that we have an app right here app we also know that it has a child called index index okay so now let's go to it together and figure out what is the children of Index right so a child of the index component would be another set of components right so let's see if you guys can see the first component so these are functions all right scrolling right is this a component right not necessarily right it has something within it called Airbnb clone that's the title okay but is this a component yes it is it is a component called what header awesome you got it so if it's a component called header oops let's undo that I can going draw a line right here and say hey index has a component or a child component called header right and you might ask what does header header do right so in order to understand what header does right let's look at the app right this is what it looks like look what happens if I comment out that header boom right what do we lose we lost we lost that little area right here that held our Phantom connection right then that's the header of a normal app so if we common out the header component we lose the header make sense cool awesome okay so we got that out of the way figured that out next is the filter menu right what's the filter menu is that a component yes yes sir so that is a component so what we'll do right here we'll write filter filter menu nice okay this isn't too bad right guys so we have the filter menu and at the moment I'll tell you the filter menu isn't that important for what we're going to do but it's good to note down awesome okay the next thing that's a component is listings oops listings listings all right and I'll move a little bit faster this is all models right what do you think this ad listing model means well if I click add listing this component right here is the add listing model right if I click uh this pencil icon from the listing I get the edit listing model and if I click this heart icon I get the reserve listing model right they all exist in the index right but when does it show it only shows right when this is clicked right so there's a function that's toggling this on and on on and off and I keep the models here so what I'll do to simplify this is there's a picture there's a bunch of children right but I'll just label it as one all the models right so I'll tell you right now which ones are the important ones right the important ones which I'll mark in blue is going to be the header right the header the listings and the all the models right that's where the functionality is going to live right and a good question to ask is do any of these components have children well if you look let's see if oops let's see if add listing model has children so let's find that go to components go to listing go to add listing model if you look they have no no real components just a transition right which is not that important for you to learn at the moment but what you do need to know is that the listings component right this one right here that has a child right because for every Airbnb listing we want to map through it and create a listing item right so if I were to draw this relationship right there could be multiple right and actually this will be multiple too multiple multiple listing items right these are all these squares are listing items right so if I ask you guys on Airbnb right how many listing items do you see right I tell you one 2 3 four okay so that is the tree of our app right so what we want to do for step one oops for Step One is set up a phantom wallet connection right so where do you think I'll need to focus on to do that right if I'm going to make a phantom wall connection do do I need to look at the filter menu no do I need to look at the listings maybe right but if I want to ensure that I'm connected throughout my whole app right I should look right here right Phantom wallet connection should go right here okay so with that in mind let's minimize this and if we go to the pages and then go to the app this is where we want to set up that wallet provider right that wallet connection provider okay but at the moment we don't have a wallet connection provider so let's go ahead and set that up so to give our app some context of what a wallet connection provider is what I'm going to do what we going to do is create a new folder and let's call it context okay and once we have a new folder called context within the context folder I'm going to make a new file and I'm going to call it wallet connection provider. JS this is what you're going to need to do to set up that wallet connection right and once you're there let's import a couple things we're going to say import connection oops not connection connection Provider from salana wallet adapter react so I press tab so that's automatically imported oops how's this guys can you see that cool so after that you can do wallet provider we got connection provider we got wallet provider and then let's import wallet model provider as well and this is going to come from the react UI Yep this one Sal salana wallet adapter react UI okay and then what wallet are we going to be using we're going to be using the Phantom wallet so I'm just going to say Phantom wallet adapter and this is from at salano while adapter wallets perfect okay and last thing we're going to do is let's import uh use memo okay cool all right so we did a lot of imports but we don't have the provider itself so let's set it up by saying const wallet wallet connection provider is equal to Boom all right so this is our provider which we will then bring back to our app right and wrap our entire index with that provider right if you don't understand what I mean just yet just bear with me so we have our wallet connection provider we will then need an end point right and another thing is in the parenthesis here let's add children it's going to take in children cool all right so inside a provider let's set up our end point so we's say const end point is equal to use memo right so this is a react hook and within this hook it's going to take in an empty or Anonymous function right and then you're going to do comma array all right the key thing about this endpoint is this is where we're going to write WR the URL of our endpoint and if you remember the keyword here endpoint right we're going to need you can put our quick node connection here so let's go back to here let's bring this up copy this or if you have it saved somewhere bring it back and then in quotes go ahead and paste that over here right and if you don't like how long it looks sometimes what I do is I'll take this cons connection is equal to this right and then you can just pass in connection right here okay that should work and let's just put some space between those awesome all right so that's our endpoint set up all right the next thing we want to do is say const wallets is equal to use memo again all right and then we we got to get the wallets that we want to use which in this case is just Phantom right so you can leave the parentheses blank in there and just write new we're going to create a new instance of phantom wallet adapter so we're making use of this right here okay and then you know to call this put parenthesis right here and then comma empty array okay so we got our endpoint set up we got the wallet set up and now we just want to put what do we want to do with this provider well we want to return parenthesis the connection provider okay and what do we want to do with the connection provider we say endpoint right is equal to end point right so where is this endpoint coming from we use you use memo to set up and get the connection right we're going to be doing something with wallets next okay so we set up the connection provider if you look at our Imports we still haven't used the wallet provider all right so let's use that next let's use a wallet provider okay and in here we're going to pass in a prop that's just going to be wallets is equal to wallets right just like this right exactly the same as this endpoint wallet goes here right another cool thing we could do is auto connect right if your Phantom wallet is already connected just autoc connected if you don't want to do that you want to make it you know manual you don't have to put this line right here cool awesome we also want to provide the model right so when you click on the connection you'll see like the list of wallets right this is the wallet modal provider let's go ahead and add that as well wallet modal provider okay and that is going to take in children all right so now what whatever we pass into the provider will be passed into the wallet modal provider as well and next which is last but not least make sure you do this so that it actually exports so it's going to export default the wallet connection provider right why do you do this we export it so that we can import it somewhere else and where do you want to import this connection provider if you remember should import it right here awesome cool so in terms import this is already set up kind of for you guys we need to do next is say const wallet connection provider is equal to Dynamic right which is coming from this input right here parentheses and then Anonymous function and you can say import parentheses quotes do do context right and why am I going into context because that's where the provider is okay and then in between these two parentheses you can put a comma here and then let's put the scope in with the two curly brackets and just write SSR FS Perfect all right that should be it now we're all the way back to that first thing I said we want to wrap our connection provider within the app itself right so what we could do is go in here right underneath head headit enter and type in wallet connection provider and put that component which is our index right in there amazing right so everything in this connection provider is set up from our context right here cool so we have that set up now oh look at this so look it already it's already autoc connecting and it's asking me to connect my Phantom wallet but if you look on our Airbnb we haven't set it up on the front end so the connection is working but not on the front end so what do we do well if you don't have Phantom are ready go ahead and type in Phantom uh Chrome extension all right and it should take you to this page right here make sure you add the extension so you can have the Phantom wallet right here okay awesome once that's done set up your account and you should have a wallet it should look like this and you're going to need some soul right this isn't real Soul so don't get too excited right when you're on devet you can do something called Soul faucet and get Soul or Salon tokens that you can use to test your app right so if you want your address right your wallet address click copy clipboard up here and then you want to paste it and for the airdrop I usually put two then you can hit devet and Bam all right we just got instantly two Soul tokens that we can use to play with and now instead of 10 I have 12 right so that's how you set up your salana that's how you get some soul right so let's work on the front end part of this so X out this x out this boom all right so if you want to set up the front end portion about this we need to work on the wallet connect button which is going to go right here what component does that live in right is it going to be on listings on Index right take a look at this where do you think it's going to be at okay cool if you said header let's go you got it right that's that makes sense it's like intuitive okay so if it's in the header let's see if we're right can ex this out let's see if for right and head over to the header whoops okay so if we go to our Index right we think it's in the header right and if we go to the header component let's find that button ah there it is okay see this user Circle icon this is it right here right if you're never sure about what you're doing go ahead and comment stuff in and out and that's how I do it to learn what app I'm us so if I com this out boom notice how it's gone right here right instead of this div we want to replace this with the Phantom or just the wallet connect button we get from salana all right so it's it's there then it's gone see it so what do we need to get this done well let's scroll up to the top of header for now and if you look right here we have the wallet multi button that's what we're going to be using for this we're also going to need something else now that I'm thinking about it we need to require at salana wallet adapter react ui/ styles.css right this is to get the styling of the react router not the react router sorry the salano wallet adapter okay so we're going to require that right keep this one in mind wallet multi button and let's scroll down what we're going to do next is let's set up the wallet multi button so the wallet multi button we're going to take that import and just say wallet multi button okay and I already have styling for this so we can just do class name is equal to Phantom button right and then uh there's also an icon that I have with it let me see if I have it still right okay cool so then we can do something like this start icon uh is equal to user Circle icon self close and the icon is going to have a style and the style is going to be height 32 width let's make that 32 as well and the color I have the safe you guys it's going to be #f or 1f 2937 that should be it and let's just test this out by saying span connect wallet okay let's just see what that looks like so far okay all right hey there it is you can see the connect wallet but the styling is a little off so let's fix that okay so in our span let's go ahead and give it a class name and for the class name we can do text small uh font medium medium text black okay let's see if this helps there you go that looks way better I can actually see it now um I think it's missing a little something actually I think that's fine for now so what we want to do next is let's click on the button in and look at that it all works the functionality we didn't have to do anything we just had to set it up right cool so if I click Phantom bam right I clicked on it I'm connected I know it doesn't look like I'm connected right but there's a way to test it okay so what we could do to prove it to you that I'm connected is head over back to this right here and I want to talk about something really quick so you're going to notice that I'm passing down something called connected here this is what we call props and react and assuming you know what props are where is this connected uh variable coming from right well if you don't know where it's coming from go to the parent right so who's the parent of header the if you know it from our ziteboard the parent of header is the index so let's go back to the index so back in the index you can see it right here I'm directly passing connected to that header Okay so what that means is what is connected right let's find out what that is so if I go contrl F Type in Connected boom boom boom boom Oh I saw it there we have something saying connected is equal to True right so if we are connected right I should see this connect wallet button change to something else I want it to actually just say my address so my address is like this 8 something okay so let's keep this static for now and then let's go back to header right so how do I set up that condition then if we're connected don't show me connect wallet show me something else right so let's do that real quick what we can do right here is turn this to uh a template leral by making this an object right and it's actually not a template leral just make put curly brackets around this right so what we want to do next is put this in quotes boom it still should be the same thing but now let's set up something called conditional rendering and say if we're connected right if connected is true which is it is question mark right we're going to show uh 8 T dot dot dot dot dot this is my address right a static version of my address and then put colon here and then quotes right so what did I do with this line let's do alt Z can you guys see that better cool so what did I do I put curly brackets around the the text and I say if connected is true show me my address if connected is not true show me connect wallet button so what happens when I hit save here boom right look at that oops you see it shows me my wallet connection right here right so my my wall address is at tkz right it's not the full address right it's just whatever static thing I wrote so let's go back to this I'm not sure what this is oh I think I opened up the SVG all right perfect cool so I I can literally make this anything I can say LOL right so now when I'm connected that's what it looks like if I hit disconnect and then we do something like this oh yeah connected is still true all right so even though I disconnected right it's still going to say LOL so let me just connect it real quick but if I change the connection to false right which we set up believe over here then it's back to connect wallet you see that cool so we need to make this Dynamic and we also want to change this SVG here here not this SVG sorry we also want to change this to our actual address and how do we do that well we have something called truncate all right truncate is essentially a function that's going to take my public key and make it to something more readable so if I do this to string oh there you go there you go so it's undefined right and I know it's undefined because what is public key right you can't do a public key of undefined and public key is something I'm passing down already but it's not it doesn't exist if I go to index I go to header there's no public key right there's not even a public key anywhere here right no results right so how do I make public key exist well that's where we can do something called use wallet all right so let's go over here we don't want this static connected right we want a dynamic one so we want to check the connection of our app right there is actually a hook that does that for us already so let's do this use wallet right and if you see we need to import use wallet from salana wall adapter react so again we don't have to write any logic right solono wallet adapter has the logic we just got to plug it in so say const and I'll separate this so it's easier say const object or curly braces right because this is deconstructing and then use wallet right so this is the hook what do we want from use wallet we can break it down by saying we want connected and public key right so what does connected do connected will let us know if we have a wallet connected or not so remember how we had true or false we don't need to write that anymore it will just automatically check if there's a wallet connected public key is our wallet address right so when we're connected we have access to our wallet address right so it's going to know it's 8 right so anytime you see public key that's going to be the public address of my wallet so now when I pass down connected it's not our false that variable it's from the hook another thing that we want to do since we're here is add that public key so we can say public key is equal to public key so now it shouldn't be undefined I hit save let's go right take a look at this guys that is our wallet address it should look different from you if you have a different address right so let's connect wallet boom we're connected there's our address we disconnect it's gone right and and it's dynamic because if I switch to wallet number two hit connect I got to log into wallet number two bam it's 4 a now there you go you have your Phantom connection and now you made it Dynamic to whatever user so essentially you user can log in to the app how's that amazing so we have our Phantom wallet connection set up so what's next so if you take a look at our plan you'll notice that the next thing we need to do is actually set up the salana program itself so if you want to get started doing that the cool part is we won't have to code on vs code for a while we can actually go to this website so let me make this bigger and let's go ahead and write beta. soul. pg. this is called salana playground right if you're coming from solidity if you heard of remix at all this is essentially the remix for salana what does that all mean it means right you can go into here and create a salana project you can build and deploy through here and you can test all your functions right so what we're going to do is we're going to create a new project right and we can call this uh Airbnb salana and another cool thing it's just new we can also it has seahorse support which means we can write python with salana and we might do a video about that soon so drop a comment below if you want to see us do a python video with salana that could be really fun so uh we're going to be using anchor so let's hit create and now we have this right here so what I'm going to do is make sure we build on this boom build successful yep yep cool so this is essentially the starter files for our project okay so what I'm going to do next is go to the files and I'm actually going to just delete everything CU I want to start us from bare bone scratch right we gave you a lot of the front end I'm going to give I'm not going to give you any of the anchor code right we're going to build from scratch together how does that sound good all right so if you're with me let's get started now before we get too excited writing salana code what we want to do first is we need to save the changes we made so far right we did a lot of phantom stuff so open up your vs code and if you did a get push right you'll notice that it says for me everything up to date but for you guys you're not going to have permission right so let's make our very own repo to save your changes right and I'll walk you guys through so go ahead and make a new t Tab and head over to github.com and there's multiple different ways of creating repositories use get Kraken or whatever thirdparty app you have I'm going to go ahead and click new repository right and for here we can say uh salana Airbnb right cool oh I already have one we can do Airbnb Salon there you go cool and then you can make this public or private but let's just not click anything else and click create repository if you do it that way you'll see right that GitHub tells you exactly how to create a new repository right but we're going to do something a little bit different than these steps right here cool so going back to your vs code right this is already a repo right this CLI starter branch is coming from another repo how do we make this your own well all you have to do is say get remote set URL or origin and then let's copy this link right here okay so I'm going to bring this back then let's paste that and let's hit enter boom right so from here we can say get status right and notice how it has the context cuz we added that and we can just do a get add Dot and if we do get status again now it's going to be green right the package Json is red because if you do a CD dot dot then do a get add let's check it out boom so now it's all green that's a good sign what we can do next is a git commit dasm initialized our own repo right you can put whatever comment I'm going hit that and if we do a get push right it's going to push to our new you repo if I refresh this bam there we go right so you can push to your own repo now without changing any of our files right and you can see over here that it's that David right who helped me work on the last app is still a contributor as well okay so now you can save your code and anytime you make a new change I encourage you to push those changes on GitHub okay so that's my quick GitHub lesson the reason why I did this guys cuz I want to show you guys that we can deploy our app and make it live right so today we're going to be using digital ocean so there's going to be a link in the description right go ahead and click that link so it makes the sign up process a lot quicker so that link should take you to this beautiful landing page made by our friends a digital ocean and if you use that link we get $100 to learn with digital ocean okay so go ahead and sign up and create a free account I recommend you use GitHub because it be a lot faster boom so I signed up through GitHub and once you have everything set up for digital ocean go ahead and click apps and this is what we're going to need to do right here so what is digital ocean digital ocean is infrastructure as a service what does that mean well this web page hosts multiple servers that we as developers can use for ourselves right one of the use cases that we're going to be using today is creating a static server Live app right you can also connect it to a database right you can use kubernetes and then we can also create an app of course so click create an app you'll see see create resource from source code I want to click GitHub so click on that and wherever you want to use next thing I want to do is find my Airbnb salana which is going to be this one cool and this is the branch and this is the source directory right so this is one is important right what's the source directory it should be the directory of the front end right so what you want to type in is slash front end right here okay and the cool part about digital ocean is that it has an auto deploy feature so remember I said every time you make an update we want to push those changes every time you push those changes autod deploy will redeploy your app so that's always the latest version and it's synced with this repo all right so that's super awesome go ahead and hit next right go ahead and hit next next next right we don't have any environmental variables set up just yet right so we can just click create resources and let's see anything else all right cool awesome so our app is called cining uh you're free to change it as soon as it's done to whatever URL name that you want for this project and from there we're just going to let it build all right so the build is complete now what we could do is click on the live app and there we go right this is live you can take this link and I always say you could share it with your friends you could put on your portfolio and at the current moment you can only connect your wallet and that works so cool so anytime you push changes to your repo your live link should be up to date so that's it for a live link let's get back to salana playground okay so moving on we're back at the li. RS and to get started what I want you guys to do is type in the word use right the reason why I'm typing in use is this is the way on anchor to import right so you know import from JavaScript use right is going to get anchor Lang if you don't know what anchor Lang is it's a library for anchor right and we want to get certain things from this library or crate sometimes it's called right so what we want to do we want to get something specific from anchor Lang So within anchor Lang I want something called Prelude okay and then you could if you go colon colon think of this as going inside a folder right first uh it's Airbnb salana and inside we go to the front end and inside we go to index.js right so within Prelude right if I do a star here we want everything within Prelude as well awesome so that's our first import that we'll do for now what you want to do is type in a semicolon here if you didn't know unlike JavaScript right we need to put semicolon semicolons here to indicate the end of the line otherwise we get an error okay cool awesome and then from there we can do a hashtag square brackets program right this is essentially uh a macro which is going to Define what a program is so what you write underneath underneath this directly underneath this is the program so from there we can say Pub mod clever Airbnb all right and if you put curly brackets right here this is the scope of our program okay so if you guys are with me you're in a good spot all right the next thing you want to do uh in between these two things let's declare ID oops declare uncore ID and then put exclamation point and then put parenthesis okay so every program has a unique key right represents the address of that program like that's where it is on on the blockchain right and salana playground will generate you a program ID if you click this toolbar right here on the left hand side click copy and then you could just paste that there that's your program ID it's going to be different from mine of course so if I hit build oh yeah I just mentioned we need a semicon here hit build it should say build successful right so that means this is a a valid program right if I asked you does this do anything at the moment it does absolutely nothing cuz there is nothing right so let's make it do something right let's give it functionality okay so what we can do is we can say Pub FN right FN is function right in JavaScript to make a function I would write something like this function uh add user right it looks it would look something like this right for rust or with anchor you can say Pub FN and then the name name initialize user right then you put parentheses right and then you can do uh this an arrow and write in result like so and there you go cool so this entire thing is a function right okay so don't mind that what we could do next is all right so don't mind that error it'll fix itself in a second what we do care about is this function right here so this is initializing a user right basically what we want to do with this program is create accounts or create a PDA right so uh just temporarily we want to create a PDA all right you might ask what is a PDA well PDA stands for a profile derived account right essentially right we want to create accounts right or pdas PD are essentially accounts created from the salana program right and we could do this to hold certain amount of data I'm simplifying this but a what kind of what kind of account do you think initialize user should create right initialize user user oops should create a user account with default data okay so what we want to do is have this program create a user account which stores all of our user information Okay cool so in order to create a PDA we have to give it some context so what we could do is pass in context as a parameter right so all I have to write is CTX okay if if I was going to add two numbers it could be like num one num two right this should look familiar in this case we're going to do CTX right and with anchor you need to specify the type what kind of what type is CTX looking for well it's going to look for context right and this is a struct in Anchor right and the type of context it's going to be initialize user right to understand what I mean by this is I'll ask you this does initialized user exist anywhere on our app no it does not right so that means we're going to have to create it later on so usually when we create a function this is the pattern we create the function it's going to take in a context and the context usually has a similar name to the function we created okay so we're going to hit pause on the function right and we're going to move on to creating some struct so at the end of your scope down here let's create the uh initialize user struct okay so to create a PDA right create the context right all right what we want to do is do hashtag derive parentheses accounts right so again similar to program right in this case what you WR underneath this maer right here is going to be the PDA or the the context right so we can say Pub struct and then this right here this Name Pub struct initialize user right and then you're just going to write info okay after writing that you can put curly brackets right here and then you can do hashtag account mute right we making this mutable meaning uh this can change right what can change whatever I put underneath here so the authority right what does the authority represent whenever you're working with salana and you make a transaction Phantom will open up and ask you to approve uh that transaction right so if I want to send money to someone you have to approve the transaction because you have the authority right so here when I say Public Authority what kind of type should it expect it's going to expect a signer right and the signer is one of the things that come from anchor Lang anchor Prelude right so this we don't have to create okay and it's going to be mutable because the authority is going to depend on the user it's not one static thing okay so now for the actual creation of the account itself okay so to create the account we can say hashtag square brackets count knit oops and actually say enter here it's going to take in a couple things now it's going to be init right if you write this anchor automat automatically initialize an account for you so we don't have to set any of that up what you do need to set up is the seeds all right uh you can think of seeds as a variable that will create a unique hash or address for your PDA okay from for now uh you it takes in strings right but I'm going to write something here it's going to say user tag right which is going to be a string but it's the uh variable holding the string but pause that for now it's also going to take our authority. key right do as reference okay cool and then from there uh we're going to write bump okay so when you're ever you're this will make more sense later but let's say that hash exists bump will just go to the next available hash Okay cool so who's paying for storing this data right or running this transaction it should be the authority right whoever the owner of this user should pay for it the next thing that the account is going to need is the space right because with ankor or just salana and rust in general they care about how exactly how much space does it take right it needs to know so to figure out how much space it takes or you got to think of what does the user need to hold right so if you're thinking about what a user needs to hold I'm thinking that it needs to have store its Authority it's last Airbnb and how many airbnbs does it have right so if I were to uh show you guys what object would look like right so let's say user one is equal to object and uh let's see if I can make this oops okay let's make it like this right user one has uh a key of the authority right and it's going to and then the authority is going to equal uh 8T right this is my account from Phantom right it's also going to have the last Airbnb right which I'll say is zero right and then it's also going to have uh Airbnb count think of Airbnb count as the total amount of airbnbs and that should start at zero right each of these things are going to take different space depending on the type right so this right here this Authority is going to be type public key and a public key is going to take up 32 bytes usually this u8 we can say that it's going to it can just be one right same thing with this this can also is a u8 an unsigned integer 8 byes you can just say one okay so in terms of space it's essentially 32 Plus + 1 oops + 1 + 1 right Plus 8 right the reason why I'm doing Plus 8 here is because there's something called an account discriminator that is going to be added right to essentially make space between this account and the next account right so when I say Plus 8 this is what it means Okay cool so that's how much base it takes up don't worry if this makes much sense yet we're going to be doing it over and over till you get the pattern got it cool so that's it for this space in terms of this account right here and remember underneath it is um all this information is going to go so this is going to be the what we'll call the user profile right and the user profile it's going to expect a type of box which is holding an account right which is what we're creating and that account is going to have info comma user profile okay awesome and then account is something from anchor Lang and so is box right but user profile right is an actual struct that we need to create it doesn't exist yet either right so let's follow this pattern right so initialize User it's a context the context of what initialize initializing a user is is that it will have an authority and that's going to have a user profile but then we need to Prof Define what the hell is a user profile right so we need to create this later as well okay cool and then we could say Pub System Program and then we could say uh program right this is built in you're going to you're going to write this over and over for the other context again so it's going to be info and then system perfect Okay cool so we finished the context uh if I were to run this it would fail because user profile it's not going to know what that is right so to Define what a user profile is we can actually make that struct here right Pub struct and then you can say user profile right or right we can make another file right we don't have to put everything in one file or else it could get really bloated right so what I'll do is create a new file and then you can go over here and call this one States okay and within this stat we also want to import anchor Lang Prelude and we'll get the star cool semicolon awesome all right so what did we do we defined the context for initializing user uh we then need to Define what that account looks like so let's define the user account right so to Define an account we're going to say an account right and we're going to do hashtag derive default right okay then underneath we're going to say Pub struct user profile cool awesome and then remember what I said it's going to take in an authority right and what's the type of authority that it spec it's going to be a public key uh it's also going to take in a last Airbnb which will be an unsigned integer 8 right and then also going to be Airbnb oops count u8 okay cool and remember just so you remember how much space each type takes right I can write it right here so this is 32 this should be one and this should be one as well right so that's where I'm getting those numbers so this is the account for a user this is the user account okay uh here's a question if I would run this it would still fail right it's still going to fail because why right does user profile exist on this page it does not right so how do we make it exist on this page right think of this import right here right so what we want to do is say Pub mod States right and then we'll say use right here's use again create colon colon and we'll say States colon colon Star right basically what I'm saying with this is get me everything oops everything from States right so what's in States all of this give me all of it right and bring it to this scope right here so that means I can call uh user profile in here in this scope okay we will need to do one more thing right we can erase this and what we can write is use super colon colon star semicolon right what what the hell did I just do well remember how I said this brings states to this scope right use super takes anything from this scope into the program scope so I can refer to user profile uh as normal okay so it should know that this exists Okay cool so just want to make sure it's still there States awesome all right and if I were to run this it'll still give me an error because this you user tag here it's going to say what the hell is user tag and like I said uh this is a variable that's going to hold in a string right so the seeds that it takes in to generate that hash is going to be a string and then my public key essentially right so let's define this variable right so you can say like something like uh const user tag right is equal to right and then Define it here but just just to keep in with our pattern we can make another file so I'm going to do that as well and I'll call this constant. RS so now I have constant. RS and what I'll do next it should be anchor Lang prel right anchor Lon Prelude colon star boom not eight semicolon okay all right so here we can Define our constants right so and again there's nothing wrong with putting it all in one file right I'm just showing you guys that you can separate it so I'll say constant here and then we could say Pub const user tag right and then we can reference itself as a u8 is equal to the string user state right cool all right so now we have you user tag and that state set up uh in the file called constant and then we are need to get the constant so get Pub mod constant okay and then here we can write uh constant constant col star parentheses right and use super we'll take that from this scope and bring it into this scope cool so it should know what user tag is and it shouldn't give us an error Okay cool so last but not least on the function before we write any logic usually in a function we need a return if you write okay here think of that as a return in JavaScript right let's say I wanted to return the number five you would put that right here uh for if I leave it blank it's not returning anything it's just going to run the logic and then be like okay done all right so if I hit build uh there shouldn't be any errors now awesome so this means the build is successful right we're only going to get warnings warnings aren't bad right if you see something like a warning it just says unused variable CTX right because that's true it's just letting you know hey uh you put this here but you aren't using it so don't worry about warnings right it's errors that um really matter so we have the initialized user set up now let's just write the logic for it okay so all the setup is done let's write the logic of initializing the user right and again if you want remember we want to initialize the user profile account with default data right if you go back to your States here this doesn't have any values associated with it it's just an authority that's expecting a pub key it's just expecting a number right but doesn't have a value so what number should it start with right how many airbnbs should each user have at the beginning it should have zero all right so if it has zero let's get that information and set it up okay so first thing we got to do is say a variable let right user uncore profile right nothing too crazy this is just one variable and we can set that variable equal to and mute right so this mute here is saying that this variable can change uh depending on the user profile right when JavaScript right when I make a ER let uh num equal one right if I wanted to redefine the value for this I can say num is equal to 9 right if I did this in Rust right it would say would give an error because I'm not allowed to change this right I can change it or make it mutable by writing mute okay and then I can say CTX what is CTX right if I were to console log CTX if I could do that incher I would see um this initialize user content text right cool well what do I want from that if I do do accounts right and then do Dot and then let's look in here if I do user profile then I should see in the object itself right the user struct so I can say user uncore profile there we go cool so when I say user profile I essentially get this struct or this account or if you're JavaScript this object okay so if um user profile is giving me an object right I'm thinking I'm saying object because I'm thinking JavaScript how can I get the total amount of airbnbs right what do I write after this to get the Airbnb count if you remember dot notation all you have to do is just write dot Airbnb count right and what do you want to initialize that count to be right if you're just making a user how many air bnbs should they have they should have zero and there we go okay from there let's just do the rest of them so I'll say user profile. Authority is equal to CTX do accounts right I'm getting this again right and I want to get my authority here right and remember this the pub Authority we can call on that so if I say Authority right I can get the key by calling the method here key okay and set that equal to this key right cool this stays the same right but we could also add user profile do what what else are we missing all right I need his last Airbnb all right so the last Airbnb is going to be last Airbnb equal to zero as well okay awesome and guess what guys that's it for initializing a user so what can we do next well let's hit build let's hope for no errors hey build successful right uh doesn't look like there's any unused variable either so let me just refresh this to show you guys right clean terminal hit build build successful not even any warnings so super clean code right now the cool part the reason why we're on Salon a playground is oh is that we can build but we can also deploy right what does deploy mean it means I'm going to take this program or this smart contract and deploy it on the salana blockchain right and when we deploy it on chain we can then get this program by its address and then call any of the functions towards it so let's deploy it right and when you deploy you're going it's going to ask you to connect to your salana playground wallet so that's going to be uh on this left hand corner here so click on that to connect your playground wallet if you hit deploy and it says you don't have enough salana what you could do is click this wallet click this this right here and click airdrop and this will help you get salana sold right so there it is I got two sold just now right so do that to get enough Salon to deploy the contract you shouldn't need much to deploy it since it's not that big yet cool so not only did I got two Soul the deployment was also a success which means if you hit this cool test tube here we can see the user right and another thing right it's reading so basically Salon playground is reading the the program and it's saying oh here are all all your functions and here are all the accounts you set up which makes sense right we have a user profile account and initialize a user all right so did this program create any users at the moment let's click fetch all and you can see it's fetching all the user accounts and you'll see an array empty because we didn't create any accounts our function right here initialized user should create an account all right so let's go ahead and test this function works and maybe you'll understand a lot better after we test it so so the authority remember the authority is expecting a public key right here and it's also the signer right so that should be your address your playground wallet address or your Phantom wallet address so you're just going to click that drop down click my address and you're good to go now here's the important part for you to understand it also needs a user profile right it needs an address for your PDA right um at the moment we don't have a place to put that data for the user account right we can get that address or that hash I mean through seeds right so which is user tag which is what guys a string and then your own authority all right so if you click this you want to click from seed right and you want to write in that string so you don't write user tag here this would be wrong what you want to do is type in the value of this this is a variable right and the variable is going to equal user state so that's what you want to write you want to write user State all right this is important because we going to do it again later okay so the next seed right there's one user State string and then the authority which is just going to be copy this and then paste it here and then it'll generate unique hash and this is where that user account uh will be living so if I hit test boom look at that test passed I love seeing that and now if I fetch a user profile there we go this object right here represents a user so how many users do we have guys we have Uno right we have one right and you can see how many airbnbs total he has zero what was the index of his last airnb zero okay cool and also it has your Authority and there's the public key right there so I hope that makes sense to you we're going to do this over and over again with the functions and hopefully it's going to stick right so let's work on on the next function all right so moving right along let's create our next function which is going to be adding an Airbnb I believe right we want to add or create an Airbnb so let's go back to playground and let's set it up right so how do we create a function guys well it's going to be Pub FN add Airbnb right it's going to take in context of course and we can write Arrow result like so okay cool so I want to move faster and faster as we do these functions because the pattern is going to be very similar right what is different is the logic here so we want to uh basically initialize an airb account with um information pass right what does that mean that means we're going to take more than context in this uh function right here so what I'll do is I'll put enter and we can also press enter and we can actually leave it like this right so it's going to take in context it's going to take a location uh it's going to take in right it's going to take in a country right what else goes into an Airbnb I look back it's going to take in Price Right Price and it's going to take in an image URL right and we can't forget with rust we need to type in the typ and context is going to be the similar right what's the pattern guys for context it should be the same name as the function most of the time and we can say add Airbnb all right does this exist yet nope not yet all right so we have to make it eventually so keep that in mind location uh location when I'm running this function right what should location be should it be a number No it should be a string that's kind of how you want to think about this so same thing with country string right price string right and this is interesting right I'm doing price and I'm doing it as a string right because in our Airbnb clone right when I want to add the price I'm inputting it as a string it doesn't have to be a number right if you did want to make it a number you can put uh u8 here okay but let's make it a string and for image URL we also want this to be a string boom okay so all the parameters are set right we're going to take these parameters later and apply it to our Airbnb account but right now we don't have our Airbnb account set up right so let's set up the context first let's create the Airbnb context okay so how do we create the PA context well we need the derive accounts again so we derive accounts and then let's see oh yeah we also want to do instruction here and this is new we're going to say instruction boom okay cool instruction right make sure I spelled that correctly cool so we got these two macros set up let's write Pub struct and then if you remember what I wrote it was add Airbnb put in the info right here and then after that Curly brackets bam that's the struct for the context and here we're going to say hash account right and I want to get the user profile right so here I essentially created or initialized a user account and here I want to uh use that same user account right so to do that instead of uh saying init right oops init I'm going to say mute right because when I add an Airbnb it can be different users I can add Airbnb you can add an Airbnb Kazi can add an Airbnb right so I'll say mute and seeds right so seeds if this is going to be a user profile what seeds do we need to fetch a user right how did we generate this seed well we took in a string right that string was called user tag right to find that user that we're talking about and we also need to do authority. key. asre okay cool and then we also need to add bump right and then has one Authority right who has control over this Airbnb it should be one person right Kazi shouldn't be able to mess with my Airbnb accounts right so we can say has one equals Authority okay and then directly underneath this you can write Pub user profile which is expecting a box that holds an account right which is holding the account of a user profile and that's the account that this box is holding okay that's how you can read it boom okay so we have a user profile right we need this so that we can determine who owns this Airbnb right who has authority over it then we need to actually have the Airbnb account so if I ask you guys do we have an Airbnb account setup right we do not we only have a user profile setup right so how did we create a new account it's going to be very similar to this so if you get lost keep this in mind okay so again to start we're going to say hashtag account right and hit enter here and how do we initialize an account with anchor we say init we take in seeds right but is it's not going to take in user tag this time right the seeds that to make or generate the uh public key of this Airbnb account is going to be Airbnb tag right another variable right which we'll make later it's also going to take in our Authority right so that's the same do asre right but what also helps us generate a unique hash will be to put um the index of the user right I need to know what was the last index of the Airbnb so if this was the first Airbnb the last index should be zero right so if I make a second Airbnb the last index would be one right so that's going to help us generate a unique one so we don't get the same thing over and over right we're just going to say user profile right we have access to this because we have user profile and then we can getl Airbnb right and that's it right so that's how we get the unique hash and these are the three seeds that it takes three variables that generate a unique uh like this okay from there we just need to write bump and then who pays for the the the space or the creation of this account should be the same as the authority and the space right let's look at well we're going to need to think about what an Airbnb account is so we'll come back to space in a second just know that there's going to be an eight here okay so I can write Pub Airbnb account that's going to be a box that's holds an account right and that account is going to be an Airbnb account awesome okay so you'll notice right away this is the Airbnb account that we need to create so what I'll do is let's define what that is so go to States right we're in States now and now that we're in States we can create the Airbnb account itself so to do that same thing as above right just going to write that this is an account right and it's going to derive default and then we can say Pub struct Airbnb account make sure it's spelled exactly the same as you wrote it here okay just want to make sure cool all right so hopefully this will help you understand a little bit more if you didn't understand what the user account was when I have an Airbnb account I mean what is the information that describes an Airbnb right so let's think about this air every Airbnb right is going to need a location what's the location of this Airbnb and the type of that is going to be a string it should start to look familiar right what about uh you know where it is right but where is that location located right so you describe that as the country what country is this in right okay what else do we need well we also need the price right and again this could be an integer but we can also do it as a string okay cool what about um an image yeah it's going to need an image right cool so an image and we can say string as well and we're going to say Pub price right and that's going to be a string as well wait no we did the price already we need one more thing we need location country price image and oh this is another thing that's going to be important later but it's going to be is reserved and usually you write this uh in snake case but in our front end we have a camel case so I'm going to write it as that it doesn't have to be written this way right I'm just going to write it like this cool so this are the keys to our Airbnb object right now translated to us this is a struck and all of this is what makes up that struck Okay cool so that's our Airbnb account right uh one things that I do realize that we're missing is we need to keep track of the authority and that's going to be type public key and we also need to keep track of the index which I'll write as idx okay cool all right so this is it full thing now this should be defined right so now this exists and now we can work on how much space does this account take up well if we're going to do the same thing here let's think about it Pub Key is 32 all right index one location uh is going to be a string this is going to be unique because string is usually four plus how long do you expect the string to be right in char characters right so I say 256 is the max that we can expect and then same thing with country 4 + 256 and then price this could be 4 + 256 right again you can make this smaller but just know that if you make the location longer than this many characters or bytes uh it may fail right for the URL it's going to be 4 + 2,048 right because this is the longest URL string that you can have okay and now we can do for a Boolean usually that's going to be eight Okay cool so all of this together it should equal up to uh I have it here oh yeah 2,865 just could did a quick addition on my calculator on the side but there you go this is how much spacee it takes up plus the account discriminator that I was talking about okay cool uh one last thing we'll need is the account Authority right remember this this is the part that I said you're going to repeat the authority is going to be the signer and this is going to be system program program info oh infro info system boom okay all right and is there anything else that I need no I think that's it oh I just remembered Airbnb tag would be undefined here I'm going to go to my constants and let's define that real quick and it's going to be the same thing as above you just do constant Pub const U airb BN B tag right and again you don't have to name this Airbnb tag just name it whatever variable you want and it's going to equal a string right that says Airbnb state so what do I write when I'm generating a seed I write the string I don't write Airbnb Tech okay because this is a variable holding the string good awesome okay so now that that's defined shouldn't be any errors but I wouldn't be surprised if there is ah mismatch types got oh I see yeah we didn't even finish the function guys so let's do that real quick yeah so we have all of the we have the strs and the context set up we need to now write the function duh so let me just write the function let's hit enter right here so let's make a variable let's say let Airbnb account right so what am I doing with this variable here what do I want to set it equal to think about user profile what did I set that equal to I set it equal to the context and I got the user profile so what I could do with this one is set it equal to the context right and remember this can change so we want to do mmute right and if I do do accounts now I'm in here right and I want to grab the Airbnb account so in the accounts I can say Airbnb account okay cool awesome I will also need the user profile and that's because I need to set the index of the airb as the user profile's last Airbnb okay so let's do that let user profile is going to be and mute CTX accounts let's grab the user profile and now we need to fill the context of the contents of Airbnb account with all the arguments here all right so if I write airbn account if I were to conso log this in JavaScript I'd see an object right how do I get the authority I say do Authority right what should I set this equal to I mean to get the actual key right you can say context. counts. uh authority. key all right that should work because inside here I can get the authority from this right here and Doc key we'll get it in a format that it likes awesome what's next Airbnb account. index set that equal to user profile right calling this variable and from this object get me it should be the same as his last Airbnb okay and then we can do Airbnb uh low. count I mean underscore account. location is equal to location right this location is coming from this argument okay Airbnb count we need country country and I'm just going to quickly move through the rest of it this should make sense equal to price Airbnb account. image is equal to image and then we need Airbnb account do is reserved equal to false right notice how I'm not using any of the arguments I know when I first make an Airbnb uh it shouldn't be reserved or not it shouldn't be reserved already it should just be false are we done nope not yet because I can set the index to the last Airbnb but if I don't change that last Airbnb it's going to be the same index going to be 0 0 0 0 so let's increment it multiple ways to increase Airbnb index for PDA right so user profile is another reason why we initi iiz this user profile. last Airbnb oops is equal to user profile. Last Air Airbnb right and I'm just hit enter here and say do checked add right essentially uh check or increment it right and then do unwrap unwrap it cool just to simplify what this is doing it's basically setting the last a vnb to be whatever it was plus one we will also need to do this for the total Airbnb count right how many airbnbs does this user have right well it's going to be user profile. Airbnb count right is equal to the user profile do Airbnb count right so if he had zero airbnbs after he makes this first one he should also have one as the count all right so we can do do checked add one and Dot unwrap it to get it in the right format cool notice how I can put enter here because the semicolon is what marks the end of the line right and there is check add but there's also check sub check multiply that we can use later awesome all right from there let's go ahead and write the okay and again this is like kind of like a return and let's see if there's any errors got it so it says accounts. authority. key is an unknown field all right so I got to double check any spelling or missing semicolons that's usually what it is so let's see ah okay so I forgot to define the type of this u8 okay and I think it said it had something to do with this this looks good this looks good um is this wrong oh that's good oh comma right here and then it had something wrong with this box count info oh I forgot to close this off there you go always said see how this color is off it didn't finish closing off for the box so now let's try let's hit build hey build successful and we do get one warning and it's this bully in our mention here right it should be snake case it should and best practice should be like this is reserved but again uh just for this project I'm going to do it camel case because when I pull it from the front end I don't have to change anything on my front end Okay cool so if you look here right we have the Airbnb instruction and the Airbnb account but we can't test it just yet because we need to upgrade the build first so you will need some salana to upgrade your build and it's going to be cost you more than last time but since we're on the devet we should be to good to go and in case you're getting any errors uh with Phantom right like if you were getting any errors previously with connection go make sure you click settings and make sure you are on the right Network you should be on devet not main net right because uh this specific playground is also on deite right make sure it all matches okay so it's almost done deploying and Bam okay so we upgraded our smart contract we didn't make a new deployment right so how many users do we have we have one user how many airbnbs do we have created right we have none right so how do we create an Airbnb account well that's what add Airbnb does so let's do this let's do let's make a location let's say space actually no location should be a rocket ship right the country right I'm not going to be traditional let's say space the price 9999 and the image so for image let's use unsplash I think I have it saved for spaceship let's use this one right here it's pretty cool they're on Mars so back to playground you can literally paste this image here and now this is the context part the accounts right so what user is creating this account all right so let's fetch users it can only be one user creating this account and what is that user's public key right so what's the PDA of that User it's going to be this right here cool what's the authority we can answer that question it should be my address my public key right the public key who also owns this user okay so what's the PDA of the Airbnb account right that's not created just yet right that's going to get created through the seeds right so this is what you need to put for the seeds so let's do from seed Airbnb tag right shouldn't be Airbnb TCH should be Airbnb state right next is the pub key which should be your address which I can copy here or you can get it from my authority and last but not least it does take in a number right so I believe it should be a u8 you can double check that right here yeah user profile last Airbnb and the last Airbnb is a u8 okay so takes an A u8 and since it hasn't made anything it should be zero right I can double check that here zero okay so let's hit generate there you go it generated a unique hash from the seeds and then if we hit test let's go it passed boys and girls so now what does that mean if I fetch an Airbnb account we have one Airbnb in this array right think of it as an object right so when we fetch this later we can take the information and map it through our listing items right can you kind of start to visualize how we're doing this so this is is good I hope this is starting to make more sense we have a couple more functions to go so let's keep on going okay so moving right along let's get back to our lib and what we can do next is now let's do edit the Airbnb or what I'll say is update Airbnb so let's create that function Pub FN update Airbnb okay okay and then we can do this Arrow result like so and then curly brackets there we go so that's updating Airbnb going to hit enter here and it's going to take in a couple arguments as well right so of course it's going to take in the context and the context which we'll need to make later is update Airbnb okay and from here it's going to take in the index u8 location string right we need to pass all of this in because depending uh on what we want to do we want to change the location maybe you want to update the country maybe you want to just change everything right so let's pass in everything and only keep what we need okay so location country price and they're all going to be type string string okay awesome all right and then here it's going to be the logic but let's wait on that for a second and let's work on the context all right so you want to make contacts for updating Airbnb what you have to do is just follow the same pattern as last time right so it's only going to get easier from here I'm just going to do accounts and then we can say hash instruction again but this time we're going to take in Airbnb idx 8 okay cool I always spell instruction R instruct nice okay cool underneath this we got to write prob struct update Airbnb info curly bracket and from there we can do the hashtag account again okay I'm say enter here cool so uh what I'm going to set up is the user profile so if it's the user profile right we can do seeds is equal to user tag right and remember this is user profile right so to get the user profile we have to find it through the seed so we're going to take in the user tag the authority. key. asre and that should get us the hash that we need all right right and then bump and then has one okay cool this is all for the user profile um this isn't anything new this is essentially what we did last time right we're getting we're getting access to the user profile again and you could have literally copy and pasted this if you wanted to but I'm just going to write out box account info user profile comma cool so we this is how we're getting access to user profile when we're updating the Airbnb we need access right keyword access to the Airbnb account itself so how do we get the Airbnb account well it's going to be very similar as before and let me not make the same mistake cool now this is the right color so it's going to be similar to how we got the user profile so we want to say mute here cuz it's going to be a different Airbnb account each time uh we got to pass in the seeds to get that hash which will be Airbnb tag authority. key asore ref comma and right it's a Airbnb index dot as R okay cool and then we can say bump okay then we can say has one equals Authority all right then we can say Pub airb account and we can say box account info and then what account that you're getting I'm getting the Airbnb account there you go so we have we got user Prof file we got Airbnb account right and then we just need the usual stuff which is the authority and System Program right and I'll save you the time literally you could just copy and paste this same thing here cool and that's it for update Airbnb do I have to create an account again no because I'm using accounts that already exist we already have a user profile account I already have an add Airbnb account all right so what we want to do now is just utilize the context right right so this should go a lot simpler so we're updating the Airbnb and we just want to change it to whatever we pass in right so let's just get the Airbnb account right and set that equal to and mute context. accounts. Airbnb account okay cool and then we can do Airbnb count that location right is equal to the location we pass in right then we can get the country set that equal to the country oops semicolon not comma okay then we need Airbnb account again price is equal the price and Air B and B account image is equal to image okay and then from there you just got to do okay and that's it and now that I'm thinking about it we're not actually using the user account at all yeah cuz we don't want to we don't need to update it because that user is already has the authority so you know what let's see let go to here yeah we're only we're using the Airbnb index anyways cuz before we're using user profile last Airbnb but that should be the same as this anyways so what I'll do is let's erase user profile and this should still work all right that's update a b i just remove that it should still build let's see if I missed anything hey okay so if we get the is reserve that's fine uh line 59 yes we're not really using this right but we do need to pass it in so let's just do that cuz that's going to come in handy later boom so now we only have one warning and it's the is reserve that one I can live with right we can change that to snake case if you want but it should be fine cool so let's upgrade the contract and let's test update Airbnb awesome so it looks like it was successful and now we have update Airbnb so let's test it out so when we update the Airbnb let's pass in the index I don't know from memory that we should only have zero but we can double check index zero perfect okay uh what's the location let's just say du buy right and if you know where to buy is you set UAE as the abbreviation we'll say 88 and for the image right I don't have an actual URL for this but let's just say it's I don't know like um let's go back here let's say Dubai and I like this one so let's take this paste that here Airbnb account what Airbnb account should we pass in right I don't need to create a new one but we should just take the one that's already made because I know what it is the authority is going to be me and let's hit test hey update yourb me passed so this is what it looks like current L the rocket ship in space if I do a fetchall now you'll notice that it says do buy now and we have different image and a different price and that's what updating an Airbnb should do cool on to the next function all right so the next function that we're going to create is going to be removing an Airbnb which is essentially deleting or closing the account right so let's go ahead and work on that so if you want to make a new function you guys should know the drill by now we're going to say Pub FN remove Airbnb okay make the arrow result like so curly bracket and Bam that's a function all right so now that we have our function let's take in its arguments and when we remove an Airbnb all we need to know is the context right which is going to be context and it's going to take in remove Airbnb which we'll make in a bit it's also going to take in the Airbnb index okay and then we're just going to say u8 for the type awesome all right and there's nothing really we have to do with the user profile besides decrement the total Airbnb count right so let's set up remove Airbnb so just going to scroll down below here hash derive accounts # instruction Airbnb idx u8 and then we're going to do Pub struct remove Airbnb all right so similar to update Airbnb we do need to take in the index of the Airbnb we want to remove just like we take in the index of the Airbnb we want to update right so this needs info as well and then we can do curly bracket and from here let's set up uh the user profile account so we can say hasht account can say mute and then Tak in the seeds of the user so what are the seeds that we need to get a user hash which is going to be user tag and Authority do key do asre and comma we add the bump here and we'll say has one which is equal to Authority Okay cool so with that done this is what a user profile is and the type that it expects it's going to be a box that holds an account and what is that account it's going to be a user profile account which we created again in our states okay amazing okay so we have a user profile we'll also need to get the airnb account Airbnb account right so then we'll do the account like this oops then we'll say mute close is equal to Authority and then we'll say seeds is equal to Airbnb tag oops this also takes in authority. key do oh yeah asre and again if you ever confused what what seeds do we put in think back to when we initialize the Airbnb right this is the seeds that it uses to create the hash right and we can use the same seeds to get that key so we can just say and uh Airbnb index do as ref okay and that should give us the Airbnb account that we want oh yeah it's not done yet we need bump has one as well and that should be it from there we could say Pub Airbnb account which is expecting a type of a box that holds an account I feel like I'm getting really repetitive but this is the same pattern guys so once you get used to it think about what you need access to right that's my keyword and what do you want to do with it right so we have user profile rbb account and we can copy this because it's the same thing the context will need the authority and the system program now quick question do I need to make any accounts or create any new States here nope I'm just reusing these again that are created and getting the specific uh like keys I need or specific account pdas okay now for the actual logic this remove function is kind of misleading you're not removing you're not writing any removing logic right the key here is in remove Airbnb right is this close equals Authority right it's basically saying hey who can close this or are we closing it like it's all handled through this right here right notice how this close isn't in here right when we're referencing the Airbnb account the close is in remove right so that's hand Ling uh removing or closing that account what we do want to do here is uh decrement Airbnb total total count I believe I forgot what we called it already oh yeah Airbnb not total Airbnb count okay so how do we go about doing that well first we need to get the user profile right luckily it's in our context right and so we can say and mute cx. accounts. user profile okay so now we have the user profile what do we want to do with it all right think back to adding Airbnb account right this is increasing the index we now want to decrease not index but a number so we can do that by saying user profile which is the variable do Airbnb account right so this will get us the Airbnb account of the user in this case my user and you at the moment this current point in time that I'm talking about it we have one Airbnb account so this is actually one right now but to decrement it we can say equals user profile. Airbnb count. checked sub right one and then unwrap okay then semicolon because that's this whole thing is one line okay so check sub it's essentially similar to check add except instead of adding one we are removing one and then setting that equal to the new Airbnb count and that's what remove Airbnb is doing right and we can just say okay awesome all right that's remove Airbnb see if we have any errors or spelling errors yes we do okay so I'm assuming it has something to do with the struct so I'm just going to take a quick look at it so it looks like the error this is definitely closed this is definitely closed oh forgot to put a comma here and maybe that would fix it hey okay build successful right again warnings warnings we can live with right it's just the is reserved which I pointed before so we're good to go and test it right so after we wrote all this code let's make sure we upgrade the program on chain so I'm just going to quickly upgrade and check back when it's done all right deployment successful okay so with that said we can go ahead and test remove Airbnb right so again quickly remember that we have one it's this du buy one right here and let's see if we can remove it so what does removing it look like if I were to fetch this it should go back to being an empty array all right so what do we need to remove an Airbnb we need the index so what is the index of this right we know because we fetched it it's zero and order the accounts right so it now ask yourself if youever get confused here am I generating a user profile public key no am I generating Airbnb account publicly no I'm just passing in what already exists right so with that in mind you just need to get the public key of this user account paste it on there right then you're going to take the public key of the Airbnb account paste it on there then you're going to put in your Authority which is your wallet address essentially then test and look at that all remove Airbnb passed and if I fetch all no more Airbnb right the account got closed and what you'll see too when you store stuff on the salon chain you need to pay some soul and when you remove it since you're not paying that Soul anymore you get some of it back right so that's cool you'll get your salon back because you're not you're not no longer using that space right doesn't really matter on devnet because essentially everything is free we're just testing and learning with salana cool so that's remove Airbnb next up we have the book Airbnb function right so this should be uh pretty simple because we're going to do it in a certain way right so let's just review real quick we have two accounts a user profile account and an Airbnb account right so what should be the difference between an Airbnb account and a booking account well if you look at the Airbnb clone if I heart this I set it for 910 then I do Reserve you'll notice that it's exactly the same as it was before except for a slight difference which that this time it includes a date right it includes a date okay and includes the date because right whenever you create a booking you should know the date that you reserved it for so I reserved it for 910 and this is my nice little Hut in the Philippines awesome and the cool thing is that it's Mark by a heart so what's the idea with a booking account right so with salana I the only people that have the authority for the Airbnb accounts is the person that created it so if I wanted to book it I essentially can't um edit that account and transfer it to me right because I need to sign over that Authority and that's not always the case so what we're going to do instead with booking an Airbnb is we're going to create a booking account which just passes in the same data from the front end right so that's the workaround for this right we're doing this just a practice creating functions right so this one I want you guys to pause the video and try it yourself and see if you can make a booking account right so I'm going to give you guys 3 seconds 3 2 1 you got it cool so let's reveal the answer as I explain it all right so you guys want to book an Airbnb right it should be pretty simple it's just going to be the add Airbnb function all over again with one extra uh property right so let's do it say Pub FN book Airbnb parenthesis arrow and result yep so if you did this so far you are killing it okay it is going to take in a couple things so I'm going to format it like this Tak in the context which is book airb B we will take in the index it's going to be u8 going take in date string location string country string oops price string and look Force image almost forgot that string cool all right so from here right we need to create the context so just going to scroll all the way to the bottom here and let's do one of these okay make this a little bit bigger for you guys and let's make the context so whenever we're making a context we want to derive accounts right cuz we're creating a new um PDA for booking accounts that's the goal right but the first we got to define the context we can write instruction here then we can say Pub struct book Airbnb info and there we go cool so what do we need for a book Airbnb we're going to need uh the user profile account so let's get that how do we get that we're going to do one of these oops not that one we going to say mute seeds what seeds does a user profile account take in takes in my variable user tag and authority. key. asre Bam and we can do bump then we can do has one equal to Authority all righty so then from there we could do Pub user profile and you guys know it's Jo at this point box account info then write user profile so we can get the actual struct of the user profile account okay okay I forget the comma um oh yeah so we have that and now we need to create the booking account right initialize it right so luckily we don't have to do the work of initializing it because anchor can take care of it with for us by saying account parenthesis and init right that's what's taken care of it uh now let's define the seeds what are the seeds of a booking account right so again entirely up to you but I'm going to do is make a variable called book tag right very similar to user tag and Airbnb tag this is going to be a variable that holds a string okay then we're going to take in whatever our Authority is and then let me see dot as ref cool and actually we don't need to add anything else right that can be it okay and then from there we'll just say bump and set that equal to oh no sorry bump and then we do payer and set that equal to Authority right again if you did want to make unique uh even more unique hashes for the seed right we can add an index here but again let's keep we can keep it simple all right how much space does this take up not entirely sure yet so let's just leave that blank for now and then we'll do a pub booking account right this is us initializing the account which takes in that box that we always use okay account info booking account right so the cool thing is guys if you wanted to make any kind of app right let's say you wanted to make I don't know uh a Amazon for example right you can Define your items here like you can make a item account right and then put what uh properties an item has right so that's the benefit of what I'm showing you guys like feel free to use this however you want right now if you want you can even add more properties to each account we can have like the owner um how far away is it from you and so forth right so after booking account we just need the authority and the system program again so we can save time by just pasting the same exact thing and that's it for the struct right the next thing we'll do is need to Define book tag and we also need to Define booking account so start with book tag because that's going to be the easiest and to do that just come down here say hashtag constant then you can say po const book tag and u8 and set that equal to the binary string of book State all right so that's the string that we write when we're inputting our seeds remember that now for the states right we need to Define what the hell a booking account is and if you think about it it's exactly the same as this except what all right so I'll copy this I'll paste it cuz it's exactly the same but make sure you change it right if you're going to copy and paste it make sure you did everything right so it's going to be booking account not Airbnb okay so what's the difference the difference is it's going to have a date right so underneath this Authority you can really write it wherever make sure that it has a date and that's going to be a string and again this how much space does this take up it should be uh 256 all right same amount of space as location country that should be plenty for the date that's it that's the booking account itself we can now Define how much space this takes up and if I add up all the numbers together um it should give me like 3,000 something I believe let me just quickly do it yep 3,125 plus the account discriminator okay cool and if I barring any spelling issues or missing uh commas this should be good to go oh yes forgot to make the logic of booking account yes okay cool so give me an error because I didn't finish writing out the function but we have everything we need set up we just have to write the logic okay so writing the logic what we did if you remember the add Airbnb we needed to get the booking account right and we can do this because that's in our context so it's in our context accounts booking account boom okay so now we got to fill up this right with all the values where do we get all the values for the date location and stuff like that well we passed it all in okay so what we can do is say um booking account oops booking account account. idx equal to idx and let's get the date equal to date booking count. location is equal to location booking account. country is equal to the country and now let's work on price so you can just say price I guess what of that will equal to it's it's price again I know all right so we're almost done let's get the image can say IMG right because that's what I wrote here I think yep and I think I wrote init okay next we need booking account do is reserved and this shouldn't be false right because if it was um adding an Airbnb it would be false right because it's not booked yet but when we make a booking account oops I went too far it should be true and you might ask and it could be possible to go into the Airbnb account and switch that to True right the thing is The Authority right if I make that let's say I put up a nice cabin in the Philippines and kazy tries to book it and he wants to change this to true he wouldn't be able to because I have the authority cuz I made the account right so I could ask him and then he would sign it but there's no guarantee you know he'd be there to sign it or again it's just it's just not right with in terms of authority the easier workaround is to just take the data from the front end pass it to this function call and make a brand new booking account all right cool this again this is just a practice creating the function and that's why uh you guys should get the pattern by now so that's okay let see if it likes it now and Bam build successful yep yep yeah so now we have two warnings cuz there's two is reserves now but again totally okay right so now we have book Airbnb let's go ahead ahead and hit upgrade so that we can finally test it all right there it is there's the magic words deployment successful right let's go ahead and create a booking account before we create a booking account we should probably um make another Airbnb so again I'll use uh Dubai uh the country price and the image okay for the user profile we're going to need to get that from here take this public key and the Airbnb account does not uh it exists but we need to get the right hash for it so we're going to get the seed which is Airbnb state right it's going to take in the pub key and I believe the pub key is just the authority can make sure right here yep my authority which means it's my wallet address and it takes in number and we can put u8 say zero generate and my authority my address test o I do something wrong no unauthorized sign let's see real quick okay I just did the same thing again I might have put the wrong um public key so this is different 60 Let's test PR program oh I see it's cuz the last Airbnb so see yeah last Airbnb was one right so we need to put in one I'm pretty sure that's it so instead of this from seed Airbnb State we need Pub Key my address let's do this try one there you go it passed right I put in the correct uh seed for it now right so now this should say two and total Airbnb is one all right so we're keeping track of its last Airbnb and also keeping track of the Airbnb account okay this is so that uh if we have three airbnbs and they have 0 one2 right it remembers what the last index was so we don't have multiple right so now if I fetch this we have one perfect and now how many booking counts gone right to simulate the front end we're going to book this Airbnb so to do that we're going to pass in the index which I believe it should be one yeah one one the date we'll say September 9 through September uh 10 right is this how it's written yeah Dash Okay we could do that put a dash right here boom do buy right and this will be all automated when you book an Airbnb you won't have to input anything it's just going to take the info of the Airbnb account and then pass that as the parameters so we'll do that $88 image you can uh pass the same image okay cool uh user profile account pass in that booking account from seed uh this should be book State and just my public key right remove the index thing we can just uh do this generate my address and test boom passed there you go that's what we want to see and now when we fetch this there you go so I have my booking account and we have the date of when I'm booking it right so we can do stuff with this right so that's the booking account all right believe it or not we're on our last function which is we should be able to uh unbook an account so if I click that we are no longer have that account booked Okay cool so let's go ahead and work on that so I'm just going to scroll to the top here and let's make that function at this point it should be very easy to make a function right you can just say cancel booking all right and when we cancel the booking it's going to have a result like this okay and the difference between this cancel booking and the remove Airbnb is that we don't need to decrement the account right if you were keeping track of the last booking account then you would do that but for us uh really you can just write okay here and we're pretty much done okay we do still need to write a context though because it's in the context that matters so we'll say cancel book for short and we should also take in the booking index all right I'm passing this in so we know which uh booking account you want to delete okay so we need the index that's okay uh I'm just make a note here closing account is handled in context but if you did want to do anything else like change uh I don't know decrement the total booking accounts right then we could do that here but we don't have that set up right cuz you get the idea so we just need to set up the context all right so this should be pretty straightforward then so we're can say derive oops the Roy derive accounts and we can just say Pub construct cancel book say info right here and within this we need to get the booking account I believe we I think that's the only thing we really need yeah just need the booking account so what I'm going to do is say mute here and let's just say close equal Authority seeds equal to book tag authority. key. as ref then we do bump then we do has has one equal to Authority all right cool and that's the book which will just have this box that we have again yeah as you can see there's a lot of repetition in a lot of things I'm doing right so just know depending on what you want to do it might be the same thing cool so we got the booking account and we just need the authority and System Program once again and there you go we don't need to make any uh account struck because we already have a booking account um yeah just taking in the ID let's see is there anything else doesn't even really need the ID now that I'm thinking about it but we'll keep it in there for now all right so let's just see if the build would pass awesome build successful let's let's upgrade it and then we'll test it all right deployment is all said and done let's test this out right so we should have a booking account right yep we do just to confirm oh it doesn't have an authority that's what I realized why don't you guys tell me the authority should be the same so let's see let's go back to this uhhuh yeah we did miss one thing for booking an Airbnb should have made the Authority booking account. author Authority dot uh equal to CTX accounts. authority. key okay yeah so if you see this 1111 if I didn't specify the authority the default is just this 1111 right here okay awesome and yeah we have this yeah the authority should be my wall address but it's just the default one that's fine all right so we finished deploying we can now test the cancel booking right so we're going to pass in the booking index I lost it so let's get it pack which is going to be one all right uh the booking account is going to be this thing over here and the authority should be ours but since I didn't put an authority we I think we have to use the default one which is this let's see if that works if not it should be ours Okay cool so signature verification failed let's try my address yeah one constraint failed so this this might be a uh account that I don't have authority to change not too sure to be honest with you guys but let's just make a new one let's just book an Airbnb the index of this uh we'll say to the date can be September 9 or that's do 12 to September 13 the location this doesn't exist but we'll do space or rocket ship rocket ship country space price 9999 and the image uh can be test all right so again the user should be me all right that's the user profile the booking account can come from the seed we can say book state right here then the public key which is my wallet address generate and the authority and this time it should have the right Authority oh rent exempt threshold oh I see okay okay good okay so I quickly just redeployed the whole contract and let's just start from scratch okay so we have no users no Airbnb account no booking account right brand new contract right I can show you guys how to do that later but let's go from the top and then we can move on the authority is my address the seed user State and oh not string we need a Pub Key which will take in public key generate test boom cool we got to use it right here's the proof all right this is the public key for that user we know we'll need it later let's add Airbnb right so let's do du buy Let's Do U ae88 and for the text I mean the image address we can do this guy right here and for the user profile we got that it's right here the V7 uh Airbnb account we need to figure out what's going to be the Airbnb account so we can say uh Airbnb state all right then we can do Pub Key which again will be my address and also it's going to take in a number which is going to be the last Airbnb that they did which will be zero all right we can then generate it my address test boom we have an Airbnb Okay cool so we have an Airbnb here's the proof let's book that Airbnb account so to do that we're going to need to book it taking the index which I believe is zero as well yep it's zero the date we can say September uh 6th to September 7th location right we can do do buy same thing right again we wouldn't have to manually put this in when I'm calling this function it'll be automatically passed forward in the front end and we can take this image paste it cool all right user profile it's that V7 thing the booking account we need to generate from seed which will say is um book State Pub Key and we can say my account which is this generate Authority my address there we go okay so we were able to make a booking account right nothing weird going on Boom okay now we want to remove our booking account right so if we want to remove our booking account we're going to use cancel booking pass in that Index right get the exact booking account address right the public key pass in the authority and should be taken care of from the context and Bam cancel booking pass all right after all that if I fetch all boom no more bookings right so functionality wise Airbnb clone is done all we have to do now is plug all of those functions in with our front end so you guys ready for that if you guys made it this far drop a like in the video comment down below that this was helpful and you know what type in marshmallow in the comments so I know you made it this far Okay cool so let's work on the front end now all right so all the functionalities done let's let's figure out how to bring this functionality and call these functions right from our front front end so what I'll do is I'll bring back vs code for a second here and let's go ahead and let's make a custom hook all right so if you don't know how to make a custom hook right all you need to do is just make a folder called Hooks and not make sure it's not in Pages or anything like that it should be its own folder so inside that hooks folder right I'm going to make a new file and I'm going to call it you use Airbnb do JS cool so this is going to be important for later I'm just going to put a pin on this and uh let's talk about a couple things so you have your salana program on chain right if you look under constants you're going to have something set up for you which is going to be the index right and the index.js right you need to set this up in order to get the program right we need to First fetch the program and what we going to do first is get the key right the address right so what's your address well it's easy to find out cuz if you go to the top of your lib my DZ KS right I got it's different from earlier cuz I just redeployed it I got a I started a new program what you want to do next is hit copy this all right get back your VSS code and then replace this cuz this is the demo with yours right so now that should be good right the next thing you want to do right is go to this toolbar right here go to IDL and hit export IDL right you'll see this id. Json uh it says eight here cuz I have like eight of them when I was testing this but yours doesn't have to say that you can double click that for using Chrome and it should open up that IDL in Chrome I mean in vs code so I'm going to press alt Z so you can see what this IDL is and essentially is a Json file of our app right you can see uh all the information like our constants right user state in here right we can also see all the functions we did like update Airbnb what you want to do is just copy this and within the constants on Airbnb Json right crl a and then erase what's in this Airbnb Json and paste well not the image.png I don't know what happened there you want to take all this stuff copy it and paste that in this Airbnb Json all right so that's part of the setup for this hook we can go back to use Airbnb now right and once you're here let's import a couple things that we're going to need for this right and I'll explain more what we're doing here so first let's import Star as anchor from uh at project serum anchor U let's import some react hooks while we're here we're going to need use effect um use memo and use State we might not use use memo but we're definitely going to use use State and use effect okay okay from here we're also going to be using uh import the Airbnb program Pub Key from constants all right this is what we set up earlier in our constants folder right remember where we put the program ID I'm exporting it and importing it here okay next we want import Airbnb IDL from do dot dot constants slash Airbnb dojon right we're importing the IDL as import uh Airbnb IDL cool let's also get uh System Program from anchor actually no we don't want this from anchor we want it from salana web3.js there you go we want System Program from there we then want to use UTF 8 from Project oh at project serum anchor slash dist SL cji slail SL bites Perfect all right utf8 cool we also want to import uh let's see find program address sync and don't worry we're going to be going over all these and whatever I end up not using we can erase right cool from here let's do use anchor wallet use connection and use wallet okay oh yeah so there's also an author filter so let's see do I have that here details I think it's a new toils oh yeah so this is the uh account discriminator right it's all set it's already set up for you guys right need to have this here because what we're going to do is import it in our hook import author filter from utils and let's import public key from salana web 3 and there's just two more things we we can use uh set right this is going to come from the date so when we're going to book stuff later this is important import TR yeah I'm not sure if we're going to fully use those two but we'll see update Fess local perfect okay cool we got all the Imports I know that was a lot right but what do we want to do here well we want to use this hook in order to write the functions we need and then we can call any of those functions within our index so the alternative right guys is if I open up the index right the alternative is I write all the functions in here kind of like how all these static functions are right or I can write all the functions in here and then uh deconstruct it and call it here kind of like how I'm using use wallet okay that's what the custom Hook is going to do all right just for organization purposes awesome so how do we get started can say export const use Airbnb whoops use Airbnb is equal to an empty function cool so all we need to do at the very bottom is return like this and we're good to go right so essentially uh if I make a variable here let's let's try it let's just show you what I mean let's say const uh number or message is equal to what's up YouTube right let's say this is my message to you guys all right and I'm storing it in this hook right what you can do is return that message okay this is how you make a custom hook all right and so once you do that go ahead and hit save go back to your index page let's say import uh use Airbnb and you're going to see this suggestion on vs code you can click it to finish it use Airbnb from hooks sluse Airbnb and let's say const and we're going to deconstruct use Airbnb here we can get whatever we want from that return so right now it's just message right so if I do console.log message right let's go back to our code inspect and let's see all right cuz I don't think we're running it yeah we're not we're not even uh running the app right now let's do yarn Dev or let's CD to the front end would would be a good idea then do yarn Dev there you go right we see what's up YouTube right we see it a couple times but it's not supposed to do that but it should just load as what's up YouTube Once right cool so that's how we can get ususer for a hook right whatever I write in USB Airbnb I can export later right I can set up my use effect there so I don't have to put it in the index as well and then yeah we can call in all our functions there so let's bring back that code and let's keep it right here awesome all right so you got the idea with the hook right yes all right so let's set up a couple different things here uh one of the first things I want to do is get the program okay so how do we get the program well I think we are actually going to use use memo for that all right like I said we're going to be using use memo and use memo it's going to take in an anonymous function okay cool all right so what do we want to do here with this used memo we want to figure out what the program is right so what we can do here is erase message and I did this already but I removed message from here right so it's just an empty here take out that conso log and we're caught up so let's go back to use Airbnb awesome from there let's do if uh there's a wallet right so we have anchor wallet we're making use of this here we can make it simple by saying anchor wallet okay so if there's a wallet we need to set up a provider all right so what's our provider well the provider is going to equal to new anchor do anchor provider okay and it's going to take in a couple of things we'll need a connection uh we'll need a wallet and what else we we need yeah we'll need the anchor default options as well so to get the connection all right to get the connection all we have to do is say cont connection right we're deconstructing this and getting it from not from sorry from use connection right one of the Imports that we have uhhuh and again this anchor wallet doesn't exist yet so let's bring that in we can say const uh anchor wallet set that equal to use anchor wallet cool so we got a wallet we got a connection let's pass it all in so we can say connection anchor wallet and we can say anchor. anchor provider. default options cool all right I'm just going to do an ALT Z here so you can see that a lot better how's that guys awesome all right what do we want to do with all this information well we want to return new a an er. program and here is going to pass the IDL where we can see all the parameters IDL the program ID and the provider right if there's no provider we use the anchor provider right so let's do that let's say Airbnb IDL IR BNB program Pub key right then we could say provider cool yep if statement and then put a comma here and then we can say uh connection and in wallet right we'll run this if any of these variables change Okay cool so let's try to conso log the program let's log in the program and let's put a little note here says program is here okay not that window Oh and before I move on I had I just realized there's a typo here this is not coming from anywhere we're not deconstructor it deconstructing it I'm setting it equal to this anchor wallet so now let's bring in the right window should be this one boom okay cool program is here that means that this VN right here is the program and inside has these attributes right it has the methods all our instructions right you can see add Airbnb in here right so if I do program. instruction I can call in all of these functions that we made right and now we have account we can see all the accounts as well with this program Airbnb account booking account and the user profile right so which account do we want to work on the user profile that's correct right so with that said we don't need to this anymore right what do we want to do right what do we want to do when we load app we want to get all of the accounts right all the necessary accounts right we need to get all the airbnbs and the user or just the one user right cool so what your should we do first first right first check if there is a user right user profile account right exists right if it doesn't exists right something else should happen right so if exists right if there is already user what do we want to do load all Airbnb Airbnb accounts okay if does not exist initialize the user initialize user right or call the initialized user function from our contract right so let me make this a little bit bigger and before I do that actually let's get that uh Airbnb cool so if I ask you guys really quick how many users do we have on this program we have one right but is this user the same as this user it is not right we didn't initialize a user yet right so if I were to run uh all this code am I going to run this if statement or this if statement exactly if the second one right it's not going to exists so we should run and initialize user right if it does exist load all the Airbnb accounts right right so how can we make this code a reality this is called pseudo code right well one way I can think about it is let's make a use effect all right use effect is a react hook right that's going to let us do stuff when the component first loads when it updates and when it gets destroyed right so what I want to run first is this function call it start right and it's going to be asynchronous and let's figure out what start does start is basically starting the app initializing any files we need right that's why I'm calling it start cool so if there's a program and if we have a public key right how can I tell if I have a public Key Well I think uh use wallet can help us out okay so const I can say public key public key is equal to use wallet right so if we're connected we'll be able to see the public key that's connected and it's in this variable right here here okay so we can put public key right there and not comma sorry we need a double an right if this is and both have to be true for this if statement to run so if there's a program if there's a public key we are Gucci all right so what do we what do we want to happen then right well we can set up a try catch well okay set up the catch perfect cool cool so what do we want to try though well remember let's go back to Sal of playground right I keep going back to Sal of playground because the tests really help you understand what's going on right so when we were getting this user profile how did it generate this unique hash this V7 right it generated it from the seed right so the same way it it figured it out right it gave us that uni cache we can find that PDA or that unique address okay I'm using interchangeable words here all right so we can for now we'll say const square brackets is equal to await and we'll do find program address sync right we want to put in the seeds right so to get started we're going to put an array here and we're going to say utf8 right oops sorry do encode right and here we put in that first seed so what was our first seed again it was a string right what was that string it was user state right we're turning it into or we're encoding it here to make it similar to the seed from our Sal playground what else did we pass in as a seed we passed in our public key right but we can't pass it as is we have to to buffer it to cut it in a format that it likes so that's that then we can do a comma here and then we can say program right and then we how do we get the ID from the program we do program ID right H save here it's like no different it has the system program here it has the user profile has the authority our public key Okay cool so from there we'll get the profile PDA right so that's what in this square bracket here from this right it's going to check if there's already something there and it's going to come out as profile PDA but what's the next step guys the next step right let's say uh we did find program address sync we found it right it's this V7 thing but how do we get all the information with that right so let's pretend all I have is this what we need to do is take that profile PDA and fetch it so then we'll get a user right if we if I were to put something random like this and hit fetch it wouldn't work okay so let's fetch that and it's actually pretty simple to fetch it what we have to do is just say con Pro profile account we're going to make a variable to store it in and say await program right this is the program itself if you remember it has access to all the accounts. user profile. Fetch and then what do we want to fetch we'll want to fetch whatever we got from profile PDA okay so from here I know I'm running a lot of code right now but if there is a profile account right if they found something right let's console log load oops load airbnbs right else what do we want to happen right we want to essentially uh initialize a user and we're not actually going to initialize a user right here we're going to count to log need to initialize user okay so which do you think is going to run load airbnbs or need to initialize user or are we going to get an error right could be anything at this point right I'm not sure let's go ahead and check it out okay so let's hit refresh okay nothing saying it's a error just yet let's look at the console okay reading properties of null that's not good um ah I know right so it's because uh we're not calling the function let's call the function so say start all right we wrote The Recipe but we didn't make an order for it hey okay so we got an error the user does not exist right there's no user account that means this o wait failed it went into the catch so that means this catch ran and we know we need to initialize a user but now the question is when do we want to initialize the user right when do we want to initialize the user well if you remember if you watch the to- do app we can set up a button to initialize that user right cuz I don't want to overwhelm the user initializes them right away let's make a button for it all right so the question now is where can we initialize the user or where should we initialize the user so let's take a quick look and understand what we're looking at I'm going to open up Airbnb clone awesome cool so the way I'm thinking about it is if you look at this this is our Phantom wallet connection if you remember the to-do app there should be a button right here that lets us initialize the user right we can actually make it the become host button or we can set up a another button right here so what component is that area that I'm I'm writing in right what component is this is this the listings this this the index like let's take a look right and this looks a little different because I I got unsaved so I redrew this again but it should be the header that's where it is okay so let's let's go and look at the header I'm going to open this real quick go to components go to header and there we go right and you can see that I've already done it for you but I've already imported initialized user and something called initialized right so if you go down below here awesome this is probably where we want to put that button so let's put a temporary button for now and say uh initialize initialize all right we'll just say initialize for now bring this back and there it is right there's the initialize button right no styling whatsoever but we want it to be conditional right what do I mean by conditional well if we're already initialized right remember how we got that uh account doesn't exist right if the account does not exist we should see this button initialize if we don't see that button I mean if you don't see the if the account does exist we shouldn't see initialize you with me cool so easy way to do that right let's say we're looking for something called initialize that's a variable let's say uh if const initialized is equal to true if that's true should we see the button no we should not see the button so what can we do here we can say curly brackets and we can say if initialized right this is called conditional rendering right this is a turnar statement if initialized load nothing all right cool and let's put it in here so it doesn't give us an error and then this colon right here is like an or statement if it's not initialized if it's false load the initialized button oops Let's do an ALT C here contrl b boom should be a lot easier to see Okay cool so if initialize true load nothing if it's false load the initialized button oh okay so it's already declared as a cons that's fine let's say let might because it's already declared somewhere cons initialized let's see am I declaring it somewhere I'm going write initialized no there's no results okay so does not not defined yet so what's the problem let say lit I'll make it easier I'm just going to make this outside of a header all right so we're going to go up one parent and then bring it back down does that make sense so if we go here let's just say let uh initialized is equal to True make sure I spell it right and go header and let's add that in there initialized is equal to this is called a prop and I'm passing it initialized as a prop and the name I'll give it is going to be initialized okay and if we go to the Airbnb let's see if it's undefined oh now I see it cuz it's cuz of this spelling I keep spelling wrong so let's go back to the header scroll down initialize okay cool awesome so look at that initialize is true right so we don't see the initialize button this conditional rendering is running this one right and what's happening how come initialize is not here but it it's working right it's cuz I passed it down as a prop right so if you're not sure what props are if you're a complete beginner right think about it that like this right I defined the variable initialized over here right what happens is I passed it down as a prop to here so header knows what initialized is because I brought it down like this okay what we want to do eventually is have uh our custom hook right to picture this as a hook our custom hook which defines initialized right this is our used Airbnb hook it's going to Define initialized and then we bring our hook into here and then we pass that down to header that's the goal okay right so we know what happens if initialized is true what if initialized is false so we can go back to the index not that index let's go to this index and I believe it's at the top right here set that to false and it should come back up there you go so depending on what state it is this button will show up right so let's give it the styling we want and the function so what I'll do is let's move this initialize to use Airbnb so I'm going to erase this right it's going to say it's undefined that's right cool let's go to use Airbnb and instead of making it a static variable let's make it into a state yeah so if we're going to make it into a state want to say const initialized initi ized and set init initial initialized is equal to use state right think of this as a toggle right so the value of initialize should start as false right and it's going to turn true if there's a connection okay all right so this is a state then I can return initialized okay and it should be false at the moment because that starts at false and then what we could do is go back to this index and we'll bring it back here and now it should be defined again okay are you following cool right awesome what else can we do here we can set up the set initialized button now well we set up the button but we need the function okay so let's make our first function in here which is going to be initializing a user right so this is and keep in mind we already have initialized user on the blockchain right we're going to call that function but we need to make a function on the front end that calls it right so we can say const initialize user is equal to asynchronous okay and we always have to have some check here if there's a program and a public key all right cuz we don't want to initialize the user if there's no program that goes with it and we can do a try catch here catch just shorten this to error and then we can console. log. error cool and in this try catch we can um let's call it right so remember how we got a user all right so first we can do const oops const is equal to find program address sync right and then we have to put in the seeds again so let's put in the seeds we can say utf8 incode all right what's the string that we put for the seeds you got it user State okay then public oops public key. to buffer can do alt Z real quick and this should be in the array still and then we can do comma program. program ID okay cool all right so what's basically what we're doing is we're getting the profile PDA as we showed before right and um it's going to find the PDA for us and remember there's not there shouldn't be a user there this is like the test uh if you go back to this this is literally like the test that we were doing for initializing a user This Is Us generating from seed the the PDA address and then we're going to put the user account data at that address okay and for whatever reason that fails it's going to conso log an error but what we want to do next is set up the transaction that happens right so we can say cons TX for transaction and say await program all right this is our program remember uh looking at that object if you do methods we have access to all the methods right so I can write this in one line or I can format it like this I can say initialize user right this is me directly calling our smart contract right cool then from here we can say uh accounts right what is accounts accounts is our context all right so we need to put in this this is the account so we need to put in our Authority our public key right our Authority our Authority our public key and then the program ID right so I'll do the authority first I mean our our PDA first right and that's the one we generate from seeds so we can say user profile is Prof oops profile PDA right that's going to be the PDA that we generated oh yeah this should be an object actually okay cool no error anymore and then what's the authority right the authority is our public key we have access to that and then do we have access to the system program right we do this should be the lowercase one program is the capital System Program it's one of our imports. program ID okay and then we can do a RPC cool awesome that's it all right cool so now that's done we can actually put a comma here and pass that function initialize user and then let's go back to Pages let's deconstruct it from our hook initialize user and let's bring it to the header yep initialized user is equal to initialize user and this doesn't have to be the same name as this you'll see that in a second and then let's go back to use airbn and uh we also need to change the state right cuz once we initialize the user this shouldn't be false anymore should be true and then we shouldn't see the button yeah Okay cool so let's do that okay initializing the user that means after this RPC we can do set initialize to True right and that's the not the only time we want to set it to True right in our use effect if you go back to it when should this be true right it should be true this should be true if there's a profile account right we need to set initialized to True right that's should be one of the first things so I'll put it at the top okay cool uh if it's not true right we need to initialize the user so just in case it's not the last state was true we should make it false and that's pretty much for this out statement right the US seeing the button is literally telling us we need to initialize it okay uh the last thing I want to set up is something called transaction pending right if there's a pending transaction we need to sign for we can make a state for it we can say transaction pending and set transaction pending is equal to use State and again this is just a flag right just like before it's going to be true or false depending on what happened and it should be false at first okay and what I want to do with this is essentially uh loaded again if the transaction is pending so we want to do is make another and here and if transaction pending is false if there's no pending transactions you can load the try catch um this use effect here oh yeah we only want this use effect to run based on this dependency module if I don't put anything here it's just going to run once but if I put the public key it's going to run again when the public key ever changes uh and it'll run again if the program ever changes and it's going to run again if transaction pending ever changes okay so what do we want to do with this transaction pending is whenever we start a transaction we can say set transaction pending to True turn that flag on right and once that flag is done right we can do something called a finally here and do a set transaction pending as false right so we don't have to refresh all the time something sometimes this will take care of it cool amazing Okay cool so we can head back to the header let's go to the header yep and what we want to do now is let's fix up the styling of this right this button should have the styling that's very similar to the become host button so we can actually just copy in that where is that button okay so we can say class name and just paste that in there and more importantly we need an onclick onclick on click is equal to and we should have access to this initialize user okay there you go should be defined now let's save that and let's see what happens all right moment of truth I refresh this we should see initialized if I click this onclick function got object okay cool it thinks it's an object let's figure that out why is this an object okay we can test if this is an object by right before we pass down here you can say console log initialize oh I see I see I see right did I put it the same name initialize user oh okay I did we can say console.log initialize user comma yo let's see it's a function okay looks like it's a function it's a function in Index right now the trick is is it a function in the header quick refresh got to type object that's strange oh I think it's because I way the M the way I made the on click let's put this in here you might like that better hey okay cool it's a function now all right now we do some testing okay that's something initialize user is not a function okay that is is interesting ah cuz it's spelled wrong here too God damn it okay so we're going to have to spell it wrong over here without the I well this we can spell right but the use Airbnb it should be without the I and now I might like it how do I spell here initialize user all right I'm just going to hit refresh one more time hit initialize and see what's up cuz apparent I know it's a method I spelled it wrong but right and let's see initialize oh do account okay um yeah this should be do counts hit save hit this hey okay if you see this this is a very good sign it means that uh this the transaction is going through what matters is if I hit hit approve uh that it works so let's hit approve oh look at that you guys saw that the button disappeared automatically without me refreshing right so there's some comments down below saying we shouldn't have to refresh you can just set a state that Flags if a transaction is pending or loading and once it's done that should go away so let's see if that function worked I'm going to there should be two user profiles now let's go so this 8cd right this was generated from our function right we successfully called a function from our smart contract right the only issue is I spelled it wrong right here right but we can fix that right you can just redeploy the contract I mean upgrade the contract and then just export the IDL again right but for now initializing initializing user is done\n"