Tino Breddin - Integrating a decentralized mixnet into a wallet extension to achieve full privacy

Transcript

good afternoon everybody my name is Tino I'm from Hopper the hopper project uh at Hopper we are building a decentralized mixnet um which anybody can use to gain better IP privacy for the applications or as users specifically um but today I don't want to talk about the mixnet per se as a core product we are building but a product we're building on top of it which is called rpch so I'm going to to show you how you can use rpch to integrate our mixnet into a wallet so a Dap um in order to gain better privacy uh as a

user um when I'm talking about uh a wallet in this specific case um the wallet is not necessarily the only use case really as I already mentioned this applies what I show you today uh to any dab which is making RPC requests right so when you follow along or when you're developing an application in the web 3 space feel free to try this out and try to integrate it the same way I do today um it should work out of the box and if it doesn't you can contact us and we can take a look together so um as I mentioned I'm from Hopper but I didn't really uh conceive this Workshop I only stand in today for

my colleague mik yadak who is product developer at Hopper he cannot be here today due to logistic reasons so I took over um so this Workshop is new for me as well so we can kind of go through it together and see whether I Break Stuff um but mik wasn't the only one who worked on all the stuff which is involved in here also my colleague Ronnie estos who is part of our products team has built um very important parts of rpch the underlying infrastructure um and the Integrations into into sdks which I'm going to show show off today so with rpch we Tred to make it as developer friendly as

possible to gain that improved level of privacy on an application Level but there's obviously lots of complexity underneath which we had to solve over the last 18 months or so um which we now are able to hide away by the way when you have whenever you have questions ask right away you can also follow along I'm going to do quite a bit of coding um okay so for today's Workshop we chose the wallet encrypt some of you might already know it um encrypt is is a fairly commonly used web wallet so it's running in the web browser as an

extension which makes it very suitable for the integration I'm trying to do here because we have a JavaScript SDK which can be directly used by the wallet without much integration hassle so the wallet itself is open source so we can directly use the source code which makes it also obviously very easy for us to integrate otherwise um we already did some other wallet Integrations as proof of concepts for Clos Source wallets but then obviously we have to get in touch and work together with the development teams of those wallets so for this presentation um it's really cool to have an open source wallet as a Target but before we get

started you have to understand what the wallet integration the integration of RPC into encrypt is actually meant to achieve because somehow you need to measure the level of success of the integration and for that we are going to use derp which is a tool which we created like two years ago or so when we first started looking into RPC privacy RPC endpoint privacy for users and derp is able to show you the calls your wallet is making while you're using it so you can see that your wallet is getting balance information or trying to send transactions and so on to the endo and then obviously at the end once

we are done with the integration you should not see that anymore because as I mentioned already we want to achieve IP privacy so derp shouldn't see anymore that my IP is making all of of those requests this should be totally hidden away from derp um while I can still use the wallet as usual so let me just quickly show you derp so you can also use that easily yourself um while you're doing some some normal testing or if you just want to see how your wallet behaves because obviously every wallet is different some wallets make very small amounts of RPC requests some wallets

make lots of requests and this influences obviously uh the level of privacy you might gain so derp is really easy to set up I'm I'm going to skip over a little bit of the the pros here but um what you ultimately need to do is this readable yeah in your wallet you just have to take for whatever Network you want to use derp for the RPC URL and copy it into your wallet configuration for that particular Network um and then all the requests will go through derp and derp will relay it to the actual rpcn point later and

therefore be able to show you what requests are being made so in that sense it's kind of a transparent proxy for your RPC endpoint requests so in order to get started let me first so let me uninstall encrypt so we can start with a clean slate doesn't really help everything is set up already okay so whenever we look at Integrations um

you obviously have to understand the target uh for some of you who want to do that integration for an application you know um um it might be easier because you already know your own application um but then also you have to look at the at the documentation for rpch um we try to make it really easy to integrate rpch by targeting the commonly used find libraries for RPC requests in the JavaScript space or typescript um so there's uh Integrations for obviously vanilla JavaScript that works out of the box but uh ethers VM wagi is very new web 3 e is what we are going to look at

today because it's partly used by encrypt and also jsonrpc 2.0 um is also used by encrypt so we'll also touch that so we have um examples for all of these which are most of the time actually looking at RPC uh at wallets uh copy paste example so you can very easily go from a normal wallet to an RBC enabled wallet uh within half an hour or so it's very important to note though that this doesn't support websocket right some some wallets use websocket as their default interface to an RPC endpoint rpch only supports HTP for now because

