BuidlGuidl 🛠 Building Apps on Ethereum - Austin Griffith

foreign [Music] and welcome to the super hack build Guild Workshop building apps from ethereum joining us today is Austin Griffith who will be taking us through this session and with that I'll pass over to Austin to get this session started okay let's go for it uh let's just dive in GM y'all uh you can throw some questions in the chat but I don't have much time and I want to get started quickly so I'm going to share my screen okay uh the first shout out is uh for oh man how do I shrink this a little bit oh not gonna do it the first shout out is this is the last day to attend uh to apply to the super hack so go apply to the super hack it's uh eath Global slash event super hack if you haven't already go check it out go apply okay so the first thing I'm gonna work on today uh is uh I wanna build an app and I want to Tinker with it and I don't know exactly what's gonna happen when I build this app uh a lot of this is going to be Discovery and that's kind of what I want to show off uh about scaffold eat and and this tooling is this is a really good stack for you to be able to try and discover new things uh maybe if you don't know exactly how you want your smart contract to look but you want to Tinker and figure it out so I'm going to be using scaffold eth2 uh you can find scaffolding 2 in the repo and you can just go here and kind of use it as a template create a new repo from scaffolding and get started from that but I'm going to use something completely different this is not completely different this is a new kind of beta software that we're going to throw in here and it's MPX create e so MPX create is uh definitely not a solid tool yet it's something we're working on but it's kind of like a Choose Your Own Adventure CLI for getting set up with scaffolding I'm going to grab the latest code okay and the thing we're going to build today is going to be kind of like a commit reveal uh scheme uh it's it's probably going to get front run so I'm going to call it front Run fun I think that's that's what we're going to call our app so I'm going to do an MPX create e front Run fun and I'm going to use Foundry this time and we're going to get started installing things so uh if I go ahead and CD into this directory we can get started kind of looking at the code and scaffold so this is going to install scaffold eat uh with whatever um stack you want whether you want a Foundry or hard hat let me check the questions here we are using the new Rainbow chat VM with greater the uh you know version one so uh if you want to look up kind of how to do things in scaffoldeeth there's a lot of our own docs but you can look at the Wagman vmdocs also okay so let's look at our code it starts with Foundry and we've got our contract here so it's a nice kind of template contract that helps you just get started it has a lot of you know Primitives and and uh kind of example code and then we have our uh front end our next JS and we can see that here once once it installs and runs it tells us to go ahead and CD in and uh we're going to do the deploy here so I'm going to run this yarn chain over you know somewhere else and that's going to bring up our Anvil I think right right and we'll get another one going with that we'll do a yarn start and that will get our front end going and we can open that up and then finally we'll do this yarn deploy here and that's going to deploy our example smart contract to our local network and set us up to Tinker around with that there we go so that's deployed so now if we look at this we've got this nice scaffolding front end we can go to this debug contracts page and we can interface with our smart contract and our smart contract is like a greeter contract I think it lets us if I grab some money from the faucet and I say like Hello World it lets us set some kind of greeting right yeah there we go okay cool cool cool uh I'm gonna carve all of that out though I want I want to start from scratch here which means I'm going to delete all of this stuff I'm not going to use that uh and also there's going to be a handful of things that will break in my tests so I'm just going to go ahead and kind of clear those out now just to save me uh the the headache let's see so in my deploy script I'm not gonna have anything passed into the Constructor anymore and then in my test script uh I'm going to probably delete all this stuff let's see something along those lines you can you can write your tests later uh this thing that I'm building right now I'm just tinkering I'm not sure exactly how I want it to work yet uh but I want to Tinker around and see if oops let's go ahead and redeploy that I'm going to deploy a completely empty contract here but yeah okay it works okay so now we have kind of a starting point so what I want to build is something to test whether I'm going to get front run on optimism so I want to deploy this to optimism so what I'm going to do is I'm going to have some secret that I store right and it's going to be the hash of a secret right so I'm going to have some like lights actually it's going to probably be a mapping from an address to uh bytes 32 and this will be some kind of like uh public commit right and then later on someone will have to reveal that commit and they'll be able to get some money out of the contract or something like that right so we're gonna have some function that will uh let me like do the commit and what that will do is let me submit some commit and maybe let's I don't know should we make it so I can only submit one I really should have some require statements in here and and a bunch of other things but we're going to do this kind of unsafely the whole thing is to just test like will I get front run or not when I when I go to put that secret on chain will I get front run or will it uh just like let me have the money so actually this is going to be a payable function too right and some money will come into the contract okay let's let's just go see that that works right let's just go deploy that and Tinker around with it okay so now there's some do commit and uh it's just basically you know I could submit any kind of hash and I could even like submit some some money along with that like zero zero one ease and there we go it does commit and then if I look at the commit for my address I get that right okay so then what's going to happen is there's going to be some other function that uh uh will let us reveal right this is going to be the do reveal function and in this case you will submit some other bytes 32 and yeah okay so I don't I want to do the hashing in another function I don't want to do the hashing here so so I can check it and test it and play around with it uh uh kind of as I'm going here so what I'm going to do is I'm going to have a get hash function here that takes in uh some reveal and gives me the hashback of the reveal and actually we want to put in the address of this contract just to kind of like namespace it so the hash doesn't get uh revealed anywhere else oh that makes this a view function okay so instead of doing this then we're just gonna check that the the get hash of the reveal equals equals some commit okay and then and then it deletes it I don't I don't know what what we're doing here but that that looks good okay uh and then and then maybe let's have some well right here we that we would actually pay people out so we would do some commit and we would take some money and then we'd do the reveal and if you correctly revealed we would send you uh all the money in the contract right so uh let's just anytime you're hacking around on contracts but there's always a solidity by example and you can go here and get all the the stuff what I'm looking for here is just like how do I how do I copy paste I want to send some eats right sending ether there's all these tricks of where you you would use transfer and send but call is the best way to do it right you do this like dot call thing here right so I'm just gonna go copy that and paste it in and what do we want to send we want so we want to do message dot sender dot call and the value will be uh probably all the money in the contract right so it would be something like address this dot balance I think and we're not going to use that and do we require it sure I don't know I'm letting set a kind of the the one thing I don't like here is that I could commit and then I could recommit something else I don't know it's this is not this is not like secure in any way right we're tinkering around we're trying to figure out like we're trying to play around with commit reveal mechanics we're trying to see what happens on mainnet let's just see if this uh even deploys the point is that you as a builder can Tinker around with solidity and figure out uh kind of uh do you think copilot is good yes I love copilot copilot is super handy I use it all the time uh in here okay so we we have a contract out here let's go see if it works the way we want it to so we're going to have some uh commit right we're gonna have some secret right let's just say our secret is hello world okay and we're gonna commit that with some uh amount of money okay I gotta hit that button too okay so so then this goes on chain and there is some commit uh for my address right and what we need to do is come up with the the reveal the the hash of that thing so this isn't going to work we're going to have to do a do hash and then a do reveal okay we got to do this a little bit different so what we have to do is first get the hash so we're going to have some Hello World this is going to be our secret okay and our secret is going to go in and it's going to give us this hash and then that's the thing we're going to commit with some value okay so it's the hash of the secret that goes on chain first with some I need to hit that button with some amount of money okay so now there's money in this contract and there's a secret that's hashed but you don't know what the secret is yet okay so then uh what someone has to do is do a reveal they basically have to type in hello okay let's just do hello and this should fail right it should say reveal does not match right but if we do it just right and we say hello world and we hash this hopefully this is gonna work boom it worked okay and what happened the money's out of the contract the money was sent to us okay so obviously we would need to do way more testing uh there's a handful of things that just make this uh not a good idea to deploy it to mainnet but more prototyping we're trying things out we want to see what happens we want to see that if or if not we will get front run so now I want to deploy this thing to a live Network and see what happens uh normally normally you would sort of Tinker around and then you would move over here and you would build a little bit of a front end um maybe maybe I could get to that in a little bit but I don't know if I will have time yeah let's let's do a little bit let's do a little bit so what are the basically the reveal function something something we we want to let a person maybe come in here and reveal maybe a commit I don't know exactly what I want to build a front end for I almost want to just play around with this on mainnet first and then come back and build the front end if I have time since we only have a half an hour and we're already halfway through it I think I'm just going to try to put this uh out on uh optimism mainnet okay and and then we'll see what happens with with that so so uh what we're going to need to do is we're going to need to do a yarn generate and that is going to create a local deployer account you'll notice with a lot of web 3 deployments a lot of ethereum stacks you'll see people copy paste private Keys around for deployments don't do that this this thing takes care of it it takes it creates a deployer mnemonic it puts it in your hard hat or Foundry folder it ignores it out of the gate so you can't accidentally you'd have to really work hard to accidentally Commit This and so now we have an account that we can deploy uh and it is uh this address right so I'm going to send some optimism to this address how much is it going to cost us to deploy IDK let's let's send in a little optimism here gonna use my punk wallet built with scaffold East on optimism gonna send some optimistic eth here go ahead and shoot that I don't know like is 10 bucks enough to to deploy I guess we'll find out sending ten dollars okay now to deploy I'm going to do a yarn deployed now your deploy is sending it to my local network right but if I Define a network here it's going to deploy to that network if you're using a hard hat you have to do dash dash Network and then optimism if you're using Foundry you just do the network but here it goes let's find out what happens you're on deploy optimism please work first try deploying to a public network spending real money just to see if we'll get front run just to find out this is definitely an F around and find out kind of thing we're we're seeing what we're doing okay so now I think our smart contract is out on optimism right we've we've basically done the first part of the deployment we've deployed our smart contract onto a live Network now the second part of this is switching our scaffold eth over to the live Network and you can do that in the next JS folder there is a scaffold eat config file I'm just going to hit command P here and just type scaffold eth and there we go we find this nice config file and right here here's a chain we want optimism oh look at that look at that nice like completion I can just hit control space and it's just going to tell me all the different networks I can have because of typed script I like that very much all right now I hit save right so so I all I had to do is change one line in this config and I hit save now my entire app is running on optimism every every address component in the entire app now when I click that takes me to the optimistic ether scan if I were to switch that to base then everything would go to the base so a base chain or if I switch that to Zora chain it's gonna all is originate right so one single line of this config and you've put your app on this new network okay so now let's go ahead and connect our wallet now we're using metamask right at first we were using burner wallets we didn't have all those prompts coming up but now that we're on a public network we can use uh a real uh wallet okay so now we need to commit a secret and then reveal it right and while I'm waiting on that I'm going to do I want to deploy my app to versel also so I'm going to do a yarn versus Cell and and normally this is going to complain that I have like I need to check my types there's a handful of things that you need to clean up before you deploy I'm just going to Yellow it to prod uh not the best uh uh uh let's see yes I want to set that up yes and let's see oh I guess it's just going to put it there okay cool so now it's deploying our app so we deployed our smart contract uh we switched it over to optimism and now we're deploying our app so basically like we're like 20 minutes in 15 minutes in and we can have a live smart contract and a live URL so people could go here and start committing and revealing and see what happens I'm just going to use the Local Host version right now with my meta mask and we're going to see what happens so I need to commit a secret so I need to come up with a secret I'm just going to say super hack that's an obvious uh secret uh maybe super hack exclamation point IDK because someone's gonna find this for sure uh super hack exclamation point we're going with it so this is our secret right here okay so now what I want to do is I want to uh get the hash of that okay and then I want to commit that so I'm going to put that on chain with some amount of money I don't know how much money do I have zero uh 0.01 I don't know what that is like eighteen dollars 20 bucks so 20 bucks if you can front run this right uh this is going to cost me real money to do this test uh but we're gonna see what happens here I have no idea what's gonna happen the cool thing is we can Tinker around with this right we tinkered around with the solidity we came up with the mechanics we want we put it onto a live Network now we're going to test the like live Network mechanics what happens when oh whoops I really gotta get used to hitting that button okay so obviously me hitting that button this is a very developer front uh interface eventually when you build this where your users can get in here and commit something you're going to kind of take care of a lot of this stuff behind the scenes so they don't have to hit this button every time but you as the developer you can Tinker you can debug even if you're debugging on mainnet uh here we go I'm going to commit this let's see what happens okay yeah let's do it so I'm gonna I'm gonna pay you know pennies probably and I'm going to put in 20 into the smart contract and that twenty dollars might disappear at media someone may uh be able to totally front run this anybody who's watching right now could go to this smart contract and go reveal this and uh not even front run me you already know the secret and you could put it in and win uh and also there is a live URL you could go to this this live URL so technically you could go to this live URL you could connect your wallet and you could do the reveal and win uh uh I I guess you know that's that's what it's that's uh that's what we're testing is hopefully no one does that in the amount of time okay so now what I want to know is if I do this reveal am I gonna get my money back or is someone else going to get the money and and we'll go find out what happens because basically I'm gonna put a transaction into the mempool that anybody could basically take my reveal and put it in as them and put a little bit more gas on top of it and they would win the money uh let's see is the money still even in the contract the money is still in the contract let's go see it on etherscan there's still money there uh no one has made a transaction on it yet uh let's see what happens when I try to reveal my secret uh will will I get front run or not so it what is it super hack you got to remember the secret super hack exclamation point okay so now I'm going to reveal this and the money should come out of here and go back to me but technically if there was someone watching a MIM pool they could reveal out ahead of me with higher gas oh reveal does not match oh no oh no what did I do let's see maybe I uh let's see what did I do wrong here super hack oh I had a I had a typo okay shoot let me let let's see super hack exclamation point pound go okay okay this time it's happy thanks for the catch I can't believe I typed it wrong with a noob okay let's see what happens now will I get front run or not who knows here we go let's watch the transaction uh live on optimism and see what happens it looks like I did not get front run I uh was able it looks like they eat came back to me okay well that's that's cool so okay so now let's do one more challenge uh we have like nine minutes left let's see what if I what if I make just like a little front end where you type in a thing I'm just gonna make a button there we go I'm just gonna make a single button all you have to do is go to the app and hit the button and you'll be able to claim some funds uh if if uh if everything works right that might be fun okay so I'm gonna have a new secret okay so my new secret is going to be let's see um uh hello world super hack okay that's that's gonna be my new Secret and uh we'll get the hash for it and I'm gonna commit that hash with 0.0 120 bucks let's double it let's make it 40 bucks okay so I'm gonna commit that and then anybody gonna goodness gracious I gotta quit doing that anybody can use the app and go make 40 bucks by submitting hello world super hack uh as the reveal and it looks like you won't get front run which is which is uh pretty cool but let's let's do this even easier I'm gonna make it so there's just a button right that you hit you hit the button and it just reveals it okay so let's go edit our uh we're gonna go to Pages we're gonna go to index we're gonna clean this all out okay and uh I'm gonna make a button with let's see well you know got to do a little front end yeah it's a button yeah it's a button okay and I'm just gonna call it reveal okay and what's that what's that gonna do uh that's gonna have uh an on click right and then on click is gonna do some kind of action right it's gonna do some kind of function here that's going to do some kind of reveal oh man what have I done there we go we're gonna have some kind of reveal happen in inside of this function but right now we just have a button that says reveal Let's do let's do one other thing let's just this display who you are for something like this I'm like your your address and to do that we're going to use the wag me hook use account okay and let's just put our address in here it's gonna just show who who we're logged into for some reason I'm just making some some fun little UI here giving giving the chance for someone to go steal that money I guess if they're watching closely and watching the chain and know how to uh to attack me okay cool so there's it's showing the address but that's really ugly right when you're when you're working with a front end you'd like it to look a little nicer let me show you the address component in scaffold eth okay so if I bring in this component from scaffold e then I set the address equal to address and we close that what do we get nice look at that we get this nice address right doesn't that look pretty you get you get the ens or the blocky you get the name you get the copy paste if you click that it takes you to uh the block Explorer let's do one other thing and add a little Gap here oh yeah isn't that pretty okay so I'm logged in as me and I want to do a reveal okay so how is this reveal gonna work I'm going to use a hook a handy Hook from scaffold e called use scaffold contract right it's very similar to wagme's uh contract right but we we take care of some of the wallet and provider stuff for you so we're going to go to your contract uh let's see we're looking for function name is going to be what's the function we want to call we can use typescript we want to do reveal okay and then the args will be uh some bytes 32 string right let's see what what is the actual reveal the git hash was like Hello World super hack oh man I hope I got that right uh yeah so that's the thing right we're gonna reveal that I have no idea if this is gonna work again we're just like prototyping we're tinkering around we're trying things out so now I have this right async function and we're going to call that do reveal okay and then in here we're just gonna call do reveal I have no idea if this will work uh but it looks pretty good let's let's uh let's see let's see let's see if this works so we should have like our front end we should have a button what happens when I hit the reveal button okay okay it's working let's see I have point two one nine six let's see what happens do I get do I get some money back yeah two one three okay so uh it's it's working okay let's commit let's do one more commit one more secret uh how about Rory and Kevin are cool okay so don't forget this and we need to remember this oh man wait is this gonna work it might not be a bytes 32 that might have been too long how about we just do Rory and together and then we we hash that there we go so here's our secret I'm going to paste it right into chat there's our secret okay and we need to put that here right okay and then I want to get the commit for that I'm going to put the commit on chain and I'm going to put in men more and more money every time this is not a good idea someone's gonna steal my money eventually all right we're committing fifty dollars fifty dollars Go Get It Go Get It I'm committing it to optimism go get it all you have to do is put in this secret in the reveal function uh but I'm going to make it even easier for you I'm going to take this secret and I'm going to put it behind this button and all you have to do is go to the URL let's go ahead and yarn mercel YOLO prod basically you just go to URL you connect your wallet and you hit the button and you'll be able to get fifty dollars okay it's gonna happen uh momentarily we've got three minutes before time is up uh I just want to reiterate today's the last day you can sign up for super hack go apply to attend if you haven't heard of the build Guild we are a curated group of developers uh we are building teaching material we're building tools we're all about onboarding and education within ethereum but we're also uh giving out scholarships we're giving small grants to up and coming high impact developers so check out the build Guild check out all the things we're up to uh today we've been building with scaffold eat two scaffold E2 is a tool for not just prototyping but putting production apps uh out onto mainnet like you've seen today and you can do it quickly right it's all about trying and testing your assumptions obviously there's some holes in what I'm building here but we wanted to test one mechanic and we were able to do that with with a commit reveal on mainnet testing for running we're also deploying a live app to a live Network so hopefully this shows you that you can prototype your app quickly and get it out to one of these fast l2s quickly and get it into the the hands of your users and really try try to make something happen all right here we go this this app has got to go ship it let's go we got we got two minutes left spending all this time waiting on versel okay uh let's see is the there's still point three in the contract is that right yeah there's still 55 dollars in the contract no one has stolen it yet the app is building uh we got one minute left uh shoot your questions in the chat if you have any uh this is Live on YouTube I'll paste the link into chat uh if you want to re-watch it please ship please ship remember we used MPX what was the the command we used at the beginning MPX create eth chill that one more time also shill it is not totally stable yet we are just getting started we're just getting this thing working give us feedback put in issues all of that okay our our production app is up and I'm going to paste it into the chat now someone should be able to go to nextjs Eta 341 iidj what a wild URL and they should be able to connect their wallet and if if their wallet is on you know the wrong network if their Wallets on rinkaby oh no that's not even going to let me do that okay if their wallet is on uh X die and and they connect it's going to say wrong and it's going to have you switch to optimism and then there's a reveal button right here you click that and you pay and you're gonna win 50 bucks okay so the first person to do the first person to get on this app and click reveal is gonna win 50 on optimism hearts hearts hearts thanks for being here for the build go use scaffold eat to build something cool uh hit reveal but someone hit reveal did you have funds let's see I'm still watching for this contract to have value in it hopefully hopefully someone uh uh steals it if not I guess I'll have to do it later but I'm leaving it up to you guys to go get that money out of there it's it's not that hard you just have to hit a button if this button wasn't gonna work it would fail here so it's I know it's I know it's going to work because it's letting me send it in it would fail ahead of time all right any last questions oh the reveal doesn't match the commit uh-oh uh oh let me see uh I'm pretty sure it is gonna work dang it I'm gonna I'm gonna be the one that gets the 50 bucks uh someone's someone's I hear people getting the wrong here's my transaction yeah I yeah you guys are doing it wrong I did it and it worked sorry I guess I guess I'm the winner dang it okay well next time next time you can be the winner uh it looked like people in chat were having problems so I clicked the button but I shouldn't have I should have left it up I shouldn't have listened to you to Brownies it was working the whole time hearts hearts hearts go build the scaffold league go build for the super hack go build on top of these awesome l2s they're fast and cheap and getting us closer and closer to mainstream applications go join the build Guild go speed run ethereum if you haven't yet speedrun ethereum.com is the best place to get started building okay I'm done chilling thank you Rory thank you here's a problem yeah there was one question uh okay do you think copepod is a good tool for solidity smart contract development I use copilot every day so you you have to be quite you have to be careful with it now and then because it'll fill in some weird stuff but uh I use it all the time and I would uh recommend others too to also use it but you just have to be careful you just have to keep an eye on like like just there it filled in like method name instead of function name and that could have totally screwed me up if I wasn't paying attention so the the AI can give you some weird things now and then but overall man it helps me build faster like uh react stuff solidity stuff both sides I'm I'm using copilot all the time for sure awesome cool uh those are the only questions I saw does anybody else have any questions before we wrap up MPX create app create MPX create scaffolding 2 speedrun ethereum build Guild super hack awesome I think that's the questions we have so cheers also thank you for this great Workshop I think you all for attending uh there'll be a few more workshops later today and uh yeah don't forget to Opening Ceremonies tomorrow Happy hacking happy hacking y'all