Michael Sena ~ Building Social Dapps with 3Box.js

[Music] a usable dap and how can we on board engage normal users because today as you can see we're kind of at a sad state of adoption and this was a chart taken from the state of the dabs ecosystem technology and adoption report by fluence network and this shouldn't surprise anyone in this room so most apps have less than 10 active users and I think that honestly these numbers are probably a little inflated although they did say when they were doing the report that they weren't looking at smart contract interactions they were actually asking to app developers directly because some of these DAPs include off chain interactions and so they didn't want to just take contract yeah method calls and so really we're at a state today where there's a lot of hype and still very little use many many years into the network and so we still have a long way to go and so basically we haven't found what our value propositions need to be beyond decentralization so as Taylor has hinted here before that decentralization is actually not the value proposition I mean there are things like sound money there are things like yeah not needing to trust your providers but to end-users and normal people they don't really care about decentralization and so what this means is that we've built systems that make it hard to you that are hard to use and so we really haven't found a way to onboard beyond the crypto dev and the trader and so those are basically people that are really incentivized to use this stuff because they can profit financially from it because they're interested in it and they build with it and they're trying to solve some of these problems too and so we haven't actually moved towards end-users we're still kind of at this hybrid dev user state and so what we've seen - or that there are pockets of usable things emerging like dev tools and some design rules but they're still pretty fragmented and we haven't really seen them brought together in a meaningful way yet and so these are just some of the things that we've heard building gaps and talking to users for a while so some of the problems onboarding like meta what meta mask don't seeds make plants why a new browser like these are just basic questions for people trying to use your thing so like if you can even communicate a value prop enough for them to try to sign into your app they probably still can't token exposure so like beyond the state of not really understanding what they mean people get mad when they go down and that's just a reality of these things and so also complexity most onboarding to DAPs or in general require you to read pages of onboarding things or the about page to actually figure out how I can use this like what is the CDP like I really don't get this also anti-social so we basically built our dabs on hex addresses and not like actual human readable profiles and so normal humans actually have no way to interpret what your UI is trying to tell them there's no way that they actually know which of these addresses are their friends or not and actually frightens people finality so there's no back button most transactions go to the blockchain and so we can't undo them which makes people really anxious cost so yeah the cut it shouldn't cost money to used apps as like people were saying it's so hard that they should be paying me to use it this doesn't feel right wait times mining seriously how long until it's done and fragmentation so where'd this info go for my last app I thought I already made a profile what's going on so in general yeah Matt too hard gonna live my life and moving on so sorry my emoji didn't load but so we could talk dev tools and design patterns for how we can start to address some of these issues and why dev tools because these are the people making the daps we've heard a lot of like usability approaches a lot of approaches to usability have come at the application level but that doesn't actually solve some of the core problems because the state the fact of the matter is that we're still so early in the development of the ecosystem usability is emerging from the patterns and protocols that actually that we're building on and unfortunately with cryptography you can't undo things and so cryptosystem design has actually at the core of some of this stuff and so there's a lot of info on this slide but I'll just go through some rules and tools that we can use to try to make things more usable and so as a general rule move off chain whatever you can so data and interactions that don't require global State the approach is minimum viable blockchain so we should be looking for other places to store this data that's not on chain if it's not critical and in most cases if it isn't like a financial transaction remove tokens when possible these just add friction to your app and don't do anything for usability and don't block someone from using your app so we've seen apps now where you know you can load the UI and a web 2 browser and then later if you connect an etherium account it unlocks more critical functionality it's a great pattern and we're seeing things push even further in that direction make things work together don't try to reinvent the wheel and don't silo users in your app look at the rest of the ecosystem and the other tools that people are using and try to make them work don't build for robots or computers actually think about the end user and surface information that is relevant to them and that they're used to make these experiences feel more familiar because in general web 3 just feels foreign and so along with that use web 2 patterns when possible and create something people actually want or need and on the right there's some tools that have been emerging over the last year two years that make some of these things possible so stable tokens people get mad when the value of the token that they bought just went down so if you need to use tokens use a stable coin achelous onboarding so if you need to let users use your app for a pretty non critical transaction that does need to go to the blockchain try to use things like ephemeral keys like burner wallet has gotten a lot of traction here this last few weeks and web 2 browsers so things like opera that are building crypto functionality directly into it so I don't need to decide whether I'm going to a separate web 3 browser to use adapt or a web 2 browser to do X or Y like it should just work the same social profiles and data storage so you should make your app feel social and familiar and human and so you need a place to store this profile data and that's what we'll get into a little bit more as we've been working on three bucks for some of that gasless transactions yeah if again if you need users to do transactions you shouldn't make them pay and they shouldn't have to worry about onboarding and buying tokens and acquiring ether just use your app layer to transaction cost and speed so wait times mining non-critical transactions again that don't need the main chain and can be related in later side shades and state channels are a great option and lastly your apps and wallets should all connect in a seamless way and so things like Wallet connect are great for that so now the second half of the presentation we'll talk more about three box what we've been working on and really what we've been building is the social profiles and distributed data network there are really three tools that we build that you can use in your DAP today that are working in production that will help solve some of this familiarity problem so we have an API a profile hover and a profiles app and we'll go into what each of those are and we'll give a quick demo on them so our API lets you access inter and interact with a personal database for every aetherium user so the data that you might be storing on chain today such as IP FS hashes of metadata or blobs of other data on ipfs that you store to the chain that probably don't need global state you can save users a lot of hassle and interaction so by just storing them in three box and so what you can do once data is stored off chain in this distributed Network you can onboard user profiles with this data by calling get profile and others you can set and get off chain user data which is basically enabling your app to actually store data in there as well and not just read their profile you can also have specific spaces for your app so if you don't want other apps to just easily be able to access the data you're storing in this network you can kind of sandbox your apps data within the users database that they still control but that is not stored on chain on a server or in local storage so three box j/s really provides your app with a fourth storage option and we support encryption is which doesn't come out of the box with web three wallets today so now I'll let Owen do the technical demo cool so we're gonna start with like looking on how you get profile data from an aetherium address so ideally this should be very simple and you have to like integrate it into your web application but I'm right now I'm just going to use the chromium console to show you how it works so I'm gonna start with just getting the theory mattress from is from the web free provider and I'm giving that to the getprofile API in three bucks so I also have like three box imported into this console so I have just prepared here getting my address from a theorem table so I should have set up with with the mic is kind of uncomfortable alright so there's my address and now I will use the get profile API so right but sorry oh sorry yeah second cool all right so this function returns a promise so I'm just going to log that huh I am seems like I'm disconnected from the Wi-Fi Australia's again right so now I get a profile object and this this is just regular JavaScript object containing all of the data in my profile so if you want to do something more useful with this you might wanna just store this profile temporarily and one cool thing we can do now is I have some verifications in my profile so I can basically use another API called get verified accounts and that will verify my proofs in my profile so let's see I saved it as my profile so here you can see my getup verification and my Twitter verification so I have a username and then I have like a proof that prove stuff but they get verified accounts function automatically verifies your proof so you don't like if you use the function you don't need to worry about like verifying it again right so this is like the basic functionality of like viewing a user's profile but if we want to do something more interesting where we save data we need to open the box for for the users so basically it's fairly simple use the box the open box we pass in my address and then we have to pass in the etherion provider then we need to like a sign let's see since this returns a promise which returns a an object which we're just going to call box so now we have a box object and to view the profile same as before the same profile as before because now I'm logged in to my three box account that's associated with my ethereal mattress so now I mean it's going to public dot all and now I get the same profile as before but I can also set data so I said I said my name and set that to Oh ed right so this also returns a promise but now we can also view the name if we call get and then we're just going to log that so there's like the basic functionality of like how you set and get data and the public profile and the same thing the same basically the same API but instead of public we type private will store data so we set let's set an email let's use to head at three box so this will set my email address but this won't be public so it's stored in your three box profile but it's encrypted so only it will only be viewable to apps that you authorized to to see the information right so and same thing here we can call email that or three box that private get and an email and I get back the result so a new feature that we introduced [Music] recently it's called spaces so the thing with three box when you just use it as I show you is that every DAP will get access to the same kind of namespace whenever if that one writes something in the in the box in the public store let's say another that could open the same box and then just remove that data which is not desirable for the first step because they might be like relying on the data so instead we introduced a feature called spaces where we can basically give Apps authorization to view a specific space where data is stored and encrypted only to data so I'm gonna show you like an example of how to open a space so we're gonna do box open space and then just I'm gonna do buff hack that's the name of the space then we get back a space I'm just gonna call it s and I'm just gonna call it space equals yes and now I get a request to sign this basically is me giving consent through madam asked that this app they're interacting with it's allowed to access this space so you can see the message is allowed this up to open your buf hoc space sign that and now I have this thing so I have a new object called buff space and in this I also have the same API as the general box so public dot set let's call it favorite hack and we're just gonna do something called we meme right so now I set that exactly as before we'll used to get and we get resolved the cool thing about this is that this will only be editable by apps that you have you have authorized to edit the buff hack space and in the same way we can do private data so private set secret cool yeah and now we can also get that and that's basically it so to summarize we have a public and private store that has like a general namespace that all dubs can access and this is associated with your theorem address then you can also request the user that you want to access a space and a space is basically a namespaced section of the users three box storage and only the apps that have like been given explicit permission to access that can edit and also read the private information all right so that's that's it for like the co demo do you want to go along with visual demos Michael cool so we also have a new feature call or a new kind of product called profile hub cover and basically we figured that calling and like we did up here with get profile my address and and doing that yourself for your app it's kind of a lot of work so we wanted to make that more simply to like give you a way to display profiles so we created something called profile hover and it's basically just a small piece of code that you input into your app like a HTML tag and that will automatically convert with every matricis to add a picture and a name and you can hover it to view like additional information such as verified Twitter and get up do we have okay so in here three bucks go so basically here we have a jiff that's kind of shows you how it works so you get on the theory mattress and an image and then if someone hovers you see some additional information and basically the way you import this into your DAP is that you first import a script tag with the profile hover script then everywhere you have an address and you want to show that in your UI you can just do this special HTML tag that's three box address and then lay a theory mattress then you can also play around with different options and it will display cannot be hover in different ways all right all right and for the last part of the demo we'll just quickly show our application which is a web app where users can manage their three box profile it's not a requirement that users use the profiles app because any app can instantiate a three box for a user if they don't have one by using three bucks jeaious and calling open box but the profiles app is where users can actually see their data and manage it and so you can do things also like verify your social accounts like oh it mentioned Twitter and github and share your profile with out with others and it doesn't require them to have a web 3 browser you can just copy your URL and paste it to them and they can open it in whatever browser they have via public profile and