@epnsproject/sdk-uiweb v0.1.11

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