fix: try fix tg again

src/main.tsx

@@ -1,3 +1,11 @@
+if (import.meta.env.MODE !== "production") {
+  // Loading eruda dynamically to avoid bundling it in production
+  // Awaiting eruda initialization to start logs recording as soon as possible
+  const { default: eruda } = await import("eruda");
+  eruda.init();
+  eruda.position({ x: 8, y: window.innerHeight / 3 });
+}
+
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
@@ -18,11 +26,6 @@ declare module "@tanstack/react-router" {
   }
 }
 
-if (import.meta.env.MODE !== "production") {
-  const { default: eruda } = await import("eruda");
-  eruda.init();
-}
-
 tg.init();
 i18n.init();
 

src/tg/index.ts

@@ -5,38 +5,6 @@ export const STORAGE_KEYS = {
 } as const;
 export type StorageKey = (typeof STORAGE_KEYS)[keyof typeof STORAGE_KEYS];
 
-// @ts-expect-error Just for an initial check
-const IS_REAL_TG = Boolean(window?.Telegram?.WebApp);
-
-if (!IS_REAL_TG) {
-  console.log("Mocking Telegram Env");
-  tg.mockTelegramEnv({
-    launchParams: {
-      tgWebAppData: new URLSearchParams({
-        user: JSON.stringify({
-          id: 1,
-          first_name: "Pavel",
-          is_bot: false,
-          last_name: "Durov",
-          username: "durov",
-          language_code: "en",
-          is_premium: true,
-          photo_url:
-            "https://media4.giphy.com/media/v1.Y2lkPTZjMDliOTUyeXF1MzYyY2pwMjR2YWFhNDhqdXBsc216MWo2aW9pczNnNXM2ZmZmbCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xUPGcHc4I3wICqp8bu/giphy.gif",
-          added_to_attachment_menu: false,
-          allows_write_to_pm: true,
-        } satisfies tg.User),
-        hash: "",
-        signature: "",
-        auth_date: Date.now().toString(),
-      }),
-      tgWebAppThemeParams: {},
-      tgWebAppVersion: "8",
-      tgWebAppPlatform: "android",
-    },
-  });
-}
-
 type WithChecks<Result> = {
   ifAvailable: (...args: any[]) => { ok: true; data: Result } | { ok: false };
 };
@@ -59,31 +27,98 @@ const fallbackImplementation = <
   cb: T,
   onErr: F,
 ): Async extends true ? Promise<Result> : Awaited<Result> => {
-  if (IS_REAL_TG) {
   const res = cb.ifAvailable.apply(null, args);
   const returnValue = (res.ok ? res.data : onErr.apply(null, args)) as Result;
   if (!async) return returnValue as Async extends true ? Promise<Result> : Awaited<Result>;
   return promisify(returnValue).catch(() => onErr.apply(null, args)) as Async extends true
     ? Promise<Result>
     : Awaited<Result>;
-  } else {
-    const result = onErr.apply(null, args);
-    return (async ? promisify(result) : result) as Async extends true
-      ? Promise<Result>
-      : Awaited<Result>;
-  }
 };
 
 export default {
   init: () => {
     tg.setDebug(import.meta.env.DEV);
-    tg.init({ acceptCustomStyles: true });
+
-    tg.viewport.requestFullscreen.ifAvailable();
+    if (import.meta.env.DEV) {
-    tg.swipeBehavior.disableVertical.ifAvailable();
+      tg.mockTelegramEnv({
-    tg.viewport.expand.ifAvailable();
+        launchParams: {
-    tg.miniApp.setHeaderColor.ifAvailable("#000000");
+          tgWebAppData: new URLSearchParams({
-    console.log(IS_REAL_TG ? "Telegram Mini App initialized" : "TMA Debug mode in Web initialized");
+            user: JSON.stringify({
-    console.log(tg.retrieveLaunchParams());
+              id: 1,
+              first_name: "Pavel",
+              is_bot: false,
+              last_name: "Durov",
+              username: "durov",
+              language_code: "en",
+              is_premium: true,
+              photo_url:
+                "https://media4.giphy.com/media/v1.Y2lkPTZjMDliOTUyeXF1MzYyY2pwMjR2YWFhNDhqdXBsc216MWo2aW9pczNnNXM2ZmZmbCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xUPGcHc4I3wICqp8bu/giphy.gif",
+              added_to_attachment_menu: false,
+              allows_write_to_pm: true,
+            } satisfies tg.User),
+            hash: "",
+            signature: "",
+            auth_date: Date.now().toString(),
+          }),
+          tgWebAppThemeParams: {},
+          tgWebAppVersion: "999999",
+          tgWebAppPlatform: "unknown",
+        },
+      });
+      console.log("Telegram Mocked environment initialized");
+    }
+
+    const launchParams = tg.retrieveLaunchParams();
+    console.log("Lunch params: ", launchParams);
+    const isMobile = ["ios", "android"].includes(launchParams.tgWebAppPlatform);
+
+    tg.init();
+    console.log("TMA initialized");
+
+    if (launchParams.tgWebAppPlatform === "macos") {
+      tg.mockTelegramEnv({
+        onEvent(event, next) {
+          if (event.name === "web_app_request_safe_area") {
+            return tg.emitEvent("safe_area_changed", { left: 0, top: 0, right: 0, bottom: 0 });
+          }
+
+          next();
+        },
+      });
+      console.log("MacOS Mocked environment initialized");
+    }
+
+    if (tg.miniApp.mount.isAvailable()) {
+      tg.themeParams.mount();
+      tg.miniApp.mount();
+      tg.themeParams.bindCssVars();
+      tg.miniApp.bindCssVars();
+      tg.miniApp.setHeaderColor("#000000");
+      console.log("Telegram Mini App initialized");
+    }
+
+    if (tg.viewport.mount.isAvailable()) {
+      tg.viewport.mount().then(() => {
+        tg.viewport.bindCssVars();
+
+        if (isMobile) {
+          tg.viewport.requestFullscreen();
+          tg.viewport.expand();
+        }
+
+        console.log("TMA viewport initialized");
+      });
+    }
+
+    if (tg.swipeBehavior.mount.ifAvailable()) {
+      tg.swipeBehavior.mount();
+      tg.swipeBehavior.disableVertical();
+      console.log("TMA swipe behavior initialized");
+    }
+
+    console.log(
+      import.meta.env.DEV ? "TMA Debug mode in Web initialized" : "Telegram Mini App initialized",
+    );
   },
   openLink(url: string | URL, options?: tg.OpenLinkOptions) {
     tg.openLink.ifAvailable(url, options);