Push Protocol 🛠 How to Add Web3 Notifications to Your Project Using Push Protocol - Fabio Costa

foreign [Applause] [Music] today we're going to be talking about epns or problem vpns is solving and by the end of the video we're going to be doing some demos showing you how you can integrate in pns into your protocol into your hackathon project or into your service so as of today there is no way for protocols to reach out to users through their wallet address we rely on Twitter or Discord or telegram to notify users about something that has happened and if we think about it that's not how we are used to do in our day-to-day life for example if I'm waiting for a very important email um I know that I'll get a notification whenever I receive this email I don't need to go to keep constantly going to my email provider and refreshing the page seeing if I have a new email I'm gonna get alerted whenever there is a new email or whenever I'm expecting any deposits into my bank accounts I don't need to go to my bank account I keep constantly monitoring or checking the balance on my account I know that I'm gonna receive a notification whenever someone has made a deposit so for the user experience perspective is much better the users get notified about information they care they care and they can focus on doing other things instead of constantly checking about the particular information on web3 we still don't have something like this um and what would be the notifications for example in web tree space it can be for example a governance proposal Whenever there is a new proposal it would be nice for users to get notified in their wallet addresses instead of the users having to constantly be checking Discord or Twitter about a new proposal this definitely would increase Community engagements and participation into proposals for defy it would be nice for users to receive notifications before they are liquidated this definitely would save a lot of users funds and for a user experience as well it's a better experience for the user in general to actually get notified whenever they're about to lose their funds for ens for example in the UNS case it would be nice for users to receive a notification seven days before they are about to lose their ens domain and just to to reiterate the notifications they can be both based on on-chain events but they also can be based on off-changing events for example if you have a newsletter and you want to send a newsletter to your user's wallet address you can totally do this um the way on the demo we're going to show you guys how to do this but just to reiterate the notifications don't need to be necessarily on on-chain events but they can be based also based on off-chain events and in this case on this letter you're going to be sending a notification to the users about your newsletter to your users wallet address and once the user clicks on the notification the user is going to get notified redirected to your newsletter page so the solution that APNs is building we're building a open communication layer so we're working on on nodes Tech Community we will eventually be able to run the nodes and they're going to get incentivized by running them and any Community member will be able to run the nodes um and any Community member or any person can can acquire those nodes and fetch the information and actually verify the notifications have not been have not been tampered with the notifications they are Dynamic so what you send notifications completely completely up to the protocol to decide the notifications they can be a video they can be an image they can be pretty much anything um there is no limitation in what the notifications can be and most importantly there is no limitations on how you're gonna nullify your users if funnel notify your users based on launching events you can or off to an event you can how often you're gonna notify your users there is also no problem is all up to the protocol decide how they want to interact with their users the solution is also multi-chang even though our name is ethereum push notification Service uh it's because we started on ethereum but we're going to be across all evm chance and also non-evm chains sending notifications and receiving notifications they are cashless so if you want to receive a notification all you have to do is to sign a message to show that you are interested in receiving notifications for that particular channel for example in the other channel you can just sign a message saying okay I want to receive notifications for the other channel for my liquidation alerts um you have as an end user you pay nothing and also sending notifications if you send notifications um on the tab or using the sdks they are completely gasless only their own chain notifications if you want to send notifications using your smart contract you have to pay gas websites that everything's cashless and this platform agnostic delivery um you can receive notifications anywhere for example we provide like a mobile application it will have our own tab we have a browser extension you're completely free to receive to see the notifications there but we also and we encourage protocols to use uh we have sdks um so we definitely encourage protocols to use our sdks to receive notifications right on your dab for example the users never need to leave your tab to receive notifications or more importantly the users never need to leave your app to opting to receive the notifications all of this covered on our demo that we're going to do on the on the SDK so long star shorts the user net the user never leads to Leisure depth to opt into receive notifications and also never need to relieve your debt to receive the notifications we also recently announced something called SNS module for push delivery in those so this allows you to add logic in a way like to know notifications so for example our push delivery nodes they're going to be calling one of your web hooks Whenever there is any notification and based on the notification you can react for example you can build a telegram bot you can build a WhatsApp but you can build pretty much anything you can display your own push notifications into your mobile application if you already have a mobile application you can just react to the to the events that push delivery nodes are going to call your API you'll take this notification and you can send push notifications to your already existing mobile application if you want this is called SNS module for bridge delivery nodes and we have a very extensive documentation for all of those ways of receiving notifications into docs.apns.io Developers so as I said before there are there are multiple ways um how you're going to notify your users is up to the protocol so for example I give an example for adults Whenever there is a new proposal liquidation alerts Whenever there is a new farming so users can start providing liquidity into the liquidity pools um nfts for example whenever someone places a bit interior and ft it would be nice to get alerted by this event or for part of uh you're playing a a gaming you get notified it's your wallet address whenever it is a new community events so you can participate into your gaming community those are some we call them friends or VNS so those are the protocols that definitely helped out helped us to shape the notifications and make the protocol completely agnostic and most importantly flexible on how we notify the users and what we notify the users so yeah so you can definitely see each use case for those we call friends or vpns into our into our blog so for each protocol we provide an article explain how they are using the notifications between to engage with the community or to unify users so definitely head over to the pns blog to reach out on how they are using notifications into their protocols um we also were very active in hackathons so we always have hackathon from bounties we have a push grants program we have one million dollars if you are building a protocol project and you want to get funded to keep working to this protocol into your project uh please feel free to apply fragrance program it's completely open and transparent so anyone can see and participate into the postgrants program so um a little bit how the protocol Works under the hood so first of all we have on the left here we have the epns core contract so the APNs contract it resides on ethereum and it's responsible for the channel creation for governance Channel State changes and as well as all the incentives mechanism and just to make sure this contract here it lives on ethereum we have the EPS communication contracts and those chain those contracts they are completely multi-chained they are they live on evm chains and also non-evm chains um and those are the contracts whenever you want to send a non-chain notification wherever you're in a smart contract it's deployed you're going to be calling those micro the APNs communication Communicator contract deployed on that specific specific chain that your smart contract is deployed here in the middle we have the push nodes so the push nodes they are responsible for validating all the notifications the events the validation this if the notification is actually correct this far is following the the standard and if it is the pushed delivery knows they're going to dispatch the notifications to the end users so the users and users is going to receive the notifications tied to their wallet addresses so that's pretty much it those are the the socials that you can reach out to us um we're going to be doing some demos now and displaying showing you guys how you can integrate into epns into your own protocol and now let's do some demos first of all we'll see how to create a channel on push protocol previously epns we'll learn how to send notifications manually using the DAP smart contract the SDK in your backend are using a scaffold solution called show runners we'll also see how to customize notifications with content markdown images and videos we'll finish by doing a demo on how to integrate notifications into your own app and also will be receiving notifications for web 2.5 platforms and now let's create a channel on epns one analogy that I like to make is think about a YouTube channel so whenever you created a channel users they can subscribe to your channel and they are gonna get notified whenever you upload a new video APNs channels work the same way you're gonna create a channel and users they can opt in your channel to receive notifications so to create a channel on the test net you go to staging.dpns.

