DAPPCON 2024: Building a dApp with Scaffold-ETHv2 - Eda Akturk

Transcript

hi everyone um today we're going to do it's weird to do it when you're sitting but today we're going to do like a scaffold version two Workshop I hope my voice is good um but we're going to be building like a small application and approximately going to take us 40 minutes especially like if you're um participating in a hackaton coming up I hope that it will be pretty useful um but yes it will be like a 40-minute Workshop where we go through scaff version 2 and then kind of talk about the paths of what you can do moving forward um so we can directly get started uh so first of all what is scaffold e um first of all who am I so my name is Eda and I'm part of ble GLE

uh we are a developer community and we built different tools and educational products for um different like esally in the ethereum ecosystem so a lot of educational resources content uh it's basically like a developer Dow and yeah we kind of have like a lot of developers coming in through the content we put out and then the starter kit which I'm going to be talking about scal version 2 but we also have like different products which people build such as AI ninja and different uh tools which we'll be talking about um yeah so my name is Eda um and what is scaffold e and scaffold e version 2 uh it's a tool tool it's in itself like not a product itself but basically uh it incorporates different

tools and allows you to build different products so it allows you to like do rapid prototyping so especially if you're like participating in hackathons it can be really helpful and uh I do hope that it will be interactive so if you guys want to follow along you're free to like open up your laptops and follow along the live coding as well but we're going to be like kind of modifying the app and kind of going through that iterative Loop of making changes to your smart contract and reflecting it to your front end um and yes you're welcome to follow along if you would like to uh so to dive a bit more into the stack itself uh basically scaffold E uses um so it has like both an nextjs component which is the front end piece and then it has

the contracts and you can basically have the smart contract piece in either hard hat or Foundry so when we create like it will ask you when you're setting up your visit do you want to use like hard hat or Foundry for your smart contract development toolkits and then it uses wag me rainbow kit I said nexts as well and then it uses Daisy UI which is like a tail1 CSS um component to kind of make it like a prettier interface and we're going to be building all this uh we're going to be showing it but just wanted to give you like an overview of the text stack okay so this is all the slides I have actually and we're directly going to be um using the tool itself but even before going to the tool I kind of want to show you what you can do once you are

like familiar with scaffold e um is basically a set of challenges called speedrun ethereum so you can directly go to speedrun ethereum.org so there are a lot of challenges which you can kind of take your uh coding skills to the next level with for the today we're just going to be making like a small change so it's not like we're not really going to be talking about the functionality of what you can do with um you know about building different products but more so just want to show you how you can use a tool so then you

have it in your pocket for the next hackaton um and yeah I would highly suggest you to like if there's one thing which I will be saying 10 times throughout this presentation it will be speedrun ethereum.org up I might do more mistakes than usual um okay so let's get to it and just before we start um has anyone heard about scaffolds before or not really I know Kevin has shutter block has okay so that's a good ratio um perfect so let's do it and is anyone participating in the eth Berlin hackaton as well if there is Okay no Okay one that's good um cool so to go to scaffold you

can first of all use GitHub as well but I actually have let me show let me open GitHub um I have a follow along okay this is the workshop which we're going to be doing today so if you guys want to follow along you're welcome to like open um I don't have a way to share the link but I have a dcon workshop which I'll be adding and which we're going to be following today let me make it a bit bigger but you can basically go to uh to my GitHub if you want to but we're going to be doing all the steps from zero so um yeah I have like some cheat codes ready in case there's a mistake um perfect so the first thing you can do is you can Google scaffold e

and I have it open this is you can open the GitHub or we have like a landing page as well um it's basically like there was like an initial scaffold version but now there's scaffold 2 which basically uses like different flavors is a um is the second iteration of the product and let's do it so um you can go either way we're going to use like the next MPX crate eth um command and follow it through the wizard but before like with the scaffold you could also like clone it but I think this is always better cool so let's open my terminal and again I'm going to be starting from scratch so if anyone wants to follow along uh or ask questions on the way please welcome to do so um but yeah I

just have over here my terminal and uh I hope the internet is pretty good here so let's um cool so I just create I didn't do anything I just created a folder and now I'm going to do MPX crate e latest which will get me like a starting Wizard and uh this will basically ask like um you you kind of let's let's look over here too let's go to docs uh we have quite nice doc so you can go over here to the docs and kind of see what you need like the installation uh basically what you need before you begin is node yarn and git

once you have all these set up you can then use the wizard or like the git clone command to uh get it up and running um and yes I highly suggest like these give all the instructions as well so we're just going to be following that um Okay cool so MPX create e latest I just run the command uh let's call it um D not very creative um I'm going to do hard Huts but you can definitely choose like Foundry or none as well but let let's have hard hat so that we have like your smart contract development environment and then I will install the packages which come um so then you can also just like run yarn install