it has through route all of that information all of the requests through a plethora of nodes within the mixnet and having a stateful web soet connection through let's say five intermediary nodes is for one very difficult to do from an architecture perspective and also has very strong privacy implications so we opted to support h GP only initially and in the future we might look at supporting we web socket but it's not the case here okay so obviously um we want to extend encrypt so we have to clone

encrypt to get the code code locally and set up and build it so that's what I'm going to do next and I did already a little bit of preparation so I don't have to download the entire internet when I do this so anrp being a JavaScript based project you always have to do yarn first to get node modules set up which I did before so this is normally taking Mo taking most of the

time and then you just build um the libraries normally on a clean clone this is going to take uh a lot of time but I did that just before the workshop so this is pretty fast so now that we have the code we actually have to identify um how we are going to integrate rpch which uh Integrations needed which client librar is being used by the wallet so in encrypts case this is as I mentioned web 3- e um and we already have one um integration ready for that so that's

easy to do for encrypt um if that weren't the case we would have to do a lot more work initially right to get all the plumbing in place but here we are good to go so we just have to look for all of the occurrences of where that library is being used so we can figure out where RPC calls are being made um from the wallet and here you can already see that the wallet is using websocket um possibly as default or optionally so in that case we always have to make sure that it's also switched over to HP when we integrate rpch and that there

is no reliance on web soet specific features normally um when a wallet uses web 3 or ethers or these um these client libraries this is okay because they abstract a lot of this away already so to the wallet it all looks the same web soet is just a little bit better performing but um for rpch integration it should be fine so as I mentioned um we want to verify that our integration is working by using derp so what we're going to do first is actually not integrate rpch but we will integrate derp as the default endpoint into encrypt then we

can verify that the endpoint calls are being made and we can see them actually and then we're going to integrate rpch and at the end we shouldn't see any calls anymore because they are hidden away so let's do that okay first I'm going to build for Chrome because I will show all of this working in Chrome so now we just have to wait for the

extension build um then I'm going to obviously load the extension into Chrome um and then show that derp is not able to pick up anything because I have not yet integrated derp so we go step by step okay so because I'm lazy I'm just going to use some pre-made password I can copy and paste all the

time don't use that account I'm going to dump

afterwards so so we have encrypt set up okay so I have DER loaded in my web browser and if der would be able to pick anything up it would be shown here right so this is the log of requests being made which der CES um and if I just use my wallet there's nothing happening derp is not able to pick up anything which is what I would expect

because I didn't link it yet so what we're going to do now is we're going to configure the wallet to use derp in encrypts case we have to find the provider configuration for ethereum and in that configuration you have the endpoint set up as a web soet endpoint to Mew API doio so probably some

internal internal hosted end point and instead of that we are just going to point to derp and derp is going to relay the requests for us okay rebuilding and then I'm going to reload the wallet and we should actually we see requests going through derp that will be step number one in making sure that we can later verify that our integration works okay building is done we can reload our

wallet code authenticate again okay so here you can already see encrypt made its first request right so we can see one lock entry so not much actually happened yet it just tried to load the balance for my particular account in the wallet which is great exactly what I expected um now all the requests being made by encrypt for ethereum mainnet will show up here so that we can verify later that rpch

works and important to note obviously if I go to polygon poka Dot all the other chains derp is not going to show anything because we didn't configure encrypt to do so right encrypt is still using the default rpcn points for those chains but if we go to ethereum this is what we actually did configure then derp is getting um the requests okay this is is what I already did so we can glance over that quick question who here has

actually developed the extension before for the web browser cool one um do you know this um trick which my colleague actually referred to here because it was new to me that you can open the uh extension in a new tab and that way have the extension being available all the time you did not great then we just show this because it's actually quite useful uh indeed so you just go in [Music] here because it's obviously always difficult to debug um an extension view

because later we want to look at the network Tab and this is very easy to do here it just doesn't show the network part okay now it does cool all right so let's move on now the main piece of work starts we

want to integrate rpch so as I mentioned we want to replace the direct use of web 3 e with an rpch adapter uh such that um we don't have to change too much code in encrypt itself so it should be really easy uh for me as a developer um but all of the requests should go through the decentralized Mix net instead of directly to the RPC endpoint so in order to do that we obviously first have to install rpch s CK and um and then we can use it in our encrypt wallet so the rpch packages are available under

the rpch um organization on npm just have to check what else we need while we are waiting I'm going to open the rbch docs for reference which is not working yeah that was the wrong domain right so in the documentation you

