Push 🛠 Building the Communication Protocol of Web3 - Fabio Costa

foreign [Applause] [Music] today we're going to be talking about epns or problem epns 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 and cure a 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 the in our day-to-day life for example if I'm waiting for a very important email um I know that I'm getting a notification whenever I receive this email I don't need to go cost to keep constantly going to my email provider and refreshing the page see 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 will 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 D5 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 notifications they can be both based on on-chain events but they also can be based on off chain 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 I'm 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 necessary on on-chain events but they can be 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 choose your users wallet address and once the user clicks on the notification the user is going to get redirected to your newsletter page so the solution that APNs 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 notes um and any Community member or any person can can query those loads 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 notifications can be and most importantly there is no limitations on how you're gonna notify your users if 1005 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 to decide how they want to interact with their users um the solution is also multi-chang even though our name is ethereum push notification service it's because we started on ethereum but we're going to be across all evm channels and also non-vm chains sending notifications and receiving notifications of their 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 we have as an end user you pay nothing and also sending notifications if you send notifications um on the dab or using the sdks they are completely gasless only they 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 a we have our own app we have a browser extension you 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 dab to receive notifications or more importantly the users never need to leave your adapt to opting to receive the notifications all of this covered on our demo that we're gonna do on the on the SDK so long story short the user net the user never leads to Leisure zap to opt into receive notifications and also never need to relieve your dab 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 the notifications so for example our push delivery knows 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 take this notification and you can send push notifications which you're already existing mobile application if you want this is called SMS module for bridge delivery nodes and we have a very extensive documentation for all those ways of receiving notifications into docs.apns.io Developers so as I said before there are there are multiple ways and how you're gonna notify your users this is up to the protocol so for example I give an example for adults Whenever there is a new proposal um liquidation alerts Whenever there is a new farming so users can start providing liquid into the liquidity pools um nfts for example whenever someone places a beat interior and ft it would be nice to get alerted by this event or if you're part of uh you're playing a a gaming you get notified into your wallet address whenever it is a new community event 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 ship the notifications and make the protocol completely agnostic and more supportive 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 of 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 uh we also were very active in hackathons so we always have hacker from bounties uh we have a push grants program I 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 transparents so anyone can see and participate into the post grants 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 epns communication contracts and those chain those contracts they are completely multi-chained they are they live on evm chains and also non-vm chains um and those are the contracts whenever you want to send a non-chain notification wherever you are a smart contracts deployed you're going to be calling the smart the APNs communication Communicator contract deployed on that specific specific chain that your smart contract is the provides 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 identification is actually correct this form is following the the standard and if it is the push it delivery knows they're gonna dispatch the notifications to the end users so the users and users are going to receive the verifications tied to their wallet addresses so that's pretty much it those are the the socials that you can reach out to us we're going to be doing some demos now and explain showing you guys how you can integration to you if you're an Accenture on 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 or 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 trick to grid notifications each in your own dab and also we 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 create a channel users they can subscribe to your channel and they're gonna get notified whenever you upload a new video epns 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.apmaster IO you click here on the left menu here on the create channel so I already on my wallet here I already have um East and I claim that the free die here but but each one if you need die or if just click on this button then you're gonna be redirected to the corresponding faucets so yeah all right I have 59 so just click on next um yeah let's create a channel name so it's gonna be [Music] um demo tutorial creating the tutorial Channel descriptions are going to be creating a channel Channel website URL that's their URL about your protocol about your websites 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 third here let's crop the image and let's create the channel so we're gonna need to um due to 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 2 to the channel That I just created to receive the notifications so I'm gonna hear 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 modifications so all I have to do is to sign a message so opting an opt-out to receive notifications they are completely gasless so non-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 just send the notifications so I 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 going to 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 send some set 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 here we have here in the bottom the preview of notification so let's send notification so just have to send a message saying notifications also gasless just sign a message and the notification has been sent so if I come here under 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 pns 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 Ripple go to send notifications folder on this folder there are multiple examples on different ways on how you can send notifications you can send notifications using the sdks sub graphs you can send manual notifications you can send notifications using the RS cathode solution called show runners 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 complete of this contract and let's explain what this contract is doing so I'm going to call this contract push dot solve any copy here so what this country is doing is we're parting importing the erc20 token contracts form open sapling we're defining the interface here for the communicator 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 we're defining here the push contract the push contract is then year C20 token which has a Constructor and upon deployment we're gonna be maintaining 1000 tokens to the deployer of this contract we have here a public address that we call epns Commanders 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 colon 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.push.org we have the communication address Communicator address deployed the multiple chains but in our case we are interested in the coven check so let's go over here and let's copy this concert 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 thoughts into 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 just 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 contracts the tip 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 prepared 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 doc.

