[Feat] G7 Portal Webview (#1027)

* add test url

* add setup without optional

* temp fixes for arm64 mac test

* fixes

* revert yarn lock and package.json changes

* fix yarn lock

* fix url

* update g7 portal url

* implement latest designs

* rm vite config artifact

* fix lint

* update url

* whitelist app.game7.io wrt webview controls

* run yarn i18n

Author: BrettCleary

.gitignore

@@ -52,3 +52,5 @@ xyz.hyperplay.HyperPlay
 /public/extensions/resetExecutables/resetExtension-macos
 /public/extensions/resetExecutables/resetExtension.exe
 /public/extensions/resetExecutables/resetExtension
+
+electron.vite.config..*

public/locales/en/translation.json

@@ -787,7 +787,10 @@
                 "overlay": "You are currently not logged in, play streak progress will not be tracked. Please exit the game and login to HyperPlay via the top-right dropdown to track progress."
             }
         },
-        "quests": "Quests"
+        "quests": "Quests",
+        "viewAllQuests": {
+            "title": "View All Quests"
+        }
     },
     "queue": {
         "label": {

src/backend/main.ts

@@ -475,6 +475,11 @@ if (!gotTheLock) {
     epicStoreSession.setPreloads([
       path.join(__dirname, '../preload/webview_style_preload.js')
     ])
+    const g7PortalSession = session.fromPartition('persist:g7portal')
+    g7PortalSession.setPreloads([
+      path.join(__dirname, '../preload/hyperplay_store_preload.js'),
+      path.join(__dirname, '../preload/providerPreload.js')
+    ])
 
     // keyboards with alt and no option key can be used with mac so register both
     const hpOverlay = await getHpOverlay()

src/frontend/App.tsx

@@ -39,6 +39,7 @@ import EmailSubscriptionModal from './components/UI/EmailSubscriptionModal'
 import { UpdateModalController } from './components/UI/UpdateModalController'
 import { QuestsPage } from './screens/Quests'
 import { NavigateListener } from './NavigateListener'
+import G7Webview from './screens/G7Webview'
 
 function App() {
   const { sidebarCollapsed, isSettingsModalOpen, connectivity } =
@@ -101,6 +102,7 @@ function App() {
               path="metamaskSnaps"
               element={<WebView key="metamaskSnaps" />}
             />
+            <Route path="game7Portal" element={<G7Webview />} />
             <Route path="metamaskPortfolio" element={<MetaMaskPortfolio />}>
               <Route path=":page" element={<MetaMaskPortfolio />} />
             </Route>

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

@@ -5,15 +5,12 @@ import styles from './index.module.scss'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 
-let isShown = true
-
 export function G7CreditsModal() {
-  const [showModal, setShowModal] = useState(isShown)
+  const [showModal, setShowModal] = useState(true)
   const { t } = useTranslation()
   const navigate = useNavigate()
 
   function closeModal() {
-    isShown = false
     setShowModal(false)
   }
 
@@ -38,12 +35,21 @@ export function G7CreditsModal() {
       <Button
         type="secondary"
         onClick={() => {
-          navigate('/quests?search=Game7')
+          navigate('/game7Portal')
           closeModal()
         }}
       >
         {t('quests.g7CreditsModal.title', 'Earn Game7 Credits')}
       </Button>
+      <Button
+        type="tertiary"
+        onClick={() => {
+          navigate('/quests')
+          closeModal()
+        }}
+      >
+        {t('quests.viewAllQuests.title', 'View All Quests')}
+      </Button>
     </Modal>
   )
 }

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

@@ -17,6 +17,9 @@ interface WebviewControlsProps {
   initURL: string
   openInBrowser: boolean
   disableUrl?: boolean
+  classNames?: {
+    root?: string
+  }
 }
 
 function removeSelection(event: SyntheticEvent<unknown>) {
@@ -34,7 +37,8 @@ export default function WebviewControls({
   webview,
   initURL,
   openInBrowser,
-  disableUrl
+  disableUrl,
+  classNames
 }: WebviewControlsProps) {
   const [url, setUrl] = React.useState(initURL)
   const { t } = useTranslation()
@@ -87,14 +91,15 @@ export default function WebviewControls({
 
   const _url = url !== '' ? new URL(url) : null
   const allowList = [
-    'hyperplay-store-git-feat-gamepageactions-hyperplay.vercel.app',
-    'docs.hyperplay.xyz'
+    'store.hyperplay.xyz',
+    'docs.hyperplay.xyz',
+    'app.game7.io'
   ]
 
   if (_url && allowList.includes(_url.host)) return null
 
   return (
-    <div className="WebviewControls">
+    <div className={cx('WebviewControls', classNames?.root)}>
       <div className="WebviewControls__icons">
         <SvgButton
           className="WebviewControls__icon"

src/frontend/constants.ts

@@ -1,6 +1,6 @@
 export const EPIC_LOGIN_URL = 'https://legendary.gl/epiclogin'
-export const HYPERPLAY_STORE_URL =
-  'https://hyperplay-store-git-feat-gamepageactions-hyperplay.vercel.app?isLauncher=true'
+export const HYPERPLAY_STORE_URL = 'https://store.hyperplay.xyz?isLauncher=true'
+export const G7_PORTAL = 'https://app.game7.io/quests/hyperplay?layout=navless'
 export const EPIC_STORE_URL = 'https://www.epicgames.com/store'
 export const GOG_STORE_URL = `https://gog.com`
 export const WIKI_URL = 'https://docs.hyperplay.xyz/'

src/frontend/screens/G7Webview/index.module.scss

@@ -0,0 +1,26 @@
+.topBar {
+  margin-bottom: var(--space-md-fixed);
+  margin-top: var(--space-xl-fixed);
+  flex: 0;
+}
+
+.root {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.webviewRoot {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.webviewElement {
+  max-height: calc(100% - 30px);
+  flex: 1;
+}
+
+.webviewControls {
+  flex: 0;
+}

src/frontend/screens/G7Webview/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import WebView from '../WebView'
+import { CircularButton, Images } from '@hyperplay/ui'
+import styles from './index.module.scss'
+import { useNavigate } from 'react-router-dom'
+
+export default function G7Webview() {
+  const navigate = useNavigate()
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.topBar}>
+        <CircularButton onClick={() => navigate('/quests')}>
+          <Images.ArrowLeft />
+        </CircularButton>
+      </div>
+      <WebView
+        key="game7Portal"
+        classNames={{
+          root: styles.webviewRoot,
+          webview: styles.webviewElement,
+          webviewControls: styles.webviewControls
+        }}
+      />
+    </div>
+  )
+}

src/frontend/screens/WebView/index.tsx

@@ -21,6 +21,7 @@ import { observer } from 'mobx-react-lite'
 import {
   EPIC_LOGIN_URL,
   EPIC_STORE_URL,
+  G7_PORTAL,
   GOG_LOGIN_URL,
   GOG_STORE_URL,
   HYPERPLAY_STORE_URL,
@@ -29,6 +30,7 @@ import {
 import { METAMASK_SNAPS_URL } from 'common/constants'
 import storeAuthState from 'frontend/state/storeAuthState'
 import { getGameInfo } from 'frontend/helpers'
+import cn from 'classnames'
 
 function urlIsHpUrl(url: string) {
   const urlToTest = new URL(url)
@@ -42,7 +44,11 @@ function shouldInjectProvider(url: string) {
   return url === METAMASK_SNAPS_URL
 }
 
-function WebView() {
+function WebView({
+  classNames
+}: {
+  classNames?: { root?: string; webview?: string; webviewControls?: string }
+}) {
   const { i18n } = useTranslation()
   const { pathname, search } = useLocation()
   const { t } = useTranslation()
@@ -81,7 +87,8 @@ function WebView() {
     '/loginGOG': GOG_LOGIN_URL,
     '/loginweb/legendary': EPIC_LOGIN_URL,
     '/loginweb/gog': GOG_LOGIN_URL,
-    '/metamaskSnaps': METAMASK_SNAPS_URL
+    '/metamaskSnaps': METAMASK_SNAPS_URL,
+    '/game7Portal': G7_PORTAL
   }
 
   let startUrl = Object.prototype.hasOwnProperty.call(urls, pathname)
@@ -129,7 +136,7 @@ function WebView() {
   }, [startUrl, runner])
 
   useEffect(() => {
-    if (!urlIsHpUrl(startUrl)) {
+    if (!urlIsHpUrl(startUrl) && pathname !== '/game7Portal') {
       return
     }
 
@@ -264,23 +271,25 @@ function WebView() {
 
   let partitionForWebview = 'persist:epicstore'
 
+  if (pathname === '/game7Portal') partitionForWebview = 'persist:g7portal'
   if (urlIsHpUrl(startUrl)) partitionForWebview = 'persist:hyperplaystore'
   else if (shouldInjectProvider(startUrl))
     partitionForWebview = 'persist:InPageWindowEthereumExternalWallet'
 
   return (
-    <div className="WebView">
+    <div className={cn('WebView', classNames?.root)}>
       {webviewRef.current && (
         <WebviewControls
           webview={webviewRef.current}
           initURL={startUrl}
           openInBrowser={!startUrl.startsWith('login')}
+          classNames={{ root: classNames?.webviewControls }}
         />
       )}
       {loading.refresh && <UpdateComponent message={loading.message} />}
       <webview
         ref={webviewRef}
-        className="WebView__webview"
+        className={cn('WebView__webview', classNames?.webview)}
         partition={partitionForWebview}
         src={startUrl}
         allowpopups={trueAsStr}