Polygon Labs 🛠 Build a fullstack dapp on Polygon zkEVM - Steph Orpilla

foreign [Applause] [Music] to the polygon Labs Workshop build a full stack dap on polygon ZK evm joining us today is Steph orphilia who will be taking us through the session and with that I'll pass it over to Steph to get this session started hey everyone I'm Steph thanks Rory for that introduction uh welcome to this Builder session on how to build and deploy your dap on the polygons kebm testnet um again I'm Steph I'm a devil engineer at polygon Labs I'm also oceans 404 on Twitter um and oceans 404 I believe on Discord so if you have any questions feel free to ping me there in the sponsor Channel uh but I'm here to talk to you about zkevm on polygon but also about all of the different prizes we're giving away for all of you Builders who are scaling ethereum this hackathon so we've got four prizes totaling twenty thousand dollars the first one is five thousand dollars for the best developer or Community tool we think one of the best ways to scale ethereum is building tools to make the development experience easy the Dow experience easy and to make it easy for everybody to contribute uh and participate in web3 so that's the first prize the second one is what I'll go into more over my presentation it's five thousand dollars for the best app deployed on polygon ZK evm specifically our test net in preparation for the mainnet launch next one is five thousand dollars for the best ux on a project using the DAP store kit which is a set of decentralized tools that will help you really quickly bootstrap adapt store and then you can add your own ufs on top of that however you think users should be interacting it's up to you we can't wait to see see how you get creative with that and then last one definitely not least is five thousand dollars for the best use of polygon ID which is our decentralized identity solution I see something in the chat um yeah so Rory just said if you have any questions feel free to type them in the chat also feel free to ping me on Discord um just at me or one of my teammates and we'll respond to you there right after the presentation all right so polygon ZK evm this is so exciting I'm stoked about this and lots of developers are you can read more about uh our announcement and our blog post if you scan this QR code um but I'll get more into that first thing is why so we believe this is the best way to scale ethereum so as a developer I love that when I'm deploying on polygon zkevm it's pretty seamless I can use all of the tools that I'm used to hard hat or just anything that I've used in the past for ethereum or polygon POS it's also super fast and we've improved security because it's an L2 built right on top of ethereum and we'll be launching on me net beta really soon and we've got a roadmap towards evm equivalence with a type 2 category of zkevm roll up and it's super fast it's low cost tons of great things about that so the first part of zkevm is the ZK part and quite honestly I didn't understand ZK or I didn't have like a good conceptual understanding of it until I started learning more and this was one of the first things that clicked for me so I just wanted to share it with you as well this is a computer scientist explaining ZK um this is just the level one so this will just be like a quick 30 second clip but the this scientist is going to prove he knows where a puffin is without showing you where exactly it is and he's explaining it to this little girl reason today I'm going to tell you about a thing called searing large proof so in a zero knowledge proof there are two people there's approver and a verifier and I want to prove that something is true to you but the weird thing is I want to prove to you that it's true without telling you any reasons why I remember when I first heard about it I was like wait what how can that possibly be right yes so when you see in this photo a lot of penguins yeah hidden along all these penguins is a person okay I'm trying to look for it do you see where it is I know where it is but I don't want to tell you do you believe me you're not sure to believe me right yeah but what if I could prove to you that I know where the person is without revealing to you where it is let me show I took that photo that we showed you and I put it behind this poster here why don't you go take a look through that hole you cheated apartment so when you look at this board we don't know where the photo was right was the photo of like the corner here in which case the would be all the way at this side what was the photo with the corner here on the other side so it doesn't look really simple example of a zero knowledge proof I can relate to her anywhere the costume was okay so that example was just to show you that um this mathematician can prove that he knows where the Puffin is and prove to you that he knows that information without actually revealing it so that's kind of like the basis of ZK and that's how I like to think about it so what is a zero knowledge roll-up or a ZK roll up um it's using ZK proofs like what we just saw to prove validity of a statement without actually revealing the statement so we know that the scientist knows where the Puffin is and he didn't have to tell the little girl exactly where it was to prove to her that he knew where it was and then the roll-up part is the second half of ZK Roll-Ups and that's that that's kind of where the L2 solution comes in and it moves computation and storage to a second layer and then just post the proof on the ethereum me net so if we go back to that Puffin and penguin example there's a lot of user transactions that are happening on the layer 2 which is the zkevm and those transactions are batched and processed on the layer 2 which is zkevm and then instead of having all of the transactions on the layer 1 only the validity proof is stored on the layer one which is ethereum so just to give you a little visual all those Penguins and the Puffin are on layer two and then the proof which is just that covered up piece of paper with the little Puffin showing through it is on the L1 ethereum so ZTE EDM is a layer 2 scaling solution it harnesses the power of those ZK proofs and it rolls up all of the transactions on the layer one so you inherit all of the security of ethereum but you get to benefit from faster transactions and lower costs so to keep it short yzk evm you inherit ethereum security you achieve true evm equivalence it's fast and perform it and the transactions are nice and low cost so all of those things are great for scaling ethereum and here are some different industry use cases pretty much anything where you want to have maximum security is a great use case for ZK at evm so D5 traditional Finance supply chain stuff where you want to make sure things are secure Healthcare energy infrastructure and gaining just tons of great use cases and basically anything you build during this hackathon we'd love to see you build on zkevm and I'm going to show you how to do that so the first thing is that you'll need some test net to deploy your contract so you can get that test net youth using our zke ebm bridge this is bridging L1 assets Gorly eat to zkevm I know that Gorly eat is kind of in short supply it's a hot commodity right now and so we're definitely looking at having a sepolia bridge as well so that'll be coming soon but for now you'll have to bridge that Gorly e and you can do that by using the bridge this is a QR code to the bridge so if you want to scan that go right ahead and I'll show you how to bridge some Gorly eth2zkevm okay so I'm just visiting this bridge I'll switch to the gorily test Network and now I'm on Gourley you can see I have about 0.88 in my account and I'm going to bridge just going to over to zkevm testnet just going to click continue it'll pop open a transaction uh in metamask this is my little buyer browser extension I love this app it shows me what's happening anytime I have acids in and out so that all looks good and I'm just going to confirm this bridge you can see I bridged some Gorly eth over earlier today but now this transaction is processing and it'll take just a few moments to finalize but once I do that I can sign one more transaction and then the bridge will be complete uh from Gourley to zkevm so you can see it's going to require one more signature I'm not going to have you all wait for that because it's going to take a minute or two but you can see that I've gotten Gourley eath and bridged it over and then earlier I used the same process to get some zkebm testnet eats so I have 0.2 in my account from earlier today so if you were to do this you just click the finalize button in one minute and then you'd have that eat but we'll skip that step for time okay so now that we have our test at eat we can get to building I don't know about you all but I was just ate Denver last week and I tweeted we need a tracker for the number of Denver Uber drivers onboarded to web3 this week because we were all ubering all over the city and I feel like so many Uber drivers by the end of the week were like oh are you part of that ethereum conference I know what ethereum is somebody um told me how to get a wallet all these things so I thought that was a pretty cool fun way of onboarding Uber drivers so I thought it would be fun to actually build a Tracker and um host it or deploy it on ZK evm so we're going to be using this counter contract that I wrote and build a super quick front end so that we have a full stack zkevm app so feel free to scan this QR code or go straight to my GitHub it's just Ocean's 404 slash full stock CV ZK evm I can't speak today and we'll get started coding just kind of hide this little thing on this side so this readme will take you through all of the different steps to create a zkevm full stacked app like I said before the really beautiful thing about ZK EDM is that it's equivalent to uh ethereum so all of the tools and things you're used to working with work already by default so we can use hard hat and different tools but let's get started coding so I'm just going to clone this repo I've got a holder set up so I'm just going to clone into my full stack zkevm so now I've got a second repo I need a CD into what what did I call it full stack and I'll use this so I walk you through some different setup steps um the first thing we're going to do is just take a look at the front end code so we're going to npmi and then npm start this is just installing all of the different dependencies for the front end and then on npm start to start the react app um just to show you how the app looks before we do anything blockchain related to it so I scaffolded out just like a pretty quick front end and it's just a classic react counter app I think this is even in the react documentation let's see okay so classic front end up there's no back into this you click the plus one and it increments the count up by one imagine that this is the counter for Uber drivers but we want to move this uh counter on chain so we want to deploy a smart contract to zkevm so that anytime I put push plus one it's an actual transaction to zkevm and it's posted um on the blockchain so what is the next step let's see next step is to install some of the different blockchain dependencies mainly just like ethers in a hard hat and then some other tools this is so that we can initialize a hard hat project so I'll come back to my CLI and I'll stop the react app just for now um and an npm installing all of those different dependencies so give it it's giving you a few warnings um but the next thing that we're going to do is we're going to copy the dot EnV uh over so that we have an EnV file this will hold our account private key which you'll grab from metamask which just is the reference that is used to say that you have access to the account and you can deploy a smart contract from the account when you need to get a private key you can go into metamask you click your profile or rather you click these three little dots up here uh go to Account Details and then export private key it'll make you type in your metamask password I'm not going to do this because I would reveal my private key to you all and I trust you but not that much you know so I already have this in a EnV file and I'll just copy this over but if you wanted to do your own we're done with that installation step the next step is to copy the ENB sample to a dot ENB so I'm just going to run that command this is in the readme so it's doing a copy of e dot env.sample to an EnV file so now within my full stack repo this dot EnV file was created it's just a copy of this file but what we need to do is fill in the actual private key so I have a second.enb file but I'm going to just drag and drop in this is a real.

