Morph 🛠️ Getting Started on Morph

[Music] gmgm welcome to my talk getting started on morph this is a complete developers guide just understanding what morph is and how to get started building on it today hey my name is rahad I'm senior developer relations engineer at morph you can find me usually any place at rahad codes Twitter telegram wherever pretty accessible if you ever want to talk about anything you're building during this hackathon or Beyond I'm always that so a little bit of an agenda of what we're going to go through today first I'll give you an introduction to what morph is an overview of the architecture we'll go through setting up your wallet going through the bridge deploying and verifying a contract with Foundry as well as using VM on the front end and putting that all together so that you have everything you need to start building I'll also be providing you with additional resources that you can use uh to help you during your haathon experience so what is morph exactly so morph is an ethereum layer to scaling solution harnessing the power of an optimistic zkm we're going to go into what that is during the architecture side of things but there's three things that we really prioritize and that's one consumer Centric Innovation we're building a blockchain for consumers transparency and trust and collaborative ecosystem now on the technical side what is morph morph is made up of three main modules first the decentralized sequencer Network the optimistic zkm and the rollup contract in Bridge let's go through each of these things first it's going to be the sequencer Network sequencers are responsible for creating your transactions and putting them into blocks so in the case of morph what we have is a sequencer Network so rather than having just one sequencer having uh going through each of the uh blocks and creating these transactions we have a set we have a staken contract that exists on L1 or ethereum that governs which sequencer is going to be creating this current block so the sequencer gets chosen through the selection process and then starts to create the block tender is what we use for consensus between uh the sequencers now when these sequencers actually create each of these blocks rather than sending each and every one through the rollup contract which is the second module it actually sends them in a different batch different batches so we have a different uh check points where the sequencers will use what's called a BLS signature in order to verify the blocks and send them over to the rollup in aggregated bunches now the third part of all of this is the optimistic zkm so the optimistic zkm is built on what we call a responsive validity proof now generally you would have two types of proofs in uh l2s you have your fraud proofs and you have your validity proofs we took an approach that kind of combines a little bit of both sides so what are these uh different types of proofs right first let's take a look at the interactive fraud proofs so fraud proofs are what are generally used by optimistic rollups so we assume you know all the transactions um optimistically are fine non- fraudulent but in the case that there might be some fraudulent activity a validator can come in and initiate a challenge against a state verification contract to prove or disprove um the validity of a specific uh transaction now when this happens the challenge goes through a back and forth um process between the validator and the state verification process this process can be very lengthy and this is what usually results in what you would see with these like 7-Day withdrawal periods and seven days needed for finality so on the other side you have your ZK validity proofs generally used by ZK EVMS now rather than having these challenges what ZK EVMS do is that for every single block a ZK proof is generated to prove the validity of that block of all the transactions in it now this uh you can probably see this as being more secure um than using a fraud proof but um generating a ZK proof for every single block is going to be very costly now we decided to look at these two approaches and create the responsive validity proof so in this case we still have um sort of like this optimistic um Outlook that all of the transactions will be fine and if a validator says Okay um there is an issue here um in order first of all in order to become a validator you need to stake um an certain amount of eth same thing for a sequencer um these are slashed depending on your behavior in the case of a validator if it initiates a um a challenge and it is incorrect regarding that challenge those uh funds will be slashed in the case of the sequencer if a challenge is initiated it cannot prove that um it's the transaction is what it should be its fans gets slashed so there's incentives on both sides to make sure there's no malicious behavior so um like we said before a validator will actually um go ahead and initiate the challenge once it initiates the challenge the sequencer will request the ZK proof and uh our ZK approver will create that and we'll send it to the challenge contract for verification challenge contract exists on L1 and the sequencer um and the process for that exists on L2 so let's go ahead and start looking at our test net get our wallet set up take a look at our bridge and our Explorer before we head into a little bit of code both on the smart contract side and the front end let's get started by taking a look at how we would set up our wallet if you head over to docs. morfel 2.io and head over to our Quick Start start you can go over the wallet setup and you'll see here that you have everything you need to add the morph test net over to your wallet a quick and easy way to do this without doing it manually is head over to chain list and you'll be able to add more testnet over to your wallet right away now let's take a look at Faucets in order to get some test funds to use on morph you'll first need to get some sapoia eth you can use any of these Fest to do so after you've done that you'll need to go over to our Bridge these instructions will walk you through how to bridge some of your spolia eth over to morph once youve bridge that over you can go ahead and start exploring our Explorer now that we've gotten to this point let's go ahead and start writing our first smart contract we're going to be using Foundry to do so going into my terminal and I'm going to create a folder called counter let's go into our counter folder and run Forge in it you'll need to make sure that you actually have Forge installed if you need to do so you can go to book. getet foundary sh and go through their installation steps over here I've already done that so I'm going to go ahead and continue here I'm going to go ahead and open this in my text editor of choice which will be vs code and if we go into the counter smart contract on the source folder we'll see that we get a nice little basic counter smart contract out of the box let's add a couple more functions to this although a public variable will automatically give us a nice uh getter function well let's write one ourselves see what that looks like so we'll call this function get number so be a public View and we'll return a unsigned integer and it's simply going to return us this number up here we're also going to do another function called reset counter just in case we ever want to set this down to zero again now normally for a function like this you would probably want to guard it and make it so that only an owner or an admin can actually reset something like this we're going to keep this pretty basic but you can look at different standards like uh open Zeppelin who've got a library of smart contracts that will help you add this type of functionality I'm going to save that now let's get started on actually deploying our first cont contract for deploying this contract we're actually going to use a script let's go to the script folder and look at the current one so this is the one that comes out of the box let's get rid of this and we want to also import our contract itself so we're going to import counter and in here and let's just rewrite this function real quick which we'll still call it run it'll be an external function that returns our counter we're going to use this vm. start broadcast which will give us some nice logs if we need it and let's go ahead and deploy our new counter we'll just call it lowercase counter then we'll use vm.