can also find find lots of background information on the architecture of rbch which I'm not going to cover today so if you're interested in all of that feel free to look at the documentation or talk to me afterwards I'm happy to tell you more but today we are going to integrate um a web 3 uh wallet so basically what we're going to do is very similar to what is outlined here um because most of the stuff is copy paste and uh we just have to adapt a little bit to how encrypt um initializes their RPC end point so in order to this is a little

bit now um getting into code quality uh because we don't just want to add uh 50 or 100 lines of code into the encrypt code base so reviews would be really hard for the encrypt developers so that's why we're going to create separate files uh which will hold the new code and then just refer to those and this will make the life of the reviewer easier you don't have to do it that way this is purely um to to be nicer uh when submitting a PR um because what we are going to do in the end we are going to submit a PR to encrypt maybe they are going to merge it or not um but you can always just add

everything into um into one file if you wanted to so what we need is actually in Source lip a new library and an indux file in there and this is what I mentioned all we have to do initially is just copy the example from um our documentation into the encrypt uh into into our new file and then we can adaptt it as needed

oh my goodness that copying didn't work so nicely at least yeah all comments that's not a problem actually wrote it out beforehand so we're just going to copy it that way okay cool so we have all the necessary setup um let me just quickly go through

this file to give you a sense of what we are doing here because obviously it's more than just uh five lines of code so first we are um getting uh our SDK um component uh we already installed it so that's easy to do we have to also use the web3 core abstract provider because ultimately we want to call into uh into that or um expose the same API we have some checks for um supported RPC providers um so here you can already see if an RPC provider

uses websocket uh we are just going to use is it as is but if we are using an RPC provider which is H HTP based we can go through rpch you could make this less dynamic or uh a lot more obvious than than this setup this is purely uh as an example then we have to load a couple of configuration um variables for rpch the first one is a secret token uh in order to in order to use rpch you have to have a token which identifies you so you have quot uh to be able to um send messages

through the mixet I'm going to show you uh in a little bit how that works um then you have to set up where the endpoint of the platform is of the rpch platform you want to use which is called the discovery platform um I'm also going to show that and then you have to tell rpch how many hops it actually wants to make in the mixet and this this is an important one so a mixnet is set up in a way where the more hops you make so the more intermediary nodes you have and you send your packets over the better your privacy is supposed to be so that's a very simple ex explanation uh obviously

there's lots of factors which play a role in there but um for um Simplicity purposes you could say more hops equals better privacy so in order to start out with our integration we first want to test fast instead of having the best privacy ever because even the most simple configuration here will be better than what we had before so that's why we use the configuration force zero hop um which tells rpch to only use the start and the end noes In the Mix net and don't have an intermediary note so that means hold on that means um that

compared to your previous setup you already have two extra hop like extra nodes right um so the Privacy gained is already better uh for a production setup you might want to have like two or three hops so then you could change this so it actually uses um even more intermediary nodes go ahead um I'm not sure you can can compare it

that way so obviously uh within the Mix net on the peer-to-peer level we're using uh gos Supply protocols to share information um what happens uh in rpc's case is rpch sends a request to a so-called entry node in the network so the entry node is the node which can talk RPC to the outside world so NOS the the ethereum RPC protocol but can also talk uh the hopper protocol to Hopper nodes so it will actually uh then um turn that HP request into Hopper packets and it will use uh Discovery mechanism for the path in order to send packets uh

through the network so every package is actually going over a different set of nodes ultimately um depending on Dynamic internal and time based uh parameters so you cannot really tell in advance which path for which packet is going to be taken um so that's where the Privacy part comes in you have one hgp request which is going to turn into let's say 10 packets and these 10 packets will then at response time figure out the path which is not equal for each packet through the network they will end up in different order at the exit Noe the exit Noe will then put it into the right

order again and and recreate the HP requests and then actually execute it to the RPC endpoint so um that way anybody in between uh any note in between which is relaying a single packet only sees where that packet is coming from not the originator and also doesn't see where the other packets are going um and doesn't even know that there are 10 packets only it's only concerned about that single packet sure yeah you could Link at that point

you could you know daisy chain it with the VPN the tour Network exactly um yeah you can at that point as long as your exit nodee supports whatever you want to connect to you could daisy chain that again and do something else yeah all right so obviously some general check that the secret token is provided um the options we set for our um for rpch component and then we set up um a single class which is which is then being used later to send rpch request right and

this is very simple too um you pass in the options you have or expose a send function which is um taking the request parameters um it checks that the SDK is set up if it is set up I can already sent the request if it isn't set up I have to initialize it for the first time and that's it right so a Singleton being a Singleton has to be initialized once and then from there on I can use it um for all my requests and at that point rpch itself is usable and ready to go but not yet