env file with my private key so I'll just move this in um and it's going to replace this one so that my private key is stored in an EnV file now we can do the hard hat step which is the next step so let's just go back to this readme so the next thing we need to do is run npx hard hat but before that we just need to temporarily rename the readme file when you run npx hard hat it creates a readme for you and it won't do this if you already have a readme file so back here I'm just going to change this to the name of it of the readme to um setup so read me Dash setup that way when we get a readme file from hard hat it won't conflict with the file so coming back to my terminal I'm just going to run npx hard hat and I'll get some bootstrapping instructions I'm just gonna make this a little bit bigger so the first thing we want to do is create a JavaScript project uh the hard hat root works we'll just keep that as the default um we'll add a get ignore yes and do we want to install project dependencies also yes so this is bootstrapping out all of those different hard hat folders that we'll need to start writing our contracts so you can see I'm getting a contracts file I'm getting or folder I'm getting a test folder and some scripts uh these are all just things that come built in with hard hat which is awesome so now we've got a project created and to actually use DK evm we need to configure just a few things in the hard hat config file so let's copy paste in this code and then I'll explain what's going on here so let's go to the hardhat.config file this is what comes default so you've got a solidity version uh just one more requirement for some tools but I'm going to copy in the hard hat config from my reading so the differences for this are just the solidity version which needs to match uh whatever contracts that we write and then the other thing is that because I'm initializing this hard hat app inside of a create react app uh we want to put it the artifacts anything that's created about the contract in the source folder that's what our react app is going to read so we need to be able to reference like the contract API and things so I like to just um append the artifacts folder by default so that we're not dragging and dropping files in as we go and then the last thing is networks so this is a custom Network it's zkevm and the RPC URL is this so this is just grabbed from the polygon ZK EDM documentation and then the other thing about this is that we have that dot EnV file with my private key so we're just referencing that within accounts so that Hard Hat knows what account is actually deploying any contracts we create so that's the hard hat config file in a nutshell and I documented all of that inside of my readme so the next thing we need to do is actually create the smart contract there's nothing ZK evm specific about this but what I'm doing here is touch contracts slash counter.soul so this is just creating an empty file for our solidity smart contract I'm going to copy in this code this is my contract and we'll go through it really quick so I'm copying and pasting the counter smart contract into a new file that I created inside the contracts folder this is a classic smart contract so it starts with just the license pragma solidity this is the version of solidity that we're using so anything over 0.8.9 and then this is the contract so this is actually a little leftover I'm going to delete because that is not needed and I'm seeing some weird formatting but ignore that so contract is the keyword that designates that whatever we're creating is a smart contract so the name of this contract is counter we're starting off with a current count of zero which is just an unsigned integer then we have two different functions that we'll be able to call on this smart contract one for increment and one for retrieve if you remember our front end it had an original number and then when you pushed the plus one button it was adding one and counting up so you can imagine that on the front end you're running some type of retrieve to get the original number and then you're running increment to count up or to add one to the current count so those are the two different things our smart contract is doing with the data and our front end will be able to call these functions and also read the retrieve method so now that we have our smart contract code let's see what we need to do next okay so next thing we're going to do is create a deploy counter script um if you remember in our code we already had a single deploy script and it was for that lot contract that was created by default um but we need some slightly different Behavior so we'll create a deploycounter.

