David Vodrážka / DCxPrague

Transcript

okay so I think we're ready to get started okay so my name is David I'm from Carmine finance and we have built options amm on starnet and we think that Stark net is really beautiful L2 and it works perfectly so today I'm going to show you how to like jump start your app so if you're like thinking about building decentralized app and you're looking for an L2 Stark net is an amazing choice and I'm going to show you here in under an hour how to like start

get started connect to Stark net let your users connect their Stark net wallets and everything and yeah um it's meant as a code long session so if you want to you could like take out your laptop and code with me if not you can there's going to be be recording so you can like get back to it any time and if you ever need some help you can just like ask me for anything right so what we're going to need to create our app obvious some ID and terminal we going to need to know some JavaScript npm which is like the node package manager for JavaScript packages and react now you don't need to build it in react but

react is the most widespread front end framework so I'm building it in react and there are many nice libraries for react but you can use any front end framework or you can build it in vanilla JavaScript I mean that would be a bit hard but you could do it no worries about that so in this example we're using react and so uh there are three Milestones I think we can do all three of them within like 40 minutes or something but if not we can like do the first one no problem we're going to read some data from Stark net blockchain then we're going to connect users wallet which would be pretty easy given all the like beautiful libraries that Stark net has available and should we have enough

time we're going to write some data to Stark net okay so let's get started um I have created a starter project so if if you want to code along you can just just like show of hands is anybody going to do the code along yeah all right awesome so I created a bitly uh link so that you don't have to write the whole damn thing but if you go to my GitHub you can find Stark net daab demo just going to quickly show it's right here so you can clone it or Fork it or whatever

sorry and after you glate you need to run npm install in your terminal to install all the dependencies such as react and stuff and after that if you run n runev it

should start your development server and you should see a website like this so for those coding era along did you manage to clone it ah ah yeah do Wi-Fi the ultimate Nemesis are you also coding your own I will you will be don't worry it's super simple if you get past the Wi-Fi you're fine

for okay so how's it looking oh awesome awesome okay so maybe while we we're cloning it

and installing dependencies I'm going to walk you through the project um I created it by running we create react app um so wejs is just a JavaScript bundler if you're familiar familiar with JavaScript and front end development you probably know those and whe is pretty quick so I chose this one and so what I did is I just ran npm create with at latest and I as a template I used react type script so react yes so that's that's the starter that you guys are cloning right now and I added some files to sort of jump start us so um if you if

you're familiar with react your starting point is this like app so I just created a div and gave it a background image also added some little bit of CSS into the index CSS so once you get this going you should see and a website like this oh for for the newcomers do you guys want to code along we're going to be building an app on Stark net yeah so if you go to my GitHub or you can just use bit.

laret DST starter you can just clone it and then install dependencies and run the dev server it's not mandatory you can just look but if you want to code along you can so how are we looking perfect what about you ah yeah sorry about

that sorry yeah oh damn yeah yeah yeah oh or you can maybe try to connect to a phone can somebody make a Hotpot for you maybe yeah I mean JavaScript dependencies that's like heavy duty download right there

well anyway once you guys are ready so this is our app um I have created this api. DS this is where we'll be making requests and then there's the components folder and these are the three components that we oh yeah sure mightbe too much huh yeah this is okay okay so we're going to start with the total Supply so ideally this component would show us the total supply of if on Stark net test net so first thing I'm going to do is I'm going to

add this component here and I'm using vs code and it's super smart so it's already telling me that I have have this component here but basically you need to import it from components SL total Supply and we should now see it right here yeah so there's if total Supply but it's not currently showing us the total Supply because it's not talking to the blockchain yet so this is where the magic happens in the apit TS we're going to use Library Stark net JS which here we can see the documentation it's just Stark net js.

and if you go to get started here we can have a look at the uh provider object wait uh yeah and here's some like graph so you have the starnet blockchain and the provider is what helps you communicate with starnet and then there's like the contract and account we're going to talk about that down line and here's our website so first we're going to need a provider and nothing's easier than to to just go new provider and it suggests to import Provider from Stark net so basically provider describes the the provider of the connection with to

the blockchain so we need to pass it some props to describe the provider oh also we're going to need to create a provider like this and now it used to be that you would use sequencer but um that was like the Stark net sequencer Gateway but they are being phased out I think you no longer can use them on test net I think they're still usable on the main net but now you want to use RPC provider which is it's well the decentralization there are many RPC providers so if one goes down it still works right whereas back when it was just the sequencer there was like this

