Mopro: Powering Noir on Mobile

Transcript

Good morning, GMGM. Thank you everybody here for taking choosing [music] to spend your time as our third inaugural no. >> Okay. Hello everyone. Yeah. So, we are good to go and start uh to build our first uh ZK uh noir mobile app. Okay. So, if you're ready, we'll get started. So, um notice that uh this will be a workshop and talk like mixed out. So things like I I think um not sure um who here have uh develop on mobile before.

Ah that's awesome. Yeah. So there's some uh prerequisites that you have to uh install before that. So we're trying to like give people some time to install it. So in the meanwhile uh while people are downloading the prerequisites we'll try to uh walk through what is pro in high level and also uh some new features we have some cool projects we had before and then we'll jump to the workshop uh workshop itself. So uh my name is Mulvin I'm from PSC uh Etherno uh yeah so this is the today's goal about the the workshop. Yep. So um if you haven't installed the dependency yet

so uh you can uh these are the things you want to install and I think the first column is kind of missing. So uh if you are using Android uh you need to use uh can download Android Studio and you can directly go to their official website to download it. And if you are using iOS uh you can um download Xcode which is uh live on app store. So you can directly get them. Let me see. Yeah, it's a full version. Okay.

Okay. Not sure why it's disappear. Yeah. So, uh we recently done a lot of thing for crossplatform mobile development. So, uh in order to get the firsthand experience, uh we recommend you guys to try flatter or react native for the for this workshop. So, uh it does require some prerequisites. So, if you haven't downloaded yet, like feel free to go to fl's documentations or react native one. Yeah. To get you prepared. And last but not least, uh make sure you install more pro CLI. It would help you like to start your smooth process on building mobile ZK app. Okay.

So uh if you have like further like things or you want to follow the documentations, you can also go to mobile's website for that. Okay. So okay. So why people are install the prerequisanded for mobile proving and uh what we want to do is that since there's some scenarios especially in client side proving we want to keep 100% of our private data in the device we can control. Yeah. So that's why uh having the ability to have your mobile be able to do uh proving is very important to

us. So we noticed this gap uh like uh exist in the theory and realistic side. Um so we tried to build more pro to both enhance the developer ex uh experience and also the user experience. Uh so yeah so that's uh more pro uh what we aim for. So our target is is to help developers or projects to build privacy preserving mobile app. Yeah. So actually it's quite you uh very easy to use it. So only like three key uh commands you guys have to use in this workshop today. So first of all uh you're going to need Moro in need. It just like in need uh Moro project which

is essentially a ROSS project. So inside of it, it have a uh library where you can define what kind of functions uh or like business logic you want to uh expose to your mobile interface. Then we'll use FFI like foreign function interface to pour this ROSS binary uh to mobile so that uh your uh mobile native platforms or languages like cotling or swift can understand and directly access to these like ROS functions. Yeah. So we use uh mop in to create this rout library and once you define the functions you want to expose to uh you can go for the second one which is more

build. So what build do is we will generate the bindings for your exposed rush functions and uh moreover like we have many functions about it. So if you are using like native solutions uh we have codling and we have swift but uh more important we recently integrates uh ffi for crossplatforms uh like uh flatter we use flatter rosbridge to like eliminate a lot of glucose that requires but also like have react native fi inside of it. So I believe it it will be a really nice uh developer experience.

So we'll try that later. Yeah. So now you have the ROS library, you have the uh bindings that you generated for it and the final step is more create which will help you scanfold a template app so that you can get start building your mobile uh applications uh in no time. Yeah. So like also we have like native one and crossplatform one you can choose too. So very simple just these three steps will help you get start building your ZK uh applications on mobile.

Now uh I'm going to work you through some examples uh projects over here. So first of all uh I think since you are in uh Aztec uh crowds here people are amazing and I I think most of you guys have heard of uh steel. Yeah. And we actually built a mobile version for it. So it use the uh same things underneath uh it's like ZK JWT that is written in no and then we can prove uh this JWT using uh Google of like so so to provide a really like smooth uh UX and also you can uh prove that your organizations uh without revealing the post and also you can uh verify like user can verify each

