The Importance of Debugging and Troubleshooting in Mobile App Development

Debugging and troubleshooting are crucial steps in mobile app development that require attention to detail and a systematic approach. In this article, we will explore the process of debugging and troubleshooting a mobile app, including common issues and solutions.

One of the most common errors encountered during mobile app development is the "instance of" error. This type of error occurs when there is no transaction found, and it's essential to identify the root cause of the issue. To handle this situation, developers can use console.error to log the error message and ignore the instance. By doing so, they can avoid unnecessary errors and focus on finding a solution.

Another common issue encountered during mobile app development is the "instance of" valid date transfer error. When this type of error occurs, it's essential to identify the transaction as invalid and return an error message. This will help developers to pinpoint the problem and find a solution. In some cases, console.error may be used to log the error message, indicating that the transaction is invalid.

In addition to these common errors, mobile app development also involves handling unknown errors. When an unknown error occurs, it's essential to use console.error to log the error message. This will help developers to identify the issue and find a solution. However, handling unknown errors can be challenging, as it may require additional testing and debugging.

To ensure that mobile apps are thoroughly tested, developers often use tools like yarn Dev to identify any issues or errors. By running yarn Dev, developers can test their app's functionality, identify any bugs or errors, and make necessary changes to fix the issue.

In the case of a failed transaction, developers may encounter an error message indicating that there is no such thing as "set transactions." This type of error occurs when the developer misspells the word "transactions" in their code. To resolve this issue, developers need to go back to their code and correct the spelling mistake.

Mobile app development involves testing various scenarios to ensure that the app functions correctly. In the case of a failed transaction, developers may need to refund themselves or make adjustments to their code. By using tools like cash apps, developers can test their app's functionality and identify any issues or errors.

To successfully send a token from the mobile app to the wallet, developers need to ensure that they have the correct credentials and that the token is properly formatted. In the case of Phantom, developers may need to open the app, load the QR code, and scan it using their phone's camera.

Upon successful scanning, the user should see a summary of the transaction, including the amount transferred and any additional information. If everything goes smoothly, the user will be able to confirm the transaction and proceed with the next step.

By following these steps and debugging techniques, developers can ensure that their mobile apps function correctly and efficiently. Debugging and troubleshooting are essential skills for mobile app development, and by mastering them, developers can create high-quality apps that meet the needs of their users.

One successful example of using a cash app to send a token from the mobile app is when the developer uses Phantom. The user opens the Phantom app on their phone, scans the QR code, and confirms the transaction. In this case, the developer uses tools like cash apps to test their app's functionality and identify any issues or errors.

The importance of debugging and troubleshooting in mobile app development cannot be overstated. By using systematic approaches and testing various scenarios, developers can identify and fix issues quickly, ensuring that their apps function correctly and efficiently. Whether it's handling "instance of" errors, validating date transfers, or sending tokens from the mobile app to the wallet, debugging and troubleshooting are essential skills for any developer.

The success story of using cash apps to send a token from the mobile app is a testament to the importance of thorough testing and debugging. By following these steps and techniques, developers can create high-quality apps that meet the needs of their users. Whether you're a seasoned developer or just starting out, mastering the art of debugging and troubleshooting will help you to create apps that are functional, efficient, and user-friendly.

In conclusion, debugging and troubleshooting are crucial skills for mobile app development. By using systematic approaches and testing various scenarios, developers can identify and fix issues quickly, ensuring that their apps function correctly and efficiently. Whether it's handling "instance of" errors, validating date transfers, or sending tokens from the mobile app to the wallet, debugging and troubleshooting are essential tools for any developer.

