Skip to content

Latest commit

 

History

History
87 lines (71 loc) · 3.1 KB

README.md

File metadata and controls

87 lines (71 loc) · 3.1 KB
Raw

uiembed

This package helps to embed Push notifications in a sidebar to any dApp

How to use in your app?

Installation

  yarn add @pushprotocol/uiembed

or

  npm install @pushprotocol/uiembed

Import in your file

import { EmbedSDK } from "@pushprotocol/uiembed";

add in HTML/JSX the below HTML tag -

<button id="sdk-trigger-id">trigger button</button>

or any component with the ID sdk-trigger-id

Make sure the ID you give to the "button" is same as that of the targetID you pass to the init() below

After the wallet connect happens in your app flow trigger the below code snippet.

Note: You have to have the wallet connected with an account to execute the below code because internally the SDK calls the PUSH get_feeds() API which needs the account address. You will see notifications if you have opted-in to a channel using PUSH

  useEffect(() => {
    if (account) { // 'your connected wallet address'
      EmbedSDK.init({
        headerText: 'Hello DeFi', // optional
        targetID: 'sdk-trigger-id', // mandatory
        appName: 'consumerApp', // mandatory
        user: account, // mandatory
        chainId: 1, // mandatory
        viewOptions: {
            type: 'sidebar', // optional [default: 'sidebar', 'modal']
            showUnreadIndicator: true, // optional
            unreadIndicatorColor: '#cc1919',
            unreadIndicatorPosition: 'bottom-right',
        },
        theme: 'light',
        onOpen: () => {
          console.log('-> client dApp onOpen callback');
        },
        onClose: () => {
          console.log('-> client dApp onClose callback');
        }
      });
    }

    return () => {
      EmbedSDK.cleanup();
    };
  }, []);

Init Config Options

option type mandatory remarks
targetID string yes can be any string but has to match the ID given to the trigger button in the HTML/JSX
chainId number yes the chain ID of the blockchain network. by default is 1
appName string yes your app name e.g. - 'appName'
user string yes public wallet address e.g. - '0x1434A7882cDD877B458Df5b83c993e9571c65813'
viewOptions.type string no default 'sidebar', can give 'modal'
viewOptions.showUnreadIndicator boolean no will show the unread indicator
viewOptions.unreadIndicatorColor string no color for the unread indicator e.g. - '#cc1919'
viewOptions.unreadIndicatorPosition string no default is 'top-right', other possible options - 'top-left', 'bottom-left', 'bottom-right'
headerText string no any header text
theme string no default is 'light', can give 'dark'
onOpen function no callback you want to trigger when the modal/sidebar opens
onClose function no callback you want to trigger when the modal/sidebar closes

Building

Run nx build uiembed to build the library.

Running unit tests

Run nx test uiembed to execute the unit tests via Jest.