🔴 Build Spotify Blockchain Web3 dApp with Next.js, Solana, Phantom, QuickNode & Digital Ocean

you'll build spotify web 3.0 adapt with next.js you'll also learn how to create your own program on the solana blockchain using the anchor framework in the programming language called rust we'll also be storing the music data on the solana blockchain we're gonna use quicknote as our rpc provider to connect to the blockchain you'll use cargo to compile and deploy your own smart contract you're gonna be using phantom wallet to actually authenticate your users that sign in and out of your application phantom wallet i believe is one of the best wallets to pair up with solana and it's so seamless and the ui is an incredible experience that's why we're using that they'll use the solana web3.js package to interact with your smart contract on the blockchain we'll use context api to manage the built-in music player on your spotify app will then deploy this app to digitalocean and host your own spotify web 3.0 blockchain app on the freaking interwebs are you excited because i'm excited with that said smash that like button turn it white hit the subscribe button because it's the best channel on the planet when it comes to you becoming a web 3d developer and with that said let's jump right into it what is up youtube i'm super excited today to demo the spotify app for you guys so let's just get started right away the first thing you'll see is the log in to access this app as you can see we are missing an s but it doesn't mean it doesn't work once you see this button click select wallet and you will need a phantom wallet to connect to this build so i have phantom already and i'll show you guys how to do that later in the video but that's not the focus click on phantom it's gonna prompt you to log in i'm already logged in as you can see and there's a super sick feature where i'll show you guys how to make it so that people need to pay to use your own service that you work hard to make this is an optional thing that you can include but it's something cool to learn so make a payment to get our app it's pretty cheap you're just going to pay point one test solana so let's click on this and only a one-time payment which is cool so i hit approve awesome an alert that says transaction successful and all i have to do is just wait for it to refresh by passing pressing verify payment just give it a second awesome and once you click it it refreshes and look at this beautiful app how amazing this is right you won't even think that this is like the real spotify we have playlists we have songs and beats we have all our favorite songs over here all you need to do is customize it however you want and add it to your portfolio but what is functional are these two songs right here these songs are actually living on the blockchain and are being fetched from the solana network to our front-end app so let's see if they work right i'm gonna click on floating so all right you guys can hear that what if i press pause let's go right there's pause play functionality and best of yet there is a play next and the cool part it's really smart if i were to play next and this is on loop what song should i go to right back to the first one so all of that functionality is included in our app all right and let me show you guys more my favorite feature which is let's add a song right to add a song what you're going to need is to host that mp3 file on the cloud we're using cloudenary for this and also a title for it so this one is called sun kissed blood and then for the music url i have it here feel free to use any cloud hosting site you want i'm again i'm using this one and it's not the main focus of the video but once you have that rest set up all you do is click create new so i'll hit create new right solana is going to ask me to if i want to store it and approve it disappears let's give it a magic minute and there we go do you guys see it the sun kiss glow song that we just added is live in our app and guess what it's playable as well can i hear the file cracker on this one beautiful you guys don't have to add any songs that i add feel free to add whatever you want put this in portfolio do you guys want to learn how to build this i know i do so i'll see you guys in the tutorial hello youtube welcome back to another video it's lance here again and i'm with you today to teach you about the spotify clone i'm super excited about this build because i personally love music and it'd be super cool to teach you how to store songs on the solana network so enough talking i want to show you guys how to build this app so let's head over to your terminal once you open up your terminal let's use our fancy cli tool that we just made i'll have to do is type in npx clever programmer like so and hit enter type in your email address i'll put in my clever programmer account type in your name and look at that so you're going to see two projects at the moment and if you're seeing this in the future you might see a whole list of projects that we've created together so we don't worry about tick tock we want to click on spotify because once i hit enter bam take a look at that so let's make this vs code extension nice and big i didn't open vs code the cli tool did it for us which is super amazing as you can see too it created the next js app for us so one thing you got to make sure is make sure you have the node modules installed for whatever reason you don't have node modules you can take a look at what packages we have over here you can see we have a couple especially if you want to start using solana for this and to double check if you do you can one see if you have the folder and if not you can type in npm install or yarn if you want to use yarn okay so i'm going to install my dependencies i'll check back with you guys in a second okay amazing so if you have your node modules ready to go you can go ahead and type in yarn dev okay so i hit yarn dev looks like it's ready to go at localhost 3000 i hit enter and take a look at that as you can see we gave away some of the front end for the app mainly because i want to be teaching you guys how to integrate your app with solana so don't worry i didn't give away all the front end we're going to be doing some of the main features together like the player and the header this is just static information so you're not missing too much with all of this so now that you have your app up and ready to go we can go ahead and get started all right so one of the first things we're going to do is i'm going to switch these two windows around because usually i have the code on the left and the browser on the right so let's format this real quick don't mind me cool let me go ahead and exit our terminal and boom there we go so i can minimize this and let's just take a quick look around as you can see this is a standard next.js app with some starter files of course right so we have the index.js which comes with every react app and the only thing that it holds is this audio tag which is what we're going to use to set up and play music which is pretty much given to us with javascript with the home page that is a component over here which is going to hold all of this so if i do like an alt c here and do a command b you guys can see i've made a little comment for you that says start coding here so this would be nav this would be activity right that's what's given cool other than that there is a couple components that are made like the activity and nav stuff which again is all this sidebar is right here we're going to be making a lot more components so don't feel like you missed out so one of the first things i'll have you do is let's go ahead and make the login component so i'm going to go over here go over to components and let's just say new file and we can say login.js okay once that's done i'm just going to do an rafce oops did it too fast r-a-f-c-e boom to set up the component i'll hit save and the trick that we're going to do here is if i do control p and head over to the index notice how it's going it loads the home page right it's just to temporarily load it we instead we want to be loading the login page right because they can't get into our app until the user logs in so if that makes sense let's instead of importing this let's import login from components login and we don't want home page we want log okay you can go ahead and erase this comment because that is complete so if i save this now hey look at that it says login that is totally fine so if you remember our demo the login component is going to ask us to connect with our wallet so if we're making a project on solana we typically use phantom wallet so if you don't have phantom installed let me show you guys how to do that now so all you have to do is type in phantom and you can say extension and usually it'll lead you to this chrome website if you didn't know phantom is the wallet where you can hold your crypto especially it's made for the solana chain so i already have it on chrome go ahead and click add once that's done you can open up your phantom and it's going to ask you to create a new wallet and type in a password you're going to see when you type in your password and sign up it's going to give you a recovery phrase don't share that with anyone because that's essentially the key to get into your account besides you know your password so i'm going to type in my password and as you can see i have wallet one right and on top of making an account you can make up multiple wallets the main thing that you're going to need to do is connect to the devnet right if you're on the main net that's going to be using a real solana that you pay for right then that's worth money so when you're developing and you're just testing stuff we don't need to use real money you can just use you know fake or test salon for our apps so let's connect to the devnet you can connect to the devnet by clicking onto your phantom wallet after you've logged in click on the little cog wheel right here and this is your settings here you can rename your wallet or anything like that but scroll down to change network and make sure you are in devnet so again not mainnet beta so i click make devnet and i'm already on there and now you guys are good to go all right so now you have phantom wallet set up let's go over to the login again over here and let's just create the front end for it first okay cool so just to give you guys a better view i'm going to extend this just a little bit more now is that now we're full screen right so with the login there's not much to it all we have to do is make a div here which there already is format it like so and again we're going to be using tailwind for this but for the login i'm just going to use the class name styles dot login page login page and within that div we're gonna have a p tag class name i'm gonna say styles dot text and then we'll just say right i know it says styles is not defined log in to access this app so if you want to put styles on here because we're using tailwind just make that styles object up top say cons styles oops is equal to login page and here we can give it a width screen height screen background white all right because this background should go with the main spotify component i want to fade save here see this should be s there we go so now we can see the background white taking effect here and we want to display flex with a justify center justify dash center give it a flex direction of column and and item centers now it's going to make that box perfectly in the center okay cool then we can see text oops don't forget to put a comma then we can style the text and then we can say text we're going to write text for xl then make sure the text is black with mb 10. cool log in to access this app from here i want to set up the skeleton of the phantom connection so i'll just put a comment here temporarily and inside is going to be a component called wallet multi button right so this component is not something we need to make it's something we're going to import from the phantom library so we're going to need to do is say import wallet multi button from at solana wallet adapter react ui yep the reason why i don't have it uncommented because if i do this we're not going to see anything because i didn't add the wallet connection provider so that we can use this library so you know we could leave it like this but i wanted to just visualize that this isn't working just yet but let me go let me show you guys how to get it up and running okay so what we're going to have to do here is set up a folder called context and our context folder is going to hold our provider so in the new file we'll say wallet connection provider dot js awesome now with that provider i'll just do a control b here boom r-a-f-c-e cool now to get started with the provider we're gonna need to import a couple things as well the first one being import connection provider and the wallet provider and this is going to be coming from at solana wallet adapter react okay can i see that awesome next thing you want to import is the wallet modal provider from solana wallet adapter react ui and then import phantom wallet adapter from the wallet adapter wallets okay cool so in the parameters of the function we're gonna make an object right here and it's gonna take children and then up at the top here we're gonna say const wallets is equal to something called use memo use memo is a react hook so that we only have to render this once so we're going to take advantage of that so we're going to import use memo and while we're here we're also going to import something called fc from react wait sorry never mind we're not importing fc so we're going to take advantage of that and say use memo from react that's what we're going to need so now that this used memo exists all right we can make use of it so inside of used memo we're going to make an anonymous function that is going to be have an array and it's going to say new instance of a phantom wallet okay and make sure you put parentheses right after close the array and put a comma here and put an empty array as well awesome cool so basically i'm saying the wallet that i want to provide is phantom okay now for the return it's pretty important we're going to need to get our connection provider and then inside connection provider we're going to need the wallet provider and then lastly inside the wallet provider we're going to need the wallet modal provider you following so far so close it off and in between this water wallet modal provider there we can put children okay and for inline 13 for me in wallet provider it's going to have an attribute called wallets and it's going to equal what so essentially passing all the wallets that we're using if you look what wallets we're using we're using phantom so say wallets and you're also going to need something called auto connect here so that if you already have phantom it's going to be connected automatically if you're logged in cool there's one more thing we're going to have to do inside of the wall connection provider and this app is to provide an end point for our connection all that means is think of our front end app or our provider here it needs to be connected to the solana network it can do this by becoming a node and using that node to connect to the blockchain so if you're going to make your own rpc node that could take a lot of work for this build we're going to be using a service called quick node which they provided support for solana as an endpoint so what i'm going to do is set equal to endpoint right and then what we need to do next is let's set up our quick node project i just want to take a moment to show you guys what we're going to be using to deploy our app to make it live right so what we'll do is head over to do.co cleverprogrammer and you'll be greeted with this page right so like i said we're going to be using a service called digitalocean to make our app live and as you can see here our friends at digitalocean were very nice and gave you guys a hundred dollars to get started to learn on digitalocean so how cool is that so all you have to do to get this credit is to sign up with your email and once you do you'll be able to use all the services and infrastructure that digitalocean has to offer and if you're not familiar with what digitalocean is as a whole it actually does a lot of different things so let's go ahead and make an account real quick and once you've made an account go ahead and click create free account and it's going to ask you to verify your email and once you are officially signed up you should be greeted with this nice landing page and all you have to do is take a look at this left sidebar and you can see all the digitalocean has to offer our main focus is going to be the app so that we can make our project live like i mentioned before so i'm gonna explain to you what digitalocean is more in depth later in the video when we go ahead and deploy but for now all you need to know is that digitalocean is infrastructure as a service all that means is digitalocean is hosting servers that we as developers can program and make full use out of as you can see here so without further ado let's get on to the next part of the video alright so to get started with quick node and to get the endpoint that we need go ahead and go into the description and click in the link below because quicknote hooked this up with a free endpoint all you have to do is take that link put it into the browser and fill out this quick 45 second survey and as i fill it out i'll go ahead and explain to you what quick note is so let's hit let's go type in your email to where you're gonna this is where you're gonna receive your endpoint go ahead and hit okay and if you didn't know quick node is a web3 development platform that helps us scale our apps right there's a lot of different platforms that do similar things to quick node but one of the main reasons i like quick note and why we're using it today is because they provide support for the solana chain and at the time of this video they're the only ones that i know that are doing it at this moment so we're going to take advantage of that so when it says what change do you plan to build on we're clicking solana so i click solana i hit okay and from there just answer this question are you building a project outside of this tutorial no just this video but feel free to use this for any other builds that you guys want so cool i'm gonna click web 2 engineer because that's going to relate to most of you guys and where are you based just click on what is relevant to you from there go ahead and click submit and you'll be greeted by the quick node web page all right so you should have gotten an email by now i'm going to go ahead and grab my endpoint double check your email to see if you got it yourself all right perfect so i got my endpoint and what we're going to do to make this a lot easier since we're going to be using it in a couple different places i'm going to go ahead and hit ctrl b and what i'll do is in the root of our folder we're going to make another folder called okay and in our utils folder make a new file and we'll say const.js perfect let's just clear out this folder we can make this a little bit bigger awesome and just click this back to our page and what we'll do is import a couple things the idea with the cons folder is going to hold a couple different variables that we'll be using throughout our app let's just import public from at solana slash oops lana slash web3.js perfect okay from there we want to do is export const something called solana underscore host and it's going to equal the quick note endpoint that you got in your email so if i put quotes in here and i hit paste this is mine all right go ahead and paste yours onto there and we're going to be coming back back to this to update it with more things but for now this is perfect so now we have that let's head back to our wallet connection provider and what we'll do is the following so we're just going to import that solana host right so what does a lot of host hold in this variable what do you guys think it's the actual endpoint itself okay so what do we want to pass in here exactly so what we're going to do before we just put it into this value here or this object we're going to set it up like we did with wallets and i'm just going to say const endpoint is equal to use memo so we're going to use the use memo hook again and inside use memo we're going to say solana underscore host perfect so essentially right our quick note endpoint is in solana host and we're going to put that in a variable called endpoint and we're going to take that variable and pass it here so that we can use it all right so that's it that's our wallet connection provider right so our provider is set up but it's not being in use yet so that we can use it we're gonna need to do is go to our app and let's import that provider and wrap it around our application so what we need to do is import dynamic from next dynamic right this is something similar like we did on the tick tock clone if you guys watch that video we also need to import or like actually require at solana we need the wallet slash adapter react that's the one i want to adapt wallet adapter so react one yep react ui and then it's gonna be slash styles.css hit save and what we can do from there is say const wallet connection provider is equal to and here comes dynamic parentheses and then we can say import quotes dot dot context dash wallet connection provider okay we're almost done what you want to do after this is add a comma then put this little object here and say sr is false okay cool awesome so now we have the provider imported to us what we need to do is wrap it around the app so to do so i'm going to put quotes and after we put quotes what we need to do is take the provider so i'll say call the what's it called the less than symbol wallet connection provider right now it's not grayed out close it and just simply put your app in between this okay cool so now that we have our provider set up we can go ahead and use that wallet connection button over here so what i'll do is head back to login and we can comment this one out so i said save hey there it is we now we can select wallet and you can see that it detects that i have phantom right i didn't write any code for this wallet multi button this is provided through us through the solana wallet adapter and it can already detect what wallets are connected so that is pretty sick we can do take this one step further before i make the connection is that once you log in you should be sent to the home page yeah that makes sense but another thing that we could do and i want to show you case in this video is what if you wanted to make it so users have to pay for your service or whatever app that you create so i'm going to show you guys how to do that with a payment component right so users will pay some solana to use your app you can think of it like subscribing to spotify so that you can get their music so let's hit ctrl b and what i'll do it under components i'll make a new file i'll call it payment.js we can just say rafce perfect hit save and once that's done all right it should just look just like this go back to login and here's what we'll need to do we're going to import a hook and report right here and import something called use wallet from solano wallet adapter react okay use wallet is a hook provided by solana because and what it does is it's gonna get the instance of the wallet that's connected and we can use that object to check different things like is the wallet connected is it not connected and so forth so like i said if we select wallet we connect the wallet i want to be redirected to a payment js so that users can pay and once they pay they're free to use our service whenever they want it sounds pretty cool i'll show you guys how to do that so it's actually pretty simple all i have to do now that you imported that is go ahead and write an if statement right here in line 11 for me and you want to write is if right wallet dot connected okay wallet dot connected is wallet defined right i hope most of you say no as you can see it says wallet undefined right so where do we get the wallet and how do i tell if it's connected like i said this is where the hook comes in so all right actually i move this if statement by the way inside your login button right here so put it in line 17 and what i want to do so that we can make this defined is get the instance of the wallet so we can get that by saying const wallet is equal to use wallet right so now while it exists this is a hook that's checking what wallet is connected and if the wallet.connected is true which means i'm logged in we want to return payment yes the component needs imported of course so let's import payment from payment so let's hit save i'll hit refresh just for and what should happen once i hit this button we should be returning payment you can hook this up to send to you to whatever component you want you can have this to home a different landing page right it's up to you but let's hit phantom type in my password unlock and bam look at that we are now logged in and we are looking at the payment js this is how you set up the rider thanks to quick node and phantom cool so now that's done before i go ahead and write out the payment component and make it all nice and pretty what i want to do next is start writing our solana smart contract if you guys know what a smart contract is go ahead and move on if you guys don't know what i'm saying what is a smart contract let me ask you guys this do you guys know what a regular contract is yes of course you do a smart contract is essentially a programmable agreement that lives on the blockchain so a solana smart contract is usually called a program let me show you guys by showing you the smart contract that we created solana in the last video so what i'm going to do is go to this website called beta.soulpg.io if you guys are coming from solidity this is essentially remix but for solana it will make it easier for you to write the smart contracts all from your browser without any you know tedious installations for your computer right so a lot of playground uses the anchor framework which is a framework of rust just the native coding language to develop on salon okay cool so what does this smart contract do in particular this is the tiktok clone if you see something called pub fn this is no different from a function right you guys are developers you guys know what functions are so what does this function do take a moment to take a look exactly it creates a user right what does this one do it creates a video right what does this one do it creates a comment okay so yeah i'm going to take this time to go on net to go over the anatomy of a smart contract so where can i find the smart contract's name well if i scroll up at the top here you can see that here's the program and again that's what a smart contract is on solana and you're going to see mod tick-tock clone so you can look at this as the name of our smart contract or program i'm gonna start saying now okay cool so when you create a user how does it know what a create user is well if you come down to the below here you're gonna see that something called pub struct right the closest thing i can think of when it's coming from javascript you can think of this as a class and when you make a class which is just a template for creating an object right you're gonna have to define some properties of it right so each create user context is gonna have a user a system program and a clock that might be too much but bear with me let's do something a little bit simpler a user a user on our app what does a user have on tiktok it has a user name right what is another property of a user account it has the wallet address another property of a user account and profile image this is like me writing class user accounts this dot username is a string cool same thing for video so for video account what are some properties of video all right a video is going to need a description or url whoever created it the creator url a comment count all right and another thing you notice with anchor or rust is that we have to define the type right so can you guys tell me what is the type of creator url that's going to be a string so it knows what to expect u64 is an unsigned integer basically numbers that are just positive up to 64 bytes so you can limit how big of a number you're expecting here using u64 okay awesome so there's a lot more little nuances about this but we're going to learn them as we go along so stick with me and we'll make it work so my goal is to completely start over and make a new smart contract so one thing that we can do is clear our cache to get it reset so i went ahead and cleared my cache and now when i hit refresh look how this smart contract all changed so again let's go over the anatomy one more time just to make sure you guys get the idea if you look at line five you see this one one one one one one think of that as the address where your contract lives on the blockchain all right so this is the current address of the default smart contract or program that comes with solano playground so what's the name of this program then hello anchor right cool so what are the functions of this program initialize okay cool so what are the structs there's the initialize struct right there's the new account struct and it just takes in data all right so then this is an even more simplified program so now that you guys understand the anatomy we're going to be building this out and using this as a template to create our spotify smart contract you with me let's get excited let's get to coding okay so now let's set up our solana program all right and before i get started i just want to say big thanks to the solana team and specifically one of the developers for the solano playground his name is acheron he helped me out and i learned a lot about how these smart contracts work from him and the main thing that i want to show you guys is if you look at the top here you're going to see something called use you can think of use as imports all right so here i'm importing anker lang prelude right so there's a couple other imports i'd like to include don't worry too much about what they do because you'll understand as i use them okay awesome so coming over to line eight like i said this is essentially the address where that program lives and when you first start out you're gonna notice that it's one one one one when we build the program it's going to change to the actual address where it lives okay here in line 10 we're defining what is our program what are the contents of it and remember i said that in line 11 this is essentially the name of our program so we can go ahead and change it and say spotify clone so that's just the name of our program i'm going to be using this default or starter contract as the template for creating our own so for you super we're going to need to keep that and if i hit enter here to separate it here is we define all the functions of our program so what can our program do there's two things that our programs are going to do is one it's going to create music and another function is going to be called accept payment right so if you remember the demo the flow is once you connect your solana wallet i want to make sure that the users pay for the service that we're providing which is uploading and hosting songs for them again it's a completely optional feature you don't have to include it if you did want to include a paid service or a way to make users pay for your services this is how you would do it so if this is how you make a function in rust or an anchor all we have to do to make our own function is edit it right for pub function we're going to say accept underscore payment that's the name of this function i want to create so you're going to see parentheses here and it's just the same as any other coding language it's your parameters what does this function take in and when you see ctx colon that's just the type which stands for context when you see data that again stands for what kind of type of data that we're going to see so this is think of this as the parameter ctx data is the parameter and what is the type it's u64 and what is the type context initialize so u64 might make sense to you but you might be like all right what does this mean context initialize right to give you guys some context it's going to be coming from here okay context is essentially just data that we defined throughout the contract so it's going to take in initialize and initialize comes from here we defined it cool so for us if you ask yourself do we want to use initialize to accept our payment you might not know but i'm going to tell you that we're not right what we do need is something called payer context right you might be like oh what the hell is pair contacts well that's because pair context doesn't exist we have to define what pair context is so let's go ahead and do that so hop over to your strokes and again i said structs are like classes in javascript so the first struct that i want to make is going to be this otherwise it's not going to know what pair context is so we're going to say instead of initialize we'll say player context and go ahead and take out these comments but these comments are very helpful to understand what we're doing here one thing to note is that anchor or rust likes to know the exact amount of space that's going into it with javascript it doesn't matter you could put however input size you want into your functions with rust it likes to know the exact what space to expect so here we define a lot of the behaviors of pair contacts is what it's called okay so let's go ahead and remove that and here to get started what we want to do is keep the hashtag account right we're going to just format it because there's a lot of things you want to pass in so we need init that stays we're going to need payer equals not signer but for us it's going to use something called authority which essentially who's paying or the smart contract to exist right okay and then for the space this is going to change as well so for the space like i said we have to define so the size of payer context and what how do we can how can we use sizeof well if you remember we imported it this is how we can use sizeof and just pass in uh contacts in here so sizeof the payer account right i know we didn't see this one either so this is another struct that we're going to have to make right so here's the pair context struct but we also have to define who is the payer account just like with tick tock if you remember we did the create user context and then we also defined who is what is a user so what is a payer whatever the size of pair is plus eight cool so that's going to be the space this is going to be the payer the only other thing we're going to need to do is something called seeds all right so seeds is going to equal and don't to worry about what seeds is exactly seeds essentially generates a unique hash for the payer context and it generates a unique hash by providing it some inputs the best way i can explain it is if you remember dice spare avatars.dice bear how does it generate a unique avatar it's going to make a unique avatar based on what i typed in if i say a that's what comes up s d right if i said lance that's what comes up right it generates a unique image based on what i put in as the seed so here i'm creating a unique hash based on what i put on this array so you don't have to understand what i put in the array just understand what comes out of it so i'm just going to write a couple things b pair dot as underscore ref parentheses comma authority dot key oops dot as ref okay add a comma after surrey and then you want to include something called bump right because i can explain what this is basically if this creates a hash a unique hash and for whatever reason that unique hash already exists bump will increment it by i believe 1 through 20 just to get make sure it's very unique okay cool other than that the struct is pretty much set up we just have to define some attributes so it's determined and i basically authenticated the post account so what are the attributes of this you're going to say all right let's put some space around here oh and one thing i forgot to do is close this off so we can close it off by closing the parentheses here and closing the array like that cool so here we provide the properties and the properties that i want to provide is i'm changing the name of this to payer's wallet and it's going to have the value of account info and payer account all right that's the type payer account cool here this is basically a check and we're going to check for a receiver which is going to have our accountant okay the next thing is i want to set up the authority right and again the authority is the signer who paid the transaction fee if you guys are familiar with the blockchain at all anytime you want to store something on the blockchain there is a transaction fee that goes on it who is going to be paying for that that's going to be the authority and for us i'm saying that the authority is the same as the signer right this is signer who paid transaction fee all right who's ever paying so i say pub and then i can say pub authority because that's the that's the name of this property and what it's going to expect is signer info that's pretty we don't need system on this one okay what we are going to need is this account because we want to make sure it's mutable right with rust it's also specific right you have to tell him that hey this authority could change depending on who's using it otherwise it's just going to be constant so i'm letting know that this can change again i'm speaking on a really high level so that you guys who are new to anchor can get started too and eventually you guys are going to be experts as you understand what everything is cool another thing that we're going to have to do is say pub system underscore program and it's going to be the unchecked account and again pass in this info thing here okay next we're going to set up that token program so that library that we imported is going to be used here and if you didn't know spl stands for solana program library it's not a programs library cool so i'm going to set it up we're going to write the account and we're gonna add some constraints here constraint is equal to the token underscore program dot key set it equal to and token id okay now at the top we're going to say pub token underscore program and then write program info comma okay the next property that we're going to need for the pair context is a clock just to save the time so let's say clock to save time right so for this one we'll say pub clock that's the name of it and we're going to use assist bar info all right this is how we get the clock information just say clock all right so that's what you can expect with clock all right this is looking good so far the last thing we're going to need is another struct for payer account basically let's define what the object of a person paying would look like okay awesome so we'll do one more struct before we go back into a nice comfortable familiar front end so coming down over here let's make the like i said the post account structure or define who is the payer account and what are the properties does it have so right now that you guys had the template from before oops so let me just put this back here but now that you guys have the template from before let's try to make this without looking right or using or editing a template so what i want to do is say hashtag right account basically if i write hashtag account and i do obstruct here it's going to inherit all the information of what the account on the contract is then you can say pub struct and say pay your account all right so what is this class what's the name of it all right payer account right so what is the properties of someone that is paying all it's going to do is pub wallet pub key and guess what that's it we define what a pair account is this is all it is okay cool so the real test is when we go to on the sidebar these tools here then we hit build i'm expecting a lot of errors right because you know i haven't checked in a while and rust and anchor is pretty strict so that should be it might be missing a couple things but we're gonna find out now let's hit build ah i got you okay so really quickly one thing i'm realizing before i should have hit build is i made the strokes but i forgot to finish out the function all right so we have all the strokes we need this part should be a lot clearer all right i'm going to replace this with program result it's essentially the same thing as the one i replaced but i'm using program result because i'm importing it anyways and program result is basically defining what comes out of this function all right you could look at it like that okay so from here accept payment right we want users to pay for our services and again you don't have to do that but if you did the first thing we're gonna have to do is let pay your wallet it's just a variable and set it equal to and mute again mute means i'm making whatever i write after this mutable it can change and what's mutable is going to be ctx.accounts.payer underscore wallet okay so the payer wallet is going to be equal to the account the accounts wallet and now that we have the context of what a payer wallet is if i were to write something like payer underscore wallet dot wallet right where is dot wallet coming from well what other class has a wallet attribute it's the payer account so that's why we set up the struct we're going to set equal to the ctx dot accounts dot authority dot key i'm basically saying that this is going to be the value of this payer account at this key of the wallet okay so the wallet should be this are you following so far another thing that i want to mention is you know we're privileged with javascript and like other coding languages with rust and anchor you're gonna have to put a semicolon at the end of the line otherwise it's gonna yell at you and say hey is this the end of this line all right so put semicolons that's something i definitely forgot often after we do that we can make another variable called ix and set this equal to anchor underscore lane colon colon solana underscore program one colon system instruction right again if this is really hard for you guys to follow be on the lookout for a full guide on solana and rust it's a tutorial that we've been working on and it's going to explain a lot of these things more more in depth but for now it's going to be at a high level okay after that we're going to do and ctx dot accounts dot authority dot key and then for there we can say and ctx dot accounts dot receiver dot key basically i'm defining how much they're paying and don't be alarmed by this number i'm gonna put here but this equates to 0.01 salon which is not a lot especially or since we're on the devnet okay cool after that's done semicolon right there then we can say anchor underscore lang calling solana underscore program and then invoke so we're going to invoke the ix that we defined so we say ix and then comma here then say and array all right and pass in this array the authority and the receiver once again so our accounts basically set up who's paying the 0.01 solana and where is that 0.01 salon going to that's what we're doing dot to account underscore info yes sir cool then ctx.accounts.receiver there it is dot two underscore account underscore info there it is okay cool so closing array closing parenthesis and closing curly bracket okay all right so again i saw a bunch of errors here i didn't really take a look at it but let's hit build okay so again since this is cache if i hit refresh we still should have everything i created up there's the ix and all my structs now let's hit build now let's tr now let's spend some time troubleshooting all these areas all right we got a whole bunch amazing okay so the first one i'm seeing is line 53 ah it's because it should be the comma instead of the quotes so i think that's a couple of them right there so line 53 should be the quote not the backtick okay same thing on line 60. yep quote not the backtick and that's probably causing issues everywhere else so that should be all the info stuff let me refresh to clear it up because it's hard to read in my opinion okay cool line 53 again this should have a comma line 63 is that right all right so line 53 it should end with the comma all these should have a comma at the end of each one i'm gonna put this one on there just in case refresh comma a lot of these might be typos as well line 65 oh yeah i put column by mistake 40 we need a comma after bump and line 40 and this one also needs a comma after bump on line 56 i put contraint but it should be constrained again what i do is i look for compiling because that's the latest one anchor land should be anchored laying this function takes three arguments but two were supplied line 18. see what i'm missing something oh i see comma all right this is why commas are important uh yes significantly less errors no field account in line 27 yep it's going to be context accounts cannot be dereferenced okay i'll just try this one cannot add integer to fn line 41. yep pair count should be parentheses here cool i'll build it but now that we have a lot less errors i feel comfortable refreshing it and then building it just should be the one or the two oh what the hell i thought i fixed this there you go let's try building now nice so it's just the one account info cannot be dereferenced okay so i think i got it it was just a typo around here just make sure everything is spelled correctly cool so if you want to take a moment double check what i have make sure it's all spelled the same maybe if i zoom in yep okay how is that cool so let's uh double check if we get any more errors okay cool we can live with the warnings that's fine as long as there are no errors right as long as there are no errors we can go ahead and build so since there was no errors look at this it generated a new program id for us and once it did that all right we're good to go all you have to do now is connect to playground wallet again save the key pair just in case for later okay and what we want to do next is deploy and again once we deploy it's gonna go straight into and live on the solana smart contract solana blockchain officially and the cool thing about salon programs unlike any other chain is that we can actually upgrade the contract all right with solidity once it's on there you're going to have to make a whole new contract with a whole new address just to make some changes but luckily with solana we can upgrade them so i'm going to go ahead and hit deploy let's just open up terminal uh okay cool so this is good to know our smart contract at the moment is going to cost 5.13 sol to deploy onto the chain and store it and only have two solana right so you can see the current balance here and this is the wallet of the salon playground that comes with it so a cool thing i want to show you is if you want more solana for this wallet we can go ahead and click this click this three dots and click airdrop so it's sending a airdrop request and guess what we got two solana right here okay remember this is gonna take five solana so we're gonna have to do that one more time okay for some reason that didn't go through so i'm just gonna try one more time hey there we go now we got six salon you might want to do this a couple of times so you won't have to do it later especially if we're going to be redeploying so good luck i'll do it one more time cool we got tencel now we can go ahead and we're ready to deploy it and again i want to be concerned about deploying it because we can always upgrade it later which we will there's one more function and a couple then i think one more struck that i want to write to completely finish out this program cool the deployment's successful and all we're going to need to do is go over to this idl and hit export all right so it says idl 6 but that's because i have a bunch of ideas from our last build i just know that idl6 is the one i want and what you can do is click on it and it should open up vs code for you this steps pretty important because we want to save this idl because this is what helps us use the functions from the smart contract and essentially connect it with our front end so after you click it it should open up in vs code i'm going to hit control a or i'll see alt z all right this is all of it you can see that it has the function accept payment and all the strokes that we created go ahead and press control a then control c or if you make it feel better control x because we don't need this anymore all right i'll say control c and what i want to do is open up our folder and we need to save this in our or rather yeah our utils so going into utils i'm going to make a new file i'm going to call it spotify.json and in the spotify.json paste all that information save let's see cool it should be the same thing all of the functions and the structs and once that's done in our const what we're going to need to do make this a lot bigger remember how we import a public key we're going to need to use it but first we need to import spotify from the json so there's the we're importing the idl here as spotify and then here we want to say export cons stable pool program id is equal to new public key and what i want to store here is the address of our program so remember what our address of the program is yep exactly this is the address of our program so go ahead and copy that that's not going to change after we deploy it so i'll just hit paste and then from there the last step we can say export const oops export const stable underscore pool underscore idl is equal to spotify there we go so just like solano host holds our endpoint from quick node stable pool program id holds the address stable pool idle holds the idl cool so that's going to come into play later so remember this and after that our smart contract is pretty much set up so give yourself a pattern back if you were following along i know this is hard but we're gonna get through it and i hope you're learning something with me all right guys so i switched to a different setup as you can see but i want you guys to take a look everything is still the same if you take a look let me zoom in this is the same contract address as we had previously but since i've switched to a different desktop i want to show you guys how to redeploy your contract and the best way to do this is let's make a change so taking a look at this i'm realizing we don't need two parameters for this what i'm going to do is erase in line 14 the one that says data64 so it should just say this and then what we do from here is build so if this is the current address and i made a change let's see what happens when i hit build cool so this it becomes this address right so this is the new program id that comes with the cool thing about this is that you don't have to redeploy every time what we could do is hit upgrade and we keep the same address and then right you can just keep making changes to your contract that's actually unique to solana you can't really change your contract and solidity once it's up there or at least not yet so what happened is i took out this parameter because it's no longer needed and as you can see when we hit build there's no warnings right because i took out that uh parameter that we didn't need it just says finished right from here we want to hit upgrade right when you hit upgrade it's going to cost the amount of the contract and i remember if i remember correctly this one cost five sold i have six so it should be enough to deploy perfect okay and again every time you deploy or upgrade your smart contract you can verify it with soul scan or solana explorer we'll click soul scan all right you can see this is like a proof of the transaction and proof that it was successful that we deployed something anytime you put something on the blockchain you're gonna need to pay some best fees to verify the transaction or write to the blockchain okay awesome so we have our new updated contract and remember the step that i told you we're going to need to go to the extras here click idl and click export right and once you click export click on the json file and should lead you here and when i press alt z it's going to wrap the text so you can see it a lot better but notice how it has the function name and all the structs that we created so later when we add more functions double check that your idl includes the new function so as right now we should only have one accept payment which we're going to hook up to our front end now so go ahead highlight everything hit copy all right and what you want to do is if you remember go to your spotify.json and if you don't see again or i mean control b i paste that in there and then do alt right it should look exactly the same as this cool so we're all set we can go ahead x the idl hit save and now it's update but now we have to update our front end so if you remember go to your cons this was the old program id so what's our new program id guys exactly it's this one right here so we can just easily copy this and paste it right over here okay hit save so that's some bug fix we just did some bug fixes over here with this function as well i showed you guys how to redeploy and update your cons js sounds good cool so let's get to the functionality of this okay cool so with our smart contract pretty much done what i want to start thinking about is how can we from our front end call this program so we're going to have to do is first of all open up localhost okay cool we're connected still because we're still i'm still logged on with my phantom wallet and we can go ahead and put it on the side and split screen and let's just make some space here i always do like two thirds one third boom all right this is good enough for me so just to recap we want to make the payment js right i want to show you guys how to make your service payable right so if you want to make it to like with spotify you have to pay to subscribe this is some way a form of that again it's an optional step but something good to learn just for you so to get started hop over to your payment.js and let's get to styling and i know i went to payment but one thing that we're going to have to do is set up our program instance and program instance is going to live under utils right so if you go into your utils folder click new file and i'm just going to make a utils.js this is going to hold the anchor client which is going to grab the program instance okay and now that we're in utils all we're going to need to do is import a couple of things we're gonna import star from our star as anchor so any time we say anchor we're getting everything from the anchor project serum which is essentially the project itself the anchor project we also need to import something called wallet not connected error right and this is coming from solana wallet adapter base okay and then we're also going to import the idl and the program id so where is our idl and program id being stored exactly it's going to be stable pool idl and stable underscore pool underscore program underscore id and this is coming from our cons folder which is within the utils folder cool so that should be it for now don't worry if it doesn't make sense yet once i start plugging it in it should start to make sense to you guys so let's set up our program instance let's say get program instance okay and it's going to be a function and make sure you add this export here and within get program instance we're going to write something called if wallet dot oops if not wallet let's try this again if uh exclamation point which means not wallet dot public key okay and this not basically means if wallet public key doesn't exist what do we want to do we want to throw new wallet not connected error right so if there's no public key show this error yeah is that making sense so far cool then you're probably going to wonder where is wallet coming from the skip program instance is going to expect a connection as a parameter and we're going to also pass in a wallet whatever while it's logged in and we'll be using phantom cool but if there is no wallet public key then throw the wallet not connected error okay that's just our edge case from here let's set up a provider and the provider is going to take in oops it's going to be equal to new anchor a new instance of anchor.provider which makes sense then we're going to put parentheses here and it's going to take in the connection that we passed in so it's going to take in the wallet that we passed in and it's also going to take in anchor dot provider dot default all right you saw it for a second it's a method default option okay that's what the provider is going to take right in this variable we hold this instance with all this information we pass in so after the provider we should also make a variable for the idl what variable holds the idl stable pool ideal okay now we need the address so i'll say cons program id right how do i get the id it's going to be in this variable okay and we also updated it if you remember it's now this instead of the e one okay from there well we can get the const program generate the program client from the ideal so we can do that by saying new anchor dot program and guess what we'll pass in all the variables that we set up so to make a new anchor program a new program client we're gonna need to pass in the idl the program id and the provider so that's the reason we set it up afterwards we can just return program and guess what we're good to go so hit save on utils and that should be good amazing so after utils is set up i feel comfortable going back to payment now and with payment i'm just going to set up the imports and then we're going to explain it later so with the new version of react we actually don't need import react from react sometimes i keep it sometimes i don't depending on how i feel all right so we'll just need use effect and use state all right the two most common hooks and this is going to be coming from of course react so afterwards we're going to do is in utils we exported the function and get program instance because i want to be able to import it right here so let's get program instance from utils okay and then from there we can say import token program id and this is going to come from solana spl token and if you didn't know spl stands for solana programs library and we're getting the token program menu from there okay afterwards let's also get the solana host from our const if you ask you guys what is the solana host what do you can you tell me exactly it is our endpoints that we're using quick note for exactly it's going to connect us to the blockchain so that's what solana host is and we're going to be using it later another thing i want to do is use this custom hook called use wallet that comes from the solana wallet adapter basically this is going to hold the instance of the wallet that is connected with payment yeah okay let's see is there anything else uh that should be it for now what i want to do next is set up a couple variables that we're going to be using in our functions later on so i'm just going to say const anchor is equal to require right and this is where we'll grab the anchor project from github so it's project c slash anchor okay cool so we grabbed anchor it's held in the variable and now i want to destructure a couple things from anchor okay what i want to destructure from anchor is web3 so to destructure an object you're going to say const object empty object equals anchor and then you say what do you want from this object i want web 3 right you're going to see us later make custom hooks and this is how we would make them so use effect and use state is something that we're getting from the react library or react object so this is all destructure okay so we're just structuring web3 from anchor all right guess what if i write something like this what could you say is happening on this line right we're destructuring something from web3 so what do we want from web3 i want system program from web3 right if you're wondering how do i know what's in web3 what you could do is console log it i kind of cheated i went ahead of you guys and you could console.log anchor and then you could find a web3 key and then pull from there and then you can get system program from there from web3 okay cool another thing that we're going to need is cons utf-8 is equal to anchor dot utilities utils bytes dot utf-8 okay cool one more thing we're going to need something called the default account and if you watch the tick tock video you're going to know that this is something that we had to write a couple times so we're going to write the token program it's an object right and it's going to take in a couple keys the first one is going to be called token program and the value of this is exactly what it sounds like so what does any of our imports hold the token program i think so so that's what we want to put here we're going to say token underscore program underscore id right from here put a comma then you can write clock and then you can say anchor dot web 3 dot sis bar club publicly right this is a key called clock and this is how we get the actual clock from anchor okay from there what i want to do is write system program system program and the value of that key will be this right here which we destruction from web3 so we write system program and that's not it all right we're going to use dot notation to get dot program id awesome so those are all the variables for now all right what i want to do next is set up the states for our payment function all right after that then we can do some nice comfortable front end all right for the states the first thing i want to do is you const wallet is equal to use wallet remember how i said this hook right here is going to grab the instance of the wallet that is connected we're going to store that in a variable so anytime i say wallet think of uh what wall that is connected well so after that we're going to have a variable called connection right so if you remember get program instance what are the two parameters that is that it is expecting a wallet and a connection all right so we're gonna have a variable called connection right and it's gonna be new anchor dot web3 dot connection and what holds the endpoint or our connection to the blockchain drum roll it's going to be solana host exactly that's why i asked you at the beginning salana host thanks to quick note we have our endpoint okay so solana host is for ready for our connection let's write kant's program so how do we get the program then we have a function that does that so let's say get program equal to get program instance and again the two parameters that it's expecting is connection and the wallet alright so i hope it all came together in that moment right if not we're gonna keep it going as i'm building along it should start to make sense if it's still not making sense after that i would suggest like console logging different things and testing it that's how anyone really can learn you just gotta use it a lot and make your own builds you don't have to copy this one exactly right you can make your own projects with what you know from here now for that after all those variables are set up we can set up a couple states so equal so if you remember use state essentially data that can be changed and again this is destructuring but for an array okay because use date returns an array with two things all right the first one is going to be undefined usually until i define it but the variable name is going to be called payers and then set payers what i want to do with this use date is keep track of every single person that pays for our program because if you paid for spotify i'm not going to ask you to pay again so i want to store all the payers in the array the set payers function is going to set literally set the players or update the payers right so say like later on i don't know someone named kevin it pays for spotify i want to update the array to say hey kevin's part of the array now so that's what this function is for what you put in here is what do you want the array to start out as and it's usually the same type that you're expecting so if i'm expecting an array how should it start well it should start empty so the first when i first console log pairs it will be an empty array until i use set pairs to update that so i hope that made sense to you that's just basic react hooks on use state so if you understand that we'll make another state variable here this one is going to be called is paid and set paid so the idea with this state is if you are in the array i want to eventually loop through it or iterate through it and check if you're in the array so i imagine you're logged in over here and there's going to be a function that's going to get all the payers or all the wallets that are paid and if i see your name inside the array then i'm going to make a state that is essentially a toggle that says okay he's good to go is paid is true right but by default like i said i'm going to assume that you didn't pay until i check it then i'll switch it right that's the logic that i want to handle here so those are the states all right we're going to take a break from all the variables and i think let's make the jsx of payment which is not too much okay so to make the jsx of payment we're going to need to make the style object at the top so say con styles is equal to object right so we won't get the error and you can see me edit this live right so we can sue div all right let's clean this up and give this a class name and the class name of this will be styles.main awesome so inside the main div we're going to have another p tag actually with a class name equal to styles.txt and inside the p tag instead of saying payment i want to start saying make payment did it update hey there we go that looks a lot better okay so as a sibling in the next line we're going to say div and this is going to be class name styles dot button or button this is going to container for the two buttons that i'm planning the first button on the left is going to be the make a payment button right make payment here on the right i want to do a verify paid or refresh who paid so this is the container for so inside this div right i'm going to hit enter and then line 35 i'm going to write okay and inside that button we're going to say pay zero point zero point one sold which is not a lot right i wanna make it cheap just for testing purposes you can make this any price and if you're wondering how you can make it any price you go back to solana playground and you go to let me make this a little bit bigger and you go to accept payment right this is where we define that price this equates to 0.1 sold if you want to make it bigger you just have to increase the size okay so users to use our service they just have to make a one-time payment of 0.1 sold and again if you're like i don't want people to pay you don't have to include this step cool so pay 0.1 so next we want to do a button and inside that button we're going to do class name is equal to styles dot button right ideally this should also be over here so let me put in the other button class name styles dot button okay so we have a class named buttons and a styles number and this one is going to say verify payment right because once you pay you're gonna i want you guys to want to be able to click this button to essentially make it make the page go through the array and check if it went through so that's what the verify payment is for cool guess what that's it for the jsx all right so if it's saved boom again this is it for the ui but once i have the styling it'll look a lot better so hop over to your con styles object and in line 19 for me we can start writing it out so let me start with the main styling is going to be with screen h screen so i wanted to make sure it takes up the whole width and height of the screen and from there let's make the background white because i don't want this background because this is what it's the background for when you're logged in like the home page okay and now we lost the text but we can easily get it back by say text black all right we're back in business right from here i want to put everything in the center instead of this top left corner which it happens by default so you want to say display flex or entail when you just write flex cool all right disappeared for some reason oh i put a comma here okay now i hit save uh and then it's asking me to log back in no worries cool so now it puts everything in a row but if i change the flex direction to column right now it's back to normal but we still have the ability to move it around with flexbox so if i say justify center it should center these things horizontally since we're in column i mean vertically and then to center it horizontally we're going to do items there we go so now i got it perfectly in the middle just like how i wanted so i'm doing alt c here so you can see the whole css in case i'm going too fast and after we do the main we can style the individual buttons so i want these buttons to look just like the colors of spotify so i'll make it round and the same colors so what i'll write is bg of the back of the button it's going to be hashtag 2 2 c 5 5 e so let's save hey there you go that's the color but we also want to form a header right so let's go over in m3 all right so there you go some spacing and now keep putting comma we'll do a text white because we should be able to see it now that it has that background color i want to make sure the font is bold okay and if we do a py-four nice and then a px-7 cool so i'm feeling that size i think it's pretty good and i want the buttons to be rounded so i'll say rounded full and we can do a hover effect you can do like a opacity every time i hover if i do opacity dash 70 then when i transition hey okay i like this a lot okay and you can see it's kind of off center but once i style the buttons div it should look a lot better all right for now i'm going to work on the text though so for the text i want to make it a little bit bigger so let's do a text dash for excel right there it is and then again we can write mb-10 there you go and for here now we can talk about buttons and to fix it we can say flex and items center actually looks a lot better it doesn't look as off-center as i thought it was okay but that is the front end of the payment js okay with that done let's work on the functionality so again if you see this button it should be pretty obvious what this should do right we should be our wallet should come up and we should pay 0.1 sold right to whoever's getting the payment right and that function is something that we're going to call from our smart contract that's what accept payment is right so in this section i'm going to show you guys how can we call the smart con the solana smart contract from our front end cool so we're going to want to do first is come to come right over here in line 33 for me and let's set up a function i want to call it const pay okay const pig const pay click is a function that's going to call this function right on the on the blockchain okay so whenever we're making calls to somewhere else that's not local to us we usually make it asynchronous because we want to be able to wait till that it that it's called then we can run the next thing otherwise that could lead to some problem so pay click is an asynchronous function all right so one of the setups that we're going to have to do is do something called let the payer signer right equal to await anchor dot web3 dot public key capital dot find program address okay so it's a method called find program address which is going to look for the program id so it's going to we're going to pass in a couple of things first thing is hit enter here enter here boom first thing that we want to pass in is utf-8 encode who the pair is right and we also want the wallet dot public key the public key of the wallet and to buffer is essentially a way to convert the public key to what we need and after that array hit comma and here we can say program dot program id all right if you remember where is program coming from it's coming from our instance and in that object we can get the program id awesome okay from there let's set up a variable we can say let pair and set up something called a try catch block right so try catch block is pretty self-explanatory in my opinion essentially you want it's going to try whatever functions in here and if that promise fails it's going to end up in the catch right and we're going to put e here sometimes people write error which you could write is console.log error or you can give it an alert that says right you know promise failed promise all right you can make this whatever you want right but for the first try catch we don't need to write anything in there okay but with this try catch we're gonna say pair info is equal to await dot weights program dot account dot payer account right so we're getting the payer account it looks like and then we're gonna fetch the signer right so fetch the signer okay and that's it for the try block so from there in the catch what we want to write is another nested try catch okay so carry catch is going to take in e again and this time we'll alert right whatever the error is so e dot message right sometimes it says like a pair wallet is not provided or it'll tell you that you know you wrote something wrong or something's undefined that's what the couch is going to say it's going to give it to us in an alert so it's really obvious cool the fun part is in this try catch this nested try all right so once we got the pair info all right we want to use that when we call the function right because what does our accept payment parameter take in and we fixed it right it's just going to take in one parameter and it should be the context of the pair right it's kind of hard to see because of the way it's formatted but that's okay so in the try block let's write a weight oops sweater weight program dot rpc and then what's the name of our function accept payment that's the name of our function on the program and put parentheses here and then object right because this is the payer account that we are passing in this is the parameter right the context so if if we know it's going to be the pair account we're going to write accounts here and we'll switch to this one and it's kind of small i'm going to say counts right because this is an object it's a key called accounts which is going to be another object and this is where the content is important so we got to establish who the pair wallet is and the pair wallet is the payer signer so we'll say payer signer and then for the receiver and who is receiving it right you can say new public key and essentially you could set up what wallet is going to receive the 0.1 so it doesn't really matter who it is you can kind of pick what wallet you want so for me i have an extra wallet if you want to know how to make another wallet you can click this plus add connect wallet create new one and bam you have another wallet that you can put so i have this third one i'll say collection i'll copy the address by clicking the top here and i'll just put a string and i'll just pass this in this should work just fine okay and then i'm also going to switch back perfect so back to all the one passed in and that address as the public key and then a comma here and then we can write authority is gonna be the wallet dot public key right and we're gonna wallet is coming from use wallet so for the public key put a comma here and we also got to get the default accounts that we set up so dot dot default counts comma all right and then that should be it closing curly bracket right and then again we're waiting for this function to run and once that function runs and it's successful i want to have an alert here that says transaction success yeah that'd be nice so let's hit save here right and let's log into our app because i switched wallets cool notice functionality still doesn't work all right why doesn't it work because i didn't add the on click to this yeah cool so let's just i'm not going to fully test it let's just see if my phantom wallet pops up so what i'll do is let's format this button to be more like this okay and now we can add on click equal to the function name which is pay flicked so i'm gonna hit save fingers crossed let's see if it works first try i'll hit pay 0.1 so okay so when it says if this comes up that means we are actually calling a function if it says transaction may fail to confirm right that might not be a good sign this could lead to errors all right but at least i'm going to confirmation that we are communicating to the blockchain right something went wrong this is the this alert coming through okay cool so awesome so the function is somewhat working i can accept that uh what i do want to set up before we fully test it is making use of is paid and set paid right because if i already paid already we should set this to true and we should get directed to the home page cool so if you want to do that then we're going to need to make another function and that other function is going to be called const get wallets all right this one just means all get all the wallets that have paid already for our service and this one's going to be asynchronous as well because we're going to be writing a promise so we're going to write const pay lit pay your list all right you're going to await dot program account that payer account dot all awesome so this is really cool because notice how i didn't make a function on my program that says you know get paid i don't have to because on the program itself right we can get all the accounts that paid using this method so we don't need to write our own function for that it's kind of built in and this is going to return an array of everyone who paid inside this variable so what should we do with that right if i want to use this state exactly so what we want to do is do set players set pairs is equal will not equal parentheses pass in payer list all right what this does is re renders the page and updates the payer list from an empty array to the array of who's ever paid beautiful so now how can i check if the user is paid well like i said i want to look through or iterate through this array to get that answer all right so what we could do is pay your list since it's going to hold the new updated array and do a four each which does exactly what i just said and for each pair right in the array all right what i want to do is if payer dot account dot wallet dot 2 base 58 we have to convert it to something that javascript can read more properly or easily all right and that's a method is equal equal to right so basically it's gonna check is this the wallet that paid is this the wallet that paid is this the wall that paid well how do we get our wallet that's logged in we're gonna make use of this the instance that holds the wallet that's connected so we'll say wallet.publickey.2base58 so they're the same type okay cool so if you know they are equal what should happen all right what should happen if they are equal well we should just write set paid is true all right and when should we call this we should call this on click here yeah checking on click is going to be equal to get all wallets okay and if you ask yourself the question logically do we only want to check get our wallets when i click the button right that that would be awesome right we could do that but what if i already paid and i load the page right it'd be cool if it just checks automatically when we first load this payment component so there's a cool way to do that using this react hook right here use effect if you remember from our previous videos explaining use effect use effect essentially all it does is you use it when you want to want to when you want to run a function at a certain point of the component's life cycle right in english that just means like when the component loads or when my page loads i want to run a function all right that's going to be the use case for this time so at the top here i'm going to write use effect right like this takes in two parameters the first one is what function or what do you want to do when the page first loads you can look at it like that okay well what i want to do is if a wallet is connected that's basically what i'm saying i want to get all the wallets all right so that means if i logged in run the function check if i already paid because if the second i know i paid already we can just skip this whole component and go to the homepage right and that's pretty much what i want to do the next thing because otherwise if the wall is not connected you should just we're not going to get all the wallets then we shouldn't even see this page based on how we loaded it up remember here's the second parameter so i'll put comma here and let's put an array this is called the dependency module right so if i just leave it like this if i leave it blank this function will only run once when the component first floats all right what i could do in this dependency module is write wallet dot connected okay so when i put this here i'm basically saying okay if wallet connected is changed like we disconnect or if we do connect right at this moment then it's gonna run get all wallets right because of the condition if i put a comma here i'm also going to be checking for is paid right is paid by default is false but if that were to ever change for some reason if is paid is true run get all wallets see if it's paid now all right so that's the cool way use effect gives you a lot of control on how your component is going to react right no pun intended that's that's the whole point of it okay cool so that should be good for payment.js let's see what happens what i'm going to do is refresh this page awesome we're still connected and i can even show you guys if i go to get a wallet console log get all wallets is running right you can see right i also want to show you console.log is paid so let's make a refresh here make this guy just a little bit bigger inspect element let's see what comes up cool get get all wallets is running because i hit refresh if i refresh again get all while it's running and you see false because is page should be false right now cool so time to see if this works let's hit the pay so again usually if you see transaction may fail to confirm that usually it doesn't isn't a good sign it should be able to calculate how much you need to pay so let's hit the proof ah okay the program could not deserialize the given instruction okay so that tells me there's something in our function here that we need to figure out could not deserialize the given construction okay so it looks fine in my cons the utils looks good i might just try to redeploy the smart contract because when i'm looking at the smart contract i'm not entirely sure what's wrong so let me just double check by hitting refresh let's just do a build and deploy again so let's build it okay no errors let's upgrade it all right even though i didn't make any changes let's just see if i can just get a new idea okay so it looks like it upgraded we want to get the export the idl open this up so let's see to see it real quick then i'll do ctrl c go to spotify.json control a delete paste save and x out that new one and again this id this address should stay the same yep up till the utils okay and on the payment side there's one thing that i wanted to add and what i want to add is if the user is paid is set to true basically if i did pay i want to load up the home page so we can probably write that right before the return like right here it's already if it is paid right if that's true return home page okay and home page is given to us right it's this lowercase one then at the top here we could import it import home page from i thought pages dot home page cool so if we pay the use effect will take care of it it's going to run get all wallets and if you don't get a wallet is paid is going to be set to true right it's going to be right here wait did we say it's true okay cool perfect so just to make sure as well triple checking i'm going to end the terminal yarndev make this smaller hit refresh double check i have some solana yep i do hit come on come on come on okay all right so it doesn't say a transaction may confirm there must have been something wrong when i went to deploy it let's hit approve and let's see what happens approved transaction successful awesome cool so if we see the alert if let's go scroll down control p control j and let's increase this if we see transaction successful we know that the accept payment function ran and there was no issues right and again if i click verify payment let's go we're in the home page and we paid right so that means we paid and we should we should be good to go right let's go to a wallet that definitely didn't pay let's go to wallet number four right select wallet we connect wallet so should we see the home page no that didn't pay it right we can't pay with wallet 4 because it doesn't have any salon cool but if i were to switch to wallet one let me hit refresh and we are in so this is how you make a subscription to your service right now that that's done we can work on the actual app itself alright so we were able to successfully call a function from the blockchain what we want to do next is start working on the home page so let's take a look at that so if i say control p oops not on that page on this page control p say home page dot js all right this was giving to you right the nav which is this the activity which is this right okay we want to start working on is all of this right that's why it says start coding here so what we want to do from there is import a bunch of different things right let's just set up the front end of the homepage all right so with the home page there's going to actually be a bunch of different components if you remember the demo there's going to be like a table down here that's the player and there's going to be some sort of like header as well as a nav another nav bar a playlist component okay so before we even get to those let's import any hooks that we'll need now i can tell you right now the hooks that we're going to use is going to be use effect which i explained to you earlier and use state okay cool okay so that's pretty much the only hook we'll need anything else we're going to import is going to be a component and our custom hook later on so let's set up a couple states uh the states that i want to set up is going to be over here it's going to say const array equal to ustay so let's talk about what i want to set up for this state variable i want to have a show upload music variable and the purpose of this is kind of like is paid right it's supposed to be a toggle on whether the modal to upload music is up right what if i click create or upload it's going to be at the top here a little modal it's going to be component is going to show up based on the state all right so we set show upload music right and again just like it's paid the default for it is going to be false cool so we're going to do const title right it's going to be title as this name of the state and it's going to be set title right cool let me spell this correctly perfect so this state that title and set title is going to be responsible for when we upload music there's going to be a little model that comes up we want to keep track of what i wrote as the title of the song okay and then for use state what i want to put here in quotes is just going to be empty right because by default the input should be blank and this next state is going to be very similar okay it's going to be music url and set music url and that's going to be equal to use state as well okay oh and there's also one more once we get a list of songs we're going to map through each song and then make a row down here so again we can save that as a state so i'll say songs comma set songs and that's equal to use state and if we're expecting an array of songs we should put the initial state as an empty array okay cool you guys got that awesome all right so from here we can just separate this and again we have the start coding here cool and we don't need these curly brackets perfect all right so from here we're gonna make the rest of the jsx which is gonna be a bunch of different components so the first one i'm just gonna write out the skeleton of the components and then we'll make it together so the first one is going to be the header and the header is going to be this part right here at the top which is going to bring up the modal another thing i want to make i'll make a comment right here there's going to be a component called playlist okay and another one we're going to make is something called like player controls player controls awesome cool look at that the jsx is pretty much done because all of the html css is going to be within these components so let's get started with the header so to get started with the header i'm going to hit save on the home page let's do control b here go to the components make a new file and let's say header.js okay control b again and we can say r a f c e hit tab save and come back to the home page and now we can bring this guy back in oops so if i just say header we can see this little emit abbreviation that's going to give us the shortcut with the import so i click it header is automatically imported and then forward slash close the component so now we got the header so now that we got the header we can start working on it now with the header we're going to be coming back to this what i want to do with the header is again just set up the front end and then we're going to give it more functionality as we go so to start we don't really need this but we do need import image from not down that but from next slash image perfect so with that out of the way we're now able to use images in this component and that should be good for now what i want to do is start styling the jsx okay so for this first div we're going to give it class name of styles dot header and that's style sheet styles that hit all right and if i were to save this we'd see styles is undefined why don't we see that because we need this style object here so i'm just going to put the skeleton of it so we shouldn't get any errors and again there is the error that i was talking about that's because it should be styles cool and within this header div we're going to have a wrapper div so let's call it class name styles dot header wrapper okay and then within the header wrapper another div is going to be the class name and it's not going to have an actual class name it's just going to have a tailwind css already because there's not much so just flex item center on there then we can do another div within that that's going to be class name styles dot arrow button okay and thanks to our cli tool we can give this image a source and it's going to lead to the assets folder which you guys should have over here it just appeared let's open it up to double check we want the chevron uh left over in this one i'll say forward slash oops say forward slash assets slash chevron left and this won't work until i give it a width and height so let's give it a width of 20 height of 20 and alt left okay and see hit save hey there it is yep so this should all be within the div for the arrow button okay from there you can actually just copy and paste that because we're gonna need another arrow button so instead of chevron left let's get chevron right cool yeah so it should make that shape and this should all be within the flex item center okay once that's done we're gonna have another div right here in the middle we'll say class name is equal to style dot header right and after style that header right there's going to be a button here which is a component that doesn't exist just yet so we'll say upload button for now but we'll come back to it don't worry i want you guys to give it to get an idea of what this is for and next let's make the next step okay so after we make that the next div is going to be div with a class name equal to styles dot profile okay cool so after styles that profile we're gonna make another div right here which is gonna have the class name of styles dot profile avatar container this is the header section and i want a little area where you can show your avatar okay cool and then inside of this div here we can have an image tag and then inside that image we can have we're going to use our assets again so do forward slash assets slash and then we need to find avatar.jpg go ahead and hit save let's see oh we need a width and height so let's give it a width hmm it's what 30 for now and a height 30. i'm actually going to put it 20. okay let me do an alt of avatar okay it's been a while let's log in again awesome there's our avatar perfect don't worry once i give it a class name we can say rounded bolt to make it perfectly round there we go awesome okay so after that here you can insert your name so let's put lens okay put my full name plan stiletto perfect okay should be closing div closing div okay and then the one thing we're missing is this shouldn't be closed in it should actually go right here we want to do is take this it should go right underneath upload button there you go that's better and this guy can go like right here yes sir perfect all right so i'm just going to quickly format this so it looks good boom this should line up with profile and these guys should be together there we go so should look something like this and this div should belong to the header wrapper all right looks like we're all set and good to go now the key thing here is after these three closing dibs we're gonna have to make another div and this one's gonna be style style.playlist text content and within that it's also going to have an image and that image will be okay and a source of this link right here you can put whatever you want this is just supposed to represent the album that you're looking at in the header so from here we can give it a width and height it's going to be 220 height is also going to be the same and for the alt we can just put album hit save i put hi there we go so this is the which represents the album that you see in spotify and again if i make it a lot bigger there you go awesome so after the image there's still another div within the playlist text content and that's just supposed to represent the details of the album itself so what we're going to do is make a div class name ml-5 okay within that it's going to be this fragment that just says album okay and from there another div called class name style dot type and after the title it's gonna have the current song current song this is gonna be dynamic later on but for now we'll just make it static okay and as a sibling we're gonna have another div we want to add this dot that i have saved and say 20 22 and then paste and then 46 so i'm just putting random numbers here you could put this as whatever you want it's going to be static and say three hours 20 minutes doing all c here so you can see i said save cool and don't worry i'm going to style all this so it's not all smushed in the corner okay so closing p tag closing div closing div closing div and then here we have a little controllers container so we'll do a div with the class name styles.controlscontainer and inside that div is going to be a couple of buttons so let's do this so i'm gonna have class name styles dot play button okay and inside that play button it's gonna be an image with the source being assets slash should be a play svg next plus play perfect pi svg with width of 30 and a height of the same thing okay after that width and height you can do alt equal to all right there's the play button and now we're going to make a couple divs and we can copy paste this because it's going to have the same class name so the next div it's going to be styles icon container okay and inside that icon container is going to be another image so i'll just copy paste this one since it has the same styling the difference is it's not play svg it is the heart button if you remember the spotify all right so let's do asset slash heart let's see perfect cool so there's the heart and what we want to do after that is copy this two more times and then just change the images here so this one has a download that exists and this one shouldn't be a heart it should be a more perfect then closing div closing div click div and that's it for the jsx right the next step would be to start doing the styling okay so getting started with the styles one thing i noticed really quickly was this should be in curly brackets okay awesome now that's done going back to the styles object we need is the header and the header is going to be maxed with dash 7xl and then it's going to have an ml auto or m.shadow sorry that's basically margin auto and then this p 3 ok then after that we can do the header wrapper which is going to have a flex items center and justify dash between okay and then from there let's do we can do the arrow button so let's do the arrow button and the air button has a couple things it's going to have a background black mr-2 and a width 10 height 10 a flex our displayplex item center and then justify dash center and a rounded dash full okay and i also want to give the background and opacity 50. okay cool and then we can do cursor dash pointer right it's supposed to be like the page and i just realized there's another styles arrow button over here in line 14 for me that's why it's not taking the styling there we go that's more like yep cursor pointer and let's add a hover effect let's change that opacity to this one when we hover okay nice that feels more natural okay moving on after the arrow button we can go ahead and do the header right which doesn't have much just gonna have a flex and that's pretty much it cool so after i had to write we can do a profile and then profile is going to have flex and item center yep and then a background black and a rounded dash full and ap one and a px-3 okay that sounds pretty good to me so far let's give the background a little bit of an opacity dash 50 a cursor dash pointer and a hover of bg opacity of 75. awesome let me just double check something arrow button header right profile oh it's because the profile avatar container okay that's fine we could do that next we could do the profile avatar container and that should fix it up let's do with seven seven and a rounded dash full then we can do a dash ml dash 2 3. okay yeah the image isn't really aligned so what we could do is the container is in profile avatar container so just do a flex item center and there you go that looks good to me perfect okay so after that see we can work on the icon container icon container do we have one yep right here so let's go ahead and install those so the icon container it's just going to have an ml awesome okay from there we're going to do a title and title is going to have text 6-l x6 xl and then a font let's make extra bold extra there we go yeah it should be big and bold like it is on spotify then let's write playlist text content then playlist text content i'm just not sure spelled it correctly and we have it yep it's gonna have flex and items dash and empty cool and we lost the image yep there it is cool so now you're gonna see that the smaller make it that's where the image goes but then when i make it big it's a lot better awesome so it helps with the responsiveness of it okay better come on here let's do the controls container next and the controls container is going to have flex items center mt-10 as well nice and last but not least should just be the play button and the play button is going to have a background green that's spotify green yep with 16 and a height 16. nice and give it a flex property here with pl-2 item center center and a justify dash center there we go and now watch this rounded full nice okay cool look how like making buttons rounder makes it way more appealing cool yep so that's looking a lot closer to the header all right awesome and again don't you don't have to use the same exact pictures i do put your favorite album on there and your favorite song and your favorite artist cool all right that's the header front end now the next step i wanted to do is talk about this upload button right by the profile name you should be able to see this little oval button it says upload and when you click it a modal will pop up so one of the things that we're going to have to do is pass down props all right so before i pass it down here let's go back to the home page and remember the show upload music state that's true then that model will pop up it's all gonna depend if you click this button right here so what we're gonna have to do is go to the header and let's pass down this prop right more specifically the set show upload music is going to equal the set show upload music function all right all i'm doing is taking this function and putting it into this component i'm passing it down because it's a child and then what we're gonna have to do is on top here of the header component we want to destructure the prop and literally just write set show upload music right what this does is if i were to console log set show upload music let's do inspect element hey so look at this this is coming from the header component and what's showing is a function so that why is that awesome because now i don't have to make a use state in header i could just pass down what i made in home page to the header so that's the one of the main benefits of props so i'm passing down that function reason being is i want that to i want to set the upload music to true when i click the upload button but how does the upload button know when to show upload music what we can do is first let's make the component so i'm going to do a new file and say upload button.js and this is just base this component right here is basically front end so let's hit save let's comment this guy out all right and let's import upload button from upload button hey there it is all right so now that we have it there let's pass set show upload music the same function to the upload button all right now if i were to console.log it here i have to destructure it first so i can say set show upload button [Music] cool so now we have the upload button what we can do real quick is set up the jsx once again and all it's going to have is another div with an on click this could be a button but we could also just put it on and click on the div so there's no on click i want to make the unclick yet because the function doesn't exist yet but i can make the class name and the class name is going to be styles dot oops styles dot upload button and it's just gonna say upload music just like that oh yeah don't forget to make the styles object all right take out the import react awesome cool so now it says upload music that's totally fine and for the styles we're only going to style upload button and there's not much to it it's just styling the button it's going to have a background of the spotify green yep it may not look much now but once i add some styling to it give it margin padding cursor dash pointer uh-huh full like we always do nice and then we can do a hover scale 95 and add a transition cool it looks a lot better when you stretch it out a bit but this is the upload model and at the moment nothing when i click it right that's because let's add the on click functionality and there's nothing really to click because there's no function so combing at the top here between lines seven and eight let's make the const upload clicked and the upload click all it's gonna do is take our set show upload button and set it to true okay and then all right to show you guys if i go to home page and let's console.log show upload music right what do you think we'll see in the console log if i hit save all right so let's make this guy bigger it's back to console false right so uh show upload music is false when i click upload music it should be true right it's true now come on all right says false oh it doesn't say true yet so let me just move this back i'm going to go over to payment and let's take out the console log here so it's easier to see and then upload we forgot to add on click so let's do that we'll click on click then we do upload clipped okay extending this inspect element now we check all right so hit refresh nice so if it's the home page we should see false if i click upload music set show upload button is not a function okay interesting i'm going to assume it's a typo set show upload button oh there you go i said button instead of music it's a mistake there you go now we should be good hit it refresh again all right false true and it doesn't change it back it's only when i the modal comes up that we can exit out then make it false so that's how we set up show upload and get the state to change okay there we go all right so now that the upload button is finished if i were to full screen this right it's going to set the state to true and from the looks of it we're starting to set up the everything we're going to need in order to upload our own music which is going to be awesome right but the thing is with our smart contract how it is now it's not able to upload any songs we can only accept the payment so i think it's time let's get back into solano playground and work on the smart contract all right so now that we're back and we made the first function together we're going to use that as a template to creating more so let's see if you guys remember what i said a couple minutes ago right so we want to make a new function and the function is going to be called create music and what create music should do is store the reference to the song right onto the blockchain so let's start making a function so how do i make a function in solana right with anchor exactly you're gonna write pub fn all right same thing as we did before so how do i give this function a name well you can do right here create underscore music okay how do i give this function parameters right so again if you know javascript really well this is very similar all right so i it looks like this but i put enter in the parenthesis because i'm going to add a couple parameters what kind of parameters would we need for create music all right let's think about accept payment payment needed who was paying the context of who was paying the data of who's paying right create music is going to need the same thing so there's going to be a parameter called ctx and the type is going to be context but not pair it's going to be create music okay is that it though that's not going to be it i could tell you now i also want to store the name of the song the title right this would be mr sandman the the goosebumps by travis scott like the title right and what is the data type of the title you think exactly it's a string so i also want to store the music underscore irl i wanted to talk really quick about what this means so if you guys are familiar with nfts at all when you guys own an nft what happens is you own the rights to the address on the blockchain right where that the reference to the nft you don't actually own the picture itself right it's essentially you own the link and when you put that link it's going to point to the actual image that you own all right so the same thing applies here it's going to store the url right where your music is being hosted so later i'm going to use a cloud hosting site to host our music the main thing is that solana is going to store that reference nft is the image is stored in ipfs and you own the reference to that image in ipfs so it same sense the music rl is going to be a string so i think that's all the parameters the next thing we want to do is talk about what the program result is which describes what should we expect so let's write program result curly brackets and what we're going to write here is a variable called music right and then we can say it's going to be and mute right what does n mean it means that whatever we're going to write after this mute is going to be changeable or mutable and what it's going to be is ctx right the context dot counts dot music all right so let's pause this function right here right now so if you remember we needed to pass in pair context but we didn't know what like if this is describing ctx we don't know what this even means so what we have to do was create a pair context struct right so if we're going to do context create music what should we do exactly we should create a cree create a creative music okay so it's going to be similar to this and we can use this as a reference if we get lost right so coming down below here let's do the create music context so i'm setting up what that means all right so the first thing we're going to do if you look at the top is something like derive accounts right basically you get all the traits of an account right so derive parentheses accounts and then how do we write a struct or create a in other words a class if you understand what that means in javascript we're going to say pub struct create music and then pass in info okay so far so good there we can add curly brackets right after info and now what did we do here right we wanted to essentially authenticate the account so we're going to get it like this pretty much something pretty much similar to this all right we're going to start it off the same so it'll be hashtag array count parentheses oops yeah so you saw that how it like set up the knit and everything like that we're going to do that as well okay so we'll start off by doing init once again and then after you knit we'll set up our seeds which is going to be generating a unique hash based on the input that you put in here as i explained previously so let's do a b music dot as ref and again you don't have to worry about what all this does exactly just know that it generates that unique hash random key dot key dot as underscore ref okay parentheses after that put a comma here and then you can write bump and if you remember a bump it's supposedly supposed to increment the unique hash if it's not unique right so say like it makes a unique hash from this input then it's just oh if it's not unique it's going to increment 1 to 20. okay so bump and then we're going to set the payer to equal the authority okay and from here let's say this let's define the space right now with rust um one thing they like to do is they like to know exactly how much the exactly the size of the input that's going into the function right with javascript you can either have an array of zero or an array of one million really and javascript will accept it right with rust it needs to know what the maximum size to expect you know is for this space and to start off we can use our size of which we're importing and get the music account which doesn't exist yet so we'll pause this in a second alright so let's define what the music account is if you have no idea what i'm talking about let's remember the payer context right you have to define the size of the pair contacts and the size of pair contact is going to be the whatever is in the payer account and what is pair account that's another struct we made this one right here so with that kind of like pattern recognition what are we gonna have to do for this what is music account music account is gonna just be another struct that we define over here okay so let's define it we're gonna have to do a hashtag account here and after we do hashtag account we can do pub destruct music account that's how you make a class once again and you could think of this as what are the properties of a music object right so one of the first things i do is get the authority so the authority of the music account is simply just going to have the type of pub key pop key like this actually awesome another attribute that might make more sense to you is inside the what i'm going to store on solana is going to be the music title right so pub title and what can you expect from this data type it's going to be a string okay is that making more sense now the music object is going to have a key of title and a value of whatever title we write in the front end okay another thing that's going to have is pub music underscore url which is going to have a string or expecting a string cool so now music count is defined and what i'd like to do next is define how what is the maximum size of title and what should be the maximum size of music url so what we could do is come to the top here between a line of nine and ten make some space and we can say const text length okay and text length is gonna accept the type of view size and the size of text length is going to be 255 bytes all right semicolon you can think of this 255 at one byte which should equal one character it's not going to be exact but that's roughly the estimate that you can look at so my the longest title i can have is up to 255 characters about okay same thing for the music underscore url underscore length view size and that's going to be equal to 255 all right that's the same reason why you can think of this like twitter where they limit the amount of characters per tweet so that someone can't make a paragraph so we're defining the text length and the music url length that looks pretty good to me so coming back below here right we still have our struct now let's determine the size the total size it's going to be the music account object itself plus the text underscore length plus the music url okay we're adding all the things together to get an exact estimate of the s the space or size of the create music context okay amazing so after the closing stuff right here let's write out the rest of the attributes of create music so we'll write pub music right it's going to be an account type which has the info lifetime variable oops close it off but you can put comma music account all right then we're going to have it checked here which is going to be account parentheses mute and again whenever you see mute that means it's mutable or it can change data that can change so the pub a random key can change and the random key is gonna expect count info again or more specifically account info info i know it's pretty funny all right from there we're going to do another hashtag account mute all right this is essentially the authority that i'm setting up right now i'll put a comma right here the authority and it's going to essentially be the signer who paid the transaction fee that's what i'm defining here so i'll write pub system underscore program is unchecked count info there we go okay from here let's set up the token program sorry not the token program we want to set up the system program it's going to be similar right we did system program the next thing you want to do is let me double check system program oh set up the token program i was right and it's going to be something like this okay quite literally we could copy this because it's the same format and we're also going to save time as well all right as you can see system program is the same the authority is the same so there's some sort of like template going on here [Music] and yeah that's what i was missing okay yeah and i forgot we need the authority here too that's what i was talking about earlier this is the signer who paid the transaction fee boom okay cool so we don't have to reinvent the wheel that's pretty much the template of this okay and of course i can expect a couple bucks here no did all go away nope everything's in there all right we can expect a couple bugs here so let's hit build yep there we go line 79 info is never used oh i see okay it's never used because i didn't finish that function remember how i paused it so we set up all our structs when i hop back into the function create music we didn't finish writing this out because i wanted to tell you guys now this should make more sense so music this is a variable it's going to be equal to the context dot accounts and then grabs music all right and that's going to set equal to a variable and then from there this is where it all starts to click for me personally if i say music authority right how can where is this authority coming from this authority we can this is a key right this is like saying uh car dot model is equal to lamborghini right so i'm setting the authority of music the object that we created or destruct right and setting it equal to something okay can we set it equal to if this is the authority we actually have the reference to it so we can say dot ctx.accounts.authority.key there we go so i know if that didn't make sense to you this one might so music right if i say music it's gonna be this right how can i get the title of this music well if it's like an anything like an object that i know i can say music that title cool so that's how we have access to the key now i can then sign a value so what should be the title of the song i could say like goosebumps right but then that means every song that i create is going to have the title goosebumps but that's not good all right we should make it dynamic well how can i get a dynamic title luckily for you we passed that in as a parameter so you can just say the music the title is going to be title there you go is it making sense now so let's put a semicolon right here something going right there and then we're going to say music dot music underscore url is equal to the music url we passed it there we go so i hope it all came together in that moment i had auto saved by accident and then whenever you finish a function we can write ok and usually sometimes you can pass stuff in here but for this you don't have to hit build again expecting some errors it's going to try again build compiling there you go so it's not one used import and line 96 line 96 aha because the comma should be here okay expected line 40 yep it would be good to add a semicolon right here [Music] build compiling oh let's go finish no error so let's refresh one more time so we can see a clean console let's see if line 40 had the semicolon yep that's the last thing i added we build then finished no errors let's go so as long as you you know dot your t's and eyes or in other words add your semicolons semicolons and commas you should see finished not even any warnings but awesome now if i ask you this question if i go back to my vs code is it using the latest version of the contract does it have the create music function inside of it no no we have to upgrade it like i showed you earlier so let's upgrade it and again it's going to cost some solana so make sure you have some you could always air drop yourself right here air drop i know at the moment our contract should cost about five sold so it's going to take it and we deploy slash upgrade our contract awesome so looks like a deployment was successful so now that our contract is upgraded we're going to need to export the idl all right and then we can double click this it should open up in vs code we can do an alt z and let's also grab our spotify json right so spotify json is the current idle that we're using so if you look what's the difference between these two all right if you look in terms of functions there is a create music function now and that's how we call it in the front end no underscore right another thing that's also here is the struct okay so what i want to do is press ctrl a to select everything in this idl.json and then ctrl c to copy it all right so then i go to the spotify.json go a delete paste all right that's just to ensure you know i'm not copying anything wrong this looks a lot better cool now did i do i have to change the contract address no since it's the same we just upgraded the same contract in my const this will stay the same and when i import spotify.json that's going to be different so we're already we're actually already done upgrading so now we have the ability to call the function but we haven't quite set that up yet but with that said we're done with a smart contract so if you made it this far in the video congratulations give yourself a pat on the back you were able to write another solana program and if you made it this far let me know you made it this far by saying shark in the chat right digital oceans mascot is a shark named sammy so if you say shark in the comments i'll know but you were making you were watching this and you made it this far so that's the smart contract awesome so we finished the solana program and everything is pretty much set up on the back end what i want to do next is set up the front end so what we can do is let's make the vs code full screen because what i'm about to do is create a custom hook right in react you saw that there's use state use effect all right we can also make our own custom hook by writing something like this so i'm going to say control b and what i want to do next is make a folder so we can close all of these so you can see it a lot better all right we're going to want to make a new folder and this is going to be hooks right the hooks folder again is exactly what sounds like create holds any custom hooks we create so in the hooks folders a new file and i'll call this use spotify and that's what i'm going to call the hook essentially so use spotify control b let's set it up by importing a couple things so i want to import token underscore program id from solana spl token we've imported this before i want to import use wallet so what does use wallet do again yep it holds the instance of the wallet that's connected and usually we put that in a variable we also want to get our connection to the blockchain and that's through solana host coming from utils const we need to get the program instance so how do we get that yep it's the get program instance everything we did previously is all set up for this now it should all be making sense okay now we also want to get anchor so let's just make that in a variable we can say const anchor is equal to require add project serum slash anchor all right that's how we usually get anchor you can get our utf8 set that equal to anchor all right we did this before it's anchor.utils.bytes i believe dot utf8 cool now remember how i said we destructured something from anchor we're gonna do that again except this time we're gonna get two things for me we are going to get web3 and something called bn okay next we're gonna do cons system program that's all imports that we've used previously in the build okay after that we're going to set up default accounts again which is the exact same thing as before it has a key called token program and it's going to be set to token program id as clock which is going to be set to anchor dot web three dot sis r all right that's how we get the clock and then it's also going to have a key called system program and that's gonna be system program all right coming from here and then we can get dot program id cool okey-dokey so again a hook is just a function that we can call upon essentially so we can set up the function by saying cons to use spotify because that's the name of the hook is equal to arrow function yeah awesome so what are the parameters of u spotify what does zeus spot if i take it i can tell you that use spotify even if you're not sure or understand why we're making this i'll tell you that spotify is gonna have music url title set title set music url and set upload music okay cool again you might not know where all these are coming from but if you're if you were able to understand code or look at somebody else's code you might be able to determine what we're passing in here where have we seen set title or set music set something right that comes from state and we actually have all of these states already all right i'm just giving it the same name so use spotify is going to take in all this information and some functions from state and do something with it okay so in between the curly brackets in line 22 and 24 is the actual logic itself so in the function let's set up a couple variables first one is going to be what is the wallet connected it's going to be a variable called wallet and how do we get the wallet instance get use wallet that's it you guys are pros okay we also want the connection how do i get the connection the connection is going to be new anchor dot three dot connection parenthesis and then pass in your rpc connection which is solano underscore host okay from there we're gonna use const program so the equal to get program instance and remember program instance takes in two parameters and should make sense why i wrote those variables before because it takes some connection all right so now it's lit up and the wallet yes nothing new from here use spotify is going to have a function called get songs alright so const get sung get songs is exactly what it sounds like it's going to fetch the songs that are stored okay so to fetch the songs right marisha konsta log fetching songs just to know that in our console that what it's doing and what this is running and what we could do is ask ourselves in our smart contract is there a fetch songs button there's not we only have accept payment and create music one feature about making a music account but making a music account is that it stores all of that in the program itself so you don't need to make how can we use that to our advantage then so we can say khan's songs it's just the variable i hold it in it's equal to await program which is you know the program that we're referencing dot account okay dot music account right literally called the name of the struct i'm literally calling and i'm trying to get everything stored on there so how do we get all that all of that there's a built-in method called all which will do that just for you then just to prove it to you we can con to log the songs and then return songs right that's what you return from this function so that's the get songs okay after get songs i need a function that's going to upload or store songs into the contract itself so we what do we have in methods that do that except payment no create music right it's storing them or at least setting them to the account right here so let's make that function constant new music is what we'll call it equal to async now what is this going to take in new music is going to be const random key that's the first verb and to get a random key pair we can just generate one using anchor so if we do anchor dot web3 dot key pair dot gender okay then we can do that public key okay awesome after that's done we can do music pda and this is going to equal await anchor dot web3 dot public key dot find program address all right parentheses inside here utf8 dot code and this is where we put music again and then we'll do the random key dot to buffer all right this is what we did last time when we're doing the accept payment we have to set this up and key to buffer comma and then we had program dot program id okay and i'm seeing that this should actually be used so let's make this lower case and bam so now it's being used okay cool program id that looks pretty good awesome so let's set up a variable called tx for transaction and set that equal to all right the instruction that i want to run on my contract is create music so how do i run create music from my front end we're going to get program right that's the reference of the program if i could spell program dot rpc right remember this from before dot create music there we go all right so create music what are the parameters that it's expecting let me just double check that it's expecting title music url and just to create music context we could do title all right so with that hook done let's remember what we pass in to use spotify the url title the set title the music url and the show upload music okay with the hook done let's head back to the home page and in the home page what i want to do is add another import here let's import use spotify from the hooks use spotify all right so we just imported our custom hook now what are we going to do with that what i want to do is take out this console log right first and then we're going to do some destructuring of use spotify all right seems familiar all right for use spotify what are the imports again the parameters that it takes in it's gonna take in a music url we have that that exists here does it have title do we have that yes we do it's going to take in set title all right we have that and it's going to take in set music url awesome and last but not least it's going to take set show upload music it's not going to glow because we've passed that down to header already alright so we passed in the actual things in the hook but what do we want to take from you spotify what can we take we can take we look the two functions we create constantly music and cons get songs that should all be in the home page to make use of it so we can literally write that by destruction and saying new music comma uh set not sorry get songs yes okay so we destructure two functions from our custom hook so that we can use it in our home page there we go so now it's true at the moment if i click upload music the model doesn't come up because that component has been made yet so let's make the component so we're going to do that next i'm going to i'll tab into here and the trick that i want to do is if you hit enter it should still be in the should be right here in line 31 what i want to do is put curly brackets and say show upload music you guys know what should know what show upload music is right what's the default state of this false when does it turn true when i click the upload button right basically you could set some conditional no rendering saying if show upload music is true right then we want to upload i mean upload show or render the upload modal component right essentially the upload model again this doesn't exist just yet but we can make it exist in the components folder new file upload modal.js rafc okay then we can add the import upload model from there so if i click on upload music we see upload mode hit refresh might ask us to log in because it's been a while now i don't see the upload model why not because by default this is false but if i click this there it is and when should it go away when i hit create new music which isn't set up yet so there we go so we updated the home page now let's work on upload model so with upload model there's a couple things that i want to pass down to it so let's make some space here and let's say the props that i want to pass down it's going to be title and title is going to have the value of title which is the state it's going to have the function to be able to set the title i'm going to have the set show upload music show upload music right because i want to put this function in upload model because i want to set it back to false either when i exit out or when i create a new model right so then let's do music url set this equal to the same thing and set music url also and new music right new music is what guys yes it's the function that we're getting from use spotify as you can see here okay cool all right so we passed down new music into there and now i feel comfortable working on the upload model okay cool so let's start working on this we can take out import react from react and what we will need is put curly brackets here and let's import all those props or destructure them rather so the props is just gonna be it's gonna be title comma music url the set title the set music url set show upload music so that's everything we passed down and destructured all of them and now let's work on the jsx all right so the first thing i want to do is make a class name and on click how's that i want to click and when i click on it what i want to do is set show upload music let me see is it here set show upload music set show upload muse all right does it glow up yep it's going up and we want to set that to default sorry if i click that button which is just cancel there it is so it should be like cancel upload right so the model is showing up it's not exactly nice yet but now the functionality is coming along yeah all right i'm not done yet we need another button here this button will also have it on click this time though it's going to have a function called create and you don't need this arrow here because i'm not directly calling it i'm not putting parentheses or you can leave it like this and this will have a class name of template literal and say style style.button but it also will have another's class name that's why we're doing this of style.create let's put s here too okay and if i save this we're going to see create not clicked how create new click is undefined because we haven't quite made that function yet so what i'll do really quickly though is right create new that's going to be the text for it and it's going to be closing button and that's the jsx so my computer doesn't yell at me i'm going to make that function create new clicked and now i think about it we don't even need to make create a new click actually we can just literally call new music right here yep that makes more sense awesome so now if i hit save hey we got two buttons awesome okay create new and we got the transaction may fail to confirm that's not a good sign we can't really check this yet because even if it did work we don't have any songs to get just yet so we'll hold off on that but it's good to know that the button works okay so i shall open modal i hit cancel boom there we go all right so next we have to do is do the front end now i'm starting to realize that this upload model is something i got from a different project and that one doesn't use tailwind so just to save time this one is not going to be styled with tailwind but we can do an import styles from and then the path so let's do command b go to style and again this it's already here so we don't need to style it already it's already done for us thanks to our cli tool once again so we can say import styles from dot forward slash styles yep upload modal css hey there it is so if you're just a quick overview this was given to you this was not done by me this is the create button everything that you need you can just play around with it and see how it's styled so again if i hit cancel boom and that looks funny so let's just double check our inputs again and put ah input file should be input field save hey there we go that's more like it one thing that was also weird is the modal buttons i think that's because the cancel button should have the same class name let's see if that works instead of create this should be cancel though hey that's more like it so smooth so if i hit cancel we lose the model if i upload music the model is back and that's how you make a model nice with all that done let's start working on the table itself like this area right here that's going to show all the songs that we have so to get started on that what i should do is let's head over to the home page and we can actually just do it by doing ctrl p and click this awesome let's start making playlist.js so we could do is comment this out now we can do control b and then under components let's make a new file playlist.js awesome do a little rafce come back to the home page and do an import import uh playlist from components playlist and they're cool all right so now that we're in the playlist component we can get rid of import react from react but we will import use effect and use state all righty so we know what those hooks do from here that should be fine let's make out the playlist and if you didn't know playlist is the table for all the songs so it's going to start displaying all the songs through here let's set up the jsx for it all right so if we want to set the jsx for it let's make our styles object and i promised we didn't give this one away we're going to do it together all right so the first div is should be called table wrapper so styles dot table wrapper and inside the table wrapper i will have a table and the class name of the table will be styles dot table okay inside of the table div or table tag it's going to be t body the table body which will have a class name styles dot table okay and then we can do a tr and within the tr we have th's and we have a couple of these so we can copy this a couple of times since we have a couple two three four we have a total of four and each one is going to have a class name of pb-3 and we can copy this one over too so we'll be listening to this boom and there's four they all have pb-3 and this one will have hashtag this will be title this will be place and this won't be an image so i guess we need to import image or actually we don't have to we could probably use an image tag here so let's just use a regular image tag and just say source is equal to assets time dot svg yeah hey there you go and just put the alt can be time all right so those are all the table headers the number the title plays and the timer looks pretty good now after that we can go next on the tea body and we'll need another tea body okay this is just a spacer so let's give this a class name of dash six block and then the next line here we're gonna map through the songs and for every song we should make a table row table row is just going to be another component that we make so let's save this for now then we can make the component and say table row okay now we have table row r a c e save come back to playlist and now that's the import we're missing table row and we can insert one right about here table pro cool all right looking good to me now before i move on let's do table row and style this one first so that it all comes together so i'm set up the jsx oh and before i do we don't need this okay and for the jsx it's not going to be a div actually it's going to be another tr body so t or t body sorry did i do did i write tr body in the other one no i don't t body we're good so in that t body now it's going to have a tr right and each t r inside of it is going to have a th okay and in that th oh it's gonna have a class name of styles.th and again this doesn't exist yet so let's make the styles object and for now let's put zero here it's gonna be props index or like the index of the song and then the next line we'll have another t with the same class name styles.th and then within that it's going to have a div with p tag so i have a class name font bold i'm only i'm not going to give it a whole class name because it's just once and then we could just do a title here song title we get the class name equals opacity 50 and it's just gonna be the artist or a quote unquote artist this one's actually going to stay static since we don't have access to the artist when we store the song okay and then that next line after line 15 actually not after line 15 i lied after line 16 we want another th so this th class name same thing styles dot th and then inside of that th we'll have ten thousand it's supposed to be like the amount of plays which will be static as well then we can have one more same class name styles.ch and it's just to have however long the song is which is going to be 2 43 which again is static okay cool that should be it for table row let's just quickly style it that's going to have just the th class which will be pb-5 and a hover effect of opacity dash 50 and a cursor pointer okay cool all right so what i want to do next is head over back to playlist and now that i'm back in playlist let's go ahead and style that table so it looks a little nicer table all right it's this one let's do a table wrapper first actually so table wrapper is going to have a max width of 7 xl and m dash of p 3 m t 5 and then m b of 40. okay cool all right so after the wrapper then we can do table and the table itself is going to have a width full and text left nice okay comma then we have table header which is just going to have a border dash b let's give it like a gray border there's like a light a slight line that comes in between each song and it should be border dash grade dash 100 divided by 20. then we do pb-5 here and an opacity of 50. hey that's it yeah table header nice again always looks a lot better when we do it like this that's the spotify here's the ten thousand plays and the time it's all lined up so now do you guys get what table row is for it's a component right for every song that i have i wanna map through each song and make a dynamic table row so this is like four songs okay so what we could do is think about where does think about where does playlist come from it's going to be through the home page so it looks like we need to get home page and we're going to need to pass something in the playlist so what we do is if we control b take a look at this data folder this comes with it with our awesome cli tool you're going to see activities which is basically all the songs you hear see here with snoop dogg and travis scott but there's songs js which i already set up i already set up a couple songs that we could test out so these are static songs so we can import this in our home page i'm gonna i use this just to test out the player and before i fetch the songs itself so let's import it temporarily import songs from data slash songs and if that's console log songs while we're here on to log songs songs are here so it's really noticeable click expect element console this should just be in curly brackets import songs from data dot songs now let's check this spect a array of two songs okay that's a good sign so now that we got the songs this is supposed to simulate us fetching the songs from the smart contract but we're using just dummy data for now and it's going to be imported as songs alright it's the same as this all right so let's comment this out for now so you don't get confused but we're going to be using this later but for now we'll use this so when put in playlists let's pass down songs as songs yeah and let's go back to playlist now we can destructure it songs and now if i inspect element let's hit console we can actually inspect the array and say okay so this has an index a title the artiste and let's see it has blink plays cool awesome has all the attributes of that song but one thing to note when i actually fetch the music the songs won't have all of this it'll just have the title or like the name and we'll also just have the url this cloud and everything it won't have index or well it won't have plays or anything like that so the rest of that static but we can make just simulate what that look like by doing songs.title our song is that index side right this way oh i know that's not here this should still be title what i want to do is go to table row and past nine songs so let's pass down songs on this first one and let's say songs is going to be songs and in table row can we get the table row destructure this again songs now we can do it so we can say songs dot index then we can also say songs that title and if you remember the console log this is actually really funny there's a typo it's songs that artiste all right this should also be songs dot plays and songs dot time let me see i already forgot okay song is that song undefined reading index so that's interesting so let me just undo all of that it doesn't know what index is okay let's just cancel out songs on table row oh i see i see so let's put that all back actually so just to show you what i mean if i can songs here we should see the same oh yeah so we should see an array but the reason why we see undefined is because i have table rows without songs so let's take those out for a moment all right now i should be able to just write them all out songs dot index one thing to keep in mind actually this is what i'm passing down is an array right songs is an array and if i just pass it down as an array it's going to be much harder to map through it so this is where i was saying earlier where we're going to have to map through each song so if i write song all right that's the array and if i do a map i'm going to iterate through right now the key here is if i write song and i don't even have to do this but i can console log song so what am i console logging here so this should make more sense to you so in playlist i take the songs map through it for every song console log it so what should i end up seeing refresh here is two objects and i see it twice but i see two objects right the first song and the second song because for every song and there's two it will cancel it so that's why i see it twice and what i want to do is return a table row right with the key being the song and the song info being the song and i'm trying to think of it now once i pass that once i pass down the dynamic props we're going to change this up but for now with the static props this makes more sense i'll hit save table row now i should be able to accept song and let's see if i can console log it it should be the object itself yep two objects and table row and now if i do song dot index look at that one and two what about title change title now song dot title hey there you go i want the artist i remember this one has a typo song that artiste hey okay all right and then you tell me what should i write here song that plays okay and then here song dot song time nope let me just double check that's what happens when you get the object key wrong ah song length makes sense hit save oops not there save here hey there we go guys so now we just made dynamic components using static data so this is what spotify would look like all right one thing to note uh the way that we saved it in the smart contract simplified meaning we won't have the artist name so there won't be and it's going to be a static artist the plays will be static and the time will also be static the only thing that's different is going to be this music title which we can will provide awesome so that's how we can set up the music all that's left now is to fetch all the songs and create one are you guys excited i know i am we're almost done with the project okay so the last thing that we're going to need to do in terms of front end is i want to make the little player that goes so if i click this it's going to play that song okay so let's head over to home page and that's going to be under player controls so let's just even out the space again and uncomment this out and create that component so in the components folder playercontrols.js r-a-f-c-e save and let's import him at the top import player control yep there it is cool so let's get to work on this okay so with player controls obviously it's the player that allows us to play the music we want and there's a lot of functionality because we have to be able to pause the music play the music skip the music and i'll get more into that as i write out the functionality but the main thing that we should do first is import a couple different things so let's import image from next image let's also import the actual image themselves as a name so let's import next from the forward slash assets slash next dot svg and again you should have all these images if you used our cli tool okay then previous from data forward slash assets slash speaker dot svg import speaker from assets slash speaker right it's pretty redundant but you know right this shouldn't be speaker it should be previous okay so you're basically importing the name of the image from that path so import repeat from repeat all right you get the idea we only have a couple more let's do shuffle from the same place assets shuffle play rounded you can do play rounded and then import uh pause icon from assets slash pause.svg okay cool so those are all the images cool now let's just work on writing the jsx what we'll do is set up the styles object clone styles and let's format this okay so for the class name of this first div i'm going to go with the name of main control and then from there we could do class styles dot flex center okay and then within flex center there's another div last name styles dot i'll cover container okay and then from there we can have an image and that image is going to have a source and i have the link for this you guys it's going to be it's going to be this really long thing here and if i hit save i can't save it yet because i'm going to do the height and width the height shall be 200 while the width will be 200 as well let's give it a halt and it's just like a song hit save hey that's our cp logo that's basically what it is that's going to be our album cover okay then it's a closing div followed by an opening this one doesn't have a name but inside of it it's gonna have two p tags with the song current song it's gonna be static for now it'll be dynamic later then another p tag oops another one and this will have the class name of opacity right because there's only one styling on this opacity oh is it because of the backticks don't worry okay and it's just gonna say harvest all right this is static once so that should be closing div closing div followed by another one with no name and then the div inside of that does have a name it's gonna be class name styles dot control icon container and then within that will be a div with the name control icon okay after control icon we can insert this image here and it's just going to have a source of shuffle so the cool part is i could just do source shuffle because we imported it like that and i'll hit save might be hard to see but it's there it's gonna like come off the page but don't worry it's gonna be fixed when i add the styling okay cool so that's the div for that closing div and then hit enter and for line 36 another div it's gonna also be styles dot control icon and it's also gonna have an image with the source of previous which is another image we imported awesome cool all right so i think from here let's add the rest of the images i want to do another div with the control icon again styles.control icon pretty much the same process except this one will be the repeat one awesome all right i think i'm just gonna make this faster by making another one and this should go above before repeat should actually be so make sure you make that change real quick so it should go shuffle previous next repeat yep there you go i like that and after repeat it should be closing div closing div and then another dip okay and that will have the class name of styles dot flex center and then it's gonna have a small right here and this could be a timestamp i'm just gonna say like something random like 130. all right it's gonna be static cool there's gonna be an input here this is really cool like javascript has like the audio tags that you can use to play music and we're going to make use of that right here so let's do value is equal to actually we won't do value yet it doesn't make sense to do it now but we can say type is equal to range though right and then we can say class name is equal to styles so we'll come back to in this input in a second yes so there's the little bar right that's how you can do it you can do it with the input if you guys didn't know okay self closing then there's gonna be a small here which is just gonna be the total length of the song which like i said will be static yep you can see how we're gonna move everything over into a row and format it so then after the small goes closing div closing div enter in line 57 we have another div for spacing and then we have div with the class name the div with the class name is going to be styles.flexcenter again and it's going to be an image with the source of the only one we didn't use i believe is speaker and the alt is equal to speaker and the input or another input here it's going to be value equals volume which you don't have yet so i'm going to hold off but the type again should be range right this is the how loud the music should go so we're getting another range type all right but the id we're gonna give this an id though and the id will equal volume and after that should be three closing dips hit save there we go there it is there's our beautiful speaker right here okay as you can see like the skeleton of it's right but all set up we just need to style it all right let's get to styling in the styles object i'm just going to do album cover container and we'll do a width and height 20 and a mr-3 nice we do we can style the main control next and for main control let's do a fixed bottom i always want this player to be at the bottom zero left zero p y of three let's see we need a p five p r dash ten w dash screen and let's give it a background color is gonna be hash tag two four two four two four so just three two fours that's confusing but z 40 give it a flex and items dash center okay we're getting somewhere and justify dash between let me i'll see this so you guys can see that better how's that for my pause people yeah nice so now that play oh main control is there let's do flex center that's gonna be exactly what it sounds like it's gonna be flex items dash center okay and let's do control icon that's definitely there don't forget the comma and then in control icon it's going to be a margin five cursor dash pointer a nice hover effect of opacity dash 100 and just a normal opacity of 50. okay cool now let's do the play icon or actually let's do the container right because i want to make those icons all come together so let's do control icons container now give it a flex where is my control icon's container control icons container hey there we go so that added the s so what i did was go to the jsx add a s to icons container and then it should match up so now that i gave it a flex let's center it like this okay it's already pretty centered let's do a justify center we'll just we'll see this change yep and let's do m b two nice okay all right so we did a control icon but let's do the play icon and the play icon will be mr.5 with dash 10 cursor dash pointer and hover opacity dash 50. then we need the pause icon so where is the pious icon okay and i just double checked there is gonna be a play icon and a pause icon it's just that they don't exist yet but since we're styling i'm just gonna set it up now okay so for the pause icon and it's gonna be called pause icon style actually it's gonna have an mt-3 w-10 h 10 cursor dash pointer opacity dash 50. there you go and you're not going to see this change because there is no pause icon style and remember that cover photo that i erased there actually is going to be a photo i just double checked on the finished build the cover photo is going to have object cover all right so the last view if i organize it this way it doesn't exist just yet but later on when i add functionality it'll make more sense let's get back to our app let's log in cool and if you look at it full screen this is what it looks like a lot closer to the player now but with that done that is essentially the front end for player controls all right this is where we haven't used pause icon and play around yet but once i make the context and the functionality we'll come back and add it alright so as you can see we have the player right here but there's no functionality and i could write all the functions in player controls but that would make player controls essentially really long it's already 79 lines of code all right and if i want to make it so i can call these functions from anywhere we're going to be using the context api so i showed you guys how to pass down data through props but you could also use react's contacts api to access data from anywhere so let's go ahead and do that again this is mainly like a functionality thing so let's set up context through here so in our context folder let's make a new file and we'll call it context.js right here all the functions of the player will live which means pause play skip click and any states that we want to keep track of what is the current song playing our react app should our next app should know rather cool so we're going to need to do is import to use the context api we need in the context.js we need to import create on text also we need use state and we'll also need use effect it's all going to come from react okay cool and that's the only import it's going to take but we do need to is export const spotify context and set that equal to the create context hook so we can say equal to create context and then we can do an export const spotify provider it sounds really cool that i don't have to pass things down through props if i have it in context but in order to do we need to wrap our whole next.js app inside the provider set the provider equal to parentheses and it's going to take in children and here we'll do the arrow function and that should be it for now the next the next thing that's important is going to be this return right here okay it doesn't need those parentheses but this return does need to return spotify context dot provider and if i close this off it should look like this and just to show you guys in between the provider this is where the children will go the key thing all right if i format it now this is the same thing just formatted key thing is within the provider though if i hit enter not erase it hit enter boom i want to add a attribute of the provider and it's going to be value whatever i put in value right here is going to be global meaning i can call it from anywhere just like in player control so if i say something like i don't know song right in player controls if i put my context and use it i can grab songs from there if i set it up here so let's leave it blank for now and it starts to make sense once i create some state variables for you guys but that's what you want to set up and it should be like curly bracket like this perfect awesome so the spotify provider is done we're gonna need to hop into the app and wrap it there underscore app so we should be here back in underscore app and you can see we have the wallet connection provider what we want to do now is come below this required they import the spotify provider and you can see the suggestion from our contacts folder okay and what we want to do is the same thing like we did here within the wallet connection we'll say spotify provider and in between the spotify provider we'll put the app so you can see the provider wraps this which wraps this app is within all of that so if you do this we can utilize use context understand cool so now we can start fleshing out our context.js okay so the first thing i'll do is set up a couple states here so let's say const array equals each state and there's a lot of states that we want to keep track of there's about three six so let's make six copy paste three four five six okay what i'll do next is explain what the purpose of each variable is as i go this first one is going to be called the current song it's self-explanatory i want to keep track of what is the current song that is playing so we're going to say current song for this and the initial state of current song should be an empty object because each song is going to be held in an object next i want to have state variable called is plane this is like the toggle or the flag that checks if something is playing like the show music upload music model is playing is going to be true or false so that's going to be set as false right so is something playing right now by default no nothing should be playing unless you want to set it to autoplay which you would then set the initial safe to true okay from there we could do is paused right that's another state we want to keep that set is right what should be the initial state now i'm giving it to you yep false okay cool so now there's another state called progress set progress is literally what it sounds like keeps track of the progress which we'll set to false they're essentially all flags that we want to mess around with we have volume here and it's going to be set volume default of that will be false as well all right so moving right along okay then we got time stamp uh not all of these might be used depending on what we have set up but i'll do this timestamp and this will be false as well okay cool all right so now that we have our states set up let's set up our player function so when thinking about our player functions the first thing i can think of is const pause right that's a function right so how do we implement pause functionality to our hacked what we could do is something like this set his pause is equal to true because if pause is true then it should be paused self-explanatory yeah but then how do we actually pause the player like i said javascript has a lot of that functionality set up we just have to call on what we need to do is a document dot query selector and then do quotes hashtag audioelement and it should grab that player and if we do a dot pause here it will pause the player okay and essentially this is just to keep track of the state if it is paused or not this is actually pausing so that's the pause how about play we want to make a function for play too so we can play music what we can do is document dot query selector again and how do we grab the audio element you just say audio then play right pretty simple i personally don't use this that much i learned this recently right that you could do all this with javascript so set is pause is false cool now this is the fun function it's called cons play on select and it's going to take in our first parameter which is a song and let me explain play on select real quick if you go back to our app log in if i were to click this song right here radiant vibes it should be playing that song so this it was really running as play on select okay so that's what's happening play on select is going to run a try catch block right you know what this is and it's just gonna be e and it shouldn't really be an error so for now we could just console. but in the try block though we can run document query selector once again document.query selector and let's get the audio element and we could say that source equal to song dot music url because that's going to be the music our url of the song object that we pass in i'm setting the source of the audio element to that alright that's what it means from there we also want to do a query selector right because after we set the song to the player we want to be playing the songs and you guys know how to play the song now all you got to do is this dot play okay and then after we start playing the song we can do a set current song to the song that we pass in makes sense and if we're playing a song set is paused should actually be false and i think that's it all right that's the play on select so another function i want to make if you look at our app once again is as the song plays we wanna be updating the progress so in order to do that we're going to need to make a function that converts seconds to minutes seconds to min right then we can say equals arrow function and it's going to take in a value all right this is actually an interview question how can we convert minutes to seconds if we do const minute is equal to math.round right whatever the value is divided by 60. so if it's if some how many seconds are in a minute right there is 60 seconds in every minute so we could divide that value by 60 to get the minute then we could also say let second equal math that round that value and get the modulus operator get 60 and from there we can say a second is going to be equal second right greater than or equal to 10 all right and all this is a ternary if the second is greater than or equal to 10 then we want to zero plus second then after that we can just return the minute right plus the second okay this should be in quotes there we go right because i don't want to update it every second it should just be like an increment then we can also update that progress right you have to make a whole separate function for that so this is going to be e it's going to take e and essentially we can do const underscore progress is equal to e dot target current time right slash e dot target dot duration and then we can do a set progress right that's another state to underscore progress dot to fixed 2 but basically set it to two decimal places and then times that by 100 to get the type of number we want cool so that's how you update progress next we want to do update the volume to change the volume we can do once again and with e it's going to be a try catch with the catch being eagen and for the catch i'll just do console.log e dot message cool so in the try the main part let's set the volume to a target type value and then we can get the query selector of the audio element and then to access the volume of that audio element it's just dot volume or dot volume yeah and we want to set it to equal p dot target already so essentially whenever i change it we're gonna update the audio volume to whatever range i click okay next we're gonna need another function const on progress change set this guy equal to e arrow then we can say cons underscore volume set that equal to e dot target dot value slash level 100 and then we can do document query selector once again pass in the audio then we can do current time and set that equal to underscore progress times the document query selector we want to get the duration here so to do that i have to write this whole thing out it's hashtag audioelement let's do an alt c cool audio element dot duration there's the duration all right so the progress times the duration is the should be the new current time okay so that's on progress change and we also need on volume change on volume same deal e arrow logic so again const volume all right this is actually this doesn't make sense it should be progress and this one should be const volume and that's going to be equal to he.target value divided by 100 and document.query selector let's grab our favorite element and let's get the volume by saying volume and setting that equal to the new volume all these functions are going to come together okay the next thing if you look if i request this it should play the next song in the array so that's going to be called a const play next it's actually fairly simple it's going to take in the songs and then we can say const id is equal to songs dot find index again there's actually multiple ways to do this right so if you come up with a way that's more efficient than mine i'd love to you guys to share it in the comments below you can do a value here value.account equal equal to the current song okay so that's the id and then if if the id of the current song as long as that length equal to i d plus one what should happen is we should go back to the beginning all right so basically if we're at the end it's the last song and i hit next right this is a check right here and it should reset it back to the first song so we can do a play on select here remember play on select is the function that will play a song that we pass in we're using that here so play on select the songs and the first song of the array is songs bracket zero dot account okay and then we can set the current song to the same thing so songs bracket zero yay okay and then we can just return to just exit but if it's not the last song it should just play the next song so how do we get the next song the bracket zero is the first song right we can play the next song really easily so you can say khan's next song is equal to songs bracket id plus one right that's literally incrementing the index to the next one and from there we can just do a play on select and do the next song account next song dot okay beautiful that wasn't so bad so that's the con to play next and now for the play previous right same kind of logic i could set that to songs and the array here and from there let's write const id equal to songs that find index right same thing value dot account is equal to current okay so now basically if this the id is equal to zero meaning we're at the we're at the very first song at the rear a right what should happen if i go back and it's the first song it should go to the last song in the ray right so if it wants to go on the last song we can do a play on select use that function and we can do songs and this is cool so how do you get the last item in the array you can just do songs dot length minus one that will guarantee always give you the last item in the array so after you got the last item in the array you can do that account okay and then set the current song to the same thing which i'll just copy perfect and then return but that's if it's the last of the first song but if it's just not the first song maybe it's the song in the middle or it is already the last song if you do previous song equals songs id and then how do we go back if we know how to go forward it's just minus one and then we can just do a play on select with previous song dot account you got it so let's play previous and yeah that's actually all the functions nice okay cool so that's all the functions we could do next is go to value and just pass in everything we need so there's a lot to pass in we did we just typed a lot so if you need to go back at all feel free to rewind and pause to get what you missed so we'll need to pass in is playing set is playing current song set current song is paused set is paused right we're passing all of the states play function pause function the update progress one the play on select on progress change on volume change on play next yep you also need play previous you can get timestamp you can get update volume i think we're almost done we have volume and last but not least oh yeah that was it so that's it right there once i pass that in my provider all of that will be global and again whenever i use it somewhere else we don't need to bring in everything just the ones we need so let's hit save and let's figure out where we're going to need this context but what that's all the context.js alrighty so with our context set up let's start using our context in all the places that we need so the first place i want to think of is index.js there is an audio right here and as you can see we have on volume change and on time update but where do we even get those functions from yeah so to get those functions we're going to import use context so let's import these contexts from react and if we import that hook we can then import spotify context so import spotify context and now we can use it right so this update volume and this update progress they can exist if i say const update progress and update and we can set that to use context and then to pass to use spotify context just pass it in here and now we have update progress and update volume and then they exist so we should be able to do that now let me hit save now the next place i can think of where we're going to use context is probably the header let's do a header and at the top of header like i just said we're going to import use context again not that one react and import spotify context okay and the only thing that we're going to need from the header is the current song so how do we just get current song from use context or spotify context you can just destructure it and say i use state to use context pass this in and say current song all ready then what we could do is not that go to where does it say album oh it's right here album where it says current song right now that we actually have it we can just say current song dot album so now it's all coming together the pieces were set up okay that's it for header let's see player controls is probably what's next let's go to player controls yeah this one's to need a lot so prepare for this one let's set up the player controls at the top we're going to need to import our hooks use context from react and then import spotify next then in here it's going to take in a couple things all right so like i was saying we're going to import a couple things to our player controls so let's just set up that object is equal to use context and in order to get stuff from our spotify context we have to pass in spotify contacts okay cool so i'm just gonna hit enter right here so now i can format it to list out a bunch of different things so what i'm gonna get is current song we're going to need is playing essentially we're going to take everything from the spotify context to use here volume on change on volume change sorry time stamp progress see play next we got play previous pervious previous we have is paused we have play pause and of course on on progress change and that should be it awesome so that was a lot of things that's essentially everything we wrote in the context right minus a couple things so you get started right away by using one of them i want to start using is playing and if you remember the initial state of is playing is false and it will become true when we play something so let me just show you what i mean if you open this up again select wallet log in we can see the player down below but we can set up a condition at the top here that essentially says if is playing all right if this it doesn't exist we're gonna return no okay and so you see it was gone and that's because if this is false we're gonna return no and you wouldn't see the player but don't worry i'll come back up when i hook up the front end so that when i click it it starts to play alrighty okay so we also have a variable called current song which is again a state that we kept track of that is going to represent what is the current song that it's on or playing so what we could do is set it up so we can just write current song so we could say current song dot title i'll hit save and let it refresh all right if we just comment this out so we don't see any title here that's because what's the initial state of current song empty object well again once we hook up the rest of it if i were to click this then it would take up that title okay so for now let me just comment this back in okay so looking at the top here the next thing i want to work on is volume and volume we could put inside of whereas it says speaker there you go cool so input right if you remember there's this little thing right here and you can't really see it because of the size of this but this is the volume right we should want to set that volume to a state so what we could do is say that the value of this range is going to equal volume okay that's not all we also want to do on change and on change we're going to have the e and we'll call on volume change so when there's a change in the range we're going to call on volume change okay see that should be it yep nice okay so the next one i want to do is timestamp so timestamp that's going to go somewhere over here let's find it aha so here is timestamp right here instead of 130 we're going to write just time stamp it's gonna be the timestamp of the song that it's on so if we're like one minute into the song that's gonna be the time stamp okay uh while we're here there's also a value that i wanna input right here and it's gonna be progress because we should see the progress bar go up so i'll put that as the volume the value okay and while we're here as well there's going to be an on change and that arm change is similar to volume right except this time it's going to be for on progress change all right yes awesome okay play next and play previous should be pretty obvious play next is going to be on the div with the one that has skip or next right here and always do is right on click on click and this right play next and pass in pass in songs and again uh songs doesn't exist just yet but once i set it up you're gonna understand what i mean oh and i just remembered as i was setting this up there needs to be a pause button so just let me show you what i mean before you comment this out for a second that's why i was looking funny there should be a pause button in between these two right so let's set that up all right so we could do is copy this paste it here instead say pause and say the alt is pause so now let's see what it takes that is okay let me just double check oh pause icon okay pause icon okay and this one that's the reason i left this blank is because there's actually a special thing that we could do here right what i want to do is say curly bracket right here and say is pause right that's the state right because when i pause something all right let me pause the icon so it stops yelling at me okay when i pause something i click this it should turn into the play icon yeah that makes sense so that's why i have it set up right here so what we could do is set up some conditional rendering to change that so we could say if let me just paste this out if is paused is true right if it is true what should what does it mean it means that we should have div class name oops [Music] with styles dot play icon and show we'll also add it on click here while we're here for the play button but more importantly it should have an image tag and that image tag should have the source of play rounded and an alt of quotes then have another closing div right here perfect and then try writing another ternary and to be honest this is actually not going to work what we do need is something like this except with the styles of pause icon style now it's coming together so if i say class name equal to styles dot play pause icon style add in on click to pause pause icon or website pause all right i think that's what it's called yep we can then image tag self close which has a source the pause icon and for the alt we can just say pause and then just close the div off we should be fine okay awesome look at that we got pause and play right so that's why we set it up later because now i could use this pause so that we can do conditional rendering all right now i just need oh i was in the middle of doing play previous right so this and line 63 for me for with the div that holds the previous image we want to make that clickable so if we make it clickable we can add it on click you can say e you can say play previous and pass in the songs array because the previous takes in an array and it's just gonna increment back so that is previous now let's take a look that everything is playing that's gonna be used here and bam there we go so that i know that was a lot but we used a lot of the functionality and gave this app a little bit of life all right cool then if i comment this out play pause play play plus awesome so that is it for player controls the next thing or next place that we want to use this is probably going to be in table row so with table row that if you remember that's going to hold all the songs and i want to be able to click the song and that's the song that's going to come up in the player so what function does that it's going to be play on select i believe so let's do import our use context so we can utilize it from react and then from there it's spotify context cool and coming at the top of table row we can now destructure what we want from you spotify or spotify context and we only need one thing and one thing only like i said it's play on select nice remember table row for every song in the array it's going to make a table row so there's two songs in the array so there's two table rows and the cool thing that we can do is on the tr right here we can add on click and essentially say to play on select and pass in song and i'll just play the song object so that's perfect everything that we did before is set up this fits in nicely okay all right so that should be it with updating all of our components with use context one thing i want to do real quick is come to the home page and for player controls it should also be taking in songs all right remember songs is the array of songs that we get uh right now it's static or the static two songs that we have and then from there go to player controls then we can destructure songs and now when i type in songs this does exist now so this should make more sense so it's going to play the previous songs from the array that we're passing in and play the next songs from the either way we're passing it perfect okay so i'm heading back to the home page because that should be it for updating our context one thing i want to do is go to player controls and this should also take in songs as a prop and if we do that we're gonna have to come back to player control and in the parentheses here the structure songs so it's perfect and now when i type in songs it doesn't make more sense that this exists now so what it's going to do is play the previous song in the array play the next song in theory awesome so looks like that is all set up now okay so with that done the app is pretty much done everybody so if we go to the website once again all right i want to show you guys what it would look like to play these songs because the only thing that's left to do is to utilize or create music like i said and fetch those songs instead of the static ones but for whatever reason you don't want to be using the songs on chain you guys want to use local songs on coming from your computer i'll show you guys how to play to use that right the way we have it set up if i were to click this it wouldn't work mostly because if i go to context go to play on select take a look at this query selector right here right i'm setting the audio element to be song that music url and that makes sense because on our solana playground that is the actual attribute of the music account but if you go to our songs.js i highlighted already but where is the url of the song no music url it's gonna be right here link okay so instead of music url we're gonna have to write song dot link all right and if i hit save here one thing i'm checking is you also wanna set is playing to true okay and then we're gonna have to log in again because we updated the context but now that we set this is playing to true and we set this to song.link let's see if it works first try hey look at that we're literally playing audio using javascript and it looks just like spotify we made spotify guys how awesome is that and you can see composite just as you want and you can see the icon come and change you can also just click on anywhere an app and it will skip to that part this is amazing so all i want to do now is let's see if our smart contract if we can use the functions from our smart contract and it works first try sounds good all right so i just reformatted my windows and all we want to do now is let's make use of this upload music and let's go ahead and put in the music url right again just a quick note music url isn't a loot youtube link or anything like that right i'm going to paste it right here you're going to see that it's this res.cloudenary.com all i did was upload my mp3 file onto a cloud hosting service right from there it's going to generate a link and it's just a reference to where i uploaded it in the cloud you can use whatever cloud service you want the main focus of this tutorial isn't that website it's about how to store stuff on the blockchain so use whatever you want for this i just use cloudinary if you did want to use it just go ahead and make an account and upload your files there got it so let's upload star searcher that's the name of the song it's pretty cool it's this nice low-fi beat let's go ahead and create new okay and then you see transaction may fail to confirm that's usually a bad sign so let's see what happens as an error let's hit approve a mute constraint was violated okay so that error tells me that something in the smart contract so let's go ahead and cancel that let's go into here and we can make this guy bigger let's see what's going on so i'm assuming it's somewhere in create function and it said a mute constraint was violated so something that should be that's that is put as mutable shouldn't be mutable so that's fine this is payer context player account probably somewhere in create music context so let's see what did i make mutable okay random key should be mutable yep that's going to be different every time authority should be mutable because that's going to be the signer who's ever paying which will be different system program that is going to be the same so this should not be mutable so that actually might be it so i made a change to the contract i don't have to redeploy make a brand new one i can keep this address right what i could do though is go ahead and hit build okay and now that it's done building we can just hit upgrade and it looks like we have enough solana that's one thing i do like about developing on selena is that we can upgrade our contracts instead of deploying a whole new contract in a new one imagine if you kept making mistakes and you had to redeploy and you couldn't upgrade it's going to be a lot of faulty contracts on the blockchain but i'm sure in the future as technology improves more and more contracts should be upgradable depending on the chain you're in perfect okay cool so you guys should know the next step after we upgrade we're going to have to export the idl cool then we can just click this and it should open on our bs code so let's move this around control a control c and then we're going to head over to our spotify.json alright oops control or alt z delete and then we're going to paste what we got from ideal boom hit save connects this guy out and we should be good to go all right so now moment of truth just to double check i'm going to click onto this guy ctrl j and let's start our terminal over once again awesome then we can hit refresh okay let's try this upload music the song is called star searcher and we can go ahead and paste create new fingers crossed hey look at that so again if you see this little price estimate and not transaction may fail to confirm there's a good chance that it'll work i want to get my hopes you know too high let's hit approve and let's see what happens prove the modal disappeared which means the rest of the function ran so the only thing that's left to do is let's check if that actually works so what i'll do next is head over to my home page oops not printing head over to the home page and remember we're using songs from the static json data i have we don't need that anymore our songs live on the blockchain right so we're going to get this array back in this huge state and one thing we're going to remember is we never used get songs as a quick refresher it's going to fetch all the music from the music on the pro on the sonata program so we're going to need to do is run a use effect to use it so let's say use effect right and i don't know i only want to run this once so the use effect what i want to do is get songs right from the smart contract and then after we get the songs we'll do a dot then we'll say take the what we get as a return which is going to be an array and then set the songs like so so let's hit save and also just console log what songs are all right we should see an array of one i'm gonna hit save yep so now it's gone that's okay though i'll hit inspect hit console hey look at that we're fetching songs right from our new spotify and then we also get this array of one i don't know if you guys can see that but take a look at this object here the keys and values are different there is an account key right when i open that account key up then we get the music url and title which is the music account that we set up cool so if that's the case we're gonna have to hop over to our context and fix it up right so again i changed it back you're gonna say song that music url right because it's not link anymore so change that on context.js go to your play on select go to where it says equal song that link and change it back to music url another thing is that even though we have songs let's go to home page we are passing it in playlists but the problem that i'm having is on playlist there's no table there's no table rows that are getting populated so let's go to playlist then oops keep printing so i'm going to playlist right the reason we don't see anything is because i'm mapping every song or a quote-unquote song is going to be an object that has the accounts key which holds the count so what we really want to do is go to our home page on our home page sorry go to our playlist component and see if i could just do a song dot account because that should hold the music stuff hey look at that star searcher we did lose the number of plays and the number of the timestamp that's just because if you go to table row now there is no title there's no artiste well there's a title but there's no artiste there's no plays and there's no song link so that's why it's going to see it blank if you did want to have those things this is just the simple bright version if you did want to make those more dynamic you would also store that in your music account on salon okay and you'd have to input all of it manually based on the way we have it set up now the last part that we need to do is see if we're able to play the song that we got from solana so fingers crossed there it is all right you guys can hear that awesome and you can even skip ahead let's go beautiful so that's it that's pretty much the app guys we are successfully able to pull the songs that we store on the solana chain the only thing that's left to do is deploy our app and make it live with digital ocean so let's go ahead and get that done all right so now that we're done with our app the next thing we want to do is like i said upload to digitalocean but before that let's push our code into a repository and if you used our cli tool you're going to notice that if you do a git push you're going to see of denied to your user fatal unable to access blah blah blah that's just because when you use the cli tool you're really just running a git clone of our spotify project so when you get cloned you don't own that repo so there is something that we can do what we could do is go to our browser right head over to github and all you have to do is make a new repo so if i go to your profile i go to repositories go to this repo that i set up right it's just a completely blank repo this is going to be the url without that repo so what we're going to do is just copy it head over to vs code and to change the remote origin you can say git remote set dash url origin 2 and then you're going to paste it boom all right should be connected because now if i do get push hey it worked right you could also do a git status right and we could see all the changes that we made since then so we were able to push to the repo let's see if it did anything boom there it is so the original contributor is david as you can see but now this is my repo and i'm gonna push my changes that i added to it so these are all the files that we edited all right we can do a git add dot to add all of them and we can do a git commit then we can say something like finished spotify clone again it's funny usually you push in between to save your changes but we're doing it all at the end and then we'll do a good push all right so keep in mind what you see here these are the commits from david but if i hit refresh boom right now it's me finished spotify clone that's all the stuff i added yeah pretty cool right so now we have our own repo called spotify blockchain the next thing i want to do is some setup before we move on okay and again like i said we're going to set up some things to get digital ocean right up and running go into your next config and in the next line after domains i have the code snippet save you're going to need to add this pieces of code right here okay then from there let's go to our package.json and we're going to need to write an export script and then for the export script i had a add a comma right here and it should look something like this this is the snippet of code that you'll need take a moment to pause and copy it right and there's one more thing under scripts right here just double check it's not here already okay it's going to be engines right node right there cool so take a moment take this and this export that's new i'm gonna hit save on both and that should be it all right what we want to do next is update our github so how do we do that you can just see we're gonna change we get status all right hit add dot commit dash m all right updated get push perfect so when we go to our github hit refresh now now i can see the update commit messages here awesome so now we're all set up to go for digitalocean so let's head over to digital digitalocean.com awesome let's sign in and again don't forget to sign up if you haven't already okay and to continue on if you guys don't know what digitalocean is or if you forgot from what i said earlier digitalocean is infrastructure as a service all that means is it will provide you with the actual cloud hardware right in english digitalocean runs and maintains a bunch of servers that we as developers can use and reprogram to how we want it so that means it can do a whole bunch of things in short as you can see on the left here there's apps droplets functions kubernetes databases that we can all utilize for whatever we need it can be public it could be private the main thing that we want to talk about today is how to host and deploy a static site using digitalocean so we're going to go into apps and right you're going to see their little shark here i love it his name is sami shark i believe as you can see it's pretty self-explanatory right they're gonna detect what our map needs to run then they're gonna build and deploy it for us so let's create an app and again we're using github so that's the cool feature is that you can connect it to github directly let's see manage access and let's give it access to my account install authorize okay we're greeted by sammy once again perfect so now it's going to load all the repositories from my github account and select one and if you remember the name of it it's not bts it should be under lance or maybe if i could type it up it's going to be spotify clone blockchains this one right here okay cool and also loads all the branches of your app right and for us we know it's going to be cli starter right that's just the branch name that we inherited from the original project so let's click that cool source directory yep it's there then we can do auto deploy this feature is really cool so every time you make an update to our repo the application will actually redeploy so we can go ahead and hit next cool then we can click on this button i believe we'll next do web service all right you want to edit this what we want is a static site right that's something you guys are more familiar with and then for build command we can run our script and just say yarn export pull okay so after we did yarn export and run that script we can just get back then from here we can hit next this looks pretty good to me there's no environment variables that we have to worry about next next perfect and again this is going to cost us 0 dollars because digital ocean provides us with some starter apps for free so let's hit create resource okay and said the app has been created now we can go ahead and go to build logs just take a look good so far running yarn install fetching packages ooh i see the done all it looks like i got all the assets ready okay uploading build cache build complete ooh it says deploying instead of building come on sammy hey right the light app is looks like it's live build complete this is the link this nice oyster app over here let's go ahead and click it aha login to access app that's a good sign we'll click on phantom hit connect and bam there we are guys this site is now live for us to click on and if i click again just for fun awesome take a look at that guys so this site is live you can go ahead and add this link to your portfolio you can send it to your friends like i always say and that's pretty much it guys i hope you enjoyed the video be on the lookout for our upcoming videos we have a lot in store for you guys so i'll see you guys in the next video peace

Channel: Clever Programmer

Views: 139,898

Keywords: cleverprogrammer, programming, developer, javascript, web development, coding, programmer, software developer, software development, react js, tutorial

Id: JbZPQJpfahI

Length: 207min 36sec (12456 seconds)

Published: Mon May 30 2022