DAPPCON 2024: Building Decentralized Apps Quickly - Austin Griffith

Transcript

yo what's up everybody last Talk of the day how's it going got a few people in the crowd yeah I still got some excitement this the beer started over here already I think okay yeah I'm Austin Griffith uh I'll be talking about building decentralized apps quickly and uh usually I do a workshop a lot of times I'm sitting here with a laptop building something and I kind of assumed that's what I was going to do here and I found out I needed to do a presentation so I'll do my normal coding Workshop but via slides kind of in the middle of this but uh I work at I work for the build Guild Dow and uh we do a lot of things in a lot of different areas but the the

tldr for building apps quickly is use scaffold e and I'll get into that more as we go but let's zoom out a little bit and let me just give you a little context about the build Guild and where where we're focused so uh the build Guild is a Wyoming Dow it uh consists of who knows I think we have like a thousand members or something like that that have joined uh but these are the three pillars we we focus on education tooling and Grant giving and let's let's kind of dive into each one of those in the toing section I will go through how to build decentralized apps quickly but I thought you know let's do some slides and let's let's uh give a higher level

picture so Education First we do a lot of Education we focus on onboarding we want to bring as many developers on board as we can uh we're kind of finding that yes price action brings in developers as sad as we want to be about it like people want to program money and they think they can make money programming money and you probably can and I know that's going to bring you into this space but once you land going to learn so much more and you're going to pick up the ethos and you're going to find out about what makes ethereum special uh so so getting you down that rabbit hole is our job and the farther down the rabbit hole you go the more likely you're going to stick when that bare Market comes around so we want to get you all the AHA moments as fast as

we can we want to put a little eth in your hands and we want to incentivize you to prototype and speedrun ethereum spends a lot of time really focusing on those aha moment moments and we built this curriculum in a way that will give you those aha moments i' I've done a lot of one-on-one mentorships and tried a lot of things and found these moments that work uh one example is the a web 3 Cron job is different from a web 2 Cron job it's not just something that checks in every hour from a computer it's the rules but also the incentives the incentives are very important if you create a system with the right incentives you'll get people to always check in and your Cron job

will run no matter if your server has fallen over or not and that's just a small example of one of those things that we teach and we want people to learn as they come in you'll take on the nft challenge deploy that cute little Buffalo then you'll take on the decentralized staking app you'll learn about the the superpower of ethereum is is giving you the Builder the opportunity to build right the rules of a system where people can coordinate together to achieve some goal in this case it's uh getting some funds together to then spend them on something else uh but you learn a lot of those rules and if you build this correctly the players of the game only have to trust the code they don't have to trust you the

deployer in fact if you deploy this thing correctly not even you can stop it and I think that's an interesting power of ethereum smart contracts then onto the token vendor you learn about erc20 tokens and the approv pattern and contract to contract interaction then the dice game you learn about Randomness which is super hard on a public deterministic blockchain then on to the decks right you learn about hyper structures and uh how to create expansive apps that uh have fee systems built into them that go to LPS and all what all of that even means right and then eventually you get the opportunity to join the build Guild and we provide

uh more uh mentoring what you all get to when we get to our bches program but I wanted to zoom in here this curriculum is not a copypaste curriculum you cannot just follow along and learn you need to actually write solidity and there's a lot of moments like this where it's like okay you're going to need to create a mapping name balances and you're going to need to create a threshold set to one eth and then you need to write the function where someone stakes and they make sure that you know the the threshold is reached or you update the balances right you're going to have to write the code we just make it really good and clear and there's good debugging for you we've built a lot of debugging into it so you can really understand what's going on and try to

make it look nice along the way and then you'll build up your web 3 portfolio as you build these things you you'll have a whole list of these cool Concepts that you've conquered and we have an autog grader so you'll turn in your smart contracts on chain and we'll go look at them and run them in our own isolated environment and make sure that they're correct and then you get uh awarded that it was accepted and then you're uh you unlock more challenges so that's the education wing of build Guild we do lots of devil we just held a workshop today we had a workshop uh we had 20 or 30 maybe 40 people in there uh and we basically went through some of the challenges of speedrun ethereum and our

some of our tooling which I'll get to next so scaffold e is our main Tool uh it's built by a uh kind of an inner Circle within the build Guild called the sand garden uh where we focus on making very intentional apps uh and what we're finding is scaffold eth is kind of a starter kit of starter kits we're seeing lots of people Fork scaffold eth to and use it for interesting things uh we were using the scaffold Bas earlier today to deploy an app on base and really it's like 15 minutes of work to go from scaffold e to scaffold base but it's just nice to have that little push in the right direction we're going to select a chain for you when you do a yarn Fork you're going to Fork main net