message is actually comes from uh the specific uh uh email address that uh the you uh these users uh posted from. Yeah. And also like we have a interesting feature uh which is the internal chat within organization. So that some chat uh if you're from these email domain uh then you can have the access to see this internal chat and also one more thing that we want to highlight about the UX on mobile. So if you can like if you have ever used uh stealth node before you'll notice that uh what you pose is like pure uh text right but in mobile we can add additional parsing about it. So we can actually parse the mod syntax so

that you can have like format uh message like this and also some tables and also you can include uh images or like links inside the stealth node. So it's like I greatly uh extend the feasibility and uh functionalities of stealth node. Yeah. So if you're interested in it uh it's also open source uh you can download it and play and also it's on test flight so you can like download it uh on your uh iPhones and get the experience out of it.

Okay. Uh next is that uh I think in the mid of this year uh some people built this proof of geolocations where uh you can uh prove that you are within a certain distance uh that uh the uh the circuits want to verify. Yeah. So uh it the circuit itself is quite simple. It first start as a circum uh circuit but I think uh there's a lot of people like translate it into noir. So uh this is a really fun topic. uh in my opinion and uh one big challenge for these uh applications will be like how can you combine the um your mobile's GPS data directly port them into the circuit so

that you can like make sure like users not cheat about it but imagine that if we enable this like there's like additional check uh for the maybe host of the event to verify whether if these people is like near around the venue while they're checking or there's like many other uh applications will derive from this. Okay. And the next one will be uh the solidity verifier uh in order to unlock the onchain verification. So uh in Moro we support circum for this.

Yeah. So not sure whether if everyone plays around with noir's onchain verification before. Uh if anyone has not yet okay that's great. So um we also provide this template so that people can uh not only generate a proof offline but also you can use this proof uh to send it to the smart contract and verify on chain. Yeah. So uh with this template uh I think later I going to show you a live demo about this and also uh if you're interested about it you can follow this ripple and try the noir version. You will be very fun. But uh one thing uh to one heads up is that uh we only update

like because noir and bariton back end is like update really really quick. So we log into a specific version for this. Yeah. So make sure you go to the ripple and uh give it a check. Okay. And that's uh pretty much about no part. But also there are something that we feel exciting and we want to share with you that running ZKVN on mobile is actually possible. So this example is risk zero. We put them uh integrated with Moro and build a template for it.

So you can see the left hand one is a very like raw one that we directly derive from reros template and the middle one is that we like uh try to implement ECDSA uh verifications uh w with within uh risk zero. Yeah. So uh this is quite cool experiment and the result turns out it actually works but um the it has long execution time. I think our benchmark is like uh close to 90 seconds for the ECDSA proof but I think there's like a lot of ways to improve that and on mobile we have some like tweak that we can do for this kind of scenarios for example you can put

this long generations of proof into background service so you can even close uh you can even generate a proof while you close the app and you just put it put it in your pocket and once it's like done the proof it will notify So things like that uh is like possible on mobile and I think it will be the first uh step of like running ZKVM on mobile and uh I think this direction will generally uh like greatly improved a developer experience on mobile when they are trying to build a ZK app. Yeah. So we'll see we're very excited on like how this uh direction will evolve and there's a cool one it's called moiscale. So uh I know that um is like

next door like introducing face match that's quite interesting and we also received a hackathon project from east gobo this year like uh doing this uh similar thing they want to match uh people's face with their identity. Yeah. So uh they uh he do it inside the TE to run the phase match algorithm and uh they use uh the nor to verify the attestation generated from TE. So this is quite interested about it. Uh and if you are like curious about how does it work, you can also go to ETH global uh page to check it out.

Um also some cool stuff like uh some uh ZK Knox team has built this project called ZKeeper uh where they have several features and I think each of them is like very interesting. So first is that uh they have like turned the respense of your uh uh if global wristband into a ser and then uh implement a uh postquant access control with EIP uh 7702 to do so. And last but not least they have a like raw version of NR integration which is super cool.

And uh like now we we we are focused on mobile right. So the most important thing in mobile I think it's like the user experience. So zero surf uh is from the last hackathon in New Delhi and what it build is that enable a browser to do age verification using not uh not adar uh which is a uh like uh verification protocol for uh India's atar identity and it use like deep link to achieve like really smooth like interaction. So I'm going to show you uh here.

