using pulsing loader remove text and refresh spinner

public/locales/en/translation.json

@@ -720,6 +720,7 @@
         "links": {
             "bridge": "Bridge",
             "buy": "Buy",
+            "marketplace": "Marketplace",
             "portfolio": "Portfolio",
             "sell": "Sell",
             "swap": "Swap"

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

@@ -0,0 +1,33 @@
+import React from 'react'
+import { ContractMetadata } from '@valist/sdk/dist/typesApi'
+import { SubLink } from '@hyperplay/ui'
+import { Link, useLocation } from 'react-router-dom'
+import styles from '../../index.module.scss'
+
+export function MarketplaceSublinks(contractMetadata?: ContractMetadata[]) {
+  const location = useLocation()
+  const { pathname, search } = location
+  const searchParams = new URLSearchParams(search)
+  const urlQueryParam = searchParams.get('url')
+
+  const marketplaceSublinks = contractMetadata
+    ?.filter((val) => !!val.marketplace_urls)
+    .flatMap((val) =>
+      (val.marketplace_urls ?? [])
+        .filter((val) => !!val)
+        .map((mktUrl) => {
+          return (
+            <SubLink
+              key={val.name}
+              component={Link}
+              to={`/marketplace?url=${encodeURIComponent(mktUrl)}`}
+              selected={pathname === '/marketplace' && urlQueryParam === mktUrl}
+              className={styles.sublink}
+            >
+              {val.name}
+            </SubLink>
+          )
+        })
+    )
+  return marketplaceSublinks
+}

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

@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { Images, NavItem } from '@hyperplay/ui'
+import { useLocation } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { BrowserGameProps } from 'frontend/OverlayManager/types'
+import styles from '../index.module.scss'
+import classNames from 'classnames'
+import { useTranslation } from 'react-i18next'
+import { MarketplaceSublinks } from './MarketplaceSublinks'
+
+export interface MarketplaceNavItemProps extends BrowserGameProps {
+  collapsed: boolean
+}
+
+export function MarketplaceNavItem({
+  appName,
+  runner,
+  collapsed,
+  ...props
+}: MarketplaceNavItemProps) {
+  const location = useLocation()
+  const { pathname } = location
+  const [mktCollapsed, setMktCollapsed] = useState(false)
+  const { t } = useTranslation()
+
+  const { data: gameInfo } = useQuery({
+    queryKey: ['getGameInfo', appName],
+    queryFn: async () => {
+      return window.api.getGameInfo(appName, runner)
+    }
+  })
+
+  const gameInfoExists = !!gameInfo
+  const gameInfoHasSomeMarketplaceUrls = !!gameInfo?.networks?.some(
+    (val) => !!val.marketplace_urls?.length
+  )
+  const marketplaceEnabled = gameInfoExists && gameInfoHasSomeMarketplaceUrls
+  const marketplaceClass: Record<string, boolean> = {}
+  marketplaceClass[styles.disabled] = !marketplaceEnabled
+
+  if (!marketplaceEnabled) {
+    return null
+  }
+
+  return (
+    <NavItem
+      title={t('overlay.links.marketplace', 'Marketplace')}
+      icon={<Images.Home fill="white" />}
+      key={'/marketplace'}
+      collapsed={collapsed}
+      selected={pathname === '/marketplace'}
+      classNames={{ link: classNames(marketplaceClass) }}
+      subLinks={
+        marketplaceEnabled ? MarketplaceSublinks(gameInfo?.networks) : undefined
+      }
+      subLinksCollapsed={mktCollapsed}
+      setSubLinksCollapsed={() => setMktCollapsed(!mktCollapsed)}
+      onClick={() => setMktCollapsed(!mktCollapsed)}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,76 @@
+import React, { useState } from 'react'
+import styles from '../index.module.scss'
+import { NavItem, Images, SubLink } from '@hyperplay/ui'
+import { Link, useLocation } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+
+export interface PortfolioNavItemProps {
+  collapsed: boolean
+}
+
+export function PortfolioNavItem({ collapsed }: PortfolioNavItemProps) {
+  const location = useLocation()
+  const { pathname } = location
+  const [mmCollapsed, mmSetCollapsed] = useState(false)
+  const { t } = useTranslation()
+
+  return (
+    <NavItem
+      title={t('overlay.links.portfolio', 'Portfolio')}
+      icon={<Images.MetaMaskColored fill="none" width={22} height={36} />}
+      key={'/portfolio'}
+      collapsed={collapsed}
+      selected={pathname.startsWith('/portfolio')}
+      onClick={() => mmSetCollapsed(!mmCollapsed)}
+      subLinksCollapsed={mmCollapsed}
+      setSubLinksCollapsed={() => mmSetCollapsed(!mmCollapsed)}
+      subLinks={[
+        <SubLink
+          key={'Portfolio'}
+          component={Link}
+          to={'/portfolio'}
+          selected={pathname === '/portfolio'}
+          className={styles.sublink}
+        >
+          {t('overlay.links.portfolio', 'Portfolio')}
+        </SubLink>,
+        <SubLink
+          key={'Swap'}
+          component={Link}
+          to={'/portfolio/swap'}
+          selected={pathname === '/portfolio/swap'}
+          className={styles.sublink}
+        >
+          {t('overlay.links.swap', 'Swap')}
+        </SubLink>,
+        <SubLink
+          key={'Bridge'}
+          component={Link}
+          to={'/portfolio/bridge'}
+          selected={pathname === '/portfolio/bridge'}
+          className={styles.sublink}
+        >
+          {t('overlay.links.bridge', 'Bridge')}
+        </SubLink>,
+        <SubLink
+          key={'Buy'}
+          component={Link}
+          to={'/portfolio/buy'}
+          selected={pathname === '/portfolio/buy'}
+          className={styles.sublink}
+        >
+          {t('overlay.links.buy', 'Buy')}
+        </SubLink>,
+        <SubLink
+          key={'Sell'}
+          component={Link}
+          to={'/portfolio/sell'}
+          selected={pathname === '/portfolio/sell'}
+          className={styles.sublink}
+        >
+          {t('overlay.links.sell', 'Sell')}
+        </SubLink>
+      ]}
+    />
+  )
+}

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

@@ -1,16 +1,18 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
-import { NavBarOverlay, NavItem, Images, SubLink } from '@hyperplay/ui'
+import { NavBarOverlay, NavItem, Images } from '@hyperplay/ui'
 import { Link, useLocation } from 'react-router-dom'
+import { BrowserGameProps } from 'frontend/OverlayManager/types'
+import { MarketplaceNavItem } from './MarketplaceNavItem'
 import { useTranslation } from 'react-i18next'
+import { PortfolioNavItem } from './PortfolioNavItem'
 
-export function NavBarOverlayWrapper() {
+export function NavBarOverlayWrapper({ appName, runner }: BrowserGameProps) {
   const location = useLocation()
   const { pathname } = location
   const [collapsed, setCollapsed] = useState(false)
   const { t } = useTranslation()
   const comingSoonText = t('overlay.comingSoon', 'Coming Soon')
-  const [mmCollapsed, mmSetCollapsed] = useState(false)
 
   return (
     <NavBarOverlay
@@ -24,71 +26,12 @@ export function NavBarOverlayWrapper() {
           component={Link}
           to={'/quests'}
         />,
-        <NavItem
-          title={'Portfolio'}
-          icon={<Images.MetaMaskColored fill="none" width={22} height={36} />}
-          key={'/portfolio'}
-          collapsed={collapsed}
-          selected={pathname.startsWith('/portfolio')}
-          onClick={() => mmSetCollapsed(!mmCollapsed)}
-          subLinksCollapsed={mmCollapsed}
-          setSubLinksCollapsed={() => mmSetCollapsed(!mmCollapsed)}
-          subLinks={[
-            <SubLink
-              key={'Portfolio'}
-              component={Link}
-              to={'/portfolio'}
-              selected={pathname === '/portfolio'}
-              className={styles.sublink}
-            >
-              {t('overlay.links.portfolio', 'Portfolio')}
-            </SubLink>,
-            <SubLink
-              key={'Swap'}
-              component={Link}
-              to={'/portfolio/swap'}
-              selected={pathname === '/portfolio/swap'}
-              className={styles.sublink}
-            >
-              {t('overlay.links.swap', 'Swap')}
-            </SubLink>,
-            <SubLink
-              key={'Bridge'}
-              component={Link}
-              to={'/portfolio/bridge'}
-              selected={pathname === '/portfolio/bridge'}
-              className={styles.sublink}
-            >
-              {t('overlay.links.bridge', 'Bridge')}
-            </SubLink>,
-            <SubLink
-              key={'Buy'}
-              component={Link}
-              to={'/portfolio/buy'}
-              selected={pathname === '/portfolio/buy'}
-              className={styles.sublink}
-            >
-              {t('overlay.links.buy', 'Buy')}
-            </SubLink>,
-            <SubLink
-              key={'Sell'}
-              component={Link}
-              to={'/portfolio/sell'}
-              selected={pathname === '/portfolio/sell'}
-              className={styles.sublink}
-            >
-              {t('overlay.links.sell', 'Sell')}
-            </SubLink>
-          ]}
-        />,
-        <NavItem
-          title={'Marketplace'}
-          icon={<Images.Home fill="white" />}
-          key={'/marketplace'}
+        <PortfolioNavItem key={'/portfolioNavItem'} collapsed={collapsed} />,
+        <MarketplaceNavItem
+          key={'/marketplaceNavItem'}
+          appName={appName}
+          runner={runner}
           collapsed={collapsed}
-          selected={pathname === '/marketplace'}
-          classNames={{ link: styles.disabled }}
-          secondaryTag={comingSoonText}
         />,
         <NavItem
           title={'Achievements'}

src/frontend/OverlayManager/Overlay/index.tsx

@@ -17,6 +17,7 @@ import classNames from 'classnames'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import MetaMaskPortfolio from 'frontend/screens/MetaMaskPortfolio'
 import { NavBarOverlayWrapper } from './NavBarOverlayWrapper'
+import WebView from 'frontend/screens/WebView'
 
 export const Overlay = observer(function ({
   appName,
@@ -130,13 +131,17 @@ export const Overlay = observer(function ({
         <div className={BrowserGameStyles.bgFilter} />
         <div className={BrowserGameStyles.contentContainer}>
           <HashRouter>
-            <NavBarOverlayWrapper />
+            <NavBarOverlayWrapper appName={appName} runner={runner} />
             <Routes>
               <Route path="/" element={questsViewer} />
               <Route path="/quests" element={questsViewer} />
               <Route path="/portfolio" element={<MetaMaskPortfolio />}>
                 <Route path=":page" element={<MetaMaskPortfolio />} />
               </Route>
+              <Route
+                path="/marketplace"
+                element={<WebView key="marketplace" />}
+              />
             </Routes>
           </HashRouter>
           <div className={BrowserGameStyles.rightSideContainer}>

src/frontend/screens/WebView/index.css → src/frontend/screens/WebView/index.scss

@@ -1,16 +1,20 @@
+@import '@hyperplay/ui/utilities/_loading.scss';
+
 .WebView {
   grid-area: content;
   width: var(--content-width);
   position: relative;
+  width: 100%;
 }
 
 .WebView.collapsed {
   width: var(--content-width);
 }
 
 .WebView__webview {
-  height: calc(100vh - 40px);
-  width: var(--content-width);
+  height: 100%;
+  width: 100%;
+  position: absolute;
 }
 
 .WebView__webview.collapsed {
@@ -35,3 +39,18 @@
   align-self: center;
   padding: var(--space-xl);
 }
+
+.webviewLoader {
+  @include shinyLoader;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 0;
+}
+
+.webviewContentContainer {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+}