{"id":22370282,"url":"https://github.com/push-protocol/push-opt-demo","last_synced_at":"2025-03-26T16:25:13.116Z","repository":{"id":103176432,"uuid":"459195911","full_name":"push-protocol/push-opt-demo","owner":"push-protocol","description":"An implementation of opting into/opting out of a channel from a sample application using PUSH protocol frontend sdk","archived":false,"fork":false,"pushed_at":"2022-09-27T06:00:38.000Z","size":961,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-01-31T19:48:14.650Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/push-protocol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-02-14T14:30:34.000Z","updated_at":"2022-09-27T06:01:09.000Z","dependencies_parsed_at":"2024-03-27T05:26:54.588Z","dependency_job_id":"ff9953c3-8409-4323-80bd-baf7a6f4faf5","html_url":"https://github.com/push-protocol/push-opt-demo","commit_stats":null,"previous_names":["push-protocol/push-opt-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/push-protocol%2Fpush-opt-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/push-protocol%2Fpush-opt-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/push-protocol%2Fpush-opt-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/push-protocol%2Fpush-opt-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/push-protocol","download_url":"https://codeload.github.com/push-protocol/push-opt-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245690665,"owners_count":20656628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-04T19:38:13.597Z","updated_at":"2025-03-26T16:25:13.094Z","avatar_url":"https://github.com/push-protocol.png","language":"JavaScript","readme":"---\ntitle: Integrating PUSH Channel opt-in/opt-out in Front end Dapps\ndescription: Integrate EPNS into your dApp\nparent: N/A\ntags:\n  - EPNS\n  - FrontEnd SDK\n  - Notification\n  - Channels\nslug: EPNS-in-front-ends\ncontentType: guides\nroot: false\n---\n# Integrating EPNS in Frontend\n**Level**: Beginner  \n**Estimated Time**: 5 minuntes\n\n## Learning Objectives\n\n- Learn how to integrate the EPNS decentralized notification service into your React Frontend Dapp.\n- Opt-in to your channel directly from your dApp\n\n## Pre-requisites\n\n- Basic knowledge of React.\n\n## Sections\n- [Setting up the environment](#setup)\n- [Fetching the channel details as stored on EPNS](#fetching-the-channels)\n- [Opt-in to your channel directly from your dApp](#optin-to-channel)\n- [Opt-out from your channel directly from your dApp](#optout-from-channel)\n\n## Setup the react application\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n### `yarn install` \n\n#### For a react project run: `npm install @epnsproject/frontend-sdk-staging` \n\n### `yarn start`\n\nRuns the app in the development mode.\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n\n\n## Fetching-The-Channel details\n\nThe first step is to import the just installed package.\n```javascript\nimport { channels } from \"@epnsproject/frontend-sdk-staging\";\n```\n\nThen the next step is to define the required variables to make a request to fetch a channel's detail.!\n```javascript\n// define the variables required to make a request\nconst CHANNEL_ADDRESS = \"0x94c3016ef3e503774630fC71F59B8Da9f7D470B7\";\nconst [channel, setChannel] = useState(null);\n// define the variables required to make a request\n```\nAnd finally we make a request to fetch a channel's details!\n```javascript\n//fetch the channel's details\n    channels.getChannelByAddress(CHANNEL_ADDRESS, BASE_URL).then((data) =\u003e {\n      setChannel(data);\n    });\n//fetch the channel's details\n```\n**output**:\n```\n{\n    \"id\": 1,\n    \"channel\": \"0x2AEcb6DeE3652dA1dD6b54D5fd4f7D8F43DaEb78\",\n    \"ipfshash\": \"bafkreifk42oxcvn25duyfwlkewf3nco7alwa6dp2f7wninnf7l7oi66zti\",\n    \"name\": \"Rayan's channel\",\n    \"info\": \"Get latest updates\",\n    \"url\": \"epns.io\",\n    \"icon\": \"https://gateway.ipfs.io/ipfs/QmUjdbV9KGpGnhCzC7nM2cvd2yepx6QEicGCnzm9WxNxD8\",\n    \"processed\": 1,\n    \"attempts\": 0,\n    \"alias_address\": \"NULL\",\n    \"activation_status\": 1,\n    \"verified_status\": 1,\n    \"timestamp\": \"2022-02-03T22:50:05.000Z\"\n}\n```\n\n## Opt-in to a channel from the dApp\n\nNow we want to opt into a channel by using it's address as an identifier\n```javascript\n// define the variables which would be needed \n  const { library, active, account, chainId } = useWeb3React();\n  const signer = library.getSigner(account); //this could also be any entity which has a method `_signTypedData(domain, type, message)` which is capable of signing messages using eip 712.\n  const channelAddress = \"0x94c3016ef3e503774630fC71F59B8Da9f7D470B7\"; //the address of the channel we want to op-in to or opt-out from\n  const chainId = 1; //this is for the ethereum network, and can be any of out supported chains.\n  const userAddress = \"0x57c1D4dbFBc9F8cB77709493cc43eaA3CD505432\";\n// define the variables which would be needed \n\n// opt into the channel\n    function optIntoChannel() =\u003e{\n\t\tchannels.optOut(\n            signer,\n            channelAddress,\n            chainId,\n            userAddress,\n        ).then(() =\u003e {\n\t\t\t// doSomethingSuccessfull();\n\t\t}).catch(() =\u003e {\n\t\t\t// showErrorMessage();\n\t\t})\n\t}\n// opt into the channel\n\n\n// opt out from the channel\n    function optOutfromChannel() =\u003e{\n\t\tchannels.optIn(\n            signer,\n            channelAddress,\n            chainId,\n            userAddress,\n        ).then(() =\u003e {\n\t\t\t// doSomethingSuccessfull();\n\t\t}).catch(() =\u003e {\n\t\t\t// showErrorMessage();\n\t\t})\n\t}\n// opt out from the channel\n\n\n// get if a user is subscribed to a channel based on the address\nconst [isSubscribed, setIsSubscribed] = useState(false);\nchannels.isUserSubscribed(userAddress, channelAddress).then((res) =\u003e {\n      setIsSubscribed(res);\n});\n// we can use this method to automatically know if to subscribe or unsubscribe a user's account based on if it is alreadt subscribed.\n// get if a user is subscribed to a channel based on the address\n```\n\nA working example can be found at `src/App.js`\n\nHappy Building!!!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpush-protocol%2Fpush-opt-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpush-protocol%2Fpush-opt-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpush-protocol%2Fpush-opt-demo/lists"}