So hope the network it's going to work. Awesome. Yeah. So you can see that when you go to some website and it requires you to prove that you are uh age of like of more than 18 and this uh demo use like uh NR to generate a proof to show that okay you have uh you you hold valid identity that can prove that you over 18 and once you do that it will trans uh it will like uh redirect you back to the browser itself and then you can see that the content is now unlocked. locked.

Okay. So we uh we got projects that we built for from from Ourel. We also have projects that uh from ETH global hackathon and as we keep building this ecosystem we found there are some projects from the community. So this one is called solidarity. Uh it's live on iOS now. Uh let me adjust it. Okay. So uh it aimed to build a business card with privacy preserving features inside of it and it used like semos for swift for group management and I think the most interesting thing is that it integrate airdrop. So imagine that uh one day you met other people maybe in no account 3 venue. You grab out your

iPhone, uh, the other people grab out his and it just like, "Hey, can you airdrop me your business card and boom, it just appears and store in your Apple wallet and like with semaphore building within it, you can send a message like to the similar group of of people that inside a group uh you can send anonymous message for uh to to them. Yeah. So this is uh very interesting. I I believe there are still like fastly iterate uh through uh improvements but I just want to show you guys that uh this uh mobile things with ZK integrated is like on the way.

Okay. Okay. So there are few things we will do after uh devcom net. Uh the first is that uh notice uh if you can remember uh we just said that you have to run mopro in nit to create a ros library so that you can add the uh functions you want to expose to them right so actually this part uh we think some people who are more familiar with mobile development they might not familiar with this so what we plan to do is that we put the ros part directly within the bill script of your mobile app so that uh you don't have to care about anything about ROS.

You can focus on developing your mobile ZK app. And second is that now we have uh FFI uh for ROS. And it's also like very interesting thing to extend uh the functionalities to other languages. For example, uh we can go for uh use Go or C. And with C unlock this actually can build a lot of like Unity games or other like synergy for it. So it's very interesting and also Python like potentially for some uh ML scenario and we also like uh have this new things called more pro pack uh which is like we want to help people to pack uh what uh

the uh pack uh libraries they've built and they can release it as a native package so that uh any other people they can directly use this as uh SDK uh in mobile platforms. terms. Yeah. So, it's essentially enhance the developer experience. And last but not least, like I say, ZKVM can greatly uh improve the uh developer experience on on uh develop a mobile ZK app. So, this is also a direction uh we are looking into. So, if you're like interested about it, I I would suggest that uh in later in the workshop, you can try to install these uh RXO templates inside your phone. So they can get the firsthand experience

about it. Yep. And also um we think in client side proving like performance uh is one of thing that we cares a lot in order to like uh make all the scenar scenario for users very smooth so that they don't have to wait 10 seconds like for proof generation and one direction is that uh the GPU exploration. So if anyone of you uh inside of here like would be interested in this projects or you have built similar projects on GPU that runs on your mobile before like make sure to like talk to us after the after this workshop. Yeah, we would love to like get your opinion and to see how we can

work this out and push the boundary together. Okay, I think that's pretty much about like the high level view about Moro and uh what we're going to do like afterhand. So without further ado, uh I think we are good to go and start to build the first uh your uh no app on mobile. So uh rest your hand if you haven't installed Xcode or Android Studio. Okay. Okay. Still installing. Ah the network issue. Okay, no worries.

So uh later in the work uh if you want to build Android app, I think you you can directly download the uh the dependencies that we need but I think Android Studio will provide the best like the most easiest uh installations for you. Yeah. And things will start for the workshop now. So later on if you have any questions you can go for Vivv over there. Say hi. [laughter] Hi. So Vivv will uh me and I will help you guys through the entire process of this uh workshop. Yeah. So I will give you guys a like really uh high level

view on what we're going to do in this workshop. And if you haven't followed it yet uh or you cannot get the dependencies installed right now, it's totally fine. You can directly go to this uh go to our documentations and you can try it in uh maybe uh when you are in a place have better uh network uh connection or you have some spare time for it. Yes. So what we're going to do is that uh first like get the CI ready and then we will going to build a template app following these three uh commands that we introduced before and so uh since this is uh we we are trying to build a new app right so make sure