usable by the wallet because the wallet expects something like an abstract provider this is what uh anrt uses right so that's why we now have to hook in rpch into that that API and we set up the rpch provider code which implements that interface abstract provider which is being used by encrypt and what it does is ultimately whenever a function uh sorry a a RPC request is sent out through the sent ASN function it will invoke the rpch single sent uh instead of sending directly or

making a HTP request directly using fetch or the like um so this way we get um rpch hooked into encrypt um very easily and then there's a little bit of Arrow handling involved you know when the request fails so comparatively easy a little bit verose for this example but usable out of the box any questions so far okay yes

mhm very good very good question uh uh let me let me postpone this for 5 minutes because we're getting to a point where I can uh where I can answer that more easily um okay so we copied the relevant code and now we actually getting to the point where we have to generate a secret token I mentioned already we have to configure it um so we have to get it first and that's what you do on our um developer site um D.R p.net uh where you can basically get a particular packet which gives you um a particular number of um rpch calls you

can make in a certain time frame and this is what you kind of refer to from a developer's perspective you care about RPC requests being made through your app or wallet so then uh you just get an account here and um generate the code and then you can use that right away now internally though an rpch request is not uh packet through the mixnet right an rpch request is basically an HTP request being sent to an RPC endpoint which could end up being 100 packets so in the Mix net there is a different incentiv going on you actually pay per

packet um and what we do in the infrastructure side so so on the back end of rpch this is where we then translate whatever is being paid through these accounts is being used to fund the mixnet so that the mixnet will then relay the packets as needed right um for a wallet let's say um there's an incentive to integrate that uh natively so then the wallet would have an account and uh and pay that if you have a Dap You would create an account yourself and um and use it that way say

again as a de developer or on the mixet as a de developer for now it's a it's a recurring payment um through um a payment processing platform but we are looking to integrate it more tightly with Native web 3 obviously um so you could you could have a better integration um and more automation um through that yeah but for our example here we've created a code so you are free to use that code if Zurich which I'm going to do now

because I need no I'm on the wrong side so let's see need to do that in our browser here yes I'm just going to Blind sign everything today okay yeah so through this code I get half a year of free rpch usage uh so depending on my integration this could be a lot and once I redeemed that one I can

generate as many secret tokens as I want to so a secret token obviously uh would be good to be used only for one particular app but you could also share it through app um there's additional information on this dashboard um if you as a developer want to run um rpch and debug uh more deeply how your app is using it then you can also run the rpch um server uh locally through Docker and obviously um you might want to use various networks so we have some examples here which you can easily add to your wallet so you don't have to figure out the parameters all the time

yourself um if you if you are using it the way we do now in order to replace ethereum mainnet usage um we also have baked in me protection um on ethereum Main net so this you can enable or disable also here so that you can um you know if you don't need it use it without it and if you need it you can use it out of the box so I'm just going to use a token and I'm lazy so I'm just going to put it right into the source code um yeah feel free to use the same

code it's valid uh as of now we might disable it uh the next couple of days so anybody who's here and has used it is free to uh leverage half year of rpch usage say again it's really it's really easy to remember actually but uh yeah okay you can ask me later as well all right so I already mentioned it the secret token I put in um in clear text uh we are using the default

platform so we don't care too much about uh about that parameter and we set zero hop to true this is what you can set to false later but we will set it to true for presentation purposes okay so now we have to check where uh web 3 um- e is being used right um and figure out all the places and then actually replace and this is this is the the beauty of our integration ultimately um in all the other code you just have to replace two lines or replace one line add another one you have to um import the get

supported RPC provider function and you have to replace the direct use of this node on web 3E with um a wrapper which uh uses that function and this one will figure out that it's going to use rpch or not depending on whether rpch is supported or not right so in all of the occurrences of web 3 e we just change this particular line and we are done so once you've done the setup with the copy paste and you created your configuration the rest is comparatively simple to do let me just do that right

away I just have to figure out what was it called e hardly copy pastable okay so this one supported RPC provider

yes so that's line number one and now and number two so we do this in like one two 2 three four five six files and we should be good to go so let me just do that this was API

verify for next one send transaction index View

this must have been the wrong one verify transaction index view let me just look at some notes Here U transaction okay so we did this one this one send

transaction verify transaction index View okay action views swap index okay so let's