afterwards um but yeah this is basically setting my app and um I I will directly show how it looks like once we get started before Mak making any changes um it will not take very long but it will take a few moments so it's just installing like the dependencies setting up our git repo and um once we have the app then we'll go ahead and like make some changes to our smart contract and see it directly reflect to our front end so that's kind of that's kind of the reason of using scaffolded like you can directly have changes to your smart contract automatically reflect to your front end so then you don't need to um spend more time on um you know you can quickly like have the

tests up and ready and uh yes if it if this does not not work very fast I do have like a local one which I will use but okay perfect it's actually pretty fast so we have it up and running now the first thing you need to do and again the docs kind of walk you through the environment setup as well once you do the environment it gives you all the steps which you need to go through but I'll just talking about them so we now have like we cloned our app let's actually look at how this looks likees I'm going to move this to like a new window over here so uh I called it D not very creative but basically the two things which uh are important to me are inside

the packages folder so I have both my hard hat package which is my smart contract development environment and then I have my nextjs which is basically like my my application and you have like the pages the front end component over here which directly talks to your smart contract so uh we will walk through these two folders but before that let's just kind of look at what we just downloaded now the first thing you need to do is you need to do a yarn chain so this will start our well you first need to CD into your up and then you need to do like a yarn chain so this will start our local uh hard hot chain so as you can see like it generates like your accounts um so you don't need to like set up hard hat

separately but your accounts are automatically generated and we're all doing this on Local Host so no real money involved for now um and then I open a second terminal on the second terminal I will do a yarn start now I haven't deployed any of my contracts yet so I just want to show you how the front end looks before we go ahead and deploy the smart contracts okay cool it's up on Local Host so let's go to Local Host perfect so this is what we just downloaded uh we have over here like it's it's a pretty nice like um UI we don't have any contracts yet but let's

like so we haven't deployed any of our smart contracts we did start our local hard chain but we did not deploy any of our smart contracts yet so that's what I'm going to do next so I opened like a new terminal basically the thing is now we have like three terminals one for yarn chain which starts our local environment one for yarn start which runs our uh app and the second one we're going to do yarn deploy which will deploy our smart contracts to our local network um this is just like one command to run awesome so we now have deployed our first smart contract so as you can see I come over here and I actually see some functions so there's like the smart contract there's the the address the balance like the network it's on on and um you can

now like by running like that simple command we were able to deploy your uh smart contract quite fast um but let's see what this smart contract actually does right like before going deeper um so I go into my hardide folder I go into my contracts and there's your contract doall so this is a very basic smart contract which uh the scaffold e developers kind of created for us to have a boiler template to start with is this big enough shall shall I make it like zoom in okay this is not the usual font size I use but um yeah so this is like our basic smart contract you can see kind of the details over here um you can see that it has like an address uh with like

the owner uh it has a string over here called building Unstoppable apps a Boolean it kind of teaches you about like the different uh different variables you can have in solidity there's like an event so it will show it automatically like allow ows you to kind of look through what solidity events are um and then your Constructor then you have like a modifier basically what what this smart contract does is it has a function called set greeting which um and then it has like a greeting variable saved so you can change your greeting it's not the most complex smart contract but basically it stores a greeting and you are able to change the greeting um so for example if I go back over here where is it um so the current greeting

is built building Unstoppable apps I can basically go ahead and I can change this to building Unstoppable apps in dcon um and I can just make this transaction okay but it didn't work because uh we don't have any money to pay for the transaction right now like one thing which I did not mention is basically uh scaffold comes with Burner wallets so these are wallets which are stored within your browser so you don't need to connect to uh metamask you don't need to like have that extra connection but the wallet is basically available available to you out of the box uh but right now I have zero eth in this wallet person and if I open like a new

incognito window and I open Local Host it will give me a new wallet person so this is like a green person this is a purple person so every browser will automatically generate you a new burner wallet so I'm going to grab some funds from the faucets uh it has a built-in faucet which you can grab funds from these are again uh all on your heart hat node uh and you can grab as much as you want so now I have 7 eth on Local Host nice so now because I have um the money to pay for the transaction I can actually change the greeting so let's try okay perfect so as you can see I just changed the greeting I now have building Unstoppable apps in dcon um and

the counter also increases so we can we can we can do something else like um Berlin is cool uh and then I can do this and then hopefully my counter will also increase so the smart contract basically keeps track of a counter which is updated every time you uh update the greeting uh and then you can be like um docon send the counter increases or like shutter block send counter increases and one thing which is um different in solidity if you're coming from like another programming language is that there are functions which are payable functions which accept money so

