[UX] Implement IntroJS and Welcome Tour

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperplay",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "private": true,
   "main": "build/main/main.js",
   "homepage": "./",
@@ -119,6 +119,8 @@
     "i18next-fs-backend": "^2.3.2",
     "i18next-http-backend": "^2.5.2",
     "ini": "^3.0.1",
+    "intro.js": "^7.2.0",
+    "intro.js-react": "^1.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^20.0.0",
     "json5": "^2.2.3",

public/locales/en/tour.json

@@ -0,0 +1,17 @@
+{
+    "tour": {
+        "back": "Back",
+        "done": "Done",
+        "first-welcome": {
+            "account": "Login and connect your primary wallet to track progress.",
+            "account-title": "Start Your Journey",
+            "links-title": "A Galaxy of Games",
+            "quests": "Take on quests, make leaderboards, and earn along the way.",
+            "rewards-title": "Earn Real Rewards 🎁",
+            "stores": "Explore all the titles from HyperPlay, Epic Games, and GOG.",
+            "welcome": "Begin your journey through the Web3 galaxy and discover top-tier games.",
+            "welcome-title": "Ready for Takeoff 🚀"
+        },
+        "next": "Next"
+    }
+}

src/frontend/App.tsx

@@ -41,6 +41,7 @@ import { QuestsPage } from './screens/Quests'
 import { NavigateListener } from './NavigateListener'
 import G7Webview from './screens/G7Webview'
 import CardPrivacyPolicy from './screens/Onboarding/analytics/CardPrivacyPolicy'
