{"id":29040659,"url":"https://github.com/pushchain/push-sdk-starter-kit","last_synced_at":"2025-06-26T14:36:35.368Z","repository":{"id":103176444,"uuid":"513201352","full_name":"pushchain/push-sdk-starter-kit","owner":"pushchain","description":null,"archived":false,"fork":false,"pushed_at":"2023-04-25T06:38:15.000Z","size":976,"stargazers_count":3,"open_issues_count":1,"forks_count":6,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-06-23T13:54:07.722Z","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":"other","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":"license-v1.md","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-07-12T15:44:40.000Z","updated_at":"2023-09-11T11:29:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"5703acb7-cb9b-4b66-a48f-22a9d2df579d","html_url":"https://github.com/pushchain/push-sdk-starter-kit","commit_stats":null,"previous_names":["push-protocol/push-sdk-starter-kit","pushchain/push-sdk-starter-kit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pushchain/push-sdk-starter-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushchain%2Fpush-sdk-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushchain%2Fpush-sdk-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushchain%2Fpush-sdk-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushchain%2Fpush-sdk-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pushchain","download_url":"https://codeload.github.com/pushchain/push-sdk-starter-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushchain%2Fpush-sdk-starter-kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262085898,"owners_count":23256540,"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:32.402Z","updated_at":"2025-06-26T14:36:35.347Z","avatar_url":"https://github.com/pushchain.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PUSH-SDK starter kit\n\nThis starter-kit is meant to showcase developers on how to use the PUSH SDK packages - \n\n* [@pushprotocol/restapi](https://www.npmjs.com/package/@pushprotocol/restapi) Provides access to PUSH backend APIs.\n* [@pushprotocol/uiweb](https://www.npmjs.com/package/@pushprotocol/uiweb) Provides React based components to show Notifications, Spam, SubscribedModal etc for dApps.\n* [@pushprotocol/uiembed](https://www.npmjs.com/package/@pushprotocol/uiembed) Provides vanilla JS sidebar notifications for any  dApp.\n\n* [@pushprotocol/socket](https://www.npmjs.com/package/@pushprotocol/socket) Provides a socket client to connect with Push Websockets\n\n### CRA-Typescript\nThis particular kit is built out using CRA, Typescript. The SDK packages should also work out for React using plain JS.\n\n## Getting started\n```bash\ngit clone https://github.com/ethereum-push-notification-service/push-sdk-starter-kit.git\n```\n\n```bash\ncd push-sdk-starter-kit\n```\n\n```bash\nyarn install\n```\n```bash\nyarn start\n```\n\n## Dependencies\nIf your are trying to build out a separate dApp following this starter-kit example, some of the following dependencies are needed for the SDK and any dApp to work.\n\n1. `@pushprotocol/uiweb` has a `peerDependency` on `styled-components`\n\n```bash\nyarn add styled-components\n```\n\n2. Since its a dApp, the following are the **web3** dependencies that you can install for wallet connection\n   **Latest version of Ethers (v6) introduces some breaking changes, for best results use Ethers v5 (ethers@^5.6)**\n```bash\n yarn add ethers@5.6.9\n```\n\n3. Needed only if you are using [web3-react](https://github.com/Uniswap/web3-react). You are free to use any other React based web3 solution.\n```bash\nyarn add @web3-react/core @web3-react/injected-connector\n```\n\n**But no need to install these if you are using the `starter-kit` itself since we have already installed these for you so that you can focus on how to use the PUSH-SDK packages**\n\n## App walkthrough\n\nThe App has following features-\n\n| Page    | Features    | SDK package used |\n|----------|---------|---------|\n| Notifications    | notifications, \u003cbr/\u003espams, \u003cbr/\u003esubscribed modal  |  @pushprotocol/uiweb, \u003cbr/\u003e@pushprotocol/restapi    |\n| Channels     | get channel details for a specific channel, \u003cbr/\u003esearch for channel(s), \u003cbr/\u003eget channel subscribers, \u003cbr/\u003eis the logged-in user subscribed to the channel, \u003cbr/\u003eopt in a channel, \u003cbr/\u003eopt out a channel  | @pushprotocol/restapi      |\n| Payloads     | send notification for different use cases  | @pushprotocol/restapi      |\n| Embed | sidebar notifications for the logged in user if subscribed on PUSH protocol  |   @pushprotocol/uiembed    |\n\n**We have extracted some snippets from the actual source code of the `starter-kit` files mentioned below to give you a snapshot view of what all SDK features are used in this dApp. But to make sure you are following along correctly please refer to the source code itself in the files mentioned.**\n\n**Also the detailed SDK docs are hyperlinked in the feature's header itself**\n\n\n*If you have got the wallet connection logic down, you can start referring from section [3](#3-features-usage) onwards.*\n\n### 1. Connecting to the Wallet\nAny dApp will require a wallet connection logic before it is usable. We have handled that for you in `App.tsx`. If you want to tinker around  with that, check the below component.\n\n```typescript\nimport ConnectButton from './components/connect';\n```\n\n### 2. Wallet connection Props to be used throughout the dApp\nWe basically derive the account, signer and some other wallet connection properties to use throughout the dApp with the SDK.\n\n```typescript\nconst { chainId, account, active, error, library  } = useWeb3React();\n```\nWe store this data in the web3Context and make it available across the dApp for later use.\n\n### 3. Features usage\n\n\nNOTIFICATIONS PAGE (`src/pages/notifications/index.tsx`)\n```typescript\nimport * as PushAPI from \"@pushprotocol/restapi\";\nimport { NotificationItem, chainNameType, SubscribedModal } from '@pushprotocol/uiweb';\n```\n\n#### [Fetching Notifications](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/restapi/README.md#fetching-user-notifications)\n\n```typescript\nconst notifications = await PushAPI.user.getFeeds({\n  user: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // user address in CAIP\n  env: 'staging'\n});\n```\n\n#### [Displaying Notifications](https://github.com/ethereum-push-notification-service/sdk/tree/main/packages/uiweb#notification-item-component)\n\n```typescript\n{notifications.map((oneNotification, i) =\u003e {\n    const { \n    cta,\n    title,\n    message,\n    app,\n    icon,\n    image,\n    url,\n    blockchain,\n    secret,\n    notification\n    } = oneNotification;\n\n    return (\n      \u003cNotificationItem\n        key={`notif-${i}`}\n        notificationTitle={secret ? notification['title'] : title}\n        notificationBody={secret ? notification['body'] : message}\n        cta={cta}\n        app={app}\n        icon={icon}\n        image={image}\n        url={url}\n        theme={theme}\n        chainName={blockchain as chainNameType}\n      /\u003e\n    );\n})}\n```\n\n#### [Fetching Spams](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/restapi/README.md#fetching-user-spam-notifications)\n\n```typescript\nconst spams = await PushAPI.user.getFeeds({\n  user: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // user address in CAIP\n  spam: true,\n  env: 'staging'\n});\n```\n\n#### [Displaying Spams](https://github.com/ethereum-push-notification-service/sdk/tree/main/packages/uiweb#notification-item-component)\n\n```typescript\n{spams ? (\n    \u003cNotificationListContainer\u003e\n        {spams.map((oneNotification, i) =\u003e {\n        const { \n        cta,\n        title,\n        message,\n        app,\n        icon,\n        image,\n        url,\n        blockchain,\n        secret,\n        notification\n        } = oneNotification;\n\n        return (\n            \u003cNotificationItem\n                key={`spam-${i}`}\n                notificationTitle={secret ? notification['title'] : title}\n                notificationBody={secret ? notification['body'] : message}\n                cta={cta}\n                app={app}\n                icon={icon}\n                image={image}\n                url={url}\n                theme={theme}\n                chainName={blockchain as chainNameType}\n                // optional parameters for rendering spambox\n                isSpam\n                subscribeFn={subscribeFn} // see below\n                isSubscribedFn={isSubscribedFn} // see below\n            /\u003e\n        );\n    })}\n```\n\n\n```typescript\nconst subscribeFn = async () =\u003e {\n  // opt in to the spam notification item channel\n}\n```\nwe can use this `@pushprotocol/restapi` method to do that - [subscribe](https://github.com/ethereum-push-notification-service/sdk/tree/main/packages/restapi/README.md#opt-in-to-a-channel)\n\n\n```typescript\nconst isSubscribedFn = async () =\u003e {\n  // return boolean which says whether the channel for the \n  // spam notification item is subscribed or not by the user.\n}\n```\nwe can use this `@pushprotocol/restapi` method to find out that - [getSubscriptions](https://github.com/ethereum-push-notification-service/sdk/tree/main/packages/restapi/README.md#fetching-user-subscriptions)\n\n\n\n#### Parsing raw [Feeds API data](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/restapi/README.md#fetching-user-notifications) using [utils](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/restapi/README.md#parsing-notifications) method `parseApiResponse`\nUtils method to parse raw Push Feeds API response into a pre-defined shape as below.\n```typescript\n// fetch some raw feeds data\nconst apiResponse = await PushAPI.user.getFeeds({\n  user: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // user address\n  raw: true,\n  env: 'staging'\n});\n// parse it to get a specific shape of object.\nconst parsedResults = PushAPI.utils.parseApiResponse(apiResponse);\n\nconst [oneNotification] = parsedResults;\n\n// Now this object can be directly used by for e.g. \"@pushprotocol/uiweb\"  NotificationItem component as props.\n\nconst {\n  cta,\n  title,\n  message,\n  app,\n  icon,\n  image,\n  url,\n  blockchain,\n  secret,\n  notification\n} = oneNotification;\n\n```\n*We get the above `keys` after the parsing of the API repsonse.*\n\n#### SubscribedModal\n\n```typescript\n    const [showSubscribe, setShowSubscribe] = useState(false);\n\n    const toggleSubscribedModal = () =\u003e {\n        setShowSubscribe((lastVal) =\u003e !lastVal);\n    };\n\n\n    // JSX\n    {showSubscribe ? \u003cSubscribedModal onClose={toggleSubscribedModal}/\u003e : null}\n```\n\nCHANNELS PAGE (`src/pages/channels/index.tsx`)\n\n```typescript\nimport * as PushAPI from '@pushprotocol/restapi';\n```\n#### [Fetch Channel Data](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/restapi/README.md#fetching-channel-details)\n\n```typescript\nconst channelData = await PushAPI.channels.getChannel({\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // channel address in CAIP\n  env: 'staging'\n});\n```\n\n#### [Searching for channel(s)](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/restapi/README.md#searching-for-channels)\n```typescript\nconst channelsData = await PushAPI.channels.search({\n  query: 'push', // a search query\n  page: 1, // page index\n  limit: 20, // no of items per page\n  env: 'staging'\n});\n```\n\n#### [DEPRECATED-Fetch Channel Subscribers](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/restapi/README.md#deprecated)\n\n```typescript\nconst subscribers = await PushAPI.channels._getSubscribers({\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // channel address in CAIP\n  env: 'staging'\n});\n```\n\n#### [Fetch User subscriptions](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/restapi/README.md#fetching-user-subscriptions)\n\n```typescript\nconst subscriptions = await PushAPI.user.getSubscriptions({\n  user: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // user address in CAIP\n  env: 'staging'\n});\n```\n\n#### [Opt-In to a channel](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/restapi/README.md#opt-in-to-a-channel) \n\n```typescript\nconst _signer = library.getSigner(account); // from useWeb3()\n //\n //\n //\nawait PushAPI.channels.subscribe({\n  signer: _signer,\n  channelAddress: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // channel address in CAIP\n  userAddress: 'eip155:42:0x52f856A160733A860ae7DC98DC71061bE33A28b3', // user address in CAIP\n  onSuccess: () =\u003e {\n   console.log('opt in success');\n  },\n  onError: () =\u003e {\n    console.error('opt in error');\n  },\n  env: 'staging'\n})\n```\n\n#### [Opt-Out of a channel](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/restapi/README.md#opt-out-to-a-channel) \n\n```typescript\nconst _signer = library.getSigner(account); // from useWeb3()\n //\n //\n //\nawait PushAPI.channels.unsubscribe({\n  signer: _signer,\n  channelAddress: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // channel address in CAIP\n  userAddress: 'eip155:42:0x52f856A160733A860ae7DC98DC71061bE33A28b3', // user address in CAIP\n  onSuccess: () =\u003e {\n   console.log('opt out success');\n  },\n  onError: () =\u003e {\n    console.error('opt out error');\n  },\n  env: 'staging'\n})\n```\n\nPAYLOADS PAGE (`src/pages/payloads/index.tsx`)\n\n#### [Send Notifications](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/restapi/README.md#sending-notification)\n\n##### **direct payload for single recipient(target)**\n```typescript\n// apiResponse?.status === 204, if sent successfully!\nconst apiResponse = await PushAPI.payloads.sendNotification({\n  signer,\n  type: 3, // target\n  identityType: 2, // direct payload\n  notification: {\n    title: `[SDK-TEST] notification TITLE:`,\n    body: `[sdk-test] notification BODY`\n  },\n  payload: {\n    title: `[sdk-test] payload title`,\n    body: `sample msg body`,\n    cta: '',\n    img: ''\n  },\n  recipients: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // recipient address\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // your channel address\n  env: 'staging'\n});\n```\n\n##### **direct payload for group of recipients(subset)**\n```typescript\n// apiResponse?.status === 204, if sent successfully!\nconst apiResponse = await PushAPI.payloads.sendNotification({\n  signer,\n  type: 4, // subset\n  identityType: 2, // direct payload\n  notification: {\n    title: `[SDK-TEST] notification TITLE:`,\n    body: `[sdk-test] notification BODY`\n  },\n  payload: {\n    title: `[sdk-test] payload title`,\n    body: `sample msg body`,\n    cta: '',\n    img: ''\n  },\n  recipients: ['eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', 'eip155:42:0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1'], // recipients addresses\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // your channel address\n  env: 'staging'\n});\n```\n\n##### **direct payload for all recipients(broadcast)**\n```typescript\n// apiResponse?.status === 204, if sent successfully!\nconst apiResponse = await PushAPI.payloads.sendNotification({\n  signer,\n  type: 1, // broadcast\n  identityType: 2, // direct payload\n  notification: {\n    title: `[SDK-TEST] notification TITLE:`,\n    body: `[sdk-test] notification BODY`\n  },\n  payload: {\n    title: `[sdk-test] payload title`,\n    body: `sample msg body`,\n    cta: '',\n    img: ''\n  },\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // your channel address\n  env: 'staging'\n});\n```\n\n##### **IPFS payload for single recipient(target)**\n```typescript\n// apiResponse?.status === 204, if sent successfully!\nconst apiResponse = await PushAPI.payloads.sendNotification({\n  signer,\n  type: 3, // target\n  identityType: 1, // ipfs payload\n  ipfsHash: 'bafkreicuttr5gpbyzyn6cyapxctlr7dk2g6fnydqxy6lps424mcjcn73we', // IPFS hash of the payload\n  recipients: 'eip155:42:0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', // recipient address\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // your channel address\n  env: 'staging'\n});\n```\n\n##### **IPFS payload for group of recipients(subset)**\n```typescript\n// apiResponse?.status === 204, if sent successfully!\nconst apiResponse = await PushAPI.payloads.sendNotification({\n  signer,\n  type: 4, // subset\n  identityType: 1, // ipfs payload\n  ipfsHash: 'bafkreicuttr5gpbyzyn6cyapxctlr7dk2g6fnydqxy6lps424mcjcn73we', // IPFS hash of the payload\n  recipients: ['eip155:42:0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', 'eip155:42:0x52f856A160733A860ae7DC98DC71061bE33A28b3'], // recipients addresses\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // your channel address\n  env: 'staging'\n});\n```\n\n##### **IPFS payload for all recipients(broadcast)**\n```typescript\n// apiResponse?.status === 204, if sent successfully!\nconst apiResponse = await PushAPI.payloads.sendNotification({\n  signer,\n  type: 1, // broadcast\n  identityType: 1, // direct payload\n  ipfsHash: 'bafkreicuttr5gpbyzyn6cyapxctlr7dk2g6fnydqxy6lps424mcjcn73we', // IPFS hash of the payload\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // your channel address\n  env: 'staging'\n});\n```\n\n##### **minimal payload for single recipient(target)**\n```typescript\n// apiResponse?.status === 204, if sent successfully!\nconst apiResponse = await PushAPI.payloads.sendNotification({\n  signer,\n  type: 3, // target\n  identityType: 0, // Minimal payload\n  notification: {\n    title: `[SDK-TEST] notification TITLE:`,\n    body: `[sdk-test] notification BODY`\n  },\n  payload: {\n    title: `[sdk-test] payload title`,\n    body: `sample msg body`,\n    cta: '',\n    img: ''\n  },\n  recipients: 'eip155:42:0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', // recipient address\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // your channel address\n  env: 'staging'\n});\n```\n\n##### **minimal payload for a group of recipient(subset)**\n```typescript\n// apiResponse?.status === 204, if sent successfully!\nconst apiResponse = await PushAPI.payloads.sendNotification({\n  signer,\n  type: 4, // subset\n  identityType: 0, // Minimal payload\n  notification: {\n    title: `[SDK-TEST] notification TITLE:`,\n    body: `[sdk-test] notification BODY`\n  },\n  payload: {\n    title: `[sdk-test] payload title`,\n    body: `sample msg body`,\n    cta: '',\n    img: ''\n  },\n  recipients: ['eip155:42:0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', 'eip155:42:0x52f856A160733A860ae7DC98DC71061bE33A28b3'], // recipients address\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // your channel address\n  env: 'staging'\n});\n```\n\n##### **minimal payload for all recipients(broadcast)**\n```typescript\n// apiResponse?.status === 204, if sent successfully!\nconst apiResponse = await PushAPI.payloads.sendNotification({\n  signer,\n  type: 1, // broadcast\n  identityType: 0, // Minimal payload\n  notification: {\n    title: `[SDK-TEST] notification TITLE:`,\n    body: `[sdk-test] notification BODY`\n  },\n  payload: {\n    title: `[sdk-test] payload title`,\n    body: `sample msg body`,\n    cta: '',\n    img: ''\n  },\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // your channel address\n  env: 'staging'\n});\n```\n\n##### **graph payload for single recipient(target)**\n***Make sure the channel has the graph id you are providing!!***\n```typescript\n// apiResponse?.status === 204, if sent successfully!\nconst apiResponse = await PushAPI.payloads.sendNotification({\n  signer,\n  type: 3, // target\n  identityType: 3, // Subgraph payload\n  graph: {\n    id: '_your_graph_id',\n    counter: 3\n  },\n  recipients: 'eip155:42:0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', // recipient address\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // your channel address\n  env: 'staging'\n});\n```\n\n##### **graph payload for group of recipients(subset)**\n***Make sure the channel has the graph id you are providing!!***\n```typescript\n// apiResponse?.status === 204, if sent successfully!\nconst apiResponse = await PushAPI.payloads.sendNotification({\n  signer,\n  type: 4, // subset\n  identityType: 3, // graph payload\n  graph: {\n    id: '_your_graph_id',\n    counter: 3\n  },\n  recipients: ['eip155:42:0xCdBE6D076e05c5875D90fa35cc85694E1EAFBBd1', 'eip155:42:0x52f856A160733A860ae7DC98DC71061bE33A28b3'], // recipients addresses\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // your channel address\n  env: 'staging'\n});\n```\n\n##### **graph payload for all recipients(broadcast)**\n***Make sure the channel has the graph id you are providing!!***\n```typescript\n// apiResponse?.status === 204, if sent successfully!\nconst apiResponse = await PushAPI.payloads.sendNotification({\n  signer,\n  type: 1, // broadcast\n  identityType: 3, // graph payload\n  graph: {\n    id: '_your_graph_id',\n    counter: 3\n  },\n  channel: 'eip155:42:0xD8634C39BBFd4033c0d3289C4515275102423681', // your channel address\n  env: 'staging'\n});\n```\n\n\n\n\nEMBED PAGE (`src/pages/embed/index.tsx`)\n#### [Embed - Sidebaar notifications](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/uiembed/README.md#uiembed) \n\n\n```typescript\nimport { useEffect, useContext } from 'react';\nimport { EmbedSDK } from \"@pushprotocol/uiembed\";\nimport Web3Context from '../../context/web3Context';\n\nconst EmbedPage = () =\u003e {\n    const { account, chainId } = useContext\u003cany\u003e(Web3Context);\n\n    useEffect(() =\u003e {\n        if (account) { // 'your connected wallet address'\n          EmbedSDK.init({\n            chainId,\n            headerText: 'Hello Hacker Dashboard', // optional\n            targetID: 'sdk-trigger-id', // mandatory\n            appName: 'hackerApp', // mandatory\n            user: account, // mandatory\n            viewOptions: {\n                type: 'sidebar', // optional [default: 'sidebar', 'modal']\n                showUnreadIndicator: true, // optional\n                unreadIndicatorColor: '#cc1919',\n                unreadIndicatorPosition: 'top-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      }, [account, chainId]);\n\n\n    return (\n        \u003cdiv\u003e\n          \u003ch2\u003eEmbed Test page\u003c/h2\u003e\n\n\n          \u003cbutton id=\"sdk-trigger-id\"\u003etrigger button\u003c/button\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n\nSOCKET PAGE (`src/pages/socket/index.tsx`, `src/hooks/useSDKSocket.ts`)\n#### [Sockets](https://github.com/ethereum-push-notification-service/sdk/blob/main/packages/socket/README.md) \n\nUse this hook in your app to connect to the feeds from the Push Websockets.\n\n```typescript\nexport const useSDKSocket = ({ account, env = '', chainId, isCAIP }: SDKSocketHookOptions) =\u003e {\n  \n  const [pushSDKSocket, setPushSDKSocket] = useState\u003cany\u003e(null);\n  const [feedsSinceLastConnection, setFeedsSinceLastConnection] = useState\u003cany\u003e([]);\n  const [isSDKSocketConnected, setIsSDKSocketConnected] = useState(pushSDKSocket?.connected);\n  const [lastConnectionTimestamp, setLastConnectionTimestamp] = useState('');\n\n  const addSocketEvents = () =\u003e {\n    // console.warn('\\n--\u003e addSocketEvents');\n    pushSDKSocket?.on(EVENTS.CONNECT, () =\u003e {\n      // console.log('CONNECTED: ');\n      setIsSDKSocketConnected(true);\n      setLastConnectionTimestamp((new Date()).toUTCString());\n    });\n\n    pushSDKSocket?.on(EVENTS.DISCONNECT, () =\u003e {\n      // console.log('DIS-CONNECTED: ');\n      setIsSDKSocketConnected(false);\n      setFeedsSinceLastConnection([]);\n      setLastConnectionTimestamp('');\n    });\n\n    // console.log('\\t--\u003ewill attach eachFeed event now');\n    pushSDKSocket?.on(EVENTS.USER_FEEDS, (feedList: any) =\u003e {\n      /**\n       * We receive a feed list which has 1 item.\n       */\n      console.log(\"\\n\\n\\n\\neachFeed event: \", feedList);\n\n      // do stuff with data\n      setFeedsSinceLastConnection((oldFeeds: any) =\u003e {\n        return [...oldFeeds, ...feedList]\n      });\n    });\n  };\n\n  const removeSocketEvents = () =\u003e {\n    // console.warn('\\n--\u003e removeSocketEvents');\n    pushSDKSocket?.off(EVENTS.CONNECT);\n    pushSDKSocket?.off(EVENTS.DISCONNECT);\n    pushSDKSocket?.off(EVENTS.USER_FEEDS);\n  };\n\n  useEffect(() =\u003e {\n    if (pushSDKSocket) {\n      addSocketEvents();\n    }\n  \n    return () =\u003e {\n      if (pushSDKSocket) {\n        removeSocketEvents();\n      }\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [pushSDKSocket]);\n\n\n  /**\n   * Whenever the requisite params to create a connection object change\n   *  - disconnect the old connection \n   *  - create a new connection object\n   */\n  useEffect(() =\u003e {\n    if (account) {\n      if (pushSDKSocket) {\n        // console.log('=================\u003e\u003e\u003e disconnection in the hook');\n        pushSDKSocket?.disconnect();\n      }\n      \n      const connectionObject = createSocketConnection({\n        user: account,\n        env,\n        socketOptions: { autoConnect: false }\n      });\n      // console.warn('new connection object: ', connectionObject);\n      // set to context\n      setPushSDKSocket(connectionObject);\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [account, env, chainId, isCAIP]);\n\n\n  return {\n      pushSDKSocket,\n      isSDKSocketConnected,\n      feedsSinceLastConnection,\n      lastConnectionTimestamp\n  }\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpushchain%2Fpush-sdk-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpushchain%2Fpush-sdk-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpushchain%2Fpush-sdk-starter-kit/lists"}