unless a function is payable so when I go over here and when I look at the set greeting it's actually a public payable function so payable means that you can send e inside the function it accepts some kind of um yeah monetary value um and then what we kind of have in this function over here is we have a premium flag which is changed if someone sends money into our function this again is kind of to teach about the different uh Incas like the different uh things about solidity for as the payable function as like you know kind of updating your uh how you can get the value like by message that value you can actually understand how much money is sent to your function uh so let's kind of try

that let's let's do ad and with an exclamation mark and then I'm going to send like one eth to this contract but I need to uh convert it to way okay so when I do this uh the premium flag should also become true because now I'm actually making a transaction and I'm sending money because my function is a payable function I'm allowed to do so okay perfect as you can see the greeting is now Eda someone sent money so the premium is flag is set to true and then the counter also increased and you can see like now there's a balance in my smart contract because um I just sent one eth you can send more e to it and um you can do b

g b g and then I'll send like I'll send two I have a lot um awesome now we actually send like more money to our um to our smart contract and then we also like uh change the greeting Okay cool so this is what comes out of the box but now you might be like okay but what do I do now uh so basically what you can do now is um and I'm I will will be cheating so that I don't miss like I don't forget about saying anything but we basically did these steps okay what I'm going to be doing now is um I want to update the owner so as you can see there's like an owner of the smart contract when we

deploy it an owner comes so we're going to make like some small tweaks to our smart contract so that you can actually have an have a function to change the owner of who owns the smart contract and that's basically what we're going to be doing and we're going to also be um editing like this homepage because right now you kind of interact from the debug contracts tab uh which comes out of the box you don't need to build like any other interface for your user to interact with uh but we're also going to be updating the homepage so that you can kind of um see how you can use like the the the functions with the scav hooks Okay cool so one thing which I I would Al I always recommend is to go to

solidity by example Le .org this kind of gives you a lot of functions a lot of like what you can do with solidity so for example you have over here the variables what kind of variables are there uh constants you know it has like mappings it kind of shows you even more advanced stuff such as uh re-entrancy attacks or like how you can um accept eth for example your contract but there's a lot going on in solidity by example.org and basically I can come over here uh for example like this hello world just like has a greeting but let's see what this first app does okay this is just a counter um but for example I can come over here and I can Define like a Boolean a uint like different kind of you know a mapping for example let's actually um let's let's do something

small here I just want to add like one variable let's just copy this let's add this just to kind of see how you can do that so I just come over here I just like decide to add like a new string public text called hello uh and then once I kind of I updated my smart cont contct I need to re redeploy my smart contract um whenever you update your smart contract you do need to redeploy it and I'm just going to do a reset in case like it's saved somehow so now basically I have like this new field uh a new variable called hello and it's directly reflected here I did not do any change it just comes over here so this is like our Diva contracts tab okay perfect so now that we have

that let's uh go ahead and let's actually like make a function to update the owner and I kind of want to remove the stuff which is not needed um I am basically going to remove this let's Okay withdraw let's leave this but let's kind of delete this because it's making me confused when we have too much stuff which we don't need going to delete this I don't want a met thing so I'm basically going to start from uh from [Music] scratch okay and let's let's just have that let's also delete these Okay cool so we we basically updated our smart contract

um all we all we have now is it has an owner and then there's a modifier card called is owner uh and then it just has a withdraw function so not a lot going on in our smart contract I'm going to redeploy this um and then we're going to write like a function so that we can update the owner of the smart contract Oops I did something wrong um okay okay this is like okay let me leave this stuff for now because I think I delete something

which I'm not to be deleting okay I think that's used somewhere so I won't be deleting that for now but I will like directly add like an update owner so I just wanted to add that to make it like less confusing but that's okay we can leave all the stuff so okay now you can go to solidity by example.com to kind of see how it works uh I also have GitHub co-pilot which helps me a lot so I'm just going to write a function to oops not this much uh to update the owner now there's one owner of the smart contract which we saw on our front end as well but let's say we want to change it right so uh when you want to change it you kind of need like um you need a you need a new way to

change it so I'm going to write like update owner and I'm not sure why my co-pilot is not helping me right now but that's okay um and it basically gave me a suggestion but this is not what I want to do I actually want to pass in an owner over here um and I want to make this function public correct that's correct uh and then uh basically like the owner will be this new owner that our pass now it's giving me an error because the owner is actually immutable so I'm up not able to update it so I'm just going to Simply remove the immutable uh keyword from there so now basically it's allowed to updates so this is basically