+import { TourProvider } from './components/TourGuide/TourContext'
 
 function App() {
   const { sidebarCollapsed, isSettingsModalOpen, connectivity } =
@@ -50,106 +51,111 @@ function App() {
 
   return (
     <div className={classNames('App', { collapsed: sidebarCollapsed })}>
-      <HashRouter>
-        <OfflineMessage />
-        <TopNavBar />
-        <Sidebar />
-        <main className="content">
-          <CardPrivacyPolicy />
-          <QaAuthHandler />
-          <NavigateListener />
-          <ExtensionHandler />
-          <ExtensionManager />
-          <DialogHandler />
-          <ExternalLinkDialog />
-          <AuthModal />
-          <EmailSubscriptionModal />
-          <StoreNavHandler />
-          {isSettingsModalOpen.gameInfo && (
-            <SettingsModal
-              gameInfo={isSettingsModalOpen.gameInfo}
-              type={isSettingsModalOpen.type}
-            />
-          )}
-          <Routes>
-            <Route
-              path="/"
-              element={<Navigate replace to={firstDestination} />}
-            />
-            <Route path="/library" element={<Library />} />
-            <Route
-              path="/achievements"
-              element={
-                <AchievementsLayout>
-                  <Outlet />
-                </AchievementsLayout>
-              }
-            >
-              <Route index element={<Achievements />} />
+      <TourProvider>
+        <HashRouter>
+          <OfflineMessage />
+          <TopNavBar />
+          <Sidebar />
+          <main className="content">
+            <CardPrivacyPolicy />
+            <QaAuthHandler />
+            <NavigateListener />
+            <ExtensionHandler />
+            <ExtensionManager />
+            <DialogHandler />
+            <ExternalLinkDialog />
+            <AuthModal />
+            <EmailSubscriptionModal />
+            <StoreNavHandler />
+            {isSettingsModalOpen.gameInfo && (
+              <SettingsModal
+                gameInfo={isSettingsModalOpen.gameInfo}
+                type={isSettingsModalOpen.type}
+              />
+            )}
+            <Routes>
               <Route
-                path="/achievements/:id"
-                element={<GameAchievementDetails />}
+                path="/"
+                element={<Navigate replace to={firstDestination} />}
               />
-            </Route>
-            <Route path="login" element={<Login />} />
-            <Route
-              path="hyperplaystore"
-              element={<WebView key="hyperplaystore" />}
-            />
-            <Route path="epicstore" element={<WebView key="epicstore" />} />
-            <Route path="gogstore" element={<WebView key="gogstore" />} />
-            <Route path="docs" element={<WebView key="docs" />} />
-            <Route path="metamaskHome" element={<MetaMaskHome />} />
-            <Route
-              path="metamaskSnaps"
-              element={<WebView key="metamaskSnaps" />}
-            />
-            <Route path="game7Portal" element={<G7Webview />} />
-            <Route path="metamaskPortfolio" element={<MetaMaskPortfolio />}>
-              <Route path=":page" element={<MetaMaskPortfolio />} />
-            </Route>
-            <Route path="/gamepage">
-              <Route path=":runner">
-                <Route path=":appName" element={<GamePage />} />
+              <Route path="/library" element={<Library />} />
+              <Route
+                path="/achievements"
+                element={
+                  <AchievementsLayout>
+                    <Outlet />
+                  </AchievementsLayout>
+                }
+              >
+                <Route index element={<Achievements />} />
+                <Route
+                  path="/achievements/:id"
+                  element={<GameAchievementDetails />}
+                />
+              </Route>
+              <Route path="login" element={<Login />} />
+              <Route
+                path="hyperplaystore"
+                element={<WebView key="hyperplaystore" />}
+              />
+              <Route path="epicstore" element={<WebView key="epicstore" />} />
+              <Route path="gogstore" element={<WebView key="gogstore" />} />
+              <Route path="docs" element={<WebView key="docs" />} />
+              <Route path="metamaskHome" element={<MetaMaskHome />} />
+              <Route
+                path="metamaskSnaps"
+                element={<WebView key="metamaskSnaps" />}
+              />
+              <Route path="game7Portal" element={<G7Webview />} />
+              <Route path="metamaskPortfolio" element={<MetaMaskPortfolio />}>
+                <Route path=":page" element={<MetaMaskPortfolio />} />
+              </Route>
+              <Route path="/gamepage">
+                <Route path=":runner">
+                  <Route path=":appName" element={<GamePage />} />
+                </Route>
+              </Route>
+              <Route
+                path="/store-page"
+                element={<WebView key="store-page" />}
+              />
+              <Route path="loginweb">
+                <Route path=":runner" element={<WebView key="loginweb" />} />
               </Route>
-            </Route>
-            <Route path="/store-page" element={<WebView key="store-page" />} />
-            <Route path="loginweb">
-              <Route path=":runner" element={<WebView key="loginweb" />} />
-            </Route>
-            <Route path="settings">
-              <Route path=":runner">
-                <Route path=":appName">
-                  <Route path=":type" element={<Settings />} />
+              <Route path="settings">
+                <Route path=":runner">
+                  <Route path=":appName">
+                    <Route path=":type" element={<Settings />} />
+                  </Route>
                 </Route>
               </Route>
-            </Route>
-            <Route path="/download-manager" element={<DownloadManager />} />
-            <Route path="/quests" element={<QuestsPage />}>
-              <Route path=":questId" element={<QuestsPage />} />
-            </Route>
-          </Routes>
-        </main>
-        <div className="controller">
-          <ControllerHints />
-          <div className="simple-keyboard"></div>
-        </div>
-        <OnboardingStoreController />
-        {onboardingStore.isOnboardingOpen && (
-          <Onboarding
-            disableOnboarding={(disableReason: WalletOnboardCloseReason) => {
-              if (disableReason === 'skipped') {
-                window.api.trackEvent({ event: 'Onboarding Skipped' })
-              }
-              onboardingStore.closeOnboarding()
-            }}
-          />
-        )}
-      </HashRouter>
-      <TransactionNotification />
-      <DownloadToastManager />
-      <DeviceStateController />
-      <UpdateModalController />
+              <Route path="/download-manager" element={<DownloadManager />} />
+              <Route path="/quests" element={<QuestsPage />}>
+                <Route path=":questId" element={<QuestsPage />} />
+              </Route>
+            </Routes>
+          </main>
+          <div className="controller">
+            <ControllerHints />
+            <div className="simple-keyboard"></div>
+          </div>
+          <OnboardingStoreController />
+          {onboardingStore.isOnboardingOpen && (
+            <Onboarding
+              disableOnboarding={(disableReason: WalletOnboardCloseReason) => {
+                if (disableReason === 'skipped') {
+                  window.api.trackEvent({ event: 'Onboarding Skipped' })
+                }
+                onboardingStore.closeOnboarding()
+              }}
+            />
+          )}
+        </HashRouter>
+        <TransactionNotification />
+        <DownloadToastManager />
+        <DeviceStateController />
+        <UpdateModalController />
+      </TourProvider>
     </div>
   )
 }

src/frontend/components/TourGuide/CustomButtons.scss

@@ -0,0 +1,40 @@
+.hp-custom-buttons-active {
+  .introjs-button {
+    opacity: 0 !important;
+    pointer-events: none !important;
+    position: absolute;
+    height: 0;
+  }
+
+  .hp-custom-buttons-container {
+    position: relative;
+    min-height: 60px;
+  }
+}
+
+.custom-tour-buttons {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  z-index: 10;
+
+  button {
+    margin-left: 12px;
+    min-width: 90px;
+    font-weight: 500;
+  }
+
+  &.two-buttons {
+    justify-content: space-between;
+
+    button:first-child {
+      margin-right: auto;
+      margin-left: 0;
+    }
+  }
+
+  &.one-button {
+    justify-content: flex-end;
+  }
+}