feat: EPNS embed sidebar notifications on Home page

src/components/EPNSBellIcon/EPNSBellIcon.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import styled from '@emotion/styled/macro'
+
+const Icon = styled('div')`
+  width: 32px;
+  height: 32px;
+  margin-top: -7px;
+  cursor: pointer;
+`
+const defaultSize = '32px'
+
+const Image = styled('img')`
+  width: ${props => props.size || defaultSize};
+  height: ${props => props.size || defaultSize};
+`
+
+export default function({
+  size, // px
+  ...otherProps
+}) {
+  return (
+    <Icon {...otherProps}>
+      <Image
+        alt="EPNS Bell Icon"
+        src="https://backend-dev.epns.io/assets/epnslogo.png"
+        width={size}
+        height={size}
+      />
+    </Icon>
+  )
+}

src/hooks/useEPNSEmbed.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+/** intend to replace this with npm package */
+import EmbedSDK from '../utils/embedsdk.esm'
+
+export const useEPNSEmbed = ({ user, targetID, appName }) => {
+  useEffect(() => {
+    if (user && targetID && appName) {
+      if (typeof EmbedSDK.init === 'function') {
+        EmbedSDK.init({
+          targetID: targetID, // MANDATORY
+          appName: appName, // MANDATORY
+          user: user, // MANDATORY
+          headerText: 'EPNS Notifications',
+          viewOptions: {
+            type: 'sidebar',
+            showUnreadIndicator: true,
+            unreadIndicatorColor: '#cc1919',
+            unreadIndicatorPosition: 'top-right'
+          }
+        })
+      }
+    }
+
+    return () => {
+      if (typeof EmbedSDK.cleanup === 'function') {
+        EmbedSDK.cleanup()
+      }
+    }
+  }, [user, targetID, appName])
+}

src/hooks/useEPNSEmbed.spec.js

@@ -0,0 +1,41 @@
+/** intend to replace this with npm package */
+jest.mock('../utils/embedsdk.esm', () => ({
+  __esModule: true,
+  default: {
+    init: jest.fn(),
+    cleanup: jest.fn()
+  }
+}))
+
+import EmbedSDK from '../utils/embedsdk.esm'
+
+import { renderHook } from '@testing-library/react-hooks'
+import { useEPNSEmbed } from './useEPNSEmbed'
+
+describe('useEPNSEmbed', () => {
+  it('should not call init() if all mandatory params are not passed', () => {
+    const { rerender } = renderHook(() => useEPNSEmbed({}))
+
+    rerender()
+    expect(EmbedSDK.init).toBeCalledTimes(0)
+  })
+
+  it('should not call init() if all mandatory params are not passed', () => {
+    const initOptions = {
+      user: '0xaddress1',
+      targetID: 'trigger-id',
+      appName: 'ens'
+    }
+
+    const { rerender } = renderHook(() => useEPNSEmbed(initOptions))
+
+    rerender()
+    expect(EmbedSDK.init).toBeCalledTimes(1)
+
+    const calledWithArgs = EmbedSDK.init.mock.calls[0][0]
+
+    expect(calledWithArgs.user).toEqual(initOptions.user)
+    expect(calledWithArgs.targetID).toEqual(initOptions.targetID)
+    expect(calledWithArgs.appName).toEqual(initOptions.appName)
+  })
+})

src/routes/Home.js

@@ -20,6 +20,8 @@ import {
   MainPageBannerContainer,
   DAOBannerContent
 } from '../components/Banner/DAOBanner'
+import EPNSBellIcon from '../components/EPNSBellIcon/EPNSBellIcon'
+import { useEPNSEmbed } from 'hooks/useEPNSEmbed'
 
 const HeroTop = styled('div')`
   display: grid;
@@ -297,6 +299,9 @@ const animation = {
   }
 }
 
+export const epnsTriggerId = 'epns-sdk-trigger-id'
+export const epnsTriggerAppName = 'ensApp'
+
 export default ({ match }) => {
   const { url } = match
   const { t } = useTranslation()
@@ -311,6 +316,12 @@ export default ({ match }) => {
     variables: { address: accounts?.[0] }
   })
 
+  useEPNSEmbed({
+    user: accounts?.[0],
+    targetID: epnsTriggerId,
+    appName: epnsTriggerAppName
+  })
+
   return (
     <Hero>
       <HeroTop>
@@ -330,6 +341,9 @@ export default ({ match }) => {
           )}
         </NetworkStatus>
         <Nav>
+          {/* EPNS embed feature */}
+          {accounts?.length > 0 && <EPNSBellIcon id={epnsTriggerId} />}
+
           {accounts?.length > 0 && !isReadOnly && (
             <NavLink
               active={url === '/address/' + accounts[0]}

src/routes/Home.spec.js

@@ -7,6 +7,13 @@ jest.mock('@apollo/client', () => ({
 }))
 import { useQuery } from '@apollo/client'
 
+jest.mock('../hooks/useEPNSEmbed', () => ({
+  __esModule: true,
+  ...jest.requireActual('../hooks/useEPNSEmbed'),
+  useEPNSEmbed: jest.fn()
+}))
+import { useEPNSEmbed } from '../hooks/useEPNSEmbed'
+
 jest.mock('../components/SearchName/Search', () => ({
   __esModule: true,
   default: jest.fn()
@@ -17,7 +24,12 @@ import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { StaticRouter } from 'react-router-dom'
 
-import Home, { HOME_DATA, GET_ACCOUNT } from './Home'
+import Home, {
+  HOME_DATA,
+  GET_ACCOUNT,
+  epnsTriggerId,
+  epnsTriggerAppName
+} from './Home'
 
 describe('Home', () => {
   it('should not show MyAccount if we have accounts but are in readOnly mode', async () => {
@@ -33,13 +45,14 @@ describe('Home', () => {
       }
     }
     const context = {}
+    const account = '0xaddress1'
 
     useQuery.mockImplementation(data => {
       const queryName = getQueryName(data)
       if (queryName === 'getAccounts') {
         return {
           data: {
-            accounts: ['0xaddress1']
+            accounts: [account]
           }
         }
       }
@@ -62,6 +75,12 @@ describe('Home', () => {
       }
     })
 
+    useEPNSEmbed.mockImplementation(data => {
+      expect(data.user).toEqual(account)
+      expect(data.targetID).toEqual(epnsTriggerId)
+      expect(data.appName).toEqual(epnsTriggerAppName)
+    })
+
     SearchDefault.mockImplementation(() => <div />)
 
     const { debug, queryByTestId } = render(