single point of entry which could be like prone to errors if it were shut down somehow so now we need to use some RPC provider and to describe RPC provider we need to provide node URL and I have in my project created this file constants dods that hold some constants that we're going to need and one of those is RPC provider address so we're going to specify note r as RPC provider address we're going to import that from constants okay so now we have a provider we can also specify chain ID we don't

really need to because um if you look at this address o wait that's the wrong one this isn't one I wanted to use hold on well we can look for public starnet RPC provider and there's plenty of those to go around well the one you can see here is actually our Carmine Finance which is the one that I in the end decided not to show you but I guess I didn't change it damn okay never mind uh okay so that's the RPC provider address we can specify

the chain ID which we need to import constants from Star net and Stark net chain ID and we're going to be doing this on test net because the final step is sending some Eve to a different wallet and I don't want you guys to send your main net Eve to someone else so uh we're going to be on SN G which means startet gly that's the test net Network so now we have a provider the next thing that we need is a contract because we are going to be asking a smart contract for some data so we'll create new

contract and contract needs an ABI now ABI means applications binary interface and I have already created here ai. Json and this basically describes the functions that you can call on the contract as well as some variables and a lot of stuff and what we are interested in is the total Supply so we can have a look at test net. STAR scan this is the uh this is where you can interact with the smart contracts and the one smart contract that we're going to be working with is the ethereum and notice that this isn't the L1 ethereum this is the

L2 version of ethereum on Stark net and our goal right now is to call this function total Supply and get the respon that should look like this okay so first we need to create an instance of this contract so we're going to pass in the ABI so we have to import the ABI [Music] from ABI J Json and we'll pass it here as the first parameter uh the second one is the contract address we can find that here so if you go to Stark scan and just type in if it's going to find Stargate if

which is the Stark net ethereum I have it open here so I can copy this address or I have already put it here in the constants file so I can just import if address which is it's easier to read if it's just the variable and not the full address which is like 64 characters and the last one is we're going to need provider or account right now we need just the provider so I'm going to give it the provider that we have created oh sorry not this one this provider that we have created so this will create an instance of contract that knows what the contract looks like because it's described in the

API it knows where to find the contract because there's the address of the contract and it's got a provider so it knows how to talk to the blockchain and so now all we got to do is I'm going to do con response equals we're going to take the contract and we're going to call a method and the method we're calling as we have looked here is total Supply and then we're going to give it call data which is like um for example if you have here balance off you need to

give it the account that you're asking for balance off but the total Supply doesn't need any arguments so we can just put empty array here okay now uh this is an async call so we need to await it and yeah that's pretty much it and now we just return the response as begin now obviously you want to do some error handling in in case you like cannot connect or something like you could do like try catch if you're like a JavaScript developer um this is just a quick demo so we're going to assume that everything works we're going to just go

de happppy PA so are you guys cing longest oh damn really sorry sorry okay sorry time yeah okay okay okay so I'm going to go back to the component total Supply and I'm going to import the function that I've just created and I'm going to call it in the use effect I don't know how experient you guys experience are with the uh with JavaScript but like or or rather react because use effect is like the react hook that you use to call something when the page loads so here we're going to call the get total

Supply and it's going to yield us some response which we're going to use to set data and we're going to need another hook with the total Supply again um this is like react stuff if if you know react you've written this thousand times and you don't even need to think about it uh but if if you don't know react and you're looking at this it might look a bit like dark magic but the only thing um um you can't use like if you were to do let total

Supply equals I know zero and then you would just set this variable to different value the problem is that every time you interact with the website the react component is re-rendered and it would always set the value back to zero which is why you need to use use state which keeps the state of the component across rear renders so so it's just a bit of dark magic that react needs to work properly so here we can do set total supply to the response uh yeah rest yeah so the first time de component is rendered this triggers which calls the get total Supply and then it sets the total Supply this variable to the

rest okay and so now what we're going to do is if there is no total Supply ah sorry sorry M you you can use whatever uh it just react is the most common one and the one I have the most experience with so I'm like you know confident in this one but you can use whatever you could use one JavaScript it would probably be quite difficult to like get into some

Integrity logic but yeah you could use anything yeah I mean like the important part is this this is where you're talking with the blockchain right and then you can display that information that you get as a response in whatever way you want or just here choosing react right yeah yeah now typescript typescript just makes it less error prone like it's it's easier to find mistakes with typescript so again it's just it's it's my tech of choice it's not required

huh uh well I actually have no idea what are the percentages of usage on like Stark net per se but I have to say I haven't seen a an app that would be written in something else than react on like Stark net so far I'm not saying there aren't any apps written in different Frameworks than react I just haven't seen any I don't think but there are many amazing uh Frameworks but it's just react is so widespread that like whatever problem you run into somebody has built a react library for that problem whereas if if you use for example swell I'm not sure how like swell how many web free apps there are written in swell so there might not be so many libraries that would solve some

