diff --git a/docs/notifications/03-showrunners-scaffold/03-Examples/07-Showrunner-Example-Notification-Settings-With-Showrunners.mdx b/docs/notifications/03-showrunners-scaffold/03-Examples/07-Showrunner-Example-Notification-Settings-With-Showrunners.mdx index 947560a5e95..3b6061747a6 100644 --- a/docs/notifications/03-showrunners-scaffold/03-Examples/07-Showrunner-Example-Notification-Settings-With-Showrunners.mdx +++ b/docs/notifications/03-showrunners-scaffold/03-Examples/07-Showrunner-Example-Notification-Settings-With-Showrunners.mdx @@ -5,7 +5,7 @@ hide_title: true slug: ./notification-settings-with-showrunners-example displayed_sidebar: pushNotificationSidebar sidebar_position: 7 -image: "/assets/docs/previews/docs_notifications_tutorials_push_react_component_playground_example--push_sdk_react_playground.png" +image: "/assets/docs/previews/docs_notifications_settings_with_showrunners_example--showrunners_x_notification_settings.png" --- # Trigger Notification Settings in Showrunners @@ -14,12 +14,13 @@ This tutorial is intended to get you up and going by providing a step-by-step tu - Notification Settings with Showrunners tutorial | Push Notification | Push Documentation + {`Notification Settings with Showrunners tutorial | Push Notification | Push + Documentation`} -import Tabs from '@theme/Tabs' -import TabItem from '@theme/TabItem' +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; ### Setup the Showrunners in your local machine @@ -29,7 +30,6 @@ For detailed, step-by-step guide visit the Showrunners [docs](https://push.org/d Navigate to the SDK directory and install required dependencies. - ```bash cd push-showrunners-framework yarn install @@ -37,7 +37,6 @@ docker-compose up yarn run dev ``` - ### Import the Push SDK After you have created a channel folder. Refer to Showrunners [docs](https://push.org/docs/notifications/showrunners-scaffold/get-started/). Move to the [name]Channel.ts file and import the dependencies. @@ -46,11 +45,11 @@ After you have created a channel folder. Refer to Showrunners [docs](https://pus import { PushAPI } from "@pushprotocol/restapi"; ``` - #### [Channel File](https://github.com/ethereum-push-notification-service/push-showrunners-framework/blob/main/src/sample_showrunners/bank/bankChannel.ts) In order to send notification, we need to have the instance of the user channel. To get that, we need to add the below function in our 'Channel class' . + ```jsx async initializeUser() { const provider = new ethers.providers.WebSocketProvider(process.env.ALCHEMY_WEBSOCKET); @@ -69,27 +68,26 @@ async initializeUser() { ``` ### Build the notification payload -Design your own payload with custom values in the when you want to trigger notifications. To learn more about notification settings, refer to [docs](https://push.org/docs/notifications/build/create-channel-settings/) +Design your own payload with custom values in the when you want to trigger notifications. To learn more about notification settings, refer to [docs](https://push.org/docs/notifications/build/create-channel-settings/) ```jsx const payload = { notification: { - title: 'Title', - body: 'Notif Body', + title: "Title", + body: "Notif Body", }, payload: { - title: 'Title', - body: 'Payload body', - cta: 'https://google.com/', - embed: 'https://avatars.githubusercontent.com/u/64157541?s=200&v=4', + title: "Title", + body: "Payload body", + cta: "https://google.com/", + embed: "https://avatars.githubusercontent.com/u/64157541?s=200&v=4", // index of the notification the channel wants to trigger, in this for 1nd index which is for Boolean type category: 1, // Depending upon your use-case - } -} + }, +}; ``` - ### Setup Notification trigger We create a function that will send notifications depending upon the type. To get that, we need to add the below function in our 'Channel class' @@ -105,9 +103,10 @@ async sendThroughNotifSettings(userAlice, payload) { } } ``` + ### How does it actually work? -The Showrunner framework listens to the on-chain events through web-sockets. According to events emitted, an user can create respective notifications and subscribers can opt-in as per their wish. The `send` function takes in an array of all the addresses eligible to receive notifications. In case of `*`, all the addresses subscribed to the channel is eligible for it. You can have a custom array of addresses as well. Furthermore, the `payload` contains `category` which specifies the notification category (as setup by the user). So in the above example all addresses who opted-in for `category-1` (bank holiday - boolean in this case), will receive the notification. +The Showrunner framework listens to the on-chain events through web-sockets. According to events emitted, an user can create respective notifications and subscribers can opt-in as per their wish. The `send` function takes in an array of all the addresses eligible to receive notifications. In case of `*`, all the addresses subscribed to the channel is eligible for it. You can have a custom array of addresses as well. Furthermore, the `payload` contains `category` which specifies the notification category (as setup by the user). So in the above example all addresses who opted-in for `category-1` (bank holiday - boolean in this case), will receive the notification. Summarizing the entire process, web-sockets listen to on-chain events and notifies the showrunners framework. Depending upon the array provided in the `send` function and the `category` provided in the `payload`, users opted in for the notification type, receives it. @@ -115,4 +114,4 @@ You are all set to send notifications through the showrunners framework. Now, bu Explore more possibilities and ways to make it more useful for your users. Happy building🏆 -If you enjoyed this tutorial, Do join our [discord server](https://discord.com/invite/pushprotocol) to meet other dev and builders. \ No newline at end of file +If you enjoyed this tutorial, Do join our [discord server](https://discord.com/invite/pushprotocol) to meet other dev and builders. diff --git a/static/assets/docs/previews/docs_notifications_settings_with_showrunners_example--showrunners_x_notification_settings.png b/static/assets/docs/previews/docs_notifications_settings_with_showrunners_example--showrunners_x_notification_settings.png new file mode 100644 index 00000000000..3272c6dd8f9 Binary files /dev/null and b/static/assets/docs/previews/docs_notifications_settings_with_showrunners_example--showrunners_x_notification_settings.png differ