you choose noir when you in need the mopro project and next uh you can uh choose either flatter or react native and when you're building FFI and also create a template app for it. And now I think all the thing will be good to go if you like only run these three commands. And now you can like plug your phone into your laptop or like just start a emulator so you can mimic a phone inside your laptop to run this app. Yeah. And this will be the first step. Okay. So after you complete this step, there's a second part which is more challenging. We want to uh introduce you guys how to update the

logic uh in inside the template app. So you can put what you are written uh what or the any like exposed function that you want inside of project. Yeah. So you can either like uh add a new ROS crate or like try our uh another like noir uh app template and then you can run a mo build again to generate a new bindings for it and run more pro update so that we'll help you update this FFI to the correct space uh of the of your app.

Yeah. And if you don't know like what's like noir ad templates is available uh you can try this on chain verification one. So yeah so it use like noir uh beta.8 a version I think it's like uh three months ago and also the Baritinberg one uh to you need like exact the same version to do so because like uh the Acer uh which have been compiled could be a little bit different and but this is a very interesting uh version so it already has some mobile friendly features of it so when you are in no you will notice that uh If you choose Noah template, you can find out

that there are some options you can tweak. For example, you can choose uh whether if this uh proof uh use catch or poseidon as your oracle hash. Yeah. So if you choose poseidon, it runs faster in your offchain verification. But in order to do onchain verification, you have to use catch for oracle hash. And also uh things like mobile is very uh memory constraint like average uh phone nowadays have only 4 gigabytes of memory. So it is very important to have a mild memory consumption and nor enables no memory mode. So if you find your programs like quite big, it can also uh click uh tweak this uh low

memory mode on so that it can run smoothly on your uh mobile. Though it will give you like 2x slower but it it won't make the app crash. Yeah. So yeah. So let's get started on the workshop. Okay. Let me move to here. Okay. So right now it's a little bit small right now first of all we have to true uh we have to verify whether you have the CLI download if you haven't you can just run cargo install more pro CLI and you will get it to your late to our latest version of 0.3.2 too. Okay. So

once you have it, we can run more pro in it to create a more pro like repo for this. So since uh this scenario is uh no account 3, so let's build a no account 3 app. Okay. And just choose no as the thing we want to use. And uh one caveat here is that uh we do build extra support for proving system like uh circum uh hello 2 or noir but actually you can choose none of the above. So what will you get if you choose none of the above? Uh you will get a really nice FFI wrapper so that you can port any functions like you want to compute MPC

protocols, you want to compute FHE, you just port the uh import this ROSS crates inside the ROS uh ROSS library of more projects, then you can also generate the bindings for them and make it run on mobile. So this is some caveat. Okay. So now you'll see that we have this uh uh mobile projects generated. Let me work you through what's inside. So like essentially only these things like this library rs like matters the most. So you can see the um you can see this uh default expose function right here. So you can just essentially import

any like crates you want to use inside of this lip. RS and then like invoke them within a fun public function and on top of it you only have to add this macro to ensure we have XSI like uh expose it to UNFI so that when we are generate the bindings it knows which functions it's going to like expose to the mobile interface. Yeah. So just like create whatever functions you want and add this mic uh macro on top of it.

Yeah. And it also support uh some custom structure. You can also export this uh structure or data types uh with this macro. Yeah. So this is what we do over here. And there is also uh the noir uh like highle APIs we've already wrapped. So you can like generate the bindings in a more uh like uh user friendly way. So if if you can see that there's some like uh like there's onchain uh booleans that you can like choose whether to go for uh catch check to uh enable onchain verification or like false to enable

Poseidon as Oracle hash for faster offchain verification. Yeah. and also this low memory mode that we are that we previously uh introduced. Yeah. And okay, so that's pretty much about the interface uh you have to know as a uh as you play around with more pro. Okay. So now we have it. Let's back to the demo. So let's say you have already like uh add the functions you want to expose to mobile. So now we are ready to generate the bindings that port this ROS functions binary uh and generate FFI for them and so that uh the mobile uh the