push.org here we know there are those two helper functions that we have created just to diff to prepare the notification so the notification appears um good for the recipient let's compile our contract so I'll press command s the contract was successfully compiled so now let's deploy the contract I have selected here injected provider Meadows where indeed on the cover Network let me select the correct contract in this case the push.so contracts let's deploy the contracts let me confirm the transaction thank you the contract was successfully deployed so let's get the contract address so the contract pad is Multiplied on this uh address here so after contract deployment we just need one more step which is head over to your channel your channel they were going to be sending notifications from click add delegate now we will go 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 opt-in to receive the notifications so we're going to be sending the notification um to this wallet here but this wallet's not optimal to the channel so let's opting to the channel so first let me copy the contract address which is here let's hold a 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 the place 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 going to be transferring the tokens and after the transfers 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 inbox and we 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 show Runners show Runners is a scaffold solution that allow developers to quickly start send notifications using epns to get start just go to docs.dpns.io only 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 acquired dependencies please foreign let's open the project so as we can see here in the documentation after we need to copy the wnz.

sample file rename it to that EnV and do some changes on this and let's do this so I'm going to create here a yearly file we're gonna copy all the all the content from here I'm now gonna paste here so we're gonna do uh right same notifications on the test net environment so we can keep this variable as it is for login level let's add debug if we're a project ID and if you're a project setting a secret is not needed now so we can just set as nope and the same thing for the advanced configurations as often now we're not we're going to need to use them so if we just set them to know 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 folder called sample underscore showrunners once you once you open you see a lot of boilerplate code start 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 proof of humanity in our case we're gonna be running the hello world so all I have to do is take the handle word further folder drag and drop here on the showroom folder move yes so it is here most you do this all you had the the last change that I have to do here you go to this hello world hello world keys.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 stage environment so this voltage I already have created the channel or 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 I count 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 for the channel ID since you are sending notifications on the best net environments on the Koval Network so we're gonna add here you just leave EAP 155 column 42 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 starts 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 you go here it should loaders Express here config API prefix that's the Slash apis that you see here and this should run the slash hello world you can find it here show runner slash hello world slash test notifications and this is a post request and this is what you have here so we have to do now is just send a 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 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 going to 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 supports notification content head over to docs.dpns.io on the notification content section and we have 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 sending 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 a message and a 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 going to 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 all this table we have all the features that the SDK provides the description for each feature and the corresponding packets that you're going to 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 in this place how we can fetch the modifications from a particular user so note that we are calling the yetse 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 and we 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 for our from this wallet address on coven testnet and the environment at the staging because that's the test net I have created a simple 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 to 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 on a rake and these array is set right here so all I did is added here on the bit under user effects 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 gets 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 it beautifully on the UI so once I set notifications here notifications are site here once the application starts if we scroll down we see we are 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 play 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 Factor the notifications themselves the other 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 over here what we're doing we just take notifications iterating over then and display all the notification item and look the fictional 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 item component here and these notification items are component on this Library here so once I pass them to this component well 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 call to 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 vpns 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 don't need to go to dpns to opt-in to start receiving notifications so this example here just to recap the users can start to receive notifications right right on your dad and now we're gonna see how users can opt in to receive the notification load notifications on your Dev let me just comment all this and we'll Commit This for this um all I'm doing is just following this step all 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 opting Channel that I just copy and paste and change the sign in here to the sign that is connected into the the browser so this hard-coded here is channel ladders that I have created this sign is the user currently logged in into the browser get the user address and they 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 is a message that pops up now if I sign this message then I'll start receiving notifications from from your Channel so users never user don't need to leave your dab to start receiving notifications they can see notifications on your app and now they can also opting to receive notifications right on your app on this demo we're going to be using the APNs SDK to send notifications and also to receive notifications so for this we need to import the epns SDK and the ether.

js 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 Dottie on the 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 going to be sending a notification to this wallet address here so 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 gonna pass the notification information and most importantly the notification payload notification is going to have a title a body and this example a culture 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 call following message and here in 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 capetime formats here you pass the environment since we are sending a notification on the stage stage environment you just pass staging here and 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 or you can see the notifications uh 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 nodes into your Web Box 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 Broiler 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 it allows very easily to integrate push notifications to your platform of choice whether it's a wallet browser extension telegram Twitter Discord or any app push delivery nodes are a decentralized solution to enable web3 to web 2 bridging they allow any platform to receive communication from push storage nodes the push storage notes they are responsible for validating and indexing all communication and tying them to your word address the SNS module is a mid-level solution that eliminates all the heavy load of running a node or seeking information and gives you web hooks that you implement to start receiving notifications chats or any other web per Communication in your software it works by writing all the users 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 infrared 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 all 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 gonna 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 the SNS I'm going to be calling this web hook and what is web Hook is doing all it's doing is taking the data um person to data we're validating the the payload received on by SMS if the payload is up type notification in our particular case since we are building a telegram bot we're just gonna take the payload and we're gonna be sending 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 going to 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 gonna 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 received a 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 with 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 SNS module is what the push delivery nodes are watch the what is the push start nodes so on so forth so you guys can guide dive deeper into this there is also the GitHub repo here it's going to be a lot of links as well and also the links for our documentation