Building dApps Justyna Broniszewska

i'm missing and welcome to my presentation on building dabs okay so please take your computers and code with me because we have 20 minutes of coding so yeah in the meantime you can make sure that you have metamask installed and that you have wallet on it okay great so let's start from a little bit of theory what is the app actually so the app is decentralized application and it's an application that runs on a distributed computing system and example of such computing system is ethereum blockchain okay and here are some the up requirements so uh first of all we should have we should refresh refresh our state each new block so that's uh ideally and then we should care about request efficiency so we don't spam api with too many requests and also we should have consistent state so each data should be taken from the same block okay and right now we can go to coding so please can code and code with me if you can okay that's the link yes please if you want to scan this link please just yes so the link is tiny dot cc slash used up that's the call you can go there and there is like code sandbox so we can code together i can assure you it will be pretty easy so we are going to create erc20 like application to manage erc20 token so okay here so what we need to do first is to wrap our application with the app provider the app provider it's a we can import it from from used up car like this and then we need to just write a wrap our application with it and actually that's that's the whole setup of used up and now wait a second i just don't create a fork okay great and now we can start working on our application so let's go to app.js and let's first start from connecting our application to metamask so that's why i wanted you to have metamask on your browsers okay so that's pretty easy we can do it using uh use eaters function from also used up core great let's create a button for it so after we click on the button we can connect okay great so we used up a use eater's function return something like activate browser wallet and that's all you need to have to connect your application to metamask so yeah so now we have button connect but it doesn't work we need to pass this this function there so this is how we can do it okay and now let's test it does it work it should activate browser wallet use heaters yeah on click let's see use eaters yeah after we kick the button activate okay so it's javascript so it won't tell me that okay you have typo here let me just so okay let's check account account is the actually address of the of the of the wallet that is already connected but for now oh that's why we couldn't see it because i was already connected but you should see like the metamask connection flow so okay so i was already connected sorry for that okay so here you can see my uh address okay and you see it's very easy so the only thing we need is this activate browser wallet taken from use eaters okay and then we can actually start doing this application to manage erc20 so here in address.ts i prepared a mock usdc address and we can go to etherscan robs 10 eaters can like here okay and you can see here that this contract exists and that's on robsten and we are going to yeah do it on this usdc token great so now what we can do is to check our balance if we have any funds on our accounts okay so to do that we can use actually wait a second we can import your stock and use token balance function from usdap core and we just need to call it and let's see what are the parameters for this function we need to have token address and then our the address we want to check balance off so let's import mock usdc address the one that i showed you before and the second one let's use my own address so the address that i connected to to this application okay great so we have it and now let's display it on the application so the problem with this variable is that it's a big number so it's an object and react doesn't know what objects are so we need to make string of it so let's use two string function that is building a big number object okay and the second problem with it is that it might be undefined so it might not exist so we need to use this syntax to make sure that this balance exists on uh like here okay let me refresh it this code sandbox is really nice because we don't need to set up any like you know environment but it sometimes doesn't work okay you see right now it asks me to connect my metamask account okay great okay let's see token balance maybe let's add new line to it and see okay my balance is free great so now we can see our balance but it's usdc and yeah as you probably know and like the numbers that are shown from uh next that are stored in a smart contract are not like you know the actual numbers they are like the smallest fractions of the token right so usdc has six decimals so this one actually my balance isn't free it's like 0.000 free right so we need to display it differently not like this so let's use different function that is called utils we can import it from eaters exactly and then it has format units such function and then we just need to pass the number of decimals you want to format to great so that's my balance it's 0.000 okay great so now we can move on to the next to the next step so let's meet some token okay if we go to this contract you will see the implementation of it and you can see that it it has function means and actually it can be called by anyone because it's an robsten so yeah let's make use of it and mean some tokens for us great so to do that we will need first thing we are going to need is uh actually the instance of the contract uh which is the token so let's do it like this new contract contract is we can import from eaters that's a library very nice and yeah the parameters that contracts wants is addresser name and our address of the token is actually mock usdc right okay and the second parameter is contract interface and contract interface is basically just the list of functions that or variables that contract has and that's an array okay so let's just i copied the signature of the function from uh from etherscan so yeah so we let the contract know that the uh that the function is that has such signature yeah exactly that's really nice suggestion make sure that you are connected to robson because either way you won't see that you have this usdc on your account because it's not deployed on mainnet so it won't work on mainnet okay so yeah just make sure that you here you have this robson testnet and if you can't see any other test net just click here show height test network so you will see it great okay so we know we have token right now okay maybe let me okay we have this token instance right now so uh we can move on and actually create this mint this means button let's do it in the new line let's create a button for now it won't do anything okay i can do it okay here you have it great so yeah so we have mint button right now so but if we click on it nothing happens because we didn't pass any function here on click right so let's prepare such function to do that we need to import from used up core we need to import use contract function function and we need to use it in our code okay great we can do it like this it will return an object with multiple things inside and one of this thing is send transaction and the transaction is actually sending the function we want to call so and the parameters of this use contract function function are contract and function name so the contract is actually the contract instance we created before which is token and then the second one is the function name for now we only have mint function so let's use it great and now the send function we can call on this mint click ok right and parameters of the typo right okay and yeah so we need to pass here parameters and the first parameter is as you can see probably here is an address of the receiver of the means so it's us actually so we can pass here account and then let's say let's meet one okay so to meet one we need to use utils function but this time not format units but parse units let's you let's mint one token okay great so remember to connect your wallet to your application then you can mint okay let's click means as you can see here um it asks us to confirm this transaction let's confirm right and now we need to wait a little bit for this transaction to be mined okay great okay we need to wait a little bit okay so the nice thing about used up is that um like under hood it just um refreshes the state so each new block we have multiple calls to blockchain and then we don't need to care about it so we just use these functions and they will you see it just refresh this the state so now we can see one token on our account great so i'm not sure if we will do anything more because we have six more minutes so are there any questions regarding the used up actually i i think we have bounty on hakaton for using for creating an application using used up so feel free to check out our documentation and also the bounty description and i hope you you're doing well okay great so thank you for your attention please if you have any questions you can ask me on twitter or telegram which is the same handle as twitter and also you can email me so thank you