 Welcome to our workshop about building the apps like a pro and my name is Sina Bronisiewska and I work for Trufida and These are my colleagues, Michal, Bartek and Przemek. They will help me today So if you have any questions or problems, let them know. They will help you for sure. All right So maybe let's start from what the app is Anyone wants to answer this question. What is the app? The centralized application Okay, can I have a second mic so we can handle questions? Where is it? Second one? A D app is an application that rather runs on a centralized server, runs on a decentralized network like Ethereum or NL2 Yeah, kinda. So is it like UI for decentralized system? Maybe application that uses the centralized system or maybe application that uses smart contracts and blockchain And maybe an application that has no central server So like it's hard to define like find one simple definition of the centralized application But apparently it's very easy to build. We've used that of course so Let's see first how to build the centralized application the app We have different Ethereum API providers like alchemy and infura and we can connect them, right? So we can get this connection to blockchain by them And we have different blockchain calls two of them actually read that are totally free and you only Read their state of the blockchain While the second one a right type of calls and it costs gas fee It requires wallet connection. Additionally, it changes the state of the blockchain. That's why it needs private key and So these are the examples of such blockchain calls first is read and Here we just check the balance of the this address and the second one right Right call we just sent transaction to the to the address. So that's why we need private key and the wallet Let's talk about blockchain state for a second It's all about mining blocks, right and each new block is from 10 to 20 seconds So each new block is around 15 seconds or something like that and the state might change So each time we need to check whether the new block didn't change our our state So our application needs to be updated very often. Ideally each new block. We should update our state in the application Right. I hope you agree with me Additionally, the app is very complex like typical application interacts with a lot of smart contracts a lot Which is let's say X it might be 50 it might be 100 and it needs to update state very often Frequently ideally each new block. So it's like X calls per 50 30 seconds So that's a lot Let's review leading KPI provider costs and you can see that it costs a lot If you want to optimize your application, you can pay up to $1,000 per month if you want to optimize your application if you have too many smart contracts interactions But we have something like multicoll and it helps us Aggregate it's like actually it's smart contract that helps us Aggregate all these different calls into one single single request So there is no problems with optimization, right? So we can just use this smart contract It has this function aggregate so we can But all these calls in my request Additionally, we have guarantee that all these values we get from from the blockchain will will be from the same block Which then we will have state consistency, which is great So this is how it looks like with without and with multicoll So without we have this a lot of different requests to different smart contracts But with multicoll we have only one call to multicoll and then multicoll calls all these different smart contracts for us So let's summarize the app requirements we have we should have like request We should like update our state ideally each new block, right? We should have consistent state. So all the data should be taken from the same block Additionally, we should like optimize our app. So we want spam API with a lot of requests But don't worry use that does it all so you don't have to worry about all these different multicolls and Updating state each new block. It's everything built in use that So let's go to Examples of code how to use use that so here We have an example how to connect to a network because we need to have like wallet connection to Interact with smart contracts, right? So see how simple is that we just get we have this use itters function that we can get from used up and it returns us activate browser wallet, which is a function and when we call this function we have our like Like used up will ask Meta mask to connect to to your to your application. So it's that easy in I mean in this few lines You can connect to your wallets With MetaMask or any other wallet and in this case it's like browser wallet So it's MetaMask, but yeah and additionally this account. It's just the address that is currently connected So that's really simple It's a balance. This is how we can get it Another function use itter balance and it gets account Which is the address you want to check the address the balance and then that's it And the the nice thing is that this Itter balance you get from use itter balance function will be like of course will be put in the Multicolour call so it will be only one call each new hook you use from used up Will generate only one call each new block and the state will be updated on each new block. So that's Additionally really cool Additionally, we have another example of nice helper function, which is use token balance And this is how you can use it. You just pass their address of token you would like to check the balance on and then they account address that you would like to check this balance account and You get updated each on each new block die balance in this case But you need to remember about one thing that is really important here because we need to wrap your application with the app provider That we also provide as used up and it needs configuration for example here We just passed read-only chain ID so the chains that we would like to support in read-only mode and read-only URLs For example our own in FURA or alchemy or any other API provider URL so we can support anything and you need to pass this conflict to the app provider So that is the only requirement and only then inside of this app. You can use any hook we provide from used up Additionally we support multi-layer multi-chain Multi-chain so you can for example here. We have this switching networks function So you just import switch network and each and this function will ask your Wallet to switch network for example in this case We want to send transaction, but we want to send this transaction only if we have we are on main net So in this case we check whether the chain current chain ID current in wallet chain ID Is not main net and if it's not then we switch we and We want to enforce on the user to switch network and this is how it can be done with used up and This is how we can check for example in read-only mode on different chains For example itter balance so for each hook we provide you can add additional parameter Which is chain ID and an object that gets chain ID and this is how you can get for example main net arbitrum and zk sync balance in One place and this is super easy to use All right So that's it from theory and now we can go to some practice and practical stuff. We can start coding So what we are going to do today Is we want to create an application that will interact with Go early usdc that is deployed there and will use used up and all these different. It's different Features so these are the requirements that in my opinion this app should have but if you feel like you would like to do something else Feel free to do that. So in my opinion, we should first start with connecting our wallet Right, so we should have like this button connect and then connect with metamask or any other wallet Then we would like to display our itter balance and to prove you that it can be multi-chain We can do it on girly and girly optimism So let's display two different balances then let's Display girly usdc balance as well our balance, of course, then Probably it will be zero. So let's make this application to mint ourselves some usdc And then transfer this girly usdc to anyone. Maybe it could be your friend next to you sitting next to you Yeah, so that's what in my opinion we could today today do today. So, yeah, and we prepared two tracks for you You can scan this QR code and go to code sandbox where is prepared the boilerplate so you can start coding With us and we have two different tracks First one is easy tracks. So we are going to live code with you. So I will be doing all these different steps and You can follow me and of course we have here Bartek, Przemeck and me how who will help you if you get lost and Additionally, we have protrack. So you can do it yourself. We have here the requirements displayed. So you will know what to do Something happened. So, okay. Now you should see Great and Yeah, if you get lost you can switch from one track to the other So if you go to protrack and you decide, yeah, no, I I can't do that Can't do this and I would like to switch to easy track Someone from my colleagues will help you to get up to speed with us and then you can continue Additionally, you can join our telegram group. And if you don't have a girly girly it if on your account we can send you Miho prepared a script that will send you automatically some Girly if so, yeah, go to this telegram group if you don't have a girly if or you can use of course faucet girly faucet But yeah, it will be easier for you to just go to this telegram group send your address and we'll send you Send you girly if Right and additionally we have something super extra for you Because there is a chance to win alleged nano s so We decided that okay, so anyone who creates the application with my help or Yourself then There will be a chance like one like last ten minutes of their workshop We are going to allow you to present your solution and how you did that and the best the most interesting application will win Ledger nano Right. How does it sound? I? Hope cool. Of course, we won't get you the real ledger will give you a gift card Right because it's not safe to get your ledger from anyone, right? You know that I hope All right, so yeah Not this one. All right, so let's go back to and this slide Yes, so Any questions so far? Everything's clear Okay, we have one question there. I Can pass your mic? Hello, I suppose that yet, but this work with all the scaffolding tools like a create react app and all that kind of stuff I Mean it's it's working automatically with create react up and yeah, yeah, okay That's all. Thank you. Sure Yeah, so for this workshop for workshop. We prepared like a code sandbox, but you can use it to create the react up. Yeah Right And any other questions maybe? All right, so if there are no questions, let's go to coding right now. So Who choose the pro track? Raise your hands One two three four five. Okay. There are something all right and who is going to code with me on easy track Great perfect. So let's go talk. All right, let me make it Bigger Yeah, so did you manage to scan the QR codes are you on the same page as I am That's important because this is where we are going to work together Do you have it? All right, so you can scan it again. So this link leads you to code sandbox and There are some ready components that we are going to use and this is All right, so are you with me on this page? Did you manage to love it? I know the internet connection is really bad here and They're on the wall. There is like Password to another Wi-Fi password for workshop Specifically, so it might be useful for you to use that one or maybe your your mobile one will be fine as well All right guys, so if you have any questions, just raise your hands and We'll help you. All right. So are we ready to start coding? I Hope so. All right. So if you are with me Then let's go to app.js and this is where we are going to start our coding Actually, let's go to index.js and this is where we are going to start All right, so I Hope you remember what I said before but always Before we start using used up we need to start with wrapping our application in the app provider And in my opinion index.js is the perfect place to start and to do that. So let's first Here Import the app provider and you can do it like this from used up Not like this like this. Can you make the phone bigger? That was the question. Okay. Okay. Is it better now? Question there. Is it better? Can you see it? Great. All right, so we can import the app provider from used up At used up slash core and this is the exact name All right, and now as you remember I told you that we need to create configuration file configuration object for that So let's name it config as always and it needs to be an object and What we need there is like read only Chain ID It might be for example, let's start maybe with yeah go early. Let's import Chain ID from used up as well So we can use it Chain ID dot as you can see used up supports a lot of different chains And go early is one of them Great. So we have this config file Ready for now? You hope so? Yeah, and also. Yeah, let's add also read only URLs and That's another object with and keys are the Chain ID Chain ID actually chain ID. So in this case, let's use clearly as well. And then we can use Get the default provider function from That we can import from itters. I hope you know itters library. It's a great library if you use it then I hope you like it and This is how we can create this read only URL from For configuration All right, and now we have our config so we can pass it to the app provider. So first let's wrap our application We can do it here with the app provider Like this and pass their config always remember to close tax All right, so this is how it should look like Everyone follows Is everything clear? nice so now We have this our app wrapped with the app provider and now we can go to our app and actually start coding So as I said before let's start from the connection of our wallet and how we can do that First we need to import use itters function and We can do it like this from Used up core as well because this is our core function and it you will see in the future that it returns a lot of different useful helpers functions and one of it is actually Activate browser wallet Function and we of course need to call this function. We can add here a button With on click function will just call this activate browser wallet function, right? Let's display connect Text on this button and voila you can see this button and when we click on it It should ask our metamask to connect. I know the font is really small, but yeah And as you can see it works and that was only one One line of code actually or two lines But okay, how can I know that it worked that I'm connected to this application? Of course, I should display my address right that address of the account that I'm I connected So let's import account and that's and let's display it and This is how we can do that We need to make sure that it's this account exists because then it will be just undefined and as you can see We can see actually the address. So it worked It worked well. All right. So now Let's display my balance and How we can do that? We can just simply use another great function So maybe let's first import this function so you won't get lost Again, we import this function from used up course. So we can do it after comma Use it error balance. It's called Alright, and now let's just use this function. Let's call this either balance and then use This function and let's pass there my address And let's display balance Maybe let's add New line. All right, we have an error and you know how to fix that maybe and he has an idea Yeah, so Yeah, that's just an object. So what's used up like use either balance Returns in this function big number exactly. That's how we should just pass it like make it Yeah, this string right for example here in this case, let's start with string and Now It should work Yeah, let's wait for a second. Yeah, so used up will return Big number so In this case, we can parse it to string but I prefer to not use like string and you will see why Because it will display a lot of different zeros. Okay, let's see why it's not working Let's try to uncomment it Comment it and then see. Yeah, it's probably the internet Yeah, I use my own Yeah already But too many people in one building and that's how it ends. All right, let's wait for a second But yeah, so what we will see on the screen when we parse Itterban as a string We'll see some number with 18 zeros right because that's a big number and That's why we shouldn't display such thing to user because they will get like, you know They will see what's happens. What happening why do I have so many itters, right? So Normally, I really like to use itters functions for that And This is how you can get this function So I always use utils parse itter Not format itters. Sorry. I always confuse these two. All right, and this is how I always like to display balance Of it are of course for different tokens You like to you would like to use probably format units and then pass as the second argument and number of decimals that this token used Workshop Wi-Fi you suggest Maybe something is happening. Oh nice. All right, let's connect again Again click nice. All right, and we display account And now let's try to display itter balance But still the internet. All right. Can you see it? The balance nice All right, so now maybe we could Display balance on optimism clearly, right? Because we can do that as well At first we would need to add control configuration file, right? All right, so let's not do that right now Let's let's go to the next step and when we have time we can go back to Optimism All right, so as I said before we would like to create an application to interact with us DC that is deployed on Gurley and You can find this address of this USDC in the addresses.js file and if you Are a smart contract developer and you know how to or maybe not you are a developer But you know how to read the code of smart contract You will see that this this contract has open open mint function. So anyone can mean Any amount of token they want so we are going to use this test USDC for this workshop purpose. All right But first let's just display Of our address in this USDC. Is there any problem and you need maybe help? So anyone need help Yeah, if you are coding and you get lost or you would like some help or you are you know on protract and you need help Bartek Michal could you handle that question and maybe you see that it's easy But you haven't started with us and you would like to join us then also raise your hand and we are going to help you With anything. All right Yeah, I can see you someone will come to you in a second because Yeah index.js and this is how it looks Yeah, anyone needs some help raise your hand and Przemeck is free for some help The person in the back You need help Przemeck could you help there? Yeah, the address of the smart contract is in the file addresses.js and you have it in the sandbox It's there So you can find it on the left side No, no, no utils is imported from itters itters. Yeah itters. It's great library. I love itters. Seriously All right guys, can we move on Okay, I'll wait a few seconds there Bartek we had the question there. No, it's fine Okay address, okay anyone needs help raise your hand Bartek is free and he can help you Yeah index.js Here you have it So we imported the app provider and chain ID from used up core and additionally get default provider from itters All right Perfect So let's go back to app.js and Now let's display usdc Girl usdc balance of my account. It's probably zero, but I would be Surprised if it wasn't zero All right, so now let's start from importing the depth function The function is called use token balance written like that. All right And now let's just get it from blog Like this and we need to and here as you can see we There are two arguments first is token address. So we can use the address that I have here It's called usdc and I export it. So we can just import like this import usdc from Addresses Perfect. So now we have the address of usdc and we can pass it as an first argument of the use token balance function and the second argument is my account address like this All right, and now let's just simple Display this balance on our UI Let's add another Enter and That just displayed But still this is a big number. So we need to first let's start with making it it string. All right, let's Wait a second and yeah, we have one big zero all right So now we can do something more difficult and we can call like send a transaction to usdc and we can mint our Some usdc token All right, and this I hope I remember the syntax for it, but we'll definitely will need to use use contract function Function All right, and this is how you can import it from used up core as well All right, and this function is really interesting and it gets Three different arguments and these are more advanced. So I hope you won't get lost and if you get lost will help you With that so this function will return Send function Like that so we can get it like that because it's an object and one of the Parameters it like returns Values are is send function and this is the send function we will call So just send this transaction And we can use it like that. So use contract function and you can see and that will need contract contract function name and What else options? All right, so let's start with contract because that's Tough to create All right, so contract is an abstract of this contract. So let's name it usdc and It will be in contract that if you know eaters library, you will know this contract Let's import maybe Let's import this contract from eaters first and we need to create this contract Again, what it needs first it needs this address So we can just simply pass usdc and the address and then we need Contract interface and we need to create it So let's import it from eaters as well. And this is how you can do that. It's hidden in providers Interface not not providers, but utils sorry utils not interface and That's an object. So we need to create it and Let's see what it needs. It needs fragments of ABI so in this case for usdc will we are going to need only mint functions So for now, let's just create it by hand. So it's just an array of Signatures of this functions. So let's name. Let's create it like that. It will get Address and value which is you into five six and this is Interface we need for this Contract Are you guys following? Is it fine? All right? So what else do we need for this contract? Address interface should be it All right. So now we can use this usdc contract To get this send function All right, what is the second argument we need here? It's function name. So we can just use this mint function. So here We just need to pass the name of the function we want to use So if we want to use more functions, then we can just add more functions to the interface We created before right like send and like in production you would probably need to have that, you know the Interface that was the result of compilation of your smart contract So you want to type each function separately, but for this workshop, we are just like, you know using this simpler version alright and now Actually, that's it and now we can try to use this function and see if it works Yeah, give me one second. Maybe let me make this interface Like this. Can you see it now? Is it better? Nice suggestion. Thank you. All right guys any questions so far. Anyone needs help Raise your hand And the guys here can help you. All right So now that Come again. Oh question I'll pass you like here go my man. It's is the Is the ethers provide I saw you you put ethers providers at Import, but no, it's not necessary. Okay. It's not necessary. That's that's that's all. Yeah, sorry That was my bad All right, we will just need to use from meters. All right, and now I hope it works All right, so now we want to trigger this transaction somehow and we can do it by adding additional button like this button with texts and sent message, right? All right, so I Know this is not the prettiest application you ever seen All right, so create let's create another button and here Let's add like this All right, and what we would like to do on click we want to actually trigger this send So send this transaction and Let's do it like this because we need to pass argument to this function and If you know your C20 inter is standard, you know that mint function gets to arguments one of this is address of the address you would like to mint This token to and the second one is their value Right. So first, maybe let's use the account. We are connected to and let's start with one Just simply one. All right, and now Let's test it if it works So as you can see it triggered metamask Window and we can see here that something is happening. All right, let's confirm Random application confirm metamask transactions. All right, and now let's wait a second for this for this transaction to be minted and We expect that if we did it correctly the balance of the of usdc should change right and voila it changed Nice Cool. So as you can see used up updates all of that with each new blog So we take some time. Of course, we have internet here really poor, but yeah Alright, so are you following? Have you managed to send this transaction with me? Who send the transaction? Nice Great, we have three people who did that. All right guys So who got lost and need some help with sending this transaction partic Behind you. All right, anyone else would like some help with that We have another person question. Would you like to get me Mike? I was wondering where we're getting the usdc from. Yes. So usdc is from address file. I Addresses I created this file with this address. Oh, okay. So you all have it Okay Thank you. Sure Yeah, I've got JS All right, so I will give you like one minute to Could you pass the mine? I was just saying like there was a link at the beginning to get the girly Yeah This is the link to our telegram group and if you send there your address Okay, me how will send you transfer you some girly if Yeah, we already found that a bunch of accounts. Please send yours as well Question or help help me how could you color? Where are you? And there could you raise your hand? Oh, thanks nice And guys, so if you need help just raise your hand is there waiting for Yeah, I'll go back to To the app.js and in the meantime, I'll add some changes to To the application so it looks nicer so here better now Let's do the same with it or balance like this nice. All right So who is ready to move on to the next step? Perfect. Perfect. We are ready great so Maybe let's change it because as you can see here The balance is one right, but we know that usdc has more decimals than just zero Do you know how many decimals and do usdc have? 18 not it's not 19 Six exactly great. All right, so what we need to do here is to form like first of all We need to actually send mint ourselves not one like base like Unit of usdc actually would like to mint ourselves one usdc right one full usdc So let's use utils for that and it's cars units and It will need us to parse string and Yeah, and the second argument is the number of decimals So like that. All right, so As you can see here instead of just passing simple one. I'm just using utils dot parse units With six decimals, so we'll have one full usdc Minted. All right, so let's try again. I mean some usdc But this time it won't be just one unit of usdc will go for full usdc and Again, if you have any questions, just raise your hand if you would like to speed up get up speed with us All right, let's confirm this transaction and now let's wait a second and simple question Do we have any volunteer to present in five minutes? Nice perfect any other volunteers Present their solutions. So no. Oh, okay. We'll have competition then Perfect, it takes some time Nice so we minted more usdc But now we need to display it differently, right because it's just one and a bunch of zeros So let's use Format units Similarly to the previous one with six decimals nice So we managed to do that Alright, and now our final step of this workshop, which is sending usdc to someone else So we minted ourselves one usdc and now let's transfer it to someone else All right So our first step in this should be adding to interface transfer function, right? Because for now our application doesn't know that ERC 20 like usdc has this functionality All right, so let's add function Transfer and do you know what arguments transfer function gets in ERC 20? first is address, right? for whom and And the second is value, right? So again, we use address and you you in two five six Great, so we have our interface and now Again, we can use use contract function But this time we'll need to name this sent differently because it won't work Yeah, it's the same as mint but the name is different, right so the Arguments are the same All right, so let's go back to use contract function Let's name this parameter transfer Okay, and now we won't have Collision all right and now here also let's use Transfer right so we change the name of the function we would like to call, right? All right, so now we can actually use this function So let's add another button. I know it's not pretty application and Another on click function Let's name it send usdc and now let's call this transfer With arguments so all right, so where should we send this usdc? I Mean where I mean what accounts address what address maybe if you are on the telegram group you can take different Address not yours, but someone else and then send this person some usdc, right? so Yeah, so in my case it will be my second metamask account so I will So here you can pass just Simple string right the address will be just a string and now we can transfer so let's start with Simple one or you can change there Actually use different numbers so because if we everyone will send like one Way of usdc then we want to see that change right because everyone be the same number All right, so I will send three maybe All right, and anyone needs help raise your hand Bartek is here to help or permit. Okay. We have someone there Great and now in the meantime, I will try to click send usdc and try to do that Let's wait a second. Yes Sure Bartek would you like to help my be there? You will find the person there red shirt All right guys we have ten minutes Till the end of the workshop so maybe the people that would like to present Get ready and you'll show us your solution. All right guys, so we managed to send usdc So, yeah, that would be it guys. I hope you manage to do the same thing as me and Yeah, if we have volunteers then Yeah, maybe let me just Tell you thank you for your For your being here and thank you for coding with us and Yeah, if you have any questions just don't hesitate And raise your hand if you have questions all right and now We have some time for Presentation so if you would like to show you show us your Solution feel free to come here and get a chance to win ledger Rant of applause Yeah guys, I hope you enjoyed the workshop and that now you will use use that for you know your Application development because I hope you you know how right now how easy is that right? All right, okay? so I coded it into my little website and You can connect with your wallet and here you see the address you can disconnect again and Yeah, but the app looks amazing Thanks Okay, and the special feature I can send to myself. It's just a wrong text on the bottom. I think I Can send to others by copy pasting an address I can send directly to them All right, and this can we see the code and how is it used in your step? Okay so What I do is that I take an input With the target value and I set a state and then I use that state in the send Nice, thank you great Any other volunteers? All right in the meantime guys if you have any questions regarding used up feel free to ask them All right guys, we don't have any more time, but you can show it and Outside of the room and then we will get a winner. All right. Thank you