"WEBVTTKind: captionsLanguage: enin this video we are making cash app web 3.0 dap with nexjs I'll be showing you how to make your cash app clone work with something called Solana pick if you don't know what solanape is it's a digital payment platform built on the Solana blockchain that you can use to make it so that your front-end app can now send money and Solana to other users and you can feel free to customize this web app and make it your own and add it to your portfolio so without further Ado let's get started alright so here we have the app and as you can see there's a couple transactions on here this one is for NBA tickets as you know two Solana is pretty expensive so maybe that's how much it costs right another transaction series you just sent you Seoul through the Phantom map right we have functionality where we can load a QR code and I can literally scan this with my phone and I can pay through my phone so if you want to set up what's called a point of sale system I'll show you guys how to do that later in the video so stay tuned the main feature though is that you can you know disconnect or connect your wallet you can see all the transactions which are all being being stored in local storage all right so we're going to hit new and then as you can see there is a test here that we could do and we can even put this for like dinner for example right for and you can change your one sold to two syllable we'll do one soul and if I hit pay send one cell hit approve all right and as you can see thinner is there as well and if we look at my Solana wallet I had a 15 Soul now I have 14 and in my other wallet that I sent this to 4A should be five instead of four and if you look it's five so that's pretty simple very simple app for you guys today let's get started all right so you might be asking Lance how do I get started working on this project well we have something super awesome for you guys if you open your terminal so you could do this multiple ways well one way is to open up vs code press Ctrl J and make sure that the path here is the folder that you want so you have to do CD and then your folder name right so whatever your folder name is replace that right here right so this is where I want to put it it's in my projects folder and all you guys have to write is something called npx collaborate programmer okay so this is the latest version currently at the recording of this video but you can always make sure it's the latest if you do npx cloud and programmer at least and if you hit enter go ahead and put your email address which is for me with this and your name and once you do that you'll get access to all of our portfolio projects that you can add to your own portfolio and be sure to customize them and make them your own build something else with them so you don't have to mix on a cash app you can make your own website where users can send different transactions or even set up a store with Solana pay as your point of sale system so I'm going to click install on a cash app enter right and it's going to run some scripts and I'll come back into the video Once that's done and we can get started on fixing and starting the app alright so let's get started so at this point you should have used our CLI tool to get the startup files that you need you can make sure by checking if you are in the CLI starter branch and all you need to do is start is press yarn Dev like I mentioned earlier you don't need to download any packages because if you use our CLI tool it's done for you so what we want to do now is open up your browser and let's head to localhost and start that project because you're going to notice it's going to be a little bit different so let's take a look so you can notice that if you look at the transactions that is static transactions I didn't make those they're just default there we're also not logged in as you can see right here and we can't connect our wallet anyways as well as there's no pay functionality it doesn't work so our job is to show you how to get this app working while teaching you guys about Solana pay so the very first thing that I like to do is start with our wallet connection so as you can see I'm clicking but connect while doesn't work and our wallet of choice today is Phantom wallet of course so log into your Phantom wallet if you already have one if you don't we're going to show you guys how to get Phantom on so skip ahead a little bit in the video if you already have Phantom so what we need to do is head over to Google and you can go on Google Chrome and write Phantom wallet extension okay and once you do you can click this first link here and it's going to say Phantom and just click add to Chrome once you do that you should see the little extension right here on the top right corner click it and create a new wallet you're going to get a set of phrases save that phrase don't share it anybody um also don't show anybody your private Keys as well or else they'll have access to your money right another thing that you're going to need to do is click on your profile and make sure you're on the right setting so click developer settings and change the network to devnet right there's going to be three networks here mainnet test net and devnet we are going to be using the devnet so it's not real Solana so we can play around as much as we like awesome cool so once you have some Solana in your wallet I have two we can go ahead and start our wallet connection all right so by this point you should have the Phantom wallet extension all ready to go and the first thing that we're going to do is set up the connect wallet functionality right so quick question do you know where this button is in my app if you don't know you're gonna have to stick with me and if you do feel free to move on ahead alright so where in my front end folder does that wallet connect button live right you're gonna have to understand how the app works because you never you didn't make this app you don't know how it works so let me show you guys how it works so let's hit go to the browser again and let's head over to zipboard and let's draw out the parent child relationship of my app right so what do I mean by that if you look over here and let me make this box let's say that this represents my entire app yeah so every app component in react has a child what do I mean by that well this app is going to have an index component child all right so index.js how do I know well let's take a look at my vs code so let's go to Pages let's go to app and you can see right there's a head and there's a component in line 15 right here do you guys see that right here component awesome so what is this component if I were to click into it you'd notice that this component is actually the index all right so all this is the index let me zoom in for you guys so you can see that a lot better so let's take this go down press Ctrl B boom all right how's that so this should be a lot more clear now so this is the index right so if I were to do like a side by side let's put this in here and let's put this right here right and let's bring this back so going back to cash up right this is my app so far don't mind that everything is all smushed up but take a look at this guys right if I were to take out this component right here nav menu look what happens I'll calmed it out see and boom we lost all of the items right here right and new this new button went all the way to the top okay what if I took out this transaction list boom no transaction list right this works because inside the index.js are more components right so let's illustrate that now so what did I comment.nav menu so that means oops not that that means here the index.js has a child of the nav menu nav menu right also has a child of transactions right trends all right this is important because if you've never worked in react before or if you've never seen this project before how are you going to find anything or understand anything that I ask you right so if you know this you're in great shape but if you don't keep up with me right so we got nav menu here right there's also transaction QR model and profile so let's add those as well so let's do more arrows do this rectangle another rectangle here and we'll do profile and we'll do the say QR model QR or modal right and these have arrows to point that this is the child of index what else do we got we have action and new transaction model and search bar right let's just not worry about those for now but these are the main ones all right so let's make this full screen again okay cool so this is the profile right here right this is the nav menu this is the transactions okay so if I were to ask you which of these like the profile the nav menu or the transactions which of these components is going to have the connect wallet button and if you said the nav menu you'd be correct so let's take a look at the nav menus let me undo all that go back to RBS code and we can make this full screen as well oops still in the draw tool boom so nav menu you said right so if we look at the nav menu and this is probably giving us an errors don't worry about that for now go to components we'll go to uh yep and then we go to nav menu I mean take a look what's inside we see nav menu here man menu item and we also see button here like what could this button be so if I comment this out hit save let's take a look damn okay so look we lost the connect wall button which only tells me that this is our button all right so we need to add the Phantom connect wallet button right so to do that we're going to have to get the connection first let's set up the connection so to set up the connection the first thing that you're going to have to do is head over to your app.js and once you're here you do know now that this is representing our index.js what we need to do is wrap our index.js with the wallet connection so let's go ahead and set that up so the way I like to set it up is go to walletconnectionprovider.js and that's going to be in the context folder and to set up that connection we're gonna need to import a couple of things let me just zoom in a bit can you see that and we can say import connection provider and a wallet provider so we do connection provider and you're going to see the suggestion here it's going to come from one of our packages Solana wallet adapter react all right so get connection provider and the next thing that we want to get is going to be wallet provider yeah there's actually multiple different ways to set this up right you've seen me do it a couple times by now um this is another way so we can also import the wallet modal provider right and this is coming from Solana wallet adapter react UI right this provider is specifically when I click the connect wall button you're going to see the selection of wallets Solano actually provides you that modal so you don't have to make it from scratch so I'm gonna make sure to import that and once you import that model let's import the wallet that we're going to use and like I mentioned we are using Phantom right so what you want to import specifically is Phantom wallet adapter all right you can get this from I believe it's at Solana wall adapter wallet so this thing right here hit save and once you do that uh the only thing we'll need next is a react hook called use memo okay and then that's just gonna come from react itself cool so after that that's all the Imports that we need let's go ahead and set up the provider so we can do that by saying const wallet connection provider is equal to and error function like so okay and then when once you're inside here you can say const endpoint equal to use memo and inside the use memo hook you're going to make an anonymous function like so and you're just going to say something like this it's going to be https colon slash slash API Dot devnet.solana.com and then you're going to put a comma here and put an empty array all right so what is an endpoint an endpoint is what we're using it's an RPC node that's going to help us connect directly to the blockchain so this is helping us connect directly to the devnet of Solana and we're saving it using our use memo hook right so that's our endpoint we should also set up our wallets here so by wallets I mean what wallets are we going to use to connect to our app and we're going to use use memo again uh the only difference with this though is we're going to put this in an array and I say new Phantom wallet adapter right a new instance of phantom wallet if you guys have any other wallets you want to use you would basically add them to this array like so okay after that we're gonna return here and this is going to return a couple different things so it's going to return our connection provider so we set it up like that it's going to have our wallet provider inside of that okay and then within that we have our wallet oops wallet modal provider okay and inside that wallet motor provider it's going to take in children right and this is not going to make sense because we have to go up here and also pass in children let's go up here and also pass in children so once that's done make sure you actually export this so export default wallet connection provider and the reason we're gonna do that is because we're going to import it in our app.js so what we want to do now is to do control b or command B and head over to our app.js and we're already importing Dynamic but we're going to use this to get our wallet connection provider so we say wallet connection provider and we're going to say equals dynamic and we're going to import it by doing something like this say import comma here quotes dot dot forward slash uh context and then wallet connection provider right and then from there comma exclamation point next match my curly braces is what I mean and say SSR to false okay and then a comma and after that hit save and what we want to do is make sure that our component here is wrapped with that wallet connection so we can say while the connection provider and copy this or cut it and just move it up to here save and I'm just going to erase this to make space and boom that's it we set up the connection right now that the wallet is connected our our endpoint is in there there is one more thing that we're missing I think I got to go back to the wall connection provider and we need to provide the endpoint and the wallet so this that's why this is grayed out so head back to your wallet connection provider and go inside your connection provider and we're going to pass in a prop and the prop is going to be called endpoint right because it's going to inspect an end point and we just pass in our variable like so and for the wallet provider itself it's going to expect some wallets pass in that variable that matches as well and another thing I like to add is something called auto connect so if you're already logged into your Phantom wallet and you load the page you will already connect that wallet that is logged in so cool so it's really cool that it does that for you but when you look back at the app you're not going to notice any significant change because we didn't even set up this button so let's go ahead and do that so going back to what component guys three two one what did you say if you said nav menu you are correct so I'm going to press command B and notice line three we're importing the wallet multi button so let's go ahead and do that so I'm going to erase this and I'm going to say wallet multi button like so hit save and Bam there it is so if our connection is correct I can click select wallet there's our wallet modal click Phantom and boom didn't connect there you go connect you can even disconnect and click that and boom cool so cool it's connected now and if you notice it kind of stands out and usually I kind of leave it like this but today let's just style it so that it matches the rest of our um nav menu so let's go ahead and go back to here if you guys want to know how to style it go to nav menu and what we could do is this we cannot make this self-closing we can make this like this and we can give this a class name and I'll just call it Phantom button and in there we can also put a start icon okay so if you give this a start icon we can use our user icon Circle right so that is that symbol with the person inside of it that you saw earlier we're going to use that right here we can say user Circle icon right and give this a style right so the styling is technically all here and you can say that the height is let's say 24 and the width is also 24 and the color I have it for you guys the color is going to be quote um hashtag or number sign one five e c 3 C like so after that uh go outside these two curly brackets and then we can put the self closing tab right here all right but we're not done yet we can also add a little span here and we wanted to say connect wallet right so we can say connect wallet net wallet and we also want to style that so we'll say class name text is small um the font can be like semi bold send me Bold and the text is going to be that same color we had here so let's get that and place it like so can't forget the hashtag cool so let's hit save and let's see what we got cool the spacing is terrible so something's going on here Phantom wallet text should be connected uh let me see class name font semi bold um it should be somewhere oh I see this shouldn't be an equal sign it should be Dash hey there you go cool it's like those little errors that always get you but that should just be a dash and it should just say connect well yeah I was playing around with this put connect save Okay cool so now we can disconnect and connect but now you'll notice that when I disconnect my wallet it's hard to tell if we're actually connected or not all right let's connect connect all right that's because we need to make some conditional rendering that if we're connected it just should say our wallet address for example so we could do that by importing it right here you'll notice two things that I'm already importing as a prop connected and public key so where is this coming from if you go back to your index.js go back to nav menu I'm already importing something called connected right but connected is coming from use wallet what that let's use while it lands well I'm glad you asked use wallet is coming from Solana wallet adapter react and basically if we're connected this should be true so that's console log right here and say uh connected comma are we connected so if you see this in our console if it says true where can our wallet is successfully connected if it says false we shouldn't be so let's go here inspect element console false are we connected true we are connected right so disconnect connected there we go so notice how when it says true we are connected when it's false we are not connected all right it's hard to tell because the text isn't changing so what that's why we want to set a condition so if connected is true show me my wallet address if connected is false show me connect wallet alright so we're back at the index page and now that you know how that works we can head over to the nav menu now and once you're in nav menu you can see that we are passing down connected as a prop and if you go to your button like so we can set up some conditional rendering so how do you set up that we can do that by putting curly brackets like so and set up a ternary operator so how do we do that you say connected right question mark you guys know what if statements are you can kind of read it like so so if connected is true all right what do you want to happen if it's true we want to see the public key right uh else else is like this colon right here else right we should see the quotes connect wallet okay so save that okay so connect wallet let's go over here look at that it says public key right why does it say public key because we're freaking connected though so if we go to disconnect it says connect wallet connect public key right now the problem is public key doesn't really show what my wallet address is so how do you know what your wallet address is click on your Phantom icon click on this wallet right here and you can see this top one eight t k z right right here eight tkz that is my public key or as known as my wallet address so how can I display my wallet address well go back to your code go back to index and if you remember if you look at this right here this used wallet hook it also comes with public key if I were to console log that console.log public key this is my key save go back to your app inspect element again you can see that that public key is your public key and do you know why you don't see the 80 that's because it's not a format that we can really read so if you do dot to string like so you're going to see the ATK this is my key all right so we're using public key from use wallet right and that is what we can use to render our key dynamically so how do we make use of this public key pass it down to the component that we want nav menu I sign up prop you can say my key is equal to a public key okay hit save there go to nav menu and we can get uh my key cool and from here instead of saying public key we can do something like this actually no we don't know how to do that we can probably say my key right here my key hit save and ah okay yeah yeah because it has to be a string that to string okay and now look at our new problem there's our key but it's way too long right that's why we need to what we call truncated so let's go ahead and truncate our public key so luckily I made a function that does that for you so if I click this this is a function it's going to take that long string and return a little dot dot dot in between it so it's not insanely long like that look at this all right that's how long your public key really is to truncate it we're going to make use of this function so go back to nav menu to import this function I'm just going to the path getting that function in the stream.js and now let's call truncate so where is it it's right here we can say truncate parentheses and wrap that key in there and Save and look at that more digestible a lot more easy to read it's going to be 8tkz dot dot dot all right so I literally took you step by step how to make this Dynamic disconnect connect wallet boom so that's looking good uh one thing that I want is I want this profile picture right to give me a unique profile picture as well as show my key because this one one one that's not me this is me right so how can I go from this to this right is the same way that we used public keyboard alright so we know let's see let's see what we know all right come with me child we go here we say we know that public key is equal equal to my wallet address right what else do we know where does this live in my app right where does this 111 exist in it's going to exist in my profile component right so we need to go to go to profile okay those are the two things that we're going to need let's go ahead and think about that so go in your index go let's take a look at our components and we're going to see profile dot Js all right it's a child of index and you can see here that I'm truncating a user address right so whenever you're opening up a new app that's that you didn't make from scratch right be sure to be able to answer all the questions like what is truncate what is user address right if you don't know what user address is we can console login console.log user address what is this save back to the app spec element console all right one one one one what is this so that's what user address is next question guys where does it come from where does user address come from well we know now that we can pass down what we call props so that means we're passing user address as a prop but who was the parent of profile all right I'll give you guys three seconds three two one who is the parent of profile if you look here this is the child the parent is index so go to index find profile and we see that we're passing it down which means it comes from here so let's find where user just is from user address is a state and we set it as one one one one right and if you look at here line 23 we're setting the avatar based on that address right so there's a lot of different things moving here let's break it down right so one the user just comes from this state right here okay but how do we make it so that profile right has the right user address hmm well one thing I could do is instead of passing user address we could pass public key let's see what happens if I do that change user address here to public key hit save let's go back to our app there you go why is it like that because public key is a BN right remember it's not in a format that we can read so if we go to user address we need to do a DOT two string kind of deal okay and also we got to do it here as well not two straight save save and you can't read properties of two strings okay all right so maybe we can pass down to a string beforehand so let's do public key.2 string like this yeah oh I see because it doesn't it doesn't know what public key is all right so when you first load the app we're not connected which means we don't have a public key so if I put a question mark here thanks truncate where are we calling trumpet that might be in the nav menu let's go back a bit let's put this back to user address we might have skipped some steps here all right cool all right let's go back let's go back it doesn't know what public key is just yet because it wasn't connected so what we need to do is set the state of the public key okay so we're gonna do this a different way I think we should set up our hook all right so we're getting the truncate error because it doesn't read public key right away it's trying to truncate a BN or like the the format that it can't really read just yet so what we want to do is let's make it easy for our app to read it and let's start working on our hook so under this hooks folder right here we're just going to say a new file and we're going to call it cash app dot Js awesome so this is a custom hook that we're making to set up all the functions such as the transaction payment creating the transaction and any state variables that we're going to use so the first thing you want to do is set up the hook is import a couple different things so let's do all the Imports right away so I'm going to make your life easy by saying import you state and use effect all this is coming from react from there we also want to get the Avatar URL so if we go back to index we have another function here called get Avatar URL and it's going to generate a random Avatar based on the key which we're passing in all right so we're also going to import that as well import get Avatar URL and you should have this function already built in with the starter files and let's import all the wallet stuff in here actually so we can say import wallet uh adapt Network adapter Network okay and this is going to come from uh at Solana wallet adapter it's not here slash wallet adapter base we want the base one okay cool save that wallet adapter Network called adapter Network okay import uh use connection from the Solana wall adapter and also use a wallet so we can get the public key and the connection as well next we want to import a couple things from Solana web3 so what we want to import is cluster API URL connection key pair you also want to get lamp ports personal don't worry if this doesn't make sense yet we're going to use all these Imports and I'm going to show you what they mean and how we're going to use them we can also get public key Capital One program one word and transaction cool and this is from Solano web3 like I said which is this right here and we also want to import big number from big number .js which we have in our packages cool so that's saved uh let's go set up our react hook so we can say export const use cash app that's what our name of our Hook is and if you didn't know this is how you can make your own custom one and let's see at the bottom here we can return anything we want so return object and whatever we put in this curly bracket is what we can pull outside to our app right so let's say um we're gonna use the wallet here so if we're going to use use wallet here we can say const connected and public key probably not that one the lowercase one is equal to use wallet right we can pass connected here and public key and we can go to index and we can actually erase this in line 16 right if I save this it's going to break right because public key is not defined and also we don't see the connected thing anymore but if we go down below here and import uh cache app use cash app import use cash app like so from Hook slash cache up and just say const uh connected and public key right here is equal to use Kesha it's fixed right all we did was set it up in our hook and then export it and import it here all right why do we do this because now instead of passing stuff down like I was doing earlier here it's easier to import it wherever we want all right so you can imagine it like so right so this is where our Hook is use Tasha and before I was setting up a public key right here right and if I wanted to use it in the profile I would have to pass it down as a prop right instead I can set a public key here and pass it down anywhere I want just like so and I'll have to pass it down at all okay so that's why we're doing that and when we set up the function it's going to make a lot more sense make our code a lot a lot cleaner so we are setting up connected and public key here let's also set up our Avatar there as well so we can X this out so I just cut that uh use effect and that's actually put it in our cash app hook right here cool so now that that's there we can do stuff like this if we're connected right then we want to set this Avatar all right but now there's going to be an error it's going to say something like set Avatar is undefined so let's go back here yep except Avatar is not defined do you guys know why that is I'm gonna give you three two one pause the video and see if you could fix it all right cool so if you want to know the answer to that let's get back to our index that's because our set Avatar state was defined in index so take that out of there and put it into your cash app hook save and now Avatar is not defined right and look where it's not defined in is it undefined in our cash up hook or is it undefined index and to find an index so how can we make it defined all right two things we have to do is one bring Avatar back out and said Avatar just in case and go to index and also go to line 21 and bring out have it have it all right now it says user address is not defined right in cash app because it has no idea what the hell this is we could do it instead is put in public key look at this let's put in public key instead which is our wallet hey that's our custom avatar based on our public key which is a t so there it is okay but now we want to set up this guy right the one I was talking about earlier these okay so how do we go about that well now that it's in our hook right let's also set up user address right because that number is coming from user address so we can take this guy it's a matter of fact we could take this guy save bring him to the cash app hook and put user address here and it might as well put set user address here too let's go back to our index and let's get user address so now we're going back okay cool so I still thinks our user address is one one one and that makes sense because we set it here let's also change the user address so what I'm going to do is actually erase this one here because I don't think we'll need it I don't think we'll need set Avatar either so just put Avatar and user just here for now and for the use effect here if we're connected set the Avatar to my avatar and set the user address to public key and don't forget to dot two strings so that we can read it and also this one as well dot two string and this might actually change our profile picture too by the way hit save and Bam look at that awesome so now we have a dynamic user profile component right what do I mean by Dynamic well if I disconnect this real quick and also change my wallet to wallet number two now you can see it's 4A something if I were to connect my wallet now look at that it's a different user so now anybody can log in and anybody can get their own user so I'm gonna switch to wall one look at that wallet one still has the same profile picture as well there you go and another thing that I forgot to mention the reason why we're not getting any truncate string error right is because when I set my user address with the public key right it's only going to do that if we're connected right so if we're connected public key does exist and we can truncate it otherwise it's like try to truncate a public key that doesn't exist just yet all right that's why I kept getting that error if we do it this way we can ensure it's only going to run when connected and we also want to do this pad connected here so that this will only run once and if connection changes otherwise it's going to keep running if we keep updating so make sure you do that and now let's add the next step so if you're here let's make it so that when we press pay we can actually send some salon right that's the main reason you're here how do we use Solana pay and before we move on I just wanted to give credit to pointer.gg they give an amazing tutorial on how to use Solana pay it is in typescript though so what I'm doing with this video is showing you guys how to use it in JavaScript which is not through it that much different another difference is that we're going to be setting up the transaction on the front end instead of an API route which is more secure so again when you're making this to production on the on the mainnet make sure you turn this and convert it to an API route okay cool with that said going back to the app we want to set up Solana pay inside of our cash app hook so go into your use cash app we imported a lot of the things you're going to be needing already but the first thing that we have to do is uh import a couple things or I mean pull a lot of things from the hooks so one thing that I wanted to pull is const connected oops const connection actually and this one's going to come from use connection all right so that's what we imported earlier right here um another thing that we should set up is any of our states so there's going to be something called a mount so let's do const amount and set amount okay set that equal to use State and usually the amount we can put at zero okay uh coming down to line 13 we have connected we have public key we also want to be able to send a transaction right so usually when we make a transaction Phantom will pop up here and ask us to sign and approve that transaction okay so we're going to send transaction like so cool so let's see is there anything else that we're going to need um another thing that we're going to need is I think that's it I think what's left is we should make that function so I'm going to make that function next so coming down under this use effect let's create uh create a transaction right that's what we want to do to send to our wallet and we can sign him from there okay so first you want to create the transaction that our wallet sends us and to create it we need to make a function so we can make this asynchronous and say async make transaction uh whoops async well actually we can do it like this const make transaction equals async right function and it's going to take in a couple different things okay it's going to take a few parameters it's going to be from wallet to wallet uh the amount and something that we'll call the reference okay so I'm gonna take in those things and we need to establish the network that we're using so we can say const network is equal to the wallet adapter Network and then you can say dot Dev Okay cool so we're taking this while adapter Network we're saying we're using the devnet right and then we can say cont endpoint here you can use your own RPC endpoint whether that is alchemy quick node inferior but again we're using uh the cluster API URL which is the devnet right the default endpoint that they provide us and we can also set up a connection you can say const connection is equal to new connection and this is capital connection coming from here and set this equal to that end so we're setting up our connection plugging in our endpoint which we're saying that we're using the devnet okay so this goes into this which goes into this okay uh next we want to make a note we can say this is get a resent block hash to include in the transaction okay so how do we do that well we can say const block hash is equal to oh wait connection dot get latest block hash and put finalized all right so we're going to get the last uh block hash that's in transaction and it's going to look for anything that says it's done or finalized okay next let's set up our actual transaction object that we want to send so we say const transaction is equal to how do we make the object new transaction right where is this transaction coming from it's coming from Solana web3 as you can see right here side of that you want to put an object here and basically pass in any properties of this transaction that we want located that's fine we can say recent block hash the block hash right the previous one that we got and we can say the fee payer right why do we care about the fee pair every time you make a transaction there is a small fee that you're going to pay you can think of it like taxes and the one who should pay is the person who uh the buyer or the one sending money right or signing so you can say from wallet Okay so the buyer pays the transaction fee so that's our transaction object and then from here now we can create the instruction right the actual ascending Solana part of this so to create the instruction or the actual payment of Solana transfer we can say const transfer instruction is equal to system program dot transfer okay so this is going to handle the transfer of funds so make it sure you put transfer here parentheses uh curly brackets and then say from public keys right and you're going to figure out where are you sending Solana from and that's going to be this parameter right here from one right so the Solana is going to be coming from me right and the idea is that we send it to whatever user that we put in so another thing here we're gonna put in this lamp ports you don't know what Lan ports are so there is Solana which is Seoul and you can break it down into smaller units called Lamp ports all right uh the best way to think of it is think of dollars and then you can break dollars down to cents all right so lamp ports is your Cent all right so here I set up this Lan ports key here and say the amount right the amount that we pass in so this could be one Solana or two Solana or you want to take that amount and you want to convert it to Seoul right so you can do that by saying multiplied by oops bye parentheses Glam ports per Soul right that's that import from here and you what you want to do with it is dot to number so to format it like so that's your number and then from there we can say to Pub Key like who you're sending it to put to wallet there okay cool all right so two Pub keys to wallet right so remember the type of this should be a public key a PK and this should also be a public key all right so that's the transfer instruction we can make a little comment there so we remember we can say uh create the instruction to send soul from buyer to person from owner to recipient okay cool and now we want to set up the transfer instruction right dot Keys dot push this is for the reference this is basically so that when we query for the reference the transaction is returned okay so what we want to do here to set that up is Pub Key is the reference which is also expecting a type of public key uh is the signer false and is writable should be false as well okay cool and now for the final step transaction dot add and then we put the instruction there okay so go here I'm going to add the instruction to the the transaction and then we just return the transaction okay there is another step to this this is just creating or making the transaction we also have to just you know run the transaction or do the payment okay uh this is actually the function create the function to run the transaction this will be added to be on to the bottom all right so this is the actual function that when you click new and then click pay this function is going to run when we write here and it's going to call the it's going to make a transaction and then process it okay so what we want to do here is similar thing we say const do Trends section we call it that is equal to async function and then inside here we want to pass in this object here and say the amount the receiver and the transaction per right like this is the description like why did you send this transaction it's basically like the payment for cash app project or the or what you put as the reason you're paying this person okay and you can even doesn't even have to be a cash app I want you guys to play with this functionality and make your own store right that's what the pointer.gg is setting up a cookie shop maybe you can play with that set up your own store and let's say you have your own uh I don't know your own shop your own eShop you can accept Solana payments using Solana pay all right so set it up to fit your need all right so we're doing do transaction you can say const from wallet is equal to public key right so from wallet is equal to the public key why is it equal to public key because that's my address who's ever logged in is the from line right next I want to say const to wallet all right so notice how we're setting up the parameters for make transaction like we're defining these things right two wallet is equal to new public key Receiver right because when I pass in like if I visualize this right if I go new and I put in a public key here it's not going to be in the PK format it's going to be in a string so you want to turn that string into a public key so to do that take that string and put it past it in new public key like so you with me okay good I'm glad you answered so now you can say const uh be an amount all right because this amount right here is just a number which is like one five two it's not a big number right but when you go to the make transaction that amount has to be a BN because it's going to be multiplied like so otherwise it's going to say uh you can't multiply by it all right so turn that into a b n by saying new big number uh is amount right and the reason why we didn't do it beforehand is because we're going to use this amount for the transaction details okay so coming down below here let's set up the reference is equal to key pair dot generate and our ref this will generate a random public key for our reference and then we can say const transaction is equal to a weight make transaction so notice how we're calling that function here so we can say oops so we can say make transaction now we can pass in all these variables we can say from wallet we can say to wallet and we can say BN amount right as the amount and reference is reference okay so make sure you take all these and pass it here and then I'll handle all that when it creates it cool uh now let's set up the transaction hash this is optional but I like to make sure that it's confirmed so we can send transaction right transaction and connection right and then we can console log it to get the transaction hash and then you can even look at Soul scan or Soul Explorer to see it from here we need to create eight actually do we need to do this we'll save this uploaded but we do need to create uh the transaction history of and I'll say that for later next thing we have to do is pass it along so let's just test our code right now so we're going to do the the um do transaction Okay cool so we have do transaction which calls make transactions so you don't have to pass down both we can just put do transaction here and go to where we need it so where did I say we need that do transaction we need it in the transaction component so let's go to transaction go to transaction list new transaction to go to new transaction model and if you look there's a button here it says pay and on click it's going to run pay what we can do here is get our cash app hook so we say import use cash app and we need to structure it and get the two transaction equals use cache here pass into transaction and since we're here we need to make an object and then pass in all of these states here the amount the receiver the transaction purpose right so we can do hmm we should also import these states in the use cash app actually so that's what I'm going to do is actually take these out so go ahead and line six through eight cut them go to your use cash app and let's bring them down here right so we already have set amount all right there so bring them out in there bring receiver bring transaction purpose right and let's make sure you take them here so uh Mount uh set amount we have receiver set oops set receiver we have transaction purpose set transaction purpose and save save save we're gonna get that error but we'll get we'll fix it if we bring it out here so we can do amount set amount we can do receiver set receiver you can do oh yeah set receiver exists you can do uh transaction purpose set transaction purpose there you go so now I hit save we're back to get are back together all right so that said now you can pass all those values in amount uh receiver and transaction purpose right so now all we did was just move the states to the cut use cash app we are then taking the change States and running do transaction and let's do it in a weight because I want to make sure that this happens first and then we can clear the state so let's see if this works so the way we can test this is first log into Phantom and take note of how much Solano we have so we only have two Solana in this wallet if I go to wallet number two he has four Solana so I'm going to give one Solana to wallet number two so this should end up with five this should end up with just one so let's go ahead and do that let's go ahead like new change this to one and who are we sending this to we're sending it to well number two so hit copy right here after you make a new wallet hit copy and what's the reason for this well I'm going to say four cookies I'm thinking about cookies right now let's do cookie boom all right let's see if this works let's pay and yes okay so usually if you see this this is our transaction that we created right and it says minus one Soul right if it says it can't calculate the price uh usually there's gonna be something wrong so make sure it gives you the right amount one sole hit approve clears it and it should close this so we need to fix that but let's see if it confirmed let me suspect element cool so we got the transaction hash right here um let's see how much longer we have we have One Soul okay well number two five Souls so it worked let's freaking go so we did notice a couple of things there when we did that uh one the model didn't close right so that means we need to set model open does this exist yes so set model open to false so set that to false and let me just make sure set model open is this okay cool all right so now when we run it it should close but next thing we need to do is it's not saved in our history this is still static transactions how can we make it Dynamic well I'll tell you the answer all right so how do we want to store transactions well we're going to be using something called local storage right we're not using a database we're using our in browsers storage and storing each transaction object in an array of all that and pulling them all right so let's figure out how to set that up the first thing I'm probably going to do is head over to your cash app hook and go ahead and set up the local storage hook that we can use so I'm going to go in between our use effect and our use connection and we can say const use local storage and this is going to take in the storage key that we're going to need and the fall back state right and you can set that equal to something like this okay so again this is our custom use local storage hook and what we could do is say const value and set value is equal to use state okay and if you do Json dot parse right we want to turn this local storage item to a Json so we do that by saying local storage that get item all right so we can get an item from our local storage we want to get an item based on the storage key okay cool so we're getting an item based on the storage key uh then we're going to parse that into a value uh let's see it's fine and we can do a question mark question mark fall back state right so if there isn't anything there we can set it back to a fallback State and we're going to error because this needs to be an equal sign right here and then in that same function we can do a use effect actually and in that use effect you can actually set the item here so we can do something like this and say local storage that set item based on the storage key Json Dot stringify and placing the value and semicolon here and then we can put the value and storage key like so put the dependency module put value and set value done yet because we need to use use local storage so we could do that by by setting up down here actually I can do it right under here you can say const ant array for transactions right there's gonna be our new transactions and set trend sections is equal to the use local storage right and then for here you can put the key is transactions and the fallback state will be an empty array now the key for this guys is to make sure you're passing down uh transactions here all right there's already a lot of things that we're passing down uh if you want to format it you can even format it like so dupe dude dude this will be faster actually if I do this way set amounts receiver set receiver transaction purpose boom and then you can add transactions and set Trend sections cool so save that and when you go to your index let's get those transactions as well so Trend sections and uh set transactions I don't think we need to set transactions here though but let's actually just erase that uh you're gonna see an error because there's two transactions right and we want to comment this one out and undefined is on iterable okay that's fine see so the error must be in cash app um looking in here const value Json parse that's fine it should be iterable if we return it so let's make sure we turn that array with value and set value save hey there we go so we see no transactions because there is none right how can I prove it to you well if you go to your index let's actually console log transactions here oh we should probably say here it is save yep array zero right if you're getting error at this point you can just say something like local storage dot clear parentheses and hit enter Make sure you do that because if you're getting any errors it's because it's trying to read something in local storage that doesn't fit the format so I had that error before so make sure you clear it so you should see nothing here okay and uh again nothing in the error for the word transactions make sure you comment this one out because this is static cool so we got that there it's already being passed in line 37 for me so that's why it'll automatically render it if there is something there what we need to do next is in our cash app go back to that function do transaction and let's create the transaction history object all right this is actually pretty easy uh we just have to make an object essentially all you have to do is just write constant new ID right because every transaction is going to be a new ID and the new ID will be based on the length of trans actions.length right plus one dot two strings string so it's going to be length of 0 at the beginning plus one the ID is going to be one next time we do this ID is one plus one it's gonna be two all right so from here we can say const new all right so I was saying const new ID is going to be the transactions.length plus one dot two string and now we can create the transaction object so we can do that by saying const new transaction and set that equal to the object so the idea is we create this new object and once we fill in all the parameters or keys for the object add it to that local storage array that we set up so what we need to do is set the key which is ID is going to be new ID all right we set that up earlier then we can do from and that just says like who is this uh transaction from and to store the information we need we need the name which will be public key right because remember public key is whoever is logged in so that's me or you all right next is the handle all right which is usually the dollar sign plus the username but we can just put that as public key now for the Avatar we should have the access to the Avatar because it's we put it up here right so it doesn't know what Avatar is so we can just say habitat and after you add the Avatar uh there's just this fun uh verified attribute you could say it's true are you verified by cash shop uh you could add this it's optional right but I'm just gonna put that there since I set it up and then we can say two right which is also going to equate to an object and this is for the receiver right so uh do we have access to receiver we do all right because remember when you make the transaction you're putting the receiver and we could pass that along here and for the handle all right I like to put this as blank because again it's the dollar sign plus the receiver you can just set it as that uh for the Avatar so by default it's not going to know what the Avatar is but if we call the get Avatar function here we can just give it an avatar all right so if we go back to the app well actually you can't see because there's no transactions but if you remember back here there was um like a profile picture we're going to be able to set that through what we're doing now okay so that said go back to the app and we can put the receiver and let me ask you guys this question what type is this receiver like by type I mean is it a number is it a string right is it a Boolean all right let me give you guys three seconds three two one if you said public key you'd be correct right and the code can't really read like this can get an avatar but it would be better if you turn that to a string first all right so it's an order operations here so this will happen first turn this into a string and then get the Avatar based on the string that this returns does that make sense cool so after that we can do verified and just for fun let's make this false so we got the two the from some other metadata that we need is going to be description all right so description is going to be description all right cool description put a comma here there we go description is going to be the transaction purpose right when you click on the transaction itself you're going to see this Details page that I showed in the demo all right so to get the right format for it we have to set up this object so description is transaction purposes transaction date is new date which is going to be the date today's date status of course it has to say completed um the amount can be the amount right and make sure it's not BN amount because it's going to be a number that it's not going to like uh source is going to be this and for identifier that can also be blank cool again these are like optional properties that if you want to see these details you can add them I'm just going to make it a dash for now cool so we made the object but are we done guys no as you can see this is grayed out which means it's not being used so how the hell are we gonna use this well we can do that by set new transactions right so we need to set up that state here but do we have that state actually we have we do not have a state so let's set that up so you want to get that modal open state so if we go to index I believe let's go to index yes the new transaction model is what I think we need this one's set to false we can actually take this out save and bring this to the cachet the reason why I'm bringing it here is because after we met make the object we should close it so to close it we just say set new transaction modal open to false all right so close the model and the most important part that we're actually here for is the set transactions right this is the coming from the use local storage hook so you do that and it's going to be an array and the new transaction all right so this is the object we just created up here but what you want to do right this is the key thing here is press comma oops comma dot dot dot transactions right this is a neat way using the spread operator to get all the array items in transactions and it's going to add this new one right here all right so it's quite a clever way using the spread operator awesome so save that there and uh are we oh yeah we already passed down our do transactions and this return and now it should run so let's test it out I'm going to go back to our app uh yes so this is gonna be undefined because we moved it so let's go here and let's bring it back up set new transaction model open okay uh huh oh yeah we need the state itself so that's new transaction model open save and are we bringing it out yep we gotta do that here set new transaction model open and new right here all right now we should be good to go ah transition is used but it's missing a true or false prop okay that means it's not reading the state of true or false which means oh I think I see what I did wrong guys yeah so I added stuff to this use state that shouldn't be there let's take this out oops not the whole thing these two and paste that in here because where these should come from use cash app as you can see so it said save and now all right are we good all right oh that's not what I meant to do oh yeah we should connect our wallet that's the issue here all right cool so no errors all right everything's all and nice D and D I'm just checking okay cool all right so now let's see if it works I'm going to do new and let's take a phantom wallet check all right we are down to how many Solana we are down to our last Solana all right so let's go ahead and pick new we're going to donate One Soul we are going to send this to wallet number two I'm gonna pay him off copy and we're gonna say for cookies all right I think that's what we did last time and let's do that and so now this should save in our transactions component right here because we're saving to local storage let's hit pay it's okay remember what I said this is a good sign if you actually can sign it hit approve oh uncut and promise true hmm oh there it is okay let's do a quick refresh it saved it to local storage amazing look at that so it's pretty much done there is a bonus feature uh if you look at the pointer.gg or if you just think about cash app in general when you click on your profile picture you get this nice QR code where you can use your phone to send money right you can do that with cash app if you just scan the QR code right and there's this functionality here that says load QR code but but it doesn't do anything so let me show you guys how to set up your very own QR code it's pretty simple all right so you want to add a QR code to your app right and the QR code it should be dynamic and what I mean by Dynamic is based on your public key it should make a QR code that automatically goes to this specific address right so let's think about how this works if I click my profile picture right here all right just to illustrate here it should load up this modal right so how the hell do we find that all right so oops I'm still in my draw tool so how can we go about finding this well if I go to my vs code that's probably going to be in my profile right so notice how it says set mode open set transaction QR model right that's where we need to go so you want press Ctrl or command and click profile and it should take you to that component quick little hack now once you're here let's take a look we're in profile and in on profile open it's going to set the model open to True right which means if you go to your components go to your transaction folder here and click on transaction QR modal so this is where we want to be loading everything the first thing that I'm thinking about is that we should create a state that says if the QR code is there or not right so basically a flag so what I'm thinking is go back to your index and you could put this in your cash out book but for simplicity's sake let's put it in our index and all you have to do is write const oops make the state const q r QR code and put set QR code right and it's kind of misleading but the name basically is going to be either true or false right and the key is when you pass it along to the transaction QR model okay so when I go over here you can say QR code is equal to or rather set QR code so let me fix that set QR code is equal to set QR code and these don't have to be the same name but I'm going to make it the same name so it's not confusing so this prop's name is taking this function okay so then we can go back here we can import set QR code at this one that we actually want this one transaction QR modal then we pass that in there all right and we want to set the state to true to re-render the component with the generated QR code so what's the process uh we need to generate the QR code based on public key right remember public key in this sense is our key the user log that's logged in then right set the state to true to rerun the component with the generated QR code right because this this isn't going to update on a Mac that's why I have a button that's going to re-render it or that's the idea here okay so all we have to do for this is pretty much just say set QR code it's true and once you've done that the question is now how the hell do we generate a QR code um if you get lost at any point there is documentation on this done by pointer.gg so shout outs to them um if you go to I believe Solana Bay salompe point of sale page scroll down to about here we want to generate this kind of QR code that we can use our phone to scan and then send money directly right so uh the code is similar to this but remember this is in typescript I'm going to be doing this modified version in JavaScript so again quick reminder this is done through the front end you can generate transactions through an API route that's way more secure because remember the client can modify data and you don't want that when you're dealing with your real money so that's my little disclaimer but back to the video let's start doing this so the way thing I want to do first is let's set up a use effect right because we want something to run at a certain time okay that's kind of why we think about use effect dude this is going to do something oops do something when the component first loads when it renders or when it gets removed or you can control this with use effect so what do we want to do in this use effect well the idea is to generate QR code okay so let's generate a QR code a couple we're gonna need a couple variables first is const recipient is equal to blank right so who is receiving uh this amount right so let's think about this if I go back to my app this QR code who does it belong to who's going to receive money from me scanning this it should be this user who's logged in right so if that's the case that's the case then the new public key right where am I getting this it's from this the new public key from the user address all right so user address is my public key as a string but now we're turning it back into a public key here right so next is the amount all right Okay so one thing about the amount sorry about that one thing about the amount so the amount has to be a big number so you can make it Dynamic by maybe going back to here and setting up like how much do you want to pay kind of like how this is so you can copy this functionality and apply it here I'll show you guys how to do a static version right every time you scan this QR code you're going to send them one Soul all right and they'll tell you that's not going to surprise you but the const amount is going to be a static amount for now it's gonna be one Soul every time I send money right so do that we need to make it a big number so you can say new big number and you should have big number imported already big number is string one right so if you ever want to change this you want to make the default five right you want to get rich say 10 all right or make it Dynamic later on go ahead and do that next is the reference so we're going to set the reference equal to key pair dot generate Dot Public key right so generate a random key pair as a public key to label as reference then it's the label right so when you run this transaction you'll see a little like notification that says uh why you're sending money right so you can say this is two evil cookies Incorporated that's the example they used right so let's just do that we'll say evil cookies Incorporated and for the message right you can send who's ever clicking on the QR code a nice message right so we can say thanks for your soul let's put cookies because that's been on my mind boom so these are the variables that we're going to pass in to generate that QR code right so one of the first things we need to do is say const URL params is equal to recipient um amount reference label message okay of course that's the url url params that we need to generate the QR code um there's a way to make it so that it doesn't even have to be Seoul you can even use usdc so the guide on pointer.gg also tells you how you can use usdc it's probably going to be usdc address right here so pass that in somewhere here but again we're just using soul for this build so that's the URL params and then from there we're going to say const URL is equal to encode URL parentheses URL params okay and encode URL is coming from Solana pay right so this is the module that's going to help us generate the QR codes we don't have to do everything from scratch or yourself right we're going to utilize all of these functions here here okay so we're going to code our URL params and from here we're going to say cons QR is equal to create QR all right so we're using that create QR function we're going to pass in the URL which we just made we're going to pass in 488 comma trans parents right so this is kind of like how do you want the QR to look all right so you can change this for the size and we're gonna make it transparent okay now uh the next part is setting up the ref one thing I'm realizing we're going to need to set up our use ref hook for this all right so if you don't know what use ref Hook is you can think of it like a special function that helps us remember things right let's say we have a box for example and I wanted to remember what I put in this box right use rough hook lets us look into that box so then store things in it and lets us pull things out for it later all right so if that made sense to you what we're going to do next is set up that hook so it should be already imported uh right here and to use it all we have to do is come up to the top here and say const QR ref is equal to use ref all right at this moment we're not technically doing anything yet use rep is going to give us back an object right we need to reference something now so what are we referencing if you look at this div over here every HTML element has a built-in property called ref so it looks like every element has a class name that you could utilize right some have it on click that you can utilize right we can use a ref here and say equal to q r right so this div specific div that's inside the modal is going to host the QR code essential all right think of it like that so this is our box and we're going to store our QR code reference in here does that make sense cool so let's see cons QR ref is equal to use ref okay and the next thing we should probably do is import use connection I think I'm using it right here and we can say const destructure connection connection equals use connection oops like so okay it's going to come into play later uh what do we want to do next Okay cool so let's come back to our function right here Line 39 for me I want to do is if all right we're gonna check that box now qrf dot current all right if there's something in here all right then q r ref dot current dot HTML all right we're directly targeting the HTML of our reference right uh and it should be inner HTML actually inner HTML that makes more sense it's equal to quotes right and we can append something to that QR so QR dot append the QR oops QR ref dot current so essentially putting appending the QR code to our box so that it's going to live in here that's the idea okay could not find create QR oh capital r boom so now it exists so let's hit save any errors on this guy nope still good what happens if I click this black screen okay so we're closer right it shouldn't be uh it shouldn't look like that just want to check something yeah it shouldn't be a black screen which means our parameters might be a little off but this is a good step okay okay just doing some troubleshooting it shouldn't be a black screen you saw that let's look at how it's generating create QR URL size trans apparent guys so if we do transparent it's a load oh I saw it perfect Okay cool so I saw it it worked that's why spelling matters in your app so just try that one more time for safety ah there we go we should see an actual QR code so we're good to go so make sure you spell transparent correctly and now we need to wait for the transaction right wait for the user to send the transaction right so this part isn't um gonna be done on the app itself this is going to be done on your phone or the mobile app that scanned the QR code so we need to be listening for that so constantly making an interval that listens for the user right again not the most ideal way but uh here's a hack we could do const interval is equal to set in triple interval async and inside is async we can call into log and this is optional just to show you waiting for transaction confirmation it's going to appear a couple times right but what we want to wait for and constantly try is seeing if there is a transaction so let's set up a try catch here and if you don't know catch is going to have e and you can have like console.log error okay and we can have more detailed uh catches and I'll show you guys how to do that in just a second and the first thing you want to do is check if there's any transactions for the reference right so to do that we can say try const signature info is equal to 08 fine reference connection right so we're passing in the use connection here and we're also using the find reference function right and it's going to take uh the reference itself it's going to see if there's anything with that reference and put an object here and put finality confirmed and that should be a string finality confirmed and I think I spelled that right cool after that this is the part where it's validating so you can even put a consular validated right again optional so to validate the transfer you have to say await validate transfer right that's kind of obvious uh where am I getting this from it's this function right here okay validate transfer and we can pass in everything we passed in before which is the connection that we're using um the signature info dot signature right so this is the actual us saying yeah I confirmed the transaction but now on the front end app on mobile okay and it's gonna take in an object as well so make sure you put a comma here put an object out and say the recipient right the amount and the reference pass in these two things and they all should exist at the top here in our URL params right I'm actually not in our Europe Rams and the variable that we made up here so the recipient the amount and the reference like who is it going to what's the amount and what's the reference okay and from here another comma object commitment confirmed right so this is more validation and parentheses and yeah cool at this point right at this point the transaction is confirmed let's add the transaction to our local storage right because I want to see this local storage um item inside our list of transactions right otherwise we can't really tell unless we're in Mobile so to do that and again if you are curious like how can I make this a live app that's not local storage you would replace the local storage code with writing to a database you can use sanity you can use Firebase right that can store your transactions for you and then pull it okay so feel free to replace that or leave a comment down below if you want to see a full scale like uh shop using Solana pay so let me know if you are interested in that and I can go and put a more in-depth tutorial cool anyways let's set that up so the cool part about you know storing this into local storage is it's exactly the same as this right so if we scroll all the way here this is the exact same so let's copy that let's bring that to transaction QR model and paste it right so what's the difference here um it doesn't know what transactions is so we have to bring that into our app so how do we make it understand what transactions is well luckily we can use cash app right so I can say import use cash app Excel like this and then just bring it in here as you can see const transactions set transactions is equal to use cash app bam so now it should know what it is let's scroll down and modify the code some more all right so it knows what transaction is it doesn't know what public key is right so how can we fix that so one option is to you know get public key from newscast app but there is something we could use right we can use recipient right recipient is already what we need it's already the public key right so it's us recipient is another way of saying user address okay cool but now the Avatar it doesn't know what Avatar is and again solution bring it from use cash app or right we can use the get Avatar URL which is not it here so we can say import git Avatar URL right and we're going to call that function right here get Avatar URL and pass in recipient dot to string all right okay cool and now what about two right this is kind of confusing uh this is who we're sending money to but when you're reading the transactions you're going to see money going to yourself it might be confusing so feel free to switch the recipient with the receiver uh if it makes more sense to you but what I like to do is I'll make this the reference right which is also public key so it's going to show a different person right because the reference is referencing the transaction it makes sense so from here we can say um the reference to string and that's the Avatar generates right completely unique one and not verified cool now the transaction purpose right this one is can become fully customizable but for me to understand how it works I'll say the user sent you Seoul through Phantom app okay cool and now status completed new date Source identifier awesome uh what else this new new set new transaction model open that doesn't exist here either so we're going to use is model open and set model open instead all right so we could do is change this set model open hit save and guess what that should be it all right so as I was saying we want to set model open instead of the set transaction uh set new transaction to false right because this is coming from the parent right here this is the actual QR modal right so on second thought maybe you want to close this after we make sure that the transaction goes through and before you hit save like I just did you want to make sure that you clear the interval as well so let's clear the interval and pass an interval and then you're going to say 500 here and don't forget to return the clear integral otherwise you're gonna get a post error that I might get in just a second and the next thing you want to do is let's set up the catch right so I'm just going to temporarily stop my server because I don't want the interval to run over and over again in case you guys saved so stop the server let's set up a bunch of the catches all right so there's a couple different errors that selling a pay can find for you it's the find reference error and the validate transfer so it's going to help us identify what went wrong so if you just say if e oops e instance of find the reference error then we know that there's no transaction found so we can say no transaction found yet ignore this you can ignore this basically uh the next instance that can happen is if e instance of valid date transfer error you can say the transaction is basically just invalid transaction is invalid so console.error oops for whatever reason the transaction invalid and you can also return after that as well um the next thing we could do is just console.error uh unknown error so this is this is really bad if you see unknown error okay so this is gonna help us debug in case anything goes wrong so I'm going to yarn Dev again and we might have some errors on here so let's just refresh this give it a minute to fix itself okay and while we do that let's go check on our salon Okay so click on Phantom we are working with zero Solana we're basically broke we have point one um we want to do is take it from our mobile app which should have some soul already and let's check our console to see if it's spamming ourselves nope all right this is normal we should see this it stops and then it starts listening waiting for the transaction again okay so let's go ahead open our QR code cool and I'm going to start recording on my phone so make sure you download the Phantom Wallet app on your app store and give yourself some test Solana and you can see from my screen here I have exactly 1.991 sold all right so you want to send that to this wallet so we can go ahead and click on the top right so we're going to do is open up Phantom and check how much cilant we have we are broke we have zero Solana left what we want to do is open up your phone download the Phantom Wallet app from your app store get yourself some Solana and I'm gonna start recording on my phone as well cool so once you're on your phone what you could do is click on your profile picture load QR code oops sorry Let me refresh this real quick load QR code and then on the top right on your phone it's going to open up your camera and scan it so I can see our label is there thanks for your soul um the message which is customizable go ahead and hit send and make sure it says one sold so send you can inspect elements while we do that and we got some unknown error oh boy set transactions is not a function okay so it looks like it went through but we the set transactions is not a function and I think I know why so this is why we test things so I'm going to stop that I'm recording on my phone let's go to our cash app hook and yes that's why set Tran transactions should be here and if we go up here should be set transactions set wow I couldn't believe I spelled it wrong all this time so it said transactions and I think in our QR yeah every single time I wrote transaction it was without the end so that's going to be a problem so we should probably go back to the on pay of the use cash app and go back to here and add that n in there awesome okay so now we can try this again I might need to refund myself because now I have no money in my Solana so let's go ahead and do that okay so I successfully refunded my Solana I went back in the code I fixed the set transactions it should exist now so let's give it a nice refresh let's try this again so looking at my Phantom Extinction how many Salon do I have I should have zero like I said we're broke right so what we want to do next go on your phone and start recording on this okay and again you should have the Phantom app installed from the App Store I have exactly 1.9 soul that I could send myself so let's go ahead and open this guy up load the QR code for ourselves hit console and you can see that's waiting for transactions all right six seven eight cool now on the top right of your phone click on that square scan the QR code and Bam you should see a summary of everything we wrote thanks for your soul cookie emoji and hit send and cross our fingers look at that it said scent and my front and app updated confirmed proceed with evil deeds and now that's it we did it we sent our cash app from our phone to our wallet all right so now if I look at Phantom we should see one Soul here hey we're not bankrupt anymore we have one soul and after a while you can see in our local storage it updated users sent you Soul through Phantom app there we go so we successfully did something through mobile with our front app which is super cool so again drop a like if you liked the video if you want to see more comment down below this is the cash app build peacein this video we are making cash app web 3.0 dap with nexjs I'll be showing you how to make your cash app clone work with something called Solana pick if you don't know what solanape is it's a digital payment platform built on the Solana blockchain that you can use to make it so that your front-end app can now send money and Solana to other users and you can feel free to customize this web app and make it your own and add it to your portfolio so without further Ado let's get started alright so here we have the app and as you can see there's a couple transactions on here this one is for NBA tickets as you know two Solana is pretty expensive so maybe that's how much it costs right another transaction series you just sent you Seoul through the Phantom map right we have functionality where we can load a QR code and I can literally scan this with my phone and I can pay through my phone so if you want to set up what's called a point of sale system I'll show you guys how to do that later in the video so stay tuned the main feature though is that you can you know disconnect or connect your wallet you can see all the transactions which are all being being stored in local storage all right so we're going to hit new and then as you can see there is a test here that we could do and we can even put this for like dinner for example right for and you can change your one sold to two syllable we'll do one soul and if I hit pay send one cell hit approve all right and as you can see thinner is there as well and if we look at my Solana wallet I had a 15 Soul now I have 14 and in my other wallet that I sent this to 4A should be five instead of four and if you look it's five so that's pretty simple very simple app for you guys today let's get started all right so you might be asking Lance how do I get started working on this project well we have something super awesome for you guys if you open your terminal so you could do this multiple ways well one way is to open up vs code press Ctrl J and make sure that the path here is the folder that you want so you have to do CD and then your folder name right so whatever your folder name is replace that right here right so this is where I want to put it it's in my projects folder and all you guys have to write is something called npx collaborate programmer okay so this is the latest version currently at the recording of this video but you can always make sure it's the latest if you do npx cloud and programmer at least and if you hit enter go ahead and put your email address which is for me with this and your name and once you do that you'll get access to all of our portfolio projects that you can add to your own portfolio and be sure to customize them and make them your own build something else with them so you don't have to mix on a cash app you can make your own website where users can send different transactions or even set up a store with Solana pay as your point of sale system so I'm going to click install on a cash app enter right and it's going to run some scripts and I'll come back into the video Once that's done and we can get started on fixing and starting the app alright so let's get started so at this point you should have used our CLI tool to get the startup files that you need you can make sure by checking if you are in the CLI starter branch and all you need to do is start is press yarn Dev like I mentioned earlier you don't need to download any packages because if you use our CLI tool it's done for you so what we want to do now is open up your browser and let's head to localhost and start that project because you're going to notice it's going to be a little bit different so let's take a look so you can notice that if you look at the transactions that is static transactions I didn't make those they're just default there we're also not logged in as you can see right here and we can't connect our wallet anyways as well as there's no pay functionality it doesn't work so our job is to show you how to get this app working while teaching you guys about Solana pay so the very first thing that I like to do is start with our wallet connection so as you can see I'm clicking but connect while doesn't work and our wallet of choice today is Phantom wallet of course so log into your Phantom wallet if you already have one if you don't we're going to show you guys how to get Phantom on so skip ahead a little bit in the video if you already have Phantom so what we need to do is head over to Google and you can go on Google Chrome and write Phantom wallet extension okay and once you do you can click this first link here and it's going to say Phantom and just click add to Chrome once you do that you should see the little extension right here on the top right corner click it and create a new wallet you're going to get a set of phrases save that phrase don't share it anybody um also don't show anybody your private Keys as well or else they'll have access to your money right another thing that you're going to need to do is click on your profile and make sure you're on the right setting so click developer settings and change the network to devnet right there's going to be three networks here mainnet test net and devnet we are going to be using the devnet so it's not real Solana so we can play around as much as we like awesome cool so once you have some Solana in your wallet I have two we can go ahead and start our wallet connection all right so by this point you should have the Phantom wallet extension all ready to go and the first thing that we're going to do is set up the connect wallet functionality right so quick question do you know where this button is in my app if you don't know you're gonna have to stick with me and if you do feel free to move on ahead alright so where in my front end folder does that wallet connect button live right you're gonna have to understand how the app works because you never you didn't make this app you don't know how it works so let me show you guys how it works so let's hit go to the browser again and let's head over to zipboard and let's draw out the parent child relationship of my app right so what do I mean by that if you look over here and let me make this box let's say that this represents my entire app yeah so every app component in react has a child what do I mean by that well this app is going to have an index component child all right so index.js how do I know well let's take a look at my vs code so let's go to Pages let's go to app and you can see right there's a head and there's a component in line 15 right here do you guys see that right here component awesome so what is this component if I were to click into it you'd notice that this component is actually the index all right so all this is the index let me zoom in for you guys so you can see that a lot better so let's take this go down press Ctrl B boom all right how's that so this should be a lot more clear now so this is the index right so if I were to do like a side by side let's put this in here and let's put this right here right and let's bring this back so going back to cash up right this is my app so far don't mind that everything is all smushed up but take a look at this guys right if I were to take out this component right here nav menu look what happens I'll calmed it out see and boom we lost all of the items right here right and new this new button went all the way to the top okay what if I took out this transaction list boom no transaction list right this works because inside the index.js are more components right so let's illustrate that now so what did I comment.nav menu so that means oops not that that means here the index.js has a child of the nav menu nav menu right also has a child of transactions right trends all right this is important because if you've never worked in react before or if you've never seen this project before how are you going to find anything or understand anything that I ask you right so if you know this you're in great shape but if you don't keep up with me right so we got nav menu here right there's also transaction QR model and profile so let's add those as well so let's do more arrows do this rectangle another rectangle here and we'll do profile and we'll do the say QR model QR or modal right and these have arrows to point that this is the child of index what else do we got we have action and new transaction model and search bar right let's just not worry about those for now but these are the main ones all right so let's make this full screen again okay cool so this is the profile right here right this is the nav menu this is the transactions okay so if I were to ask you which of these like the profile the nav menu or the transactions which of these components is going to have the connect wallet button and if you said the nav menu you'd be correct so let's take a look at the nav menus let me undo all that go back to RBS code and we can make this full screen as well oops still in the draw tool boom so nav menu you said right so if we look at the nav menu and this is probably giving us an errors don't worry about that for now go to components we'll go to uh yep and then we go to nav menu I mean take a look what's inside we see nav menu here man menu item and we also see button here like what could this button be so if I comment this out hit save let's take a look damn okay so look we lost the connect wall button which only tells me that this is our button all right so we need to add the Phantom connect wallet button right so to do that we're going to have to get the connection first let's set up the connection so to set up the connection the first thing that you're going to have to do is head over to your app.js and once you're here you do know now that this is representing our index.js what we need to do is wrap our index.js with the wallet connection so let's go ahead and set that up so the way I like to set it up is go to walletconnectionprovider.js and that's going to be in the context folder and to set up that connection we're gonna need to import a couple of things let me just zoom in a bit can you see that and we can say import connection provider and a wallet provider so we do connection provider and you're going to see the suggestion here it's going to come from one of our packages Solana wallet adapter react all right so get connection provider and the next thing that we want to get is going to be wallet provider yeah there's actually multiple different ways to set this up right you've seen me do it a couple times by now um this is another way so we can also import the wallet modal provider right and this is coming from Solana wallet adapter react UI right this provider is specifically when I click the connect wall button you're going to see the selection of wallets Solano actually provides you that modal so you don't have to make it from scratch so I'm gonna make sure to import that and once you import that model let's import the wallet that we're going to use and like I mentioned we are using Phantom right so what you want to import specifically is Phantom wallet adapter all right you can get this from I believe it's at Solana wall adapter wallet so this thing right here hit save and once you do that uh the only thing we'll need next is a react hook called use memo okay and then that's just gonna come from react itself cool so after that that's all the Imports that we need let's go ahead and set up the provider so we can do that by saying const wallet connection provider is equal to and error function like so okay and then when once you're inside here you can say const endpoint equal to use memo and inside the use memo hook you're going to make an anonymous function like so and you're just going to say something like this it's going to be https colon slash slash API Dot devnet.solana.com and then you're going to put a comma here and put an empty array all right so what is an endpoint an endpoint is what we're using it's an RPC node that's going to help us connect directly to the blockchain so this is helping us connect directly to the devnet of Solana and we're saving it using our use memo hook right so that's our endpoint we should also set up our wallets here so by wallets I mean what wallets are we going to use to connect to our app and we're going to use use memo again uh the only difference with this though is we're going to put this in an array and I say new Phantom wallet adapter right a new instance of phantom wallet if you guys have any other wallets you want to use you would basically add them to this array like so okay after that we're gonna return here and this is going to return a couple different things so it's going to return our connection provider so we set it up like that it's going to have our wallet provider inside of that okay and then within that we have our wallet oops wallet modal provider okay and inside that wallet motor provider it's going to take in children right and this is not going to make sense because we have to go up here and also pass in children let's go up here and also pass in children so once that's done make sure you actually export this so export default wallet connection provider and the reason we're gonna do that is because we're going to import it in our app.js so what we want to do now is to do control b or command B and head over to our app.js and we're already importing Dynamic but we're going to use this to get our wallet connection provider so we say wallet connection provider and we're going to say equals dynamic and we're going to import it by doing something like this say import comma here quotes dot dot forward slash uh context and then wallet connection provider right and then from there comma exclamation point next match my curly braces is what I mean and say SSR to false okay and then a comma and after that hit save and what we want to do is make sure that our component here is wrapped with that wallet connection so we can say while the connection provider and copy this or cut it and just move it up to here save and I'm just going to erase this to make space and boom that's it we set up the connection right now that the wallet is connected our our endpoint is in there there is one more thing that we're missing I think I got to go back to the wall connection provider and we need to provide the endpoint and the wallet so this that's why this is grayed out so head back to your wallet connection provider and go inside your connection provider and we're going to pass in a prop and the prop is going to be called endpoint right because it's going to inspect an end point and we just pass in our variable like so and for the wallet provider itself it's going to expect some wallets pass in that variable that matches as well and another thing I like to add is something called auto connect so if you're already logged into your Phantom wallet and you load the page you will already connect that wallet that is logged in so cool so it's really cool that it does that for you but when you look back at the app you're not going to notice any significant change because we didn't even set up this button so let's go ahead and do that so going back to what component guys three two one what did you say if you said nav menu you are correct so I'm going to press command B and notice line three we're importing the wallet multi button so let's go ahead and do that so I'm going to erase this and I'm going to say wallet multi button like so hit save and Bam there it is so if our connection is correct I can click select wallet there's our wallet modal click Phantom and boom didn't connect there you go connect you can even disconnect and click that and boom cool so cool it's connected now and if you notice it kind of stands out and usually I kind of leave it like this but today let's just style it so that it matches the rest of our um nav menu so let's go ahead and go back to here if you guys want to know how to style it go to nav menu and what we could do is this we cannot make this self-closing we can make this like this and we can give this a class name and I'll just call it Phantom button and in there we can also put a start icon okay so if you give this a start icon we can use our user icon Circle right so that is that symbol with the person inside of it that you saw earlier we're going to use that right here we can say user Circle icon right and give this a style right so the styling is technically all here and you can say that the height is let's say 24 and the width is also 24 and the color I have it for you guys the color is going to be quote um hashtag or number sign one five e c 3 C like so after that uh go outside these two curly brackets and then we can put the self closing tab right here all right but we're not done yet we can also add a little span here and we wanted to say connect wallet right so we can say connect wallet net wallet and we also want to style that so we'll say class name text is small um the font can be like semi bold send me Bold and the text is going to be that same color we had here so let's get that and place it like so can't forget the hashtag cool so let's hit save and let's see what we got cool the spacing is terrible so something's going on here Phantom wallet text should be connected uh let me see class name font semi bold um it should be somewhere oh I see this shouldn't be an equal sign it should be Dash hey there you go cool it's like those little errors that always get you but that should just be a dash and it should just say connect well yeah I was playing around with this put connect save Okay cool so now we can disconnect and connect but now you'll notice that when I disconnect my wallet it's hard to tell if we're actually connected or not all right let's connect connect all right that's because we need to make some conditional rendering that if we're connected it just should say our wallet address for example so we could do that by importing it right here you'll notice two things that I'm already importing as a prop connected and public key so where is this coming from if you go back to your index.js go back to nav menu I'm already importing something called connected right but connected is coming from use wallet what that let's use while it lands well I'm glad you asked use wallet is coming from Solana wallet adapter react and basically if we're connected this should be true so that's console log right here and say uh connected comma are we connected so if you see this in our console if it says true where can our wallet is successfully connected if it says false we shouldn't be so let's go here inspect element console false are we connected true we are connected right so disconnect connected there we go so notice how when it says true we are connected when it's false we are not connected all right it's hard to tell because the text isn't changing so what that's why we want to set a condition so if connected is true show me my wallet address if connected is false show me connect wallet alright so we're back at the index page and now that you know how that works we can head over to the nav menu now and once you're in nav menu you can see that we are passing down connected as a prop and if you go to your button like so we can set up some conditional rendering so how do you set up that we can do that by putting curly brackets like so and set up a ternary operator so how do we do that you say connected right question mark you guys know what if statements are you can kind of read it like so so if connected is true all right what do you want to happen if it's true we want to see the public key right uh else else is like this colon right here else right we should see the quotes connect wallet okay so save that okay so connect wallet let's go over here look at that it says public key right why does it say public key because we're freaking connected though so if we go to disconnect it says connect wallet connect public key right now the problem is public key doesn't really show what my wallet address is so how do you know what your wallet address is click on your Phantom icon click on this wallet right here and you can see this top one eight t k z right right here eight tkz that is my public key or as known as my wallet address so how can I display my wallet address well go back to your code go back to index and if you remember if you look at this right here this used wallet hook it also comes with public key if I were to console log that console.log public key this is my key save go back to your app inspect element again you can see that that public key is your public key and do you know why you don't see the 80 that's because it's not a format that we can really read so if you do dot to string like so you're going to see the ATK this is my key all right so we're using public key from use wallet right and that is what we can use to render our key dynamically so how do we make use of this public key pass it down to the component that we want nav menu I sign up prop you can say my key is equal to a public key okay hit save there go to nav menu and we can get uh my key cool and from here instead of saying public key we can do something like this actually no we don't know how to do that we can probably say my key right here my key hit save and ah okay yeah yeah because it has to be a string that to string okay and now look at our new problem there's our key but it's way too long right that's why we need to what we call truncated so let's go ahead and truncate our public key so luckily I made a function that does that for you so if I click this this is a function it's going to take that long string and return a little dot dot dot in between it so it's not insanely long like that look at this all right that's how long your public key really is to truncate it we're going to make use of this function so go back to nav menu to import this function I'm just going to the path getting that function in the stream.js and now let's call truncate so where is it it's right here we can say truncate parentheses and wrap that key in there and Save and look at that more digestible a lot more easy to read it's going to be 8tkz dot dot dot all right so I literally took you step by step how to make this Dynamic disconnect connect wallet boom so that's looking good uh one thing that I want is I want this profile picture right to give me a unique profile picture as well as show my key because this one one one that's not me this is me right so how can I go from this to this right is the same way that we used public keyboard alright so we know let's see let's see what we know all right come with me child we go here we say we know that public key is equal equal to my wallet address right what else do we know where does this live in my app right where does this 111 exist in it's going to exist in my profile component right so we need to go to go to profile okay those are the two things that we're going to need let's go ahead and think about that so go in your index go let's take a look at our components and we're going to see profile dot Js all right it's a child of index and you can see here that I'm truncating a user address right so whenever you're opening up a new app that's that you didn't make from scratch right be sure to be able to answer all the questions like what is truncate what is user address right if you don't know what user address is we can console login console.log user address what is this save back to the app spec element console all right one one one one what is this so that's what user address is next question guys where does it come from where does user address come from well we know now that we can pass down what we call props so that means we're passing user address as a prop but who was the parent of profile all right I'll give you guys three seconds three two one who is the parent of profile if you look here this is the child the parent is index so go to index find profile and we see that we're passing it down which means it comes from here so let's find where user just is from user address is a state and we set it as one one one one right and if you look at here line 23 we're setting the avatar based on that address right so there's a lot of different things moving here let's break it down right so one the user just comes from this state right here okay but how do we make it so that profile right has the right user address hmm well one thing I could do is instead of passing user address we could pass public key let's see what happens if I do that change user address here to public key hit save let's go back to our app there you go why is it like that because public key is a BN right remember it's not in a format that we can read so if we go to user address we need to do a DOT two string kind of deal okay and also we got to do it here as well not two straight save save and you can't read properties of two strings okay all right so maybe we can pass down to a string beforehand so let's do public key.2 string like this yeah oh I see because it doesn't it doesn't know what public key is all right so when you first load the app we're not connected which means we don't have a public key so if I put a question mark here thanks truncate where are we calling trumpet that might be in the nav menu let's go back a bit let's put this back to user address we might have skipped some steps here all right cool all right let's go back let's go back it doesn't know what public key is just yet because it wasn't connected so what we need to do is set the state of the public key okay so we're gonna do this a different way I think we should set up our hook all right so we're getting the truncate error because it doesn't read public key right away it's trying to truncate a BN or like the the format that it can't really read just yet so what we want to do is let's make it easy for our app to read it and let's start working on our hook so under this hooks folder right here we're just going to say a new file and we're going to call it cash app dot Js awesome so this is a custom hook that we're making to set up all the functions such as the transaction payment creating the transaction and any state variables that we're going to use so the first thing you want to do is set up the hook is import a couple different things so let's do all the Imports right away so I'm going to make your life easy by saying import you state and use effect all this is coming from react from there we also want to get the Avatar URL so if we go back to index we have another function here called get Avatar URL and it's going to generate a random Avatar based on the key which we're passing in all right so we're also going to import that as well import get Avatar URL and you should have this function already built in with the starter files and let's import all the wallet stuff in here actually so we can say import wallet uh adapt Network adapter Network okay and this is going to come from uh at Solana wallet adapter it's not here slash wallet adapter base we want the base one okay cool save that wallet adapter Network called adapter Network okay import uh use connection from the Solana wall adapter and also use a wallet so we can get the public key and the connection as well next we want to import a couple things from Solana web3 so what we want to import is cluster API URL connection key pair you also want to get lamp ports personal don't worry if this doesn't make sense yet we're going to use all these Imports and I'm going to show you what they mean and how we're going to use them we can also get public key Capital One program one word and transaction cool and this is from Solano web3 like I said which is this right here and we also want to import big number from big number .js which we have in our packages cool so that's saved uh let's go set up our react hook so we can say export const use cash app that's what our name of our Hook is and if you didn't know this is how you can make your own custom one and let's see at the bottom here we can return anything we want so return object and whatever we put in this curly bracket is what we can pull outside to our app right so let's say um we're gonna use the wallet here so if we're going to use use wallet here we can say const connected and public key probably not that one the lowercase one is equal to use wallet right we can pass connected here and public key and we can go to index and we can actually erase this in line 16 right if I save this it's going to break right because public key is not defined and also we don't see the connected thing anymore but if we go down below here and import uh cache app use cash app import use cash app like so from Hook slash cache up and just say const uh connected and public key right here is equal to use Kesha it's fixed right all we did was set it up in our hook and then export it and import it here all right why do we do this because now instead of passing stuff down like I was doing earlier here it's easier to import it wherever we want all right so you can imagine it like so right so this is where our Hook is use Tasha and before I was setting up a public key right here right and if I wanted to use it in the profile I would have to pass it down as a prop right instead I can set a public key here and pass it down anywhere I want just like so and I'll have to pass it down at all okay so that's why we're doing that and when we set up the function it's going to make a lot more sense make our code a lot a lot cleaner so we are setting up connected and public key here let's also set up our Avatar there as well so we can X this out so I just cut that uh use effect and that's actually put it in our cash app hook right here cool so now that that's there we can do stuff like this if we're connected right then we want to set this Avatar all right but now there's going to be an error it's going to say something like set Avatar is undefined so let's go back here yep except Avatar is not defined do you guys know why that is I'm gonna give you three two one pause the video and see if you could fix it all right cool so if you want to know the answer to that let's get back to our index that's because our set Avatar state was defined in index so take that out of there and put it into your cash app hook save and now Avatar is not defined right and look where it's not defined in is it undefined in our cash up hook or is it undefined index and to find an index so how can we make it defined all right two things we have to do is one bring Avatar back out and said Avatar just in case and go to index and also go to line 21 and bring out have it have it all right now it says user address is not defined right in cash app because it has no idea what the hell this is we could do it instead is put in public key look at this let's put in public key instead which is our wallet hey that's our custom avatar based on our public key which is a t so there it is okay but now we want to set up this guy right the one I was talking about earlier these okay so how do we go about that well now that it's in our hook right let's also set up user address right because that number is coming from user address so we can take this guy it's a matter of fact we could take this guy save bring him to the cash app hook and put user address here and it might as well put set user address here too let's go back to our index and let's get user address so now we're going back okay cool so I still thinks our user address is one one one and that makes sense because we set it here let's also change the user address so what I'm going to do is actually erase this one here because I don't think we'll need it I don't think we'll need set Avatar either so just put Avatar and user just here for now and for the use effect here if we're connected set the Avatar to my avatar and set the user address to public key and don't forget to dot two strings so that we can read it and also this one as well dot two string and this might actually change our profile picture too by the way hit save and Bam look at that awesome so now we have a dynamic user profile component right what do I mean by Dynamic well if I disconnect this real quick and also change my wallet to wallet number two now you can see it's 4A something if I were to connect my wallet now look at that it's a different user so now anybody can log in and anybody can get their own user so I'm gonna switch to wall one look at that wallet one still has the same profile picture as well there you go and another thing that I forgot to mention the reason why we're not getting any truncate string error right is because when I set my user address with the public key right it's only going to do that if we're connected right so if we're connected public key does exist and we can truncate it otherwise it's like try to truncate a public key that doesn't exist just yet all right that's why I kept getting that error if we do it this way we can ensure it's only going to run when connected and we also want to do this pad connected here so that this will only run once and if connection changes otherwise it's going to keep running if we keep updating so make sure you do that and now let's add the next step so if you're here let's make it so that when we press pay we can actually send some salon right that's the main reason you're here how do we use Solana pay and before we move on I just wanted to give credit to pointer.gg they give an amazing tutorial on how to use Solana pay it is in typescript though so what I'm doing with this video is showing you guys how to use it in JavaScript which is not through it that much different another difference is that we're going to be setting up the transaction on the front end instead of an API route which is more secure so again when you're making this to production on the on the mainnet make sure you turn this and convert it to an API route okay cool with that said going back to the app we want to set up Solana pay inside of our cash app hook so go into your use cash app we imported a lot of the things you're going to be needing already but the first thing that we have to do is uh import a couple things or I mean pull a lot of things from the hooks so one thing that I wanted to pull is const connected oops const connection actually and this one's going to come from use connection all right so that's what we imported earlier right here um another thing that we should set up is any of our states so there's going to be something called a mount so let's do const amount and set amount okay set that equal to use State and usually the amount we can put at zero okay uh coming down to line 13 we have connected we have public key we also want to be able to send a transaction right so usually when we make a transaction Phantom will pop up here and ask us to sign and approve that transaction okay so we're going to send transaction like so cool so let's see is there anything else that we're going to need um another thing that we're going to need is I think that's it I think what's left is we should make that function so I'm going to make that function next so coming down under this use effect let's create uh create a transaction right that's what we want to do to send to our wallet and we can sign him from there okay so first you want to create the transaction that our wallet sends us and to create it we need to make a function so we can make this asynchronous and say async make transaction uh whoops async well actually we can do it like this const make transaction equals async right function and it's going to take in a couple different things okay it's going to take a few parameters it's going to be from wallet to wallet uh the amount and something that we'll call the reference okay so I'm gonna take in those things and we need to establish the network that we're using so we can say const network is equal to the wallet adapter Network and then you can say dot Dev Okay cool so we're taking this while adapter Network we're saying we're using the devnet right and then we can say cont endpoint here you can use your own RPC endpoint whether that is alchemy quick node inferior but again we're using uh the cluster API URL which is the devnet right the default endpoint that they provide us and we can also set up a connection you can say const connection is equal to new connection and this is capital connection coming from here and set this equal to that end so we're setting up our connection plugging in our endpoint which we're saying that we're using the devnet okay so this goes into this which goes into this okay uh next we want to make a note we can say this is get a resent block hash to include in the transaction okay so how do we do that well we can say const block hash is equal to oh wait connection dot get latest block hash and put finalized all right so we're going to get the last uh block hash that's in transaction and it's going to look for anything that says it's done or finalized okay next let's set up our actual transaction object that we want to send so we say const transaction is equal to how do we make the object new transaction right where is this transaction coming from it's coming from Solana web3 as you can see right here side of that you want to put an object here and basically pass in any properties of this transaction that we want located that's fine we can say recent block hash the block hash right the previous one that we got and we can say the fee payer right why do we care about the fee pair every time you make a transaction there is a small fee that you're going to pay you can think of it like taxes and the one who should pay is the person who uh the buyer or the one sending money right or signing so you can say from wallet Okay so the buyer pays the transaction fee so that's our transaction object and then from here now we can create the instruction right the actual ascending Solana part of this so to create the instruction or the actual payment of Solana transfer we can say const transfer instruction is equal to system program dot transfer okay so this is going to handle the transfer of funds so make it sure you put transfer here parentheses uh curly brackets and then say from public keys right and you're going to figure out where are you sending Solana from and that's going to be this parameter right here from one right so the Solana is going to be coming from me right and the idea is that we send it to whatever user that we put in so another thing here we're gonna put in this lamp ports you don't know what Lan ports are so there is Solana which is Seoul and you can break it down into smaller units called Lamp ports all right uh the best way to think of it is think of dollars and then you can break dollars down to cents all right so lamp ports is your Cent all right so here I set up this Lan ports key here and say the amount right the amount that we pass in so this could be one Solana or two Solana or you want to take that amount and you want to convert it to Seoul right so you can do that by saying multiplied by oops bye parentheses Glam ports per Soul right that's that import from here and you what you want to do with it is dot to number so to format it like so that's your number and then from there we can say to Pub Key like who you're sending it to put to wallet there okay cool all right so two Pub keys to wallet right so remember the type of this should be a public key a PK and this should also be a public key all right so that's the transfer instruction we can make a little comment there so we remember we can say uh create the instruction to send soul from buyer to person from owner to recipient okay cool and now we want to set up the transfer instruction right dot Keys dot push this is for the reference this is basically so that when we query for the reference the transaction is returned okay so what we want to do here to set that up is Pub Key is the reference which is also expecting a type of public key uh is the signer false and is writable should be false as well okay cool and now for the final step transaction dot add and then we put the instruction there okay so go here I'm going to add the instruction to the the transaction and then we just return the transaction okay there is another step to this this is just creating or making the transaction we also have to just you know run the transaction or do the payment okay uh this is actually the function create the function to run the transaction this will be added to be on to the bottom all right so this is the actual function that when you click new and then click pay this function is going to run when we write here and it's going to call the it's going to make a transaction and then process it okay so what we want to do here is similar thing we say const do Trends section we call it that is equal to async function and then inside here we want to pass in this object here and say the amount the receiver and the transaction per right like this is the description like why did you send this transaction it's basically like the payment for cash app project or the or what you put as the reason you're paying this person okay and you can even doesn't even have to be a cash app I want you guys to play with this functionality and make your own store right that's what the pointer.gg is setting up a cookie shop maybe you can play with that set up your own store and let's say you have your own uh I don't know your own shop your own eShop you can accept Solana payments using Solana pay all right so set it up to fit your need all right so we're doing do transaction you can say const from wallet is equal to public key right so from wallet is equal to the public key why is it equal to public key because that's my address who's ever logged in is the from line right next I want to say const to wallet all right so notice how we're setting up the parameters for make transaction like we're defining these things right two wallet is equal to new public key Receiver right because when I pass in like if I visualize this right if I go new and I put in a public key here it's not going to be in the PK format it's going to be in a string so you want to turn that string into a public key so to do that take that string and put it past it in new public key like so you with me okay good I'm glad you answered so now you can say const uh be an amount all right because this amount right here is just a number which is like one five two it's not a big number right but when you go to the make transaction that amount has to be a BN because it's going to be multiplied like so otherwise it's going to say uh you can't multiply by it all right so turn that into a b n by saying new big number uh is amount right and the reason why we didn't do it beforehand is because we're going to use this amount for the transaction details okay so coming down below here let's set up the reference is equal to key pair dot generate and our ref this will generate a random public key for our reference and then we can say const transaction is equal to a weight make transaction so notice how we're calling that function here so we can say oops so we can say make transaction now we can pass in all these variables we can say from wallet we can say to wallet and we can say BN amount right as the amount and reference is reference okay so make sure you take all these and pass it here and then I'll handle all that when it creates it cool uh now let's set up the transaction hash this is optional but I like to make sure that it's confirmed so we can send transaction right transaction and connection right and then we can console log it to get the transaction hash and then you can even look at Soul scan or Soul Explorer to see it from here we need to create eight actually do we need to do this we'll save this uploaded but we do need to create uh the transaction history of and I'll say that for later next thing we have to do is pass it along so let's just test our code right now so we're going to do the the um do transaction Okay cool so we have do transaction which calls make transactions so you don't have to pass down both we can just put do transaction here and go to where we need it so where did I say we need that do transaction we need it in the transaction component so let's go to transaction go to transaction list new transaction to go to new transaction model and if you look there's a button here it says pay and on click it's going to run pay what we can do here is get our cash app hook so we say import use cash app and we need to structure it and get the two transaction equals use cache here pass into transaction and since we're here we need to make an object and then pass in all of these states here the amount the receiver the transaction purpose right so we can do hmm we should also import these states in the use cash app actually so that's what I'm going to do is actually take these out so go ahead and line six through eight cut them go to your use cash app and let's bring them down here right so we already have set amount all right there so bring them out in there bring receiver bring transaction purpose right and let's make sure you take them here so uh Mount uh set amount we have receiver set oops set receiver we have transaction purpose set transaction purpose and save save save we're gonna get that error but we'll get we'll fix it if we bring it out here so we can do amount set amount we can do receiver set receiver you can do oh yeah set receiver exists you can do uh transaction purpose set transaction purpose there you go so now I hit save we're back to get are back together all right so that said now you can pass all those values in amount uh receiver and transaction purpose right so now all we did was just move the states to the cut use cash app we are then taking the change States and running do transaction and let's do it in a weight because I want to make sure that this happens first and then we can clear the state so let's see if this works so the way we can test this is first log into Phantom and take note of how much Solano we have so we only have two Solana in this wallet if I go to wallet number two he has four Solana so I'm going to give one Solana to wallet number two so this should end up with five this should end up with just one so let's go ahead and do that let's go ahead like new change this to one and who are we sending this to we're sending it to well number two so hit copy right here after you make a new wallet hit copy and what's the reason for this well I'm going to say four cookies I'm thinking about cookies right now let's do cookie boom all right let's see if this works let's pay and yes okay so usually if you see this this is our transaction that we created right and it says minus one Soul right if it says it can't calculate the price uh usually there's gonna be something wrong so make sure it gives you the right amount one sole hit approve clears it and it should close this so we need to fix that but let's see if it confirmed let me suspect element cool so we got the transaction hash right here um let's see how much longer we have we have One Soul okay well number two five Souls so it worked let's freaking go so we did notice a couple of things there when we did that uh one the model didn't close right so that means we need to set model open does this exist yes so set model open to false so set that to false and let me just make sure set model open is this okay cool all right so now when we run it it should close but next thing we need to do is it's not saved in our history this is still static transactions how can we make it Dynamic well I'll tell you the answer all right so how do we want to store transactions well we're going to be using something called local storage right we're not using a database we're using our in browsers storage and storing each transaction object in an array of all that and pulling them all right so let's figure out how to set that up the first thing I'm probably going to do is head over to your cash app hook and go ahead and set up the local storage hook that we can use so I'm going to go in between our use effect and our use connection and we can say const use local storage and this is going to take in the storage key that we're going to need and the fall back state right and you can set that equal to something like this okay so again this is our custom use local storage hook and what we could do is say const value and set value is equal to use state okay and if you do Json dot parse right we want to turn this local storage item to a Json so we do that by saying local storage that get item all right so we can get an item from our local storage we want to get an item based on the storage key okay cool so we're getting an item based on the storage key uh then we're going to parse that into a value uh let's see it's fine and we can do a question mark question mark fall back state right so if there isn't anything there we can set it back to a fallback State and we're going to error because this needs to be an equal sign right here and then in that same function we can do a use effect actually and in that use effect you can actually set the item here so we can do something like this and say local storage that set item based on the storage key Json Dot stringify and placing the value and semicolon here and then we can put the value and storage key like so put the dependency module put value and set value done yet because we need to use use local storage so we could do that by by setting up down here actually I can do it right under here you can say const ant array for transactions right there's gonna be our new transactions and set trend sections is equal to the use local storage right and then for here you can put the key is transactions and the fallback state will be an empty array now the key for this guys is to make sure you're passing down uh transactions here all right there's already a lot of things that we're passing down uh if you want to format it you can even format it like so dupe dude dude this will be faster actually if I do this way set amounts receiver set receiver transaction purpose boom and then you can add transactions and set Trend sections cool so save that and when you go to your index let's get those transactions as well so Trend sections and uh set transactions I don't think we need to set transactions here though but let's actually just erase that uh you're gonna see an error because there's two transactions right and we want to comment this one out and undefined is on iterable okay that's fine see so the error must be in cash app um looking in here const value Json parse that's fine it should be iterable if we return it so let's make sure we turn that array with value and set value save hey there we go so we see no transactions because there is none right how can I prove it to you well if you go to your index let's actually console log transactions here oh we should probably say here it is save yep array zero right if you're getting error at this point you can just say something like local storage dot clear parentheses and hit enter Make sure you do that because if you're getting any errors it's because it's trying to read something in local storage that doesn't fit the format so I had that error before so make sure you clear it so you should see nothing here okay and uh again nothing in the error for the word transactions make sure you comment this one out because this is static cool so we got that there it's already being passed in line 37 for me so that's why it'll automatically render it if there is something there what we need to do next is in our cash app go back to that function do transaction and let's create the transaction history object all right this is actually pretty easy uh we just have to make an object essentially all you have to do is just write constant new ID right because every transaction is going to be a new ID and the new ID will be based on the length of trans actions.length right plus one dot two strings string so it's going to be length of 0 at the beginning plus one the ID is going to be one next time we do this ID is one plus one it's gonna be two all right so from here we can say const new all right so I was saying const new ID is going to be the transactions.length plus one dot two string and now we can create the transaction object so we can do that by saying const new transaction and set that equal to the object so the idea is we create this new object and once we fill in all the parameters or keys for the object add it to that local storage array that we set up so what we need to do is set the key which is ID is going to be new ID all right we set that up earlier then we can do from and that just says like who is this uh transaction from and to store the information we need we need the name which will be public key right because remember public key is whoever is logged in so that's me or you all right next is the handle all right which is usually the dollar sign plus the username but we can just put that as public key now for the Avatar we should have the access to the Avatar because it's we put it up here right so it doesn't know what Avatar is so we can just say habitat and after you add the Avatar uh there's just this fun uh verified attribute you could say it's true are you verified by cash shop uh you could add this it's optional right but I'm just gonna put that there since I set it up and then we can say two right which is also going to equate to an object and this is for the receiver right so uh do we have access to receiver we do all right because remember when you make the transaction you're putting the receiver and we could pass that along here and for the handle all right I like to put this as blank because again it's the dollar sign plus the receiver you can just set it as that uh for the Avatar so by default it's not going to know what the Avatar is but if we call the get Avatar function here we can just give it an avatar all right so if we go back to the app well actually you can't see because there's no transactions but if you remember back here there was um like a profile picture we're going to be able to set that through what we're doing now okay so that said go back to the app and we can put the receiver and let me ask you guys this question what type is this receiver like by type I mean is it a number is it a string right is it a Boolean all right let me give you guys three seconds three two one if you said public key you'd be correct right and the code can't really read like this can get an avatar but it would be better if you turn that to a string first all right so it's an order operations here so this will happen first turn this into a string and then get the Avatar based on the string that this returns does that make sense cool so after that we can do verified and just for fun let's make this false so we got the two the from some other metadata that we need is going to be description all right so description is going to be description all right cool description put a comma here there we go description is going to be the transaction purpose right when you click on the transaction itself you're going to see this Details page that I showed in the demo all right so to get the right format for it we have to set up this object so description is transaction purposes transaction date is new date which is going to be the date today's date status of course it has to say completed um the amount can be the amount right and make sure it's not BN amount because it's going to be a number that it's not going to like uh source is going to be this and for identifier that can also be blank cool again these are like optional properties that if you want to see these details you can add them I'm just going to make it a dash for now cool so we made the object but are we done guys no as you can see this is grayed out which means it's not being used so how the hell are we gonna use this well we can do that by set new transactions right so we need to set up that state here but do we have that state actually we have we do not have a state so let's set that up so you want to get that modal open state so if we go to index I believe let's go to index yes the new transaction model is what I think we need this one's set to false we can actually take this out save and bring this to the cachet the reason why I'm bringing it here is because after we met make the object we should close it so to close it we just say set new transaction modal open to false all right so close the model and the most important part that we're actually here for is the set transactions right this is the coming from the use local storage hook so you do that and it's going to be an array and the new transaction all right so this is the object we just created up here but what you want to do right this is the key thing here is press comma oops comma dot dot dot transactions right this is a neat way using the spread operator to get all the array items in transactions and it's going to add this new one right here all right so it's quite a clever way using the spread operator awesome so save that there and uh are we oh yeah we already passed down our do transactions and this return and now it should run so let's test it out I'm going to go back to our app uh yes so this is gonna be undefined because we moved it so let's go here and let's bring it back up set new transaction model open okay uh huh oh yeah we need the state itself so that's new transaction model open save and are we bringing it out yep we gotta do that here set new transaction model open and new right here all right now we should be good to go ah transition is used but it's missing a true or false prop okay that means it's not reading the state of true or false which means oh I think I see what I did wrong guys yeah so I added stuff to this use state that shouldn't be there let's take this out oops not the whole thing these two and paste that in here because where these should come from use cash app as you can see so it said save and now all right are we good all right oh that's not what I meant to do oh yeah we should connect our wallet that's the issue here all right cool so no errors all right everything's all and nice D and D I'm just checking okay cool all right so now let's see if it works I'm going to do new and let's take a phantom wallet check all right we are down to how many Solana we are down to our last Solana all right so let's go ahead and pick new we're going to donate One Soul we are going to send this to wallet number two I'm gonna pay him off copy and we're gonna say for cookies all right I think that's what we did last time and let's do that and so now this should save in our transactions component right here because we're saving to local storage let's hit pay it's okay remember what I said this is a good sign if you actually can sign it hit approve oh uncut and promise true hmm oh there it is okay let's do a quick refresh it saved it to local storage amazing look at that so it's pretty much done there is a bonus feature uh if you look at the pointer.gg or if you just think about cash app in general when you click on your profile picture you get this nice QR code where you can use your phone to send money right you can do that with cash app if you just scan the QR code right and there's this functionality here that says load QR code but but it doesn't do anything so let me show you guys how to set up your very own QR code it's pretty simple all right so you want to add a QR code to your app right and the QR code it should be dynamic and what I mean by Dynamic is based on your public key it should make a QR code that automatically goes to this specific address right so let's think about how this works if I click my profile picture right here all right just to illustrate here it should load up this modal right so how the hell do we find that all right so oops I'm still in my draw tool so how can we go about finding this well if I go to my vs code that's probably going to be in my profile right so notice how it says set mode open set transaction QR model right that's where we need to go so you want press Ctrl or command and click profile and it should take you to that component quick little hack now once you're here let's take a look we're in profile and in on profile open it's going to set the model open to True right which means if you go to your components go to your transaction folder here and click on transaction QR modal so this is where we want to be loading everything the first thing that I'm thinking about is that we should create a state that says if the QR code is there or not right so basically a flag so what I'm thinking is go back to your index and you could put this in your cash out book but for simplicity's sake let's put it in our index and all you have to do is write const oops make the state const q r QR code and put set QR code right and it's kind of misleading but the name basically is going to be either true or false right and the key is when you pass it along to the transaction QR model okay so when I go over here you can say QR code is equal to or rather set QR code so let me fix that set QR code is equal to set QR code and these don't have to be the same name but I'm going to make it the same name so it's not confusing so this prop's name is taking this function okay so then we can go back here we can import set QR code at this one that we actually want this one transaction QR modal then we pass that in there all right and we want to set the state to true to re-render the component with the generated QR code so what's the process uh we need to generate the QR code based on public key right remember public key in this sense is our key the user log that's logged in then right set the state to true to rerun the component with the generated QR code right because this this isn't going to update on a Mac that's why I have a button that's going to re-render it or that's the idea here okay so all we have to do for this is pretty much just say set QR code it's true and once you've done that the question is now how the hell do we generate a QR code um if you get lost at any point there is documentation on this done by pointer.gg so shout outs to them um if you go to I believe Solana Bay salompe point of sale page scroll down to about here we want to generate this kind of QR code that we can use our phone to scan and then send money directly right so uh the code is similar to this but remember this is in typescript I'm going to be doing this modified version in JavaScript so again quick reminder this is done through the front end you can generate transactions through an API route that's way more secure because remember the client can modify data and you don't want that when you're dealing with your real money so that's my little disclaimer but back to the video let's start doing this so the way thing I want to do first is let's set up a use effect right because we want something to run at a certain time okay that's kind of why we think about use effect dude this is going to do something oops do something when the component first loads when it renders or when it gets removed or you can control this with use effect so what do we want to do in this use effect well the idea is to generate QR code okay so let's generate a QR code a couple we're gonna need a couple variables first is const recipient is equal to blank right so who is receiving uh this amount right so let's think about this if I go back to my app this QR code who does it belong to who's going to receive money from me scanning this it should be this user who's logged in right so if that's the case that's the case then the new public key right where am I getting this it's from this the new public key from the user address all right so user address is my public key as a string but now we're turning it back into a public key here right so next is the amount all right Okay so one thing about the amount sorry about that one thing about the amount so the amount has to be a big number so you can make it Dynamic by maybe going back to here and setting up like how much do you want to pay kind of like how this is so you can copy this functionality and apply it here I'll show you guys how to do a static version right every time you scan this QR code you're going to send them one Soul all right and they'll tell you that's not going to surprise you but the const amount is going to be a static amount for now it's gonna be one Soul every time I send money right so do that we need to make it a big number so you can say new big number and you should have big number imported already big number is string one right so if you ever want to change this you want to make the default five right you want to get rich say 10 all right or make it Dynamic later on go ahead and do that next is the reference so we're going to set the reference equal to key pair dot generate Dot Public key right so generate a random key pair as a public key to label as reference then it's the label right so when you run this transaction you'll see a little like notification that says uh why you're sending money right so you can say this is two evil cookies Incorporated that's the example they used right so let's just do that we'll say evil cookies Incorporated and for the message right you can send who's ever clicking on the QR code a nice message right so we can say thanks for your soul let's put cookies because that's been on my mind boom so these are the variables that we're going to pass in to generate that QR code right so one of the first things we need to do is say const URL params is equal to recipient um amount reference label message okay of course that's the url url params that we need to generate the QR code um there's a way to make it so that it doesn't even have to be Seoul you can even use usdc so the guide on pointer.gg also tells you how you can use usdc it's probably going to be usdc address right here so pass that in somewhere here but again we're just using soul for this build so that's the URL params and then from there we're going to say const URL is equal to encode URL parentheses URL params okay and encode URL is coming from Solana pay right so this is the module that's going to help us generate the QR codes we don't have to do everything from scratch or yourself right we're going to utilize all of these functions here here okay so we're going to code our URL params and from here we're going to say cons QR is equal to create QR all right so we're using that create QR function we're going to pass in the URL which we just made we're going to pass in 488 comma trans parents right so this is kind of like how do you want the QR to look all right so you can change this for the size and we're gonna make it transparent okay now uh the next part is setting up the ref one thing I'm realizing we're going to need to set up our use ref hook for this all right so if you don't know what use ref Hook is you can think of it like a special function that helps us remember things right let's say we have a box for example and I wanted to remember what I put in this box right use rough hook lets us look into that box so then store things in it and lets us pull things out for it later all right so if that made sense to you what we're going to do next is set up that hook so it should be already imported uh right here and to use it all we have to do is come up to the top here and say const QR ref is equal to use ref all right at this moment we're not technically doing anything yet use rep is going to give us back an object right we need to reference something now so what are we referencing if you look at this div over here every HTML element has a built-in property called ref so it looks like every element has a class name that you could utilize right some have it on click that you can utilize right we can use a ref here and say equal to q r right so this div specific div that's inside the modal is going to host the QR code essential all right think of it like that so this is our box and we're going to store our QR code reference in here does that make sense cool so let's see cons QR ref is equal to use ref okay and the next thing we should probably do is import use connection I think I'm using it right here and we can say const destructure connection connection equals use connection oops like so okay it's going to come into play later uh what do we want to do next Okay cool so let's come back to our function right here Line 39 for me I want to do is if all right we're gonna check that box now qrf dot current all right if there's something in here all right then q r ref dot current dot HTML all right we're directly targeting the HTML of our reference right uh and it should be inner HTML actually inner HTML that makes more sense it's equal to quotes right and we can append something to that QR so QR dot append the QR oops QR ref dot current so essentially putting appending the QR code to our box so that it's going to live in here that's the idea okay could not find create QR oh capital r boom so now it exists so let's hit save any errors on this guy nope still good what happens if I click this black screen okay so we're closer right it shouldn't be uh it shouldn't look like that just want to check something yeah it shouldn't be a black screen which means our parameters might be a little off but this is a good step okay okay just doing some troubleshooting it shouldn't be a black screen you saw that let's look at how it's generating create QR URL size trans apparent guys so if we do transparent it's a load oh I saw it perfect Okay cool so I saw it it worked that's why spelling matters in your app so just try that one more time for safety ah there we go we should see an actual QR code so we're good to go so make sure you spell transparent correctly and now we need to wait for the transaction right wait for the user to send the transaction right so this part isn't um gonna be done on the app itself this is going to be done on your phone or the mobile app that scanned the QR code so we need to be listening for that so constantly making an interval that listens for the user right again not the most ideal way but uh here's a hack we could do const interval is equal to set in triple interval async and inside is async we can call into log and this is optional just to show you waiting for transaction confirmation it's going to appear a couple times right but what we want to wait for and constantly try is seeing if there is a transaction so let's set up a try catch here and if you don't know catch is going to have e and you can have like console.log error okay and we can have more detailed uh catches and I'll show you guys how to do that in just a second and the first thing you want to do is check if there's any transactions for the reference right so to do that we can say try const signature info is equal to 08 fine reference connection right so we're passing in the use connection here and we're also using the find reference function right and it's going to take uh the reference itself it's going to see if there's anything with that reference and put an object here and put finality confirmed and that should be a string finality confirmed and I think I spelled that right cool after that this is the part where it's validating so you can even put a consular validated right again optional so to validate the transfer you have to say await validate transfer right that's kind of obvious uh where am I getting this from it's this function right here okay validate transfer and we can pass in everything we passed in before which is the connection that we're using um the signature info dot signature right so this is the actual us saying yeah I confirmed the transaction but now on the front end app on mobile okay and it's gonna take in an object as well so make sure you put a comma here put an object out and say the recipient right the amount and the reference pass in these two things and they all should exist at the top here in our URL params right I'm actually not in our Europe Rams and the variable that we made up here so the recipient the amount and the reference like who is it going to what's the amount and what's the reference okay and from here another comma object commitment confirmed right so this is more validation and parentheses and yeah cool at this point right at this point the transaction is confirmed let's add the transaction to our local storage right because I want to see this local storage um item inside our list of transactions right otherwise we can't really tell unless we're in Mobile so to do that and again if you are curious like how can I make this a live app that's not local storage you would replace the local storage code with writing to a database you can use sanity you can use Firebase right that can store your transactions for you and then pull it okay so feel free to replace that or leave a comment down below if you want to see a full scale like uh shop using Solana pay so let me know if you are interested in that and I can go and put a more in-depth tutorial cool anyways let's set that up so the cool part about you know storing this into local storage is it's exactly the same as this right so if we scroll all the way here this is the exact same so let's copy that let's bring that to transaction QR model and paste it right so what's the difference here um it doesn't know what transactions is so we have to bring that into our app so how do we make it understand what transactions is well luckily we can use cash app right so I can say import use cash app Excel like this and then just bring it in here as you can see const transactions set transactions is equal to use cash app bam so now it should know what it is let's scroll down and modify the code some more all right so it knows what transaction is it doesn't know what public key is right so how can we fix that so one option is to you know get public key from newscast app but there is something we could use right we can use recipient right recipient is already what we need it's already the public key right so it's us recipient is another way of saying user address okay cool but now the Avatar it doesn't know what Avatar is and again solution bring it from use cash app or right we can use the get Avatar URL which is not it here so we can say import git Avatar URL right and we're going to call that function right here get Avatar URL and pass in recipient dot to string all right okay cool and now what about two right this is kind of confusing uh this is who we're sending money to but when you're reading the transactions you're going to see money going to yourself it might be confusing so feel free to switch the recipient with the receiver uh if it makes more sense to you but what I like to do is I'll make this the reference right which is also public key so it's going to show a different person right because the reference is referencing the transaction it makes sense so from here we can say um the reference to string and that's the Avatar generates right completely unique one and not verified cool now the transaction purpose right this one is can become fully customizable but for me to understand how it works I'll say the user sent you Seoul through Phantom app okay cool and now status completed new date Source identifier awesome uh what else this new new set new transaction model open that doesn't exist here either so we're going to use is model open and set model open instead all right so we could do is change this set model open hit save and guess what that should be it all right so as I was saying we want to set model open instead of the set transaction uh set new transaction to false right because this is coming from the parent right here this is the actual QR modal right so on second thought maybe you want to close this after we make sure that the transaction goes through and before you hit save like I just did you want to make sure that you clear the interval as well so let's clear the interval and pass an interval and then you're going to say 500 here and don't forget to return the clear integral otherwise you're gonna get a post error that I might get in just a second and the next thing you want to do is let's set up the catch right so I'm just going to temporarily stop my server because I don't want the interval to run over and over again in case you guys saved so stop the server let's set up a bunch of the catches all right so there's a couple different errors that selling a pay can find for you it's the find reference error and the validate transfer so it's going to help us identify what went wrong so if you just say if e oops e instance of find the reference error then we know that there's no transaction found so we can say no transaction found yet ignore this you can ignore this basically uh the next instance that can happen is if e instance of valid date transfer error you can say the transaction is basically just invalid transaction is invalid so console.error oops for whatever reason the transaction invalid and you can also return after that as well um the next thing we could do is just console.error uh unknown error so this is this is really bad if you see unknown error okay so this is gonna help us debug in case anything goes wrong so I'm going to yarn Dev again and we might have some errors on here so let's just refresh this give it a minute to fix itself okay and while we do that let's go check on our salon Okay so click on Phantom we are working with zero Solana we're basically broke we have point one um we want to do is take it from our mobile app which should have some soul already and let's check our console to see if it's spamming ourselves nope all right this is normal we should see this it stops and then it starts listening waiting for the transaction again okay so let's go ahead open our QR code cool and I'm going to start recording on my phone so make sure you download the Phantom Wallet app on your app store and give yourself some test Solana and you can see from my screen here I have exactly 1.991 sold all right so you want to send that to this wallet so we can go ahead and click on the top right so we're going to do is open up Phantom and check how much cilant we have we are broke we have zero Solana left what we want to do is open up your phone download the Phantom Wallet app from your app store get yourself some Solana and I'm gonna start recording on my phone as well cool so once you're on your phone what you could do is click on your profile picture load QR code oops sorry Let me refresh this real quick load QR code and then on the top right on your phone it's going to open up your camera and scan it so I can see our label is there thanks for your soul um the message which is customizable go ahead and hit send and make sure it says one sold so send you can inspect elements while we do that and we got some unknown error oh boy set transactions is not a function okay so it looks like it went through but we the set transactions is not a function and I think I know why so this is why we test things so I'm going to stop that I'm recording on my phone let's go to our cash app hook and yes that's why set Tran transactions should be here and if we go up here should be set transactions set wow I couldn't believe I spelled it wrong all this time so it said transactions and I think in our QR yeah every single time I wrote transaction it was without the end so that's going to be a problem so we should probably go back to the on pay of the use cash app and go back to here and add that n in there awesome okay so now we can try this again I might need to refund myself because now I have no money in my Solana so let's go ahead and do that okay so I successfully refunded my Solana I went back in the code I fixed the set transactions it should exist now so let's give it a nice refresh let's try this again so looking at my Phantom Extinction how many Salon do I have I should have zero like I said we're broke right so what we want to do next go on your phone and start recording on this okay and again you should have the Phantom app installed from the App Store I have exactly 1.9 soul that I could send myself so let's go ahead and open this guy up load the QR code for ourselves hit console and you can see that's waiting for transactions all right six seven eight cool now on the top right of your phone click on that square scan the QR code and Bam you should see a summary of everything we wrote thanks for your soul cookie emoji and hit send and cross our fingers look at that it said scent and my front and app updated confirmed proceed with evil deeds and now that's it we did it we sent our cash app from our phone to our wallet all right so now if I look at Phantom we should see one Soul here hey we're not bankrupt anymore we have one soul and after a while you can see in our local storage it updated users sent you Soul through Phantom app there we go so we successfully did something through mobile with our front app which is super cool so again drop a like if you liked the video if you want to see more comment down below this is the cash app build peace\n"