Bootstrap your Ethereum dapp with one simple command

foreign [Music] hello everyone so I'm gonna be giving a a workshop on bootstrapping your ethereum dap with one simple command um this is something that I worked on the past few days because I wanted some requirements that I couldn't find so yeah we'll get right into it so my name is David and I am a developer experience engineer at Tycho Labs psycho is helping to scale ethereum it's a layer two ZK roll up so if you're not familiar with rollups it's essentially just taking some of the work off of ethereum's main chain and doing it securely on another chain which is called Layer Two um there's a lot of different options out there for what we call byte code equivalent environments and what I mean by that is um you know when you deploy it to ethereum you're ultimately compiling a contract to some byte code which you and that is the thing that actually gets executed by ethereum's virtual machine um so there's a lot of different options out there Tycho being one of them and we strive for really high equivalence so the nice thing about uh having these various environments that are quite similar in ways is that we can deploy to them in a similar fashion um right yeah so I'll talk a little bit about what Taiko is doing um so we are we consider ourselves to be a type 1 ZK evm as I said and that means that we're ethereum equivalent in the sense that we reuse execution clients such as uh Geth and we don't really change anything at all so of course we don't change the evm but we don't change that the way um the gas is priced for evm execution the gas cot cost for the op codes and we don't change how um we don't change the storage trees either um so to get back to the idea of the talk which is a lot about developer experience the most important element here is that they are at least evm equivalent in bytecode equivalent so that you don't really need to change a lot of your workflow as a as a solidity developer so we'll we'll show that as well um okay so I wanted to just quickly go over how deploying contracts works on Layer Two um in case you're not familiar with it so deploy a contract on layer one you need some if that you send from some account and you create a contract to some node and the way that it works on Layer Two is you need to have that same amount of if or some amount of Eve on the reflected in the layer 2 Network so the way that this works for most places like how it works at Tycho optimism and there's also bass now as well um you basically collect some eth from a layer one faucet like a test faucet such as Gorly or sepolia and you send that Ethier to your layer one account and then you use a bridge to get that test if on Layer Two and now that you have that testif on Layer Two you should be able to create a contract um by calling a layer 2 node which as you said should be evm equivalent so you can just do the same call to that node and you can deploy a contract um and and put it on the the roll ups state okay so a little bit about what the tool is and um why I'm presenting it here um so it's basically a simple repo that you can just clone and um it's laid out as a monorepo there is a svelte front end um and it's pre-configured with some simple CSS components that you can just use um it uses wag me web3 modal and a new command line tool which is pretty cool called wagme CLI this is a way to make um the Abi's generated automatically and have type safety I'm also using Foundry as the back end so to speak to develop the smart contracts and just some sane defaults um that are configured in the environment files which I'll show and also I'll show you how we can configure this to automatically deploy to Fleek which is kind of like versel it's just a deployment environment and I mainly made this tool just because I found some of the other ones on GitHub lacking for what I wanted to do specifically the integration with Foundry because I think Foundry is a really excellent tool and using solidity makes a lot more sense than JavaScript for the deployments and testing your contracts so that's the first reason and the second reason is I think we have a lot of Builders here um and I just want people to not have to think especially new developers to not have to think so much about how do I navigate all this new stuff that I've learned like uh how do I deploy these contracts how do I get them on these different layer twos like Tycho optimism um and and just make it a more seamless experience so you know hackers and can just get the building and and build something cool um so the goal of this Workshop is yeah just quickly get the hacking in your project um I'd like developers and Builders to focus more on learning than having to think about tooling um and how to like just initialize all of these things to get started um and give a seamless and easy workflow so that you know you can enjoy developing on ethereum and FYI this stack is somewhat opinionated uh mainly because I'm using svelte uh when I think a lot of people are familiar with like react and using things like rainbow kit it's it's definitely has a broader ecosystem um in the react World so this is just an option for you um if you wanted to use some of the more common tooling like rainbow kit next.js definitely check out scaffold if and on top of that you can just use this um repository and Tool and you can pretty easily swap out the svelte front end and use nexjs so um let's actually build it let's put this here hello okay um cool cool cool uh yeah so this is the repo it's um it's how do I share this link easily oh if you want to try to pull it up I'll leave this link up here if you do want to work on it now or I'll have Links at the end but in case you wanted to walk through with me this is the link it's github.com D1 o n y s one US slash dap hyphen slaps um and yeah we'll just walk through it together and show what this tool does so you'll first be greeted by this readme which will have a quick start and the first thing that you need to do is just click on use this template so we'll do that and then we'll create a new Repository so you can just imagine you're you know in your in your hacking group for the hackathon and you're just going through this workflow um I I'll just call this my demo repo all right so now I have the repo cloned and I just need to take this repo that it created on GitHub and clone it on my local machine so I just have an empty directory here and I'll just follow this command to um oh actually let me grab it from here okay so now I have the repo cloned and the next step is execute the setup script this is the quote-unquote one command I was trying to like in the future I might do this in a slightly different way but this should set up the whole project for you aside from just cloning it um essentially it'll just install The Foundry dependencies um install some node dependencies and copy over some environment files so I'll just do that internet here is a little bit slow um but the project uses pnpm by the way which is a little bit underrated I think especially at hackathons where the internet can be really slow um because it caches the packages so I'd highly recommend pnpm if your Internet sucks um Okay cool so we're ready to rock we executed the setup script and yeah there are two of the things we need to do here so um I think that it would be really useful for hackers um to create a mnemonic right and the reason why you might want to do this is because a mnemonic essentially means if you're not familiar with it is usually you have like a private public key pair you're familiar with like your private key but you can just create a mnemonic which maps to multiple keys so if you want to have multiple test accounts um you can just create one mnemonic and this is a really easy way to do it it's also kind of suggested if you're out there hacking in the wild west that you just don't use your normal accounts so I suggest you can just create a mnemonic and um you can just go here it's really simple you just can select Eve um and just generate a mnemonic and here it is um I already did it but yeah you can use this and and I'll show and I'll show you where we can put that so as I said here you obtain a mnemonic and then you set the mnemonic phrase and packages app and so typo there um yeah so that would be right here I'm just gonna echo my current mnemonic I think I I already have one I don't care that you can see it because there's not any real funds or anything important here um unless you want to just take my test net eth which I just have a little bit of um so yeah I set the mnemonic and then the other thing we need to do is we need to get a web3 modal project ID I'm using web3 model because it has good support for uh um um for for HTML which is what svelt uses and and rainbow kit didn't work out as well so yeah you can click this link here and you can get a um a project ID for wallet connect um you just you need to sign up for an account and then you can get a key so I also won't do that here but it's really simple you just get a key and essentially um after we fill out these two environment variables um we can oh thank you okay cool thanks um yeah so after we set these things up we can get to um building um let me just see if I have this on my in my environment I don't let me see here I have it um okay um let me see if I can sign into this really quick and get the project ID all right here's the project ID so I'll just copy that in here and yeah after that we can um Source these environment variables so that our app uh ends up having them all right see here um okay I have a a I use fish and it requires me to do environment variables like this um let's see I think I think it's fine because I think my environment already has these in variables so um it'll it'll all be good I'll be able to pick it up because it's already on on my path um Okay so basically um now I can just show you like how this workflow is going to actually work um and the way that I recommend doing this is you open up a few different terminal tabs so I'm going to open up three right here um and you can use whatever you want just open up multiple windows but um the first thing that we're going to do is we're going to start a local chain with Foundry right and Foundry uses anvil in order to spin up this local evm chain so what I can do is I'll pass in the mnemonic that I have and it'll use this to bootstrap all of the accounts so you can see here it uses this mnemonic and now all of these accounts have some if right and what's really great about this is I can use one of these private keys and I can import it into metamask and then I can start testing with this so now we have a local Anvil node started and then one other thing that I'm going to do here is I'm going to deploy a um a smart contract to this local Anvil chain um that smart contract you can find inside of the contracts folder here it's a really simple contract that just sets a string variable and I will deploy this so to do that I just do Forge script deploy and I set the RPC to anvil um and you can see here I've now um created that contract on Anvil um and there's also this utility called cast where you can interact with your local Anvil chain and you can get some information for example now the block number is one because I just deployed a contract so now I have this local Anvil chain running and I have a contract deployed to it so now I can just start the app um and I can just do this um pnpm filter command um this is just a mono repo command and I just call the dev command to start up a local server and yeah I can essentially let's see here Okay cool so the reason why this error came is because we um I need to generate the abis from the contracts that we just deployed so that the front end can use those abis so I'll go ahead and do that really quickly so the way that works is I can just go here and I can do a pnpm wag me generate and by the way all of these commands are written inside of um the readme under common commands so it'll be really easy for you to just uh deploy something and generate these apis Etc so now I've generated the abis and if you want to take a look at at how that works is um if you go to this out folder you'll see that it creates the ABI and the type definitions for the foo contract which we'll interact with on the front end web application so now um ideally this won't have an error all right this is live debugging out here so requires project IDE wallet connect version two so I think that this is because it is not reading this environment variable correctly so I'm going to switch it back to this original format and see if it works okay cool it does um awesome so now you can see here um um that we have the app we have like two components you can oh yeah we have these two different page routes configured um and we just have a simple um way to write to the contract and and read that string I'm gonna if you remember I deployed on Anvil so I'm going to switch to my local Anvil Network um and where I have some of this if and let's see here um and I think I need to configure um the contract address um so let's see here you can if you go to these um template files I show the things that you need to configure so there's this um Foo address which that uses I'm just gonna deploy the contract again because why not um and it'll the output will give me the contract address um and now I have it here [Music] um yeah block number is two so I'll set the contract address here um and you can see here it's now loading the um the message hello world right so this is like um a really seamless experience now so if you go into contracts um where um where all this uh all of these um The Foundry configuration is um you can change like for example I can just change this message uh to something else and it won't show the new message now because I didn't update the contract address and I also didn't deploy this but now I can deploy this again to Anvil right and now I can take that contract address right here and I can put it in the in the environment um here you can update it and now um did I get the right one let's see here I think I copied a old address I scrolled up too far um foreign okay cool now it says hello world change this message so and yeah so that's essentially how we can deploy contracts um really easily and um you know you can deploy these to other chains as well for example um at Tycho um we have a um and a devnet right now a test net coming uh soon we we just had our original test net and we're having another one soon with um zero knowledge proofs integrated but um I can deploy it to that RPC as well so for example um I need to put this Legacy flag which is sometimes needed um if the rollup doesn't support EIP uh 1559 yet um see I'll wait on the receipt this is a devnet so it could take a little bit longer to deploy the contract but yeah you can see we we were deploying to our local Anvil node which is great for Rapid development but I think a lot of people are also going to be wanting to build on layer twos so uh we can just show how how we can do that as well with pretty much the exact same experience that I had deploying on um on Anvil like nothing has changed at all I literally just changed the RPC here um from Anvil to Taiko um and it's the exact same experience so now I can take this contract address um I can update the contract um I can update it and then all I would need to do is switch the network to Tycho um and yeah now it has this message for this deployed contract and if I want to update something like hey new message um yeah I'll just write to the contract update the message um again it is a devnet so it might take a little bit to see how the transaction is doing um yeah in the meantime I can walk a little bit through uh the um more through the code base so let's see here essentially um if you want to run any kind of you know um you can run everything from the root of the mono repo so you want to compile your contracts you just do like a forged build you can do Forge tests and you can run some tests and also if you want to install some other Library like for example I think one popular one I think is a little bit of a bigger package but I can try to install the open Zeppelin Library uh um okay like get sub modules wants me to have a clean staging area uh um what is the difference here anyways I'll just check out these changes and I'll just show how we can install um some some libraries that we can use in our contracts like opens up one um you can also use like soul mate and and other popular solidity contracts um yeah so I think the internet's just a little bit slow um and you can see here now the message was updated um so yeah it's it's um I'll just cancel out of this because it's taking too long but I'll just show how we can you know we can deploy to really any evm equivalent Layer Two that's kind of the takeaway that I wanted to give as um you know for example here I can deploy to base as well which was built on the op stack um and yeah this will just take a little bit but yeah now the contract is on base so you can see you can just really deploy this on any Layer Two easily and um kind of have this have the same experience um and yeah if you if you walk through this repo it's it's defined like um pretty simply you have a um a wag me uh client which is inside of a a globally accessible store if you look at the main component which I showed uh during the demo you'll see here that um the abis are automatically read in from that uh as they're generated so you don't have to worry about passing around apis or anything like that you can just generate it after you compile your smart contract and yeah that's essentially the tool um the last thing that I just wanted to show here is like after you um you uh do this project you just um after you clone the repo you create your your own you can set it up to have deploys to Fleek so that you know if you're working on a team and you want to see how deployments and things work you can just get automated deployments so I'll just show that really quickly um I know I only have a few minutes left here but um let's see here so maybe I have another example of this um all right cool cool um so I'm just gonna add a new site just so you can see the full workflow of how this works um I'll go to a personal GitHub account I created this my demo repo that we did in the beginning I'll just do the default steps you don't need to worry about any of these build commands or anything like that because I already configured it inside of this Fleek Json file which will install Foundry it'll install Forge it'll generate the types and um yeah it'll it'll build the DAP um so yeah you really just need to click the deploy site um and after that's done I'll just demo this by making some random file I'll just add that uh and I'll just push it up to GitHub so now you should probably see um on this my demo app repo that yeah there's a job triggered now um and this will just um deploy the app so that you can just share it and um and use it so yeah and you can also configure it so that it will show deploys on uh branches and PRS that you make and it'll show deployment previews so um the future for this tool is kind of like to add some next.js support via command line installer so if you don't want to use svelt you don't have to um yeah I think spell is like really really simple to use so it could be a good option but we should give people the option to choose what they like to build on um the another item that I'd like to have is kind of just automatically resolving these contract addresses on network change so as you're seeing I would deploy to some Network like I deployed to my local animal node I deployed to Tycho I deployed the base and I got a contract address each time I would need to update the environment um of the DAP to know what is the contract address that I'm dealing with so it's kind of like only aware of one chain so one thing that we I'd like to do here is just automatically resolve those contract addresses so as you change the network it knows what the corresponding contract addresses are um and yeah you know we're just trying to like minimize the amount of things that you need to think about um really just want developers to come and build on ethereum and layer twos so feel free to just clone the repo and get started it's not going to be a lot of steps to just start building something and yeah it's it's just a developer experience is something really important um at psycho and just ethereum in general to get more people on board and yeah thank you very much um I hope you find use out of it uh you can scan the QR code to learn more about psycho and as I said we have a upcoming uh test net with zero knowledge proofs integrated and you can follow us on Twitter for updates um also feel free to open PRS to the repo um and we would love to like or I I would like to make it more of like a public good kind of a thing I don't want to just maintain like a separate fork or anything like that if this is something if these ideas can be implemented in a more popular project like scaffold I would love to just merge these in there as like an alternate branch and we can just work on making this a great experience and lastly if you have like any questions at all about building um daps or building on ethereum or you have problems with a tool throughout the Biddle week just feel free to DM me on Twitter um hit me up at my email address and I can I can help out so thank you very much for your time and um I think I at least have at least two minutes for some questions if anyone has uh yeah um honestly I don't have that much experience like um using uh the hard hat version even this Foundry one to be you know just just to show you like you can learn these things really quick um but the experience with um Foundry was pretty good and but but the problem you might have noticed is that we every time we update the ABI right you need to go in and you need to do a um this generate right which kind of sucks like screw that so what you can do I just didn't show this um but you can create a new tab right and what I can do is I can do a watch um and I can watch this broadcast folder so every time you Deploy on um Foundry this broadcast folder will get updated and it'll show for each for each chain the contract address and um and everything like that it'll give details about the transaction so every time we get a change here we can just generate it on the fly so these kinds of hooks are things that we want to have even like building the tool I just thought it felt like a lot to say you know generate you know create this watch script create the local Anvil and everything but I think you can have a really frictionless um experience um just using this watch flag all right then uh thank you very much [Music]