{"id":29040731,"url":"https://github.com/pushchain/push-frontend-sdk-staging","last_synced_at":"2025-06-26T14:36:43.464Z","repository":{"id":37100458,"uuid":"399851171","full_name":"pushchain/push-frontend-sdk-staging","owner":"pushchain","description":"Frontend SDK","archived":false,"fork":false,"pushed_at":"2022-09-27T05:58:34.000Z","size":4521,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-06-23T13:54:04.310Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/pushchain.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}},"created_at":"2021-08-25T14:35:46.000Z","updated_at":"2023-06-06T17:46:56.000Z","dependencies_parsed_at":"2022-06-24T09:11:55.584Z","dependency_job_id":null,"html_url":"https://github.com/pushchain/push-frontend-sdk-staging","commit_stats":null,"previous_names":["ethereum-push-notification-service/epns-frontend-sdk-staging","push-protocol/push-frontend-sdk-staging","ethereum-push-notification-service/push-frontend-sdk-staging","pushchain/push-frontend-sdk-staging"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pushchain/push-frontend-sdk-staging","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushchain%2Fpush-frontend-sdk-staging","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushchain%2Fpush-frontend-sdk-staging/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushchain%2Fpush-frontend-sdk-staging/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushchain%2Fpush-frontend-sdk-staging/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pushchain","download_url":"https://codeload.github.com/pushchain/push-frontend-sdk-staging/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushchain%2Fpush-frontend-sdk-staging/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262085914,"owners_count":23256541,"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":"2025-06-26T14:36:39.568Z","updated_at":"2025-06-26T14:36:43.441Z","avatar_url":"https://github.com/pushchain.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n## About\n\n  \n\nThis module is used to parse notifications from [PUSH](http://www.epns.io/). It Provides an abstraction layer\n  \n\nIt is written in typescript and requires node v10.0.0 or higher.\n\nMost features will work with nodejs v6.0.0 and higher but using older versions than v10.0.0 is not recommended.\n\n## There are two ways which the SDK can be installed\n\n### Installation for General usage\nIn order to install this SDK on your existing web application or mobile application. If you want to use the SDK in your dapp or mobile application, this is the installation method to use.\n\nIt can be installed as an npm package via the following command.\n\n`npm install @epnsproject/frontend-sdk-staging`\n  \n  \n### Installation for SDK Development\nIf as a developer, you feel the need to add more features to the frontend SDK, and wish to see your changes to the SDK's code immediately reflected, the following steps are for you.\nIn order to install, test and develop the SDK *locally*, the following steps are required to set it up for testing with a react application you have previously set up. \n```javascript\n- git clone https://github.com/ethereum-push-notification-service/epns-frontend-sdk-staging.git\n\n- cd epns-frontend-sdk-staging // navigate to the project's directory\n\n- npm install // to install all the packages\n\n- npm start //to build the project and watch out for changes\n\n- npm link // in order to test and be made available locally\n// since we intend to test the functionality, we will assume that another react application is running which wants to leverage the components from the framework\n\n- npm `link relative_path_to_react_application`/node_modules/react\n  \n- cd `relative_path_to_react_application`\n\n- npm link epns-frontend-sdk\n// then the library can be imported as normally would if installed using npm or yarn\n```\nMore information on the local testing and development of NPM packages can be found [here]('https://blog.logrocket.com/the-complete-guide-to-publishing-a-react-package-to-npm/\")\n\n \n## Usage\n\n  The SDK comprises of three modules majorly, which are: \n  - Fetching the notifications from EPNS backend.\n  - Parsing the fetched notifications.\n  - Rendering the parsed notification on mobile and on web.\n\nIt is done this way in order to seperate the different layers from each other.\n\n### Fetching and parsing notifications from the api\n#### A more comprehensive demo can be located at  `src/sample_codes/loadNotifications`.\n```javascript\nimport { api, utils } from \"@epnsproject/frontend-sdk-staging\";\n\n// define the variables required to make a request\nconst walletAddress = \"0x1234567890abcdcdefghijklmnopqrstuvwxyz123\";\nconst pageNumber = 1;\nconst itemsPerPage = 20;\n// define the variables required to make a request\n\n//fetch the notifications\nconst fetchedNotifications = await api.fetchNotifications(walletAddress, itemsPerPage, pageNumber)\nconsole.log({fetchedNotifications]);\n//fetch the notifications\n\n\n//parse the notification fetched\nconst parsedResponse = utils.parseApiResponse(fetchedNotifications);\nconsole.log(parsedResponse);\n//parse the notification fetched\n\n```\n\n### Rendering the parsed notification on the web\n```javascript\n\nimport { NotificationItem } from  \"@epnsproject/frontend-sdk-staging\";\n\n// This is used to render the text present in a notification body as a JSX element\n\n\t\u003cNotificationItem\n\t\tnotificationTitle={parsedResponse.title}\n\t\tnotificationBody={parsedResponse.message}\n\t\tcta={parsedResponse.cta}\n\t\tapp={parsedResponse.app}\n\t\ticon={parsedResponse.icon}\n\t\timage={parsedResponse.image}\n\t/\u003e\n ```\n \n ![Web app render](https://res.cloudinary.com/xand6r/image/upload/v1632235676/Screenshot_2021-09-21_at_15.44.49_s6vfta.png)\n \n ### Rendering the parsed notification on a react native mobile application.\n ```javascript\n import { NotificationItem} from  '@epnsproject/frontend-sdk-staging/dist/native';\n \n\t\u003cNotificationItem\n\t\t\tnotificationTitle={parsedResponse.title}\n\t\t\tnotificationBody={parsedResponse.message}\n\t\t\tcta={parsedResponse.cta}\n\t\t\tapp={parsedResponse.app}\n\t\t\ticon={parsedResponse.icon}\n\t\t\timage={parsedResponse.image}\n\t/\u003e\n ```\n\n ![Mobile app render](https://res.cloudinary.com/xand6r/image/upload/v1634473272/Screenshot_2021-10-17_at_13.20.49_ig1j3y.png)\n\n## Channel methods\n\n### In order to implement signing, we take advantage of [EIP-712](https://eips.ethereum.org/EIPS/eip-712), more details on the `signer` parameter can be found [here](https://eips.ethereum.org/EIPS/eip-712), you can also take a look at our working [example](https://github.com/ethereum-push-notification-service/epns-frontend-sdk-staging/blob/main/sample_codes/loadNotifications/src/App.js)\n```javascript\nimport { channels } from  \"@epnsproject/frontend-sdk-staging\";\n\n//get channel basic info\nconst details = await channels.getChannelByAddress(CHANNEL_ADDRESS)\n\n//check if user is subscribed to channel\nconst isSubscribed = channels.isUserSubscribed(account, CHANNEL_ADDRESS)\n\n//opt into a channel\nchannels.optIn(\n\tsigner,\n\tchannelAddress,\n\tchainId,\n\tuserAccount,\n\t{\n\t\tonSuccess: () =\u003e  // do something after a successfull subscription, like bring up a modal or a notification\n\t}\n);\n\n//opt out of a channel\nchannels.optOut(\n\tsigner,\n\tchannelAddress,\n\tchainId,\n\tuserAccount,\n\t{\n\t\tonSuccess: () =\u003e  // do something after a successfull unsubscription, like bring up a modal or a notification\n\t}\n);\n```\n\n### Using the `onsubscription` modal\nThis is a modal that can be used to come up immediately after a channel has been subscribed to, its main purpose is to notify the subscriber that they have several options of recieving notifications from EPNS\n\n![image](https://res.cloudinary.com/xand6r/image/upload/v1647710351/Screenshot_2022-03-19_at_18.16.48_i40rra.png)\n```Javascript\nimport {\n  OnSubscribeModal,\n} from \"@epnsproject/frontend-sdk-staging\";\nconst [modalOpen, setModalOpen] = useState(false);\n\nreturn (\n    {modalOpen \u0026\u0026 \u003cOnSubscribeModal onClose={() =\u003e setModalOpen(false)} /\u003e}\n)\n```\n### Customising the onSubscribe modal\n![image](https://res.cloudinary.com/xand6r/image/upload/v1647710738/Screenshot_2022-03-19_at_18.25.08_tmo2ch.png)\n\n- Editing the entire modal itself can be done via adding styles to the `modal` class\n- Editing the heading section can be done via adding styles to the `modal__heading` class\n- Editing the body/content section can be done via adding styles to the `modal__content` class\n\n##### However if you wish to create your own modal from scratch and just need the assets needed to make a similar modal.\n\n```Javascript\nimport {\n  LINKS,\n} from \"@epnsproject/frontend-sdk-staging/dist/src/web/components/subscribemodal/constants\";\n```\n\nSample of how the data looks like\n![data](https://res.cloudinary.com/xand6r/image/upload/v1647711029/Screenshot_2022-03-19_at_18.30.13_vdfsea.png)\nUsing this data, you can proceed to create your own modals\n\n\n## Markdown Reference\n\n#### This section contains the several markdown formats available and how to use them. They can be viewed live by running the react application in `src/sample_codes/parseNotificationMarkdown`.\n\n![Interactive markdown parser](https://res.cloudinary.com/xand6r/image/upload/v1632236024/Screenshot_2021-09-21_at_15.53.29_p0lptf.png)\n\n\n| Markdown  | Styling Effect | Use case\n|---|--|--|\n| \\n | New line | For Segregation\n| [u: textcontent] | Underlined, Red Colored Text | For URLs\n| [d: textcontent] | EPNS Primary colored Text | For colored text\n| [s: textcontent] | EPNS Secondary colored Text | For colored text\n| [t: textcontent] | EPNS Tetiary colored Text | For colored text\n| [e: textcontent] | EPNS Secondary colored Text | For colored text\n| [w: textcontent] | White colored Text | For colored text\n| [mg: textcontent] | Medium grey colored Text | For colored text\n| [dg: textcontent] | Dark grey colored Text | For colored text\n| [b: textcontent] | Bold Text | For Emphasis\n| [i: textcontent] | Italics Text | For Emphasis\n| [bi: textcontent] | Bold and Italics Text | For Emphasis\n\n\n\n## Usage Guide when integrating `EmbedSDK` from scratch in a client dApp\nFor using the `EmbedSDK` in your app, you can first (*skip this if already installed!*)\n\n\n\n    yarn add @epnsproject/frontend-sdk-staging\n\nthen, In `App.js` of your App entry point\n\n\n    import { EmbedSDK } from \"@epnsproject/frontend-sdk-staging\";\n\n\nadd in HTML/JSX the below HTML tag -\n\n\n    \u003cbutton id=\"sdk-trigger-id\"\u003etrigger button\u003c/button\u003e\n\nor any component with the ID ***sdk-trigger-id*** \n\n***Make sure the ID you give to the \"button\" is same as that of the targetID you pass to the init() below*** \n\nAfter the wallet connect happens in your app flow trigger the below code snippet.\n\n**Note:** You have to have the wallet connected with an account to execute the below code because internally the SDK calls the EPNS `get_feeds()` API which needs the account address. You will see notifications if you have opted-in to a channel using [EPNS](https://staging-app.epns.io/)\n\n```\n  useEffect(() =\u003e {\n    if (account) { // 'your connected wallet address'\n      EmbedSDK.init({\n        headerText: 'Hello DeFi', // optional\n        targetID: 'sdk-trigger-id', // mandatory\n        appName: 'consumerApp', // mandatory\n        user: account, // mandatory\n        viewOptions: {\n            type: 'sidebar', // optional [default: 'sidebar', 'modal']\n            showUnreadIndicator: true, // optional\n            unreadIndicatorColor: '#cc1919',\n            unreadIndicatorPosition: 'bottom-right',\n        },\n        theme: 'light',\n        onOpen: () =\u003e {\n          console.log('-\u003e client dApp onOpen callback');\n        },\n        onClose: () =\u003e {\n          console.log('-\u003e client dApp onClose callback');\n        }\n      });\n    }\n\n    return () =\u003e {\n      EmbedSDK.cleanup();\n    };\n  }, []);\n```\n**Init Config Options**\n\n| option | type | mandatory | remarks |\n| --- | --- | --- | --- |\n| `targetID` | `string` | yes | can be any string but has to match the ID given to the trigger button in the HTML/JSX |\n| `appName` | `string` | yes | your app name e.g. - 'appName'  |\n| `user` | `string` | yes | public wallet address e.g. - '0x1434A7882cDD877B458Df5b83c993e9571c65813' |\n| `viewOptions.type` | `string` | no | default 'sidebar', can give 'modal'  |\n| `viewOptions.showUnreadIndicator` | `boolean` | no | will show the unread indicator  |\n| `viewOptions.unreadIndicatorColor` | `string` | no | color for the unread indicator e.g. - '#cc1919'  |\n| `viewOptions.unreadIndicatorPosition` | `string` | no | default is 'top-right', other possible options - 'top-left', 'bottom-left', 'bottom-right'  |\n| `headerText` | `string` | no | any header text  |\n| `theme` | `string` | no | default is 'light', can give 'dark'  |\n| `onOpen` | `function` | no | callback you want to trigger when the modal/sidebar opens  |\n| `onClose` | `function` | no | callback you want to trigger when the modal/sidebar closes  |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpushchain%2Fpush-frontend-sdk-staging","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpushchain%2Fpush-frontend-sdk-staging","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpushchain%2Fpush-frontend-sdk-staging/lists"}