[Feature] Add MetaMask Home and Portfolio Pages (#83)

* other: move extensions folder to public folder

* fix: git ignoring js extensions file

* chore: updated electron and electron-builder

* fix: extension manifest permissions

* chore: check on frontend it window.ethereum is available

* fix: popup not found

* add latest metamask chrome extension

* rm metamask 10.22.2

* Update hyperplay-extension-helper

* rm webRequest permission and calls, log ext error

* Update manifest.json

* rm mm v10.23.22 add mm v10.22.2

* don't upgrade electron

* return correct tab url for packaged build

* mv electron to dev dep

* dont format mm js files on save

* rm webRequest permission

* fix mm for file protocol pages and handle streamMiddleware as warnings not errors

* fix window.ethereum retry

* add declaration for css modules

* add mm full screen home page

* Update hyperplay-extension-helper

* add metamask portfolio page

* open mm home page instead of separate browser window

* Fix mm sidebar links

* only show mm sidebar links if mm extension was selected

* fix merge

* Update hyperplay-extension-helper

* fix home extension id

* Update hyperplay-extension-helper

Co-authored-by: Flavio F Lima <flavioislima@gmail.com>

Author: BrettCleary

src/backend/hyperplay-extension-helper

@@ -0,0 +1 @@
+declare module '*.module.css'

src/common/typings.d.ts

@@ -17,6 +17,8 @@ import { ControllerHints, OfflineMessage } from './components/UI'
 import DownloadManager from './screens/DownloadManager'
 import DialogHandler from './components/UI/DialogHandler'
 import ExtensionHandler from './ExtensionHandler'
+import MetaMaskHome from './screens/MetaMaskHome'
+import MetaMaskPortfolio from './screens/MetaMaskPortfolio'
 import ExtensionManager from './ExtensionManager'
 import onboardingStore from './store/OnboardingStore'
 import { observer } from 'mobx-react-lite'
@@ -40,6 +42,8 @@ function App() {
             <Route path="epicstore" element={<WebView />} />
             <Route path="gogstore" element={<WebView />} />
             <Route path="wiki" element={<WebView />} />
+            <Route path="metamaskHome" element={<MetaMaskHome />} />
+            <Route path="metamaskPortfolio" element={<MetaMaskPortfolio />} />
             <Route path="/gamepage">
               <Route path=":runner">
                 <Route path=":appName" element={<GamePage />} />

src/frontend/App.tsx

@@ -1,6 +1,9 @@
 import React, { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 const ExtensionHandler = function () {
+  const navigate = useNavigate()
+
   async function handleRequest(
     event: Event,
     id: number,
@@ -16,6 +19,10 @@ const ExtensionHandler = function () {
     }
   }
 
+  async function handleOpenMMHomePage() {
+    navigate('metamaskHome')
+  }
+
   const bindEthereumListeners = function () {
     window.addEventListener('message', (event: MessageEvent) => {
       console.log('window message received = ', JSON.stringify(event, null, 4))
@@ -39,8 +46,11 @@ const ExtensionHandler = function () {
 
     const removeRequestListener =
       window.api.handleMetamaskExtensionRequests(handleRequest)
+    const removeOpenMetaMaskHomePageListener =
+      window.api.handleOpenMetaMaskHomePage(handleOpenMMHomePage)
     return () => {
       removeRequestListener()
+      removeOpenMetaMaskHomePageListener()
     }
   }
 

src/frontend/ExtensionHandler/index.tsx

@@ -136,6 +136,7 @@ export default function SidebarLinks() {
           <span>{t('library.label', 'Library')}</span>
         </>
       </NavLink>
+
       <h6 className="Sidebar__categoryTitle">ACCOUNTS</h6>
       {!loggedIn && (
         <NavLink

src/frontend/assets/metamask-rounded-outline.svg

@@ -5,7 +5,7 @@
   z-index: 10;
   display: grid;
   grid-template-rows: min-content 2fr min-content min-content;
-  grid-template-areas: 'links' 'utils' 'updates' 'version' 'wallet';
+  grid-template-areas: 'links' 'utils' 'updates' 'version' 'mmHome' 'wallet';
   grid-area: sidebar;
   height: 100%;
   padding: 0;

src/frontend/components/UI/Sidebar/components/SidebarLinks/index.tsx

@@ -13,11 +13,17 @@ import SidebarLinks from './components/SidebarLinks'
 import './index.css'
 import Wallet from './components/wallet'
 import { DMQueueElement } from 'common/types'
+import { NavLink } from 'react-router-dom'
+import { ReactComponent as MetaMaskRoundedOutline } from 'frontend/assets/metamask-rounded-outline.svg'
 import { observer } from 'mobx-react-lite'
 
 const Sidebar = observer(() => {
   const { t } = useTranslation()
-  const { sidebarCollapsed, setSideBarCollapsed } = useContext(ContextProvider)
+  const {
+    sidebarCollapsed,
+    setSideBarCollapsed,
+    showMetaMaskBrowserSidebarLinks
+  } = useContext(ContextProvider)
   const [currentDMElement, setCurrentDMElement] = useState<DMQueueElement>()
   const [badgeText, setBadgeText] = useState('0')
 
@@ -59,12 +65,47 @@ const Sidebar = observer(() => {
         )}
       </div>
 
-      <button
-        className="Sidebar__item"
-        onClick={async () => window.api.showPopup()}
-      >
-        <span>Open MetaMask {badgeText}</span>
-      </button>
+      {showMetaMaskBrowserSidebarLinks ? (
+        <>
+          <button
+            className="Sidebar__item"
+            onClick={async () => window.api.showPopup()}
+          >
+            <>
+              <div className="Sidebar__itemIcon">
+                <MetaMaskRoundedOutline />
+              </div>
+              <span>MetaMask Popup {badgeText}</span>
+            </>
+          </button>
+          <NavLink
+            className={({ isActive }) =>
+              classNames('Sidebar__item', { active: isActive })
+            }
+            to={'metamaskPortfolio'}
+          >
+            <>
+              <div className="Sidebar__itemIcon">
+                <MetaMaskRoundedOutline />
+              </div>
+              <span>{'MetaMask Portfolio'}</span>
+            </>
+          </NavLink>
+          <NavLink
+            className={({ isActive }) =>
+              classNames('Sidebar__item', { active: isActive })
+            }
+            to={'metamaskHome'}
+          >
+            <>
+              <div className="Sidebar__itemIcon">
+                <MetaMaskRoundedOutline />
+              </div>
+              <span>{'MetaMask Home'}</span>
+            </>
+          </NavLink>
+        </>
+      ) : null}
 
       <Wallet onClick={() => onboardingStore.openOnboarding()} />
       <button

src/frontend/components/UI/Sidebar/index.css

@@ -0,0 +1,7 @@
+.homeDiv {
+  height: 100%;
+}
+
+.homeWebview {
+  height: 100%;
+}

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

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react'
+import MetaMaskHomeStyles from './index.module.css'
+
+const MetaMaskHome = function () {
+  const [extId, setExtId] = useState('')
+
+  useEffect(() => {
+    window.api.getExtensionId().then((id) => setExtId(id))
+  }, [])
+
+  return (
+    <>
+      <div className={MetaMaskHomeStyles.homeDiv}>
+        <webview
+          className={MetaMaskHomeStyles.homeWebview}
+          src={`chrome-extension://${extId}/home.html`}
+        />
+      </div>
+    </>
+  )
+}
+
+export default MetaMaskHome

src/frontend/screens/MetaMaskHome/index.module.css

@@ -0,0 +1,7 @@
+.homeDiv {
+  height: 100%;
+}
+
+.homeWebview {
+  height: 100%;
+}

src/frontend/screens/MetaMaskHome/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import MetaMaskPortfolioStyles from './index.module.css'
+
+const MetaMaskPortfolio = function () {
+  return (
+    <>
+      <div className={MetaMaskPortfolioStyles.homeDiv}>
+        <webview
+          className={MetaMaskPortfolioStyles.homeWebview}
+          src="https://portfolio.metamask.io/"
+        />
+      </div>
+    </>
+  )
+}
+
+export default MetaMaskPortfolio

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

@@ -5,7 +5,7 @@ import {
   ConnectionRequestRejectedType
 } from 'backend/hyperplay-proxy-server/commonProxyTypes'
 import { PROVIDERS } from 'common/types/proxy-types'
-import React, { Reducer, useEffect, useReducer } from 'react'
+import React, { Reducer, useEffect, useReducer, useContext } from 'react'
 import './index.css'
 import Scan from './scan'
 import { ONBOARDING_CONTENT, OnboardingModalConfig } from './types'
@@ -16,6 +16,7 @@ import Success from './success'
 import Rejected from './rejected'
 import Download from './download'
 import { BackArrow, CloseX } from 'frontend/assets/hyperplay'
+import ContextProvider from 'frontend/state/ContextProvider'
 
 interface OnboardingProps {
   disableOnboarding: () => void
@@ -37,7 +38,10 @@ const Onboarding: React.FC<OnboardingProps> = function (props) {
     Reducer<ContentParams, Partial<ContentParams>>
   >((state, newState) => ({ ...state, ...newState }), contentParamsInit)
 
+  const { setShowMetaMaskBrowserSidebarLinks } = useContext(ContextProvider)
+
   async function handleProviderClicked(provider: PROVIDERS) {
+    setShowMetaMaskBrowserSidebarLinks(false)
     const uris: UrisReturn = await window.api.getConnectionUris(provider)
     const qrCodeLink: IMobileRegistryEntryWithQrLink = uris.metamask
     const qrCode = qrCodeLink.qrCodeLink
@@ -54,6 +58,7 @@ const Onboarding: React.FC<OnboardingProps> = function (props) {
   }
 
   async function handleMmExtensionProviderClicked() {
+    setShowMetaMaskBrowserSidebarLinks(true)
     await window.api.getConnectionUris(PROVIDERS.METAMASK_EXTENSION)
     props.disableOnboarding()
   }

src/frontend/screens/MetaMaskPortfolio/index.tsx

@@ -67,7 +67,9 @@ const initialContext: ContextType = {
   setSecondaryFontFamily: () => null,
   dialogModalOptions: { showDialog: false },
   showDialogModal: () => null,
-  showResetDialog: () => null
+  showResetDialog: () => null,
+  showMetaMaskBrowserSidebarLinks: false,
+  setShowMetaMaskBrowserSidebarLinks: () => null
 }
 
 export default React.createContext(initialContext)

src/frontend/screens/Onboarding/index.tsx

@@ -88,6 +88,7 @@ interface StateProps {
   connectivity: { status: ConnectivityStatus; retryIn: number }
   dialogModalOptions: DialogModalOptions
   sideloadedLibrary: GameInfo[]
+  showMetaMaskBrowserSidebarLinks: boolean
 }
 
 export class GlobalState extends PureComponent<Props> {
@@ -164,7 +165,8 @@ export class GlobalState extends PureComponent<Props> {
     activeController: '',
     connectivity: { status: 'offline', retryIn: 0 },
     sideloadedLibrary: sideloadLibrary.get('games', []) as GameInfo[],
-    dialogModalOptions: { showDialog: false }
+    dialogModalOptions: { showDialog: false },
+    showMetaMaskBrowserSidebarLinks: false
   }
 
   setLanguage = (newLanguage: string) => {
@@ -222,6 +224,10 @@ export class GlobalState extends PureComponent<Props> {
     this.setState({ sidebarCollapsed: value })
   }
 
+  setShowMetaMaskBrowserSidebarLinks = (value: boolean) => {
+    this.setState({ showMetaMaskBrowserSidebarLinks: value })
+  }
+
   hideGame = (appNameToHide: string, appTitle: string) => {
     const newHiddenGames = [
       ...this.state.hiddenGames,
@@ -743,7 +749,9 @@ export class GlobalState extends PureComponent<Props> {
           setPrimaryFontFamily: this.setPrimaryFontFamily,
           setSecondaryFontFamily: this.setSecondaryFontFamily,
           showDialogModal: this.handleShowDialogModal,
-          showResetDialog: this.showResetDialog
+          showResetDialog: this.showResetDialog,
+          setShowMetaMaskBrowserSidebarLinks:
+            this.setShowMetaMaskBrowserSidebarLinks
         }}
       >
         {this.props.children}

src/frontend/state/ContextProvider.tsx

@@ -79,6 +79,8 @@ export interface ContextType {
   showDialogModal: (options: DialogModalOptions) => void
   showResetDialog: () => void
   sideloadedLibrary: GameInfo[]
+  showMetaMaskBrowserSidebarLinks: boolean
+  setShowMetaMaskBrowserSidebarLinks: (value: boolean) => void
 }
 
 export type DialogModalOptions = {