How to Build a Multilayer DApp in Less Than 30 Minutes? | Devcon Bogotá

foreign [Music] Workshop about building the apps like a pro and my name is and these are my colleagues mihao bartek and chemek they will help me today so if you have any questions or problems let them know they will help you for sure alright 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 we have second mic so we can handle questions where is it second one where um uh idea is an application that rather runs on a centralized server runs on a decentralized network like ethereum or an L2 yeah kinda so is it like UI for the centralized system maybe application that uses the centralized system or maybe application that uses smart contracts in blockchain and maybe an application that has no Central server so like it's hard to Define like find one simple definition of decentralized application but apparently it's very easy to build we've used app of course so let's see first how to build decentralized application there we have different ethereum API providers like Alchemy and inferior 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 course 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 follow 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 send 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 block is like around 15 seconds or something like that and the state might changed 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 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 API provider costs and you can see that it costs a lot if you want to optimize your application you can pay up to one thousand dollars per month if you want to optimize your application if you have too many smart contracts interactions but we have something like multicore and it helps us aggregate it's like actually it's smart contract that helps us aggregate all these different calls into one simple 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 multiple so without we have this a lot of different requests to different smart contracts but with multiple we have only one call to multi-call and then multiple call calls all these different smart contracts for us so let's summarize the app requirements we have we should have like a requests we should um like update our state ideally each new block right we should have consistent state so all the data should be taken from the same log additionally we should take optimize our app so we won't 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 multi-calls and updating State each new block it's everything built-in used so let's go to examples of code how to use user so here we have an example how to connect to a network because we need to have like a wallet connection to interact with smart contracts right so see how simple is that we just get we have this use eaters function that we can get from used app and it returns us activate browser load which is a function and when we call this function we have our like like used app will ask metamask to connect so to your to your application so it's that easy in I mean in these few lines you can connect your wallet 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 is just the address that is currently connected so that's really simple this is how we can get it another function use either balance and it gets account which is the address you want to check the address the balance and then that's it and the nice thing is that this iter balance you get from UC turbulence function will be like of course will be put in the multi-caller call so it will be only one call each new hook you use from a used app will generate only one call each new block and the state will be updated on each new block so that's additional really cool additionally we have another example of a 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 the account address that you would like to check this balance account and you get updated each on each new block by 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 app and it needs configuration for example here we just passed read only chain ID so the change that we would like to support in read-only mode and read only URLs for example our own infuria or Alchemy or any other API provider URL so we can support anything we need to pass this config to the app provider so that is the only requirement and only then inside of this app you can use any hoof we provide from USB additionally we support multiplayer 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 mainnet so in this case we check whether the chain current current chain ID current in wallet chain ID is not mainnet and if it's not then we switch we um we want to enforce on the user to switch Network and this is how it can be done with fuel step and this is how we can check for example in read-only mode on different chains for example iter 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 mainnet 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 um girl usdc that is deployed there and we'll use usdap and all these different it's different um 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 heater balance and to prove you that it can be multi-chain and we can do it on girly and girly optimism so let's display two different balances then let's display girl usdc balance as well our balance of course then probably it will be zero so let's make this application to meet ourselves some usdc and then transfer this girl usdc to anyone maybe it can be your friend next to you sitting next to you yeah so that's what in my opinion we could today today I do today so yeah and we prepared two tracks for you you can scan this QR code and go to code sandbox where is prepare the boilerplate so you can start coding with us and we have the different tracks first one is easy track 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 sham Academy how who will help you if you get lost and additionally we have protracts so you can do it yourself we have here the requirements displayed so you will know what to do something happens so yeah okay now you should see and great and yeah if you get lost you can switch from one track to the other so if you go to Pro track and you decide yeah no I I can't do that I 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 regularly clearly it if on your account we can send you um prepared a prepared a script that will send you automatically some girly if so yeah go to this telegram group if you don't have Gallery if or you can use of course faucet garlic 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 your girly if right and additionally we have something super extra for you because there is a chance to win a ledger 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 10 minutes of the workshop we're going to allow you to present Your solution and how you did that and the best the most interesting application will win and the journal right how does it sound I hope cool of course we won't get you the real Ledger we'll 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 yeah so any questions so far everything's clear okay we have one question there I can pass you a mic oh hello hello um I suppose that yet but uh this work with uh all the scaffolding tools like a create reactor app and all that kind of stuff I mean it's it's working automatically with create react app and uh yeah yeah okay yeah 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 a react app yeah right um 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 some videos all right and who is going to code with me on easy track great perfect so let's go dark all right let me make it bigger yeah so did you manage to scan the QR code are you on the same page as I am that's important because this is where we are going to work together uh 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 that I know the internet connection is really bad here and there on the wall there is like a password to another Wi-Fi password for Workshop specifically so it might be useful for you to use that one or maybe your uh 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 and then let's go to app.js and this is where we are going to start our uh 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 use that curve like this like this can you make the phone bigger that was the question that I heard okay is it better now a question there is it better can you see it great all right so we can import the app Provider from used app add use dab slash car and this is the exact name all right and now as you remember I told you that we need to create configuration file a configuration objects for that and so let's name it config as always and it needs to be an object and what we need there is like read only and chain ID it might be for example let's start maybe with yeah go early let's import chain ID from used app as well so we can use it chain ID dot as you can see use that supports a lot of different chains and girl is one of them great so we have this config file ready for now thank you 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 eaters I hope you know eaters library is 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 a for configure 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 you can do it here with the app provider like this and pass their config always remember to close text all right so this is how it should look like everyone follows is everything clear nice so now we have this um 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 connection of our wallet and how we can do that first we need to import use eaters function and we can do it like this from use that curve 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 foreign we can add here button with on click function we'll just call this activate browser wallet action 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 codex 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 accounts and that's and let's display it and this is how we can do that we need to make sure that this account exists because then it will be just undefined and as you can see we 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 inter balance it's called all right and now let's just use this function let's call this iter 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 uh yeah this string right for example here in this case let's start with string and now it should work let's wait for a second so used app will return um big number so in this case we can parse it to string but I prefer to not to 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 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 iter balance as a string we will 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 uh they will see what happens what happening why do I have so many eaters right so normally I really like to use eaters functions for that and this is how you can get this function so I always use utils parsitter not format heater sorry I always confuse these two all right and this is how I always like to display balance offitter of course for different tokens you liked you would like to use probably format units and then pass as the second argument and number of decimals that this token use Workshop Wi-Fi you suggest maybe something is happening oh nice all right let's connect again click nice all right and we display account and now let's try to display eater bands but still 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 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 um go back to um optimism Gallery all right so as I said before we would like to create an application to interact with usdc that is deployed on gardening 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'll know how to read the code of smart contract you will see that this this contract has open open a mean function so anyone can mean any amount of token they want so we are going to use this test usdc for this Workshop purposes all right but first let's just display the bus um of our address in this usdc is there any problem and you need maybe help so anyone needs help yeah if you are coding and you got lost or you would like some help or you are you know on Pro track and you need help bartect me how 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 uh with anything all right uh yeah I can see you someone will come to you in a second because because uh yeah index.

