diff --git a/src/components/EPNSBellIcon/EPNSBellIcon.js b/src/components/EPNSBellIcon/EPNSBellIcon.js
new file mode 100644
index 000000000..2fd31b7ab
--- /dev/null
+++ b/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 (
+
+
+
+ )
+}
diff --git a/src/hooks/useEPNSEmbed.js b/src/hooks/useEPNSEmbed.js
new file mode 100644
index 000000000..3e67f46f0
--- /dev/null
+++ b/src/hooks/useEPNSEmbed.js
@@ -0,0 +1,49 @@
+import { useEffect } from 'react'
+/** intend to replace this with npm package */
+import EmbedSDK from '../utils/embedsdk.esm'
+
+// if only there was a way to pass down chainId to this hook from "Home"!
+const CURRENT_SUPPORTED_NETWORK = ['main', 'kovan']
+const isSupported = (nw = '') => {
+ return CURRENT_SUPPORTED_NETWORK.includes(nw?.toLowerCase())
+}
+
+export const useEPNSEmbed = ({
+ user,
+ targetID,
+ appName,
+ isReadOnly,
+ network
+}) => {
+ const isEpnsSupportedNetwork = isSupported(network)
+
+ useEffect(() => {
+ const shouldTriggerSDK =
+ isEpnsSupportedNetwork && user && targetID && appName && !isReadOnly
+
+ if (shouldTriggerSDK && 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 (shouldTriggerSDK && typeof EmbedSDK.cleanup === 'function') {
+ EmbedSDK.cleanup()
+ }
+ }
+ }, [user, targetID, appName, isReadOnly, network])
+
+ return {
+ isEpnsSupportedNetwork
+ }
+}
diff --git a/src/hooks/useEPNSEmbed.spec.js b/src/hooks/useEPNSEmbed.spec.js
new file mode 100644
index 000000000..251635fd1
--- /dev/null
+++ b/src/hooks/useEPNSEmbed.spec.js
@@ -0,0 +1,42 @@
+/** 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',
+ network: 'Main'
+ }
+
+ 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)
+ })
+})
diff --git a/src/routes/Home.js b/src/routes/Home.js
index 3f1c8a4ac..89334ab21 100644
--- a/src/routes/Home.js
+++ b/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,14 @@ export default ({ match }) => {
variables: { address: accounts?.[0] }
})
+ const { isEpnsSupportedNetwork } = useEPNSEmbed({
+ user: accounts?.[0],
+ targetID: epnsTriggerId,
+ appName: epnsTriggerAppName,
+ isReadOnly,
+ network
+ })
+
return (
@@ -330,6 +343,11 @@ export default ({ match }) => {
)}