base just some nice things that come out of the box with a starter kit okay building decentralized apps quickly that's technically the title of this talk and let's pretend I'm giving a workshop now because there will be some screenshots and I'll be coding away uh but let's start with scaffold eth we go to scaffold eat.io and then you can copy either one of these you can clone the repo or you can do this MPX create eth and MPX create eth gives you kind of uh Choose Your Own Adventure and we're going to add more uh templates for different things and more extensions for adding new things to your app uh but at first the first question is just hard hat or Foundry right it's still kind of a people will argue but it's still kind of

a 50-50 thing and so we want developers to be able to choose between the two uh I'm selecting Foundry here and then it gives you uh it kind of installs things and it gives you the option or gives you the hint that you need to go run these three things right you need a CD into your directory then you need to yarn chain to spin up your Anvil then you need to yarn deploy to deploy your template smart contract and then you yarn start and that'll start your Dev server so I have all three of those things here you can kind of see the chain on the far left and then in the middle there's your Dev server and then on the right there I've already deployed my contract and this is what it looks like you get Local Host 3000 you get scaffold eth and uh it's a web app ready

to go uh it's going to handle things like your wallet it's going to handle things like if they're on the wrong Network it nudges them over to the right Network it's going to have all these nice little components like this address component where when you click on it it takes you to the block Explorer of whatever Network you've set your app to be on it's just something that we've built lots of apps and we've gone to hackathon after hackathon and this is our starter kit this is what we like to build when we go to prototype when we go to build an app to prove that we can make something work we're grabbing scaffold e every time a lot of times I'm doing it on camera too and this is the what is this what do we got going on here I feel like maybe I went too far uh

yeah scaffold e oh maybe this is the debug contracts so if you click the I think yeah you can't I can't see it on my screen but you can see it up here we were on the home page earlier now we're on the debug contracts page and this is a critical page so this is going to Auto adapt to your smart contract as you add things to your smart contract yarn deploy they'll show up here automatically and this allows you to Tinker with your contract and test your assumptions and try things out maybe you don't know exactly what you want your smart contract to do you know am I going to use an array am I going to use a link list am I going to use some kind of struct sometimes you need to Tinker with your solidity a little bit to figure out

exactly how you want it to work scav is great for that you can just sit down and try things and test your assumptions so let's pretend I'm adding some code I get into my my Foundry smart contract and I'm going to add a an beneficiary right and then I'm going to add a set beneficiary to it by the way the contract that comes with scaffold e is like this classic greeter contract where there's a string that's saved and you can uh add a greeting to it and that'll go onchain uh but forget about that I'm just right at the top of that I'm just adding in some extra code here so we have if you if you remember back here there's a greeting there looks like someone has set the greeting to building

Unstoppable apps there's an owner uh then what I'm going to do is add this beneficiary and add this new set beneficiary function and as soon as I hit save and deploy that locally then we get this set beneficiary function and we see the beneficiary is z the zero address so so right after we write the code we can see this right away in the front end and we say okay so beneficiary starts at zero I've got this function and let's make vitalic the beneficiary right so I type in vitalic doeth it does the ens resolution for me it gives me a nice ens Avatar it shows me his address and blocky and I hit send and it sets him as the beneficiary so I say okay my

code's working basically the the owner can set the beneficiary and it works and then what I want to do is try the the inverse of that can a bad guy get here and set the beneficiary so I come in as a second account and I'm using burner wallets here they're basically private keys in local storage great for local debugging I uh with a new burner wallet kind of like our bad guy burner wallet I fund it and I get in here and I try to set the beneficiary to the bad guy tried setting the

beneficiary and it didn't work so now we know that that is owner modifier is working and we're testing our assumptions and of course these are not exhaustive tests but they're great for quick tests to kind of test your assumptions and make sure it does what you think it needs to do so let's just pretend like the contract does what it needs to do we've tinkered with it we got it working now we're going to move on to the front end this is kind of the second phase after tinkering with your smart contract is starting to build out some of those damn react components and so here is our homepage and I've cleaned some extra stuff out of there and then I'll get into the nextjs app right everything we've been doing so far is kind of over in The Foundry folder now we're going to move over to the next JS

folder now I'm going to get into the app and I'm going to use a hook and this Hook is built on top of wagy we use wagi V2 and uh tailwind and Daisy and VM sometimes uh but you can go look at all those docs as you're building your things uh but what we're doing here is we're doing a contract read what I want to do is read from the contract and keep that state in my front end use scaffold read contract will do that I give it the contract name then then as I type in the function name it just gives me this auto complete and this is really important it's looking at my smart contract over there in The Foundry world and giving me a hint about what function I want to use I didn't write hardly any of this code

