Notification via Subgraph Example
Alright, now that we have an effective understanding of sending notifications via subgraph and the setup procedure involved for the same, it's time to dive in deep and understand this wonderful feature with an example.

The objective of this exercise

This is a walkthrough of how one can set up Subgraph based EPNS Notifications. Even if you are not much familiar with EPNS or The Graph, you could straight away start from here and follow the respective links to dive in.
In this example, we integrate EPNS with an ERC-20 contract subgraph and link it to an EPNS Notification Channel to send out notifications whenever a Transfer happens.

Pre-requisites

  1. 1.
    Have an EPNS Notification Channel ready - see the docs here to create a channel
  2. 2.
    Install the graph CLI
npm install -g @graphprotocol/graph-cli
​
yarn global add @graphprotocol/graph-cli
3. Link your Github to the graph website -https://thegraph.com/hosted-service/​
4. Add a subgraph named XXXX from your Hosted Service Dashboard -https://thegraph.com/hosted-service/dashboard​

Contract deployment

  1. 2.
    Deploy on the Kovan Test Network using the Remix IDE - https://remix.ethereum.org/​

Subgraph deployment

Create a subgraph

  1. 1.
  2. 2.
    In subgraph.yaml update the contract address to the one you just deployed
  3. 3.
    Install packages
    yarn install
  4. 4.
    Generate code
    graph codegen
  5. 5.
    Get the access token from the Graph dashboard & authenticate
    graph auth --product hosted-service <ACCESS_TOKEN>
  6. 6.
    Deploy the subgraph
    graph deploy --product hosted-service <GITHUB_USER>/<SUBGRAPH NAME>
  7. 7.
    See the subgraph playground

Integrate EPNS to the subgraph

  1. 1.
    In schema.graphql, include the following EPNS Schema
    type EpnsNotificationCounter @entity {
    id: ID!
    totalCount: BigInt!
    }
    ​
    type EpnsPushNotification @entity {
    id: ID!
    notificationNumber: BigInt!
    recipient: String!
    notification: String!
    }
  2. 2.
    In mapping.ts, export the subgraph ID
    //Note: EPNS supports only The Graph Hosted Service at present
    ​
    export const subgraphID = "aiswaryawalter/push-token"
  3. 3.
    In src/ create a file - EPNSNotification.ts. Copy & paste the Helper File code fromhttps://github.com/aiswaryawalter/epns-graph-token-alerter/blob/main/src/EPNSNotification.ts
  4. 4.
    In mapping.ts import the helper file
    import { sendEPNSNotification } from "./EPNSNotification"
Follow steps 5, 6 and 7 within the respective handler functions from which the notification needs to be sentπŸ‘‡πŸΌ
5. Define Notification Payload Items
let recipient = event.params.to.toHexString(),
type = "3",
title = "PUSH Received",
body = `Received ${event.params.tokens.div(power)} PUSH from ${event.params.from.toHexString()}`,
subject = "PUSH Received",
message = `Received ${event.params.tokens.div(power)} PUSH from ${event.params.from.toHexString()}`,
image = "https://play-lh.googleusercontent.com/i911_wMmFilaAAOTLvlQJZMXoxBF34BMSzRmascHezvurtslYUgOHamxgEnMXTklsF-S",
secret = "null",
cta = "https://epns.io/"
6. Define Notification
The notification variable is defined in the given below format πŸ‘‡πŸΌ
Format : {"field" : "value"}
let notification = `{\"type\": \"${type}\", \"title\": \"${title}\", \"body\": \"${body}\", \"subject\": \"${subject}\", \"message\": \"${message}\", \"image\": \"${image}\", \"secret\": \"${secret}\", \"cta\": \"${cta}\"}`
7. Call the EPNS Helper Function
sendEPNSNotification (recipient, notification)

Redeploy Subgraph

  1. 1.
    Generate code
    graph codegen
  2. 2.
    Get the access token from the Graph dashboard & authenticate
    graph auth --product hosted-service <ACCESS_TOKEN>
  3. 3.
    Deploy the subgraph
    graph deploy --product hosted-service <GITHUB_USER>/<SUBGRAPH NAME>
  4. 4.
    In the subgraph playground, paste the below query & show the notification payloads
    {
    epnsPushNotifications(first: 20) {
    id
    notificationNumber
    recipient
    notification
    }
    }
    ​
Here is the final subgraph with EPNS integration - https://github.com/aiswaryawalter/epns-graph-token-alerter​

Linking Subgraph to EPNS Notification Channel

  • Go to EPNS dApp (https://staging.epns.io/) β†’ Channel Dashboard β†’ Settings β†’ Add Subgraph Details
  • Enter your Subgraph ID(githubID/subgraph-slug) and Poll Interval (in seconds, must be at least 60 sec or more)
    Poll Interval (in seconds) defines the time period at which Push Nodes shall ping the subgraph for fetching the latest notifications.
    Note: This is an on-chain transaction that stores the above data to EPNS Core Contract. So it requires $ETH for gas fees.

Testing Notification

  1. 1.
    Opt-in to the newly created channel
  2. 2.
    Initiate a Transfer transaction
  3. 3.
    Wait for the notification to appear on the recipient's wallet via EPNS dApp, Mobile App, Browser Extension