Push Protocol 🛠 How to power your web3 app using Push Protocol - Fabio Costa

foreign [Applause] [Music] yeah I think my voice should be fine for everyone everyone should be hearing me well my name is Fabio I am a developer push protocol and well today we're going to be talking about it's more of a workshop we're going to be talking about different ways on how you can integrate Communications into your own protocol whether they are notifications or whether they are chat messages so that's the agenda we're going to be covering today basically web3 communication the solution that push about push protocol we're going to be talking about push chat and we're going to be doing demo most of the workshops are going to be Hands-On well I think for everyone that has been in Webster for a while it's pretty uh clear that we have a one of the issues that we have in web3 uh scalability on privacy one of them is communication bi communication I mean is as of today there is no way for users to receive um information to their wallet addresses based on things that happen on channel off chain what do I mean by this let's say that you're about to get liquidated on a landing protocol today how do you get notified about this well you actually don't right you as a user have to keep counterly checking your collateral ratio to see if you're about to get liquidated how do you know today there is a new governance proposal well you have to go on Twitter or discard to know about this so if you think about it that's not how it go on our lives in web too right so the reason I'm here on this Workshop is because I received a notification 30 minutes before so I'm preparing myself to come here whenever someone sends sends me an email it's not like I'm on Gmail pressing F5 all the time I receive a notification link for me that I have received an email that's how we're doing web 2 in webg we still don't don't have this so that's where push protocol started so the applications for web 2 notifications they are pretty endless right so I'm very passionate about dials so imagine like getting notified on your wallets for example notify all participants of participants of this style that there is a new governance proposal or for example whenever there is a new youth form for those Farmers Farmers out there or even better let's say that you are on an nft Marketplace it will be super nice to notify your users whenever someone places updates on their nft or someone whenever someone outbids you so don't keep check going back to the nft marketplace to check the status of your bid so the solution that push protocol is building is an open communication layer that means that anyone can simply tap into the network and fetch the notifications themselves the notifications are Dynamic which means there is there are no restrictions on what you're going to notify your users you can verify a Governor's proposal you can notify a live stream you can verify a newsletter you can pretty much notify anything even you can customize how you notify the messages there is no restriction whatsoever on what you notify your users this solution is multi-chain as of now we are an ethereum polygon sending notifications is gasless so you don't pay to send the notifications of course you'll send notifications via Smart contracts you'll have to pay the transaction fees but if you do um don't send notifications on chain notifications it's completely free for the protocol lists any notifications but also for the receivers and it's also platform agonistic delivery because you can any front-end any mobile application anything can actually display the notifications these are open network you just call in node say hey give me all the notifications from this address and display to the users however you want so push we having powered over 18 million notifications as of now we have over 70 000 even though this right says 60 we now have 70 000 different addresses they have opted to receive push notifications and we have over 100 Integrations and as I said before the Integrations can be pretty much anything for example the integration for Avi that they use is completely different from for example for adult or for ens so there is no restriction whatsoever the the notifications are going to notify your users um we just provide we just close this bridge well on Bogota this year on polygon connect we announced a new feature from push protocol we started notifications we have been building notifications for over two years and a half now we on Bogota we announced something called push chat so this is a wallet um if you have an address I have an address well we can start sending messages you can start sending a video you can send a gif a sticker a PDF a pretty much anything so we closed this bridge so we started with notifications now we are doing messaging as well and back there here that's my face this world on stage in polygon connect we also provide a feature that we are is currently in development but it's push video so now can video calls or video call other addresses as well and this is us where we were doing a video call on stage and yeah let's chat so I have prepared this video here it's gonna be this one I don't know how if the sound's gonna be good okay cool so this is about push chat so yeah let's get started with the demos so first of all um if you want to send a notification so first of all let's go to our um how we have a concept of channels let me just log in switch Network cool so the way it works is if you are a protocol service adapt or anything you want to send notifications to your users you must authenticate yourself into the protocol we call this creating a channel nothing is nothing fancy just uh just authenticate yourself to the protocol so you can notify your users so this as an end user those are what the users see we have it we have channels so for example maker dial we have wrecked lens if I earn five anchor let's say for example I'm interested in receiving notifications from Pro together me as an user all I have to do I click opt-in they sign a message then what happens is I give consent into put together to send me notifications if anyone people cannot send you notifications you as a user have to give consent so in the hackathons people they are building phones send notifications your first the first step is you create a channel push protocol so for this you go to our stating.push.org that's our test net URL so we are in Gurley we also own Mumbai for testnets I have previously created a channel so that's the Channel that I have so that's the UI when you create a channel so that's the UI that you have let me switch wallets here and just refresh cool so once your channel is created now I can notify my users so we're gonna go over different ways of how we can do this the first step is we can send manual notifications for example you can send a newsletter to your users instead of sending a newsletter to email you can send any newsletter to addresses there are two types of notifications broadcast which means notify all the subscribers of my channel Target notify this address subsides notify an array of addresses on this example let's send a broadcast notification let's add a title hello world and the message is going to be hey this is a special way of sending so we add here a bold on the text hey happy to be here let's add as well in media so let me go to YouTube let me take this ice cream video here just copy close here and just space here so just add a video on my notification once I click Send demo notifications it's going to be broadcasted to all subscribers of my channel but let me do something here so as an end user on the left here this is the vision of the protocol about standard notification on the right it's going to be the the vision of a user that wants to receive the notification from your Channel so for this let me create create a brand new wallet just as a brand new user just to simulate a brand new user let me just connect to my dab so first as I said I have to opt into my channel so I come here to my channel how's it called my channel is called demo channel so let's come here demo Channel here it is I just opt-in okay so I will now receive notifications so if I come here to the left send notification I just signed a message free I send notification and we got here too so we got here on the left here as a because whenever we send a notification to everyone it is everyone includes yourself and here on the left you just saw on the right we just saw the notification that I received and it's here my notification um I also got on my phone as well because I have the application installed we also get here on the browser extension so if I just copy my address here come here switch Network verify cool notification is here I also here that was playing around we have a notification from Lo-Fi girl that I was playing around cool I received one notifications very nice let's go to the next step so other way of saying a notification is you can send notification using SDK and usually for hackathons that's the way that is the most of people integrating because it actually is very very easy it's just one functional call that's pretty much it so for this um yeah so I have the code here sending notification SDK and this all I have to do just call here so most importantly before I just explain what the code is doing for this Workshop all the codes that I'm showing I just copy and paste from the documentation literally I didn't know change whatsoever just copied from here so if you go to docstoppush.org then slash Developers sending notifications very interesting send notification using the push SDK so that's literally I've just copied this code and paste it here so all this code is doing is I just import the push SDK if there is because I need to sign a message and I am because I'm adding my private key here um we just need three things to send a notification actually two but in this example is three I need the private key of the channel what does it mean it's the private key of the wallet that you created the channel so it's going to be this private key here I need the receiver in this case can be optional if I say hey notify everyone the receiver is optional but in this case I'm saying hey notify this address here in the channel the channel address gonna be this address here I just copy and paste here so that's the address that is here as you can see um this is following the type 10 format which is eip55 column five that's the chain ID and this is the address because we are multi-chain and as of now we are only only VM chains but soon we're going to be across non-evian chains as well so that's a way to identify which chain you are the only change that I need to change here is the receiver because I create a brand new wallet and the receiver is going to be this guy here just come here and that should be it and this code here just copy from the documentation it's going to be a Target notification this notification title and body and that's actually the payload from the documentation from the notification so if I go to downtown saying the I run the code I got here the response from the the SDK and if I come here the notification should be here and it's here You Got a notification here I got I have to refresh here but I should get from here and also I'll get on my mobile phone if you install the mobile application cool we have send notifications manually using the SDK you can also send own chain notifications to you using smart contracts you to send notifications using smart contract you just do a contract call that's all um I have a contract that I have deployed here earlier I hope this is still open because I deployed this yesterday um so for this what this code is doing is as I said before the code that I got here from sending notification I got from the documentation docs.push.

