feat: add email subscription modal (#763)

* refactor(constants): use production environment dev portal

* refactor(constants): add comments

* refactor(constants): remove todo comment

* refactor(auth): add promo mode

* refactor(auth): open modal after wallet is connected

* refactor(auth): set modal to open after app restart if user clicks import MM

* refactor(auth): use promo mode from LD

* feat: add email promo

* refactor(email-subscription): use LD flag

* chore: add .env.example

Author: eliobricenov

.env.example

@@ -0,0 +1 @@
+VITE_LD_ENVIRONMENT_ID=<LAUNCHDARKLY_ENVIRONMENT_ID>

src/backend/api/misc.ts

@@ -216,6 +216,10 @@ export const openAuthModalIfAppReloads = () => {
   ipcRenderer.send('openAuthModalIfAppReloads')
 }
 
+export const openEmailModalIfAppReloads = () => {
+  ipcRenderer.send('openEmailModalIfAppReloads')
+}
+
 export const handleLogOut = (
   cb: WrapRendererCallback<() => void>
 ): (() => void) => {

src/backend/email_modal_provider_preload.ts

@@ -0,0 +1,22 @@
+import { contextBridge, ipcRenderer, webFrame } from 'electron'
+
+const removeBackground = `
+document.onreadystatechange = function(e)
+{
+  if (document.readyState === 'interactive')
+  {
+    const styles = 'body, html { background: transparent !important } div.layout-root { padding: 0px !important; padding-top: 10px !important; }'
+    const styleSheet = document.createElement('style')
+    styleSheet.innerText = styles
+    document.head.appendChild(styleSheet)
+  }
+};
+`
+
+contextBridge.exposeInMainWorld('authApi', {
+  closeAuthModal: () => {
+    ipcRenderer.sendToHost('closeAuthModal')
+  }
+})
+
+webFrame.executeJavaScript(removeBackground)

src/backend/main.ts

@@ -423,6 +423,11 @@ if (!gotTheLock) {
       path.join(__dirname, 'auth_provider_preload.js')
     ])
 
+    const emailModalSession = session.fromPartition('persist:emailModal')
+    emailModalSession.setPreloads([
+      path.join(__dirname, 'email_modal_provider_preload.js')
+    ])
+
     const hpStoreSession = session.fromPartition('persist:hyperplaystore')
     hpStoreSession.setPreloads([
       path.join(__dirname, 'hyperplay_store_preload.js'),

src/common/constants.ts

@@ -8,5 +8,4 @@ export const METAMASK_SNAPS_URL = 'https://snaps.metamask.io/'
 export const METAMASK_SNAPS_EXTERNAL_URL = 'https://metamask.io/snaps/'
 export const METAMASK_PORTFOLIO_URL = 'https://portfolio.metamask.io/'
 
-export const DEV_PORTAL_URL =
-  'https://hyperplay-dev-git-feature-unified-auth-ui-valist.vercel.app/'
+export const DEV_PORTAL_URL = 'https://developers.hyperplay.xyz/'

src/common/typedefs/ipcBridge.d.ts

@@ -79,6 +79,7 @@ interface HyperPlaySyncIPCFunctions {
   setQaToken: (qaToken: string) => void
   removeFromLibrary: (appName: string) => void
   openAuthModalIfAppReloads: () => void
+  openEmailModalIfAppReloads: () => void
   overlayReady: () => void
   updateOverlayWindow: (state: OverlayWindowState) => void
   toggleIsPopupOpen: () => void

src/common/types/electron_store.ts

@@ -98,6 +98,7 @@ export interface StoreStructure {
     completedEarlyAccess: boolean
     completedDataPrivacy: boolean
     openAuthModalIfAppReloads: boolean
+    openEmailModalIfAppReloads: boolean
   }
   hpLibraryStore: {
     [key: string]: GameInfo[]

src/frontend/App.tsx

@@ -36,6 +36,7 @@ import AuthModal from './components/UI/AuthModal'
 import { WalletOnboardCloseReason } from 'common/types'
 import { DeviceStateController } from './state/DeviceState'
 import { useFlags } from 'launchdarkly-react-client-sdk'
+import EmailSubscriptionModal from './components/UI/EmailSubscriptionModal'
 
 function App() {
   const { sidebarCollapsed, isSettingsModalOpen, connectivity } =
@@ -58,6 +59,7 @@ function App() {
           <DialogHandler />
           <ExternalLinkDialog />
           <AuthModal />
+          <EmailSubscriptionModal />
           <StoreNavHandler />
           {isSettingsModalOpen.gameInfo && (
             <SettingsModal

src/frontend/components/UI/EmailSubscriptionModal/index.module.scss

@@ -0,0 +1,4 @@
+.webview {
+  width: 620px;
+  height: 490px;
+}

src/frontend/components/UI/EmailSubscriptionModal/index.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import { ModalAnimation } from '@hyperplay/ui'
+import { WebviewTag } from 'electron'
+import { observer } from 'mobx-react-lite'
+import { DEV_PORTAL_URL } from 'common/constants'
+import emailSubscriptionState from '../../../state/EmailSubscriptionState'
+import { useFlags } from 'launchdarkly-react-client-sdk'
+
+const url = `${DEV_PORTAL_URL}/signin?isLauncher=true&promoMode=true`
+
+const EmailSubscriptionModal = () => {
+  const flags = useFlags()
+  const webviewRef = useRef<WebviewTag>(null)
+  const isEnabled = flags.emailSubscriptionModal
+
+  useEffect(() => {
+    const webview = webviewRef.current
+    if (!webview) return
+
+    const handleIpcMessage = async (event: Electron.IpcMessageEvent) => {
+      switch (event.channel) {
+        case 'closeAuthModal':
+          emailSubscriptionState.closeEmailModal()
+          break
+        default:
+          break
+      }
+    }
+
+    const handleDomReady = () => {
+      webview.addEventListener('ipc-message', handleIpcMessage)
+    }
+
+    webview.addEventListener('dom-ready', handleDomReady)
+
+    return () => {
+      webview.removeEventListener('dom-ready', handleDomReady)
+      webview.removeEventListener('ipc-message', handleIpcMessage)
+    }
+  }, [])
+
+  return (
+    <ModalAnimation
+      isOpen={isEnabled && emailSubscriptionState.isEmailModalOpen}
+      onClose={() => emailSubscriptionState.closeEmailModal()}
+    >
+      <webview
+        ref={webviewRef}
+        src={url}
+        className={styles.webview}
+        partition="persist:emailModal"
+        allowpopups={'true' as unknown as boolean | undefined}
+        useragent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15"
+      />
+    </ModalAnimation>
+  )
+}
+
+export default observer(EmailSubscriptionModal)

src/frontend/screens/Onboarding/walletSelection/index.tsx

@@ -33,6 +33,7 @@ import StatusScreen, { CONNECTION_STATUS } from './screens/status'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { ONBOARDING_SCREEN } from '../types'
+import emailSubscriptionState from '../../../state/EmailSubscriptionState'
 
 enum WALLET_SELECTION_DETAILS_SCREEN {
   INFO = 'INFO',
@@ -144,6 +145,7 @@ const WalletSelection: React.FC<WalletSelectionProps> = function (props) {
     dbPath?: string,
     browser?: ImportableBrowser
   ) {
+    emailSubscriptionState.enableOpenEmailModalOnAppReload()
     if (mmInitMethod === 'CREATE' || mmInitMethod === 'SECRET_PHRASE') {
       window.api.createNewMetaMaskWallet(mmInitMethod)
     } else {
@@ -165,6 +167,7 @@ const WalletSelection: React.FC<WalletSelectionProps> = function (props) {
     })
     wait(4000).then(() => {
       props.disableOnboarding('connected')
+      emailSubscriptionState.openEmailModal()
     })
   }
 

src/frontend/state/EmailSubscriptionState.ts

@@ -0,0 +1,32 @@
+import { onboardingStore } from 'frontend/helpers/electronStores'
+import { makeAutoObservable } from 'mobx'
+
+class EmailSubscriptionState {
+  private modalOpen = false
+
+  constructor() {
+    makeAutoObservable(this)
+    this.modalOpen = onboardingStore.get('openEmailModalIfAppReloads', false)
+    onboardingStore.set('openEmailModalIfAppReloads', false)
+  }
+
+  get isEmailModalOpen() {
+    return this.modalOpen
+  }
+
+  openEmailModal() {
+    this.modalOpen = true
+  }
+
+  closeEmailModal() {
+    this.modalOpen = false
+  }
+
+  enableOpenEmailModalOnAppReload() {
+    onboardingStore.set('openEmailModalIfAppReloads', true)
+  }
+}
+
+const emailSubscriptionState = new EmailSubscriptionState()
+
+export default emailSubscriptionState

src/frontend/state/authState.ts

@@ -44,6 +44,10 @@ class AuthState {
   setPendingSignatureRequest(pending: boolean) {
     this.pendingSignatureRequest = pending
   }
+
+  enableOpenAuthModalOnAppReload() {
+    onboardingStore.set('openAuthModalIfAppReloads', true)
+  }
 }
 
 const authState = new AuthState()

vite.config.ts

@@ -102,6 +102,12 @@ export default defineConfig({
           __dirname + '/src/backend/auth_provider_preload.ts'
         ),
         vite: electronViteConfig
+      },
+      {
+        entry: path.resolve(
+          __dirname + '/src/backend/email_modal_provider_preload.ts'
+        ),
+        vite: electronViteConfig
       }
     ]),
     svgr()