Web3 for frontend devs - @AustinGriffith at @ETHDubaiConf

Transcript

thank you guys very much can everybody hear me can we do something here let's see if we can do a live demo so what i want to show off is scaffolding so scaffold eth is a repo that helps you get started quickly building applications if you uh uh go to the repo you can go to if you just google scaffolding basically you're going to find it here scaffolding right and that is the repo it's just uh it's a dap package that comes with everything you need with hard hat and react on the front end so what i want to do is just basically build a quick little app but before i do that just to make sure that everybody knows like the most important thing here is speed run ethereum

i'm on eric's laptop here so hopefully all this works there we go okay so most important thing of the talk if you know developers that are thinking about getting into web3 if you are a developer thinking about getting into web3 if you're a mobile developer a devops guy whatever it is go to speedrun ethereum it will help you onboard quickly a couple of weeks you can have the whole web3 mental model uh there's an intro video and then you'll use scaffold eth to go through building a simple nft a staking app a token vendor then you'll build the dex and it'll kind of get you into this little social network of other builders full screen oh oh wow pretty wide cool that's that's pretty good

the the point here being i spent a lot of time in mentorship sessions with a lot of developers from around the world and i found what works and what doesn't and what is a good way to teach the mental model for web3 i think that this is a really good example the staking app is probably the first challenge you'll take on it's not going to be tutorial hell where it like guides you through everything you're going to have to think for yourself and build a smart contract yourself so you will need a little bit of solidity knowledge going into it but you can get that kind of up here and it kind of explains it but building a decentralized staking app really is a superpower of ethereum getting people who don't trust each other to coordinate right getting jerks to coordinate financially is something that you can do with ethereum and this

is going to teach you how to do that it's just a few lines of solidity so most important thing if you're a developer if you know developers tell them to speed run ethereum okay now that we've got that out of the way we've got an extra 20 minutes i can try to deploy an app and we'll see how we do here so uh here is when when you get scaffold eats downloaded you'll fire up a hard hat with yarn chain you'll fire up a react app with yarn start and then you can just yarn deploy all you want and you can yolo your app to localhost let me see if i make that way bigger there we go so we're just deploying an app now if we go over here here is our front end so let me let me do that deploy again

yarn deploy i think i need to do a dash dash reset for there we go let's force it all right so yarn deploy and we're going to deploy another smart contract and we'll see that show up right over here so the second smart contract shows up there and let's try that one more time okay yarn deploy again now watch over here we should see that there we go a new contract right so is that audio okay is that okay oh get get that mic out of here as we say okay so so we're able to uh quickly deploy uh a contract and then we can use an app to interact with it right so let's dive in and look at this contract real quick we've got a string purpose

just some arbitrary purpose and then we have a function called set purpose right and something really neat in there thanks to hard hat we've got a nice console log in our smart contract okay so then over on the front end i'm gonna grab some funds from the faucet you'll notice that we're not using metamask yet we're on localhost and we're using burner wallets no worries about chain ids or nonces or even using some of your insecure metamask you know production accounts right we're just making a burner wallet and we're using it quickly so i can say hello world here and we are setting the purpose okay so let's start writing a smart contract let's get into it uh let's see what what can we do here oh let's draw the console log real quick right let me show that

console log one more time if i say hey hey hey yeah boom and then we see the console log over there that address said hey hey hey okay another thing i want to show is wallets if i open an incognito window and i go to localhost 3000 i'm going to go to the app you'll notice we've kind of got green guy over here and then we've kind of got like old pink guy over here look at that smile he's really smiling about something let's go ahead and grab him some funds from the faucet and let's go and say hey i'm pink guy right okay and pink guy is also interacting with the contract green guy can go read that so we're just showing that this is kind of like this massive multiplayer kind of vending machine that we can interact with with anything and also i

want to just show that those those burner wallets work that way where if you spin up a new uh browser you'll get a new burner wallet to interact with your app so the key here is that you're able to make small changes over here in your solidity and have kind of big results happen and be able to tinker with it over here in the front end and just kind of get a feel for things so i would like to i don't know let's let's make a token let's see what happens here contract uh i probably need to go to let's see open zeppelin right token contract something like that let's go over here i'm gonna do lots of copy and pasting best the best developers do lots of copy

