uiweb

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

How to use in your app?

Installation

  yarn add @epnsproject/sdk-uiweb

or

  npm install @epnsproject/sdk-uiweb  

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

  yarn add styled-components

or

  npm install styled-components  

Notification Item component

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

import { NotificationItem, chainNameType } from "@epnsproject/sdk-uiweb";

After you get the Notification data from the API or otherwise

const notifications = await EpnsAPI.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 EpnsAPI.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 |