of the problems that you might run into yeah so like if you're starting like starting with react makes the most sense it's like really straightforward and then maybe once you're comfortable you could like switch to something other and build maybe some libraries yourself for other users of that framework maybe no thank you okay so how are we doing yeah so okay so we have a total Supply that is initialized as undefined and in this hook it is set to whatever comes as a response from get total Supply function so if we don't have any total Supply we're going to return null and if we we

do have some total Supply we're going to show it here and so okay um the value that's being returned is Big int which is Javascript native representation of big numbers because if you were to use regular number you could get such a large number that you get an overflow and Well normally you would get an error which is like okay but here you would get like a huge negative number because it overflows and goes back to minus yeah so you need uh this that's why it's using big in so we need to do two string because um it doesn't know how to display big in so you need to do two string and this is like the Ric so you

can do like base 10 base 16 whatever okay so live coding demo let's see if it works chances are it might not but oh no it does so here you can see total Supply and it's the same number that we saw here ER so does it work for you guys oh sorry okay okay okay but yeah um I mean it might seem like not such a big deal that we just see if total Supply and some number here but we just like queried the Stark net blockchain through contract and through provider and yeah

it was fairly quick I'd say and easy right it's easy okay so um that's our first first Milestone we have managed to show the total supply of e if you're thinking that this number is kind of weird um you need to divide it by 10 to the power 18 to get like the eve this is actually way like the sort of like the sense of Eve and if you think that the number still doesn't fit this is like the Stark net e it's like how much Stark net how much e is bridged to the Stark it's it's not the supply of Eve on L1 it's Supply on of Eve on L2 and on test net of L2 so like this number like pretty much doesn't mean anything but it's it's a

nice number that we got from Stark net okay so let's get to the Milestone number two which is connecting wallet so there are two major Wallets on Stark net one is Argent X the other is braavos as you can see I have both and okay so to connect wallet we're going to use a dependency called Stark net kit which has been built by the Argent team quite recently I think like two weeks back they did a demo on it and I thought it was a nice demo so I put it into my demo so we're going to move into the next component which is connect wallet

and here we have a button that says connect wallet so we're going to add it to our app. DSX and now we can see this connect wallet button only it doesn't do anything yet okay so um again if you're familiar with react we're going to use some hooks again because we need to keep track of the wallet that is or is not connected so we're going to create wallet and set wallet use state so again this is to keep track of this variable across

renders and re renders if you're front end developer you know if you're not a front end developer then tell your frontend developer to build this for you and so we're going to need to pass the wallet into this into this component so we're going to have wallet which is a connected Stark net window object okay so now this might seem a bit cryptic but basically Stark net JS exposes this interface connected Stark net window object and if you want to have a look at what such a connected Stark net window object looks like you can actually just go into your def

tools and I'm going to try to make it a bit bigger oh never mind maybe not ah it zooms the page not the console anyways so basically if you have wallets in your browser they are exported on the window object so you can do like window Dot starnet and here's both braavos and Argent and basically so this this is this is just like an object that's right here and you can see is connected false So currently I am not connected to my Stark net arant but ideally we would like to change that

so back to the connect wallet component so we're going to need uh the wallet and we're going to have this function set wallet which takes wallet which is either connected star and window object or undefined if we want to sort of disconnect the wallet and this just means that there's no return value for this function so okay and here we can do props of type props so now if you go to up here you can see that it's complaining that it takes some props and we don't have any

oh by the way this can be undefined so I'm going to put in the question mark which means wallet either is set or is not both is okay and now here weet wallet equals wallet and set wallet equals set wallet yeah so um this is known as the probs drilling where we have probs here in the app and we drill them into the components oh I didn't specify the type here it's again connected St window object or undefined so as you can see it's it's

not much code it's maybe a a bit fast and confusing sorry about that okay so um so here we're going to get wallet and set wallet from props beautiful and if there's no wallet we want to show the button that says connect wallet but it otherwise if we do have a wallet we want to show button that says disconnect yeah so if the wallet is set

it's not undefined then we show wait um if the wallet is not set because this is negation we'll show connect wallet otherwise if the code doesn't stop at this return it moves to this return and returns a well this um this button that says disconnect right because we want to either connect or disconnect and now these buttons will have to do either handle connect which it will be an Asing function or we need to handle disconnect okay so when handling

