Push Protocol Workshop - ETHGlobal Bangkok 2024

yeah hey everyone GM so let's get started with the PO protocol workshop and this Workshop I will basically be telling about push how you can use push how can you use our sdks and basically what are the use cases on which you can build so yeah let's get started so the first thing we want to basically see out is what is the problem in web3 uh and we are going to talk here like about the very uh low problems not anything which is very much complex so this will be like a beginner friendly Workshop so any action in web3 uh uses a lot of interactions if you have used any website you need to create your own wallets you need to have pass your own seeds and you need to store them securely right we have we all have done this uh same goes with uh the user uh apathy that a user need to know everything about web3 uh once he's getting into web3 even now if we have like AA is chain abstraction but these are not up to the mark uh the next thing we we have is lack of communication so let's try to explore that more so Dows are not able to talk uh I I'm sure uh folks here are a part of any da but the moment any da proposal happens you have to go there and see if there's a new proposal I have to vote uh it is not the other way around where a dow comes to you and give you all the uh things which you need or all the proposals which you need same goes with Dy how many hair just got liquidated after something crazy happened in the market and you didn't even get to know that yeah this happened because it was just like in in a minute of 5 to 10 minutes and it could have been saved if you got notified that hey you are about to liquidate or same goes with nfts uh let's suppose that a very famous uh uh nft guy uh just posted his nft and were not able to take part in the airdrop because you didn't know that so these things can just be targeted out using push so how how can push help you here let's get started with that so it all starts with a notification I think all of us we from a web to background we kind of have like notification for everything you get up in the morning you get notifications from your famous social media apps you get notifications from your food apps Etc the same goes with web3 web3 to needs notifications so that's what we are building and even in notifications we have like an open communication layer that means anyone can join into the network we have notifications which are Dynamic that means you can change those notifications according to your requirement even if you want to have some kind of ctas into build and even if you want to have any images into your notifications that can also be done the next thing is these are multichain so it does not matter if you're building on ethereum you're building on arbitrum optimism uh these can be multi-chain gas is of course if you are sending a 100,000 notifications per day you don't want gas to be there and platform agnostic is something which we are working on so you can send out notifications on mobile apps on web apps on even like as a mamas snap so that it is interoperable and can be seen everywhere so that's that's basically about notifications but we also have our chart systems so let's let's discuss about chart so we we all here are from web 3 but I'm pretty much sure that you might have joined like a 100 telegram groups or even like 100 Discord servers so mainly currently also in web3 uh the communication system or the way we interact with our community is using the web2 systems and push protocol wants to change that so what we have is push chart that means you can chart with any wallet and you can integrate it into any DB these chart is completely decentralized we don't hold it on our private servers or anything data is so decentralized I believe on ipfs we even have like group group chats Etc so let's suppose you are building for your community and you want to have private groups you want to have public groups you want to have groups which are gated using nfts you want to have uh gating using uh erc20 tokens so you can can do all of that using push chat and it's pretty easy and I I will just do a speedrun here where I can show you how you can do that uh but yeah it's it's like a matter of 5 to 10 minutes I I believe so yeah let's get started on that so we will go to our uh we will go to our push dab and let's try to see from there so let's do our demo of notifications first so one of the things which you need to do to send out a notification is create a channel on push creating Channel is quite simple what you do is you add a channel name you add a channel category some description you upload a logo and then you stti some fees for creating a channel it's like 50 push tokens to uh like to as a fees but even in this hackathon if you want to use like a staging environment or test net uh you can just do that and you can get the test tokens for free of course so I'm not going to display here how you can create a channel but usually just follow this route that follow our uh dogs and so but it's quite simple what you are going to see here is an example of how you can use push channel to send out notifications so let's suppose there's a uh uh crazy Market going on and you checking like what's the price of e like every 5 to 10 minutes so you are just going to coin market cap or coin Gecko and just checking the price what if you get notified about the price of ethereum like every 5 minutes or according if etherium went up 3% in an hour or went down 3% in an hour or so we we have something which is called price tracker and I will just going to uh I will just demo that out so yeah let's let's jump into the code okay uh yeah yeah I I believe this is Vis visible now but I have like a very simple script here so what I'm doing is I have like a ether scan API and it does nothing it just gets you the price of ethereum and uh console logs it so let me just run it out to show you so yeah we are running the script and say uh see we got the result uh what the E what is the E price in usdt now what we want to do here is we want to basically add push notifications to it so yeah let's let's try to do that what we will do is we will go to our docs uh it's push. or/ dos if you if you want to uh go to that and the first thing which we need to do is initialize a user so that's step number one so what I will do is I will just copy paste this uh let's just copy uh the initial ization part and I will just drop it here uh and we'll edit it later so pasted it here and yeah let's change this so this is the part where we kind of initialize a push user but I will just paste this data here now uh as you can see uh we we we don't have a signer but let me just add a signer here so import e and let's create a signer first yeah and just for the uh private key I already have like a private key in my EnV uh so you create a channel and then you get it private key just export it out from the metamask and then you are just good to go so I have the the uh private key here now my user is initialized and I can pretty much see that here what I need to do here is I I will just send out a notification now so go to uh send notification and you can just see it's a very simple function call uh I will just drop it here and I will console log this out and let's give it the E price notification e price price R and let's change it to our Dynamic one so let's do this and yeah uh I just need to grab the uh result. response from here so yeah this can be response. data uh res USD yeah and let's save this and this should just send out a notification on our environment so as we can see we are waiting and yeah now we have sent it out and even if you want to see that notification out it should be visible in our inbox so yeah here we can see uh we have got the notification for E price I've been testing it uh for a while but yeah it's that simple so so you can do the integration in just like 5 minutes and now we will just do uh we will see how you can basically integrate push chat so let's move towards the push app and let's go towards chat and where you can see that we have like a system here that you can just search for any address and even like if somebody tries to chat with you it first lands in your request box so you first need to accept and then you can chat in this example I will basically show you how you can create a box in like 5 minutes uh using push chart but even if you are looking for group charts uh you can basically create a group uh add a group name add a group description add any kind of uh gating in your group whether you want to do an erc20 gating ERC 721 gating Etc uh but yeah let's uh go with a demo for the pushbot so what I'm going to do is I I have like a address uh and let me just search it out yeah so I have this address which is uh 0x 2D and basically I will try to chart with this particular address so yeah uh I have like basically I charted this before but let's let's try to do The Bard demo as of now uh so let me go to the index.js let me increase this yeah now it's good so again this is a very simple script as you can see what we are doing is we are just taking a signer from ethers and this is basically the private key of this particular address which I'm going to create a bot out so yeah this is quite simple and let's see from our docs what we need to do to send out uh a push chart but we will go to the docs we will explore out the section for push uh chat so we will go to chat dogs first step is initialize your user so I I'm just going to copy paste that and yeah so we just uh imported like push API from our dogs or from our SDK and we are using it out so we have the user initialized and what I want to do is if the bot receives any message he just he just returns out the response so for that first you need to do is you need to uh stream your charts so let's let's search for stream charts option here yeah there it is uh so I will just copy paste this and this is uh where we kind of just listen for the socket events so we pasted out all of this and if you want you can just understand it but I'm basically doing like a speedrun here so you are listening to like different uh events here one is for chart you are listening for notifications connection Etc uh what I will do is I will make it uh much more simpler so on connection we will receive just a socket connection on on receiving any chat message we will just log that message out uh and same for like all of the above but yeah at this point let's start our server so we'll do just an npm start and and as you can see our push server is kind of connected uh let me also just see which environment I am on so let's do prod so we I will display this out on the our production environment but I initialize my user on production I am streaming the charts and if I this bot basically uh get any chart it should just consult log here so let's try this out our bot is ready and we should see first like this is connected but on our production dab I will just try to send a message hey so yeah I think it went uh let me do it again then yeah uh see uh we have like received the event here so what I typed to the bot was hey uh and we returned it out on on basically our back end but what we want to do now is whenever we receive a message we just return out something else so what we do is if um message so you can see the message object here right so you just do if the message.