pasting oh this isn't going to take me to the github is it here we go here we go what i want to do is just bring in some token and let's see oh let's go here we go and then copy that right okay so ooh almost something like oh man i did it totally wrong there something like that i think is gonna work right oh no eric thank you okay here we go now let's save that what is this like is

drc 20 and then we do like a little erc20 over here and this is going to be like dubai coin or something like that uh and dbc huh do you beast okay something like that right let's see oh it's not liking that let's go ahead and yarn compile or yarn deploy over here and see what it yells at us about did i save that i think i did okay uh oh no oh no what did i do wrong oh here i'm sorry there we go please work oh no

here we go here we go this is going to be it make us a token please yes okay so now we've deployed a token or we displayed a token locally thank you [Applause] it's 2020 and we deployed a token so what you'll see here though over on the front end is that you know a lot of this interface has changed that dynamic interface has changed to have some new functions here and that's pretty cool what i want to do is maybe build like a mint function and and we'll make it payable right and we'll say something like actually no let's just have people pay the gas right let's let's have let's just have a mint function that anybody can call

we're not going to set a purpose we're not going to do that but what we're going to do is have them mint something right we'll just uh mint to the message dot sender uh maybe like one ether right something random like that and then let's go back over here and deploy that and you're kind of just kind of iterating back and forth you're tinkering with your solidity you're kind of learning you're testing your assumptions and then over on the other side pops out uh another mint function here somewhere there we go and if we call mint there we go now we can see that total supply going up as we're minting right okay and then let's do let's see so we're allowing people to mint how how long do i go for here oh no no depending on how much i went out okay so

we got about 15 minutes okay so let's see what else can we add to this to make it more interesting maybe like some require function that only lets people like mint today or something like that right is the lock.timestamp maybe needs to be what like less than uh oh we're gonna have to have a now right we're gonna have to track some un256 like public now or deployed right and we'll set deployed when we deploy it to the block.timestamp okay and then we'll have to make sure that

block.timestamp is less than uh like deployed plus uh what 3 600 times 24 or something like that totally just dogging this out who knows what will happen you know happy little trees and whatnot just kind of putting something together here just showing you that you as the builder you don't have to be a genius i am not a genius you can just get in here and start tinkering around and kind of learn ethereum as you go so now i'm guessing that uh our mint function is only going to work for the day we let people mint something all right let's go back to that idea of that purpose and setting the purpose so i'm going to redo that you know what i'm going to have to i'm just going to do this it's going to be crazy i'm going to redo i'm going to undo a whole bunch boy

i hope i don't mess this up i want that set purpose function back actually now that i'm thinking about it oh please don't mess up okay what i want to do is i want to have maybe a set purpose function now and i want to set it up so the user has to burn right let's see let's have them burn uh from message.sender uh one of those tokens okay so you you can go to the contract and you can mint some for just basically spending the gas and then any time later on like this is only going to work for a day but then any time later on we allow someone to get in here and burn one of their tokens

to set the purpose so we have like this maybe like this attestation machine that we're building here that we charge people some tokens to to use let's see if that works i probably am not going to add anything more to it if i had my own laptop i would probably have some other examples that i could copy and paste in here and do things a little bit wilder but i feel like just to be safe and make sure i get this thing all the way to production i think that's about the end of what i want to go with but let's test it first locally i should be able to mint a few we should be able to grab my address here and check my balance of you'll notice how like there's this nice blocky preview here and when i click that i can see the

result you probably can't see it but it says three each right there right if i go mint another one so we're gonna allow people to mint for a day if i wrote the code right not sure if i did but they should be able to mint for a day and then at any time in the future they can go to the set purpose function and they can say hello and it should burn one of their tokens when they do that so now my balance should go down and let's make sure that works ooh yes very nice okay so our app is working now you'd spend you wouldn't normally give your users this clunky interface you would spend some time building out an example ui you'd spend some time like creating

controlled uh state within react we'd probably you know show your balance and do a lot of other things i'm just gonna assume that there's a lot of react developers out there and you could shred through this and whatever you want and i'm just going to give us this ugly uh ui to to play around with but we have our set purpose and we have our uh our mint i wonder if i could even yeah it's not even worth it okay let's let's let's put this thing out into production okay so uh what we need to do so now that you've tinkered around and you've got your app ready to go it's a really kind of a short step to go to production uh from scaffold eath we'll need to yarn generate an account real quick what network are we going to go to