between co-pilot and the suggestions I'm basically hitting tab more than I'm hitting anything else and then here we put the we we get the beneficiary at the top and we store it in our state and then down at the bottom we're going to Output that beneficiary so what does that look like there it is okay cool we've got our beneficiary there 0x d8d very ugly right if you want to make this look good let's take that beneficiary and let's Chuck it in one of those address components that comes with scaffold eth out of the box a that looks much better you got that ens Avatar you got that ens name you got a little clicky copy button very nice and uh I guess vitalic is the beneficiary so what if we wanted to build a front end to

allow allow us to update that right we're going to need some kind of input scaffold e has an address input when you're building apps for web 3 you're going to need addresses you're going to need address inputs these are kind of new components that haven't really been around before scaffold eth has all of these out of the box so you notice I have some State new address some on change that updates that uh and then it gives me that nice text box there so I type in atg doeth or I paste in some address and it gives me this this kind of nice ens Avatar ens name blocky all of that stuff out of the box Okay so we've only read from our contract so far in our react now we need to write back

to our contract right again we're going to wrap that use right contract from wagy and we're going to use use SCA write contract just does some extra things with the wallet and some extra abstractions but look at this we just get we we create this write your contract component and then I can call write your contract with a function name and it's going to tab complete when I do that first little quote after function name it's going to give me a list of all my functions I choose set beneficiary then for the args I pass in that new address that we've been tracking in the state and we get this nice little button and I type atg doeth and I hit set beneficiary and vitalic sad because now I'm the beneficiary awesome Okay so

we've basically built our smart contract we've added a beneficiary system then we built our front end what we kind of built our smart contract we tinkered with it in that debug page then we moved on to writing our front end and now I'd say we're we're pretty good it's pretty it's pretty ready to go let's deploy this thing so to deploy an app with scaffold eth you do a yarn J generate and that creates a deployer account you're you're going to keep it in a specific place where it's already get ignored you you you would have to try hard to commit this thing to get right we see developers accidentally commit private Keys now and then this is a one-time use private key that lives just in this directory that you're going to

fund with a a burner wallet or something with just enough money to go to deploy the contract very isolated and hard to screw things up then you do a yarn deploy n-- Network so you've been doing a yarn deploy locally trying things out now we do yarn deploy D- Network nosis and we deploy our smart contract to nosis and then there's one more change we need to do we need to tell our app who is currently pointed at The Foundry local chain hey let's let's work off of nosis we type in chains. nosis and our whole app now switches over to nosis you see it in the top right if I click any of these addresses now it's going to take me to to the block Scout no you

know the nosis block Explorer and let's see uh I probably type in atg eth and I hit set beneficiary and we see the transaction is successful and then there we go I'm the beneficiary and that was all on chain right this was all on nosis so the last piece we need to do is deploy that front end this is the most fun command yarn versel YOLO prod that's how I do things right and that sends your app all the way to versel I think you might have to get in there and change a setting now to say hey make this public but after that you get a URL and anyone can go to that URL example Berlin dap something something something they can connect their wallet and they

can use your app and that's the most important thing you're able to write a smart contract Tinker with it and make sure it works deploy uh build a front end deploy your contract to a public chain deploy your app to a a public server and then anyone can go to your app and connect their wallet and and use it so that's building decentralized apps quickly you really can uh although these were just screenshots I promise you really can build an app in like 40 minutes with with the right knowledge so that's our tooling uh and then I'll finish this off uh with some cool things that are happening within the build Guild so in the grants area we started with eth streams it was this smart

contract right here and this smart contract is different than almost any other streaming contract you'll see uh first of all most of the time it starts full I trust you I'm going to deploy a contract I'm going to load it up with some eth and I trust you to go build what you think is best for the ecosystem and you can withdraw from this smart contract the other weird thing is it sort of pauses when it fills all the way up this is something we noticed most ethereum developers start as night nights and weekends developers maybe you're around and you're doing some cool contributions then you get busy with something else that's okay if you disappear for a while and come back your stream will be paused full waiting for you and so I started streaming to a bunch of people I like an idiot deployed

that code that you just saw to main net like 100 times shouldn't have done that uh but we're supporting a ton of devs with these uh eth streams and then we were like well we kind of want to do this like group stream thing so at the same time we had build Guild Labs which is kind of like a devil more over on the education side but toward the end of this series we were like let's build a streaming smart contract and at the these bottom three things are building that streaming contract here we are live looks like eda's a little stressed in that last one sorry Eda uh we built this uh cohort streaming that let you stream to a group of people and then we really leaned heavily into Jesse's Hacker House and all the really great hackers that Jesse was Finding and then even our

