Overwolf App

app/components/layout/Header.tsx

@@ -7,6 +7,7 @@ import { Image } from "@components/Image"
 import { SearchButton, SearchButtonIcon } from "../search/SearchButton"
 import { cn } from "common/helpers/classnames"
 import { useAuth } from "@ctx/auth/AuthProvider"
+import { useOverwolf } from "@ctx/OverwolfProvider"
 import { useRouter } from "next/router"
 import { useSideNav } from "@ctx/SideNavProvider"
 
@@ -20,6 +21,8 @@ export const Header = ({ className }: HeaderProps) => {
 
     const { openSideNav } = useSideNav()
 
+    const { isOverwolfContext } = useOverwolf()
+
     const isLandingPage = router.pathname === "/"
 
     return (
@@ -53,6 +56,9 @@ export const Header = ({ className }: HeaderProps) => {
                                 Container={null}
                             />
                         </AppLink>
+                        {isOverwolfContext && (
+                            <p className="text-accent text-xs">Overwolf</p>
+                        )}
                     </div>
                     <div className="flex items-center gap-2">
                         <SearchButton

app/overwolf-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@overwolf/types" />

app/package.json

@@ -39,6 +39,7 @@
         "zod": "^3.20.2"
     },
     "devDependencies": {
+        "@overwolf/types": "^3.23.1",
         "@tanstack/query-core": "^4.22.0",
         "@types/node": "^18.11.18",
         "@types/react": "^18.0.26",

app/pages/_app.tsx

@@ -20,6 +20,7 @@ const BackToTopButton = dynamic(
 import { GAScripts } from "common/analytics/GAScripts"
 import { KBarProvider } from "kbar"
 import { Layout } from "@components/layout/Layout"
+import { OverwolfProvider } from "@ctx/OverwolfProvider"
 import { PageLoader } from "ui/base/PageLoader"
 import { SEO } from "@components/SEO"
 import { Searchbox } from "@components/search/Searchbox"
@@ -46,24 +47,26 @@ const App = ({
             </Head>
             <SEO title="Corehalla" image="/images/og/main-og.jpg" />
             <GAScripts />
-            <AuthProvider>
-                <KBarProvider actions={[]} options={{}}>
-                    <SideNavProvider>
-                        <PageLoader>
-                            <div className="flex items-center gap-4">
-                                <span className="text-sm">Loading...</span>
-                                <AnimatedLogo size={32} />
-                            </div>
-                        </PageLoader>
-                        <Toaster />
-                        <Layout>
-                            <Component {...pageProps} />
-                        </Layout>
-                        <Searchbox />
-                        <BackToTopButton />
-                    </SideNavProvider>
-                </KBarProvider>
-            </AuthProvider>
+            <OverwolfProvider>
+                <AuthProvider>
+                    <KBarProvider actions={[]} options={{}}>
+                        <SideNavProvider>
+                            <PageLoader>
+                                <div className="flex items-center gap-4">
+                                    <span className="text-sm">Loading...</span>
+                                    <AnimatedLogo size={32} />
+                                </div>
+                            </PageLoader>
+                            <Toaster />
+                            <Layout>
+                                <Component {...pageProps} />
+                            </Layout>
+                            <Searchbox />
+                            <BackToTopButton />
+                        </SideNavProvider>
+                    </KBarProvider>
+                </AuthProvider>
+            </OverwolfProvider>
         </>
     )
 }

app/providers/OverwolfProvider.tsx

@@ -0,0 +1,85 @@
+import { createContext, useContext, useEffect, useState } from "react"
+import type { ReactNode } from "react"
+
+export type OverwolfContext = {
+    overwolf: typeof window.overwolf | null
+    isOverwolfContext: boolean
+    isLoadingOverwolf: boolean
+    isOverwolfError: boolean
+}
+
+const overwolfContext = createContext<OverwolfContext>({
+    overwolf: null,
+    isOverwolfContext: false,
+    isLoadingOverwolf: false,
+    isOverwolfError: false,
+})
+
+export const useOverwolf = (): OverwolfContext => useContext(overwolfContext)
+
+type OverwolfProviderProps = {
+    children: ReactNode
+}
+
+const isOverwolfLoading = (): boolean => {
+    return !window.overwolf || !window.overwolf.windows
+}
+
+export const waitForOverwolf = (): Promise<void> => {
+    return new Promise((resolve, reject) => {
+        if (!isOverwolfLoading()) {
+            return resolve()
+        }
+
+        let retriesLeft = 10
+        setInterval(() => {
+            if (isOverwolfLoading()) {
+                if (retriesLeft <= 0) {
+                    return reject(new Error("Overwolf failed to load"))
+                }
+
+                retriesLeft--
+            } else {
+                resolve()
+            }
+        }, 1000)
+    })
+}
+
+export const OverwolfProvider = ({ children }: OverwolfProviderProps) => {
+    const [isOverwolfContext, setIsOverwolfContext] = useState(false)
+    const [isLoadingOverwolf, setIsLoadingOverwolf] = useState(true)
+    const [overwolf, setOverwolf] = useState<typeof window.overwolf | null>(
+        null,
+    )
+    useEffect(() => {
+        const isOverwolfCtx = navigator.userAgent.includes("OverwolfClient")
+        setIsOverwolfContext(isOverwolfCtx)
+        if (!isOverwolfCtx) {
+            setIsLoadingOverwolf(false)
+            return
+        }
+
+        waitForOverwolf()
+            .then(() => {
+                setOverwolf(window.overwolf)
+            })
+            .finally(() => {
+                setIsLoadingOverwolf(false)
+            })
+    }, [])
+
+    return (
+        <overwolfContext.Provider
+            value={{
+                isOverwolfContext,
+                isLoadingOverwolf,
+                isOverwolfError:
+                    isOverwolfContext && !isLoadingOverwolf && !overwolf,
+                overwolf,
+            }}
+        >
+            {children}
+        </overwolfContext.Provider>
+    )
+}