Integrating EmbedSDK in Client dApp

App Live Walkthrough Governance Documentation Hub

Search…

This will embed an EPNS sidebar/modal to your UI which will show the EPNS notifications, easiest way to integrate EPNS with your dApp.

For using the EmbedSDK in your decentralized application, you should follow the given command (skip this if already installed!)

yarn add @epnsproject/frontend-sdk-staging
After that, in App.js of your App entry point, add below line 👇
import { EmbedSDK } from "@epnsproject/frontend-sdk-staging";
Also add the below HTML tag in HTML/JSX file -
<button id="sdk-trigger-id">trigger button</button>
You can also add some other component with the ID sdk-trigger-id. Make sure the ID you give to the button is same as that of the targetID yo pass to the init() below
After the wallet connect happens in your application, trigger the below code snippet 👇
Note: You need to have the wallet connected with an account to execute the below code. This is because the SDK internally calls the EPNS get_feeds() API which required the Wallet Address. You will see notifications if you have opted-in to a channel using EPNS.
  useEffect(() => {
    if (account) { // 'your connected wallet address'
      EmbedSDK.init({
        headerText: 'Hello DeFi', // optional
        targetID: 'sdk-trigger-id', // mandatory
        appName: 'consumerApp', // mandatory
        user: account, // 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
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
​
The UI should look somewhat like this screenshot below 👇
Here the dApp is using the Bell Icon for the SDK trigger, the user is yet to connect their wallet

Integrating Opt-in/Subscribe to channel in dApp

Next - Developer Tooling

Frontend SDK

Last modified 1mo ago

Copy link