js and this is how it looks uh yeah anyone needs some help raise your hand and uhmek is free for some help the person in the back you need help could you help out 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 YouTube is imported from eaters eaters yeah eaters it's a great Library I love eaters seriously all right guys can we move on okay I'll wait a few seconds we had the question there no it's fine ah 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 car and additionally get default Provider from meters all right foreign 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 Z alright so now let's start from importing the the function the function is called use tokenbalance written like that all right and now let's just get it from blocked 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 I can just import it like this import usdc from addresses perfect so now we have the address of usdc and we can pass it as a 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 simply 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 um 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 all right and this is how you can import it from used up curve 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 we'll help you um with that so this function will return um send function like that so we can get it like that because it's an object and one of the um parameters like returns uh values is send function and this is the send function we will call uh to just send this transaction and we can use it like that so use contract function and you can see that we will need contract contract function name and what else options all right so let's start with contract because that's um 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 in the address and then we need contact interface and we need to create it so let's import it from meters as well and this is how you can do that it's hidden in providers dot interface 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 we'll we are going to need only mean function so for now let's just create it by hand so it's just an array of signatures of these functions so let's let's create it like that it will get address and value which is un25 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 and 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 like you know the interface that was the result of compilation of your smart contract so you want to type each function separity but for this Workshop we are just like you know using this simpler version all right and now actually that's it and now we can try to use this function let's see if it works uh yeah let's give me one second maybe let me make this interface like this and can you see it now is it better okay that's my 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 let's come again oh question um here we go my man is is the um is the ether's pro I saw you you put ether's providers that um at import but no it's not necessary okay it's not necessary it's not necessary that's that's all yeah sorry that was my button all right we will just need your test 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 sent sent message right all right so I know this is not the prettiest application you've ever seen all right so create let's create another um 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 erc20 inter standards you know that mean function gets to arguments one of this is address of the address you would like to meet and the second one is the 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 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 app updates all of that with each new block so it takes some time of course we have internet here really poor but yeah all right so are you following have you managed to send this transaction with me who sent the transaction nice great we have three free people who did that all right guys so who got lost and need some help with sending this transaction behind you all right anyone else would like some help with that uh we have another person question would you like to get me Mike I was wondering 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 app.js all right so I will give you like one minute to uh could you pass the mind foreign I was just saying like there was a link at the beginning to get the girly um yeah right this is the link to our telegram group and if you send their your address okay sanjios transfer you some girly if yeah we already founded a bunch of accounts please send yours as well uh question or help help um thank you where are you in there could you raise your hands oh thanks nice and guys so if you need help just raise your hand is there waiting for yeah I'll go back to uh to the app.