js file in that same folder and copy in this code so I'm going back to my code and inside of scripts I'll create another new file I'm just going to call it deploycounter.js and I'll paste in that deploy code so this is really similar to what we got out of the box uh with the hard hat or the lock contract but the main difference is that we're not passing in any dependencies uh to the Constructor of this smart contract if you go back to the counter there's no Constructor here we don't have to pass in a start count although maybe we could have if we wanted the counter to start out at like five or something but we've already hard coded it to zero whereas in the lock contract uh part of the lock contract that it comes with is a Constructor and it has an unlock time that you pass in so if you were passing something in your deploy script would look more like this where you're passing in an unlock time but we're not doing that so we can just use this deploy counter script to deploy a smart contract without any Constructor arguments so I have created a contract Factory I deploy the contract with the Factory and then once it's deployed we should have a contract counter deploys you with an address that links you to your Explorer so if all goes well when we deploy we'll have a smart contract that is deployed to zkevm so to do that we need to compile our code and then we'll run the script to deploy so I'm coming back to my CLI and I'm just running that compile looks like it compiled both of the solidity files successfully so that's a win and then the next thing we have to do is run our deploy counter scripts that we just created and if you notice the network flag that we're passing in is DK evm that is because if we go back to our hard hat config in the networks object we have a network called zkevm so this matches uh what we're passing into our flag which is ZK EDM here so I'm running the deploy Scripts and it looks like there was a counter contract deployed to this address so let's take a look at this on the Explorer by the way this is the zke evm testnet Explorer um I really like the ux actually it's similar to either scan or polygon scan if you're used to either of those it has some stats if you look at the home page and then if you look at a specific address it'll just take a minute to see it might take a minute to show up but we should be able to see the contract here and let you check the chat really quick oh yes I'm just looking through the chat super quick and yeah all of this will be available after the fact and you can also ping me on Discord okay this is taking longer than it normally does but we'll just give it a few more minutes and I'll just go back to the code for now but what happens now is you can optionally verify your contract I have instructions on how to do this in another repo um it looks like oops is this the wrong link oh so I I have a bug here or just a missing link but I'll fix this as soon as the presentation ends and you'll have a link to how to verify uh but the next thing that we need to do is we need to turn our front end into adapt so there's like four pieces of code and I know we're running short on time so I'm going to do this really quick um but the things that we're doing here are importing our counter Json which is the ABI um into our front end so that we can reference the different functions available on the contract and play with those from our front end so I'm just going to grab these three pieces of code and add them to our app.js which is uh what we're using with react so I'm going to put the import statements towards the top and save and then I'll add these use effects and I'll explain the code oh I also need to import music facts let's see what else and ethers oops let's see if the live coding gods are good to me today we'll see so that was just um adding some read counter values and then the other thing actually let me run the npx start command or npm start uh just so that we have something to look at while we're changing things okay so here's what changed with that edition of code oops and not resolved let's see contracts counter under Json it's complaining because we can't resolve contracts slash counter Json let's see um that looks like it I'm just going to move that temporarily oh I'm going to stop my app and I'll restart this is what happens when you live code in a demo I swear this was working before I'll just go through the code because we're running short on time um but I'll be able to fix it and upload it if time permits right after the demo so basically what I'm doing here is in the use effect instead of fetching the count from just like a state variable I'm updating it so that it fetches count from read counter value you saw that for a second it was grabbing the 11 value so what it's doing is looking at if type of window.etherium is undefined so is not undefined so if metamask is enabled it's looking through the providers and grabbing zkevam so that's the provider that we've added in the hard hat config and it's getting the contract address so the counter address the counter API and provider oh this is what I'm missing your counter address let me grab that really quick I needed to replace this value so let's see if that makes it work there we go okay so that's why I was complaining you need to replace your counter address with the contract that you've deployed so that it can reference um the counter API okay so coming back to that read counter value what we're doing is we're grabbing the provider we have the counter address the counter API which is that counter.json that is created after you compile a smart contract and then it's running the retrieve function on the smart contract if you go back to your smart contract for counter we had retrieve an increment so this tutorial will walk you through how to add both of those different functions um so that you can add those to your front end okay and then coming back to app.