io you click here on the left menu here on the create channel so I already on my wallet here I already have um if and I claim that the free die here but but if one if you need die or if just click on this button then you're gonna be redirected to the corresponding faucet so yeah I already have 50 die so just click on next um yeah let's create a channel name so it's gonna be um demo tutorial creating demo tutorial Channel description it's gonna be creating a channel website URL that's their URL um about your protocol about your website so in our case we can do youtube.com let's click on next so we need to upload an image so I have a image here set so I'm going to upload this sword here let's crop the image let's create the channel so we're gonna need to do two transactions the first transaction is to approve the die and the second transaction is to create the channel once the channel is created I'm just gonna copy the address here I'm gonna go to my other browser and what I'm going to do I'm going to simulating another user here opting to my channel to to the channel That I just created to receive the notifications so I'm gonna hear it on the search I'm going to search for the newly created Channel which is this one I'm going to opting to receive the notifications so all I have to do is to sign a message so opting and opt out to receive notifications they are completely gasless so no transactions fees involved so since here the browser on the right has already sub opting to receive notifications to the channel That I created so all I have to do now is to send the notifications so come here I click on send notifications here on the left there are three types of notifications so I can send broadcast notification which means I'm gonna send a notification to all subscribers to my channel I can send a targeted notification which means that I'm going to send notification to a particular wallet address that is subscribed to my channel or I can set a subset notification which is I can send a notification to a an array of wallet addresses in this case I'm just going to send a broadcast notifications I'm going to create a title here is hello there notification message can be hi yeah we have we're here we have here in the bottom a preview of notification so let's send notification so uh just have to sign a message saying notification is also gasless sign a message and the notification has been sent so if I come here on the on the right click on the inbox notification should be here as it is and also on this browser here I have installed the the vpns browser extension so if I come here I see also the notification here now let's see how you can send notifications from your smart contract with push protocol first head over to push for hackers repo go to send notifications folder on this folder there are multiple examples on different ways on how you can send notifications send notifications using the sdks sub graphs you can send manual notifications you can send notifications using the RS scaffold solution called show runners and in this case for this demo we're going to be sending notifications using smart contracts so let's go over this folder let's go for this demo copy the content of this token modifier contract so let's copy the content of this contract and let's explain what this contract is doing so I'm going to call this contract push that's all let me copy here so what this contract is doing is we're parting importing the erc20 token uh contracts form open sampling we're defining the interface here for the communicative contract with the contract we're going to be calling and we're going to be calling the send notification function to actually send the notifications currently finding here the push contract the push contract is an erc20 token which has a Constructor and upon deployment we're going to be maintaining 1000 tokens to the deployer of this contract we have here a public address that we call epns com address this address is going to depend on the chain your contract is deployed for this demo we're going to be deploying our contract into coven so let's get the corresponding address the correct address for the communicator contract in Coven so let's go to push dot or documentation docs.push.org we have the communication address Communicator address deploy the multiple chains but in our case we are interested in the kovan chain so let's go over here and let's copy this contract address here let me paste it here so I have the correct address here the push contract we are overriding the transfer function from the year C20 and what this function is doing is we're calling the internal transfer fraction here and after the transfer is done we're going to be calling the communicator contract the send notification function here first we're saying we're going to be sending notification from this contract address here which I have selected here so for this let's get the correct address for the channel that we have previously created so I have a channel here that I already have I have already created so let's copy the channel address let's head over to the contract and let's change this address here with the correct address from our contract the chick is the recipient of the notification and here is the notification itself if you go over to docs.push.

