uiweb

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

How to use in your app?

Installation

  yarn add @pushprotocol/uiweb

or

  npm install @pushprotocol/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 "@pushprotocol/uiweb";

After you get the Notification data from the API or otherwise

const notifications = await PushAPI.user.getFeeds({
  user: 'eip155:11155111: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:11155111: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 @pushprotocol/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 @pushprotocol/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_SEPOLIA", "POLYGON_MAINNET", "POLYGON_TEST_AMOY", "BSC_MAINNET, "BSC_TESTNET", "OPTIMISM_MAINNET", "OPTIMISM_TESTNET", "POLYGON_ZK_EVM_TESTNET", "POLYGON_ZK_EVM_MAINNET", "ARBITRUM_TESTNET", "ARBITRUMONE_MAINNET", "FUSE_TESTNET", "FUSE_MAINNET", "BERACHIAN_TESTNET", "LINEA_MAINNET", "LINEA_TESTNET", "CYBER_CONNECT_TESTNET , "CYBER_CONNECT_MAINNET", "BASE_MAINNET" , "BASE_TESTNET", "THE_GRAPH" | | theme | string | 'light' or 'dark' (customization to be given by the dApp) | | customTheme | INotificationItemTheme | custom theme object for the component | | 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 |

Theming in NotificationItem component

import { INotificationItemTheme,notificationLightTheme } from '@pushprotocol/uiweb';

const customTheme: INotificationItemTheme = {...notificationLightTheme,...{
  borderRadius:{
    ...notificationLightTheme.borderRadius,
    modal:'12px',
  },
  color:{
    ...notificationLightTheme.color,
      channelNameText:'#62626A',
      notificationTitleText:'#000',
      notificationContentText:'#62626A',
      modalBorder:'#C8C8CB',
      timestamp:'#62626A',
  },
  fontWeight:{
    ...notificationLightTheme.fontWeight,
    channelNameText:600,
    notificationTitleText:600,
    notificationContentText:500,
    timestamp:400
  },
  fontSize:{
    ...notificationLightTheme.fontSize,
    channelNameText:'16px',
    notificationTitleText:'16px',
    notificationContentText:'16px',
    timestamp:'12px'
  },
  modalDivider:'none'
}};

List of all theme variables

Support Chat Item component

Import the SDK package in the component file where you want to render the support chat component.

import { Chat } from "@pushprotocol/uiweb";
import { ITheme } from '@pushprotocol/uiweb';

Render the Chat Component as follows

<Chat
   account="0x6430C47973FA053fc8F055e7935EC6C2271D5174" //user address
   signer={librarySigner}
   supportAddress="0xd9c1CCAcD4B8a745e191b62BA3fcaD87229CB26d" //support address
   env="staging"
 />

Allowed Options (props with * are mandatory)

| Prop | Type | Default | Remarks | |----------|---------|---------|--------------------------------------------| | account* | string | - | user address(sender) | | supportAddress* | string | - | support user's address(receiver) | | greetingMsg | string | 'Hi there!' | first message in chat scree | | theme | ITheme | <lightTheme> | theme for chat modal (only lightTheme available now) | | modalTitle | string | 'Chat with us!' | Modal header title | | apiKey | string | '' | api key | | env | string | 'prod' | API env - 'prod', 'staging', 'dev'|

Example code for using custom theme

import React from 'react';
import { Chat, ITheme } from '@pushprotocol/uiweb';


export const ChatSupportTest = () => {
  const theme: ITheme = {
    bgColorPrimary: 'gray',
    bgColorSecondary: 'purple',
    textColorPrimary: 'white',
    textColorSecondary: 'green',
    btnColorPrimary: 'red',
    btnColorSecondary: 'purple',
    border: '1px solid black',
    borderRadius: '40px',
    moduleColor: 'pink',
  };

  return (
    <Chat
      account='0xFe6C8E9e25f7bcF374412c5C81B2578aC473C0F7'
      supportAddress="0xFe6C8E9e25f7bcF374412c5C81B2578aC473C0F7"
      apiKey="tAWEnggQ9Z.UaDBNjrvlJZx3giBTIQDcT8bKQo1O1518uF1Tea7rPwfzXv2ouV5rX9ViwgJUrXm"
      env='staging'
      theme={theme}
    />
  );
};

List of all theme variables

Chat and Notification Widget

Import the SDK package in the component file where you want to render the chat and notification component.

import { ChatAndNotificationWidget,PUSH_TABS } from "@pushprotocol/uiweb";
import * as PushAPI from '@pushprotocol/restapi';
import { ChatAndNotificationWidget } from '@pushprotocol/uiweb';
import { IUser } from '@pushprotocol/restapi';

To use this component, we need to have our PGP keys created. Then decrypt the encrypted pgp private key.

const account = 'eip155:0xD8634C39BBFd4033c0d3289C4515275102423681';
  const pvtkey = null;
  const user = await PushAPI.user.get({ account: account, env });
        if (user?.encryptedPrivateKey) {
            const response = await PushAPI.chat.decryptPGPKey({
                encryptedPGPPrivateKey: (user as IUser).encryptedPrivateKey,
                account: account,
                signer: signer_,
                env,
                toUpgrade: true,
              });
         pvtkey= response;
        }
  });

Render the ChaChatAndNotificationWidget Component as follows

<ChatAndNotificationWidget
    account={account}
    signer={signer_}
    env={'staging'}
    activeTab={PUSH_TABS.APP_NOTIFICATIONS}
    decryptedPgpPvtKey={pvtKey}
 />

Allowed Options (props with * are mandatory)

| Prop | Type | Default | Remarks | |----------|---------|---------|--------------------------------------------| | account* | string | - | user address(sender) | | signer_ | - | - | signer object(not passing signer would not show opt-in functionality in spam notifications) | | decryptedPgpPvtKey* | string | - | decrypted pgp private key | | activeTab | PushTabs | PUSH_TABS.CHATS | set active tab when modal first opens | | activeChat | string | - | to open a particular chat when modal first opens | | onClose | () => void | - | function to execute when modal is minimised | | env | string | 'prod' | API env - 'prod', 'staging', 'dev'|