@pushprotocol/uiembed v0.3.0

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

Building

Run nx build uiembed to build the library.

Running unit tests

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