Extending Web3 Provider for Better UX - Tom Teman

[Music] okay so moving on to our next uh let's see who we've got tommy tommy tayman let's bring him in dude hey john how's it going how are you man good good so you'll be here you're gonna give us an update on portis yes fabulous how have you been doing okay it's uh you know crazy year i guess for everybody so yeah i think that's pretty much the global answer right but that's good so i'm gonna go ahead and give you the stage take it away thank you hey everyone my name is tom i'm from quartus and this talk is about how we are extending the web3 provider so you can offer better user experience for your users basically give them an experience which is similar to what they're used to you know in regular web applications and under this crazy world of uh crypto which is very foreign to a lot of people so first a little bit about portis uh for those of you are unfamiliar so uh porous came about when in january of 2018 and we saw that there was a problem in the space metamask was pretty much the only option out there and whenever someone wanted to use the new dap and the apps were very few at the time but even the few that were there there was like a list of instructions telling users okay you got to go install this extension you got to get some crypto somewhere else you got to transfer it it's a whole spiel and it's very very you know users are lazy they don't care about blockchain should be simple for them so we came up with a solution where we we were very admitted about being self-custodial or non-custodial depending on how you want to look look at it but basically we are not holding anybody's private keys what we do is instead of asking the user to install an extension we offer the app developer itself themselves and something they can add to their code which will make sure users can use their existing browsers not install anything but still maintain absolute control over their private keys we do this using end-to-end encryption and if you're interested you can go on our website at portus io and check out our white paper and since then we've grown to more than 150 daps including some very big ones that you probably all know if it's bitcoin if it's unit swap if it's a host of other ones and gauze and chain and also shape shift and in april of last year we were also acquired by shapeshift and it was for us the 50mm because there were so big on self-custodial as well and they see it as a big part of like not your keys not your crypto etc this is like this was a great fit between both of our companies and we really shared the same vision together on how blockchain should be going down the custodial path seems like a user experience shortcut in some way but it does present i think it's a step in the wrong direction because it's just going to bring back the same problems that we have in the world of web 2 and it will eventually come back to bite us you know where um so let's talk about web 3. so web 3 was originally you know when ethereum just started out let's go back 2014 2015 thinking about running web 3 inside browsers was you know that was very futuristic at the time back then it was mostly for nodes on your server you ran your own smart contract you communicated from a server managing private keys for mass adoption for users that wasn't really much of a concern and so you know there is no user experience inside your node.js but when you're when we move forward and we started wanting to have users you know use decentralized applications be it on their phone be it on their browsers wherever there's a lot of unique user flows that don't really exist when you're running that private node that communicates with the blockchain you know with the private keys that are you can easily store private keys on your own private machine or even if you're on the on something like aws there's that's been solved but we want to store it on the client and we have all of these flows which revolve around signing transactions and messages and whatnot it becomes something which is basically new we never had to deal with this in the world of you know web development or development in general not really so if you're running your own node.js server with web3 like you have an algo trading machine or you have a dap which is not really adapt because it's a custodial you're holding the private keys you're just giving people an interface to access them like coinbase or facebook for that matter then that's not really a concern for you but when we're talking about true depths if we're talking about stuff like i mentioned before like unit swap or other applications like that then the whole fact of people holding their own coins and interacting with your smart contract which is deployed on this global machine of ethereum then you want to make sure that you can account for those user flows in a way which doesn't add too much friction to your users um so enter a web 3 provider so on a very high level what a web 3 provider does is basically wrap the swept 3 instance the same one you would have inside your node.js server and if you ever used web3 inside you know inside node or whatever machine you prefer python whatever then go or what be it then you know it it just basically offers this interface right to talk with the smart contract you can query the blockchain you can send transactions you can manage you can have like create a wallet object that has the private keys and hd wallets and all of that goodness that you need to use this thing called a smart contract and interact with with the blockchain so web3 provider is for solving that issue when you're using web3 on a client now web3provider is just like it means like the word says provider there is someone who provides you this could it be metamask would it be portis could it be um any other kind of like web 3 solution that runs that is more than just a wallet it's not just about storing the private key that's a big part of it but you also want to be able to interact with those private keys in a more sophisticated manner and there is more than just that you maybe just want to query the blockchain you want to get the latest block the metadata on it you want to get a specific block you want to get a specific transaction hash whatever that just read reading the blockchain that's also something that a website provider is commit like obligated to provide to you if they want to be a standard provider and so that's what a web provider is and like i mentioned the big thing here is you don't want to expose the private keys to anyone else besides the provider now you know if it's metamask reporters then the the private keys are not exposed to it to the provider itself some providers are custodial in some way and then the private keys are exposed to them but most are not or they offer like semi-custodianship or all kinds of interesting ways to solve this whole problem of managing a user's private key is a big challenge and there's a lot of different interesting approaches to handle it and it's a very interesting space by itself so when we're talking about giving users this capability of being able to manage a private key signed transaction do it all inside their client there's always this kind of balance and for supporters that has been something we've been tackling from day one is how do you balance the security and the usability of your users in a way which you know makes sense because on the one hand you have the power user you know and most people here listening to this call are probably power users they feel comfortable with private keys and hashes and twiddling with nonsense and gas fees and whatnot on the other hand you have the mainstream user which could be really intimidated by all that and they're used to the world of web 2 which is like venmo which is like facebook which is very simple just like maybe two lines of text approve and that's it and we're always trying to find this right balance and it's it's challenging and different apps have different needs but if we do truly want to reach mainstream adoption we have to make sure that we're not just geared for the power users if we always keep that mindset of the power users we're gonna be we're gonna have problems it's it's a known issue in new technologies um for when uh games just started out like nintendo's and whatnot then there was a problem there that a lot of the people who were testers were really good gamers so there were some notoriously difficult games that came out in the early days because the people testing them kind of had uh you know we're kind of blind to the fact that not all people are spending 10 hours a day playing this game and will be able to handle most will just get frustrated and will just rage quit same here if you're just assuming everybody feels comfortable about all kinds of cryptographic terms and being super technical they're just gonna not use your application because it's just way too complicated for them on the other hand you also want to make sure that the power users can feel comfortable if they want to and also that you're not creating you're not making it too simple in a way which could be maybe abused by either malicious steps or any other way that you know maliciousness could be exploited so to do that portis what we do we're so portis is a standard web provider which means that when you're integrating portis it's and when i'll get to a code example you see how simple it is it's just two lines of code because it's a standard where providers if you're using metamask it's or something else then you can just replace that one line of code and everything works the same the thing is that we the things that i want to cover in this conversation is what are we extending beyond the website provider for the various user experience flows that we have seen so far and we're also improving that as we move forward and something also to keep in mind about a web 3 provider in general and i mentioned it before is that there's two parts to it and a good way to think about it is as an authenticated methods and non-authenticated methods so if you want to get the users get accounts for instance to call web3 get accounts or if you want the user to sign a transaction sign a message anything that requires either exposing the user's identity which is get accounts or his private keys well that requires authentication and this is something that will differ from provider to provider i mentioned metamask they store it on your machine locally with portis we encrypt it store it in the cloud encrypted and then send it back to you decrypted so you can see for you to decrypt it and with your password so giving you this cloud experience but remaining custodian there's a lot of other providers out there as well taurus or matic whoever and they all have their different approaches to storing to managing the authentication the other part is the non-authenticated methods and that's something that a provider is also obligated to provide to you meaning is what it means is that for instance you can use a provider without ever seeing the login screen in theory so you can initialize the provider if let's say not metamask because you're assuming the user has it but if you're using portus you can initialize quartus never call something like get accounts or sign transaction just call methods like get network id for instance or get block number or all of these queries to the blockchain we're basically read only and you will never see portus in theory now one of the optimizations we recently did in in our latest version moving from three when we moved from porto sdk2 to core sdk3 we made quite a big optimization there we got some complaints from our developers it was a little bit too coupled everything so it meant that even if you're using tortoise as a read only solution you were still getting a lot of we were automatically trying to log the user in et cetera so we kind of make a differentiation which optimize both the speed and also make sure that until you're actually logging in a user we don't load a lot of the data so anyone who's used portus and was kind of you know maybe upset by seeing a lot of api calls getting called in the background because of it we really optimize everything there we also remove amplitude completely we that was also something that we we never used personal data for anything but we're not doing anything like that but still some dapps were fairly uncomfortable especially in this world decentralization where any information was being collected under the user even if it was used for benign reasons just so we can make sure that we can see which features are getting used more or less we realize that we will have to find other ways of getting that metrics maybe we'll reintroduce it in the future with some sort of like uh approval by the user itself if they approve doing that we still haven't decided if that's something that's worth doing but this these are this is part of the things that we're doing behind the scenes trying to make sure that we're optimizing everything so both we can offer you a better user experience for your users but also make sure we're not doing it at the sake of performance or privacy etc so what are we offering like what does portis offer in addition so first of all i encourage everybody who's planning to build with portals during this hackathon and by the way anyone anybody who's has a live app working for the hackathon like hosted live which is has portis integrated and to be clear you can use ports directly or if you're using any of the solutions like web 3 model or web 3 react i think that's the other one or block native where um you can use portals but other providers as well that counts as well we're not going to tell you to use as long as portis is a login option you get 100 100 worth of beef as a you know as a prize and the favorite adapts that the apps that we think are good will actually even be posted publicized on our app store at apps.

