DAPPCON 2018: Redesigning Web3 UX with WalletConnect - Pedro Gomes (Wallet Connect Foundation)
DappCon 2018 · July 2018 · 8:33
Pedro Gomes of the WalletConnect Foundation presents redesigning Web3 UX at DappCon 2018, walking through how the WalletConnect protocol lets mobile wallets connect to dApps by scanning a QR code rather than exposing private keys to a browser extension. The talk covers how this connection standard aims to smooth the friction users face moving between Ethereum wallets and decentralized applications.
Speakers
Topics
From DappCon 2018, hosted by Dappcon Berlin.
Transcript
hi everyone going to talk about redesigning web through UX with walls connect you guys must be thinking what's wrong with work through UX so first of all my name is Pedro Gomez if you have any questions or you follow up with me in Twitter telegram and github that's my username for your ID it's also my enos before in a sense a meter what's wrong with madam asked so meta mask is a Chrome extension as we all know and it's the only way we have today to interact with probably 90% of the dabs and it lives on your browser and if you change browsers you don't have a way to communicate to another browser what is your wallet so you kind of spend most of your crypto assets like eater and tokens collectibles just spread around different wallets and you
end up having to copy and paste from every device so even if you have a mobile wallet you end up copying your seed phrase and even like wallets like Jack's have cross-platform integration but you just copy your seed phrase and actually enables you to be vulnerable to someone copying our seed phrase which is like the most valuable thing so I think what we should be thinking is we should abstract the user from having the seed phrase unless they're only backing it up and just completely not knowing where they have the private key and I think it should just be able to download an app have it as a mobile wallet and just interact with any device with one wallet
so I was working on balance manager and we provided like a way to view and manage and exchange tokens and we interacted with meta masks ledger and treasure but we still wanted to have the mobile wallet experience and there was not a single way unless you had liked it in view browser which was very constrained if you imagine having all of this real estate that is so nice to have on a desktop in a small mobile view and we just wanted to use for example an exchange or like write the relay and have a mobile wallet where you carry with yourself and have the same private key everywhere so I found out the user friction between web 2 and web 3 is that when you have a web 2 application
you have a login to a server that allows you to access to a database basically this authentication became the wallet and the database is the blockchain and the only thing I'm trying to recreate with Wallet connect is that meta mask and of has this parts of the communication between the client and the wallet it's pretty much solved once you have a Chrome extension but that also ties it to one chrome extension if you want to use a different computer or you want to use the same application on your phone you kind of have to have different wallets so it would be ideal if you could not depend on this system and actually have one wallet that you feel comfortable to call it your own so what is wallet connect well connected is an open-source standard to connect desktop tabs to mobile wallets this is what's
the first prototype and the only thing I'm trying to recreate here is how can I get the accounts from our mobile wallets to the webpage and then sign the transaction securely on your phone so the way it goes like you create a session by displaying a QR code and this QR code enables you to have the session token' the bridge server and then a key that will be able to encrypt the data that goes during this session between the two devices this will then create a bridge on the bridge session that it's used to relay messages and you can actually share a lot of data that it's only visible for the that web app and the mobile wallet so you've now connected to more wallet Connect it displayed the QR code and your mobile
wallet scans it and you're logged in so you basically have the whole let's say it in exchange and you can just view your your orders and see what tokens you have and just interact with the DAP and now you want to sign a transaction so what happens now now you have to have a transaction being signed to the mobile wallet which is where the private keys live and then you'll be notified by having the web dev having a transaction request or a message for you to sign on the mobile wallet which triggers a push notification which is very normal user interface for any web 2.0 app so what happens is that you have a transaction sent in to the bridge and the push server will then trigger a notification
that will request the transaction details which with the session key that you had from the previous QR code you'll be able to decrypt the contents of that transaction request then you are able to review it on your phone and say you either approve it or reject it the web that will receive the transaction received or status that you rejected this transaction and you can just move on and this is a very similar concert to what do you have with right now with web 3 where you have a script that's injected then you can just call Sen transaction and then it pop-ups shows for the transaction to be approved the same thing happens with the mobile wallet so within this infrastructure we have four key elements the webbed up the mobile wallet the bridge server and the purse
server the push server is actually super simple because the only objective it has is tell you that you have a transaction the transaction is never available on the first server and the bridge doesn't have the keys to trigger push notifications unless the mobile was specifically whitelist the bridge to do so so there's two kind of developer domains that I listed here which would make sense for every dev to have their own bridge server and every wallet developer to have their personification which they probably already use a system like firebase Cloud messaging which they will be able to just have a server list function to actually do this so the QR code is the key aspect here where it
shares the secret between the web double walled and the bridge server is only relaying this information and doesn't actually access any of the contents and if for some reason the bridge gets attacked and destroyed the session you just have to reset the session by scanning the QR code again but the session should be lived for at least 24 hours which enables you to not have to worry about that too much so the result is very simple yeah for example this example where you have an exchange and you want to connect just like you would with meta masks you scan the QR code and then you can just interact normally and then sometimes you get a notification and you get some details and you can finally confirm securely on your phone that you want to make that transaction
or sign that message so what's next so we want to expand what can I have to not just be mobile to desktop we want it to be like a full standard to connecting to all wallets this will include like providing best and best US practices for handling meta mask injected web 3 scripts in mobile views or even Hardware well it's like ledger and treasure and providing like this library that does all for all connections and it's a very thin layer into the apps and wallets so they don't have to worry about each other and this becomes like the wallet connect stander where it provides one unified API to interact with the apps and wallets so you can have mobile wallets browser
wallets Hardware wallets only interacting directly with wallet connect and for the dab developers this is simply one API just like you have web 3GS and this could actually be used as a web tree provider that would make much more simplistic huge case where you can focus on your adapt utility we're also thinking of standardizing the way we do transaction requests moving away from the road transactions and something that we really explore how we can actually improve the information that the wallets have because currently meta mas doesn't display you much of the information that it's included in the transaction now that we have sign type data for messages but we still don't have a way to actually know what this transactions intent is when you're approving so
you're kind of proving trusting that that that provided you the right transaction any like I said no ways to develop our efforts because of the other day we want to provide utility and not spending time interacting every new wallet that comes around so if you like to contribute there's a discourse channel that it has most of these discussions going on the telegram github everything is open source you can see the libraries for the bridge the push the web app and the wallet and the documentation is vulcanize read out talks that io and you can scan the QR code for the website which includes most of these links