a function and the key here is that everyone can actually call it right now so um we will change like we will add a modifier over here because we don't want everyone to come in and change the owner but it's just like a small function um to update the owner takes in an address like the owner and then it updates the owner of the smart contract to be this one cool so let's redeploy it and let's actually see if it I made any mistake or not it's redeployed now there's like an update owner so let's say I I'm going to grab some funds from the faucets let's say I want to update the owner to be vitalic e So currently the owner is this address

2266 uh I send this perfect so someone came and updated now you technically don't want anyone to come in and change the owner of your smart contract so what we're going to do is we're actually going to pull in this modifier a modifier is basically something you can use to check if your smart cont it's like an IFL statement you can think of it like that but before even entering the function if the mode fire is true it will only enter it so I'm going to move this over here like I'm gonna um make it so that the update owner function is only available to the owner itself because we don't want everyone to come in and update it so I just simply pull the mode over here now only the owner so if the owner is um like if if the person running the function is the owner they

can update it now you might be like okay but what is the owner of this this contract right because we just deployed it and we didn't even talk about the deploy scripts so I'm going to go ahead and show you guys the deploy scripts so I go into the deploy folder now there's there's a few folders which are important which is mainly the contracts the deploy scripts and then we also talk about the front end piece but when I go to the deploy scripts I can see like there's quite a few comments to help you understand better who the deployers are but when we deploy the smart contract it's actually going to be like a deployer account which is one of the hardhead accounts which is pulled over here uh since we want to know who the owner is I don't want every like I

don't want to be it to be a random owner I'm going to use my front end to be the owner of this contract so let's say like let's make this purple uh blue person the owner I go over here I simply just say the deployer will be this account so um I'm going ahead and editing my deployment script so that I can be the owner of the smart contract um as you can see like the arcs passed in will be the owner so when you come over here you can see like the Constructor takes in an owner so now when we add it in our deployment script we say the owner will be this address okay so perfect now now when we run it hopefully this person will be the owner let's see if that's actually

true okay yes 5181 now we know who the owner is so if I come here as this person like the db75 I should not be able to update the owner right like let's say I want to make it metallic. eth I send it okay not the owner so because the modifier kind of checks who the owner is I'm not able to update it if I'm not the owner so as you can see over here the modifier uh displays a message called not the owner if uh it does not pass and when I was making this transaction because I made it from the the incognito window I was not the owner but let's say I want to make it from here vitalic do e send okay this passed because this

person is the owner now because now the the current owner is vitalic I can't make a change actually um so if I just do it one more time I want to update the owner to like ed. e which is actually not my ens but let's say I want to I will not be able to because now the owner is vitalic so only he can do it okay but because it's on Local Host that's fine uh cool so that is how you can add like a new function um now let's let's see what we have next okay we use the modifier we updated the deployment scripts every time you make a change to your deployment script or your smart contract you do need to do like a new yarn deploy uh so once you do a yarn deploy it will automatically generate

the ABI for your smart contract and then it goes over here so your your front end will basically understand that it's changed and it will get like the new ABI and I think it's actually under here so as you can see the contracts folder so you have like the deployed contracts over here so this will be updated every time you run yarn deploy cool now let's actually make a front end so uh you basically probably don't want your um your users to interact from this tab because this tab kind of shows everything uh so ideally you would like build your own um your own new page for that certain functionality and that's basically what

we're going to be doing today and as someone who really does not enjoy uh building front ends scaffold it makes it quite easier for you to build front ends to interact with and uh that's I what we're going to get to next and I have exactly 32 minutes left so we should have enough time to build a cute front end now the page over here I need to go to is uh up until now we were all in the hard hat folder uh again if you chose like Foundry when you were setting up your environment you will have the folder named as Foundry but because I chose hard hat I see it as hard hat cool so now I'm closing this package uh let's close this now I want to go to pages.

TSX so this is my main page this is the page which we're going to be editing I'm just going to like delete [Music] everything and then let's see if not here okay cool this is our page uh not a lot going on the debug contract still exists by the way um so I'm going to make like a small card which uh allows the user to update the owner because we made changes to our smart contract but you basically want your user to interact with your homepage uh and this is especially like very interesting to me because scaffold gives you like outof the boox components to allow you to interact and the first thing I want to do is for example the connected address comes here so let's kind of show the connected address to

the user right uh right now our page is blank but I want to see who the address is connected here and it's basically going to be the sperner wallets but let's let's do that um connected okay this GitHub co-pilot is giving me something nice um I don't want to show this yet I just want to show the connected address so um the connected address okay so my connected address as you can see is this uh this is not very pretty so uh I'm going to be using scaffolded hooks to make it like look better because I um yeah for your user you probably want to

