epnsproject-sdk-uiweb

description
Package for React based UI web components to be used by dApp.

@pushprotocol/uiweb

Installation

{% tabs %} {% tab title="npm" %}

npm install @pushprotocol/uiweb

{% endtab %}

{% tab title="yarn" %}

yarn add @pushprotocol/uiweb

{% endtab %} {% endtabs %}

Note: styled-components is a peerDependency. Please install it in your dApp if you don't have it already!

{% tabs %} {% tab title="npm" %}

npm install styled-components

{% endtab %}

{% tab title="yarn" %}

yarn add styled-components

{% endtab %} {% endtabs %}

Notification Item Component

Import the SDK package in the component file where you want to render notification(s)

import { NotificationItem, chainNameType } from "@pushprotocol/uiweb";

After you get the Notification data from the API or otherwise,

const notifications = await PushAPI.user.getFeeds({
  user: 'eip155:5:0xD8634C39BBFd4033c0d3289C4515275102423681', // user address in CAIP
  env: 'staging'
});

Render the Notification UI as follows

<div>
{notifications.map((oneNotification, i) => {
    const { 
        cta,
        title,
        message,
        app,
        icon,
        image,
        url,
        blockchain,
        notification
    } = oneNotification;

    return (
        <NotificationItem
            key={id} // any unique id
            notificationTitle={title}
            notificationBody={message}
            cta={cta}
            app={app}
            icon={icon}
            image={image}
            url={url}
            theme={theme}
            chainName={blockchain}
            // chainName={blockchain as chainNameType} // if using Typescript
        />
        );
    })}
</div>

For Spam data API

const spams = await PushAPI.user.getFeeds({
  user: 'eip155:5:0xD8634C39BBFd4033c0d3289C4515275102423681', // user address in CAIP
  spam: true,
  env: 'staging'
});

render the Spam UI as follows

 {spams.map((oneNotification, i) => {
    const { 
      cta,
      title,
      message,
      app,
      icon,
      image,
      url,
      blockchain,
      secret,
      notification
    } = oneNotification;

    return (
      <NotificationItem
        key={`spam-${i}`}
        notificationTitle={title}
        notificationBody={message}
        cta={cta}
        app={app}
        icon={icon}
        image={image}
        url={url}
        theme={theme}
        chainName={blockchain}
        // optional parameters for rendering spams
        isSpam
        subscribeFn={subscribeFn} // see below
        isSubscribedFn={isSubscribedFn} // see below
      />
    );
  })}

const subscribeFn = async () => {
  // opt in to the spam notification item channel
}

We can use this epnsproject-sdk-restapi method to do that - subscribe

const isSubscribedFn = async () => {
  // return boolean which says whether the channel for the 
  // spam notification item is subscribed or not by the user.
}

We can use this epnsproject-sdk-restapi method to find out that - getSubscriptions, where

Prop	Type	Remarks
notificationTitle	string	Title of the notification (given during notification creation)
notificationBody	number	Message body of the notification (given during notification creation)
icon	string	Channel Icon (IPFS url) (given during channel setup)
app	string	Channel Name (given during channel setup)
cta	string	Call To Action Link (given during notification creation)
image	string	Any media link (given during notification creation)
url	string	Channel Link (given during channel setup)
chainName	string	Can be anyone of the following blockchain networks on which the notification was sent - "ETH_MAINNET", "ETH_TEST_GOERLI", "POLYGON_MAINNET", "POLYGON_TEST_MUMBAI", "THE_GRAPH"
theme	string	'light' or 'dark' (customization to be given by the dApp)
isSpam	boolean	whether a spam notification or not
subscribeFn	Promise	Function to subscribe to the channel
isSubscribedFn	Promise	Function that returns the subscription status of a channel