# Build a DApp on Optimism: How to Conquer L2 Bridging by Emily Lin | Devcon Bogotá

- Channel: [Devcon](https://streameth.org/devcon)
- Date: 2023-10-09
- Duration: 54:18
- Topics: Science & Technology
- Watch: https://streameth.org/watch/yt-mvYM6QRE3OE
- YouTube: https://www.youtube.com/watch?v=mvYM6QRE3OE

## Description

Visit the https://archive.devcon.org/ to gain access to the entire library of Devcon talks with the ease of filtering, playlists, personalized suggestions, decentralized access on Swarm, IPFS and more.
https://archive.devcon.org/archive/watch/6/build-a-dapp-on-optimism-how-to-conquer-l2-bridging/

L1 to L2, L2 to L2, L2 to L1...bridging is complicated, messy, and difficult! In this workshop, we'll teach you how to easily build a DApp that leverages Truffle's L2 Bridge Box, which helps you quickly set up a DApp configured to handle all the complexities that come with L2 bridging.

Speaker(s): Emily Lin
Track: Layer 2s
Keywords: Bridging,Optimism,L2

Follow us: https://twitter.com/efdevcon, https://twitter.com/ethereum
Learn more about devcon: https://www.devcon.org/
Learn more about ethereum: https://ethereum.org/ 

Devcon is the Ethereum conference for developers, researchers, thinkers, and makers. 
Devcon 6 was held in Bogotá, Colombia on Oct 11 - 14, 2022.
Devcon is organized and presented by the Ethereum Foundation, with the support of our sponsors. To find out more, please visit https://ethereum.foundation/

## Transcript

foreign [Music] Emily I am the Truffle developer Advocate today we're going to be talking about building a Dap on optimism specifically talking about how to incorp bridging into your optimism daps just want to give a brief disclaimer I do not work for optimism nor do I represent their opinions however I really love the project truffle and optimism have been doing a hot collab and that is why I'm here today so briefly touching on the agenda I'm just going to give a crash course on l1s and l2s assuming we have beginners in the audience um touch a bit on Bridges go into optimism contracts for bridging specifically and then the best part of the demo uh I guess a live demo maybe with Devcon Bogota Wi-Fi um building adapt together so let's start off optimistic Roll-Ups here's a crash course so for those of you who don't who don't know just brief introduction right what's a layer one what's a layer two layer one ethereum Bitcoin that base layer Layer Two that a separate blockchain that's focused specifically on increasing transaction speed scalability and what's really interesting here as well is utilizing ethereum for data availability so specifically the point of posting transaction data and getting it from ethereum I do want to note one specific thing you might wonder Layer Two specifically are defined by deriving its security from ethereum so if you think about something like a side chain for example they don't so they those are not qualified as a layer two so that is like basically the key caveat you need to think about um so why do I even care about this why am I here uh again if you've been around in the space you've probably heard blockchain trilemma it's a pick two out of three decentralization security and scalability um for those of you who in the ethereum community I hope we have all agreed that decentralization and security is the most important thing right so what happens about scalability well this is something we still really need to care about because scalability right affects gas costs and gas costs is going to affect the adoption of ethereum so this is something we really need to think about and who's here to help us layer twos okay thank you right so definition again of a layer two is to decrease L1 congestion by bundling up transactions and submitting that to ethereum again uh things to note right gets its data availability from ethereum specifically deriving its security from ethereum and helping us maintain that decentralized aspect so next piece we're going to talk about optimistic Roll-Ups because that's what we're focusing on today I am not going to touch on zero knowledge there are so many talks at Bogota about uh zero knowledge so talk to them not me but to briefly touch about optimistic Roll-Ups Roll-Ups again pretty self-explanatory you roll up a bunch of transactions and you submit it and post it once to the L1 again this comes in two primary flavors right now optimistic Roll-Ups as well as zero knowledge to touch upon optimistic Roll-Ups what makes those different is they are optimistic right so when we submit these transactions to ethereum we just assume they are valid and you might say wait that seems kind of bad right well actually there have there's this thing called The Challenge period so essentially during this challenge period uh anybody can come and say like hey I think this is wrong and if they do that they have to submit a fault proof and basically the fault proof basically either validates hey actually it was correct and then it gets submitted to the chain otherwise no actually yeah some Shady person did something and this like transaction is incorrect and so let's backtrack so that's optimistic Roll-Ups uh again the challenge period is the part we need to focus on here right now for mainnet it is seven days which is kind of long um which is kind of why people have started thinking about zero knowledge Roll-Ups because that is something that you just post the validity proof for okay so I think that's covered everything in optimistic Roll-Ups in hopefully less than two minutes because that's what I plan for uh so let's talk about bridges now again Bridges I think pretty self-explanatory if you've ever walked on a bridge before um connecting to blockchain ecosystems things to note about bridges right again is this transfer of assets and information so a lot of times we talk about transferring eth tokens but you can also transfer arbitrary data the other piece is you know we're moving towards a multi-chain world um basically the point of that right is to take in the pros of one chain to alleviate the cons so when we're talking about l1s and l2s we're talking about the pros of decentralization security of ethereum while alleviating the cons by using an L2 chain for that scalability aspect um the important part with Bridges is it allows us to call an L1 contract function from the L2 and vice versa so if I'm on like optimism contract and I say hey ethereum contract I want to call your function but just say okay we can do that um the typical way of doing this right now is this idea of locking assets so it kind of looks like user one will lock Assets in a big bridge contract the equivalent amount of like token will be I guess created on the L2 and then when we want to put it back all of that is burned off and then released for the person on the L1 again big disclaimer there is no bridging standard that exists yet again a lot of research has gotten into this um I think also probably one of the reasons bridges are a little bit unsafe because it's totally a new frontier right so when we talk about unsafe or security right Bridge hacks happen all the freaking time I don't know if you're on crypto Twitter I'm like okay cool I mean as of August 2022 right there is a um a study done basically 60 nine percent I don't know if that was like fake number but um 69 of attacks have been on bridge hacks and then very recently actually like right before I was creating this presentation Finance by a BSC Bridge um rest in peace uh but you did good for my presentation because I got to talk about you on the next slide um but anyways why does this happen again as I had mentioned in that previous uh section about how bridges are typically Run is it locks up liquidity and that is like a prime centralized location for bridge hacks um so something people might also think about when creating Bridges is the idea of decentralized bridges I don't know much too much about it so I'm not going to go into it but you can kind of think about like that is a consideration you need to take and centralization is again a big part of why Bridge hacks are so intense so how do you fix this again disclaimer I have no security expert but number one learn from BSC um so for uh currently the way these Bridges identify and authenticate Target and source blockchains is through its chain ID and the BSC case specifically did not check the chain ID through the cross chain message um and again something to think about so obviously if you're building a bridge maybe read up on all your predecessors and do everything they did but better um private Keys again that's something we really care about different ways of handling it Hardware wallet uh you know multi key chain system Etc and then I think something people don't necessarily always think about is there's always that web layer right so the way bridges are surfaced right now is often through a UI right we talk about hardening your smart contract uh maybe one way to also think about how you harden security is at that UI level there's a lot more uh I added a link of like some research that people were doing but you could probably just Google and then like read every single page because it's it's intense guys so anyways yes like I said bridging is hard what are we doing here we're actually going to go over optimism's Bridge contracts they have already written a few contracts as well as provided an SDK for us to do this for a simple use case um again I think it's awesome because basically Bridge contracts probably require a lot of security auditing I am poor I'm not a student anymore but I'm poor I can't do that um so optimism kind of has provided that ability for us to incorporate bridging uh through um battle tested contracts as well as an SDK if you don't want to do any solidity at all so let's actually walk through what optimism has provided so that first thing I talked about was transferring of data um so this is kind of the base level of what it looks like there's two contracts called L1 cross domain messenger L2 cross domain membership again these are pre-deployed by optimism so if you're bridging on optimism you will be interacting with these contracts you can get their addresses from their GitHub repo they will have one for each one for each chain ID so there's an address for Gurley optimism there's an address for Gurley ethereum mainnet Etc kind of diving into this deeper the way this works is essentially we have I'm going to highlight the probably the two most important functions in this interface specifically the first one is send message so that is what allows us to say hey I'm L1 contract but I want to call Contract function on L2 the way this works is uh let's start over I am ethereum contract I am calling L2 contract that's the target address so I'm going to input that in there the second piece is call day data right so if you don't know how basically solidity call functions right now it's encoded in two bytes specifically by like the function string name as well as the inputs that go into it so in order to call it on the L2 I have to encode that function name and inputs to be passed over to the L2 contract and the gas limit actually is pretty complex it seems simple to understand but it's how much you're willing to pay so I'm going to go into the math here specifically posting from L1 to L2 requires gas on the L2 section right in order to do that optimism says we will provide 1.92 million L2 gas for you for free however in the case and this is pretty rare assuming that like maybe you actually need to spend more gas than that you actually um would have to specify that ahead of time and that gas is coming from your L1 gas at a 1 to 32 ratio so in this specific example right suppose the transaction actually took 2 million gas on optimism you have 80 000 L2 gas you need to cover which is equivalent to 2500 L1 gas um I hope that made sense if not we can talk about it and I will just say the same thing over until you understand it uh on the other hand we moved from L to L1 this is going to be more expensive because there's two transactions we're posting specifically the L2 fee to post initialize a transaction and then the L1 fee to actually finalize it on the Chain so this is more expensive L1 is significantly more expensive than L2 but that's because scalability wow okay good uh next piece is cross domain messenger sender uh okay again for those of you who don't know when you call contract functions on a smart contract message.sender is how you know the address that it's calling it right but for example when we're thinking about bridging right um say I'm like L1 contract calling L2 contract function message.sender is actually gonna what do you call it surface the address of the L1 contract domain cross domain messenger contract right I don't know if I said that correctly but you know what I mean the pre-deployed optimism one so what do we want to know actually I want to know my address I want to know the L1 contract address um the way this is implemented actually allows to say okay when I call X domain blah blah blah I'm going to return my address not the address of the deployed messenger contract um again the next piece here is transferring Ethan erc20 tokens this is probably the most common way of doing bridging which is why optimism has kind of put that between behind an SDK I'm not going to get into it because I only have 50 minutes thank you Dev vakoda or Devcon um but there is a really great ethereum uh tutorial written by a person um on there that actually steps through the contract step by step so if you are interested in understanding how the token Bridge works at a smart contract level I suggest going there if not I will be diving into more of the part about using the SDK itself I want to know as well there are some things to know uh you cannot Bridge every erz 20. so the way the token standard Bridge works is it identifies both the let's say erc20 token address on the L1 and then a token address on the L2 however there are many ways you can rip like I guess you could have the erc20 token represented multiple times on the L2 so how does the optimism standard Bridge know which one one to use well that is specified specifically in this token list so if you want to add to that token list you have to create a PR so that the token Bridge knows which contract to bridge between and then two keywords here deposit so deposit means I'm depositing eth going from L1 to L2 withdraw is going to be withdrawing so going from the L2 to the L1 uh yeah okay so let's do the build person portion uh what are we building so starting off I think one of the most common use cases where you might want to embed a bridging UI is an nft Marketplace so we're building one on optimism and I want to talk a lot about bridging because of the ux problem so if you've interacted kind of with bridging right now oftentimes it's a separate UI so you go to another website or something do the bridging and then come back we're smart here we're at Devcon we understand how to do that not necessarily the best ux for I don't know my mom um so what's the solution uh uh her name is Bridget the bridge widget hopefully you understood that ton if not I will explain it to you many times until you understand it um but anyways the point is to embed this kind of UI it is just a component so imagine if I took the time to put this on npm you could just npm download into your app I didn't do that because I don't have time but anyways this is kind of the UI of what it's going to look like you can create uh and listen nft mint your nfts see what you do you can buy them and specifically one of the views is going to be that bridging component which is what we care about today so what you'll need is we're actually starting this is where the Truffle collab comes in guys okay so truffle has this thing called truffle boxes which essentially create um I guess scaffold code or educational code to help you start your dapps quickly I wanted to talk today specifically about the optimism Bridge box because it is a basically a empty project that configures a project ready to be deployed on optimism in addition to adding smart contracts that will do the transfer data portion as well as writing a script that will demonstrate how to do the SDK and so in part of the smart contract portion what it does is actually allows you to figure out how do I deploy across multiple chains in one go right I need to pull an L1 L2 and then I'm calling function on L1 and I call a functional two how do you do that travel box right okay what else will you need we are going to be connecting to the girly test net as well as the optimism test net um because we are working with these deployed contracts um so you will need that information from inferior you'll create a project separately to that because this is an nft Marketplace we will be uploading metadata up to ipfs you can do that through uh inferior as well they have an ipf dedicated ipfs Gateway you can create for yourself as always metamask you need that for everything uh and then Gurley East optimism Gurley East and specifically I was going to mention girly die so when I was talking about the part where we're going to do the script with the SDK when we're transferring tokens uh the one we decided to choose was die so if you want to actually run the scripts you will need some die in your wallet in order to do that the process for doing it I'm just going to quickly say is take early East go to uniswap change your test net over to Gurley and then do the swap between girly eat and girly die and that's how you do it um so are we doing this live no I'm just gonna walk through uh all the contracts um and hopefully you will understand if not um I I can't explain it to you over and over again because the Wi-Fi is not my fault uh so let's move forward I'm gonna go ahead and open up the first part so uh this is kind of small so yeah you're welcome um I'm unimpressed that your eyes are that bad uh first thing you would do assuming like let's not let's say we're not in this UI is a truffle unboxed optimism fridge and then if I wasn't here I would have called it Devcon demo and it would Manifest this box right and so I'm going to step through what's in this box that makes it optimism compatible uh so the first part here is going to be your contracts so in a multi-chain world you're going to have different contracts we should separate that logically into ethereum contracts as well as our optimism contracts this contract is a meaningless contract we just have it there as an example for you to look at something I will explain that later migrations is this how is how we're going to do our deployment um specifically in truffle you have the ability to number your migrations or your deployments so which is really helpful for multi-chain deployments because then you can decide I care about this migration in this order Etc which is why they're prefixed by numbers um the next piece is scripts so this is just this script is actually just calling the different migration functions um or doing the different deployments I want to speak specifically to the syntax right here right so the first thing that we're doing is going to be deploying to L1 we choose a network which I've defined in a truffle config and by default actually you know know what stop this is really hard to explain until I've explained something else so let's pretend that never happens and move on to this portion right here okay travel config this is the last part for configuring a optimism depth right so we have two different configs the first one is your vanilla config this is what truffle will default to if you don't specify a network or a config essentially all it does is Define your build directories whatever and then your networks I want to note one thing the default would just be like a build to normal contracts but in this case we have due to two different types of contracts we will need to specify the build path so that's build slash ethereum contracts as well as hey Trestle where do I even what contracts do I use well you pull it from slash contract slash ethereum um and then here is just identifying the network and um as always specifying your private Keys uh that sucks but I'm not gonna show you but I can show you the way to circumvent it later um which is cool that's a sneak peek but anyway so that is what our truffle config looks like let's move back into our migration script now that we understand that this is the first part we're using our first truffle config we are deploying to our L1 on the network girly like I said with that one two three four uh process we actually have the ability to specify which deployment we care about in this case we clear about the first one the second case if you notice here we are choosing optimistic girly um as the network we're going to deploy to and then specifically specifying this configuration so that way when we run this migration we know hey we're going to pull our contracts from the optimism folder hey we're going to pull or we're going to build everything into this build slash optimism and again kind of this specification of whatever and then skip dry run self-explanatory you're just skipping the extra part um these two pieces as well I want to do know is kind of anti-pattern I am sorry um but this is the part where we will actually be calling the messages on each contract so if you look in the actual deployment um you can see right here we're getting the instance of like the greeter contract on the other L1 one and setting that greeting typically stuff like this where you're interacting with your contract might exist in your dap or in a separate script migrations are for deployments I just put it there to show you hey you can put four migrations in right um so it still works uh but don't do this um anyways so that that's the structure of the Truffle box let's actually now talk about how to integrate optimism contracts into your depth so let's start with the contracts this is the transfer data section not the SDK so optimism has already deployed this example contract onto their various test sets and mainnet so again you can find those addresses in their GitHub essentially this is super easy all it does is this contract which does a version exists on L1 and a version exists on L2 has a function set grading so if you set the greeting say hello and you call contract.greet it will say the hello that you had put in there um cool and then this part here is just getting the appropriate cross domain messenger sender address so these each of these um what do you call it addresses are the cross domain Messengers solidity file that exists on each chain ID um I guess like these kind of don't matter because all of it's deprecated but doesn't matter we only care about 420 and five um and then this is kind of how you're going to get the actual um domain sender so the OG contract that you care about so that's kind of the base contract of what's already deployed now say we want to create contracts that interact with that so we have this greeter which exists on L1 again all it does is have this function called set greeting so if somebody calls that greeting what we care about is number one the message this is how you're going to encode that message um so this is set greeting from that whatever message you're sending in and then specifically you could put a different contract address here this is the permanent address of the greeter contract on the L2 so essentially if you call set greeting on greeter L1 it will call the set greeting function on greeter L2 hopefully you digested that L2 does the same thing again talk to me afterwards I have so much free time um anyways greeter L2 does the same thing set greeting again right here is gonna be calling um this function on greeter L1 uh and telling it hey this is my target uh blah blah oh and then guess like I said gas limit is irrelevant we have up to 1.92 million gas for free calling stack reading on optimism hopefully I'm gonna say 100 does not take 1.92 million guess so that's where we're at um essentially to run this uh we would have just done run the script I'm not going to run it but you could see the output essentially looks like this um where it will compile your contracts and then start the migrations right so this is the first one where we're deploying it um the L1 contract and then deploying the L2 contract as well as then doing the the fake part where you actually call the greetings um and what is interesting about this is it is calling the greeting on a deployed contract on the girly uh test net as well as the optimism girly test net so what can we do when that happens we can go to etherscan yay and and see it in action I'm not going to open up ether's skin I took a screenshot that's what happens we opened up uh one of the contracts on etherscan um called the greeting function here so it says greetings from truffle I do want to know if you do follow this tutorial like I said this is a public pre-deployed address so if all of you decide to follow this tutorial afterwards and you decide to change the greeting you might see somebody else's I have definitely like gone to this and it's like all in Chinese and they're like wow web3 is global but you can just go back and find your transaction hash in the history and then be able to read whatever you had specifically decided to set the greeting as um and just to prove to you this is the one from L2 setting greeting on L1 that's what it looks like it looks the same uh because it's basically the same contract uh where are we moving on okay cool let's talk about the script so this is complex um but I'm just gonna I don't know how much time I have left so I'm just going to talk faster because that's my style uh okay so here is basically a script of how we decided to use the SDK I'm going to point out a few important parts here right so the first part is pretty self-explanatory we're just setting up all the things that we need to get our cross domain sender thing um set up so you're going to need assigner for each L1 which is L1 sign or L2 signer as well as here uh this is specifically for if we wanted to do the SDK withdraw and uh deposit functions for the erc20 so you're gonna have to pass in what erc20 addresses you care about like I said we are interacting with die so that die address for L1 address die address for the L2 is from their uh list here and so you can find it it'll say like chain ID five die and then there's the address and that is what you'll be using in the SDK if you specifically want to do die um wanted to die okay um but anyways before I dive into the functions themselves let's actually talk about what this is going to do in the end uh super simple like I said all it sets up stuff we're going to deposit each so just calling the SDK dot deposites SDK dot withdraw eth um and then also deposit and withdraw erc20 and deposit whatever I said both already um they're basically the same thing except for one caveat so we'll dive into each of the functions and then we'll discover what's different um cool so after setup uh I'm just going to go from top to bottom even though logically that might not make the most sense but that's okay I am a bit frazzled report balances okay this is just a helper function all it's going to do is log what um your balances are for your or your eth balance or your die balance um this is just for tracking purposes in the script so you can see that hey it actually transferred wow good job optimism um okay no one cleft cool um so that that's kind of just helper methods we're going to actually dive into the deposit function um so specifically to deposit each super simple um you just call deposit eth and then put it on uh one thing to note here right is there are these things called statuses so the problem with bridging is it takes time to move back and forth how do you know when it's done so optimism will provide different types of statuses to allow you to know hey when it's done with relay that means it's been properly um I guess committed or posted or whatever so that's you need to watch out for the that and then you just report it before and after okay guys ready what's different here no one knows okay cool this is different here right here um so again like I said we have that caveat of the L2 optimism standard token Bridge needs to know what L2 address you are interacting with and specifically in order to do this you need to give approval to say hey I approve that we are using this L2 address because if you had given it a random address it doesn't understand all that token is gone so this is a very manual step that you have to take in order to complete a ERC token transfer and then we go into the withdrawal this is exactly the same thing between the two I just want to call out specifically we've added in a new status so when we talk about going from L2 to L1 I had talked about that thing called challenge period right because that's when like things get real right it goes to mainnet so that's kind of I'm just logging that to say hey I'm in the challenge period so if you run the script uh once we get to the withdrawal part that takes a lot longer than the part where we're just depositing because we have this part where we have to wait for people to be like no that's wrong or yeah that's right so yeah that is using the SDK let's move on into actually building adapt and seeing that how we can integrate the SDK into our application wow I did so much live coding here it is okay essentially I'll tell you two things I did or I did a lot more things on two things first off right now we have a client in so when you're building like a full-end app you probably want to but no not probably you should be separating your uh folders into your client section and the part you care about uh which is your contract session so essentially what I had did in this process was just copy paste all the relevant smart contract or truffle code into this truffle folder we didn't need any ethereum contracts anymore because that was for the greeter example um I just replaced them with optimism contracts so this is specifically just a optimism nft contract as well as a Marketplace contract that handles all of the transfer of like lists buy Etc one thing to note here is if you notice nothing really looks any different optimism is evm equivalent so when you start writing your evm or optimism daps you can pretty much copy paste there is a caveat though with like four op codes that are a little different you might not run into them I'm not going to get into it but please be like aware I'm not preaching like the golden standard of evm equivalents it's like the golden minus four op codes equivalent of evm standards anyways um in this case right so now we actually have to deploy our contracts I hope this will work um this is the part that I wanted to say was really cool so I don't have to show you my environment Keys it's specifically there's this idea called truffle dashboard um and it will open up this UI that basically allows you to connect to your metamask account well everything is so small hopefully you can see it no Annie okay well anyways dang this is loading oh okay cool okay so it's committed to my oh man this is going to take a long time how much time do I have left it's 11 30. oh dang I finished all this in 30 minutes wow we have 20 minutes for questions okay sorry um I'm so surprised it's not connecting okay I'm just going to explain what would have happened here right so essentially um oh actually I never deployed it that's why nothing has happened let me go backtrack so truffle uh dashboard this is usable with any project if you notice it is open up on localhost 24012 um I'm sorry I see someone squinting in front of me uh yeah whatever where is it it opens up on 24012 so if you are using like a hard hat config for example the way you do it is you just specify one of your networks as dashboard and that Local Host and it will open up this UI specifically what's cool about this here um is this my terminal oh it is my terminal nice okay I don't know where I am I have truffle dashboard open somewhere um Okay cool so you would just do a truffle migrate and then this time we're choosing Network dashboard and then the config is going to be truffle config.ovm.js and I think that's it I do want to know as part of this box that we have provided like npm scripts that you can just run but I always forget what they are dang where am I I don't know I don't remember what I'm doing here what is wrong here cannot find thought oh did I not migrate it in oh did I spell it incorrectly guys did I spell it incorrectly truffle Dash config.ovm Dot where what am I in the oh I'm not yay live coding um Okay so now if this works I have 30 minutes for this to wait guys I really want to show you this damn something else happened please check that your ethereum oh this is my Local Host died oh I did I did oh I did this on purpose so you guys know how to use it haha joke's on you you thought I didn't know what I was doing I do because I work for trouble okay so I think it's connected now and okay no what happened here oh I heard someone like trying to suggest like hey you just opened a new terminal that's why it's not working okay compiling your contracts nice okay [Music] oh wow fancy oh [Music] I'm so happy clapped without me coercing you this is awesome um okay cool and then if you notice here actually I did want to point out in this migrations contract um we are deploying both of them the marketplace contract is dependent or sorry the nft contract is dependent on the marketplace contract I did that specifically because when we mint and transfer nfts you need to add approval for it to do that I got lazy and said hey nft just set approval for anything that is a Marketplace contract and that is why that is there and that is why we have a second transaction to approve nice okay very good and then we deployed it and oh I forgot to mention one more thing when we were doing this right if you remember the first time we did it we specified the build path of contract or build slash whatever but now that we are using it inside of our client you have to replace that build path to be used in your client directory um this was a pre-configured project so I forgot to do that but I remembered and it's already done wow okay I'm not gonna make you clap again even though I really like it cool and so the client portion um this is also pretty it's a lot of code I'm not going to dive into it it is a next JS project just kind of the steps to do that would just be like a create next app and then I'm using Tailwind because I suck at CSS so that's like in it Tailwind I have instructions somewhere I'm not going to show you I'm going to blame it on the Wi-Fi again but essentially what that looks like is we have a bunch of different pages and I think because this is going to be local I can just actually just do this cool wow local development is so good if only there was something called ganache forking that could fix this um okay anyways so this is kind of like the different views um that we have and I want to talk specifically about the Gurley Bridge um so I embedded it here what does this actually look like in terms of code right so let's open up Gurley bridge and actually let's also open up the the sky right here and you'll see the magic of how much code I did not write because of a truffle box um let's say split left so all we cared about in that bridge was transferring East between the two right so if we're here on the Gurley Bridge here's all the gross HTML stuff that I hate because I was never a front-end Dev but we have two things we care about right depositing eat and withdrawing eth so if we look at the deposit each function here and the positive function here don't they look almost the same yeah wow very cool I copy and pasted that except added some other things that you need because State matters and whatever but you get what I'm saying right it's exactly the same right and the same thing with withdrawal ease here as well or I don't know where it is uh uh Eve yeah and it looks virtually the same as well the only piece I took out here is going to be report balances as part of my UI I pulled that out into just to get L1 East and a get L2 East specifically so that we could demonstrate this information right here um I'm not I guess we could try okay well everyone pray for me why did I do this inspect console okay so if I do something like 0.001 I deposit you can see like the console stuff that I had before was damn it oh this is something yeah okay sorry I forgot to configure some stuff so let's pretend I configured everything properly and then it understands the RPC URL and everything but I have a screenshot uh and that's all that matters so haha and we did everything correctly this is what it looks like um and this specifically is the version of like moving it from uh oh that's highlighted in blue uh awkward um okay anyways uh this is the part where we're migrating over optimism Gurley eth over to Gurley East I do want to note one thing actually now that I remember when you're moving from L2 to L1 and you remember I said it's like more expensive because you have that double transaction right so in the script when we move it over we actually add a little bit more Ethan we directly are transferring because otherwise that would be burned as part of the process um and you would probably actually lose eth uh so that's one thing to notice but anyways this is when I did everything correctly this morning and it failed now but that's what it looks like and that is I think our full depth how much time do I have left wow good job Emily I have 20 minutes left so we can talk about what's next so what's next a crash course and what's next just kidding that is not the definition of a crash course so we're just gonna talk about it um I went through this really fast right uh and this was like the nft marketplace utilizing the SDK scripts I would challenge you guys to actually take this information and build something you're on your own right so maybe like a chat messenger between L1 and l2s right because you can transfer that data um in this case uh you will be needing the Truffle stuff to be deploying information back and forth we have a vanilla optimism box that doesn't have any of these additional scripts and environment variables and everything if you don't want that it would just be a truffle unbox optimism um but other things is like Bridget there's a whole bunch of bugs with Bridget I didn't do any like data validation fix those for me alternatively like it only does eth right now only on Gurley you can configure it basically to select the network um and then always like I was talking about optimism because that's what we have we have other L2 boxes specifically arbitrim exists right now uh what's in the works is actually a stark net box which is super cool um how is truffle working with a non-evm compatible language I don't know we'll find out that's in the future but it's happening and it's exciting um and then just in general I want to talk about what our plans are for multi-chain so again like I said multi-chain dapps are hard complex I said a lot in 40 minutes I don't know how I did that um but what are some kind of pieces that we thought was difficult about our demonstration that we are fixing so first thing is declarative deployments so if you remember in that scripting portion it was very simple I just had an L1 and an L2 right but imagine if now things were dependent on each other's addresses or now we've introduced like a new L1 or a new L2 these scripts like in production can get really intense and that's hard to maintain so declarative deployments is essentially you saying like I have a Json or a yaml file we're still figuring out the actual structure of it yet but you'll say like this is kind of what I wanted to look like and then truffle's like wait I'm so intelligent I can do it for you um and and that's kind of how it goes and along those lines of what comes with development declarative deployments is being able to declare environment-based configurations so again if you remember when I was talking about the network configs it's just like a bunch of lists of like girly mainnet uh sepolia Etc but what if you could actually bundle those up into your own environment so you'll say I care about these networks only in testing I care about these networks only in production instead of doing like a truffle migrate and specifying every single Network you could just say truffle migrate testing environment and that's how you would get there so that's pretty cool um ganache plugins I'm actually probably the most excited about this because the Wi-Fi was bad here um it would have done everything locally right so the reason I had to go on Gurley and optimism girly is because we were interacting with pre-deployed contracts so if you do like vanilla mainnet I mean ethereum development right now we do have forking right where you can basically copy the state of the chain uh main neck early whatever you want locally you can unlock wallet addresses so you can pretend like you're somebody and interacting with those existing contracts on your local environment but right now you can't do that for l2s because there are very slight differences that I mean you technically can I would not recommend it because of those slight differences right and so imagine in a world where we have ganache plugins and essentially you can say hey I want to create this plugin to create a optimism flavored ganache or an arbitrine flavor ganache or whatever and then because of that you can bring up multiple instances of ganache your optimism ganache your maina ganache put those in a workspace that will interact with each other all of those pre-deployed contracts were actually also copied locally because of the forking and I could have just done this all on localhost and because it's not on localhost ganache is compatible with our other development environments so again I'm here to say we do not require you to work with other or be married to truffle itself we are coopetition is what I call it um and the last thing I think in a caveat of this so many times I am not an expert um but we are bringing on an expert so if you don't know I do this weekly live stream called web3 Unleashed where I basically say hey I'm interested in this who do I know or can I figure out will teach me about it so um we're bringing Annie she does like partnership protocol Partnerships with optimism to come talk a bit a little bit more about bridging security and then specifically if you guys don't know optimism had like a huge announcement about like Bedrock changes I don't know what's in it Annie will tell you but this is coming up on November 3rd it will be what do you call it recorded so you don't have to join live if you don't want to but that is everything so thank you so much for joining [Music] um follow me on Twitter that is a QR code to more of links that are important to me uh man I'm so scared I'm not ready for 13 minutes of questions usually I just take the full 60 minutes and then run so uh if you have any questions about this my life uh okay yes [Music] the question is it possible to call the concerts to another and between l2s and l2s um okay I don't work for optimism so I don't know I my guess and I'm gonna actually I'm gonna write this down so I can ask Annie my guess is probably no because we are interacting with those pre-deployed cross-chain Messengers and that is what is doing like the communication right so maybe they have deployed ones on other l2s the L2 Space is really crowded and they're fighting each other so I don't know if they would actually do that which is antithetical to the spirit of ethereum uh but yeah that that's my guess let me write this down oh my God my notes are so messy where's my phone I'll write it on my phone so you guys don't see it oh shoot where's my phone uh uh okay I'll just remember in my head but yeah cool do we have any other questions yeah yeah yeah yeah so different build directories um so if I bring up the code again basically for each chain you would write your own truffle config um and then where why is this not opening um oh yeah it is here each config you would just specify which Bell directory you would have different configs and that's the problem or that's what's painful about it right and that's what we're trying to fix with declarative deployments yeah yes I should not use what [Music] oh like when should we use L1 versus L2 um I guess my specific thing is like I think l2s are the future of ethereum the problem with l2s like I had mentioned is probably the ux problem as well as the adoption problem so when we are building like say your first step right the biggest kind of cohort of people you could take on is probably going to be just mainnet or ethereum development right um but if you're trying to do like plan ahead and stuff you know I'm thinking layer twos are important um okay let me let me backtrack let me just talk about what I would think about when I'm choosing where to develop right so it's who is my audience how big is that right the second piece is Dev support if I am building this how good is that layer two uh at providing support how good is their documentation stuff like that um and then the third piece is also just like general adoption be of developers right so if you look at that space is there anyone who can even code with you is there anyone you can build with um and layer twos are new right and so there is going to be some trade-offs there um but it's kind of what you want to do in the future I know optimism is doing really cool stuff with promoting uh L2 dapps and I think in general if you talk or I'm not going to say words for other people but the general consensus right and the way I see the ecosystem moving um is in this direction so uh that's my opinion yeah cool any other questions yeah right right yeah yeah the challenge period is a big con right uh I I don't think it would change in the sense that if you want to interact with like a layer two um like a zero knowledge roll up right you still care about where those contracts are coming from so that build directory is still important the network IDs are still going to be different where you're deploying to so all this different configuration is going to change um actually I did mention so we have Stark net is zero knowledge uh we are working on a ZK sync integration as well which is also zero knowledge um so I think regardless of where you choose to go um this is going to be a configuration you still need uh unfortunately but um I think hopefully if you have submission or like what do you call it uh suggestions whatever like we're open source why don't you just contribute to our code base uh or create an issue we have GitHub discussions as well during our Discord Community um last me on Twitter uh whatever is most comfortable for you but yeah yes yeah oh oh sorry okay you said I love her okay disclaimer part of my personality is I really liked Fried Chicken it's on my Twitter that's what he mentioned if you didn't hear that so okay yes thank you wow we're getting professional like personal here dang okay we have seven minutes to answer questions about Emily Lynn um okay why did I choose to go into devrel versus um you know be a core developer that's a great question uh so if you want to talk a bit about my background um so I graduated college with a CS degree I went immediately into back-end development I did that for like two years and then was like oh this is kind of boring what's cool and fancy and I was like wow devops is such a sexy word it is the worst word ever I hate kubernetes but anyways I moved into devops right and I think I was so I'm in my 20s I don't know why I'm getting into this tangent uh but I was kind of in that space of like figuring out I'm not totally satisfied with my job part of the reason I moved into devops was one thing it was sexy at the time um but like also like I really wanted to learn something new right um and I haven't got to the devrel portion of it I promise we'll eventually get there I'm just filling seven minutes um but uh where was I so I I knew I wanted to do something where I was always learning something new right I felt like within my engineering job there was a lot of like communication internally like with my team and building projects and I really like that um but at the end of the day I think when you are plugged into like a big tech company uh for example I felt to an extent like I was I don't want to call it Code Monkey but the impact I had was not as big as I would hoped all right so when I was thinking about you know what are my next career steps so I actually didn't get into web 3 or devrel until this year in March um so I'm relatively new but the thing I cared about again was you know work environment I wanted to be around Builders like it was really important to me to be around people who like really passionate about their work and like maybe unfortunately crypto is usually our 24 7 and our nine to five but I seek that kind of environment you know what I mean um and the second piece was the thing I enjoyed the most about my engineering job was the cross-collaborative communication when I got to uh kind of background wise so my uh when I joined the devops team we're really focused on reaching sock 2 compliance and security so I was working very closely with a security team and so being able to translate technical Concepts on our side to other team members was something I really enjoyed and knew I wanted to take into the next job so when I was considering my different options developer relations came up and I thought it was this perfect marriage of I get to keep my technical skills I am required to learn something new all the time so that's why I'm not an expert in anything obviously but I know know a little bit about everything and I think that is something I really liked and then in terms of the impact part just being able to interact with devs like my job is figuring out like what people what pain points people have what they're working on et cetera and like trying to fix that like felt more tangible to me right and I think that's why I kind of fell into devrel I'm going to say one more thing and I always say this and she's in this room and she hates that I say this my sister actually started uh in devrel first and then also works in devrel in um web three uh yeah wow crazy um and she is like one of the biggest Inspirations in my life uh and so maybe that's part of my motivation as well or maybe I'm just like the bratty little sister I I think my tagline is like do everything she does but better uh so so maybe that that's also why I got into devrel um cool I don't know if we have any more time uh we have oh God four more minutes dang it okay otherwise feel free to go wait in line for other talks or come catch me wherever yeah I mean I'll be at like the conference I'll be at near con um consensus which truffle works for uh is gonna be having a event this Friday so feel free to stop by uh we have a lot of different panels and things like that um yeah cool thank you so much [Applause]