like do an enss resolver if the person has an ens you probably want to show the ens address like maybe if they have an image you want to show that uh so we're going to be basically pulling in scaff two uh hooks to have it like a nicer interface and I'm going to do this on the second line connected address and then we add the address component so the address component comes with scaffold eth as you can see it was already here GitHub co-pilot automatically did it to me and let's go back here cool so you see this is the the top line is when you don't use the component I mean you can write it yourself of course but because scaffolded comes with like the outof boox component to make it ready for you

now we can see like the image if this person had an ens it would actually show their ens so this is yeah this is one thing which I wanted to show uh now even even before getting to that what we'll do is um let's let's build a card and I talked about Daisy UI we use da UI for the front end it's um it uses tailed one CSS so it's basically like uh a library for tailwood CSS gives you like some components out of the box so I go over here uh you know you can have like an alert art box um button everything bubble whatever you want to and I'm going to be basically searching for a card uh oh not CR but card I don't know what c is okay cool so this Nik shoe I'm

going to get the jsx component I want to kind of show this so all I did was I went to daisy. ui.com I chose whatever component I want and now I'm going back to my homepage I'm going to delete this connected address now that we showed that off I'm just going to copy paste the shoe component now it's going to show me like a Nike shoe on my web page um well we don't want the shoe but we do want the card component so we're going to be editing this card component let me like delete the shoe byebye uh uhuh let's make this nacon app app cool um they made a joke over here we're going to delete the

joke and we can delete this we don't need this um all we want is a card component okay cool we have a card component over here not very entertaining but we will do like nice stuff here so what I want to do in my card component is I want to to I want to show both the connected address and then I want to read the owner from my smart contract so first of all let's pull in the connected address the connected address we we saw already not very uh not very very interesting I would guess uh now we see the connected address you can go over here the connected address is here now we're going to do one thing which is show the owner right like we want to see who the owner is uh when you now the way it kind

of works is you can use wagm hooks both for your use account as well I think yeah this guy directly comes from ragi also but we also have build-in scaffold e uh hooks which you can use to read from your smart contract and I'm going to go ahead back to our docs in acting with your smart contract so we have all these in the scaff docs basically um because we get the owner from the smart contract you need to read that variable there uh and by using use scaffold contract use scaffold read contract you can specify your contract name what your contract name is and the function you want to read and if it takes any arguments so we're directly going to be using this I just go I went to the docs I looked at how you can read from your

smart contract uh since the owner is a variable which we won't changing I go over here copy paste um I probably need to pull that in import import this okay use scaffold contract read now we have that we want the owner we have no arcs to pass in and then we want it to call owner perfect so we basically like um pulled in our hook to read for my smart contract and then we're going to be displaying who the owner is and let's let's see if this works or if I am not correct owner owner address and then this will be

owner let's let's call this owner address to make it same cool so basically what we did over here is we needed to read from our smart contract we passed in the smart contract we use use scaffold read contract hook uh and it gives you the details over here as you can see uh it only takes like the contract name the function the it doesn't have any arguments we're just reading the variable and it pass like gets back our data let's see if it actually works cool so the owner is vitalic so you can see vitalic and as you can see because vitalic has like a what do you call Avatar you actually can see the Avatar as well and then when you click it it should actually take you to the block Explorer now it's on Local

Host so it will only show Local Host But whichever Network you're on it will actually direct you to that ether scan perfect this this is this is going good so far I hope uh but now so we did one thing we were able to read for my smart contract we also want to write to our smart contract we did not show that because we created the function called update owner which you can update the owner but we did not show how you can interact with your like how you can make a change from this small Avatar icon we we made so let's actually do that so use use scaffold read contract um has a similar version use scaffold WR contract which allows you to pass on data and actually make changes and I'm going to

go to the docs as well because if I try to write it myself I might make make a mistake but thankfully um get up co-pilot gets me usually so uh it's called use scaffold right contract it gives you the details over here and how you can use that too um and actually you know even before that let's kind of show what an address input looks like so we use the address component to make it like a nice interface for displaying the address there's also like an address input which makes it like a nice place like uh it gives you a nice uh view to get an address as an input and I'll be like let's see address

input and then I think it takes like so let's let's call it what do we want to call it new address and then um um oh sorry no this should be the value right wise I think we can do it like this I probably need to import this okay address input comes in let's see what we're missing on change on change let's do like do I need to do something there unchange let's call it okay one moment um I'm just going to get the address in put from