json it's grabbing that value so that a retrieve function returns an integer and then it's pressing that to just like a string because it's a big number by default in the contract and then it's parsing the integer so that it knows the actual number to show on the front end and then the last thing it's doing is updating the state here with set count which is that state variable towards the top so the last thing we need to do is implement the the second piece of state which is the update piece of state so I'm just going to add this is loading because we need a little loader while we wait for the blockchain to update and then I'm going to grab this second piece which is request account and update counter so this is just a second piece that is updating the counter on the blockchain so again we're grabbing our providers grabbing the signer and then referencing the correct function in the contract which is increment and the last thing I'm doing is changing increment which was a constant or a function that I had just updating the front end but we want it to actually call update counter and then just for like ease of life I'm adding one quick little small update on the button so that the platen has a loader and it loads when the smart contract is updating all right let's see if that all worked hopefully it's in okay it's looking good the count starts at zero if I press plus one we should have yep the metamask notification pops open it's asking me to confirm this transaction and the counter is updated to one and so we should be able to do this however many times and see this update on chain from the front end that we've just built so I'm going to confirm this and now our count is two and if this all works when I refresh the app the count should say two which it does because it's reading from the blockchain so very successfully this all worked and came together in the very last minute of this demo I know we're super short on time but you can get the code here and go through the readme and I just also wanted to point out that our developer Doc's got a huge blow up so check out our updated docs they have everything you need to know for building on ZK evm polygon ID and anything else you're going to build or the hackathon thank you so much for coming and listening um here is a QR code that links to all of these slides and the code again I'm Steph I'm ocean 404 on Twitter uh and I'll see you around in the Discord and can't wait to see what you all build for hacking or in scaling ethereum thank you