Go Codeless with eth.build – Austin Griffith

so yeah I'm Austin at etherium this will be about youth build kind of rapid prototyping web 3 how many people have heard of heath build how many people have used youth build to prototype something ok cool so I was wondering if I was gonna do an introduction or kind of like poke around at things maybe we can kind of do like a hybrid of that because it seems like about 50 percent so a quick introduction you you have these nice little blocks that you can sort of just quickly plug stuff in we've been using a lot of this today where I can grab a QR code from my phone and then I can you know split the the string or combine the string and make a CSV and do it what's that zoom in yes sir how's that he's still that screens weird with the like LEDs is it it's ok you can kind of see that can you read that that that is a hat I can't read that maybe now okay well that's about that's about a zoomed is that I can get ok so so you kind of have these building blocks where you plug an input in and get an output and you know it's a familiar thing you know for the last 15 years or so you could do this with a lot of stuff but in web 3 it's particularly complicated to build stuff and prototype stuff so I wanted to make this it's basically just started as just a tool for me so I can quickly poke at things and then it became more of like an education tool so I started building a curriculum for it so here is the the current curriculum and the curriculum basically is you can you can load in whatever I'm working on or you can go watch like a YouTube video of like me rapping through doing the episode so if we want to look at the keep our episode we can see that like okay I got it this keep air box I'm generating a keep air let's let's just start over actually so a key pair right we could generate a key pair we get private key out of it we get an address right cool cool and what can you do with the key pair right well we can sign and recover data or we can encrypt and decrypt data and there should be like a little warning that you probably shouldn't be doing encryption with your aetherium keys someone way smarter at cryptography could explain why I'm thinking it's more like attack surface kind of but this this is probably more for fun than anything it's kind of fun to encrypt a message and then send a transaction to someone with the data field basically encrypted with their private key so that are with their public keys so then they get a transaction they look at the data file that looks weird but then with each build you could just like quickly wire up a decrypt and see what that message is it's kind of fun but sign and recover this is these are the important ones so with the private key we can sign some kind of message and that's gonna come out over here and then we can basically broadcast that message across the network and someone else can receive it and they can derive that that was the person that sent that message I want to I want to do a network demo real quick cuz it didn't work yesterday so you should technically be able to publish and subscribe so if someone else here was working through this I wasn't sure if we'd be working through this or this was more of a demonstration but if we were working through this you could drop these same boxes in on on your eath build and it should let's let's do this please work so this totally did not work yesterday yeah it did okay cool so that went across the network so if you had a laptop up and you went to eath and you dropped in this subscribe not the IP FS subscribe but this subscribe you should be able to see please work showing up there somewhere so basically we've got a key pair right and we can sign messages what can we do with those sign messages this is like about 1986 or so in terms of where we are Merkle trees kind of popped up but there's kind of like this crypto winter that happens where we we have a distributed ledger we can sign these messages we can send them across this insecure network but it wasn't until like 2009 or so that the Byzantine generals problem was sort of solved with proof of work and and I get into that in a later episode here we go here's the blockchain episode where there's like this miner and he's jamming away at this and it's it's I think that the coolest introduction I saw to blockchain was it's like this it was like this HTML version where the guy like it had it very visually right have you seen that before and like you could see it was just like basically in HTML form for each block and you see the Nick next one and next one I should have a link here and so you can see we just mined this block so what I'll do is I'll copy that and I'll paste it up here and and what the cool thing about that demo is he ends up changing something way back in the thing and it like breaks everything so we should be able to do that here too while we're hanging out let's see what one thing that I found that isn't good about eath build is as I build things out and Patrick you probably ran into this too you just end up with this like giant mess of stuff right it's like you're building and it makes sense and it's very visual and then you get done and you like zoom out and there's there's like 80 boxes and it doesn't like clearly make sense what is going to what so where I'm trying to get this module system going on where you can drop a module in and then inside of that module you can set like inputs and outputs but it's still still a bit shaky so let's wire up this last block block just for fun let's see we'll go we'll go to goes into this guy so now he should turn into three up so he's gonna be block three and we'll hook our miner up to start working on this block and we'll I think you've run this back into this there we go so now the miners working on the block and so what we can do though is then we have this like block chain pointer right and it's pointing to the head now and it's telling us the height is two and we could even like go check our balance or something like that right but what we're waiting for is for this guy oh he did okay so he mined that block so basically we would point the head of the chain there now it's three my balance would change based on you know like Carlos's balance would have gone up there if we were to check it let's let's I don't know if this works I kind of want to by putting Carlos right here this probably ain't gonna work how did you know about that Patrick you can so when you drop a button in you can double click that and it puts it on a timer so then it just always clicks that button for you so you double click an action to get a button and then you double click the button to put it on a timer and then it just always runs but anyways Carlos's balance is negative eighty eight Carlos needs to get it together so the the cool demo here let me let me zoom out we can see our three blocks if I get in here and I change some little value in anywhere in that block instead of instead of Heidi receiving that it was high dough and I hit enter we see all the blocks turned blue basically kind of illustrates the fact that that data in that block is kind of like cryptographically sealed and any small changes to that destroys the whole chain and it kind of explains how the deeper you get in the chain the more secure it is and in the demo in the video I actually do I kind of like duplicate this setup so I have like I have the chain up to like block three but then I have two different miners working on getting to block four and I kind of explain you know how the network works it's decentralized and you run into issues with the network and uncle blocks it's and stuff like that and this is a great way to illustrate how that works and you can check that out in the blockchain section here where is it right there blockchain so you could watch the video and check it out this is a really fun when I show the stuff yesterday is the Byzantine general so explaining kind of like the problem of the Byzantine generals and how you know it essentially comes down to like this coordination problem or consensus problem between a bunch of generals who have to communicate over this shared network that could be messed with but this this is just I just think this is really pretty you can kind of visually see all these soldiers working for General Bob to try to find announced that you know creates this arbitrary leading zeros and a hash and if we get into the soldier we can see that he's just like crunching away on this hash trying to find since General Bob wants to attack at dawn he knows that his generals there so he can work on it and we can't even talk about proof of work and what that means and I get into in the video I talk about how if General Bob wanted to like tell General Alice like it proved his ability to wage war he could like cut off the toes of like cut off the pinky toe of all of his soldier and send it in a wheelbarrow all over to Alice and so when Alice receives a wheelbarrow full of soldier toes and it says let's attack at dawn then that tells allit and it's like signed with his keys so somehow it's kind of anachronistic but he basically proves to Alice that he has an army and wants to attack at dawn and it devolves quickly gets into soldier toe cutting off doesn't doesn't seem like a good way to wage war and then so so all of this is really leading up to the cool stuff that we do right like transactions so now we can kind of have a transaction block here and and we can use these same you know primitives of signing messages and sending them to an actual blockchain and and we can start talking to RPC endpoints and that's when it kind of really opens up for me and let lets me be able to like prototype things quickly so just up in the crow's nest we have let's see we'll come back to this just up in the crow's nest we were just now trying to figure out so we had people sending Buffett I to other people and to be able to receive XP you have to be white listed and we white listed the initial people but then we had some issues yesterday we have a lot of issues yesterday and so people just kind of ended up with buffered I so we needed a way to make sure we had XP to people and so what we what I was doing was just poking around with okay so what do we have here we've got the XP token right so if I go to let's see how are we gonna do this well we'll do a file input okay so I just haven't upload there right and if I go look at this it's empty but if I just drag that XP token over here and this XP token by the way is like the artifact that comes out of it Tyler we can kind of see like oh shoot that's an object let's go ahead and parse that right so now that we have that parsed we can kind of see okay now we want the ABI so I'll grab a property of that object what do we want we want the ABI okay so now I've got the ABI of the contract so if we want to talk to the contract we could bring a contract object in we can drag the ABI and okay there we go now we got all these cool things the interface with we want to know the address and the blockchain and so the chain is going to be died out boa is because we're running on X died and the address of this contract is buried in my notes somewhere let's see X P right there okay so yeah yeah yes please oh is that way too small yeah it's it's like how's this good okay so so we we dropped in our ABI we parsed it we pulled out the Oh we dropped in our artifact we parsed it we pulled out the ABI just like stuff you find yourself doing as a programmer all the time or if you're not a programmer you'd like to be able to just dive in and do that like I part so many CSV files in the last three days but it's so nice to be able to just drop one in and have this and then I can like save this thing somewhere download I can send it as a link I can download it I can load it in it so I kind of have this structure now that I could drag in I can basically drag in any ABI here or any artifact here throw in an address and then start you know talking to this contract I don't know what I can even get out of here David wrote this I but see what I can find here let's see who the owner is right what what kind of decentralization is this there's an owner of this contract yep that guy he holds the keys whoever he is but we can see that very quickly right and that and that's a really nice thing so what we were trying to figure out was what we were trying to do we're trying to figure out whitelist so let's see if I can find it I thought it was right up in here anybody see white list there's so many things what I need I need to be able to filter through this right I need like a box right here I can start typing white list and let it filter through [Music] okay whatever but you can see what's going on here let me see if I can find like one that would be a right instead of a read Oh sender list that's that'll work that'll work this is okay so this would be the whitelist of the sponsors and the NPC characters so now I know that I have the sender list so I've got an address okay but this is another contract so let's bring in another contract and let's snag this blockchain guy so I don't have to type that again it's hard when I'm all zoomed in okay so we'll bring in a new block chain the address of our contract will be this guy here and then we need a new ABI so I'll kind of stretch that guy out and I'll go over here and just grab this whole setup right this seems to work for us so then let's drop in I'm just I'm gonna leave it right there the white list and this should give us another ABI boom there we go okay so here's the white list now we could check to see if someone is white listed right okay so what should the user be let's let's let's let's see if I'm white listed right so we're in the heat of the moment it's war time things are breaking all around us we're able to drop these in let's go see if my Buffett out contract is whitelisted it for sure should be false but let's find out so let's say I'm gonna I'm gonna need to read a QR toggle that actually you know what I want to do I want to put some text in the middle of that so we can see the output if you guys have questions shout them out too like just kind of riffing on this there we go okay so it's currently false oh it's gonna be false no matter what what I need is a sponsor oh well let's let's do this first it's because it's gonna be false no matter what I do darn it bad bad demo let's okay so here's my QR code Boop there we go so reads it in oh that's totally not what I want but that's fine so what I want to do is snag all of that stuff off of there so I'm down to the address but it's gonna be false because I'm let's see maybe I have a sponsor wallet that isn't oh I got a better idea let's change this instead of looking at the sender list I bet there's a receiver list and let's plug that in and everything else will be the same oh it's hard to read you got it where is it I'll receiver let's got it yes awesome okay so let's grab our receiver list instead that should be an address awesome so instead of this guy we want to use this guy let's see how am I gonna do this it's game over here let's pull the receiver list in okay you ready ready ready let's put my user in here please be true yeah best demo ever so we just like went and talked to a contract to find out that I am indeed white listed to receive XP and this isn't like rocket science right like if you're a programmer you've probably done this or if you code within web 3 you probably done this a million times it probably just took you a little longer and that's the key here is when you're prototyping you kind of don't know if the thing you're building is even gonna be important and it's nice not to spend days building that thing if you could just like crank some ugly like crank some ugly thing out just to prove that it either does or doesn't work or just poke around at it and so what I was doing is I basically went through this flow this morning just to prove to myself that like this works or this this doesn't work and how do we get the buffer die but what I did was just kind of poke around and then once I have this I can save this and go back to it any time for red Prince but then I start coding you know I paste in my code and start writing and I think this is called a no code workshop but definitely we got to do just a tiny bit of smart contract I got four minutes last smart contract development right this is this is a lot of fun here so let's let's create a smart contract with a public function called set and send in a string something and we'll set our let's just call this word no phrase I don't know we'll set phrase to something okay compile what am I missing Oh memory memory memory okay cool so we're kind of like rapid prototyping a contract I should just have an auto deploying we'll see that the address change okay so we just deployed this contract to I think it's to a test yeah okay so I have a test chain if you use eath build there's this nice test faucet and test chain where there's just a shared instance of ganache running on my server and everyone can use it but it's it's really fun actually to be able to have like a jam session if like a few of us had laptops that we were all working on this we would all be on the same RPC we would all hit the same test faucet I could have my contract I could even like be publishing my contract to the network and you could be listening to it and so we could all be like grabbing the contract and working with it and so what you could do is you could from the network you could grab all this information here and do you could ask for the phrase in the contract and it would be hell out world whoo three minutes let's see if I can do this okay here's the set function it's gonna be a little different though okay so when you're doing a get from a contract that's easy we're just we're reading data or we don't do anything but when you do a set you actually have to make a transaction to that contract so let's see let's get a phrase going and you have to get this just right it's it's like pretty picky I remember watching your video Patrick where it's like let's see it like that hex string is not there what am I doing wrong and you have to like look back you have to kind of like sanity check everything so I need to do a better job of providing like feedback like oh this is empty but this is an object so you know whoo there and we can see now okay so what is going on here this is the call data that I would need to pass into a transaction to the contract to be able to change that phrase so I have this trans actor here we can dive in and peek at it it's basically just a transaction with a bunch of inputs that does it does things like to quay and kind of helps me get everything done and it'll send a transaction so let's use that trans actor to send a transaction to our contract okay so we're gonna send a contract we're gonna we're gonna send it a zero value okay so there's not gonna be any eat that goes along with this other than the gas that we pay for now the data field the data field will be all this hex and then hopefully we'll get a transaction out of that when I hook a button up to this and this is kind of a hack right now you can't do actions into modules there we go okay so we just put a transaction on chain to set that and hopefully when I hit this button we will see Ethan whoo all right whoo all right I think that's I think that's it any questions about each build or what what I would really like to do it in the future is be able to get this in a state where it's like all of these are kind of like my this is like my playground here like I can bring in meta masks or I can bring in open sea I would love for this component to basically take out the whole page right like go to the defy section and grab an AR die box and have that just be everything you need like wire just what you need to it like grab a yuna swap box and put in the token address or something like that so a lot to view here I think it'd be really cool since since the code is like this very small like do this on execution take this input do this and spit it out I could basically like bounty out that little piece of code right like ipfs is broken right now I should just create a bounty for someone to fix type ESS ipfs - so thank you any other last closing questions [Music] the basic functions I don't understand how to use them like how to actually create a new a new diagram right now I don't know how to do this how you create like one of these like a new box okay okay yeah so let's save this guy and let's download him and then I can just select all and delete I can like hit that button and delete there's a there's a few different methods to just clear everything but just like yeah it yeah maybe I need a button in here that's just like give me a new one and it just like clears everything for you okay sort of running out of time but you can continue the question over here [Music] you