org we go over for each property here and we explain how you can prepare and set your notification payload I just want to point out on this example we are sending a Target notification and the modification content notification body is going to have this content here but please for more information go to docs.push.org here below there are just two helper functions that we have created just to Def to prepare the notification so the notification appears um good for the recipient let's compile our contract so press command s the contract was successfully compiled so now let's deploy the contract I have selected here injected provider metamask were indeed on the cover Network let me select the correct contract in this case the push.so contract let's deploy the contract let me confirm the transaction foreign [Music] track was successfully deployed so let's get the contract address so the contractor is what deployed on this uh address here so after contract deployment we just need one more step which is head over to your channel your channel that you're going to be sending notifications from click add delegate now you're going to set as delegate the contract that you have just deployed click on ADD delegate just confirm the transaction who have successfully add a new delegate so before sending the notification let me opting to receive the notifications so we're going to be sending the notification um to this wallet here but this wallet's not opting to the channel so let's opt into the channel so first let me copy the contract address which is here let's head over to the other browser let me search here for this contract let me opt-in to receive notifications from this hello Channel sign a message I have successfully opting to the channel perfect so let me copy this contract at this wallet address here let's go back to remix let's expand our deployed contract and let's call The Transfer function which is this function here so let's expand here so let's send to this address here the address that I just opt into the channel let's send 500 tokens let's click on transact let's confirm the transaction has just been approved so just as a refresh we call this function we're gonna be transferring the tokens and after the transfer is token the transfer is successful we're going to be sending the notification so let's go back to this to the other browser let's click on the inbox and you should see the notification here as we can see so the notification has been successfully sent from the smart contract to the end user now let's see how we can send notifications using the showrunners showrunners is a scaffold solution that allows developers to quickly start send notifications using epns to get start just go to docs.io on the how to set up your Runner section first of all all you need to do is to clone the Repository let's head into the folder and install the requirement acquire your dependencies me once the dependencies are installed let's open the project so as we can see here in the documentation after we need to copy the daddy on the dot sample file rename it to that EnV and do some changes on this so let's do this so I'm going to create here a DOT entry file I'm gonna copy all the all the content from here and I'm gonna paste here so we're gonna do uh say notifications on the test net environment so we can keep this variable as it is for log level let's add debug before project ID and if you're a project setting a secret is not needed now so we can just set as no and the same thing for the advanced configurations as of now we're not going to need to use them so we just set them to node once you do this you open the source folder and the show Runners folder here as you see as of now the show Runners folder is empty note that there is also a full a folder called sample underscore showrunners once you once you open you see a lot of boilerplate code start to running and sending your notifications for example we have here an example on how to send notifications for Ave I'll send notifications for ens domains we have here a hello world boilerplate code and prefer Humanity in our case we're gonna be running the hello world so all I have to do is take the hello world further folder drag and drop here on the shoulder on the shoulder move yes so it is here once you do this all you have the the last change that I have to do here you go to this hello world hello world Keys dot Json file and you add it here the information related to the channel that you have created in this case we are sending notifications on the test net environment so I have here the that's the wallet that I have created a channel on the staging environment so this wallet I already have created a channel only the previous demo so the first thing that I need is the private key of these wallets so all I have to do here just come here Account Details export private key let me write my metamask password once it's done I just copy the private key and I'm going to paste here I'm going to place it here and also here from the chain ID since you are sending notifications on the test net environment on the Koval Network so we're gonna add here you just leave eap155 column fouriche and that's pretty much all you need so let's go head over to the terminal to start running this so first of all we need to start running Docker so we do docker compose up one stalker has run you open a new terminal and you're gonna type npm start once you do this you see the sharoness framework now is starting so let's start sending our first notification so here on the Hello World folder we see a hello world routes file so what we are going to do we're going to be assigning a post request to this endpoint so we can start sending the notifications so for this in my case I have Postman open here so how to set up this URL so we know here that the port the server is listening on the port 55 30 54 32 which is this part here and after we just appended this so the slash apis is on the loaders file if we go here it should loaders Express here config API prefix that's the Slash apis there you see here and this showrunner slash hello world you can find it here so run and slash hello world slash test notifications and this is a post request and this is what we have here so we have to do now is to send the request as we can see we got success two and one that means the notification has been sent so to test this I'm gonna open this new old browser here so this is a wallet address they already have opting to the Channel that I have just sent a notification and which channel did I send notification from was from the channel That I set the private key here so all I have to do here is go to the inbox Let me refresh and here is the notification that I've just sent demo tutorial Channel hello world now let's see how to send customizable notifications on the pns once our channel is created you click on send notifications tab on the left menu and you're gonna get redirected to this page on this particular demo we're going to be sending a broadcast notification which means a notification to all subscribers to your Channel we're going to be adding a custom title to the notification and the title is going to be my new bets for the notification message we're gonna be sending a customizable notification which means we're going to be adding this message here here's my dog on bolt as we can see here for a full list for all the support notification content head over to docs.

