Polygon 🛠 Build a Fullstack Dapp and Deploy on Polygon zkEVM - Steph Orpilla

foreign [Music] thank you so much for coming to this session I'm going to really quickly show you how to bootstrap and deploy your dap on polygon ZK evm but first of all gmgm or as we've switched to zmzm since we're kind of like in this DK Universe I'm Steph I'm a developer relations engineer at polygon Labs I'm also oceans 404 on Twitter and a fun fact about me is I got started in web 3 because of hackathons just like this so I'm super passionate about building things and helping you all build things and one of the things I struggled with when I was doing hackathons is like building really quickly so the goal of this session is to show you how to use polygon ZK evm really fast so how to bootstrap something quickly so that you can focus more on your business logic and the hacks and the real world problems you're trying to solve and less on like oh how do I connect my wallet or what is specific about ZK evm but that said I will go over a few zkevm things but first I just want to highlight are four different prize categories for Builders so we have four categories the first one is the best cross chain or x-chain hack with polygon CK evm so we want to see you connect to either ethereum or polygon POS or some of the other l2s and use that data in an interesting way whether you're connecting it for governance or like having um mints based on owning tokens on another chain something like that next is 5000 for polygon ID verified credentials so Implement identity in a interesting way next we've got the best public good with account abstraction and I don't know if you notice but account abstraction has kind of been a theme at eth Global Tokyo this this uh year and we're really excited to see all of the different account extraction hacks so if you did that on polygon you'd be eligible for three different bounties so you could triple up if you did a really great hack highly recommend that and then the last one is our polygon build in public pool prize so if you Deploy on any of our chains you're eligible to split this prize with however many people also deploy so really encourage you to deploy any type of dap because we want to see what you're building but we had a really exciting announcement on the 27th of March and that is that we launched polygon zkevm mainnet beta so it's on the main net you can deploy dapps to it you can test it out we've had our test net for about six months and over 70 000 developers have developed smart contracts and it's started to be battle tested so excited to see you develop on polygons hey evm this hackathon why polygon zkevm we think it's the next chapter of ethereum scaling it's exciting for developers because you can use all the same tools and Technologies you're already used to whether that's building with hard hat or remix or Foundry they all work out of the box you can use solidity uh the same way you would for polygon POS or ethereum and it just works pretty seamlessly the only thing that I have to call out is that we don't support four pre-compile opcodes so if you're building something with those those aren't supported but for the most part everything should work seamlessly which is great for Developers so the first half of zkevm is DK zero knowledge and I like to explain this with an example did anyone play where's Waldo as a kid those books where you look for Waldo I know I did um so Waldo is somewhere in this picture and I could prove to you that I knew where he was without telling you exactly where he was and I could do that by highlighting where he is in the picture and covering it with a big piece of paper so on this picture on the left there's a big purple piece of paper in front of the actual Waldo puzzle and so you can see that I know where he is but you don't know exactly where I've positioned this piece of paper so that's kind of like a ZK proof where I'm proving to you I know where Waldo is without giving you the information to show you where he is so you don't know exactly where he is but you know that I know and I kind of like took this example from a cool wired video where a computer scientist explained ZK with five levels of difficulty for a little to a little girl he has like a penguins and puffins example um but when this is kind of done in the real world it's done with cryptography which is complex math to prove a statement or like a batch of transactions in this case is valid without actually needing to have all of the data there um so this is really great because it can be secure and private but that's not actually the focus of ZK evm it's more for increasing the throughput of ethereum and adding kind of like to the efficiency so ZK proofs help you prove that you know something without revealing any additional data about what that thing is so that's the first half of ZK roll up or zkevm so we know what ZK is now the other half is what is a roll-up so a roll-up is a layer 2 scaling solution it's where you take a big batch of transactions and you do something interesting with them and you just post a small amount of data on the L1 which is ethereum in the case of a ZK roll-up you're taking a big batch of transactions from polygon zkevm and instead of having all that data on ethereum you just have one single ZK validity proof that says okay all of the state changes that changed on zkevm are valid and we can just have that posted on ethereum which drastically decreases the amount of data there and increases the throughput and adds to lower cost transactions for each of those batch transactions because there's only one thing that's finally posted on ethereum and that's that proof so why polygon zkevm first of all it's great to inherit ethereum's battle tested security that proof is being posted on ethereum and ethereum has been running successfully for years and years we trust it we love it for defy that's awesome second reason is achieving true evm equivalence and when we have that the things that function on ethereum also function on zkevm so you don't have to change functions or anything it the code works the same way third reason is it's fast and performant and then the fourth reason is lower cost transactions than if you were operating just on ethereum some of the industry use cases and things that we're really excited to see you all build are things in the defy and traditional Finance space when you're transferring value you want high levels of security right because you don't want somebody to be able to change that transaction so for finance we highly suggest ckevm also for supply chain infrastructure projects Healthcare all of that you need high levels of trust so Z polygon ZK evm is the right choice when you're figuring out what chain to use there so to get started building the first thing you need to do is bridge over some eth so on the test net that'll be Gorly eat and then on the main net it'll be just like real eat that you would use on ethereum so you'll use wallet.polygon.technology and you'll bridge over those tokens so that you can use them on zkebm and then once you do that you can operate on this chain pretty much the same way you would with ethereum and I'm going to show you how to pretty quickly build adapt um I I worked on what create web 3D app and added a polygon zkevm Network the other day with my friend Vito and the Alchemy team so I'm just going to show you how to use this tool to pretty quickly create your own dap and deploy to polygon zkevm so like I said this is a tool that was created by the Alchemy Team all I did yesterday was add support for polygon ZK evm here are some of the other chains that are already supported so ethereum and polygon were already supported arbitrum and optimism and the cool thing about this is you can get started pretty much as easily as you can with create react app if anybody's ever used that so I love this tool because it bootstraps a front end and helps you create like the smart contracts that you would need um for anything you're doing so I'm just going to open a command line tab so all you have to do is run npx and then create web3dap at latest and this will just start that package creating a web 3D app so it's beginning to bootstrap and it's just asking me for some details about my project so I'm just going to create a simple nft project because I think we're all familiar with nfts just so that you can understand how this tool works so I'm going to call it um Tokyo nft so then you can either choose to create a full stacked app or use a template I'm going to just choose the full stacked app so you can see the full workflow you choose your chain so I'll choose polygon zkebm and you can choose your development environment I'm going to use hard hat and the beautiful thing about zkevm is that it works with hard hat Foundry remix all the things that you're already used to building with um do I want to create a smart contract yes and then since we're just going to do some nfts today I'll choose ERC 721 but as you can see you could use this if you were doing something interesting with tokenomics you could do like an erc20 you can also do I believe a governance contract if you were doing something with dows um and then name for your contract let's just call it uh cherry blossoms and symbol CBS I guess or just CB uh that works okay so now it's asking me to toggle some features if you've ever used open zeppelins wizard I think I spelled that completely wrong if you've ever used the contracts wizard from open Zeppelin it's using this same API where you can pick whatever token you want and add features so we're just doing this from the command line so I would like my nfts just to Auto increment and also have URI storage so Auto increment just um oh wait I'm not done selecting so Auto increment just bumps up the ID every time we mint an nft and then URI storage means that we can create our own like metadata for the nft whether that's image title whatever we want there so you could also add any of these other features if you wanted to but since this is going to be a pretty simple demo I'm not going to do that um I'm done selecting features next it's just asking me if I already have an Alchemy account which I do alchemy allows you to have RPC URLs so I have a bunch here um I created this key a day ago so I'm just going to reuse it and I'll delete it after this demo so no one will be able to grab my key and know it but I'm just going to paste it back into the command line and now it's creating this full dap boilerplate for me so it's going to give me all of the dependencies that I need for this and it'll have a front end and a back end so it'll create this hard hat repo for me and I'll basically have the shell of everything I need to do so all I have to do next is like my business logic and a tiny bit of front end which in a hackathon setting is great right because you don't have to figure out oh shoot how do I add wallet connect to Rainbow wallet or anything like that it just is already there so all you do is focus on whatever you're actually hacking on which I love the other really cool thing that Alchemy has is some component libraries so let's just check those docs really quick so you can see what's available if I was hacking this weekend I'd probably use a combination of the component libraries and then something like material UI or chakra to have a bunch of components so I so that you don't worry about all the styling but the components that are available out of the box for Alchemy are some things that include like an nft mentor and I believe also a erc20 claim so those are both great for really quick bootstrapping okay we're almost there with the bootstrapping and this is installing all dependencies so once it's done really all I'll have to do is run like npx hard hat compile and I'll have everything I need to deploy my smart contract come on Wi-Fi this is what I get for doing a live demo okay awesome so as you can see there's two more things to do add your private key in the dot EnV file and then run the application so I'm just going to copy over an EnV file that I have already uh and I'll just add it to so this is just copying it into my backend folder because I don't want to show you all my EnV file but now I've got that and I can just run the front end command to bootstrap or front end so I'll copy this in it is running on localhost let me just open this up in Chrome and this is what we have out of the box from Alchemy like I said this is the bootstrap site and we have a connect wallet button I'm just going to use metamask you can see I'm already connected to the zkevm testnet and that was all done for me didn't have to do a thing which is pretty awesome I don't know if you've had to do this from scratch ever but it can be painful so this is great and then the last thing I'm going to do is just deploy my smart contract so this was the front end repo that was generated I'll just show you the folder structure here so we've got a backend folder and also a front-end folder the front-end folder is just a next app that looks like this the backend folder is really similar to a hard hat repo if you've used hard hat before um and all of the commands are the same as well so let's just CD into back end and then the hard hat command is npx hard hat compile and what this is doing is it's taking the contract that we bootstrapped from the command line if you remember I called it cherry blossoms uh I had this as the um the short name for it and you can see that we've bootstrapped this with the URI storage access control the counters everything that we asked for in the command line so it was pretty simple there um I ran hard hat compile and I've got all those solidity files successfully compiled and let me just double check the command for actually deploying in my package Json it looks like it is npm run deploy test net so that's just going to run the deploy script that was also created when this was bootstrapped and just to show you this is our hard hat config that was also created for us in the networks object you can see we've got polygon ZK evm mainnet and also the test net and those both have our Alchemy keys that we added so I'm just going to run that and PM and this will just start to deploy to polygon ZK evm testnet and we should be able to see the result of this in the test net Explorer so we've got a test net in mainnet Explorer they look very similar to etherscan if you've used those before they're just at zkevm.polyscan.com and you can switch between mainnet and testnet in the Explorer let's see what the contract address was so cherry blossoms our nft project was deployed here to this address and yep it was deployed about 31 seconds ago so the only other thing we have to do now is hook up the front end you can do that using those really nice components that Alchemy provides so I'm just going to pull up the components really quick so I can reference those as we add them to the front end okay so back in CW 3D which is just create web 3D app checking out the components um so you can either use collection display uh Creator Mentor or Gallery I'm just going to look at Mentor so we can mint the nfts from the front end really quickly it's asking me to create two files one of them is an nft mentor and the other one is just some styling I'll show you what that code looks like they've got really nice copy paste abilities here I don't trust my copy paste so I'm just gonna grab them from my finder where I pasted them earlier today so I'm just going to put nft Mentor inside of front-end components and then the styling can just go in the Styles folder here and then the only other thing we have to do is actually import these so we'll just add these to the page components Pages index okay I'm just importing those two components to the front end um and then it looks like this takes a few props so it's asking for the contract address and then also the let's see if I save this that'll format it a little easier for us to look at okay so first thing we need is the contract address we know that from our command line this was where we deployed about a minute ago so just adding that here and then for the token URI um I'm just going to upload it really quickly to nft storage uh I created one of these a little bit earlier as well it's just going to look like this typically a token has a title and then a description and an image since this is cherry blossoms I'm just going to use an image I took two days ago at one of the gardens here just some beautiful cherry blossoms I thought I missed the season but luckily got one more Tree in so this one was waiting for me uh but let me just go to nft storage this is a place where you can upload to ipfs really quickly there's also like an API so you can do it programmatically but today I'm just going to upload uh where is it let's see desktop Tokyo hackathon so just uploading the token URI here it'll spit out in ipfs um link and I'll just add that to the front end so let's see is it this one nope okay we'll just use that one for now back in the index I'm going to change the token URI and then the very last thing is the contract ABI this is what gives our front end all of the knowledge about like what the contract actually looks like so I'll just grab this from the back end in where was it artifacts build info and then no artifacts build info and contracts so I'll just copy this contract into the front end and inside of nft mentor where am I putting this sorry I'm just moving this file out and we'll just reference ABI from this file inside of index so import contract from all right if all went well in this live demo we'll see a updated C where did it go I'm hoping to see a minting site looks like it's loaded poop oh here it is okay so I'm gonna mint now we could improve the CSS obviously but this is the the general mentor gas seems to be weirdly very high but we won't worry about that quite yet and I'll go back to the contract and let's see if we got that minted successfully so we should see one new transaction that is a mint whoof here it is let's check it out nothing ever works for me the first time so I'm kind of impressed with this so hopefully we'll see the nft minted to this address and that will be our create uh not create react app create what create web3 dap demo on polygon ZK evm so if I can do this in 30 minutes you all can definitely do this uh within the two-day hackathon but come on Wi-Fi let's go we'll see okay um I'm gonna go back to the presentation there's just one more slide and it is a QR code to the docs and then if you need any docs this weekend these is this is where all of them are for polygon ID ZK evm POS our prizes everything uh but I'm Steph and I'll be at the polygon Booth all weekend so if you need encouragement if you need help come say hi and I'm happy to help with anything you need as you're hacking whether it's polygon or anything else love to talk about web3 but let's go back and see if this actually loaded and worked please please we might just have to assume it did because I don't know if the Wi-Fi is loving me right now but hopefully we've got an nft of a cherry blossom thank you so much I'll just let it load until our next presenter comes Oh yay we've got it yay