Skip to main content

Trigger Notification Settings in Showrunners

This tutorial is intended to get you up and going by providing a step-by-step tutorial in integrating notification settings in the showrunners framework. Checkout Showrunners Docs, Showrunners Framework, Channel Settings Docs and Channel Settings Demo for better understanding!

Setup the Showrunners in your local machine​

For detailed, step-by-step guide visit the Showrunners docs. First we need to create a folder in src/showrunners/<your_channel_name>

Install Dependencies & start up​

Navigate to the SDK directory and install required dependencies.

cd push-showrunners-framework
yarn install
docker-compose up
yarn run dev

Import the Push SDK​

After you have created a channel folder. Refer to Showrunners docs. Move to the [name]Channel.ts file and import the dependencies.

import { CONSTANTS, PushAPI } from '@pushprotocol/restapi';

Channel File​

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' .

async initializeUser() {
  const provider = new ethers.providers.WebSocketProvider(process.env.ALCHEMY_WEBSOCKET);
  const contract = new ethers.Contract(contractAddress, contractAbi, provider);

  const signer = new ethers.Wallet(
    process.env.PRIVATE_KEY, // Private key of the channel owner (or channel creation wallet)
      provider
  );

  // PushAPI.initialize(signer, {options?});
  // 'CONSTANTS.ENV.PROD' -> mainnet apps | 'CONSTANTS.ENV.STAGING' -> testnet apps
  const userAlice = await PushAPI.initialize(signer, { env: CONSTANTS.ENV.STAGING });

  return { contract, userAlice };
}

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

const payload = {
  notification: {
    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',
    // 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' .

async sendThroughNotifSettings(userAlice, payload) {
  try {
    const notifRes = await userAlice.channel.send(['*'], payload);
    return notifRes;
  } catch (error) {
    this.logInfo("ERROR🔴 from sendThroughNotifSettings: ", error);
  }
}

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.

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.

You are all set to send notifications through the showrunners framework. Now, bundling up notification settings with web-sockets you can trigger custom notifications based on on-chain activities. Isn't this awesome?✨

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 to meet other dev and builders.