mobile uh platforms like codling or swift can understand uh and invoke this uh rust binaries that's from mobile pro build. Oh sorry we have to go into the project first. That's from more pro build. Okay. And we choose release modes for uh the best performance. And you choose flutter ffi. Okay. So just wait for it to compile a while. So while uh this is processing uh I want to know uh if there's anyone like following this workshop.

Awesome. So uh have you faced any problem yet or okay too many request. [laughter] Thank you guys. You are very warm crowd. [laughter] So um okay I think uh maybe like give it a second or uh you can check the documentations when we back to a place with better uh better internet.

So are you asking what's the difference uh during more u mo more pro build what's the difference of iOS calling flatter and react native okay that's a great questions so uh each different platforms I think have its own like best suited FFI so beforehand like we only have Android and iOS FFI so we have to uh generate the we use uni FFI to generate the bindings for iOS and Android [snorts] and later on if we are using some crossplatform uh framework like flatter we plug these two uh bindings into them and we have to write some uh glue code

to make sure that the flatter understand the native bindings of iOS and Android. So that's a previous one in the new mo uh we uh integrate for each different platforms. So we have uh for Android and iOS we use uni FFI but if you can see right over there um let me try to score a little bit up okay it's not not too oh you can see yeah it's right right over here so for flatter and react native we use its own FFI so you can see that in this case it identified that oh we are actually using choose flatter so it switched from UNF

FFI to flatter Rossbridge uh to provide a better like binding interface in this case. Yeah. So I would suggest that uh though uh iOS and Android bindings is uh is a good option as well if you are building mobile app but if you are using crossplatform solutions like flatter or react native uh you can uh try to use it like native fi n uh native f uh ffi instead of using uni ffi. Okay.

So you can see that uh it's like compiling the compiling the bindings for it. It's right over here. Yep. Okay. So it is already built and I want to show you guys um what's the binding looks like. So you can you can find that we have this mo more pro flutter bindings over here and actually it is quite lightweighted. So in in before if we use uni ffi it would generate the bindings uh of uh generate the binaries for these uh rust functions which is quite big sometimes. So for

example if you are building a iOS like uh bindings sometimes it will be like few hundred megabytes or even gigabyte level but in flatter rosbridge we use four right now uh like it won't build the uh the exact binaries when we are generate uh this binding. So it is lightweighted. You can uh you can like commit them to your GitHub to like for version control very easily and it will the binary will only build uh when you are running uh flatter run and when you're building the app uh this frost binary will be like built at that time.

Okay. So this is the bindings and it help us it also includes a lot of glucose inside of it. So we don't have to write them manually. Okay. So, is there anyone like generate generated the binding? Not yet. Okay. So, that's all right. Uh you can uh like try to try this uh tutorial when you are in home. Okay. So, now we have Moro projects ready. We already generate the bindings. The final step is create a template app for it. So let's run more pro create.

So you can see that you can choose u this many different template. So let's choose the flutter one. Okay. Okay. What's the issue here? This is the network error. Okay. So, previous error is like network issue. Now we we have it here. Okay. So, you can see that we have this like template flutter app inside of it. And the logic main logic will be live in

this library uh main dart here. So you can see that it import the binaries that generated by fl ROSB bridge FRB and then also uh this uh exposed and ported functions from rust right over here and you can like call uh invoke them uh natively within uh Dart. uh for example uh let me go to generate nor proof. Okay. So you can see that it is actually like wrap into the interface that fl uh dart can understand so so that you can

uh build this flatter app very easily. Okay. So let's try to run this template. And before this, let me start the emulator. Let's run the iOS one. Okay. Okay.

Perfect. Okay. Now we we have the emulator right here. So we can run we can go for flatter run. and will uh d uh like automatically detect which emulators you're on. Oh, sorry. You have to go into flatter directory. Okay, let's do fl. So, let's choose the emulator and wait for it to compile.

So it might take a while and that is also a benefit as a uh if you're using Moro to develop the Noah app. So in the meanwhile you can get yourself a tea or some coffee. Yeah. Or some snack. My personal favorite is like I will have a chess match in between this building time. [laughter] Hi.

Oh yes. >> Yes. [snorts] >> Uh I think the circuit of drill location is easy to implement. You have to check the uh like drill distance between two points. You have uh you can get the latitude data and longitude data from GPS, right? and you put them into constraint. I think the hardest part is how do you com uh connect make sure that the GPS data that received from the phone directly ported into the circuit without some

