From 43e52e75858e87da6a7ca369a91def1b190b078f Mon Sep 17 00:00:00 2001 From: Hewston Fox Date: Wed, 18 Mar 2026 22:30:19 +0200 Subject: [PATCH] fix: try fix tg again --- src/main.tsx | 13 +++-- src/tg/index.ts | 139 ++++++++++++++++++++++++++++++------------------ 2 files changed, 95 insertions(+), 57 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index d8dbfee..0ed0bcf 100644 --- a/src/main.tsx +++ b/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(); diff --git a/src/tg/index.ts b/src/tg/index.ts index a58d05e..232cb7d 100644 --- a/src/tg/index.ts +++ b/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 = { ifAvailable: (...args: any[]) => { ok: true; data: Result } | { ok: false }; }; @@ -59,31 +27,98 @@ const fallbackImplementation = < cb: T, onErr: F, ): Async extends true ? Promise : Awaited => { - 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 : Awaited; - return promisify(returnValue).catch(() => onErr.apply(null, args)) as Async extends true - ? Promise - : Awaited; - } else { - const result = onErr.apply(null, args); - return (async ? promisify(result) : result) as Async extends true - ? Promise - : Awaited; - } + 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 : Awaited; + return promisify(returnValue).catch(() => onErr.apply(null, args)) as Async extends true + ? Promise + : Awaited; }; export default { init: () => { tg.setDebug(import.meta.env.DEV); - tg.init({ acceptCustomStyles: true }); - tg.viewport.requestFullscreen.ifAvailable(); - tg.swipeBehavior.disableVertical.ifAvailable(); - tg.viewport.expand.ifAvailable(); - tg.miniApp.setHeaderColor.ifAvailable("#000000"); - console.log(IS_REAL_TG ? "Telegram Mini App initialized" : "TMA Debug mode in Web initialized"); - console.log(tg.retrieveLaunchParams()); + + if (import.meta.env.DEV) { + 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: "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);