here address input okay cool I did not add it so that's fine um so basically what okay I will I will add the address input from I think my other um I think it should be like this it will be like the owner address and if it does not work we'll find a way and then we want to create like a new owner and I'm going to call this new owner address and then react should actually understand that we want that and then it's called Okay cool so we probably need to import react as well yes so we basically have like a new

owner and then we basically set it to a new own owner like react kind of aloud like I think I'm doing something wrong over here but that's okay so the value will be the owner address and then on change it will be like a new owner but I'm I'm having something wrong here so we'll we'll get back to the address component onchange [Music] uh yeah yes so I want like an umbrella function here but um so you you're saying like this do I have the value wrong is it not

value oh the closing tag am I missing the closing tag like this let's see if I okay that's fine we will fix this uh I have a working code in the back end in case it doesn't work but we're going to fix this so um so let let's let's write the function to actually update like the the owner and I'm going to delete this for now we're going to go come back to the address input I'm doing something wrong there which I'm not sure what but we basically added like this new owner address and then set new owner address and we need to import like use use scaffold right contract to actually be

able to call this so I'm going to go over here back to the scaff docs and and I get this uh and then in my button oh in my on click I'm going to do this right that's Bas probably I'm think uh I go ahead I pull in this right it's giving me because we did not import it yet let's import it from our hooks okay now we have uh you scaffold right contract this allows us to basically make changes to our smart contract so you know talk to it to like make some differences there um because previously we were not doing that and I'm going to go over here I get the button directly this this is a nice button so I'm going to copy this from here and we're going to make changes to it um I come back

here I put that here now the button it doesn't take any value it doesn't take any ar oh it does take arguments sorry so uh this button like it gives us the styling automatically out of the box it has like an on click action use it calls write your contract async um the function name will be update owner right if I'm not mistaken update owner the ARs the ARs we will pass will be what did we just call it new owner address so the ARG is going to be new owner address uhuhuh error setting new owner if there's an error this will be the error message which comes up and then we will call it update owner and then I'm doing something wrong

here but owner I don't want to have this message but cool so this gives us a button let's see how this looks like going back to my app uhuhuh perfect but we did a crucial mistake because uh when I was doing it before I forgot to add the address input so you can update the input update the owner but now we don't have like something which we pass into it so right when we say like address is invalid so let's go ahead and add that and I'm going to do I'm going to steal from over here a bit button primary I'm doing something on here let's see maybe get up Capell will fill it for me uh but let's ask for the input new

owner will be an address input oh and then the value will actually be like owner and then um it should be on is it on change sets should be correct but oh this is owner address okay should we just delete this but this is the Val so this should

be you want it to be like this oh okay yeah um so we basically let's see if this works before I think this should work so basically now it will be like the new like we will change the owner address like we basically add this as an um we give it a new owner address and then on change it will basically go over here it will change our state and then it will pass the new owner address into our button let's see Okay cool so we were doing like a mistake over there but basically now we have this new owner and I can be like .

eth but I cannot do this because only vitalic can because only he is the owner so this will actually give me an error yeah not the owner so let's let's quickly redeploy our smart contract we have 17 minutes left so we're good perfect so uh we redeployed our smart contract we did that you can come over here you can view the debug tab which you still have access to but as you can see we built like a small you know cute interface to directly interact with our application um and the owner is this person the connected address is this person and I can come over here and I can change the owner so I can be like

Eda do or I'm not going to make it ed. E because I'm actually not the owner of that but I'm going to make it this person so this db75 and this person can't do it because they are not the owner so um the modifier will say you are not the owner so you can't do it but if I go over here and this person is actually the owner I can do this update owner transaction complete let's see who the owner is the owner is now this person I go over here to my incognito window the incognito window is the owner so I can be like now I want to let's let's actually make shutter block. e the owner so I can update the owner and there you go uh so this was

kind of like a mini app which you can build with scap it doesn't do anything crazy and you probably would want to use like the ownable contract of your like uh of open Zeppelin When you instead of like creating the ownership pattern yourself and let's actually show how that works too like quickly since we have a bit more time but when you go to your we were now now I'm going to move back to the hard do folder I go over here your contracts it's actually I think here uh you import the ownable from open zeppin it's here so I do this and then I think extends oh sorry not extends is ownable so when you do this uh you're basically ex oh I don't want to do that

because um okay we'll find a way but basically now I'm directly extending from open Zeppelin's ownable smart contract so once I do that it will actually bring like a whole set of functions directly with it um so what should how should we call it like let's call this um okay let's let's let's let's show this because I think this is important I'm going to delete the ownership pattern we wrote the owner um we will actually not take like the Constructor will be empty with this one we will remove the modifier okay we don't need this removing the modifier uh you see so when