js and in the meantime I'll add some changes to to the application so it looks nicer so here look like this nice better now let's do the same with eater 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 the zero do you know how many decimals 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 um unit of usdc I actually would like to meet ourselves one usdc right one foot usdc so let's use utils for that and it's ours units and it will need us to parse um 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.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 we will go for full usdc and again if you have any questions just raise your hand if you would like to speed up speed with us confirm this transaction and now let's wait a second all right 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 all right 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 managed to do that all right and now our final step of this Workshop which is sending usdc to someone else so we mean that 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 year C20 like usdc has this functionality all right so let's add function transfer [Music] and do you know what arguments transfer function gets in year C20 first is address right for whom and the second is value right so again we use address and you you need 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 scent differently because it won't work 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 collusion all right and now here also let's use transfer right so we 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 sent this person some usdc right so so in my case it will be my second metamask account right so I will so here you can pass this 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 the actually use different numbers so because if we everyone will send like one way of usdc then we won't see that change right because everyone will be the same number all right so I will send free maybe all right and anyone needs help raise your hand bartek is here to help okay we have someone there great and now in the meantime I will try to click Send usdc and try to do that all right thank you let's wait a second cool up yes sure foreign you will find the person the red shirt all right guys we have 10 minutes and 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 okay so yeah that would be it guys I hope you managed to do the same thing as me and uh yeah if we have volunteers then yeah maybe let me just tell you thank you for your um 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 thank you [Applause] all right and now we have some time for presentations so if you would like to show you show us your solution feel free to come here and get a chance to win a ledger round of foreign [Applause] foreign 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 uh little website and you can connect with your wallet and here you see the address you can disconnect again and of course I mean yeah but the app looks amazing thanks again foreign feature I can send to myself it's just a wrong text on the button I think and I can send to others by copy pasting an address and um I can send directly to them all right and like this can we see the code and how is it used in your slab 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 foreign nice thank you that's great [Applause] any other volunteers all right in the meantime guys if you have any questions regarding used up feel free to ask them because can we yeah just do more presentations like small two minutes thank you all right guys we don't have any more time but you can show it um outside of the room and then we will get a winner all right thank you