WalletConnect 🛠 Build Dapp Notifications with Web3Inbox

[Music] today I'm going to be presenting around building daps notifications with web 3 inbox um so yeah just a bit about myself uh I used to work in social media and marketing and then I moved into software engineering and then now I move into Dev relations um I spend a lot of my time uh thinking about the next future of wallets uh we've had wallets from a very long time ago and then now we have a new era of wallets um and daps um that I'm really interested to talk about today cool so for those that aren't familiar with wallet connect uh a disclaimer we are not a wallet uh we're a wallet and dap infrastructure company um so you might have seen our QR codes quite often around the place um and we power many millions to requests per day um and basically yeah we try and build and bridge the gap between daps and wallets that you might may have known of so we are actually two different parts so we have products and then a lot of things that you might have use this QR code on is primarily built on sign API but we have all these other cool apis which make up our products so I'm just going to quickly for today's context just go through what is wallet connect of course talk about the bounties because that's what you're here for um and then I'll talk about web3 inbox and how you can build some cool experiences cool so web3 model is the flagship product that we started out with um and it's around connecting your wallet to your dap so this is if you've ever been a Dap developer or someone who's interacted with a Dap on the right hand side of connect wallet that's what this serves purpose on so 500 different wallets um and something I want to talk around 6963 um and then we have a few more cool things around embedded wallets around email coming soon so uh there is this problem in the ethereum space uh called the injection walls or window. ethereum um it's an absolute Nightmare and the way it works is you have metamask and you have Phantom then you have a cosmos wallet and then you try and use metamask but then the other wallet pops up and things like that so this is uh dependent on a thing called window. ethereum um and that is like solved so if you ever had the whole metamask and Fantom wallet all this kind of cycle like that's over um so if you see on the left hand side on wallet web 3 modal um you can see that like you can choose your uh injected wallet so that's a cool thing that we've worked on in the open source space to get forward um and we support several different types of uh wallets in the space um web3 wallet um so if Pepe wants to connect to aird drop. pepe. kind of looks like a scam so this is something that been we've been working on so web3 wallet is if you're a wallet developer so if you've ever used metam mask trust wallet and things like that and we really think about you know how do we help wallet developers but also how do we give more verification and security features towards them so that's something that we've been shipping and most importantly is multi-chain like things have changed from 2014 to 17 like we have a lot more networks and that's an experience that we wanted to deliver and this is the one that I'll be going through more in the workshop um but I really want to what we have now is push notifications and chat is coming shortly um and we really want to think about all right you've built your dap and wallet how do you build more engagement around it so I'll be going into this a bit later um but essentially we really want to think about the the web 2 web 3 product experience cool so this is what you guys are here for um of course among some other things to network and do all the cool things so we have 20K in total Bounty prizes um so the first one which I'll will go through in a lot more of this Workshop today is around web 3 inbox so the best integration a total prize of around 7K um so that's our I would say one of the higher pull prices we have the prize pools and then we have mobile so we're very bullish on mobile we started and we've helped a lot of more mobile wallets integrate um but this is also on the DAP side so web3 model is the DAP side so if you're a mobile developer that can build on react native flutter uh iOS or or Android and like that's all supported so there 6K up for grabs for that one uh my Alpha is not many people will be doing this track so you know hint hint and Innovation pull prize is that uh this is for just a pull prize and if you make some sort of like basically if you integrate web 3 modal the connect wallet button but also make an interesting experience don't just you know mpm install and call it a day right so you need to do a little bit more than that but we're that's what we're looking forward to um amongst web3 wallet if you want to integrate that so those are our two things that qualify for the pull prize I would imagine most of you would be qualifying for this one but also if you're here for inbox I'll go into that cool so this is uh something that I guess you are all familiar with um and I want to ask a Raaz a hand of a question how many of you do onchain transactions every day every day are you sure one two three all right all right we got some Deens here so uh this is actually quite rare every time I've been in an audience there's only been one person putting their hand up so making on TR on train transactions every day to weekly to monthly like everyone has a different time period um but we want to get to a place that if you think about your web 2 experience you use Instagram or Tik Tok and you're kind of in this dopamine wheel effect and you're using it and you're starting to enjoy the product um but web3 kind of doesn't have that uh we're still stuck in the just I'm going to stake my eth and I'll come back back to it and then I have to check in app I have to log in again and do it and I don't feel like that's the experience that we want to go towards uh so I personally spend a lot of time talking to wallets and daps to figure out like what is happening in the space we get to talk to 300 plus wallets and many hundreds of daps as well and I think it's been hared on for a long time hey let's fix cry crypto ux um but I feel like we're in the latter half of really SCI of solve it um uh you know namely things like account abstraction and all of that but the way I see daps right now and most of you will end up building daps during this hackathon is this is kind of the categorization in my head that works around what daps are so um and then you see these features in wallets so you financially read or right you send eth you send Soul you receive all whatever nfts you can look at your you know Punk or whatever else and you can send send it um interact with any of these contracts you have identity with like decentralized identity with disco uh lens ens like all these things all these pieces are here around multi-chain and more more recently and more popular is like social fi and this whole thing of consumer crypto I'm personally not like really with the whole consumer crypto thing it should just be consumer and like just use and build things that people need um so that's the main main thing that's been talked about these days um and we think a lot about this connect wallet experience and the thing is right now is the left hand side of where we sit uh we sit in a very token Centric uh like system and Defi and nfts are leading the use case but right now I can only see five people here who put their hand out out of 20 to 30 that are using onchain transactions every day um so I think things needs to change um and we're not going to be able to solve it overnight but our thesis um around web 3 inbox is really thinking around communication so web 2 products easily like if you think about the onboarding experiences with like signing with Google and this and sign in with that and then you can easily use these products without having to do all these transactions right and that's what we want to get towards we want to go towards that experience where like notifications messaging communication is like all actually properly working and it feels like native towards the experience that we have you know in web too and the last part I going of want my personal take as well is that wallets are no longer this transactional like list uh you go to Ether scan and you're like oh these are the things that my wallet did but uh I think we should start to reframe mentally like what we think a wallet is uh and we we believe like a wallet is more like an identity Hub that allows you to interact with the rest of consumer crypto or however you else want to phas it because it's no longer a transaction list we can do so much more um and I feel like as developers or as product people or business people here we need to start thinking about wallets not as Financial lists transaction lists but as an identity that allows you to do things cool so with this in mind we really wanted to think about like notifications like whether it's like openc or Foundation or Zora that you're minting or snapshot proposals or swaps or or like whenever your your stake has uh reached a certain amount and a lot more thinking around or even ens domains like I have to regularly check in on my ens domains uh to see when they expire or if I can buy someone else's so all of these things are still kind of missing and we really want to do like a full product experience where you it actually feels native um so yeah like just kind of want you to pause for a minute and start thinking of like what this experience means more like sure it just looks like another iOS notification button on your phone but I feel like this experience is going to help us more like feel more engaged with what's happening with like consumer crypto products cool so this is just a GitHub uh template if you end up wanting to work on web 3 inbox um this is all the instructions and it's a quick guide to um I have I can give you the information on this a bit later um so what I'm just going to go through over the next 5 10 minutes is just go through the code to show you what that experience looks like um and then I'm happy to take some questions at the end great so this is mainly initially for web 3 inbox is JS um so it would you know just your standard packages mpm bun uh yarn whatever else that you want to do uh You' add in some some environment variables here um so you need a secret for your using notifications uh and then here is just pretty much like a sample like I guess uh body of what it would mean to like just send a notification we really wanted to make it as simple as a web 2 kind of style of just you know sending it through to this um title body you know whatever you want to do and whoever account that you want to send it to um so this is something I'll show you a bit later but this is just another just a quick call back in react and just showing you like how simple to block is of if you think say let's just take a a dow proposal uh notification app for example right um and then you you know you have your Dow vote and then it's like oh it's been passed all the front end and the back end has to do is is be listening for that event and then you can easily send these kind of notifications cool so I'm going to switch over to the demo here just to show you what this experience looks like so just as a heads up this is what you will spin up easily just from an mpm install from that uh code uh snippet I showed you so basically you just connect your wallet here um and what you do here is we've taken an approach of like um there's a lot of spam um that can happen if you were to receive notifications or chat so we've taken a decentralized identity approach as you can see on the it says did um that's just a kind of like a way the standard around it um so basically you're just signing authorization to this application hey you can you don't like we give you access to talk to us as opposed to just getting spammed so this is just that so this is just Z authenticating the signing and then this is 0x87 and then I'll be subscribing to this application so here there's nothing that's been subscribed as of yet this is just some further information around it um and what is actually just about to happen is now this application is event listening to every single block that's been happening so listening for onchain uh events and that's where I would assume the any of you who is hacking on all of this would be thinking around what onchain event can we start to think is more exciting towards the consumer and something that I can get like excited about like I'd want to know when I get liquidated like these kind of things are going to want you guys to start thinking about um so that's that um so this is just running in the background for the block um so that's that I think soon enough they will be another block that that's mind um and then I want to send a test notification so this is something that you can also programmatically create of okay so you were listening for onchain events uh what if you want to do a different type of messaging so there's two different ways that you can do it cool and then the way I kind of want you guys think about it is this is the DAP side or this is the app and then if you think about it on the wallet which I'll kind of show you in a little bit is okay all right so we have this thing called app.

web3 inbox so this kind of think about web3 inbox kind of inbox think about your Gmail think about it as where you get all of your messaging so what we did is on this app I connected 0x87 um and then this one I'm subscribing to a the the app I created here on 0x87 just as a verification and it should kind of come up as part of like your inbox so then if you compare like I mentioned left hand side is your dap right hand side is your wallet um so right now I just m a new block and all of that so all of this is is working you know synchronously you know on the app side and the client side and the wallet side so this is kind of the experience and I want you guys to think about like what if this experience was native to your phone so that's kind of where we're trying to go towards cool and yeah so I'm pretty good to wrap up um the shorter on time but that's fine and yeah so we're hiring two product managers uh if that's of Interest documentations there github's there um and yeah thank you so much and uh looking forward to seeing you guys hack on wallet connect [Applause] cheers um I'm happy to take any questions here or outside so cheers