you extend open zeppin Smart contract uh open zeppin contract actually there is like an only owner function which comes with it and I kind of want to show you guys that before we end and since we have time we can actually do that um let's just delete this for now uh so before we were doing all this oursel right like we created like an owner and a smart contract we created like an update owner function which updates the owner but we did all that through like not really testing a lot so with open up ownable smart contracts you can use myart contracts which have been tested and you know valid for these kind of reasons um you can inherit other contracts such as like an erc20 if you want to like create your own token you

can do like an erc721 Etc you can do all that but uh I want to deploy this and I want to show you now if I try to deploy this it will give me an error because we did not change our deployment scripts uh in our deploy scripts originally it takes in a Constructor address but because we removed like the Constructor is now empty we should remove that from my deployment script right like it takes the arcs so we have no arcs cool now it should work except for this because it oh I think this should work actually and if it doesn't work we'll just then Circle back to it cool so now let's see what our debug

contracts tab comes with you see renounce ownership and transfer ownership so when we Direct L extend opens up in smart contract we actually get a lot of functions out of the box um such as these so you can directly like have the ownership patteron available to you without having to write it yourself and this is of course the better way to do it um and it's probably only the owner which can do it which is this person um yeah so that's kind of how you can extend the open St SM contracts uh now I do have 10 minutes so before we end I do want to show uh speedrun ethereum one more time um and now our packages is giving it a scar probably because in our front end like we call the owner functions but we deleted that from our

contract so that's why it's red right now um and a few things just to kind of reiterate is that the greatest things about like the good things about using scap is it comes out of the box especially like if you're working on hackaton it's pretty easy to get started we actually built like I participated in like four hackaton with scaffolded so it was fun didn't win anything um except for the last one we won like 100 bucks um not too much but it was a nice hackaton uh so what comes out of the box is the burner wallets as you can see I did not interact with metamask at all it was pretty easy pretty like um fast moving to just use your burner wallet we had an built-in faucet which allowed us

to get like money directly so that's how I got this money so I can do as much as I want it's only like on local hosts so um I am pretty rich in Local Host eth right now I can see my faucet over here uh I can see like the block Explorer the block Explorer kind of shows you all the events everything that happened all the transactions um yeah and then de debug contracts tab automatically comes out of the box so let's say you're like okay this is great I'm starting to use it what can I do next that is exactly where speedrun ethereum comes in oh not the Builder's page so once you kind of go through scaffold e your like okay I'm uh good with this uh then you can head over to speedr ether.com to actually build

like bigger products so it's starts off with like a simple nft example where you build like an um and let's actually show this so you build like a small app where you can create nfts randomly generate them I don't exactly remember the context but yeah you can see like um you can have images you can kind of create those nfts um this website like it kind of teaches you how to do that and then you go back you can build like a decentralized staking application where you kind of send money into like a smart contract and then um I think there's you can specify you know if there's like five E sent to it then send it to this person Etc so it teaches you that token vendor token vendor is pretty fun uh so you built like a machine which you can

buy tokens from and sell tokens to so it's like a you can think of it as like a Coca-Cola machine where you can buy Coca-Cola from but also give back Coca-Cola um so token vendor and then a dice game it teaches about Randomness how you cannot achieve Randomness by like simply calling random number generator and then building a deck so it gets like more crazier um and then you can go ahead and join build Guild come build with us uh and there are a few other CH uh challenges which teach you about different things about both solidity and why you can use ethereum what ethereum is good for as well as the coding part so how you can build a smart contract to do that but yes so I do have 9 minutes and 36 seconds l so if anyone has any questions I'm happy to answer

them um or yeah if we went through too fast and you want to double click on something we can do that for the last few minutes okay no questions do deploy to a test net you're putting me on the spot for sure so uh I let's let's try and do that while we have a few more moments left I'm going to I'm going to go over here here so that's that's actually a good question let's see if we can do that in 10 minutes you think we can do that I'm doubting myself but we'll see okay I redid the changes which we did because this is a really good question

and I do want to deploy to testnet I don't know what the error is but I think there is no error actually I think this is just say is my update owner not here uh uh uh oops because we need to redeploy so so Kevin asked what do we do if we want to deploy to a test net um and I don't want to waste time on the smart contract so I'm just going to remove update owner and then we'll try and deploy to the test net if we have enough time right so oh awesome thank you so much oh no but this is here no I did add it well we can just remove this button oh