dpns.io on the notification content section and we have here a full list of all the supported types as well as examples of how to use them we're going to also be adding a media to the notification and we're going to be sanding this image which is my new dog we're also going to be adding a call to action link this link is whenever the user clicks on your notifications they're gonna get redirected to this link here once the notification is set we just click on send notification all we have to do is sign the message and the notification was sent so now here on the browser on the right I have a user that has already opt-in to my channel so once the user had head over to the inbox section we're gonna see the notification here you see the notification has a blue border which means it has a call to action link once I click on the notification I'm redirected to the into this case to a YouTube video on this demo we're gonna see how you can use the pns SDK into your dab we're gonna be fetching all the notifications from a particular wallet address and also we're gonna be creating a button on the screen so users users can opt into your channel so they can start receiving notifications so first of all head over to docs.apna Studio slash Developers go to the epns SDK section here on the left on this page you have added this table here and on this table we have all the features that the SDK provides the description for each feature and the corresponding package that you're gonna need to import to do this and also we added here the target platform if this feature can be used in the UI or if the feature can be used on the server for example you can use the SDK to send notifications we can use the channel the SDK to opting and opt out to notifications and this is what we're going to be doing in this demo we have the notification component we're going to be using this to display the notifications in a beautiful way in the UI and I have other elements here so you can take a look um let's go over to fetching user Channel details that's what we're going to be using we're going to be doing today so here it displays how we can fetch the modifications from a particular user so note that we are calling the get feeds API from the epns SDK the user section the user property here all we're adding is the user wallet address as we see here only add this prefix before the wallet address which means that we're on the ethereum chain the 1080 is 42 which means that we are on the coven test net so we're fetch all the notification referral from this wallet address on coven testnet and the environment at the staging because that's the test date I have created a sample code here so we can go over it together so the sample code is going to be provided in the description um so you guys can take a look at your own time so what I'm doing here let's go over here so let's go to this return section here um what we're doing here we're just iterating over all the notifications and we are passing the notifications to this notification components so first of all let's take a look of what is this notifications here they're just an array and these array is set right here so all I did is added here on the bit under user effect so whenever the application starts I'm going to be calling this notification function here and all it's doing I'm calling the same get feeds API as we saw in the documentation so I just what I did I copied this I paste it here the recipient address I just added the address here one of my address that I have that I have already opting to to a particular Channel the environment staging and I just limited myself to five notifications so I can display beautifully on the UI so once I set notifications here notifications are set here once the application starts if we scroll down we see we're then passing all the notifications fetched from the SDK and passing to these notifications component let's go over inside this component for this component here I took this code here from the documentation itself so on the on the documentation there is a link to the GitHub with a full a lot of examples on how you can display beautifully the notifications on the UI so also this GitHub repo is also going to be on the links below and it's just one way that I did to display the notifications in a very beautiful way so you as a developer don't need to spend time formatting the notifications but just fetching the notifications themselves but all the links to this code here that are going to be provided and also examples on other react components that you can add to your application so we're here what we're doing we just take notifications iterating over them and displaying of this notification item and look notification item here is a component that I just imported from the SDK UI web so let's start the application so the application has already started let's come here and here so we're just iterating over the five notifications and we are passing the notifications to the notification icon component here and this notification items a component on this Library here so once I pass them to this component while the notifications they are all formatted in the screen right and you see the notification they have a blue border which means they have they are they have cultural action links which means that once you click on the notification the user is redirected to to the call to action link that you set it let's take a look now um on how the users can opt into your channel of course user users can go to the APNs Tab and opt into your channel in the APNs tab but it's way better for user experience perspective so for users to opt in to receive notifications right on your dab itself so users users still need to go to dpns to opting to start receiving notifications so in this example here just to recap the users can start to receive notifications right right on your chat and now we're gonna see how users can opting to receive the notification those notifications on your Dev let me just comment on this and then commit this for this um all I'm doing is just following the steps on this section here in the documentation we have a section here called opt-in and opt out once click here all I'm doing I'm just following the steps here right so all I'm doing I'm just I copy this function here and this function all it's doing going to opting to a channel that I have previously created so I copy this code here and I pasted this code here I created a function called opt-inchannel that I just copy and paste and change the designer here to the signup that is connected into the the browser so I just hardcoded here a channel address that I have created this signer is the user currently logged in into the browser get the user address and I call this function so let's see how it works let's go to the depth see the button here once I click it there's a message that pops up now if I sign this message then I'll start receiving notifications from from your Channel so users never users don't need to leave your adapt to start receiving notifications they can see notifications on your app and now they can also opting to receive notifications right on your tab on this demo we're going to be using the vpns SDK to send notifications and also to receive notifications so for this we need to import the vpns SDK and the Etheridge Library we're gonna need the private key of the wallet that created the channel on the APNs tab in this case I added the private key on the wnv file you're also gonna need the channel address and you see the channel address is following the type 10 format so you just add it you just add eap155 column chain ID which in this case is 42 column the channel address in this demo we're gonna be sending a notification to this wallet address here so I just paste it here as the recipient address variable to send notifications it's straightforward all you have to do is call the send notification function we're going to pass the notification information and most importantly the notification payload notification is going to have a title a body and in this example a call to action so whenever the user clicks on the notification the user is going to get redirected to this URL in this case a YouTube video once the notification is sent we're going to be sent we're going to just console a message and here at the bottom we have a get notifications functions and it's in this case here is just to display um how you can fetch notifications from a particular wallet address in this case you just go call the get feeds function you pass the wallet address following the captain format here you pass the environment since we are sending a notification on the staging staging environment you just pass staging here in here I'm just passing those limited page to fetch the latest notification set and here on the bottom we're just calling those two functions above to run this just node index.js so we can see the notification has been sent and this is the notification that was fetched by the push storage node so to see the notifications there are multiple ways where you can see the notifications um you can you can see notifications on the APNs tab mobile application browser extension you can integrate with the SNS module and receive the notifications directly from the push delivery notes into your web hooks on this example here I'm gonna display show you how to receive notifications on the browser extension so you see here the notifications it has this blue border here that once I click it I am redirected to the video to the call to action we're now going to do a demo on SNS module for push delivery nodes allows very easily to integrate push notifications to your platform of choice whether it's a wallet browser extension telegram Twitter Discord or any AD push delivery nodes are a decentralized solution to enable web3 to web tube bridging they allow any platform to receive communication from push storage nodes the push Stars nodes they are responsible for validating and indexing all communication and tying them to your wallet address the SNS module is a midi level solution that eliminates all the heavy load of running a node or syncing information and gives you web hooks that you implement to start receiving notifications chats or any other web pre-communication in your software it works by writing all the user's web 3 wallet communication into Amazon SNS is a topic you as a developer only need to subscribe to the topic to start receiving those notifications this eliminates the majority of infra building on the developer side when they are trying to create a POC out or ensure instant integration to web3 notifications so I've got here a demo and on this demo we're going to be doing a telegram bot right so since we get the notifications from push delivery nodes what we do with those Communications we can do anything we want in our particular case we're building a telegram bot so just before going over the code all the code here I'm going to provide the links by the end so you guys can dive deep into the code and also I'm going to provide the link for the documentation with further explanation so here we just import everything the all the Imports necessary to run the the telegram bot and here is the web hook that we are creating so whenever there is a new communication on the push delivery node um we're gonna be the SNS is going to be calling this web hook and what is web Hook is doing all it's doing is taking the data um parsing the data we're validating the the payload received by SNS if the payload is uptight notification in our particular case since we are building a telegram bot we're just gonna take the payload and we're going to be signing the notification to the telegram to the telegram API so here that's the epns tab so I already have created a channel right so now I'm gonna send a broadcast notification to all the subscribers of my channel so I'm gonna send them a message um hello world and notification message is going to be uh SNS demo okay here we have the preview of the notification we're gonna now send the notification all I have to do is sign the message it's completely gasless to send the notifications the notifications have been sent so if you come here back to the the telegram bot we see indeed that we receive the notification and if you come here to the telegram we have received a notification here you see we're also receiving a lot of other notifications here but the notification that we are interested in is this SNS demo here um yeah those are the links I'm also going to provide you guys a link to our article that we posted um here there is information about further explaining what the SMS module is what the push delivery nodes are what's the what is the push start nodes so on so forth you guys can dive deeper into this there is also the GitHub repo here it's going to be on the links as well and also the links for our documentation