feat: add top navigation tour functionality and steps

flavioislima · flavioislima · commit fbf8c7869484 · 2025-03-07T13:16:02.000Z
diff --git a/src/frontend/components/TourGuide/TourContext.tsx b/src/frontend/components/TourGuide/TourContext.tsx
@@ -7,6 +7,7 @@ type TourState = {
   activateLibraryTour: () => void
   activateSidebarTour: () => void
   activateGamePageTour: () => void
+  activateTopNavTour: () => void
   deactivateTour: () => void
   markTourAsComplete: (tourId: string) => void
   isTourCompleted: (tourId: string) => boolean
@@ -19,6 +20,7 @@ const initialState: TourState = {
   activateLibraryTour: () => {},
   activateSidebarTour: () => {},
   activateGamePageTour: () => {},
+  activateTopNavTour: () => {},
   deactivateTour: () => {},
   markTourAsComplete: () => {},
   isTourCompleted: () => false
@@ -54,6 +56,11 @@ export const TourProvider: React.FC<TourProviderProps> = ({ children }) => {
     setIsTourActive(true)
   }
 
+  const activateTopNavTour = () => {
+    setCurrentTour('topnav')
+    setIsTourActive(true)
+  }
+
   const deactivateTour = () => {
     setIsTourActive(false)
     setCurrentTour(null)
@@ -80,6 +87,7 @@ export const TourProvider: React.FC<TourProviderProps> = ({ children }) => {
         activateLibraryTour,
         activateSidebarTour,
         activateGamePageTour,
+        activateTopNavTour,
         deactivateTour,
         markTourAsComplete,
         isTourCompleted
diff --git a/src/frontend/components/TourGuide/TourGuide.scss b/src/frontend/components/TourGuide/TourGuide.scss
@@ -72,12 +72,16 @@
 }
 
 .introjs-helperLayer {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: transparent;
   border: 2px solid var(--primary);
-  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
 }
 
 .introjs-overlay {
-  opacity: 0.7 !important;
+  opacity: 0.5 !important;
   background-color: var(--background-darker);
 }
+
+.introjs-fixParent {
+  z-index: 999999 !important;
+}
diff --git a/src/frontend/components/TourGuide/TourGuide.tsx b/src/frontend/components/TourGuide/TourGuide.tsx
@@ -7,6 +7,7 @@ import {
   libraryTourSteps,
   sidebarTourSteps,
   gamePageTourSteps,
+  topNavTourSteps,
   TourStep
 } from './TourSteps'
 import './TourGuide.scss'
@@ -33,7 +34,9 @@ export const TourGuide: React.FC = () => {
         case 'gamepage':
           steps = gamePageTourSteps(t)
           break
-        // Add more tour types here as needed
+        case 'topnav':
+          steps = topNavTourSteps(t)
+          break
         default:
           steps = []
       }
diff --git a/src/frontend/components/TourGuide/TourSteps.ts b/src/frontend/components/TourGuide/TourSteps.ts
@@ -253,3 +253,71 @@ export const gamePageTourSteps = (t: TFunction): TourStep[] => [
     position: 'center'
   }
 ]
+
+// TopNav tour steps
+export const topNavTourSteps = (t: TFunction): TourStep[] => [
+  {
+    element: '[data-tour="topnav-container"]',
+    intro: t(
+      'tour.topnav.welcome',
+      "Welcome to HyperPlay! Let's explore the navigation bar and its features."
+    ),
+    position: 'bottom'
+  },
+  {
+    element: '[data-tour="topnav-hyperplay-store"]',
+    intro: t(
+      'tour.topnav.hyperplay_store',
+      'Access the HyperPlay Store to discover exciting web3 games.'
+    ),
+    position: 'bottom'
+  },
+  {
+    element: '[data-tour="topnav-epic-store"]',
+    intro: t(
+      'tour.topnav.epic_store',
+      'Browse and buy games from the Epic Games Store.'
+    ),
+    position: 'bottom'
+  },
+  {
+    element: '[data-tour="topnav-gog-store"]',
+    intro: t(
+      'tour.topnav.gog_store',
+      'Browse and buy games from the GOG Store.'
+    ),
+    position: 'bottom'
+  },
+  {
+    element: '[data-testid="searchBar"]',
+    intro: t(
+      'tour.library.search',
+      'Search for specific games by title using the search bar.'
+    ),
+    position: 'bottom'
+  },
+  {
+    element: '[data-tour="topnav-metamask"]',
+    intro: t(
+      'tour.topnav.metamask',
+      'Quick access to your MetaMask wallet for web3 transactions.'
+    ),
+    position: 'left'
+  },
+  {
+    element: '[data-tour="topnav-account"]',
+    intro: t(
+      'tour.topnav.account',
+      'Change your connected wallet, manage connected stores, view your portfolio, and more.'
+    ),
+    position: 'left'
+  },
+  {
+    element: '[data-tour="topnav-container"]',
+    intro: t(
+      'tour.topnav.finish',
+      "That's it! You now know how to navigate HyperPlay's top bar and account features."
+    ),
+    position: 'center'
+  }
+]
diff --git a/src/frontend/components/TourGuide/TourTriggerButton.tsx b/src/frontend/components/TourGuide/TourTriggerButton.tsx
@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
 import { useTourGuide } from './TourContext'
 
-export type TourType = 'library' | 'sidebar' | 'gamepage'
+export type TourType = 'library' | 'sidebar' | 'gamepage' | 'topnav'
 
 interface TourTriggerButtonProps {
   tourId?: TourType
@@ -23,8 +23,12 @@ export const TourTriggerButton: React.FC<TourTriggerButtonProps> = ({
   showText = true
 }) => {
   const { t } = useTranslation('tour')
-  const { activateLibraryTour, activateSidebarTour, activateGamePageTour } =
-    useTourGuide()
+  const {
+    activateLibraryTour,
+    activateSidebarTour,
+    activateGamePageTour,
+    activateTopNavTour
+  } = useTourGuide()
 
   const handleClick = () => {
     switch (tourId) {
@@ -37,6 +41,9 @@ export const TourTriggerButton: React.FC<TourTriggerButtonProps> = ({
       case 'gamepage':
         activateGamePageTour()
         break
+      case 'topnav':
+        activateTopNavTour()
+        break
       default:
         activateLibraryTour()
     }
diff --git a/src/frontend/components/UI/AccountDropdown/index.tsx b/src/frontend/components/UI/AccountDropdown/index.tsx
@@ -17,15 +17,18 @@ import useAuthSession from '../../../hooks/useAuthSession'
 function NavigationMenuItem({
   label,
   to,
-  showMetaMaskExtensionLinks
+  showMetaMaskExtensionLinks,
+  dataTour
 }: {
   label: string
   to: string
   showMetaMaskExtensionLinks: boolean
+  dataTour?: string
 }) {
   return (
     <Menu.Item
       id={showMetaMaskExtensionLinks ? 'topMenuItemWalletDropdown' : undefined}
+      data-tour={dataTour}
     >
       <NavLink
         to={to}
@@ -74,6 +77,7 @@ const WalletDropdown: React.FC = observer(() => {
         <Menu.Item
           className={styles.menuItem}
           onClick={() => onboardingStore.openOnboarding()}
+          data-tour="account-wallet-connect"
         >
           <div className={`body ${styles.itemContents}`}>
             {showWalletConnectedLinks
@@ -87,25 +91,28 @@ const WalletDropdown: React.FC = observer(() => {
               label={t('hyperplay.viewFullscreen', `View fullscreen`)}
               to={'/metamaskHome'}
               showMetaMaskExtensionLinks={showMetaMaskExtensionLinks}
-            ></NavigationMenuItem>
+              dataTour="account-metamask-fullscreen"
+            />
             <NavigationMenuItem
               label={t('hyperplay.viewItem', {
                 defaultValue: 'View {{item}}',
                 item: 'Snaps'
               })}
               showMetaMaskExtensionLinks={showMetaMaskExtensionLinks}
               to={'/metamaskSnaps'}
-            ></NavigationMenuItem>
+              dataTour="account-metamask-snaps"
+            />
           </>
         )}
         {showMetaMaskExtensionLinks && (
           <Menu.Item
-            className={`${styles.menuItem} `}
+            className={styles.menuItem}
             id={
               !showWalletConnectedLinks
                 ? 'topMenuItemWalletDropdown'
                 : undefined
             }
+            data-tour="account-metamask-portfolio"
           >
             <NavLink
               to={'/metamaskPortfolio'}
@@ -127,7 +134,7 @@ const WalletDropdown: React.FC = observer(() => {
           </Menu.Item>
         )}
         <Menu.Label>Epic/GoG {t('accounts', `accounts`)}</Menu.Label>
-        <Menu.Item>
+        <Menu.Item data-tour="account-manage-stores">
           <NavLink to={'/login'}>
             <div className={`body ${styles.itemContents}`}>
               {t('userselector.manageStore', `Manage stores`)}
@@ -140,7 +147,10 @@ const WalletDropdown: React.FC = observer(() => {
             <Menu.Label>HyperPlay {t('profile', `Profile`)}</Menu.Label>
             {isSignedIn ? (
               <>
-                <Menu.Item onClick={() => authState.openSignInModal()}>
+                <Menu.Item
+                  onClick={() => authState.openSignInModal()}
+                  data-tour="account-manage-accounts"
+                >
                   <div className={`body ${styles.itemContents}`}>
                     {t('userselector.manageaccounts', `Manage accounts`)}
                   </div>
@@ -150,6 +160,7 @@ const WalletDropdown: React.FC = observer(() => {
                     await window.api.logOut()
                     await invalidateQuery()
                   }}
+                  data-tour="account-logout"
                 >
                   <div
                     className={`body ${styles.itemContents} ${styles.logOut}`}
@@ -159,7 +170,10 @@ const WalletDropdown: React.FC = observer(() => {
                 </Menu.Item>
               </>
             ) : (
-              <Menu.Item onClick={() => authState.openSignInModal()}>
+              <Menu.Item
+                onClick={() => authState.openSignInModal()}
+                data-tour="account-login"
+              >
                 <div className={`body ${styles.itemContents}`}>
                   {t('userselector.logIn', `Log in`)}
                 </div>
diff --git a/src/frontend/components/UI/TopNavBar/index.module.scss b/src/frontend/components/UI/TopNavBar/index.module.scss
@@ -7,6 +7,22 @@
   align-items: center;
   padding: var(--space-md) var(--space-lg);
   z-index: 100000;
+
+  .tourButton {
+    margin-left: var(--space-2xs);
+    color: var(--text-default);
+    background-color: var(--transparent);
+    border: none;
+
+    svg {
+      width: 28px;
+      height: 28px;
+    }
+
+    &:hover {
+      color: var(--text-hover);
+    }
+  }
 }
 
 .navBar > :first-child {
diff --git a/src/frontend/components/UI/TopNavBar/index.tsx b/src/frontend/components/UI/TopNavBar/index.tsx
@@ -17,6 +17,7 @@ import {
 import webviewNavigationStore from 'frontend/store/WebviewNavigationStore'
 import { extractMainDomain } from '../../../helpers/extract-main-domain'
 import AppVersion from '../AppVersion'
+import { TourTriggerButton, TourGuide } from '../../TourGuide'
 
 const TopNavBar = observer(() => {
   const { t } = useTranslation()
@@ -52,12 +53,13 @@ const TopNavBar = observer(() => {
   }
 
   return (
-    <div className={styles.navBar}>
+    <div className={styles.navBar} data-tour="topnav-container">
       <div>
         <HyperPlayLogoWhite
           height="27px"
           width="27px"
           className={styles.hpLogo}
+          data-tour="topnav-logo"
         />
         <Images.HyperPlayTextLogo
           fill="var(--color-neutral-100)"
@@ -69,7 +71,7 @@ const TopNavBar = observer(() => {
           </div>
         </div>
         <>
-          <NavLink to="/hyperplaystore">
+          <NavLink to="/hyperplaystore" data-tour="topnav-hyperplay-store">
             <Button
               type="link"
               size="small"
@@ -78,7 +80,7 @@ const TopNavBar = observer(() => {
               HyperPlay
             </Button>
           </NavLink>
-          <NavLink to="/epicstore">
+          <NavLink to="/epicstore" data-tour="topnav-epic-store">
             <Button
               type="link"
               size="small"
@@ -87,7 +89,7 @@ const TopNavBar = observer(() => {
               {t('Epic Games', 'Epic Games')}
             </Button>
           </NavLink>
-          <NavLink to="/gogstore">
+          <NavLink to="/gogstore" data-tour="topnav-gog-store">
             <Button
               type="link"
               size="small"
@@ -99,22 +101,35 @@ const TopNavBar = observer(() => {
         </>
       </div>
       <div>
-        {pathname === '/library' ? <SearchBar /> : null}
+        {pathname === '/library' ? (
+          <SearchBar data-tour="topnav-search" />
+        ) : null}
         {showMetaMaskBrowserSidebarLinks && (
           <button
             className={styles.iconButton}
             onClick={() => extensionStore.toggleIsPopupOpen()}
             onMouseEnter={() => extensionStore.lockPopup()}
             onMouseLeave={() => extensionStore.unlockPopup()}
+            data-tour="topnav-metamask"
           >
             <Images.MetaMask fill="white" />
             {badgeText !== '' && badgeText !== '0' ? (
               <div className={styles.badge}>{badgeText}</div>
             ) : null}
           </button>
         )}
-        <AccountDropdown />
+        <div data-tour="topnav-account">
+          <AccountDropdown />
+        </div>
+        <TourTriggerButton
+          tourId="topnav"
+          className={styles.tourButton}
+          buttonType="tertiary"
+          showIcon={true}
+          showText={false}
+        />
       </div>
+      <TourGuide />
     </div>
   )
 })

Original file line number	Diff line number	Diff line change
`@@ -72,12 +72,16 @@`
`72`	`72`	`}`
`73`	`73`
`74`	`74`	`.introjs-helperLayer {`
`75`		`- background-color: rgba(255, 255, 255, 0.1);`
	`75`	`+ background-color: transparent;`
`76`	`76`	`border: 2px solid var(--primary);`
`77`		`- box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);`
	`77`	`+ box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);`
`78`	`78`	`}`
`79`	`79`
`80`	`80`	`.introjs-overlay {`
`81`		`- opacity: 0.7 !important;`
	`81`	`+ opacity: 0.5 !important;`
`82`	`82`	`background-color: var(--background-darker);`
`83`	`83`	`}`
	`84`	`+`
	`85`	`+.introjs-fixParent {`
	`86`	`+ z-index: 999999 !important;`
	`87`	`+}`