but this button is not the error our smart contract is giving an error uhuh we did not inherit let's try again and maybe actually read there cool okay there was no error actually something I think um move too fast without saving uh but okay so we did everything on Local Host which is obviously you might want to be like okay now I want to go to the live test like not live but test Nets uh then you kind of and I'm going to go over here and I'm going to cheat as well to see like how you can ship your app because um I don't remember the exact steps but you basically need to change your network in the hard hat config or if you're using

Foundry in the foundary folder so um one other thing which we kind of touched upon is when you deploy the smart contract it automatically takes in like a hard head account so you don't want to you might want to be like I want to generate like a new account and use that so you can can run like yarn generate and let's actually try to do this there's there's not too many steps over here so I hope we can do this so first step is to configure your network and we're going to go to the hardhead config.sys change this but what I'm

going to do is I'm going to use Saia okay so the network when I think we can change it on our deployment script I go over here to the deployment script do I change it here uh [Music] uhuh let's see what okay oh cool we actually don't even need to change it there you can just specify it on your command I forgot about that but you can also change like the default network uh I sometimes do that for the ease of use but when I actually want to now this will probably not work because we don't have any money in our account but you can do like a yarn deploy Network and suppo and it will deploy our contractor

stoia now you might be like okay but it did not deploy it why did not deploy it because the account we're using does not have any e inside it and you need some money to actually deploy the smart contract um so it says like fun funds for a transaction not enough um and let's do that let's actually like generate let's V Yar generate so all the steps are in the docs by the way so basically it tells you you can run yarn generate to create like a random private key and then you can do yarn account to see what that account is and you can send Sephia eat so I'll do that and maybe Kevin will be very helpful enough to send me some seia e because I don't have any now my private key is saved in that

wallet now I do a yarn account it will show me like a a QR code so this is the money I have in this like randomly generated account um I have no money so um let's see if once we get we have four minutes so we can do this okay cool let's let's do yarn account to see again if it came uh these are the built-in networks but if you're like you know my network is not there you can go ahead to the hardide config folder and you can edit it let's try one more time to see if it

came I think it's a bit slow okay so we have one seoa e so I should be able to deploy this and um let's see if that's true or if I have or if it's not um so I do like a yarn deploy uh D Das Network sapoia perfect it's deploying I hope it will deploy then we can go to Suppy scanner and actually check to see if it deployed perfect so we deployed our smart contract now you might be like but did you really deploy it so let's go ahead and check that um okay let's just like not do

this um okay I want to actually search for I think I okay perfect you can see it here uh so we actually did do it does it show my uh it was like a contract creation transaction and this is the name of the contract which it made like the transaction okay now it's actually created so which address created it what is the transaction so let's see like the the the contract this is the contract that's created is this actually true you might be like yes it ends with A5 um so as you can see we just created our contract but you're like okay but this bite code does not tell me anything you probably want to verify this as well uh we have that actually built in SCA too so all we did was we created an account

we funded it so that we can pay for our transaction we deployed it to seia and now you want to verify your smart contract I not sure if it will directly it has a key here but you can run yarn verify Network whichever Network you're on to uh to verify your smart contract let's see what that does here verify Network apoia [Music] verifying taking a few moments okay awesome your contract is now verified so let's see if it actually is yes now the contract was automatically verified as you can see you can directly see our source code

blah blah blah consult like which um which it extends the contract ABI the creation code Etc but uh the most important thing is probably your Source your your your contract source code so now it's available over here so what we did like as you can see we did it another like seven minutes deployed our contract to stoia uh generated an account to actually deploy the contract from uh sent that account some money and then verified our smart contract and that that's all like quite fast um and we we have inside scaffold an Alchemy API key and an ether scan API key because you might be like how are you able to like verify it so fast because we have The Ether scan API key there but you're welcome to like you know get your

own key and change everything uh before you ship it uh we won't be moving to the next step but you can actually do like a yarn resell and you can directly deploy your like uh app live so if you're like I want to ship it I'm going to move fast ship fast and break things you can directly do like a yarn resell and then um automatically like send the app to be live so that is I I think if I do like a yarn wristle it will probably ask me for quite a few steps um because I'm not sure if my GitHub is connected but we we can try I have like 46 second I'm actually not sure if this will work

but we'll see uhuh no okay thank you Kevin oh okay we actually deployed it quite fast let's see if this works uh but it is f faster than I imagined oh okay let's um let's open my Brave browser to automatically authenticate 0 seconds left it's building my timer is up we should stop now um perfect but this is yes this will hopefully build uh this is the end of the presentation it

takes a bit time but as you can see we were actually able to even ship the app and um yes if we have a few more moments we can leave the screen on otherwise otherwise this is the end I hope yeah thank you for coming and if you remember one thing from this presentation it should be like speedrun ethereum.org [Applause]