that might be the other question i need to have some some eth on some network i might actually just try mainnet unless anybody's like hardly against that anybody any hard nose on maiden end or should i go for it and see what happens okay okay okay all right so here's the yarn account so what i did is i did a yarn generate now i i saw a demo yesterday where uh they were passing around private keys you really shouldn't be passing around private keys scaffolding will create a mnemonic for you within your directory when i do a yarn generate i've got a mnemonic here all right now i'm going to use a punk wallet punk wallet if you've ever been to punk wallet dot io you get a little nice cute little deterministic punk here here let me show it let me show it

a punk wallet you get a nice like deterministic little punk here look at that look at that and then you can kind of scan that and when you scan that with here let me hear let me try oh this is this going to use my camera it's going to use your camera all right here we go here we go all you have to do is oh hello hi everybody hearts hearts hearts so here's my punk wallet and if i show it there it is there's my little zombie so we can see that i'm sending some money uh from this punk to my little my little zombie but what i'm going to do is i'm going to do that same thing here i'm going to scan this qr code and i'm going to send like 150 bucks right now boom okay just send 150 on mainnet ethereum

okay now i'm going to assume that that will go in a little bit we'll wait for that block to get mined and then what do you do you yarn deploy uh dash dash network mainnet right mainnet and let's you know what let's be a little bit more surgical about our gas usage too uh how do i see the files here top that one there we go got it let's get into our hard hat config and i think there's like a main net what's uh what's mainnet gas at anybody got the mainnet gas going on right now maybe like 40 way should be safe right all right here we go ladies and gentlemen yarn deployment a contract that we

just wrote out i just installed scaffold eath on eric's computer we just wrote this contract out now we're deploying uh to mainnet we've got a transaction hash that's a good start all right all right so you'll have to make one other change we did that dash dash network now what we need to do is our app is still pointed at localhost so we need to make one other change here and we'll change our front end we didn't spend a lot of time in the front end but the front end is here and you can spend a lot more time getting your ui looking right but the one thing i'm going to change is i'm just going to point our app at mainnet and and before i do this i want to come back over here and talk about this for a second so see this address this is a an

address component in scaffolding anytime you build a decentralized app you're always going to have addresses that you want to display anytime you display an address it has that nice blocky preview has a nice copy but this also goes to a block explorer i have no idea where it goes on localhost actually it goes to etherscan this isn't going to be a very good demo if i were to switch to optimism or something here and hit save i'm going to hit save and it's going to go to mainnet and nothing's going to change because it was already going to mainnet but if i were to set this to optimism or arbitrarium or polygon and then i were to click this it would take me to the polygon block explorer so by changing this one thing in your app you point your whole app at that new network

and all of that address links and all the things that are network specific switch over to that new network okay so our app is actually ready and it's on mainnet i'm guessing our contract is on mainnet there there she is okay so this is we're halfway done right if you're cool enough that you can deploy a contract and people will come interact with it on ether scan like if you're dom level cool but most of us are not dom level cool we need to also build an app that goes along with it right so how do we get this app into production well we need to yarn build right we need to get a static version of our app going and then i'll push it up to surge or something and then everyone out there if you want you could get on and actually

mint some of these tokens and do hit our attestation machine so let's see i want to give maybe i'm going to give this burner wallet a little bit of mainnet eth also so let's jump over to unless we want to use metamask we'd have to use your meta mask i don't know i got flask installed oh okay let's not mess around with it then let's go all let's go all burner wallets shout out to metamask though at this point you really want to use metamask you should not be yoloing heath on mainnet with a burner wallet it's just not like it's just made for not mainnet networks but we're going to go for it just to see what happens here okay so if i send like 70 65 sure go i'm gonna send

sixty five dollars for my punk uh oh oh i've got like a base fee error that was super weird uh we may have to use a meta mask let's try that again uh not a thousand it sent fine to that other address i'm not sure i'm getting like a base fee error now i wonder if i've done something really wrong here do you have main ethereum in your metamask should we connect it let's try it you need money yeah i can send money well i thought here yeah can you type a password real quick no looking no looking sounded out how we doing on time here too seven minutes seven minutes