origin equal to other so message. origin equal to other is someone else is sending the message and here what I want to do is I want to uh revert a message so I want to return back or uh basically I want to reply so what are what we are going to do is go to our dogs uh search for how you can just send out a message click on send message uh copy this thing out and let's just paste it here so what we are doing it uh we will be sending out a message where we want to send it is basically uh we want to rever back to the sender so it will be like message. fromom and yeah it is of type text but we can just change the text and do it how may I help you yeah so let's do this uh save this out and yeah our server is running fine now let's try to send out a chat message hey so we are sending out this message and at a later point of time we should rece we should just receive out another message so yeah even if you look at this we received out a message and uh and this is the message we returned back to the user so this origin self means that this was the message which was sent by the bot itself yeah and even you can see it here or maybe you can see on the refresh but yeah that's how it really works so in a matter of like five to 6 seconds you can just see how uh push chart or push bot can be integrated out let me unlock my profile yeah I will just reload this and at the very end if I should have like a message of heybo and yeah how may I help you so this is how you can just integrate I have done this on push chart you can do it on your UI you want to build a telegram out go for it you want to build a Discord out go for it you can do it in group groups you can do it as a one to one chatge support groups can be one of a like good reasons for it and yeah basically the uh it is endless right you can't do anything out with notifications you can't do anything out with chats so yeah I think I'm pretty much done with my workshop so if you have like any questions I'm up for it yeah no yeah sure sorry you can do it yeah yeah okay you don't need actually a server you can do you do you can do it on a UI I've just displayed it out how you can do it if you have a backend server but you can absolutely go for a UI you can even use a UI components you can do this on a react or a white or a next app if you want is there like dasb I mean is there a dashboard through like a control those push notifications for mobile devices so you can basically see out notifications on rap you can can see out on metamask using push snaps we even have like browser extensions and even we have like UI components which you can directly import on your UI thank you yeah thank you so much even if you want to interact with me I will be here uh around here or around the booth So yeah thank you everyone