see whe I got all of these building again so what we did now is we replaced um all of the normal RPC endpoint uses with rpch enabled um usage so that the simple get balance call should actually be shown anymore in derp once we load all of this it's being built I can load it uh we can test it um derp should not see a get

balance call anymore okay right so let's see where the arrow is provider anybody able to

fix that fast let's see what did we do wrong here abstract provider does not work like that yeah it might be a version problem so let's see I'm going to check I'm going to cheat and check the pr I test it actually and see whether that works or what we did differently in here we're running out of time anyway okay so um this PR is doing the

exact same thing um which we just did copy pasted um that one big file and replaced all of the uses um so what I'm going to going to do is I'm going to load that PR so I can show you how that ultimately is going to work before I'm running out of time okay might have to download

something as you said different versions could be the problem but that PR did exactly the same thing so you can basically as you can see it just replaced the very uses of uh web 3 e okay that compiles great so might be different versions all right compilation

worked I can reload actually might have to since it probably deleted the disc folder I might have to reinstall my wallet let me quickly do that rpch secret token

right so the secret token we already generated okay racing Against Time so two more minutes I'm not sure we're going to make

it oh is it only coffee break okay cool let's see whether we can make it reloading okay that

worked so the wallet again for okay

so as we can see the wallet is working it can fetch actually uh my balance but derp is not showing anything so our initial test Works derp cannot see my IP anymore um which I'm using uh the RPC request is funneled through rpch so the IP ultimately will be different um and therefore even though um I have derp set up here uh it cannot see anything and I'm fully or more private than I was before so it's transparently using rpch and because we didn't configure it for poad do or

polygon um derp wouldn't show anything in here anyway but the requests then that's important are also going through rpch right U what the wallet is doing it's basically telling rpch this is my endpoint pa. ai.com um please use that when you make the request but send everything everything through the mixnet first to achieve better privacy and that's it so if you want to go and take this even further to conclude there's even more things you can do um in the wallet because most wallets actually do more requests than the

simple RPC requests and encrypt is no different so in order to complete all of this you would have to replace a couple more uses of uh of um RPC endpoint API usage but it's again very similar copy paste examples are available and then ultimately you'd be done you could test and that's it um with that I want to conclude the the little um uh adaptation of encrypt to use rpch if you want to do this yourself on another dab feel free to go as I mentioned on D.P ch.net and uh and

get your pass um derp I always refer people to derp because it's a really useful utility if you want to check if it dab or um a wallet is doing lots of requests and especially which requests it's making and our main website if you're interested in what we do uh with the decentralized mixnet the hopper net um check out Hopper net.org and there's plenty of information and you can also obviously get in touch with us on Telegram and the hoppet channel or with me directly uh via email Tino hop.org thanks thank you Tino any questions

yes that's a that's a really good question I mean obviously from a from a business perspective we want that as well so um we actually did did already quite a few Integrations for a couple of wallets where we are then talking to the wallet development teams on how best to integrate it in the UI because um it's always two things you have to consider one is the the actual code integration which we did here which for most of the wallet is more or less simple but then every wallet has a different UI and you want to expose it to to the user also right because it's such a valuable feature um and it's being paid for so some users

might not want it all the time some users might want it all the time on or of um so then the development teams go in and do their UI uh research and try to figure out where to put the the target for it so um yes hopefully we can get that integrated into a few wallets by default um uh the PRS are already for the integration itself already uh submitted to some Upstream uh wallets but nothing has integrated it out of the box yet yeah can you repeat that a little bit

louder yes yeah uh for encrypt specifically I'm not sure uh is there a way to share uh slides but if not you just ping me and I can send you the slides but all this really did is figure out how to build encrypt so yarn build all and yarn build Chrome um and then follow the uh the guide for web 3 e integration on our documentation yeah mhm uh really good question we do run uh

some endpoints ourselves but for rpch uh this is irrelevant because actually what is happening and I mentioned this only briefly at the end is the wallet already has an RPC endpoint right uh preconfigured for most of the chains um for the major networks so the wallet basically um when calling rpch gives it a parameter which is called RPC endpoint where it passes its own endpoint and then this will be passed through obviously encrypted and chucked up um through the mixnet so that at the end the call can still be made to the right

end point right so if you have a super performant um you know high capacity endpoint that one is still going to be used or um you know so all of this is basically transparently uh tunneled through the mixnet any more questions all right yeah if you're interested in the in the code bits you can uh talk to me afterwards I'm happy to show you some more details otherwise uh feel free to get in touch and test out rpch uh we are always happy if we get feedback on how we can improve approv

the developer experience specifically