Push Protocol 🛠 Building Native Web3 Messaging & Notification Apps with Push Protocol - Fabio Costa

foreign [Music] hey guys hi everybody uh my name is Fabio I'm one of the core devs at push protocol and today we're going to be talking about what push protocol is what problem it's solving how it's solving and by the end we're going to see different ways of how you can integrate push-up protocol into your mobile app into your dab into your smart contract or into your wallet so the first thing is everything starts with a notification right so for example whenever we receive a new email we always receive a notification alerting us that we have a new email or whenever someone makes a transfer money to our bank account we always receive a notification so notification has been proven over the years that it definitely increases user experience but also increases user engagement in your community the thing is before push there was no way for protocols to reach out to the users right so protocols they expect users to go back to the protocols themselves and fetch the information for example when will my UNS domain expire well I'll have to check it it's not something that I know by heart and with with a solution like push protocol we can notify you for example one week before you lose your ens or we can notify you before you lose the money on Avi before your Euro collateral you lose your collateral or you can notify whenever a new streams or super fluid starts so the solution that the problem that we have currently in the the web tree ecosystem is first of all for dolls as of now dials that have no way to reach out to users to alert them that that there is a new governance proposal right so for example myself I'm part of multiple dials how do I know there's a new governance proposal right I have to go to Discord I have to go to Twitter and be very active to see that there are new proposals for a user experience it would be way better if I receive my phone a notification alerting hey new proposal 0x ABC is has started doing a vote then you click on notification then you can get redirected to snapshot or any other application to cast the results fortify the same thing for user experience we better receive a notification before you actually lose money right I think we all agree on this and for nft marketplaces is way better ux when you receive a notification whenever someone places a bit on your nft I have an nft I want to sell it whenever someone plays a bit I want to get alerted I don't want to give my email I don't want to give any other information and I don't want to go to the protocol myself to fetch the information so the solution that push protocol is building it is first it is a open communication layer that means that anyone can simply go to the network and fetch the notifications and the chat messages it's all open um everything is encrypted the auto adjustment chat methods are encrypted notifications they can't be encrypted and not encrypted but but the end is the communication the the layer is open anyone can simply fetch all the chats or modifications the notifications they are completely dynamic in two ways first of all how you're going to trigger the notification it is completely up to the developer do you want to trigger notification manually you can go dual trigger notification using smart contracts please go ahead um do you have sub graphs and then you want to notify your users using subgraphs you can do another fire users on your server you can and lastly the the dynamic notifications there also the notifications they're also dynamic in a sense that um the notification itself they can contain any arbitrary payload it can contain governance proposal it can contain a YouTube video I can receive a notification with the YouTube video it can contain random text they contain pretty much anything there's no restriction of what the notification should should look like and the notifications there Emoji chain where in ethereum you're in polygon buying a smart chain with more chains um soon and also non-evm change very soon it is gasless so for sending notifications there is no fee involved nor for receiving the notifications and lastly for me that's the most important it is the platform agnostic delivery part that means is the user doesn't need to go to the push protocol interfaces to fetch the notifications or to fetch the chat messages push protocol is an infrastructure protocol we built this SDK sort of apis we have these nodes but anyone can import the SDK and have the exact same look and feel that we have in our website or a mobile app in their own wallets in their own app so in the end the users don't need to know that push protocol exists where just this infrastructure protocol the send notifications let's send chat messages but how the users are gonna see the messages in a chat message any front-end can simply import the SDK and provide this experience to their community so push you have sent over 30 million notifications so far uh we have 85 000 different users that have opted to receive the notifications and have had over 500 um different use cases of notifications and we have notifications that go from T5 dials nft metaverse infrastructure social media and services and I think the difference so we see that we have a lot of use cases for notifications that what I like to point out is the notifications that are completely pick and choose so for example let's say that I'm a very active user on lens I just go to the lens I just opting to receive notifications from lens and I will only receive notifications from lens nothing else if at any given moment I want to stop receiving notification from lens I just opt out I sign a message then unlock to receive notifications anymore for lens so the end user has 100 control or what the user wants to get notified and if the user can always opt out and there's no fees involved in just subscribing to this so as I said we started push protocol started as a hackathon project in This Global like just a normal project and we have two building for almost three years already and we started with notifications but now we have chat and the thing about chat is that chat has been built on top of this notification layer and why does it matter and why is it important so first of all the experience that we have in web 2 messaging system we're bringing this into web3 that means just that whenever I receive a chat message on my phone on the protocol I will always receive a notification so for example whenever someone messages me on push protocol I receive a push notification on my phone saying John dot is has sent you a message then select I have this make very similar user experience that we have on telegram for example we also receive a lot of notificational telegram so we're replicating this um into push and of course in the future we're going to be able to fine-tune the notifications so probably I just want to receive a notification for that user but not for that other user so there we can fine-tune this but the goal is then user will always have the control of what they want to get notified and here the lab to have on our website and here is the mobile app and the idea is the websites and the mobile app has been built using your own sdks and the idea for this is just showcase that you can have the same UI in your own protocol of course we provide the UI but that is just that you can build exactly disk in your only way users don't need to go to push to fetch all the messages are the notifications so with chat wallet wallet chat I mean the applications are endless we're just an infrastructure protocol and how the how this system are going to be used is completely up to the Developers here in the middle we see that we have a group chat so a couple months back we announced group chat and tokenge group chat what that means is now we have a web tree native way for people to communicate so for example I can create a group chat for my doll I can create a token gated group chat so that means is only people that are allowed to join this group is if they hold a certain amount of my governance token let's say and I can create a public group or a private group so imagine I have my doll I have my token and then I create a group where I say okay all the chat messages for this group it's public so anyone can see all the chat messages but only if you hold a certain amount of my governance token you can send messages so you can see like how nice this can be for dolls for online communities so we're building this framework for better and more transparent uh communication so we don't rely on their current chat systems that we have in web 2. and of course we have sdks for both notifications for both chats and also for groups as well knows yesterday something very nice uh which calls push video so um it's a new form of communication that we have built on top of pushchat so the push chats be on top of notifications and videos topper are built on top of push chat so we're building this communication Lego blocks that would be on top of each other and push video is literally wanted while at FaceTime I have a wallet my friend has a wallet so we can call each other so here's me calling madur he's a guy that worked for us um so little yeah so we're gonna announce the the SDK for a push video probably by next week and the idea now protocols or uh uh websites or mobile apps can now provide this service which is wallet wallet video calls as often our swallowed wallets very very soon we're gonna announce group video call so I cannot just like create a group I can call all my friends instead of calling their phone numbers I'm going to call their wallet addresses and then we can just FaceTime everybody here I have two videos so here the left is um just showcase how to log into the mobile application but as I said you don't need the mobile app to to to interact with the protocol and here on the right if the video is updated we change a lot the UI but here on the right we can see how we can start the video call it changed so much already I should have updated the video but see like we always receive notifications whenever someone calls you receive a push notification say for example.eth is calling you like on my phone and then I can click on the notification then I can start the video call and here on the left is how the notifications look like and also how the chat looks like on the phone see here in the end we saw all the notifications and then all the chat here cool I can go first some cool demos how to integrate push before I go that um does anyone has any questions so far about push otherwise I'll just go into the code and then we can do the Q a in the end cool so let me go into the push staging app so what does the app looks like you as an user let's say I want to start receiving notifications from push so how does it work so we have our app here on Main ads let me just close everything cool so on push protocol we have a concept of channels and the channels is exactly like a YouTube channel so me as a user I can subscribe to channels to receive notifications right so for example there is this shapeshift governance Channel I can just come here opt-in all I have to do as end user just sign a message and then that's it whenever there is a new governance proposal for a shape shift I'll start receiving notification and the same rule for Lance snapshot maker dial wrecked so the user can completely go and pick and choose what notifications they want to get notified notifications they can come here on your inbox as we can see here they can come here under browse the extension as well t or on your phone let's set a notification on our test net because I have a Channel created here so the first step is if you want to send a notification the first thing that I have to do is you have to authenticate yourself into the protocol so you can send on notifications for this you have to take around 15 worth of push tokens into the protocol to prove that you actually uh a alleged person that will notify the users but I have a channel here called it demo Channel so let's send a notification so the notification there are three types of broadcast notification targeted notification Master sets broadcast means notify everyone who has subscribed to my channel Target means notify one wallet and subset means notify an array of wallets in this example let's just notify everybody and on here on the right is I have just this wallet that I have opting to this channel here on the right so let's set a notification which means hey and my notification message I'll call it notification message then I can add an image to the notification and I can also add a call to action link which is whenever the user clicks on your notification they can get redirected anywhere but for now let's call this um send just this notification all I have to do just to sign this payload it is free no money involves and then I have received one notification here if I come here to my inbox notifications here if I come to the browser extension notifications here and if I open my phone my notifications here if there is any wallet integrates push the notification will be everywhere so notifications dispatched to everybody we can send also the same notification here code all the code here is deployed already it's on GitHub in our push protocol GitHub everything so for example modifications we have this rest API SDK send notification all I need is the push protocol SDK and the ethers library because we need to sign messages so I just import the private key from the wallet that created the channel so I created a Channel with this wallet here so there are two things I can get my the private key for this wallet or we can do other things that I do recommend for staging it's fine with our production I would add a delegate here which means another wallet that can send notification on your behalf I can add my other wallet here and then use the private key from this other wallet so you don't use your private key for your main wallet but since this is staging fake money there is no problem at all the channel address here is going to be these address here the address for that created the channel and the receiver will be notifying this address here which is this guy here this double check 0x fd6 and this looks about right this is my notification title and this is my notification body I'll change it to this because why not and this then I'm just calling the SDK and all these properties here on SDK on the documentation itself and I'm adding a call to action link whenever I click on the notification I'll be redirected to YouTube and that's it so if I come back here so let me just run this I send my notification so if I come here oh I have this huge payload here see very fresh here the notifications here and if I click on the notification I go to YouTube and also here and also on my phone or any pro on the front end we also provide react components because the idea a lot of protocols ask us like hey I want for my users to see my the notifications on my own tab I don't want the users to install anything from push from that's the end goal so and for this we provide react components for this so for you all you have to do is to import this so have this react component here which is called notification item and you can install it from push Pro called UI UI web you just pass the notification array that you get from here by calling the SDK you call the SDK you get a notification array then you pass the notification array down to the components that we provide so if I run this how does it look like see all the notifications that we saw they're also displayed here the exact same notifications so if I click here also go to YouTube nothing changed see the idea is just to it's a platform agnostic anyone can display the notifications and chat messages and also have this button here called opting to channel because for end user to receive the notifications the user have to opting to give consent to receive notifications from that protocol otherwise the notifications go to the spam box and what we say is users can go to the push protocol dab and opt-in to receive notifications like I can come come here I can come here and opt in to receive here or you can import you can use our SDK to You'll create a simple button then when you click you can obtain here on your dab itself so let's say your user is filling a form like on your dad and then they say hey do you want to get get notifications about this on your own that then you can display this opt-in button here when the user signs in the user clicks cites the message under the hoods push protocol but the user doesn't need to know the push Pro push protocol exists we have chat as well so here house chat looks like let's see so we also have video call here and and from the SDK itself you can also send messages vsdk using our rest API SDK so for this everything is detailed in our docs so let me just where the docs are if you go to docss.push.org that's good doctor push.