stop broadcast and you'll see how this works in just a second and finally we will return our counter and let's not forget semicolons so this is our script for deploying our contract before we go ahead and deploy let's go ahead and create a EnV file in the EnV file are going to be three variables our private key for deploying this an RPC URL which is just going to be this um public one and the verifier URL which is going to be what we use to actually verify the smart contract let's go ahead and save that make sure you update this to be the value that you need it to be now that we've created the EnV file we need to actually use it we'll use this command source. EnV which will allow us access to all the variables inside of the EnV file and now I'm going to copy over a script that I have which is going to be available in our uh readme as well but this is a script to actually deploy our smart contract using the script that we wrote and using the variables within our EnV file one important thing to note is to make sure that you pass this-- Legacy flag whenever you're deploying to the morph testnet hit enter everything will compile [Music] great we'll see the total amount that we paid in gas to actually uh execute this contract and we have the contract address up here so let's copy that and head back over to our browser look that up and you should see that the contract which I just created was created about 44 seconds ago and this a contract uh creation type there now we've got our contracto let's go ahead and create our front end we're going to use nextjs to do this so we use yarn create next app to scaffold out our app we're going to go ahead and call it front end say typescript yes slint and we're going use the page router now uh thing to remember is that the finalized version of these are in separate folders in our morph for examples GitHub repo so you'll have a both a front end folder as well as a smart contract folder which will go through not only The Foundry example but also doing a hard hat example if you'd prefer hard hat but now that we've got the front end here we're going to go ahead and navigate into there and open that up in a separate code editor in our source folder I'm just going to go ahead and create an ai. Json file and just to make sure we have our uh ABI let's head back to our counter once we're in our counter we're going to use this command Forge inspect counter API this will give us the ABI for a contract let's go ahead and copy that over into our api. Json now we have everything we need to connect to our contract let's get started on installing a couple of items head back into our front end folder we're going to be installing a couple dependencies first wagi VM and finally the T stack react query which is all things that we need to make sure that wag me react hooks work properly within our project so let's install that once installed let's head back to our frontend code base and we're going to in our source folder create a file called wag me config ttf set up the configuration file for our wagm config you can copy all this mostly from the documentation available from wagm but this will let us create the connection to the morphs aoia Network save that now in our uncore app. TSX we're going to update a couple of items here now a lot of this is just boilet plate code so I'm just copy and pasting everything from the morph examples GitHub repo which you should also have access to but what all we're doing here is pro um taking our wagm provider making sure it wraps our entire client as well as the query client Provider from tac query to make sure that everything works properly save that and we're also importing the config from our wagm config which we created over here we should now have access to wagm react hooks throughout our entire project let's now create a couple of components insource create a new folder called components we'll name one of them account.

