Ethereum Foundation DevCon 6 - Developer Infrastructure Track, 18 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

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

Description

Visit the https://archive.devcon.org/ to gain access to the entire library of Devcon talks with the ease of filtering, playlists, personalized suggestions, decentralized access on Swarm, IPFS and more.
https://archive.devcon.org/archive/watch/6/how-to-build-a-multilayer-dapp-in-less-than-30-minutes/

Learn how to rapidly develop front-ends for your smart contracts with useDApp. Make the user experience snappy, while reducing your Infura/Alchemy bill. Create auto-refreshing UIs, which update on each new block, on wallet, and network change. Track transactions progress, replaced transactions, history, and show notifications.

Speaker(s): Justyna Broniszewska, Michał Sieczkowski
Track: Developer Infrastructure
Keywords: dapp,multichain,public goods,tools

Follow us: https://twitter.com/efdevcon, https://twitter.com/ethereum
Learn more about devcon: https://www.devcon.org/
Learn more about ethereum: https://ethereum.org/

Devcon is the Ethereum conference for developers, researchers, thinkers, and makers.
Devcon 6 was held in Bogotá, Colombia on Oct 11 - 14, 2022.
Devcon is organized and presented by the Ethereum Foundation, with the support of our sponsors. To find out more, please visit https://ethereum.foundation/

A

A

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?

A

Okay, can we have second mic, so we can handle questions.

A

Where is it second one where.

B

uh Idea is an application that rather runs on a centralized. Server, runs on a decentralized network like ethereum or an L2.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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?

A

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!

A

Okay, we have one question there.

C

I can pass you a mic.

D

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.

C

D

It's it's working automatically with create react, app and uh yeah.

A

D

Yeah, that's all, thank you sure.

A

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?

A

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?

A

uh Do you have it all right, so you can scan it again.

A

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.

D

A

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.

A

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.

A

And you can do it like this.

A

From use that curve like this, like this.

C

Can you make the phone bigger? That was the question that.

A

I heard okay: is it better now a question there.

A

Is it better, can you see it great.

A

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.

A

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.

A

Thank you, yeah and also yeah. Let's add also read only urls and that's another object.

A

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.

A

You can do it here with the app provider like this and pass their config.

A

Always remember to close text all right, so this is how it should look like everyone follows: is everything clear nice?

A

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.

A

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.

A

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.

A

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.

A

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?

A

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.

A

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.

A

All right and now, let's just use this function,.

A

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.

A

All right, we have an error and you know how to fix that. Maybe, and he has an idea.

A

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.

A

Let's wait for a second.

A

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.

A

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?

A

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.

A

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.

A

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.

A

All right, can you see it the balance nice.

A

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.

A

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.

C

A

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.

A

uh Yeah index.js- and this is how it looks.

A

uh Yeah anyone needs some help, raise your hand and uhmek is free for some help.

A

The person in the back you need help. Could you help out there.

C

A

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.

A

No, no, no YouTube is imported from eaters eaters, yeah eaters, it's a great Library, I love eaters seriously.

A

All right guys can we move on okay, I'll wait a few seconds. We had the question there. No, it's fine.

C

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

Let's import Maybe, let's import this contract from eaters. First.

A

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.

A

And this is how you can do that: it's hidden in providers, dot interface, not providers but utils. Sorry.

A

Utils, not interface and that's an object, so we need to create it.

A

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.

A

Are you guys following?

A

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.

A

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.

A

uh Yeah. Let's give me one. Second, maybe let me make this interface.

A

A

Can you see it now, is it better.

A

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.

C

Here we go my man.

B

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

Would you like to get me Mike I,.

B

Was wondering I was wondering where we're getting the usdc from.

A

Yes, so usdc is from address file. I addresses I created this file. With this address. Oh.

B

A

So you all have it: okay,.

B

A

Sure yeah app.js, all right so I will give you like one minute to.

A

uh Could you pass the mind foreign.

C

I was just saying like there was a link at the beginning to get the girly um yeah.

A

Right, this is the link to our telegram group and if you send their your address, okay, sanjios transfer you some girly. If.

B

Yeah we already founded a bunch of accounts. Please send yours as well.

A

uh Question or help help um thank.

D

You, where are you in.

A

There could you raise your hands. Oh thanks, nice.

A

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.

B

A

In the meantime, I'll add some changes to to the application, so it looks nicer so here.

D

Look like this.

A

Nice better now, let's do the same with eater balance.

A

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.

A

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.

A

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.

A

And again, if you have any questions, just raise your hand if you would like to speed up speed with us, confirm this transaction.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

All right so now we can actually use this function. So, let's add another button. I know it's not pretty application.

A

And another on click function.

A

Let's name it send usdc.

A

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.

A

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.

A

Bartek is here to help okay, we have someone there.

A

Great and now in the meantime, I will try to click Send usdc and try to do that.

A

A

A

Let's wait a second.

A

A

A

A

You will find.

A

The person, the red shirt.

A

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.

A

If you have any questions, just don't hesitate and raise your hand if you have questions.

A

A

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.

A

Round of foreign.

B

A

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,.

C

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.

C

Of course, I mean.

A

Yeah but the app looks amazing.

C

Thanks again, foreign.

C

Feature I can send to myself it's just a wrong text on the button. I think.

C

And I can send to others by copy pasting an address and um I can send directly to them.

A

C

A

This can we see the code and how is it used in your slab.

C

C

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.

A

Nice. Thank you. That's great.

A

Any other volunteers, all right.

A

In the meantime, guys, if you have any questions regarding used up, feel free to ask them, because.

A

Can we yeah just do more presentations like small two minutes.

B

A

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.