connect we're going to get a wallet by calling connect function now this connect function is from start net kit so basically all the difficult stuff all the logic behind it it's handled by this third party library that is developed by Argent team and we just all we have to do is just call this function and we can provide it some uh sort of as a parameter we can give it some options how we want it to behave I'm going to set model mode to always ask just so that it can like ask us which wallet we want to connect and we

can look how beautiful the model displayed is so this will give us a wallet object and it can be as I showed here with window starnet arent it has this is connected which is right now false and after recall connect we would like it to be true so we're going to check that that happen so we're going to go wallet dot is connected and if that's true then we are going to call set wallet wallet so what that's going to do is

it's going to call this function here in the app and it's going to set state to this connected Stark Stark net window object that's the wallet okay so yeah and in handle disconnect we're going to call the function disconnect that's again from start net kit and then we are going to set wallet to undefined because no wallet is connected anymore and now we're just going to set that here this button when we click it we set onclick event we're going to call handle

connect and here when we click this button we're going to call handle disconnect okay and we're going to check if it works connect wallet ah so we didn't have to write any of this model any of these connectors and we can already see that there's like continue with email it's the arant email wallet there's Mobile wallet there's the regular archant X wallet and the bravas wallet so I'm going to connect my Argent wallet now normally it would the wallet would pop up and ask you if you want to

connect and if you want to allow this application to interact with your wallet I already did that so it's not asking me anymore but now you can see that the button turned from connect wallet to disconnect so we are now connected and we can double check that by going here again and looking at at Stark net arent X I'm not sure if you can read it do is connected and you can see that it's now true so yes we are connected and I'm just to like show you that we are really connected I'm going to go here to the ab.

TSX and I'm just going to do a quick thingy so if the wallet is set I'm going to show a div just like the basic building block I'm going to give it a class name of container I have created some CSS rules for class container so it looks like same as the other containers and inside there's going to be paragraph that says um your address is and here we're going to go to wallet do account. address and again because we're using typescript you can have a

look at this interface and you can see that on this wallet interface you have account which is of type account interface which has address which is a string and then has a signer and Cairo version so I mean it might look like a magic when I'm just like saying yo we're going to show wallet. account. address but you can like find it all inside the code or you can go to the Stark net JS and here you can have a look at the classes and there's the account interface which has the address amongst other things and so you can like find it all here but if you're like if you've never built any decentralized app and

now your boss is like Hey Jude I want you to build this decentralized app you might be a bit like confused and don't know what to do so that's what this demo is for you can always have a look at this video and find it within minutes hopefully anyway back to My Demo we should see the address oh and here it is my address is 0x 29 AF and if I open my Argent wallet you can see that it really is 29a and it ends with f8 yeah so that's Milestone number two our wallet is connected we can see our address everything is awesome so you guys still

trying I mean it should be like there should be a recording so you can have a look at it and try it at home a bit slower what about you are you are you keeping up with the demo no yeah yeah yeah no I mean it makes sense I I was going a bit too quickly I'm sorry about that okay so um that's our wallet connected and we can jump onto the last Milestone which is we're going to transfer some E from your test net wallet to my test net wallet we got to send it somewhere right so I have created this transfer

component and I'm going to add it to the app I name the component transfer so we should yeah we can see it here this is where you put the address you want to it's it's kind of small I'll make it bigger give me a sec you can't see the Stark net now but you can see the app so this is where we put some address and this is where we put some amount that we want to send and here's the send button right now it doesn't do anything right because this is just like the template that I created to get started with and in the template you can

see there's this div that's the container and we have two address and amount so that's what we see here and there's the button which on click calls handle click so now it is up to us to implement this function where we send the amount of money to the address specified so we're going to go back to api. DS and now we need to write a write function that will actually write data to the blockchain so again I'm going to create create a function let's call it send e it's definitely going to be a sync now so what we are going to need is

a an account because um the account as you can see here wa the account inter interface has the signer so in know order to send some e you need to sign the transaction and the account is what's going to sign that so I'm going to say that this account is the account interface I'm going to pass in amount which is actually a string because you write it into an input box so even though you're writing a number it's actually a string and there's going to be the two address which is also a string nice okay now we we have this

contract which is the E contract which is the one contract that we want to interact with but we need to connect it to our account to give it a signer to sign transactions with okay so we're going to do contract and the contract has a method called connect is there some documentation attach to new provider or account wow that's exactly what we want to do we want to connect it to the account that we have passed into this function I mean we haven't yet but we will and now we can do contract Dot and it's either invoke or execute invoke right so here when we were getting total