org sending notification we are interested in using smart contract so I just copied this and I paste it here that's what I have here so what this contract is doing is um it's just a year C20 token when I deployed this token I mint 1000 tokens to myself and all I'm doing is just overwriting the transfer function and when the transfer is successful then I will notify the receiver of the token so I'm going to transfer 100 tokens these push tokens my custom tokens that I created here and when the user receives the tokens the user will also receive a notification so for this um the contracts are already deployed so what I have to do so once you deploy the contract on on a polygon or ethereum you just have to do one more step this contracts are already deployed so I'm not going to redeploy it again um just for the sake of time once you deploy the smart contract you just have to do one last step which is there's much the smart contract will be sending notifications on my behalf right so all I have to do is have to give consent for the channel for the smart contract to send notifications how do I do this when you deploy the contract you just copy the contract address you go to your channel UI that you created come here add the delegate and then you add a contract here once this transaction is approved then the contract can send notifications on your behalf so but I have I have done this already so that's the contract I added this yesterday so the contract has been deployed and also the contract has been added here I gave consent to the my the contract send notifications so actually we can we can now send the notifications so for this we are overriding the transfer function so that's what we're gonna we're gonna be calling so we're going to be calling the transfer function here we're going to be transferring two three four tokens because why not and we're gonna be copying this address so I'm going to be sending um two three four tokens to this address and this address will not only receive the tokens but also receive the notification now I just confirmed this and once the transaction is validated now let's see here yeah mongoli but it can also be on polygon yeah okay it's in taxi now okay the transaction was sent so if I come back here if I refresh then I should see the notification here yeah it's not here let me just refresh here okay yeah for a reasonable notification's not here uh but that's fine so that's the idea so you can do a smart Contour call um basically send out your notifications just do a functional call to the contract cool so those are three ways you can send notifications that are more so for the sake of time I cannot go in every single uh ways of saving notification but it's worth mentioning them um so there is one that I'm super passionate about if you go to doc.push.org developer Docs sending notifications subgraphs so you can send notifications from subgraphs so you don't need to change any logic of your current subgraph we have one helper function that Imports your sub graph and the subgraph starts sending notifications and it's also free you don't pay to send the notifications so yeah the graph a lot of people know the graph a lot of people have created some graphs before so in this hackathon you're creating subgraphs you can extend this to also add notifications this one helper function don't need to change any of your logic this this uh way of saying notification I find super interesting there is one more thing that I'd like to mention is we can of course we can send a notification ourselves but a lot of people for some use cases people not only like to receive the notification but most importantly Whenever there is a notification what we can do we can call your API say hey this address here receive this notification and we call your API why would you want this for example if you want to build an email about a Discord bot or a telegram bot you just take do your server deploy the code send to me or to any of the push crew team the URL of your server we white list this in our nodes so whenever there is a new notification we're going to call your API and then you can start building automations and things on top of this this is called we use AWS as an as for this and yeah this is uh is useful for as well if you have our own mobile application then you can send notifications yourself so you have a hundred percent control of what your unified notify your users we use cardio API and you decide whether you want to notify your users or not on your own mobile application the last thing that I'd like to show you guys is for chat um if you come here so we're going to be adding chat for for adapt here so if you come here push dot docs.push.org pushchat for web3 this is um a brief introduction of push chat how it works the encryption um verification improves and yeah an overview of how push that works but what we're interested in here is integrating push chat not this we're actually interested in this one here so this is how we integrate with chat so tldr is just one react component that's pretty much it so I have a code here as I said for here just copied from the documentation push chat this app here I just did a npx create react app I created this sample create react app and I just installed the wagme library and I installed the push protocol UI web I just use the wag me library because I need the use account hook to what all this application is doing here um yeah I just this is the default that comes in I just added the chat um chat component here that we provide from the push push SDK so we just need yeah I need one more let me just copy from here copy okay so we just need four information so it's gonna be here it's going to be the address okay so we just need four things so the first one is the account so where the the messages are going from so we're going the notifications are going from the connected address on the tab this the support address is the receiver of the notification of the sorry of the chat messages this can be dynamic depending on the application you're building on this case I just hardcoded the receiver the API key as of now you need an API key to send the messages if you need just let me know yeah cool um but soon we're gonna remove this air version so as of now just we need this and the environment which is this as we are on staging on the test net environment so for this let me come back here push chat this npm starts so that's the default tip UI and we see here on the bottom right corner the chat button I just click here connect let me just decrypt because I'm giving a yeah I'm decrypting the messages and here the the UI hi there nice to meet you hey yeah they're here the message has been sent also like to show you guys the last thing which is I send a message here so the messages belong to you to the users um so you've come here to chat that's the chatty y and look the messages that I just sent there they're gonna be appear here they're here so if you go like you could go to different depths and you always see the chat messages with you the chat messages go with you two different apps that you use so the messages that are sent there they're here I can send gifs videos anything memes emojis anything you want to send um so yeah you don't need also you don't need to use our react component if you want to build a Discord like application you can use the recipe guys yourself and build the UI Yourself by by no means you need to use a react component it's just an easier way to add it but if you want to build your own UI by all means you can do this we provide an SDK is there a rest API SDK and can be and can you can build your own telegram or Discord for web3 and that's all that I had so as of now it's the push chat this is an alpha but just for a brief time after we're gonna open this for everyone so as of now if you want to start chatting to any wallet on ethereum or chatting or to any wallet on polygon just come talk to us we have pull-ups and pull-ups to give access to the push chat we also have we have twenty thousand dollars for hackers that are integrating push and whether notifications are Chats on this hackathon and we also have one million dollars that we found projects that want to keep building push and that's all that I have those are Discord uh Community it's super super active and we also have a live Workshop that we did a couple months back different ways of how integrate push and that's all that I have guys thank you so much [Applause]