[Feat] Add Portfolio to Overlay

src/backend/storeManagers/storeManagerCommon/games.ts

@@ -26,7 +26,12 @@ import { access, chmod } from 'fs/promises'
 import shlex from 'shlex'
 import { showDialogBoxModalAuto } from '../../dialog/dialog'
 import { createAbortController } from '../../utils/aborthandler/aborthandler'
-import { app, BrowserWindow } from 'electron'
+import {
+  app,
+  BrowserWindow,
+  BrowserWindowConstructorOptions,
+  WindowOpenHandlerResponse
+} from 'electron'
 import { gameManagerMap } from '../index'
 const buildDir = resolve(__dirname, '../../build')
 import { domainsAreEqual } from 'common/utils'
@@ -47,6 +52,24 @@ export function logFileLocation(appName: string) {
   return join(gamesConfigPath, `${appName}-lastPlay.log`)
 }
 
+const openBlankWindow = (options: BrowserWindowConstructorOptions) => {
+  options.show = false
+  const browserGame = new BrowserWindow(options)
+
+  browserGame.webContents.on('will-navigate', async (...params) => {
+    import('@hyperplay/extension-importer').then((extensionImporter) => {
+      extensionImporter?.windowOpenHandlerForExtension(
+        params[0].url,
+        browserGame.webContents,
+        hpApi
+      )
+      browserGame.close()
+    })
+  })
+
+  return browserGame.webContents
+}
+
 const openNewBrowserGameWindow = async (
   browserUrl: string,
   gameInfo: GameInfo
@@ -62,6 +85,35 @@ const openNewBrowserGameWindow = async (
     logError(`Error importing proxy server ${err}`, LogPrefix.HyperPlay)
   }
   const hpOverlay = await getHpOverlay()
+  const urlParent = new URL(browserUrl)
+
+  function handleUrlOpen(
+    url: string,
+    contents: Electron.WebContents
+  ): WindowOpenHandlerResponse {
+    const urlToOpen = new URL(url)
+    const protocol = urlToOpen.protocol
+
+    if (url === 'about:blank') {
+      return { action: 'allow', createWindow: openBlankWindow }
+    }
+
+    if (
+      ['https:', 'http:'].includes(protocol) &&
+      domainsAreEqual(urlToOpen, urlParent)
+    ) {
+      openNewBrowserGameWindow(url, gameInfo)
+      return { action: 'deny' }
+    }
+    return (
+      extensionImporter?.windowOpenHandlerForExtension(
+        url,
+        contents,
+        hpApi
+      ) ?? { action: 'deny' }
+    )
+  }
+
   return new Promise((res) => {
     const browserGame = new BrowserWindow({
       icon: icon,
@@ -120,7 +172,6 @@ const openNewBrowserGameWindow = async (
           gameInfo.runner
         }`
 
-    const urlParent = new URL(browserUrl)
     const openNewBroswerGameWindowListener = (
       ev: Electron.Event,
       contents: Electron.WebContents
@@ -134,24 +185,9 @@ const openNewBrowserGameWindow = async (
         )
 
         /* this overrides the handler set in extension-importer but falls back to its behavior */
-        contents.setWindowOpenHandler(({ url }) => {
-          const urlToOpen = new URL(url)
-          const protocol = urlToOpen.protocol
-
-          if (
-            ['https:', 'http:'].includes(protocol) &&
-            domainsAreEqual(urlToOpen, urlParent)
-          ) {
-            openNewBrowserGameWindow(url, gameInfo)
-            return { action: 'deny' }
-          }
-          return (
-            extensionImporter?.windowOpenHandlerForExtension(
-              url,
-              contents,
-              hpApi
-            ) ?? { action: 'deny' }
-          )
+        contents.setWindowOpenHandler((handler) => {
+          const { url } = handler
+          return handleUrlOpen(url, contents)
         })
       }
     }

src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/index.module.scss

@@ -0,0 +1,3 @@
+.disabled {
+  cursor: not-allowed !important;
+}

src/frontend/OverlayManager/Overlay/NavBarOverlayWrapper/index.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import styles from './index.module.scss'
+import { t } from 'i18next'
+import { NavBarOverlay, NavItem, Images } from '@hyperplay/ui'
+import { Link, useLocation } from 'react-router-dom'
+
+export function NavBarOverlayWrapper() {
+  const location = useLocation()
+  const { pathname } = location
+  const [collapsed, setCollapsed] = useState(false)
+  const comingSoonText = t('overlay.comingSoon', 'Coming Soon')
+
+  return (
+    <NavBarOverlay
+      linkItems={[
+        <NavItem
+          title={'Quests'}
+          route={'/quests'}
+          icon={<Images.QuestIcon fill="white" />}
+          key={'/quests'}
+          collapsed={collapsed}
+          currentRoute={pathname === '/' ? '/quests' : pathname}
+          component={Link}
+          to={'/quests'}
+        />,
+        <NavItem
+          title={'Portfolio'}
+          route={'/portfolio'}
+          icon={
+            <Images.MetaMaskColored
+              fill="none"
+              width={22}
+              height={36}
+              opacity={pathname === '/portfolio' ? '100%' : '60%'}
+            />
+          }
+          key={'/portfolio'}
+          collapsed={collapsed}
+          currentRoute={pathname}
+          component={Link}
+          to={'/portfolio'}
+        />,
+        <NavItem
+          title={'Marketplace'}
+          route={'/marketplace'}
+          icon={<Images.Home fill="white" />}
+          key={'/marketplace'}
+          collapsed={collapsed}
+          currentRoute={pathname}
+          classNames={{ link: styles.disabled }}
+          secondaryTag={comingSoonText}
+        />,
+        <NavItem
+          title={'Achievements'}
+          route={'/achievements'}
+          icon={<Images.TrophyOutline fill="white" />}
+          key={'/achievements'}
+          collapsed={collapsed}
+          currentRoute={pathname}
+          classNames={{ link: styles.disabled }}
+          secondaryTag={comingSoonText}
+        />
+      ]}
+      setCollapsed={setCollapsed}
+      collapsed={collapsed}
+    />
+  )
+}

src/frontend/OverlayManager/Overlay/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import BrowserGameStyles from './index.module.scss'
 import ToastManager from '../ToastManager'
 import { PROVIDERS } from 'common/types/proxy-types'
@@ -9,17 +9,19 @@ import { t } from 'i18next'
 import ExtensionManager from 'frontend/ExtensionManager'
 import TransactionState from 'frontend/state/TransactionState'
 import { BrowserGameProps } from '../types'
-import { Button, NavBarOverlay, NavItem, Images } from '@hyperplay/ui'
+import { Button } from '@hyperplay/ui'
 import { QuestsViewer } from 'frontend/components/UI/QuestsViewer'
 import { useFlags } from 'launchdarkly-react-client-sdk'
 import libraryState from 'frontend/state/libraryState'
 import classNames from 'classnames'
+import { HashRouter, Route, Routes } from 'react-router-dom'
+import MetaMaskPortfolio from 'frontend/screens/MetaMaskPortfolio'
+import { NavBarOverlayWrapper } from './NavBarOverlayWrapper'
 
 export const Overlay = observer(function ({
   appName,
   runner
 }: BrowserGameProps) {
-  const [collapsed, setCollapsed] = useState(false)
   const flags = useFlags()
   const txnToastContainerStyle = {} as React.CSSProperties
   if (OverlayState.title === 'HyperPlay Toasts') {
@@ -120,68 +122,21 @@ export const Overlay = observer(function ({
       questsViewer = <QuestsViewer projectId={appName} />
     }
 
-    const selectedRoute = '/quests'
     const classNameMods: Record<string, boolean> = {}
     classNameMods[BrowserGameStyles.hideOverlay] = !OverlayState.showOverlay
 
-    const comingSoonText = t('overlay.comingSoon', 'Coming Soon')
-
     overlayItems = (
       <div className={classNames(BrowserGameStyles.root, classNameMods)}>
         <div className={BrowserGameStyles.bgFilter} />
         <div className={BrowserGameStyles.contentContainer}>
-          <NavBarOverlay
-            linkItems={[
-              <NavItem
-                title={'Quests'}
-                route={'/quests'}
-                icon={<Images.QuestIcon fill="white" />}
-                key={'/quests'}
-                collapsed={collapsed}
-                currentRoute={selectedRoute}
-              />,
-              <NavItem
-                title={'Marketplace'}
-                route={'/marketplace'}
-                icon={<Images.Home fill="white" />}
-                key={'/marketplace'}
-                collapsed={collapsed}
-                currentRoute={selectedRoute}
-                classNames={{ link: BrowserGameStyles.disabled }}
-                secondaryTag={comingSoonText}
-              />,
-              <NavItem
-                title={'Achievements'}
-                route={'/achievements'}
-                icon={<Images.TrophyOutline fill="white" />}
-                key={'/achievements'}
-                collapsed={collapsed}
-                currentRoute={selectedRoute}
-                classNames={{ link: BrowserGameStyles.disabled }}
-                secondaryTag={comingSoonText}
-              />,
-              <NavItem
-                title={'Portfolio'}
-                route={'/portfolio'}
-                icon={
-                  <Images.MetaMaskColored
-                    fill="none"
-                    width={22}
-                    height={36}
-                    opacity={'60%'}
-                  />
-                }
-                key={'/portfolio'}
-                collapsed={collapsed}
-                currentRoute={selectedRoute}
-                classNames={{ link: BrowserGameStyles.disabled }}
-                secondaryTag={comingSoonText}
-              />
-            ]}
-            setCollapsed={setCollapsed}
-            collapsed={collapsed}
-          />
-          {questsViewer}
+          <HashRouter>
+            <NavBarOverlayWrapper />
+            <Routes>
+              <Route path="/" element={questsViewer} />
+              <Route path="/quests" element={questsViewer} />
+              <Route path="/portfolio" element={<MetaMaskPortfolio />} />
+            </Routes>
+          </HashRouter>
           <div className={BrowserGameStyles.rightSideContainer}>
             {exitGameButton}
             {extensionManager}

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

@@ -0,0 +1,26 @@
+@import '@hyperplay/ui/utilities/_loading.scss';
+
+.homeDiv {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.homeWebview {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+}
+
+.hide {
+  display: none;
+}
+
+.loader {
+  @include shinyLoader;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 0;
+}

src/frontend/screens/MetaMaskPortfolio/index.tsx

@@ -1,19 +1,22 @@
-import React from 'react'
-import MetaMaskPortfolioStyles from './index.module.css'
+import React, { useRef } from 'react'
+import MetaMaskPortfolioStyles from './index.module.scss'
 import { useParams } from 'react-router-dom'
 
 const MetaMaskPortfolio = function () {
   const trueAsStr = 'true' as unknown as boolean | undefined
   const { page = '' } = useParams() as { page: string }
+  const webviewRef = useRef<HTMLWebViewElement>(null)
 
   return (
     <>
       <div className={MetaMaskPortfolioStyles.homeDiv}>
+        <div className={MetaMaskPortfolioStyles.loader}></div>
         <webview
           className={MetaMaskPortfolioStyles.homeWebview}
           src={`https://portfolio.metamask.io/${page}`}
           allowpopups={trueAsStr}
           partition={'persist:InPageWindowEthereumExternalWallet'}
+          ref={webviewRef}
         />
       </div>
     </>