# EPNS 🛠 How to add web3 notifications in your application - Harsh Rajat - Channel: [ETHGlobal](https://streameth.org/ethglobal) - Date: 2022-10-09 - Duration: 31:32 - Topics: Science & Technology - Watch: https://streameth.org/watch/yt-R1xbMIp4TFo - YouTube: https://www.youtube.com/watch?v=R1xbMIp4TFo ## Description Welcome Harsh Rajat from EPNS for a workshop titled "How to add web3 push notifications to your app". ETHOnline is our biggest event of the year! Collaborate with thousands of developers and creatives from around the world and win over $300k+ in prizes! We're bringing in 30+ of the biggest teams in web3 to give you access like never before. Learn from ecosystem leaders and build your biggest ideas as the merge nears reality. The future of Ethereum is being written right now, and it's time to make your mark. --------------------------------------------------- Follow us: https://twitter.com/ETHGlobal​ Check us out: https://ethglobal.co​m Email us at: hello@ethglobal.com ## Transcript [Applause] [Music] hey everyone welcome uh thanks for taking the time to join us we have parish here from epns he's gonna teach you how to add web3 notifications in your application and i'll let you take the stage if there's any questions in the meantime feel free to pop in the chat and we can take them towards the end thank you thanks hey everyone really excited to be here uh hopefully my screen is visible so we can get started so a little intro about me i'm push project lead and foundation push notification service just like you guys we essentially started from youth global acme 2020 uh that's when we invented uh uh communication for web3 and we are going to look deeper into it very quickly while we are called the theme push notification service so we're not just ethereum in fact the vision is to be on every uh victory uh blockchain uh possible uh and of course we started that effort with polygon as well so we are going to see how to create uh ensign notification from polygon as well and uh of course we support uh even non ethereum blockchains also so yeah and we are not just push notifications we are the three communication staff more on that later so let's get things off all right so yeah uh i mean the first thing i wanted to talk about is by notifications but in essence if you just think about it everything in your virtual life starts with a notification uh we get up in the morning we look at our phones and we see notifications no matter from what app it is but that's there too uh in essence we see our important emails and an important workstar true notifications uh slack messages and everything else the country notifications are uh banking that we do uh or everything financially that we do we see it through notifications uh uh any paypal and payment that we do we see it through notifications amazon delivery again that's notifications and social media that we go to uh on webtoon that is again triggered by notifications we get to know who liked our post we get to know what our post is trending and so on and so forth even when we are chatting on discord or twitter or whatsapp we are not actually chatting uh on that platform we are chatting through notifications so if i'm going to essentially uh do a whatsapp or teaching to uh ith global i am not actually chatting what i'm doing is uh i'm sending a notification out to them through which they are informed that something important might have occurred and they might want to respond to my chat and then they come and then they basically carry the interaction forward so yeah i just wanted to make that clear that everything starts in with uh notification but yeah that's just where to inventory communication is in stone age that the users are actually audit addresses and there was no communication primitive that was built for them and because of that there was this huge gap of uh critical info drop that occurred uh whether it was uh liquidations whether it was important governance proposals whether it was even nfts and unfps getting outbidded or anything else even something of change such as a contract moving from b2 to v3 you don't get to know about it because there was no communication stand that was built for battery and that is what we started building back in each global uh 2020. the vision was that once we perfect the basic primitive notification for web3 after that we can uh start releasing lego blocks for all the stacks of communication including chat video and account so yeah that's a missing piece how did we solve it well in essence we created a decentralized communication protocol that allows any smart contract any data any backend any uh protocol or any vector services as well to send communications that are tied to your wallet address these communications uh that are tied to your wallet address are sent through our open network just like ethereum so any crypto wallet can just happen to your communication and show it out to you of course they are encrypted so they are secured as well uh but yeah the idea is that the three user names are shared and therefore communication needs to be shared uh these notifications be started with notifications so of course i'm going to talk about that these notifications are dynamic uh the idea is that to compete with or to build the next twitter to build the next facebook you need uh really really extensible notifications and that's what we did so it doesn't matter whether notifications are stored ipf is the smart contract wherever uh the nodes uh the validated and indexed nodes of us can pull it out and can basically validate and index it to a particular wallet uh it doesn't matter if the notification has call-to-action images or even encrypted transaction in the future everything is supported and of course most of the time is gasless or or in fact all of the time it's gasless for the users to opt in to your protocol to so that your protocol can send notifications out and from there on uh every everything just becomes like a huge huge uh uh ui and ux improvement so i'm not gonna elaborate because i already did that uh but yeah dao's device and ft meta was uh even uh something has a web 2.5 the coin disc all of them now they need notifications we are actually working with a lot of protocols and ethereum and now we are launching on polygon so we are working with the unisa of okay or we are powering communication for rv uh bitcoin polygon and uh decentralized a lot of other uh cool protocols we have uh send over 15 million notifications from the time we launched in january of this year and we have over 60 000 uh subscribers so basically that free notifications are live and they're battle tested now all right so yeah that's what they said we are working with all of these cool protocols and yeah let's talk a little bit about bounty so if you're building on epns protocol or even not we just like to love uh we just love to help hack this out so whether you're building or not just come talk to us on our channel but if you are building off to school hackathon bounties of youtube uh we have one more surprise for you like a surprise nft drop it's a layer nfp which is held by apology and defy that and a lot of other cool folks uh the best hacker will probably uh will mostly get that and yeah one last thing if you are going to continue building after the hackathon and if you need support for your project uh our governance and push down his life so come apply uh for the 1 million dollar grant and we would love to help you out build cool things all right enough talk let's do the workshop so i am i had a video also so let's go [Music] all right so workshop time uh i'm going to essentially open a few tabs over here i'm going to of course cheat a little bit but i'm going to walk you down how to get notifications going so the very first prerequisite is for any protocol who wants to send notification is to create a channel a channel basically allows people to send the notifications out uh it's a channel that is created on the protocol you can create it by interacting with the uh ppnsco smart contract but the better way would be to uh come to staging.epms.io like i did and create a channel uh another prerequisite is because uh this is a cohen test network so you do need coven to create a channel uh you do need uh covent die as well we have faucets for that uh and in case you're creating a multi-stream channel of course you follow on uh channel also uh but yeah uh uh polygon uh faucet as well but yeah in case you have trouble finding get out just uh go to epns dot io uh straw all the way down you will see this code join our discord and just bug one of our cool community uh managers and they will make sure to provide it up to you or just call it out on the discord channel all right so let's start by creating uh channels so uh this is channel uh charlie we will call this address channel charlie i already have the editon but i'm just going to walk you down like the steps on creating the channel afresh so i'm going to go channel creation uh i already have died in this channel but yeah this is a faucet so you can get that from here uh let's just quickly set up our channel now we are going to create uh a multi-change channel so uh the channel name is eat online because it's multi-chain you can create a ethereum channel as well in case we're working on lithium but because we are going to create it on polygon we have to put this uh then the next thing is for polygon we have to uh put our channel in this address channel alias address is nothing but uh the address from which you want to send notifications on the other blockchain uh i'm putting the same address as the address for ethereum but you can do it differently as well uh of course the private keys and the api keys that i have i already assume that it's dogs but yeah we will basically be using some of it to see how notifications work so yeah once that info is done the next part is just dropping the logo dropping it and creating the channel you will need to sign two transactions transactions will essentially be one to approve the drive and then after that uh the channel details are essentially uploaded to ipfs that ipf is sent to a push note so then that push push runs basically pin that ipfs out so that is why it takes usually from five to ten minutes to create this channel uh if it doesn't uh uh happen very very soon we will probably switch to a different channel which i have already created and it's always recommended to create a channel already all right i think while it's waiting for the confirmation the next thing we'll do is we are going to set up receiving or set up testing sent notification so it's a protocol so any crypto wallet or any type of content can do it but for this demo we are just quickly going to go ahead and download the vpn this is teaching protocol extension we are going to pin this in and we are going to sign up so as i said uh i have cheated a bit so we have a use of bob who is going to sign up and it's as easy as us entering your wallet address and we're done now you can receive notification on chrome extensions whenever the protocol who you have opted into uh decides to send it out i also uh downloaded our staging app and uh what i have also done is uh i have uh signed us above over here now just so that uh people just so that we can see notifications being platformed as well all right returning back so uh we basically have done both the transactions but because this is a multi-chain channel we have to do one more transaction and this time we have to switch the network and do that transaction because it's polygon so we have to switch and we have to signal to the smart contract that our channel uh uh that we created on ethereum we own uh whatever channel polygon at this week is so that's what we are going to do channel charlie doesn't have uh enough uh polygon uh now or enough matic uh tokens so we are going to go to faucet and we are going to essentially uh make sure that the channel charging has enough magic tokens hopefully it will not take that much time so meanwhile uh what we'll do is yeah meanwhile where before channels are we get some token what we are going to do is we are going to look into uh some of the ways by which we can receive notifications so when we are sending notifications we are essentially sending uh our identity to the push note uh identity is basically a format that describes from where the notification payload is coming and the rules on how to interpret it uh the best way to learn about what an identity is and how we are utilizing it or what the notification identity is and how to utilize it is to go to docs and go to notification standard and just read through notification basics it's very simple so and most of the time the sdk or the dap or the smart contract interaction will uh extract that away from you but just in case uh you are curious you can learn more about it in case you are more curious you can go to notification standard advanced and learn about the composite blocks as well all right coming back hopefully uh matic would be here ah it's here so now we can start the verification process for polygon we are not going to wait for it because of course uh uh it might take some time so instead what we are going to do is uh we are going to switch from channel charlie to channel alice which uh i have already created so i'm just giving it a little bit of time oh it's already done so yeah we don't have to switch then channel charlie is who is the guy who's going to send the notification out so as i said notifications are supported on any platform so let's just start with deploying or enabling notification on your smart contract again the best way to go the oxford dpms dot io slash developers uh sending notifications we want to do from smart contracts let's look at that it's as so this is a normal erc20 contract that we have what i'm going to do is first i'm going to import that interface of eps form and then i'm just going to call that interface out wherever i want the notification to be sent and one thing you will notice like what we are doing is we need to have the channel address of ours uh passed as a channel the recipient is the two address that we pass uh it can basically depend like notification can be subset broadcast or targeted so it doesn't matter you if you want to send notification out to a whole now a lot of users you can use broadcast like it will be sent out to everyone who is subscribed to your channel if you want to send it out to subset you basically select subset and if you want to basically send out to just one person you can target it uh i do realize that i haven't shown you how these notifications come so before sending it via smart contact let's just quickly send it to user bob who signed in from the manual uh that interface so targeted which basically means i'm just sending it to bob i'm going to put his wallet address notifications are content independent which basically means that i can play around with notifications a lot so let me put the subject we are going to also put a notification message we also support content markdown so it's just something to keep in mind uh call to action i also want to put that and we give you all uh this is basically a composable content mark now so in case you want to extend it you can do it uh we are going to open up improvement proposals very soon to do that but in case you want to see the uh content markdown right now you can just go to developer design notification content go to notification content and follow the previous markdown that works so yeah let's just try sending the gas list notification out uh right from here so let's uh i mean in the background a lot of things uh basically happen but let me do one thing let me refresh uh because i never refreshed after my channel was created so go into targeted go to subject enable subject network media enable call to action and just trying to be superhuman and filling all the details out so it changed on that occurs and uh yeah my notification privacy setting is getting boxed over here uh all right subject is this call to action let's not i mean we can probably try to do the reaction as well quick about it so of course you know right now because i'm sending notifications something no nothing occurred it's basically two dead stops so it was working uh previously as well so let me just cancel send notification again metamorphosis option uh i have to sign this content payload which basically means that the reason is getting sent by eip712 then that notification payload is getting sent uh to the push node and very shortly it's going to be picked up as well and it's going to be shown so i think it's already picked up uh but yeah it's not shown because of course i forgot that i created this channel but uh i haven't uh had user bob opt-in to this channel and unless user bob opt-in to this channel uh usable will not receive the notification so let me just do very very quickly and opt-in that opens up the meta mask again guess less often and yeah that should be it user bob is all ready to receive those notifications let's come back to channel charlie channel charlie is a little uh slow in sending notifications but hopefully uh he can make up for the lost time so he eat online hackers notification message notification media and call to action and yeah i do need to put bob address because it's a targeted notification send notification it will open the metamask sign it again and this time once it goes to push note it will make its way to the mobile app not only that it will make its way to the chrome extension very cool notification and it will make its way to usable uh address as well so this is manual notification uh let's return back to dmx so uh after manual let's try to see how to get notification done for the smart contract i'm going to cheat a lot now uh but yeah in a sense i'm going to go to examples yeah notification where smart contract and we already have a way to send a notification out so what i'm going to do is go back uh i have already imported that interface what i'm going to do is now i'm going to import my epns form address this is different for different uh blockchains the best way to see uh i mean because we are going to do it for polygon so we are going to go open again the dogs and the smart contact address and we are going to take the polygon address and go back put it in vpns.com address make sure the cpns com address is reflected over here the next thing we need to do is uh we need to essentially say like from what channel the notification is coming to is basically the token uh two is basically the receiver to whom the notification is going and then we form our identity zero essentially means minimal standard we have a lot of standards you can find out uh about it by going to talk so sending notification notification standard again uh i'm going to cheat a bit so i'm going to go ahead and make it a little cool the token transfer so we're going to clear put two helper functions these two other two function helps me transform an address to a string and uh the other helper function helps me transform a number into a string uh once i've added this i'm going to change my string to instead of a bolding string which is sending a notification to tree which is a targeted user with just saying normal title and body instead of that i'm going to replace this out and now i'm going to send a transfer so whenever a transfer is happening the person who is going to receive the transfer will get a load very quickly i am going to deploy this out on the polygon test net uh hopefully this is okay so i need to switch to channel charlie connect it and then deploy it out so hopefully soon yeah and yeah just wait for the deployment to be done once the deployment is done essentially your smart contract has notifications enabled you just have to call send notification out with the proper identity to and with whatever logic you want uh the next step is like once you contract this device you need to go back uh to your channel and because this smart contract is essentially a new uh address that will be sending notification on your behalf because of that you need to add the smart contract address as a delegate so i'm going to do just that i'm going to confirm it out and the delegate should be added very very soon and should be reflected at the same time what i'm going to do is because it's a erc20 contract so i'm going to import my token and now i am going to send a lot of tokens to lucky user bob uh let's just give it a refresh because we want things to be done faster and uh hopefully i'll be yeah delegate has added so now all i have to do is go over and we are going to send around 80 push to bob so this is just a smart contract now which once executed should be able to send bob a notification that they got the erc token transfer but not only token transfer it solves a lot of things like on-chain governance proposals you can use that you can now send notifications when on-chip governance proposal is coming and you can send it to almost everyone ah it you can also use this for basically uh nfp transfers and so on so i'm just going to see if user charlie has received it out yet not yet actually we're not in users chinese so yeah i i did this like a couple of times guys i swear uh but yeah let's see what is the issue so the contract is deployed let's try to [Music] send uh some more push to use the charging hopefully this time or usable and hopefully uh this time uh usable will be pick it up sent and all right i i think i might have missed a step in case it doesn't come even right now but uh in case it doesn't come like we have tested it a lot of time so it definitely works uh and uh our team is only to essentially uh let you know exactly how and uh what part to debug uh let's just uh switch i mean because we are running out of thing so i just wanted to quickly tell you that uh i mean smart contract is not the only way by which you can send notifications out you have uh we have seen the gas list uh we have here this sdk as well showrunners is essentially the fastest way of sending notifications by our backend uh we also have sub graph but uh the sub graph uh has essentially sunseted oven so uh heads up uh we are deploying that on gorilla and that will work uh then we have receiving notifications as well uh what we have prepared for you is actually a entire repo of examples which you can go to ethereum push notification service and uh push for hackers and you can see but those uh uh those examples basically have the operational boilerplate and the modded boilerplate so you can see how to uh enable notifications for your web 2.5 platform as well as well as front-end integration so you can basically just do opt-ins or receive notifications right on your content uh i think i'll probably because i ran out of time so i'll probably put out uh entire workshop video very very soon on the discord channel which covers everything and yeah uh going back uh i mean we are available for all the questions and answers and we are available on discord in daily so reach out to us in case you are building something cool with epns or in case you are even building something cool and will require and yeah we are running out of time for this workshop unfortunately but feel free to follow up over discord it's sponsor dash apns and harsh will be there to answer a question thanks everyone awesome thanks everyone