Build Your Own ZK-EVM Layer 2 Blockchain Using Polygon CDK

in this video I'll show you how you can create your very own ZK powered layer 2 blockchain more specifically I'll show you how you can create a ZK evm validum built using polygon cdk we'll first walk through how you can deploy all of the infrastructure required to run your own chain and then we'll quickly run through how to create your own decentralized application built on top of the chain that you just deployed by the end of the video you'll have your very own blockchain you'll deploy a smart contract to that blockchain you'll create create an application to interact with the chain and you'll have all of the necessary infrastructure to interact with those decentralized applications like a faucet a bridge as well as things like a block Explorer so without further Ado if you're excited for this video please remember to hit the like button if you're interested and subscribe to the channel if you want to see more videos like this with that said let's get right into it so the technology that we're going to be using as I mentioned in the introduction is the polygon cdk or polygon chain development kit the polygon cdk is really a way to create custom tailored chains specific to your needs that kind of use the same technology under the hood that powers polygon's own chains like the polygon ZK evm for example so you can see as this diagram kind of suggests here you'll be able to pick and choose things like whether you want the sequencer to be centralized or decentralized whether you want the prover to be type one or type two whether you want the chain to operate in validium or rollup mode all of these kind of different customizations are available for the underlying infrastructure that is being built and Powers the polygon chains themselves A major benefit to using the cdk is that all of the chains built via the polygon cdk including polygon's own ZK evm and ZK posos chains will kind of be connected via this interrupt layer which will allow you to kind of seamlessly swap between all of the L2 chains powered by this technology if you want to learn more about polygon 2.0 the cdk and the inup layer and how all of this is connected I have this video on my channel on what is polygon 2.0 if you want to dive deeper into kind of the high level overview before we go ahead and create our own chain in this video last thing I promised before we dive into the creation of our own blockchain is if you want to kind of receive customized support or you have any questions about the cdk you can reach out to the polygon team directly to get kind of tailored support for your application chain such as companies like mutable ZK evm and nosis pay and palm Network all of these uh lovely chains down the bottom here have done as well if you want to you can click this apply Now button which will take you to the interest form you can fill in the details and contact the team directly but with that said let's create our own layer 2 blockchain okay so on the actual polygon cdk page and again all of this will be linked in the description you can head over to the GitHub page and this is going to take you to the cdk idium node repository where all of the source code of everything we're about to deploy is actually available so you can view and contribute if you like to any of the actual pieces of the puzzle that we're going to require to run our own chain via the repository here or the set of repositories that make up the broader cdk and as we scroll down to the read me here you can see there's kind of step-by-step instructions on deploying and kind of cloning these repositories locally and using things like Docker to get them up and running on your machine but what we're going to do instead is we're going to use the implementation Partners so the way that the cdk works is it has all of that kind of base level uh code and infrastructure that anyone can permissionless run right using the actual source code available in those GitHub repositories and you can use things like Docker if you want to but what we're going to do is we're going to use an implementation partner and the way that this kind of system works is implementation Partners have made it easier for you to actually perform all of those operations right so it's kind of a a layer built on top of that GitHub repository where it says hey here's all of the stuff that's happening on the back end we're going to deploy all of the infrastructure for you will'll run it on a cloud of your choice will allow you to pick and choose which customizations you want that are available via the cdk and we'll do all of the heavy lifting for you and deploy it to whatever environment you want to actually run that infrastructure in so it means that you don't have to say run all of these Docker containers and deploy them to a and monitor them all yourselves the implementation providers take the code that's available and kind of run it based on your preferences and based on where you want to host it so that's just kind of a layer of abstraction away from that base level of the actual source code yourself so if we scroll down here you can see there's a couple of different implementation providers the one that we're going to use is called Gateway so let's go ahead and click on Gateway this is is going to take us to a website called Gateway FM and as you can see here this is kind of a service or an implementation provider that does all of the infrastructure deployment for you and gives you a nice UI where you can pick and choose which customizations you want and get a kind of dashboard type system where you can monitor all of the services that got deployed on your behalf so what's going to happen here is we're going to click on this build button and let's go ahead and actually sign up for this service now so let's click on continue with Google I I think I've already signed up I think the sign up process is very simple you just use your Google login so you can see at the top right here I'm logged in and this will take us to this kind of empty dashboard state so we don't currently have any projects or chains deployed there's one kind of public test net down the bottom here you can see got stavenger public test Network what we're going to do is we're going to click add new and this is going to take us to a kind of multiphase form where you can pick and choose the customizations that you want for your layer 2 Chain so for us let's take a little zoom in here you can see coming soon there's going to be a couple of different options for now we have test nets for things like validium on the ethereum chain or validium on the nosis Chain let's go ahead and select validium on ethereum so let's select testnet free and here you can see well where do I actually want to host all of the infrastructure that I'm going to deploy so where do I want all of the things like the docker containers or whatever infrastructure is required to actually run run the different aspects of the chain where do I want to deploy that to and you can see the first option here is deploy to a us or the second option here is called on premise so as the name suggests if you're running your own servers or you're running this out of your garage or something like that then you can go ahead and select on premise for me I'm just going to use the option called stockhome here so let's go ahead and select that the third step here is you can select the default gas token so if you want to use ethereum essentially on your layer 2 chain as the native token that is used to pay the gas fees for transactions if you want to cover the gas fees for the transactions or you can kind of choose different options for each of the different aspects that you want to customize again so for Simplicity I'm just going to go ahead and use eth as the native gas token so I'll select default gas token here and let's go ahead and click create so after the step here you can see it takes you to this congratulations page and what we can do is we can click go to dashboard and if we scroll scr down a little bit here you can see now our chain is actually being deployed all the services and infrastructure required to run the chain are being deployed so if we go ahead and click on this you can see this is actually provisioning the infrastructure required for this chain to deploy and run in the background so this might take a couple minutes so go and grab a coffee go and grab a drink of water watch some Tik toks on your phone whatever you want to do this will take a couple minutes for all of the services to deploy to AWS in our case and then we'll come come back and see this kind of nice dashboard view where we can get a sense of everything that's been deployed and how we can connect to our blockchain once it is deployed you get this nice looking email it took around 5 minutes for me for that to arrive if you head back to the prestor gateway. FM URL that you were actually seeing that provisioning screen before you'll be able to see now all of the information about the blockchain that you just deployed available in this kind of dashboard style view here so you can see things like how to add it to your wallet how to add it to your smart contract environment how to connect to it via RPC the chain ID the URL to economics Bridge faucet block Explorer etc etc all of the necessary information for you to go ahead and create your own smart contracts your own decentralized applications really anything that you want to as if it was an ethereum type blockchain it is an evm compatible blockchain so what we're going to do next is we're going to actually create our own smart contract and we're going to look at how we can connect to this layer 2 blockchain that we just deployed and actually deploy our very first smart contract to this chain right here to set up our hard hat smart contract environment I'm going to use third web CLI if you don't have to use uh third web if you don't want to you can just use hard hat the steps will be very similar I'm just using this for kind of Simplicity as it's what I'm most comfortable with in actually creating these applications so let's head over to the terminal here and the command that we're going to run is npx thir web add the at latest tag here to get the latest version of the CLI and we're going to create a new contract so we'll say npx thir web create contract and this is going to first ask us to update the CLI and then it's going to ask us a series of questions of how we want to actually set up the smart contract environments it's going to ask us if we want to use either hard hat or Forge and a couple of other configuration questions on on how we actually want to set up the smart contract project so let's go ahead and install the latest version here cool let's go ahead and give our project a name I'll just call it contract I'm personally going to use hard hat you can choose to use either hard hat or Forge whatever you're most comfortable with so let's go ahead and select hard hat I'll just keep the default name for the smart contract we'll give an empty contract to start with and this is actually going to go ahead and create a new hard hat solidity smart contract project in this current repository so we'll give it a couple of seconds to actually go ahead and install the dependencies and then we'll dive into vs code to write our own smart contract and and then we'll move into the deployment process just as a quick side note if you get the same error that I did where I'm using the incorrect node version what you can do is go ahead and install this thing called NVM node version manager and then you'll be able to run this command called NVM use 18 and this will just prompted me to accept a couple things from admin swap over to node.js version 18 and then you should be able to change directory into the project and just run Yann or npm install whatever you're using as a package package manager if you didn't run into this era don't worry about it but just for my homies using nodejs 16 or node js20 or whatever version you're on you can actually just use NVM to swap over to a necessary version so if you didn't run into that don't worry about it but if you did you can use the same trick that I just did all right cool so now our dependencies are installed let's go ahead and open up this directory inside vs code here and I'll bring this into frame for you so you can see what's going on if we zoom in to the project that we is created right where you see our project is named contract and within that there's a contracts folder with a contract. solve file which is actually a solidity smart contract it's just an empty smart contract that has a Constructor that does nothing so it really has no functionality at all so what we're going to do is we're just going to write a dummy smart contract you can deploy any solidity files that you want if you have an existing solidity smart contract that's great the deployment process that we're going to use will be the exact same I'm going to go ahead and use this example grea smart contract from my evm kit so let's go ahead and copy and paste that into this and we'll rename our smart contract file to grea and there we have it so that's our smart contract you can use again any solidity code that you want it will be the exact same deployment process excellent so now that we have our smart contract let's actually go ahead and deploy it so from the same directory that we just kind of changed into and open it up in our Visual Studio code let's actually go ahead and use the deploy command from third web to actually deploy the smart contract as well so what we're going to do is we're going to run index third web and again I'll add the at latest tag to the third web CLI and we're just going to run deploy you actually don't even need to do this you can use the built-in package Json script here so you can see here is a deploy in this script section here so you can use Yan deploy or npm run deploy for me I'm using Yan so let's just run Yan deploy and that will actually run the underlying script as well so that's a little bit easier so this is going to essentially take our contract and say hey you're using a hot hat environment it's then going to try and compile it to make sure there's no errors it's then going to spit out this command that allows us to actually go ahead and deploy this smart contract so I'm going to go ahead and open this up in my browser here and this is going to take us to the third web dashboard so I'll bring this into frame again and what this is going to do is it's going to take a look at our Constructor and say hey here's all of the fields that you need to pop poate can you go ahead and populate for me and then select the chain that you want to deploy to and I'll go ahead and deploy that smart contract so all we need to do is just go ahead and connect our wallet here I'm going to use metamask you can use whatever wallet you prefer so let's go ahead and connect with our metamask wallet just go ahead and sign in and we'll sign this message to actually log into the dashboard here go ahead and sign this and as you can see I'll just go ahead and provide my email here I'm not going to subscribe to the updates awesome so you can see here we currently have the polygon main net chain selected right but what we want to do is we're going to swap over to the chain that we just deployed using this prestor or Gateway FM implementation provider to actually create our own ZK validium so the way that we do that is we select this network here and we're going to click on this add custom Network button this is going to bring up this UI that allows us to kind of add in the information such as the chain ID and the RPC URL to our custom Network so what we're going to do is we're going to copy and paste all of the necessary information across from this Presto Gateway dashboard over to that form on the third web dashboard here so first we need the network name so ours is called Crown titanium so let's go ahead and copy paste this we can leave the network ID the same as the name the next thing we need is the chain ID so this is available under the RPC section here so let's go ahead and copy the chain ID paste that in the native currency we selected if you remember in that setup set up form was eth so let's just go ahead and use eth as the currency symbol here this is a test Network environment so let's set up a a testet network type here you can upload an icon if you choose to the RPC URL is the final piece of the puzzle and again under the RPC section here you can copy and paste via this copy button that my head is currently blocking here copy that RPC URL and paste that in the opic URL section click add Network and down the bottom here you can see successfully added the network and now once we search the name of our Network which was Crown titanium you can see that will show up as an option here so if we click this now we can actually add this to our wallet and swap on over to that Network so let's go ahead and approve the adding of this network first of all into our wallet here so let's go ahead and approve this and then the second step is to actually switch on over to that Network that we just added to our wallet let's go ahead and click switch Network next and now you can see in the network chain section here we actually have the chain that we just deployed set to the chain that we're going to deploy that smart contract to now we're going to run into a small issue here and we'll explain what's going to go on behind the scenes and why that issue occurs but let's go ahead and try and deploy our smart contract so let's just say hello world here and we'll go ahead and click deploy now and you can see the issue is you're trying to deploy the crown titanium network but no funds have been detected and if you look at the top right corner here you can see under my wallet I actually have no funds available on the network that I've currently selected so the issue here is we don't have any fees to pay for the gas fee to deploy the smart contracts to the network right so we actually need to somehow get eth across from the ethereum test Network to the L2 test Network that we just deployed thankfully with the dashboard that we just created if we scroll down what we can actually see is the faucet section here so it actually goes ahead and deploys a faucet for us that we can easily receive test net funds to actually deploy our smart contract so let's go ahead and open up this URL that we just copied from the dashboard into a new tab and you can see this is a simple UI where we can request funds to be sent to our wallet so what I'm going to do is from the metamask wallet or whatever wallet you're using I'm just going to go ahead and copy the uh address of our wallet and paste it into this faucet here and go ahead and click request so this is going to very quickly send us some funds that we can utilize to deploy our smart contract you can see that was just a couple of seconds and now if we swap over to the throw dashboard that is reflected in our wallet as well and we can easily click deploy now and this is going to go through smoothly this time so the first transaction that we're going to run here is a contract deployment transaction so this go ahead and confirm this and the amazing thing is that goes through very very quickly right that was probably one or two seconds so very quickly and very cheap and the second transaction here is just related to third web you don't actually need this step it's just so you can revisit the contract that you deployed and this is a gasta step so there's no cost associated with it so let's go ahead and sign this if you don't want to do that you don't have to again this is just a kind of benefit available via the third web dashboard so once this step runs we'll have our smart contract deployed and it will be kind of registered on the third web registry where we can revisit visit this same dashboard page over and over again from the kind of main third web page it's just a nice little benefit so here we are we just deployed our smart contract to the chain that we just applied so you know very quickly in 5 or 10 minutes we've created our own layer 2 blockchain created a smart contract deployed the smart contract to the layer 2 blockchain and what we're going to do next is we're going to plug this into a simple web application where we can read and write information to and from from the smart contract that we just deployed to have our users connect to the chain and interact with this smart contract to do that again we're going to use third web and a nextjs application using third web's react SDK to kind of power the web 3 functionality to actually connect to this smart contract connect to the chain as well so from the same terminal let's go ahead and clear this up we're going to actually change directories up to the kind of same directory where we created the contract fold so if we see what's available this is the Smart contract directory that we created and we're going to create a new kind of project in the same directory where this is the application side of the project so we're going to again use npx third web at latest create and this time instead of create contract we're going to do create app and this is going to set up a front-end environment so for us we're going to select nextjs and kind of a typescript environment just CU that's what I'm most comfortable with again you don't have to do exactly what I'm doing the process is going to be very similar you can use whatever tools you're comfortable with okay so this is just an example so for us the project is just going to be named application and here you can see you can choose again whatever you prefer nextjs create react app V react native or a backend environment just make sure if you want to kind of do the same thing that I'm doing select a front-end framework for me I like nextjs so let's go ahead and select that you can choose to use JavaScript or typescript for me I prefer typescript so I go ahead and select typescript here again this in instead of setting up a hard hat and solidity environment now this is going to set up a front-end project with nextjs which is a react framework if you're not familiar using typescript which is kind of extension of JavaScript again if you're not familiar so this way we're creating our frontend environment so in the same folder we'll now have a contracts folder with our solidity setup and in the application folder we'll have our front end setup with the the application that users are going to be able to connect their wallet with and actually swap on over and interact with the smart contracts that we deployed onto the L2 chain while this happens in the background I'll show you something cool is we can actually swap on over to presto dashboard and if we go to the block Explorer section you can open this up in your browser and this is a fully built out block Explorer and we can actually see our smart contract deployment transaction over here so we click into this this will show us all the details of the smart contract that we just deployed who it came from which was my wallet where it's going to how much gas was spent all of the information of what the transactions are occurring on the chain that you just deployed so that's pretty cool as well we'll also look at this uh later on where we execute some transactions from our application as well so let's go back to our terminal as you can see the project has been successfully created so the first step is to change directories into the application folder and we're going to open this up in our text editor as well the first thing you want to do when you open this application rep up is you can see in the mv. example we need to provide a client ID which is the third web API key you can get these for free from the settings tab of the third web API so go over to settings click create API key let's just give our thing a name Crown titanium I believe our chain was called and then for me I'm just going to select everything just because I'm testing and you can pick and choose which Services you want to use I haven't loaded a credit card up to this account so I'm just creating this for free I'm going to go ahead and leak my client ID and secret key as well don't do this uh you should keep these values secret I'm just doing this for demo purposes so that you can follow along easily so you should keep these secret and you should select uh which Services you want if you especially if you are planning on using some paid aspects of the the web services for me I'm not using any paid Services I'm just using the free TI services that are available in this account here so I don't really care if you steal these keys for whatever reason but you can go ahead and use use and keep your keys secure so what I'm going to do is going to go ahead and copy the client ID here and in the application folder let's go ahead and close the contracts project for now what we're going to do is we're going to paste this in and then in the new file let's create a new file at the root of the project called em. local and we'll paste that into the EMV example and obviously you don't want to keep the example file so let's go ahead and delete that all right so now you can see this is grayed out because this is not committed to the repository in the git ignore you can see all of the environment variable files are not committed so you want to keep these safe you never want to commit any of the keys if you actually care about these values so I'm just leaking it because I want you to follow along simply but if you care about the keys please don't do the same as I'm doing in this video okay what you'll notice next is if you go to theore app file if you're using nextjs I'm sure this will change in the future especially with the new versions of nextjs or if you're not using nextjs but just try and find where your application is wrapped in this third web provider component here and the thermo provider component accepts an active chain so you can see this is currently kind of hardcoded to ethereum obviously when not using the ethereum network right we just deployed our own L2 so we want to provide all of the information necessary to connect to that chain rather than ethereum if you want to see how this works under the hood you can see this accepts a a couple of different things but at the end it accepts this type chain so the type of chain expects a name an RC a chain ID all of this information to actually connect to the chain that you just deployed so what I'm going to do is I'm going to use the help of typescript if you're not using typescript you can just kind of look at the end result but I'm just going to utilize typescript to kind of help you understand where I'm pulling these fields from and what Fields you need to satisfy in order for this active chain field to actually be happy so what I'm going to do and you don't have to do this you can just copy the end result if you prefer but just to show you the steps of how I kind of figured this out I think it might be help so what I'm going to do on line 10 here is to say create a new object and I'm going to call our Crown Titanium because that's the name of our chain what I'm going to do is set this to the type of chain and let's go ahead and import that import chain from the at thir webdev chains package on line three here so then we can say okay now we have a new object and it's expected to be of type chain and typescript now helps us to say okay you want a you want a chain object right here's all of the necessary fields and information that you need to provide in order to actually create a chain object so again if you're using JavaScript you don't have to do all of this even if you're using typescript you don't have to do all of this it's just a little helpful to see okay here's how you know here's how I'm actually figuring out what Fields I'm required to provide in order to provide this as the object for the active chain prop of the third web provider so now as we start to fill this out you can see the first thing we need to provide is the chain ID so let's go ahead and copy the chain ID from the prester dashboard here so you can see chain ID copy this and paste this in as a chain ID value the next thing we need to provide is the name so let's say Crown titanium we need to provide the OPC so this is an array of opcs so we're going to provide the RPC that's public for us from the dashboard here so let's provide this and I'm just going to repeat this process hopefully you get the point I don't want you to sit here watching me copy paste values in you can just look at the end result as I'll cut to here okay okay so here's the end result we have the chain ID the name the RPC array with RPC pasted in here whoops and then for the short name the chain in the slug I'm actually not sure like what you're supposed to put in here so I just put in different variations of the name I don't think it really matters too much the test net flag set to true the native currency of ether the symbol of eth decimals of 18 just the information about ether as you'd expect and then optionally you can provide the block Explorer so IET the one to block Scout the standard of EIP 3091 and then copy and pasted the lock Explorer URL from the presso dashboard here into that field so if you if you have any questions again the source code for this will be linked in the description as well so you can go ahead and copy paste that if you get lost but yeah hopefully most of this is pretty self-explanatory so now instead of active chain here let's zoom in for you we are currently setting active chain on line 37 to this variable here so let's go ahead and delete active chain on line 9 and let's copy and paste Crown titanium variable and set that as the active chain so now our application is going to run on the chain that we just set up rather than run on ethereum awesome so now our application is set up let's actually swap on over to the homepage here which is index. TSX for me just going to go ahead and delete all of this boilerplate code from the template and let's get rid of all of this stuff what we're going to put in this main section here is let's just say H1 hello world for now and what we're going to do here is we're first going to connect to the smart contract via contract address and then secondly we're going to read some information from the smart contract just to kind of showcase how you can pull information from the smart contract and then we're going to connect the users's wallet swap them over to our chain and then call a function on the smart contract so first we're going to actually connect to it secondly we're going to read a function on the smart contract and finally we're going to write a function to the smart contract and that's going to kind of conclude our application so in our application I'm using third web again you can use ejs or wagm or whatever you're most comfortable with the process is going to be very similar so for me I'm going to use the third web react package and this comes with three key hooks so we're going to use use contract use contract read and use contract write from the atub web dev react package here so on line 3 to7 these are the three hooks that we're importing from the react package which comes pre-installed with the uh setup command that we ran the npx THB create app command that we ran these are all included and already pre-installed for us so the first one we're going to do is we're actually going to connect to the smart contract so we're going to say con contract is equal to use contract and here we need to provide a contract address so we can actually get this from the th web dashboard hopefully I still have it open yep we do so if you go back to the contract via the thow web dashboard let's give it a second to load here you can see we have our grea smart contract that we just deployed so let's go back into this and at the very top beneath the title here you can see the actual smart contract address it's also available in the URL which you can't see on your screen so let's just go ahead and copy copy and paste this smart contract address beneath the name and let's let's actually put this in a constant variable so let's say const contract address is equal to this value so then we can just provide the contract address as the first parameter of the used contract hook here or the first argument rather and then we have now connected to our contract second thing we're going to do is actually read a function from the smart contract so if you remember we actually had a contract called greed. Soul here is the source code we actually had a greet function which is a view which means it's readon this is just returning whatever the current greeting of the smart contract is so it reads this variable and just returns it so what we can expect from the Explorer here is if we call this we should get Hello World back from the smart contract call so the way we're going to do this we're actually going to call this greet function so that is the same name as the smart contract functions called greet so we're just going to call that greet function essentially so the first thing we're going to do is we're going to deconstruct the data and we can rename that data value to be anything we want using this colon syntax here to say greeting so we'll pull out the data we'll rename that to greeting and then what we're going to do is we're going to say use contract read and we'll pass the contract from the first step here as this the first argument and the second argument is the function name so what we're going to pass here is just greet I believe it was called greet yep so greet was the solidity smart contract function so we're just saying hey given this contract I want you to call the Greet function on that contract and give me the data and I'm going to rename that data to be something a bit more meaningful called greeting awesome so that's reading smart contract data the Third thing we're going to do is actually write uh uh data to the smart contract via initiating a transaction so again if we take a look at our contract we have this set greeding function and this actually requires a kind of state change to this this uh internal state of the contract so we're going to initiate a transaction called set greeting and this is going to update the state of the smart contract and also just emit this event uh just for example purposes here so what we're going to do again is very similar instead of reading we're going to say const mutate which is just kind of word for change something or or write some information or update some information we're going to change that to be called set greeting so we're deconstructing mutate out of the returned value of this hook renaming it to something more meaningful called set greeting and this comes from the use contract right hook and this accepts first a contract so again we'll just provide the contract and again the same thing so the second thing it needs is the function name so for us that was set greeting so let's go ahead and call set greeting here and that's all we need to do so now we have information being read from the smart contract and then we have a function now called set greeting that we can call to call the set greeting function on the smart contract so I hopefully that's self-explanatory in line number 16 here we're calling the Greet function which returns data line number 19 we're calling the set greeding function which is actually a mutation or something that changes some information and we're just renaming that to something called set greeding which is a function that we can call to actually initiate this transaction so now let's put all of this information on the UI so what we're going to do is we're first going to say display the current grading so let's do some text whoops some simple pext to say let's actually put the greeing here and the great thing about this is it also comes with flags like is loading so we can say hey is is the is the greeting currently loading so let's change this to be a little more complicated so say is it loading give it a question mark hey are you loading right now or or do you have the greeting available for me so if it is loading we're going to say okay actually show on the UI the loading text if it's done loading and you have the value let's actually show the value that you read from the smart contract so beneath that we're going to have a button that calls the greeting function or the set greeting function and for this we're going to use another thing from the third web dev react package called the web3 button and this actually for forces the user to connect their smart contract swap over to the chain that we defined in the active chain and then transforms itself into a button that calls this set greeing function so it kind of makes sure the user is in the right State before actually attempting to call and initiate the transaction so it says hey you're on the wrong chain buddy or hey you're you haven't connected your wallet you know you need to have a signer to initiate this transaction let's put you in the right spot so you're ready to actually initiate it correctly so the way that we're going to call this is we're going to call web3 button this accepts a contract address which obviously we can set to the contract address we defined on line 10 and then it also requires an action so the action is essentially what action you want to perform when this button is pressed and for us hopefully your your alarm Bells Are Ringing we have line number 20 here we want to call the set greeting function so let's call this function set greeting and here we need to provide I believe an object called augs and this is an array of arguments that you want to provide so here you can just put anything let's say hello YouTube and let's close the web3 button close off that action first of all close the web3 button and let's put in the text of what that button contains so let's say set greeting and then we I believe we can fix any errors if we run into any but I believe we're ready to display the information and actually call the function so what we're going to do now is we're going to go back to the terminal and we're going to actually run the application on our local machine so to do that I'm using Yan you can use mpm run whatever you prefer pmpm I'm just using Yan to actually run the command available in package Json so we open that up you can see there's a Yan Dev command or npm run Dev command that runs the nextjs server under the hood so let's say yandev so as you can see we can open it up I'll just give it a little bit of padding so you can actually see what's going on here so let's say style padding 250 so you can actually see what's going on there we go so here we have our application so we have the hello world let's actually just remove that because it's kind of confusing so here is the greeting that uh we have so this is reading from the smart contract and if we refresh this you can see it's loading at first and then it says Hey I've actually loaded now here is the value the set greeding function if we go ahead and swap on over to the incorrect Network so let's swap on over to ethereum for example this is going to say hey you're on the wrong Network you need to switch over and if we open this in Incognito for example you can see it actually asks us to connect the wallet if I zoom out a little bit here you can see the kind of beautiful default connect wallet button from third web comes up and says hey you haven't connected your wallet yet you need to connect your wallet then you need to switch on over to the correct Network so this is what this looks like if I can drag this across and show you so it says hey our smart contracts are deployed to this network you need to swap on over before you can call this function go ahead and switch Network and then it swaps to the set greeting button so let's go ahead and call call this the transaction is going to pop up the set grading transaction comes through here you can go ahead and confirm this and instantly the state of the smart contract is updated to hello YouTube which is what we provided and that is reflected in our application one last thing before we close out is I'll show you again if you open up the block Explorer you can actually see all of the transactions again so we see the previous uh contract creation smart contract that we used iated when we deployed the smile contract then now we have a contract call function so we click into this you can see from our wallet address is interacting with the smart contract address and I believe if we yeah we scroll down a little bit so we can see the method called was set greeting the function was called with this argument of hello YouTube and this information relevant to everything we just performed right so it's pretty cool you get the faucet you get the bridge you get the block Explorer all out of the box you are able to easily connect to your chain that you deployed via any of the tools that you're familiar with like third web for example you can create your smart contracts easily via the RPC URL and the chain ID and then plug those into your application environment as well to swap users over to the chain that you just deployed and interact with the applications as well so that's it for this video you've deployed your very own ZK evm validium you've also created your very first smart contract onto the validium you deployed and then created a front-end application to interact with the chain and the smart contract you deployed on the Chain as well very quickly I'm very excited about the cdk I'm going to be making a couple of more videos about this topic as well very soon so if you want to see those as well please subscribe to the channel and if you found value in this one please remember to like it as well if you did I hope to see you in the next one and thank you for watching

Channel: Jarrod Watts

Views: 5,244

Keywords:

Id: rKci4nyPC4w

Length: 38min 53sec (2333 seconds)

Published: Tue Oct 31 2023