ports.io and the top one our top favorite we'll get a blog post and we'll really kind of cover it and talk to you and wanna you know really dig into what was done there and how you how poor has helped you reach you know a good user experience for your users so when you initialize portis and i want to cover three things that that are interesting so the first thing that you have is something called scope now and scope is uh um sorry so scope is you you're probably familiar with the concept of scope if you ever used facebook off or google off you know how you log into facebook or google and it's the pop-up window says hey this application wants access to your profile picture email whatever so these are kind of again web to user user experience things that we're used to so we wanted to offer that as well so we have two parameters there the first one is reputation i wouldn't recommend using it at the moment we it used to have a lot more meaning back when we had uh payment processes that allowed us to use an api so we could really have more information about if users validated their purchasing et cetera so we can the idea behind reputation was that you're doing an airdrop you're logging the user you don't want to give that airdrop just to anybody or you're sponsoring their gas fees with the gas station network which is another feature we have that i will get to later on so you want to make sure you're only giving that to people that are reputable that have an actual account and you're not getting bombarded just by some sort of a sybil attack so and we allowed you to ask the user to share their reputation with you but at the moment we're working on making this more meaningful so that's less interesting the other interesting scope parameter is something called email which as it means you just ask the user to share their email with you now this is useful i think for a big pitfall that i see with dapps where they have their own login mechanism on top of asking the user to log in with web3 and that's a terrible user experience you go into any application in the world web too you don't have to log in twice right now you can use your web through provider and it doesn't have to be just supporters you can use your website provider as your authentication method basically you ask the user to log in with their web3 method and then you sign a message or something equivalent so you can verify you know for that specific session there's a host of blog posts using of2 provider as your login mechanism i highly recommend you do that but the reason we give you the email through the scope and what it means that when the user logs in the screen will show hey this application also wants access to your email you can approve or decline is that the application can then also have access to the user's email because a lot of the times we saw the dapps were having this separate login mechanism just because they want to have a way to you know independently communicate with the user with their users later on so if they have their email through us that's all they need basically and now they can only have one login mechanism which is obviously much nicer and so that's scope so i i recommend using that and passing in the email if the user doesn't agree to share their email then they won't get their your newsletter but that's you know that's always their prerogative and the other option is network so network is as means like which network do you want to connect to if it's mainnet if it's uh one of the test sets or the host of evm compatible blockchain that we support if it's poa if it's matic if it's thundercore and again the full list is on our documentation and i'll touch on network later on we also have something a little bit more interesting for that and i think that's really interesting for layer two right now where everybody's you know wants to kind of move between them between the networks and so and and the last one is the app id and so that id is when you set up your portis application you need to pass in when you initialize the force object you need to pass in the app id and what the app id does is allow you to kind of set up your logo and all kinds of different information and so when the user logs in they will see your dap logo and there's also a security aspect to it where you're telling us which domain your dap should run on and i won't touch on that because we're short on time but just make sure you set it up and okay so moving on so we have some methods i won't go over all of them because uh i we're not that we have around 10 minutes left but i'll touch on the more important ones so and i'll start with change network because i really want to make sure we cover that so one and this will trigger a code example here and you can check it out later so um let me kind of show you what's going on here so what and i'm not sure if you can properly see my screen let me kind of try and see if i can make this a little bit bigger okay i hope that's big enough so first of all let me show you how initialized port is so when you initially support us you pass in the dap id we start off on rank b and then you just create your web3 object with the portals provider that's it you've got work three standard web 3 stuff now the code here is not that interesting but this call is what's interesting so we got a standard like react form here you can check it out it's not nothing too fancy here but what we're doing when you change change to a different network you see when i click on send here on mainnet then i'm going to be sending well first it will want me to log in and i'm already logged in to an account i created for this demo so this is like our quick login the user will just log in easily and what it will ask me is to send a point one ether to myself but i don't have it i have insufficient funds by the way you'll notice i can complete this with banks uh go to checkout this is our direct purchase feature which um will which we also have and i mentioned when i'm mentioning later on i'm not sure we're going to have a lot of time to talk about it basically it allows the user to kind of complete everything in one flow instead of asking to go buy some ether come back click again this makes it a little bit more you know makes it a little nicer and more familiar but you see this is on the ethereum network and if i click on let's say a medic and i want to send somatic test net so when i click send you'll see that i'm now sending on matic it's a mumbai test token and i do have a few it shows that i have the zero balance because it's a test network token so we don't show balance to it so it might be a little bit confusing but i am able to confirm it now and well it doesn't really i didn't create any ui for this but here's the hacks here's the hex of the transaction the transaction hash sorry so you can check that on on you know on the mumbai net test network and see that it went through so the interesting bit here is this change network which allows you to change the network the user is on and while they're using the application this lets you do stuff like move between layer one and there two very easily for your users and create a very smooth experience for them um so i just want you to make sure you're aware of this because i know a lot of you are going to be building on matic and sometimes you want the user to do a lot of cool stuff on matic but then move back to main network where they're kind of moving the um let's say the assets that have the real value because that's where you have like east or nfts that are already there although i know that openc recently integrated matic into nft so i'm really curious to see where that will take us i mean a lot of other couple methods that are interesting show portis so show portus is when you click on it and a lot of those have code example in our docs you can just kind of test it out for yourself show portals opens like this small window on the top right in our iframe that shows you like which email the user is logged into and what's their uh what's their wallet address what's their balance all of that so and i noticed that some developers use that to log in the user like using that to trigger the login i don't recommend it personally if you need to trigger a login just use the standard web3 enable or use web3 get accounts and then call show portals like a lot of dapps for instance will have the once you log in it will tell you like the user address on the top right so maybe bind to that so when the user clicks on that that will trigger the show portals i just think it's not the greatest user experience that once you log in there's something additional you need to close to use the application just like a tip set default email i won't cover that it's useful for specific apps logout allows you to just log out the user import quality if some applications want to create a wallet on the client side import them into into the user's account so they can you know sign transactions and whatnot with them but then also have the user's personal wallet to kind of communicate between both this could also be useful for some layer 2 solutions you want to create like a a wallet for the user for some reason or maybe you have all kinds of like uh using create 2 or all kinds of interesting things that apps are using this for is logged in just useful for some user flows to figure out if the user is logged in or not for you inside your dap and so we also have some event handlers which are pretty straightforward on login this is by the way on login is where you will get the user's email if you ask for it in the scope that's where you will have that in the callback on logout also useful to know if your user logged out it will also trigger if the user is has poorest on a different app on a different like the wallet open on a different tab and they log out there you will also get that callback so in case you won't ask them not to sign a transaction it will trigger another login it just gives you better control and that's what we're trying to give the developers more control so they can create user experience that are more web to feeling and on active world of change porsche allows you to have multiple wallets so again if the user changed their active wallet inside another tab this will trigger and you will see if it changed on error just if there's like some some sort of error not related to signed transaction just kind of any error out there you know that can happen um and finally we have some features that are gonna be super useful and we have some blog posts on them in our if you go to porta sio you can reach our medium page and read all about them gas relays about the gas station network which were integrated allow you to sponsor gas fees for your users trust this app and well this is for this used to be a lot more useful when gas fees were around a couple of cents each because we're limiting this to one dollar per hour in gas fees what it does a user if they say they trust your application they don't have to confirm every transaction if it has no value like no the parameter value is empty but even then we limit it to one dollar per hour of gas and because we're not really worried about malicious apps it's more about you know mistakes like a dab might have an error where they go into a loop and suddenly they clean you out dry with the gas fees now with gas feeds being around like 50 or 100 dollars it's less useful for transactions but it's super useful for messages we saw this getting used a lot in games where if the user has if the developer needs the user to sign a lot of messages because a lot of games work that way they don't want you to sign transaction they want you to sign messages turning this on will mean that the user doesn't have to confirm every time it will just show a notification a toast notification you send a message you sign a message so that's super useful for anybody building any games or something of that nature direct purchase i mentioned before with banks that allows you to have this kind of quick and way of for users if they if they just started out they don't have any ether they just click on a button it pulls them into bank said they complete the purchase and then they go back and it automatically fires a transaction as soon as the money is inside their wallet so they don't have to do this back and forth and i think that's all the time we have and check out our twitter our documentation and our telegram if you have any questions during your bill we're here for you we want to help we want to make sure you can do you know have the best build in this uh hackathon and um yeah thank you very much tom thank you sir thank you thank you for having me yeah you got it well we see you in the uh what time zone are you in right now are you in israel yeah in tel aviv it's 10 p.m here now i was gonna say we probably won't see you at virtual castle this afternoon but maybe tomorrow morning uh yeah possibly i wish i i wish we could all be there you know go check out if you haven't been to the gamerjet booth yet go to the portals and shapeshift uh booth there's insane amounts of cool things i'm sure you'll see oh yeah and everybody else there so everybody go see tom so tom's going to be there tomorrow morning yeah that's the plan yeah scott show me around it looks super cool all right cool thanks tom thanks john see ya