Turn a WASM-Based Browser Application Into an Ethereum Rollup via ZKWASM | Xin (Sinka) Gao - zkWASM

[Music] okay okay thanks for inviting and today I'm going to actually demonstrate a way to build web to Applications especially browser web to applications using CK virtual machine and in particular uh CK web assembly virtual machine that built by um the defin lab and I was the founder of Def lab and make contributor of this uh CK virtual machine the agenda of this talk is split into five sections uh at the first place I'm going to introduce a little bit about the web assembly by code and then I will going to introduce the the way to integration of CQ web assembly emulator with browse applications and then I will demonstrate how to develop a tiny fully onchain game on top of our virtual machine and by demoing that I'm going to introduce a standard programming model it's called MVC so that uh which perfectly fits our um architecture and then I will intr introduce our proving service which is uh web assembly CK virtual machine Cloud okay let's start so what is web assembly web assembly is a instruction set architecture so which is a binary encoding format that can be run um by web assembly virtual machines on any hardware or software that supports this Isa and especially this can be run in browsers so which leads to our current discussion about how to actually porty web assembly applications in browsers into a secq web assembly virtual machine application and so far the web ass assembly bite code is Now supported as backend for most of the traditional languages for example um JavaScript C C++ Ros Swift can all be compiled into web assembly and it runs in the browser okay so what we can do using web assembly in the browser I Mark all these orange color titles to be the application that we are interested at so we can build peer-to-peer applications especially games in a browser and building music applications streaming and cash applications in browser also scientific visualization and simulations in browser and definitely fight fed clients for Enterprise applications especially database and database services in browser and outside browser we can use web assembly to dispute game services and build hybrid native applications on mobile devices and symmetric competition across multiple nodes um for example substrate is uh utilize web assembly virtual machine to build their chain facilities um and how web assembly can be used in browser applications is that modern web browser applications and browsers this states can natively support running web assembly that means we can use use web assembly and invalid web assembly in browser as the main logic and remain and the UI and the uiux remains retaining JavaScript and HTML so today my main target is trying to demonstrate how to separate the logic of a browser application so that we can replace the logic um the main logic with web assembly and then run web assembly our CQ web virtual machine to generate trustless Compu computations um in a browser okay um before we have introduced about what is web assembly bite code and how we use that in the browser now I'm going to introduce a little bit about um CK web assembly the CK web assembly is a CK virtual machine that supports web assembly by code it has three main functionalities first it actually runs the web assembly by the code and generates Pro and generates results and second that it generates the same result as other webm virtual machines just like the browser did so that means it generates the same result as the browser did for web assembly and third thing that the CK web assembly virtual machine not only generates a result but also provides a CK proof which actually prove the correctness of the result of the execution of a wome binary okay and this is the a brief of the architecture so to integrate um CK a CK virtual machine in a browse application a little bit subtle and I'm going to review the classical application architecture of how we build a web 2.5 application in Old School y so first we can see that the application is run separately outside the blockchain uh if you actually run application in the browser and the application triggers onchain data modification um and then this onchain data modification get signed and posted to the blockchain this is a very um efficient but less clear way to do applications because all the computation in the application side is not trustless right you'll remind uh uh it depends on some centralized servers to actually sign the transactions and sign the logic so that it convince the onchain contract that a certain kind of logic has been carried offchain okay how to make this architecture a little bit more secure and the idea is that we would like to put everything on chain for the first try would like to put everything on chain so after that um the architecture will look like this which we embedded all the logic um on chain that means if you would like to do a complicated UI ux application you have to sign all the transaction every time you modify and play uh a certain application for example game you move right move left every movement you have to sign that and then you upload your transaction to onchain and update the onchain state the problem of this fully onchain appli ation structure that it's not very efficient and it it actually involves involves lots of signature which actually triggers lot of uh gas cost so which is definitely not fit for certain applications like gaming so our application our solution that we still would like to have a effect of trust L for the onchain application but we're using uh the CK technology which actually transforms the the logic part not on the blockchain but in a CK virtual machine so that in CK virtu machine every time we interact with the application we emulate and proves the result in the CK web assembly virtual machine and then push the state diff with proof to the blockchain and to the settlement afterward afterwards Okay so um regarding this architecture I'm going to demonstrate how to do that because at first glance people might think this is too complicated um but actually it is pretty simple if you're using uh the correct tooling okay I'm going to um demonstrate a small card game um which runs in our web assembly application sand box and here uh we are going to load a small game um which is a very dump trivial card game and on the left hand side I'm the player and on the right hand side is the monster that I'm I'm going to defeat so just imagine that in our web 2.5 world this logic is running off chain right un trustless uh run offchain and every time we play a card like with strike uh it actually decrease the HP of the monster and it's calculated off chain but what's the difference now is that we not actually only run this in a browser environment we also run this in a CK web assembly environment which is the sandbox of this demo so that if we perform lots of um transactions you see that we're not going to sign every transaction all the time but every time we click anything and play and click anything this is run sorry I I get killed but anyway this actually finishes game so it might involve lots of transactions but we are not going to sign all transactions during the play but what we do is that we have a sequence of user um inputs and because this um game is running in can be run in a CK web assembly virtual machine we can generate a approve for the game for example we can submit and generate appr proof so if I click um confirm it signed the all transaction for me and then push uh the execution Trace to a proof generator which actually generates the proof of the game play to own to a cloud proof generating service okay so it's actually loading us so this is the new task that we have just submitted and this Cloud CQ web assembly um proving service will generate proving for our game play and after we get game after we get that proed it might take a few seconds maybe 10 seconds uh or 30 seconds or maybe take longer um it depends on the trace and circuit size um uh regarding how how much time it will consume so once we have um done approv it has been done now once we have generator proof we see that all the inputs are actually represents the game play that the users have performed on this game and we generate a CK snug proof which can be used to convince on onchain contracts that this kind of game is executed in our CQ web assembly Stander books and the execution trace and the result and the reward is somehow calculated um securely and trustless so we can use this proof to verify on chain can select a chain uh let's see this one and we can um so sorry maybe I have to um connect to to my wallet okay so we can actually verify this proof on chain and do some kind of settlement confirm to the settlement um and you can somehow autola in Your settlement contract to decide what kind of reward you are going to give a player after he have finished a long sequence of game play for example you can design a game which is a SLG and after 1,000 steps of game play you can give him some some rewards and this contract demonstrate about how we can coding the callbacks once approve has been accepted for example if someone would like to give uh a token transfer if someone has finished a very good game play he can write a verifi function which actually verifies the proof at this place and then call the side effect function and based on the core data that the data has that the user has pushed to the blockchain he can decide what rewards he could pay the player so this side effect callback functions are the key to actually reward the user or give feedback to the user and there are several good points of using this architecture firstly you do not have to sign every movement of your game play and the second thing that it's very smooth and because it's running natively in the web in in the browser um that means you can coding a web 3 application just like you're coding a web2 application you can using JavaScript um rust cc++ and then compile them to the web assembly and put your game straightly on a browser application your WordPress in any kind of uh cloud service and Run the game ask the user to play the game generate a trace and generate proof because all the execution is performed in a CK virtual machine there's no security issue right and there's small subtle thing that at the beginning I asked you to log in your wallet and assign an address which means every time you play a game you you log in with a local generated um signature and this signature will be verified every time you push the proof to the unchain verifier so that no no one can actually fake the game play and get your rewards right okay so this is um a complete frontend demo about how to use the web assembly virtual machine and embeded your application in the browser but there's another part is about how you actually coding your application right the coding application not just um putting the sandbox and adding some code just straight in the browser HTML right we have have to code in your game logic in a web assembly that means you have to pick a language that can be compiled into web assembly by code the Alternatives will be the JavaScript the typescript um the assembly script definitely and the cc++ and the rust in this um in this demo we use the rust as our development language and let's see how the game is developed uh by the way when we actually developing this demo we're using a architecture called MVC which somehow separates the view and the model and what we are interested is that we we we would like to run the model and controller in the web assembly virtual machine but not our view right but the view because the view is a representation of the model itself and it has no point to actually prove the view uh for the on on train verifier so we mainly fix Focus on the model and the controller okay here is how we um how we cod in game let's first see um the make file because the make file sketch out the deployment of our gaming this time we see the first line is the compiling command that actually compiles our full code into a web assembly package right so after we compile this after we compile this we see that uh in in the package folder we have our Target files um it had contains the main web assemblies and the type definition of our assembly and the loading script that you we can use to load the web assembly in the browse application so we copy this all these files into our reactor web U web application and we copy it here okay we copy it here and after that um we code in the controller using uh a tool called U react it's pretty simple uh you put some buttons and add some onclick event handlers for the controller which gives you you some kind of callback when you actually click this button click okay so when you actually click this button it um I think it picks a card right here you click the button you pick a card so what does the pick card mean because this is a controller right it has to call and interact with our web assembly so that means this controller will eventually call in into our web assembly code and this P card looks like this P card right and see this in it as any and this is the web assembly so that we have loaded this is the web assembly so the pi card means you somehow um get the handle of the web assembly you have just loaded and you play a card right you play a card it's pretty pretty easy right so now this demonstrated that how we can um load and interact with the web assembly image in our browser application okay now the most interesting about is how we coding the web assembly so how we layout and coding the web assembly so that it becomes an interesting application U for the applications that I am demo at the moment is a simple application right it has a global State and some activities that I can perform to actually change the global State and if actually I win I can somehow generate a proof and tell the on train contract that okay I have win this game please give me the reward okay so let's see how the game is coded because all this web assembly has to be run in a CK virtual machine we have to specify uh entry point of the image and this entry point looks like the entry point calls um the CK M right it's just relevant to a main function but we call the CK M because the CK virtual machine will run this and generates proof of this entry function and besides the core command Handler we have some signature handling stuff which ask the user to actually sign a contract when they have finished a bunch of play the the core feature is that we perform the command in the loop right so in the loop we somehow collect the command from the user that means every time we click a button the Handler will somehow transform the command and transfer the command into the web assembly Handler and the Handler will actually catch this command and form the state transformation internally uh in our rust code so that means just remember um in the rust code you have a large Global State and the Handler actually performs all sorts of commands and change the global State and every time we somehow change the global State you still have to render the user right based on the global State you have changed so that gives another issue that we have to face which is actually get information back from our web assembly code so somehow get Global State and this is pretty straightforward because we can transfer uh transfer the global State as Json to the uh uiux you see that okay here is the global State we have lots of features like how many cards it has and if I actually play one card I get another Global state so that the procedure will be I play a card which actually triggers a command and then which invokes the web assembly application the web assembly application somehow handles the command performs the command and change the global State and now the uiux somehow receive Theo Global State back and then render the application again right after several play um you reach a global state which is stable and you can say okay I have finished my game play at that stage there's no signature happening right but if you're happy with the game play you can somehow generate a proof right just like would have just done before I think 10 minutes ago and at this place somehow signed game play and Generator proof uh from our web assembly Cloud okay see there's a new proof generating at the moment okay that's the whole story of the game development and after that I'm going to um introduce introduce slightly slightly a little bit about our CK wome Cloud because we have seen that uh once we have finished the game play we need some kind of um proving service somehow generating proof for the CK virtual machine and you can run a CK virtual machine um locally just download our GitHub repo and set up local server is fine but for the cost Effectiveness you might would like to integrate with the onchain stable service so that you can uh submit your image a game image to the cloud and every time you would like to generate a proof you ask Cloud to generate the proof for you and this is the web assembly image hosting and proving service and it's pretty simple to actually uploading an image to the cloud service uh which is just a one line code uh we call it publish it's pretty simple you download our SDK and connecting with our Cloud CK wome service and provide the web assembly you have just coded and would like to play in your browser uh specify your private you this record it okay um and then let's run that so because I have already run this script before so it will give me an error that this web assembly image has been uploaded already but if you have not actually uploaded this image it will give you a web assembly md5 code and you can use this code and inject this code into your configure so that the game play can somehow know which image you are regarding to where you would like to generate a proof and this is done in the configure file so just copy that md5 to this configure file and it will get this small onchain fully trustless offchain game for web three which means in thetically you can turn every web applications into web three TR llay using the web assembly CK virtual machine thanks