sorry uh this is in my test wallet okay and it's like oh it's like this nice little hey you have the wrong network selected you need to be on mainnet cool we'll prompt you to go to mainnet awesome do you have any mainnet you don't have any mainnet dollars let's try let me let me try sending you some let me try redoing this i don't know why it didn't let me send it at first let's try sending another hundo please work fourth try i think it did i didn't get an error that time yeah there we go okay so we got a hundo coming in here to your metamask uh i'm just gonna assume that's gonna happen in a little bit okay so what do we need to do we need to call the mint function so as soon as we have some money we're going to call mint

oh our app is ready okay so we did a yarn build now i'm going to do yarn surge uh dash dash domain what do we want to call this thing uh dbc coin oh man dubai coin ai coin surge dot sh all right now normally you would also push this to ipfs it's not really a decentralized app if it just lives on surge super secure password let's see if this works all right now our website is actually uploading you would want to upload to ipfs and other places you would want to give i mean like uploading ipfs and

giving everybody the ipfs cid would be like the way to go here but we're going to also upload it to search and we're going to have the website ready to go for anybody who wants to visit it so uh now you should be able to go to dubaicoin.surge.sh on your phone or laptop or uh device of choice and you should get the app that we just built in the last 20 minutes on eric's computer there it is okay let's connect in eric's meta mask again okay okay actually now let's do let's do wallet connect this time let's wallet connect in here we go connect wallet connect let me bring in my rainbow let's let's just you know like open up the ecosystem a little bit here and let me scan

after i send 100 bucks to your wallet let's see so it's thinking it's thinking pedro is thinking pedro it's still thinking waller connect uh-oh uh-oh we might be switching back to metamask ah it might be the internet though it might not be let's see turning off wi-fi let's try that one more time you can take a few extra minutes if you haven't sorry bro no it's fine here we go let's try connecting in with wallet connect and let's use our rainbow please work second try on a different network it's still loading pedro

somewhere between mike demarai and pedro i shaking my fist and probably just the internet right it's probably not either of their faults but it's fun too fun to throw blame around throw shade okay i can't get it to work let's go back to eric's metamask and there's a hundred bucks on it let's go oh i didn't even need to type in a password why didn't i just do that okay so now we are at dubaicoin.search.sh we have our ugly ui that we could make look a lot better uh eric has a balance of zero okay and let's go down here and call the mint function and pay some gas all right what's it gonna cost us six dollars totally worth it totally worth it

all right so you have the next 24 hours to mint dubai coin at dubaicoin.com and then you can use that to buy coin as an attestation coin to get back onto this website and go to set purpose and each time you set the purpose it's going to burn one of your dubai coins and set the purpose for everyone to see on uh dubaicoin.surge.sh and we were able to do that really in about 20 minutes so this is for rapid uh decentralized application prototyping right there's so many times i spent weeks or months building an app working on getting a smart contract just right handing it over to a front-end developer they spend another few weeks getting the

user experience and the ui right and then you give it to your customers and no one gives a uh hui about it so you you really want to get your product to market and get it in people's hands first and see how it's used right now we're spending a lot of time with dow tooling dowser decentralizing and they need sufficiently decentralized tools and they need them yesterday so we're building all sorts of weird things to like give tips out to to everyone in the dow or buy a beer for everyone who signed on a multi-sig all sorts of like little tools that we need to make decentralization work and make dow's work and so that space is just growing rapidly and instead of spending six months in the dark building a dow tool you should be spending six days with scaffold eath building a couple

different prototypes and see what people need okay uh did our did our transaction happen let's check and see if we have a balance now oh oh yeah we got one all right here we go i'm going to set the purpose to the most important thing here is speedrun ethereum if you have developers that are interested in learning about ethereum if you have web 2 developers anybody who's good at programming they can go to speedrun ethereum and within a week have most of the mental model and it's a very uh straightforward quick uh curriculum let's let's see small speed run ethereum one last time before we're done remember speed run ethereum i'm meaning it into existence you're

hearing me you're getting sleepier speed run ethereum okay awesome i bet i bet that happened oh we're still waiting for the purpose to get set but holy moly we just deployed we just built and deployed a smart contract to mainnet and then we built and deployed the front end application that talks to that main net contract and put it on a public uh url so anybody in the world can now go to that for the next 24 hours and mint that coin and then use that coin for an attestation for some reason uh i think there it is it's set speedrun ethereum the purpose is good all right i think that's it thank you guys give it up for austin griffith

thank you guys hearts hearts hearts speedrun ethereum you