Supply we called contract. call so if you do contract. call you're calling a read function if you do contract. invoke you're doing a write function you can see that here on Stark scan you have the uh read functions and here you have the WR functions and we want to call the transfer function yeah so we're going to invoke first parameter is the uh method that's transfer and the second one is arguments now it might get a little confusing we're going to look at the ABI

which is again the application binary interface and we're going to find the transfer function it's right here and here we can see the inputs so the first input is recipient which is a contract address and the second input is amount and the amount is supposed to be unsigned integer 256 so 256 bit or bite bit integer so we actually need to turn the amount that's a string into a u 256 so we're going to do amount U 256 equals and again we're going to use Stark net

JS which has here amongst classes we should find let me see eight no it's actually in nam spaces there's U 256 and we need to turn big number into un 256 and it takes as a parameter anything of type big numer which is string number or begin we have a string so it should work fine so we're going to go u56 BN to un 256 and we're going to pass it the amount and hopefully this should be

amount as unsigned integer 256 so here we're going to go to address and amount and we can do can store it as a response and we should await it because again it's a synchronous call and maybe maybe we can like console log it to see the response okay awesome uh we're going to go back to the transfer component and now that we have this function we want to call it here so so what did I name it send if and it

takes all right it actually needs a wallet so we're going to need a wallet and again we need to do the whole props drilling so we need to send wallet in here and yeah so we're going to go here props do wallet do account um this bank here it means that I know that the wallet is not undefined it can be undefined because the transfer component

is rendered even when the wallet is disconnected right so right now it would be undefined but I mean we're going to handle it lot no worries okay so this is the account and now we need amount and two address so that's the handle click function inside the transfer component and when you click this button it's going to call this handle click and we should probably do something like disabled so if there is no wallet so the button should be

disabled ah props wallet which is why we now inside the handle click can be certain that the wallet is actually fined okay that was quite oh well I actually used wrong amount here quite a bit of code without checking if it works or not so what do you guys think is it going to work so um I am connected with my Argent wallet and I need to send my money to a different wallet or actually I think I can send it to the same wallet but it doesn't make sense so I'm going to go into my brows wallet oh that's the wrong one I got to switch to the test net so startet go

early and this is this is my account address so I'm going to put it here and now I'm going to send some crazy amount of if again you got to keep in mind that this is like if you need to divide it by 10 to the^ 18 to get e so if it's got 18 zeros that's one e so this is like like the button is disabled right now let me check this so it's disabled oh wait that's weird oh no never mind I didn't yeah I need to pass the wallet here sorry sorry about that yeah life coding always fun and here we are so now my Argent

wallet is asking me to confirm to send money here you can see some details it's on testet it's being sent to my Bravos wallet and now I can just click confirm and you can see that the transaction is happening right here I think it's already finished it's way too quick so now now I have more e than I had before but I don't think I showed you how much E I had before but yeah yeah we have successfully built a decentralized app that allows you to send E from your wallet to whomever you want and yeah we did it in about 42

minutes which is like pretty good I'd say so um yeah I sorry I I went a bit too fast so the guys who were brave enough to code along got lost eventually sorry about that but if you want to check out the final product again if you go to the to my GitHub uh I need to find it quickly so there's the Stark net diab demo wow the Wi-Fi really is slow here uh you can go to Branch find and this is where you can find the final

product so if you if you clone the project and you switch to Branch final everything should be implemented here and working let's just have a quick look at the transfer yeah yeah so everything works if you want to build a decentralized up on Stark net it takes 42 minutes uh also also like the next step right now would be so uh you can probably see that we are we have the wet defined here in the RO root component app and we're pretty much drilling it into the connect wallet and into the transfer as as your application grows there's more and more components and

this becomes like really cumbersome so you like this this isn't a particular good solution it's a simple solution if you want to like build something quickly but if you want to like go more in depth I would tell you to use star react which is a library built by aibara team and they have just announced like yesterday version 2.0 I think and this what like this will give you like starnet provider and then you can use their custom hooks across your app and it it's a bit more difficult to set it up like I'm it's like five minutes but if I were to show it live it would look like crazy because it's some black magic and then it like

ows you to use your wallet across your entire app which is like pretty great so yeah so if if you want to like start with these starter and then move forward and build something bigger you should probably use Stark net react uh there was the question before if you have to use react if you can't use like swell or solid JS or something else if you use something else you cannot use Stark net react but everything else works like yeah pretty much yeah so yeah I think that's pretty much all I want to show you you can have a look at our beautiful options amm you can read our Twitter and or X it's now called X or you can find me on X and if you have

any questions I'm I'm here no questions thank you thank you