Frontend Interaction With Cairo Smart Contract on Starknet

o [Music] okay okay so so what we want to do today right is front end integration front end integration so we written you know over the course of uh the training we Le about the Cairo we've WR the CYO as a programming language we've written smart Contra to how to deploy and you know other things like that so the question is now how do interact a smart contract so what what we know is that you know if you have a smart contract and you just deployed it so it's only a fellow NY person that will be able to interact with it using you know using the indexer or the what call or the block Explorer so but if you want the users to actually make use of the smart contract then you have to you have to um what's it called you have to provide for to it's just um just a noral interaction and so so this also since everyone here already has an idea about interacting with smart e so what I'm going to do is to give us you know um I'm just going to give us what we already know in the ethereum space equalent here so I'm going to give us what we already know in the ethereum space they equivalent here so on ethereum if you want to to impact with the smart contract so there are some things that you need number one you deploy the smart contract you need the AI of the contract right what is an AI anybody um application binary interface which we used to connect with the from the point end to the back end so that's what the back end GS in form of Jason we can just use it to speak with our front end just like API in too something similar so AI simply means um application binary interface right now so sorry I can't hear anything is that from my side it's not uh okay so on on ethereum you know we have what we call Ether JS right yes sir yes yes yes yes it's okay I hope everyone can see my screen so I'm trying to I don't let me just put read [Music] me so today's class what's this [Music] uh I that's pretty so since you know the people that we are talking to here they are not no to the word of integrating so we just look at um comparism between ethereum we are just going to bring our knowledge of ethereum we going to bring them to St right so on ethereum if want to connect we have what we call what API so in this case also we also have what ABI and what is API I cannot interf okay now we know that when you want to connect with the you know with the back or which is the the blockchain basically there is the protocol that you make use of right so the protocol is called the what we we have the Json RPC that's the medium of communication you know noral web noral you want communicate with what's it called with the back end you can use the HTTP right you can make use of the HTTP request the rest API but in this place we use what we call Json RPC now that Json RPC there's now an abstraction over it that you can make use of in we in in ethereum on ethereum you have connectors like it has GS right web GS web GS one third web GS right is it thir web GS or what then we have the we have right so we we have all these ones that you can make use of in order to connect to to the back end in stack net what do we have we have just one we have the stet the stack net GS you get now on we have what we call we have wag me right what is wag me going for connecting they use it with all these be and wag me is the provide connection interface for for etherum so in this place we have what we call the stet react this you don't even know me so St so we also have you know uh wallet connectors right on stocket on ethereum I now we have wallet connectors on E so we have what are theet we have we have right yes yes do you have we have connect we have so in stet Gs we have what do we have we have get um get stet we have get stack Nets and we also have stet we have this two so when we have all of this we are good to go so I you already know the kinds of the kinds of wet that we have in stet now you don't need to you don't have to be told what are the front what are the wallet that we have on stocket what bravs agent bra bra so um so agent are bravs okay so what we are going to do now is okay let's try to [Music] um let's try to what's it called let's try to boost up a a front end let's try to start with and I know there there are different way which you can you can do it so number one in fact showed you this is enough this is enough the class like with this one I that okay since you already know that in ethereum you want to do this you you need this you need this you need this and that so and I've given you what they equivalent in in stet then you are you are good to go so let me not leave it like that so let's let's do something so what are we going to do so let's say that we want to uh we want to create a front end and in the front end we want to make use of so uh we want to make use of like want to make it from start so what we are going to do is we are going to try to do it from start that is we are going to create a you know a next GS app and try to install everything on our own from start that's number one number two is now we are now going to explore the different um what's it called we're not going to explore the different uh templates that you can make use of to easily postra it so let's start with um with creating so in the one that I want to create the stack that we are going to use of course we are going the stack net JS is is a constant constant k then um stet JS we use the stack net ke so the reason we using that one is because that's mod we can use or get um the in fact they get stock net so it's that's that's all that's that's all okay so what we are going to do now is you know so so what is the name of our project what should you name it a a o s those are the first letter Nam of do you want to use of course you have to yes of course of course would you like to customize no all those ones they they in our dictionary so the first thing that we are going to do is so Qui e for for yeah for for okay so um created so B let me check okay so we all know what this means right nobody is here so um the first thing that we are going to do is you go to we go to the get stet this no the stet rather so let's go to the St and try to install that first so to install the get stet Kit you just have to do npm install so where is so in this place we say B add stet so how do we install it get started sorry out of curiosity don't mind me sir I see you using bone yes yeah but I don't know what it is ah you don't know one it's a JavaScript time this you can check okay [Music] so okay we still need to provid this so we that we've installed stack it so the next one that we going to install stack just so mpm is so for the latest so I would want us to use this this one with the latest features so that we don't uh we don't see any any error so mpm so that's going to be B add start at next okay we install that also um sorry okay sorry I need to I need to check some okay [Music] already have the stet k stet um stet ke and the stet GS right so uh what we going to do is let's let's try to connect to a particular let's try we going to set it up first [Music] I okay so what I'm actually looking for is the one that has uh the one that is going to give a provider what this ones they you have to you have to write a significant amount of code [Music] okay for all of them then we are going to use it so uh we are going to try to interact with a a contract so let me just look for one of the contracts that I've already deployed I'm going to look for one of the contracts that I've already deployed on stock next I have one here see contract I just [Music] wa okay so let's up with this so this is the contract I want to see if uh okay this one is a 2.4 actually see the we actually see the screen canot see my screen um I can only see St GS wait uh you should be able to see my screen now I can see it now you can see where am I that's sorry let me check again I'm trying to look for a um 2.6.4 contract let me just see transer [Music] why are all these contracts okay as a test to want to allow this one now it allows anyone to meet so anyone will able to me using this so the good thing about this is you know as it is a stet so you can go to the contract and also redeploy it um so so if you want to the contract address well the first thing that we need this is the contract address right this is the contract address so let me just come to our P here so in our page you can just cre uh the U folder inside the inside the source we can create the TOs and in this place let's just say contract do should make it Jon let's just make it so here we can see we can export constants so this one will be what contract address so this is the contract address then the next one the next information that we need is the ABI so this is the contract a so you just copy it so this is contract so we already have the ABI now let's go to what's it called let's go to stet GS and understand what are the things that you need to what are the things that we need to have if you want to interact with the contract so you know start this is the noral nor thing you can run it on the local node and you can also connect to so this is the way it is we have the stack net Network and then we have your right this is the stet network and this is your D so the the what connects stack net Network and your D is what stack GS is the bridge between your D and what stack which means that basically most of the things that want to do under front end we are going to it's going to require us to use use this St GS now in this St GS you know we have uh what we call we have provider and we have signer now anything any number one is that anything that requires writing to state is going to require what a signer do you get it's just like in in ethereum also you know we have use contract read and use contract right so for use contract read you can only use you can use what provider you don't need to add wallet to it but for anything that requires what signer then it's going to require um what's it called it's going to require a private key so which means that you have to be connected to the wallet so let's start with the account we have account and we have contract so if you want to deploy an account you can make use of what a provider or you want to deploy a a contract so both all the accounts here are what smart contracts so you can make use of this provider to interact with an account or to interact with a contract and we also have thiss now in thiss that's where you're going to see um Stu like maybe you want to convert from felt to string from string to F all those on like that you're going to find them here so you say that only provider object is talking directly to Network so your dab will talk mainly to account and contract objects so you define the provider with which network you want to work so we have S and objects contain mainly useful information for interacting so the contract object is mainly used to read the account so the contract is used to read from this thing while the account do uh it has wallet it can wallet as a way to pay fees to the network so the accounts we have contract and we have the accounts so contract is mainly for reading while accounts can be used for for writing and in that account also you are going to have you are going to have the signer in it so this one is now saying how do you how do you connect your network to to stet so you can make it of any of this the number one thing is for you to import the provider after you've imported the provider then you know the Prov you you can put in the sequencer we talked about the sequencer right so this sequencer here is for minutes this one is for G this one is for defet so you can do it for um you can do it for also so this J know the other client so we can do so this one is for test net then after you've done that you can now start um specific method some methods are available only if connected to a sequen some are available only if connected to a node that this is so for example you want to estimate the Fe of L1 to L2 you need to use a method that is available only in the sequencer so look at this provider that estimate estimate fee so connecting to an existing account so you can also import accounts from uh from stack net now when you are making use of accounts it has accounts they have what's it called they have uh private key so it will require you to make use of what of private key so we have provider new provider this is this constant private key this account address so you now that account new account is provider account address and what and private key so this is how you this how you create a new account you already know what the provider is you already created that then account address and so you can also create a contract yes so to connect to a deployed contract you don't need this we've already got the so if you want to get what it called um the ABI you can make use of this to get your ABI directly however this is not ideal so the reason it is not ideal is because if you are getting your ABI directly from the provider every time every time every time it means you're going to be giving the provider load you know the out that you using is going to be overloading it so that's the reason it is not IDE to be using to be using that okay so this is how to connect to a contract so we have new contract you can see here you have the ABI the address and the what and the provider the ABI the address and the provider so you want to interact with your contract you have you have your DB you have the contract so if you want to um read anything read you can call the contract using the provider however if you want to write you want to call or you want to invoke you have to make use of what you have to make use of an account get you have to make of an account and um so this is like these an example of how to make use of how to use normal provider St stuff so but if you want to write you can see that in this case now you just connected the contract that you've created is it only requires a provider but if you want to write so this one is write to contract memory so you can see this one now right memory so let's let's do some let's do some practicals now you know for for this now one thing that I also prefer to use is that you know because this one now because this it is um out do I call it because this one what we are doing here now we are using a an app router right we are using an app router so I'm just going to give you one one small tip so I'm just going to give you one small tip you know we have different types of St management uh this in in react so the State Management that I now that I'm also like learning now so we are just going to use it together so we are going to use the zard so I think it's it should be easy to use because of a documation so if you make mistake you know I think is it Z yeah so we are just going to install the now why am I using this Z so the reason I'm using this Z here is because it is it gives you the functionality of you know instead of using um create context uh use context and all those stuff like that instead of using that if you use Z you don't need to create context but you can you don't need to create context like wrap context around all your react file but you can still make use of you can create Hooks and and just use them so that's the reason I feel that this this Mi sense you guys don't mind me I like using you can see I'm using B I'm also using Z so all right so we have hello sir yes yeah um if you if you on your vs code the your code s is um is Tiny you can zoom it so that you can see you know stuff that are going on there yeah this okay how about all right thank you sir it's okay now thank you this okay so so the way it works is um in this one you just going to create the store so I just come to I use this so in this Cas I just create the stop and let me name this stocket STS or stock St then let I'm going to copy this so in this case now you know this this TPT supposed to indicate yeah this place yeah that's good so I'm just going to copy this so in this case now you see we have import create Zan type store we have so this is a state variable this is uh what it called This is a this is a function and all all other things like that so let's see what we can what we can do with this so I think we are going to just name this Darkness store so in the startet store what are the things that we need number one we need a provider and we need a we need a provider and we need an account right so we need something to we need a provider the universal provider and we also need so we can just so we can import this okay we need a provider we need an account but this account we are going to get it somewhere else Co ni C okay so when we have provider like this we can actually have what it called set also something like like something like this but we really don't we really don't need it do we because we can just [Music] um use stocket store and yeah so the provide the provider here we just uh so let's go to so we are just going to use this but our own this is now uh the SN wait where is this Conant coming from the con should be from the okay so this one should be okay what's this what's your what's what's provider okay another thing that we can just do instead of all all of those so we can just use this one you can just use this and we just make it of an RPC update inut so we just make of ANC so to get the RPC we are going to use wager the free V R RPC W online so there is a free RPC okay so this is it so just use this for adrenal okay so we we already have this now what this set provider is going to do is just going to this one is going to give us uh what's it called you can use this to set you want to set the uh the provider somewhere else so you can make use of this to provide another provider that would be that would be that so let's export this here so which means that with this one that we have here now let's we can just go to let's say in the page let's remove all this on okay let's just H one let's see how it look like hello from right so we can just um so if you are going to be using that uh provider so we need to set these client right there we see con provider so we are using the N right now we can then we can then bring in uh what it called those uh the contract we cannot view the contract so we know that so for the contract we have AB contract [Music] ABI are you supposed to be the [Music] this what um is [Music] no contract yeah so because that's not the only thing there so I think we also have the contract address contract address so we put the contract address here too and then the provider right okay so we have this now can see ites us this if we are going to be using a syn then we have to put um what it called a syn in this place right so this balance that we now have here I can now so balance of contract no no no no no not balance of contract in fact that's not what we want let's get the name of the contract AB let's get the name first so let's let's check that out hey I wait wait wait wait or is it because of their SN okay so I think if you are going to use there is already layout here now you should be able to use our syn in a in this okay we have to use uh what it called I think you can actually create another as sync function like another function on it own and a same function it can handle that it can like um you can create an like an another point from an an function is only in server component that's it's saying that you can only ER as s or is not yet supported in client comp really component this Isa this let's let's check it out if this will work let's add I think yeah I think let let's see so because of this so because of this one now canot use um it needs a use client meanwhile I cannot work in use client so uh um so the what we can do here in that case is okay let's let's remove this first so this one is since this is too simple provider okay so let's check this out what's the problem again expected indentation where where where where exper def is [Music] can I read property of undefined so let's check the contract the name why are you so the thing is there is possibility of this one being undefined cannot show property of I need to find [Music] that's right see you okay so I supposed to show supposed to just work okay here should just use we might have to call all since we have these cents here then it means we can why why not create a use Effect one client to we still have to REM later okay yes so let's see name C nothing [Music] there contract why is name okay let's check the this is reading the contract instance we won't see the data K is now this supposed to work like f okay okay so [Music] let something provider so let's see if this works this two is supposed to work I'm thinking maybe there's something wrong kid CH suppos to work now for Stream So something with the provider something is wrong with the provider let's you do it should be same thing right [Music] Toth is [Music] okay is is now that's sh okay where the is getet [Music] might suppos to work [Music] oh API limit exceeded wow so what we have to do is get I think it's possible to get an Al RPC or an INF RPC so what is wrong is I think the limit of the of the is is exceeded so that's the reason so let me try to get um and uh I just see for for so I'm going to be using the INF how it is connected sh okay so let's try this so working was because of let's see sh okay so let's try this for contract address not found okay [Music] b g contract not found this oh this is main next [Music] 64 by guys ch [Music] that's oh unexpected non white character after this one is most likely because of this oh oh oh oh okay I think I get it's it's oh just some one is good let just for for J oh for [Music] 6 look for looking [Music] transfer very okay I think another thing that we can do is we should copy this contract here place and you say get class get class [Music] okay this one is limited so we are going to use our own this is realistic okay ah same error unexpected looking this is main wow are we making the same are making the same error okay this works so I guess there's an error somewhere let's remove this first is SE the P let's now look this place contract class this is the AI for s ame error okay so have same no I guess use another contract let's look for another contract contract on let me let's try this pleas glass Contra that Miss let try this so why name is function okay let's look for the functionals in this one think this was it contracts that's it now okay let's try first okay um so I think we need to First [Music] cons let's see what we have there eloa there's a function called get name try that one [Music] hey pleas not is the contract address let's check [Music] so why is it not showing something there supposed to be a cons [Music] maybe May so maybe what we would do is to revert back into this C or another option we use that after this [Music] so right e okay is showing there it's this place now no no no no no not sh okay so it is showing this now the problem is we now we need um we need to convert like this one now is in felt so we need to convert from felt to string we need to convert from to string so um [Music] o [Music] okay the name of this this so go what's this I don't need to so this be fa to strange so F to Str he so let's check what again yeah said I was going to is that instead of this actually of like let just sorry okay instead of putting all of this in this place instead of putting all of this in this list so we can actually so since we already so we can actually just build this uh in this store so we can have let's say contract contract so if we have that [Music] so this [Music] provider this provider is actually one ini [Music] provid okay so this one now this contract here you can use it in this page here so let's say instead of using this use effect and this so we should be able to say that wait miss it our wait contract equals to this so This AR is the problem so which means instead of using our weight is let's see let's see that okay it works so which means that with this now with this now we've already like we already have the the contract so what are the other things that we can get from what are the other can so you want to get the balance of someone so we can use this to get it but no let's check let's check the contract again first to know can do on it contracts this so you want to use get symbol [Music] so we are not doing this so let's get symbol symbol so that would be contract s okay get get symbol so when it gets the symbol it's also going to convert that so let's check then we can get decimals also okay I don't see to to the s Okay so we've read symbol what again is not let me just put this here so let's get decimal let's read this decimal [Music] so we already know that decimal is going to be a number normal right so there's no need of there's no need of converting this hey is it say fa let's check okay I think there is something with this one the qu is not even sh wait okay I need to report this I think it's uh that liting or something get this so the next thing that we are not going to look at the next one that we are not going to where's the song coming from so all these ones that we've done now all these ones they are um they read contracts so what if you want to do a right contract what if you want to do a right contract so if want to do a right contract we would need so I'm just going to look at I'm I'm going to show us how to um integrate what con SS so where is stock net eats yeah J so the way this one works is we have connect and disconnect from so to establish a wallet connection you're going to do this wallet equ connect to is an example so you can have connect wallets which is going to do all of this so in our own this thing here we can have connect wallet let's say we have connect wallet here yeah just said so what this one does is when you call this let me I'm going to copy this and put it here first so this connect is coming from kit so if so set connection so here we need um connection so in this place you can just set [Music] connection but now let's make it any we have address address then so we have provider and we have selected address so let's have set address okay this and this so address okay let's just this [Music] hey [Music] set provider okay [Music] so we have connect wallet here so let's try let's try something um on the page on the page so you see it's so we going to have a but here yeah so we have this so let's see what it gives us so we should click on it nothing oh we it's supposed to call this [Music] cck 10 in this place let's see are connect for you okay [Music] so I think what was going to happen here is that instead of um so since we have all the set set connection set address set connection okay set address so we can also have we have set [Music] provider so we just have where is it so in this page here instead of this we have this here from here now all these set connection they now come from all this set connection will now come [Music] from set connection is going to come from here so set con address yes so let's let's see what that gives us next oh oh oh oh wa okay there is no that's J oh expecting that to keep a mod actually but it's not let's see for 10 so I have two theories on why that is not working one of it is that is probably because I don't think um there is a stocket wallet on the browser that I'm using Okay so probably because there is no uh let me check sit connection okay connect wallet disconnect okay so I think um this is is one aspect of it there are some there are some things that we are not able to do let's use the template of of the stet react so I believe that with that okay so to start yes is so we are going to so we are going to move to back then yeah we say [Music] so let's just soings so this is to most of for us then we should be able to continue from there and for for okay so C me then so I need to first then [Music] okay so this already has so we can just includ another chain here which is the SE that we are using so you go to so this one you can choose so let's say we are connecting agent so for this one just like I have mentioned yeah there is no wallet there's no wallet on this browser on this browser here I guess there is a there is wallet in this one yeah there in this other one so I'm going to look for a way to okay let yeah so there is wet in this one so I can connect to Bravo I can connect to agent yeah so what I'm going to try to do now is Let's uh let's see I want to call you just copy from this place what do I want to copy yeah we need this let's copy this VI first so we just copy it [Music] thise so I guess already have have this then contract also we already have contract then we can also just copy this this our store see that that's nice so if we should copy our store and we paste it here let's see with we just works then in our page here let's see if we can just do some stuff here okay let's let's try something this page that we have here let's copy the old page then go to we going to create new let say let's use from and paste paste it here right so we've not installed stocket it here so just install it what what was it St oh St net sh okay so let's let's let's try it let's see if it will just work we still have to fix some oh we not we not had um zard Z you is let's [Music] see okay so this this just works let's check this okay this is still not working yet okay let's check something else what if what was that just so okay oh you are supposed to even do it from here that doesn't have not this one for dark [Music] and then start and connect those this one so a [Music] just is it's page problem oh what this let all right okay for con s Jack next so use that yeah my pH so when we are using accounts if you're going to connect to if you're going to connect to what it called we are going to connect to this uh um to the contract using the account so we are going to so in fact instead of in this place we can use it there you can use it store store yeah so from here use the accounts then so we can now use this account in this place instead of provider so if you have accounts in this place you don't even need this for for [Music] so since us that cons now contract for so we contract so you can use contract. call so this Contra do now is going to have uh the method that you want to call then the argument so let's look at the contract I think there is me function in the contract so in the right call like this okay let's try this [Music] transfer so call transfer we have recipient and amount [Music] want to go transfer we have recient and amount let's say that the amount is so I just do I use my and yeah so I'm going to connect my so this one now [Music] so so see what Happ [Music] okay it's not allowing there bring it here for okay so let's try this again Che you cannot convert to a big in so let me put a little okay so account next transfer why is the m not working that's the problem [Music] J I um [Music] h for [Music] okay so I don't know the reason the wallets are not working [Music] that [Music] okay for okay I don't know the reason the wallets are not popping up so this supposed to the that's for [Music] let's still sorry so I don't know the reason the wallets are not fing up know maybe I'm going to look for a way to fix that and send you guys the code [Music] but you don't have to stop here now I think wallet doesn't pop up like I think because you connected before why not popping off what so you have I think because you've connected before that's why it's not poing off like in this place St is disconnected okay the thing is when you click on connect now because you've connected before it just connect automatically I think you need to remove it from your connected yes yes yes yes that's that's another thing but then so it means someone will have to create [Music] well anyhow that it is I'm going to look for a way to fix it and yeah I'm going to send you guys the um the code of the fixed fion so we are going to stop here thanks for joining the class thank you sir than you thank