internal group the sand garden started using this to fund their Builders so we part we partner with some ecosystem Heroes we have a huge list of these uh things but grants is really the best way to go we started giving small grants uh and with those small grants we've streamed over 772 eth and that's it that's build Guild we're education tooling and Grant giving thank you thank you so much Austin great to see the evolution of Bill Guild and uh we have a few minutes for questions for for Austin if if you're up for it I know it's the end of the day here any questions for

Austin there were also more slides there I just stopped because my timer ran out that's okay though could we could we bring the slides back up I could show off a little bit more if that's okay if I have an extra five minutes let's do it yeah everyone's out like I want to go get a beer come on man yeah yeah okay so uh then build Guild has this back office where we control everything this is like our app and this is where we can see kind of all the recent builds from all the builders we we see the activity what what people are posting what they're up to we can even see stream withdraws every time someone withdraws from their stream we get a sweet you know update about what they're working on looks like Hunter uh added a default frame to scaffold base

and he's working on the burner wallet that sounds exciting okay so we noticed something within uh the onboarding process where we were kind of a little bit too quick to give streams and we needed something in the middle that gave us more feedback about a builder and that's where the batches program came from and really this came from Carlos in the sand garden they were like let's build this thing and and uh I was just really excited about it as soon as I heard the idea but basically what we do is we advertise to you within the build Guild app which by the way none of this stuff captures information about you you connect your web3 wallet and you share what you want to share we never take your email we never do any of that

so it's all like very web three native but we do throw up an advertisement to you now and then and say hey come join the build Guild you've you've learned how to build a token vendor and a staking app and uh a dice game and a DEX you you know enough to at least start asking the right questions right you're not the blind man feeling the elephant anymore you've got a pretty good idea that you have a lot to learn right and so now we're now we can be a little bit more oneon-one with you and we can spend more time with you we're going to bring you into a telegram group with like 20 other people and we're going to circle up around a GitHub repo so we're going to teach you get etiquette we're going to teach you how to make a PR we're

going to teach you how to contribute to open source uh just to make sure you know how to do it there's there's a bunch of challenges here where it's more about just making sure everyone knows how to contribute to open source and everyone can make PRS and then the builders kind of set their own page like for each batch we sort of have a website for each one and they can kind of control what that looks like and then as you go through the build Guild this grant system is open to you any anybody once they go through these batches once they join the build Guild can connect their wallet and say Hey I want to build this thing and that's going to show up to us and we can choose you know whether or not to Yol YOLO you half the eth to get started some apps that are coming

out of build Guild we do a lot of prototyping and building ABI ninja is one of my favorites you can give someone a link to ABI ninja and basically what it's going to do is you tell it the contract and the network and then what functions you want to show and it's going to do an automatic front end for that smart contract so in this case I'm talking about the die stablecoin on mainnet ethereum so whatever that address is SL one for the network and I want to show them the balance and the transfer function right all of that is one URL that I can share to someone they land here and they basically get this View and you can see I put in vitalic address and read that he has 1818 die and then I transferred to

Patricio I don't know 10 10 die or something uh another app that we have is hacked wallet recovery uh this is another Community built app from within uh the build Guild sometimes when you do leak your seed phrase uh that that eth gets swept but sometimes there's remaining assets that the bot didn't sweep what you can do is use hacked wallet recovery to create a flash Bots bundle and that bundle is going to Never Land in the MIM poool it's just going to fund your hacked wallet pull out the assets you need to a safe wallet all uh atomically without hitting that M poool and let you sweep your assets out address vision is another fun one you go to addressvision you put in a uh an

address or ands and it's going to tell you all about that address even if it's a safe right it knows if it's a safe and it knows what the threshold is and it knows who the owners are just a really nice quick way to look at apps and then the punk wallet is kind of a predecessor of the burner wallet it's got all these different networks and all these different tokens on these networks and it's a quick app that you can build with there's a lot coming soon from the build Guild uh call to action if you're super rich yo 420 to the eth uh if you're not go build something that will get users if you're not even a Dev tell your Dev friends to go speedrun ethereum thank you I'm Austin at ethereum hit me up my

DMs are open thank you Austin we we didn't even talk about Nifty Inc I was hoping you're going to talk about that one but thank you so much about Nifty Inc like dcon 2019 I was talking about the idea of an app that pays for the user's gas and you come in and you provide value you create something something first and then later on you sort of start worrying about your seed phrase and your account that's what Nifty Inc was about and I was talking about it then we built it and deployed it and it kind of that all that meta transaction stuff sort of led to uh yoab and GSN doing all that cool stuff and that was like kind of a predecessor to early account abstraction stuff in 4337 they did all the work I didn't do any of

that stuff I just prototyped early versions but Inc was that yeah thank you thanks so much for the talk