Optimism 🛠️ How to ship a dapp on OP Mainnet in less than 30 minutes - soyboy

foreign [Music] and welcome to the super hack optimism Workshop how to ship adapt on op mainnet in less than 30 minutes joining us today is soyboy who taking us through this session and with that I will pass over to soyboy to get the session started sweet thank you I'm going to share my screen real quick and then we can get into it all right hello everyone thank you for attending this Workshop in the next 30 minutes I am going to show you how to ship adapt on op mainnet using our optimism starter kit so I just quick rundown what you should expect um I'm gonna do a quick introduction and background on myself a demo on how to use our hackathon starter kit and where you can get more support and I'll leave I'll try and get some questions in during the presentation but most likely I'll take them at the end so first off um I'm sorry boy I'm both excited and a little nervous to be presenting this Workshop to you today uh not too long ago I was on the other side of these workshops and I couldn't be more excited to share that a couple months ago well just under a couple months I started as a developer sport engineer at op labs kind of been in this space for over five years just like flying around running nodes doing hackathons starting and abandoning side projects until I stumbled upon optimism about two years ago now I was doing a little reading and saw a couple of Carl's presentations and I was very intrigued so I started contributing to the collective but like my red pill moment happened over a short span of time this year when I received retroactive public goods funding and at the same time my employer at the time just snooped the company of over 900 people because they were embezzling money so obviously it wasn't a great situation my son wasn't even six months old my wife just left her job to take care of him and my last paycheck bounce but thankfully I had a nice safety knob I came from contributing to a future that I believe in and this is kind of why I'm here today I have that bandwidth to you know apply at op labs and and this is how I'm going to show you how to deploy adapt to op mainnet in under 28 minutes so let's get into it so first off um if you need testnet ether optimism has a faucet clean this out of the way I can share a QR code so optimism just put out of the super chain faucet um other test net coins are coming soon you can get a little bit by connecting your GitHub account or if you have an Optimus nft you can get one test net ether per day so you can go ahead and check that out today I'm going to be running through this starter kit here um basically this is um a boilerplate for y'all to get to get up and running during this hackathon so um I'm going to open up my terminal are you guys getting background noise I would have been in my airpods because it's kind of loud one sec okay I'm sorry about that um yeah my terminal open okay cool and to start we're gonna we're gonna make sure that we have node installed um which I'm pretty sure we do uh this this one was tested on version 18 so I'm gonna use version 19. um and then you're gonna need Foundry which is like a smart contract development framework um you can download it simply by doing this curl command and then doing Foundry up and that'll download it for you so um I already have it downloaded so it should be fine hopefully and then uh the next step is to clone the repository so you can grab the URL here but I have the already cloned um so I am going to open that up and share my screen cool so before we get running uh the first step you want to do is you're going to want to copy this um dot env.example file and you're going to want to fill this out with API keys from the different services that we're using and the A and the RPC URLs this will like help power you know the back end and it'll get you up and running quickly and it is a requirement um but all this stuff is free so it shouldn't be a big deal you're going to copy it to your own file and Dot EnV file um I'm not going to open it up because then I will share all my keys and that's not ideal for me um and then once you have your environment variables set up uh the next thing to do is you know install your dependencies so you get your node modules you get all your dependencies and you're ready to rock and roll um and then you can do npm run Dev and if that all went smoothly you're going to be able to open up and see this screen here um and then I can kind of talk about what's here um you can connect your wallet this is my testing wallet and what we have here is um is the front end it's powered by the server thing V and it's an extremely quick tool we have the rainbow kit which gives you a great connect wallet button that you just saw it lets you switch between networks and see um the account information here it lets you kind of abstract away the wallet connect stuff so you can start building the interesting stuff and then on the back end which we'll walk through is via wag me which powers and generates the react hooks for the DAP um all this stuff is really cool I I wasn't digging into a lot of the developer tools and they've gotten a lot better lately so this step here is hooked up to our v0 of the attestation station it's a very simple smart contract that allows you to make attestations about wallet addresses basically it's just very straightforward reason right you can add a message confirm the transaction wallet and then we can get going from there so I'm going to switch to um actually I'm going to switch to op or LED this test Network and I'm going to show you a quick demo hello super actors a test they should open up the wallet you can confirm the transaction it gives you a nice link to Ether stand it indexes it ideally pretty quickly yeah very fast and then it updates um the smart contracts with a new attestation hello super hackers and then the wag me hook it like kind of waits in the background grabs that information and it just displays it for your users um so this is like the high level on the outside of the depth so we can go ahead and like do a quick Code walkthrough as well so I'm gonna kind of migrate over here and I'll try and make this a little bit bigger for y'all maybe two bidding um to start I guess I'll start with the front end code it's all in the source directory here it's pretty straightforward react stuff uh you got your root of your project in here uh your components but you're going to add in this is the attestation component um what I was talking about with wag me is like in in our scripts here we have a very nice um when we run uh the dev script we do run wag me and this generates all of uh the smart contracts uh ABI information all of the functions and so you can use it kind of negatively in your front end part so we it creates this generated file and this has all the information that you're going to need to interact with the smart contract you know I checked it out it's pretty neat um so just walking through the simple component what we have is you're going to grabbing the address from the connected wallet just some state for setting attestation a key value pair this is just how the version zero of this contract works you just write and read basically like a Json or a dictionary or whatever like that and then this is the cool part right here with wagme it generates these hooks So It prepares the right to the smart contract with your arguments you know you feed it in there and when that's all set and ready to go you're going to use the attestation right um which is also generated by wagme so and then this looks right here it um this one it waits for the transactions and then this is going to guide your user flow so like on success you can you know direct what happens next if it refetches the page or maybe it shows something else to kind of guide this user Journey um yeah so that's an overview of the front end stuff um getting into the actual smart contract code this is The Foundry arena in contracts here in Source you're going to see that station station like I said v0 of this contract and it comes with a counter a simple counter contract some tests for it and scripts so these are the deploy scripts that will take your environment variables and then deploy it onto the blockchain so I'm going to clear out all this mess and we're going to kind of show you the the next part which is kind of neat not that I'll show you that later okay so we got through generating the apis and react hooks um deploying the contracts so this is pretty cool so we killed that um we have a very nice voice script already set up and ready to go it's here it grabs your environment variables it uses Foundry to compile your contracts oh this is an older version um it uses the RPC URL to write this onto the smart contract it uses your private key for your testing wallet to sign it and pay for gas and then it uses etherscan to verify so if you wanted to deploy this counter contract all you have to do is do npm on deploy and LED that command that I walked you through it'll start um compiling the contracts and then it'll Deploy on to the test Network so this is my address that I deployed from this is the address that we're deploying to transaction hash and that it was verified so if I go on to etherscan here you'll see it's deployed um you have all the contract information from its verified verification and you're able to even interact with it directly through etherscan which is pretty cool um The Next Step is how you can develop with the front end and the smart contracts together in a local environment so what we're going to be doing here is we're going to be developing with Anvil which is a it'll take a fork of um an OP chain and then it'll allow us to deploy to it and work locally so I actually updated this but I don't have the most updated version so it looks like we're going to deploy Anvil but what we want here is ADD test station that's that's the contract so we can set it up I didn't pull the latest version sorry about that so to get your local Anvil work running you do npm run Dev boundary and that'll spin up the front end on that server and it'll also give you um 10 testing addresses so these are the the available accounts they give you ten thousand ether and the private keys yeah the wall mnemonics and right now it's listening to the local blockchain for different events to happen so if we want to deploy our smart contracts we can do npm run deploy Anvil and this will deploy the smart uh the attestation station smart contract onto our local development blockchain so this is the Anvil um a wallet that they generated for me and you can see on our blockchain our local blockchain it was deployed there so what's really neat too is that now we can connect our wallet oh no you've been logged out give me a sec okay sorry about that um we can connect to The Foundry local blockchain so as you can see it updated locally as we connected and what's really cool is that we can take these addresses here and we can just import them directly into our testing wallet it'll any import account there you take the private key from Anvil import and now you're testnet rich here so if you want to switch you can go ahead and connect this new wallet here and now we have the front end connected to the local blockchain that we're running and if we make any interactions with the front end it'll process it through this forked blockchain so a little super hackers I'm going to test and we're going to use our Foundry wallet here to confirm and it's all very quick it goes here hello super hackers and it sees the information is put in processed there um I'm going to take a pause here and take a look at the questions that are coming through looks like does this deploy two pieces well can you show as I say ether scan interaction uh yes um yes so the first question I don't know about the second one if you want to deploy to a different chain you're going to go ahead and go to your wagme configuration here in the root of your directory and you're going to add different chains here right so if we're adding base you're going to want to add base and the address there and then um you'll want to take a look at this deploy script and make sure that you're using the right RPC URL so you're going to want to like talk to the base RPC and then you want to make sure that you have test net ether in a base wallet as well so that should work uh what's the main difference between the starter kit and scaffold eth ICS that it's just like the tech stack that um we're using um the what is it supposed to show at the top here um this one is with optimism wagney Foundry rainbow kit and Veet um and it's the most modern and robust web 3 full stack development stack I think I don't know what the stack is for scaffold the um but I'm assuming that it's like it's got to be somewhat different otherwise we probably wouldn't have made it uh okay so that answers those two questions kind of getting back into this so we now have showed you how to deploy onto a local test net we have Foundry up and running we can use the command line to do deploys or interact with the contract we also have the front end running and going so you can iterate on your projects quickly so you can be making changes on your front end without having to configure the back end so that's kind of like the takeaway ideally you'll be able to use all this together in conjunction to make a cool dap for the hackathon um I and I realized like the name of this is a bit of a misnomer and um I don't know if I'm gonna have to shave my head for this reason but um I'm not actually going to deploy on something that because I don't have uh a wallet with ether in it on this Coupe shooter so kind of a bummer shave yeah all right I'm on pretty close honestly I was talking to the youth Global guys before this like the buzz cut no big deal um but yeah so that's the quick run through okay sweet um I guess I can get through the rest of this um yep I ran through all of that I guess I can go through and do some more chills really quick so this was actually a demonstration with our attestation version the station version zero what we're trying to do is we're trying to get more experiments uh with identities on decentralized identity so if you're interested in that we have some information on our docs that you can scroll through like if you're looking for ideas for your hackathon these are available um this says I'm not familiar with wag me but does it abstract away direct calls to ethers Js um wagme is responsible for making or generating the hooks so it does do some of that abstracting away like you don't have to deal with um getting the ABI so I guess yes that the answer to that is yes and then in this project uh specifically we actually don't use ethers we use um I don't know I've never said this word out loud uh v-i-e-m then uh it's like a new newer version and on their documentation I was checking it out there's if you're used to ether's version five there is like a um like a translation guide there that you can look on their documentation sure um back to my shill um we just launched our um attestation station version one on to within conjunction with EAS who is another partner of this hackathon um so that's pretty neat uh if you're looking for something you're to experiment with I think that's a good place to check it out and you know if he's still looking for new ideas we have this great repository on um about ecosystem contributors contributions excuse me and there's a lot of different uh projects and ideas that have been put out here so if you're looking for adapt you can check it out um all of the ideas here are as issues so you can scroll through and try and get some inspiration that way um but yes that's it and then uh kind of reeling it back in um we if you're still working with promises why we will make you just try and catch okay sorry I'm reading the reading the questions out loud um I think that's correct yeah um if you need additional support throughout the hackathon you can find me um in the Discord um in the partner optimism channel so I'll be doing my best to answer questions there and please do your best to help each other out in there and then I kind of did run through this really quickly I think I was a little extra nervous but um if you have any more questions please drop them in the chat and we can kind of talk about them right now yeah I guess you could have made that uh the head shaving bit and it would have worked out yeah I guess so I didn't deploy but I showed you how to do it so we'll see oh yeah if there if I'm asking questions feel free to type in the chat or take yourself off mute we still have some time looks like we still have some AIS in the chat people's otters um but yeah can you share the optimistic ideas yes I can here we go got a quick question what's up um I'm like really into this stuff so uh but would you say uh because it focuses on obstac that a lot of submissions should be in this um in this uh framework or really as long as you have a smart contract and some front end code to make it adapt is that a viable submission uh that's definitely a viable submission this is ideally to help you just get up off the ground up and running because it's just ready to go um so like if you start running this project you can just make tweaks in it into it but if you have you know a stack that you're more comfortable with you should definitely use that awesome um okay cool I'm definitely look into that yeah and then like I said I'll try and be in Discord too so if you have any follow-up questions I can try and help awesome anybody else have any other questions which before we close the session thank you soyboy for the great Workshop uh under 30 minutes so fantastic and uh thank you all people everybody for for attending the our uh the second Workshop of the day we have one more before and then the team formations after this after that um but uh yeah if there are no more questions we'll go ahead and close it up early so cheers thanks again sorry boy yeah for sure thank you yep foreign