contamination. Yeah, that's I think that's the hardest part and I think some people has already explored that but they don't have a great solution right now. Yeah. So proof is easy. You can just uh if you're like doing PC, you can just use some default data for that. But if you want it uh into production, you have need you need extra works on make sure the GPS data is not like colluded. Yeah. Okay. Now you can see uh it's already built and you will install the app

inside your emulator and one thing that I love flatter the most is that it it has like hot reload and hot start feature. So it makes the development uh also very smooth as well. So uh it's actually not harder than uh web browser like building a browser app. So once you have all the dependencies config I think it's like quite easy and also you have you can build something with quite a good user experience with it. Yeah. So you can see that we since uh since it's a template app we have like defaultly uh in implement the interface for circum hello to and noir and in this case we

just go to no one and maybe let's say let's just change the public inputs to like November 20 and generate a proof for it and run we can run verification about it. So you can see that it's pretty raw. It's just a template uh application. So uh in the real production you have to modify the interface inside of this your flatter app specifically in this main.dart to like ensure that uh your UI and uh your business logic of the app looks great. So this is a uh yeah so this this will be the first part of the uh workshop

and if you want to change any logic of the app you can directly go to the mro projects uh library like which is where we expose the functions and just add anything you want and generate the bindings again and run more pro update to do so. So since we have some time constraint today, uh let me just uh run a real demo uh in my Pixel phone right here so that uh you can understand a more uh a a template app that runs noir and with more functionalities.

So, let me just run this to port my uh to mirror my uh phone to laptop so that you guys can see it. Let's see where is it. Yep, it's right here. Oh, okay. Oh no. Oh, no. People are seeing me. Ah, sorry for you.

Okay. Okay. Here we go. And Okay. So, this is like my my phone like in real life here. So this is a uh Noah app that we built before. It is the wallet connect one. So if you want to play around with this one, you just go to the uh GitHub ripple and clone it and just run flutter run and you can also start this as well. So let me disconnect the wallet first. I want to demonstrate something. So it is also like very similar like multiplier uh circuits and

you can just like generate a proof for it and you can see the time not sure whether if you can see the timing really clear it's at the below so it's around like 300 milliseconds and if it's a uh catch proof it's also under one second so it shouldn't be long thanks to we have the nice proving back end ignore And now you can verify it as well. It's valid. And we want to demonstrate the ability to connect to untrained world.

So we have this wet con uh wallet connect uh with Rome's uh using their uh app kit. So let's connect meta mask. Okay. Can we connect it? Sorry. Okay. and we show the connect. So this thing is actually powered by uh deep link. So it can transit uh transit in between apps uh very smoothly. Okay.

Okay. So you can see that now it's already connect. We can run this verify onchain feature over here. Yep. So you can see that it works like acc and the speed is according to like the connection of you or the RPC node that you choose. So I'm not sure if you can see that it's around 700 millisecond to verify the proof. Okay. So uh this proof is like 16 uh KB. So it's like u mild size of the proof. Yeah. So this is the more like advanced one you can play around with. And for full feature of no app, uh you can also download stealth node mobile version and build it on your

laptop. Yeah. And to play play around with it. Okay. So this is pretty much about the demos for today. And um so right now we are actually trying very hard to push like to like include increase the people building uh mobile app in web three uh space. So I think people here are very care about privacy you guys know how important it is right. So uh if you want something some privacy that people can use in their daily life not only with their laptop but also their phones uh we need to like increase inclusions and make building mobile apps

with ZK more easily. So that is still going to be the goal of Moro is trying to do. Yeah. And also we are looking forward to like uh push privacy in uh mobile community. So we are going to walk into web two world and try to like uh have them know the important of privacy and uh include more mobile native uh builders. Yeah. So thank you for joining today's workshop. I hope you have great experience and if you are interested about it you can also follow uh our documentation. We have very uh nice uh get started and some write up and also some blog you can look into and we are live on the telegram group. So if

you want to uh find us you can uh go to the group and make sure you follow us uh on x for any like latest update. So thank you uh thank you so much [applause]