org here we have developer Docs and if if you're a developer there are two things if you want to send notifications you click here then you can send notifications from Smart contracts manually using the adapt using the SDK using the the scaffold solution that we provide using subgraphs or you can even customize your notification right you can add bold text italic bought in italic add URL and if you want to integrate chat you have here push chat for web3 integrating boost chat so here we have some um yeah some explanation about the chat SDK but most of the important explanation should be here on push SDK SDK packages rest API chat here's the documentation for chat where we explain how to send chat messages and this code here is opt-in copy and paste and I'll paste it here so if I go to push chat source chat send message this one this is how I send a message using the SDK and we're gonna change this a lot but for now that's it so first of all I get my user information from the protocol itself I decrypt my private key because whenever you log into pushchat we generate a new encryption keys for the user we don't sign any Crypt messages using their wallet on private key because we don't wanna touch it so we generate the all encryption keys that are encrypted using your main ethereum wallet or polygon wallet or ethereum uh binary smart chain wallets once you have the decrypted kit done you can just send a message so if I come back here and I run this message has been sent and I send a message to this guy here 0 f D6 which should be this guy here 0x56 which is nice so if I come here to chat and open here what did I say listen hello token zero let me just change this to to this yeah it looks about rates let me send this yeah I receive a notification and the messages here that's pretty much an overview um all the different ways how to integrate push everything in the documentation we have been working a lot on documentation to make super easy for Developers and then yeah I think that's it any questions so far first of all thanks so much for the attention and yeah um uh hi thank you for your presentation I was wondering for the chat app is there a way for me to contextualize it so if I have like a inbox with like 10 different wallets that I'm talking to how do I know who I'm talking to like if I'm just browsing through it can I like rename and be like oh that's the guy that minted the same nft or how do I yeah so we have these features just not not exposed on the SDK but we can um add sort of a tags like of course because when we're talking like you're talking to Xerox abcdeft and like I don't know that all the addresses for all my friends so then you can display we display ens names so if they have EMS we're gonna see like peter.if then we have a picture that we can rename this you can add like my friends are friend one then you can rename this just not exposing the SDK yet okay okay so the priority is always ens first and if there's no ens then it's the wallet address yes okay that will be like um ens resident wallet address actually the first one will be like the the name that you said it like friend one if there's no thread one that will display an s that if there is no ens with split the raw address okay and then is there an option of changing a photo or something uh not on the SDK yet okay with the sorry with the group chats um I don't know whether I missed an example of that but can you leave a group chat um and still get notifications for everything else so do you have to get notifications from all of the group chats as well as all the other notifications yeah yeah so first you must as well when you leave the group chat then you stop receiving chat messages then you can roll over with the messages I don't know if that's your question like if I leave my group then that's it we can't pause the notifications for a sub like a group chat or a single person or um sorry you know you can't pause or um silence the notifications yeah that's a good question yeah um not yet not yet um yeah that's a very good question um not yet hey so well every very very thought that didn't work installed in the course thank you so if you're planning for the doll in a group so do you need to have the bush uh token or you have your you can get your own token or some another token right so um no push looking at all like if I ever owned out with her own token or let's say I have a doll that's still indicated by NFC you can all do this so when you create a group on the first Creative Group there is a section called token latest then you can pass the address of the erc21 or or you're 20. then you pass there and the number of the tokens there then you'll can get the group and then you select if it's a public group that means all the message counted it's public or if it's an encrypted group then only the group members can read the message okay and you can connect your group to the Discord group too um Discord private group right I mean you cannot affect like on this group chat you cannot fetch messages from Discord but what I mean don't Discord you can link to this like hey guys let's try to move this but there's no link between Discord and this group chat we'll try to build on a turn not alternative to Discord but like you would want to give another solution for online community to interact like a more web generated way which is open source Community owned and that's the idea we want to provide an alternative and of course it's up to the community to decide what's best for them but we just want to provide another alternative and question what we currently have like hey I think we can load things differently which is what the source Community ones and and yeah up to the community to decide what's best okay okay thank you so much foreign to receive the notifications also when user want to receive this notification so just user have to install this Pro Up application or next Google accession right um You can do it again I think that's the easiest like to install the mobile app then you receive actually a push notifications on your phone that's what I personally use for my personal notification okay I just like open like start my day see more notifications my web tree notifications that's what I personally use which is easier but currently I would say yes okay okay thank you this that's not the hardware solution but that's all we currently have okay thank you any more questions yeah I think that's it guys thanks a lot