TSX and the other one wallet options. TSX I'm going copy and paste over the wallet con options that I have now normally you get from your connector an array of different connectors that you can connect to in this case I'm just going to default to the first one which is just going to be your embedded wallet and then this case uh metamask and I've added just a couple of different styles to give it a nice little blue um button feeling there so I'll save that that'll be our wallet uh options for our connect wallet feature let's copy over the account stuff I'm going to remove all of the ANS items for now just to keep this a little bit more on the simpler side but here we are now we've got uh an address displayed as well as well as a button to eventually disconnect which just has the same exact Styles as the button from earlier so those are going to be our two new components let's go over to our index.js and start using them I'm going to go ahead and remove everything inside of the [Music] main div here and I'm just going to copy over some updated styles with that out of the way let's go ahead and start with our connect wallet feature let's import the two components that we just created so that's our account and wallet options and I'm going to create our connect wallet uh button so let's create a function inside of home I'm going to name it connect wallet and we're going to do something where if we're connected to um the users's wallet we'll show the account otherwise we'll show the wallet options so how do we actually know if we're connected or not we're going to import some hooks from Magi we're going to import the use account hook and use account can return to us and is connected flag and now if we're connected we'll return the account otherwise we'll just return the wallet options let's display that here and see how that looks let's go ahead and run that head over to our terminal and type in yarn Dev and everything should be up been running at Local Host 3000 heading in here we should see a connect wall button yep so let's hit connect wallet connect our wallet and once we're connected we see our account displayed look good so far one error you might run into when you refresh is this hydration error here so you can solve this we're going to go ahead and import use state from react and we're going to create this piece of state has mounted or set has mounted we're just going to wait for the actual um component to mount uh before rendering anything inside of it let's create this use effect as well so we're also going to import use effect and I'm going to put that below actually above the connect wallet function and we'll say that if it hasn't mounted we'll just return null the reason we see this is because um next JSU is uh serers side rendering and there's just a mismatch between the serers side rendered HTML and the initial rendered HTML so this way it will be the same no matter what refresh looks like we're good no more hydration eror all right let's finish this up now by both reading and writing to our contract I'm going to update the imported hooks for Magi so there's a few more hooks we're going to uh explain each of them as we go through them and we're also going to import the API from our ABI SL Json create with that done let's go ahead and set up first our write and read functions so we're going to use use right contract and use read contract set that up over here for our right function we're going to get some data back which is going to be a hash and uh we're going to get the right contract function so that comes from the use right contract hook and from read contract we're also going to get some data and we'll name that current count we'll say refetch as well so we can ref fetch the value whenever we need to and we'll use read contract and we're going to need to pass a couple variables first the API next the address which I'll copy over in just a second and the function name in this case it can be just number or the get number that we wrote I'll just use number for now cool our last hook is going to be this used weight for transaction receipt this is going to give us two different flags that are very very helpful is loading for whenever a transaction is loading and is success for whenever a transaction was successful and that's going to use wait for transaction received and that's actually going to take this hash from the used right contract great so now we have these different variables that'll help us with creating our UI now let's create a ning function it's going to be called increment which is going to increment our account and this is going to use the right contract function that we got from the hook and that gets past the API the address again we'll just copy and paste that from up here and finally the function name which is going to be increment as well and just make sure that it's passed as a string great so this is our increment function we're actually going to use one more use effect and we're going to add another piece of State up here this state is going to be for account here we'll update our count we're going to set the count to be the current count and we're just going to cast it as a string and just in case you you'll recall that we have our is Success bullan over here whenever that is Success runs we just want to make sure that we refetch the value to make sure that runs at the appropriate times we just have to pass some dependencies into this array and that is going to to be the current count is Success itself and just the refetch function this user effect will now run anytime current count or is success is updated now let's update our UI add a paragraph here that shows the current count and that's just going to be the count State variable next we'll have the is loading Boolean which we also got from the um use weight for transaction receipt now whenever a transaction is loading we'll just display a little message to the user we say updating count and lastly if we're connected and only if we're connected will users actually be able to see the button to increment the count I'm just going to copy that over well you'll see here that we're simply on click passing the increment function that we wrote about Let's test this out so we see we have our current count which is at zero hit increment pay some C the count is now updating and the count is now one so with that you now have the resources you need in order to start building on morph we've gone through building out your Smart contract we've gone through deploying and interacting with it on a front end we have additional resources for you to go through templates that'll go through some of the things I went through today on The Foundry side additionally we also have templates for hard hat if you prefer using hard hat and we have different front-end uh templates that'll show you how to use both VM wagi as well as ethers so whatever tools you're comfortable with in the evm space you'll be able to use uh with us right here uh you can go ahead and scan this QR code to see a GitHub repo with some of those uh templates and resources these have also shared within Discord as well as on the um events page for eth Global additionally if you want to get further involved inside of the morph ecosystem we do have a morph ambassador program which is open to both developers and non-developers so whether you're technical or not definitely um check out the morph master program um for some really cool incentives and how to get involved even deeper within the morph Community thank you everyone for uh checking this uh talk out and I'm really excited to see what everyone starts building on morph during this [Music] hackathon