diff --git a/apps/web/app/(auth)/layout.tsx b/apps/web/app/(auth)/layout.tsx new file mode 100644 index 0000000..44c2cb5 --- /dev/null +++ b/apps/web/app/(auth)/layout.tsx @@ -0,0 +1,6 @@ +import { Root as TelegramRoot } from '@/components/telegram'; +import { type PropsWithChildren } from 'react'; + +export default async function RootLayout({ children }: Readonly) { + return {children}; +} diff --git a/apps/web/app/(auth)/page.tsx b/apps/web/app/(auth)/page.tsx new file mode 100644 index 0000000..076bbb4 --- /dev/null +++ b/apps/web/app/(auth)/page.tsx @@ -0,0 +1,14 @@ +'use client'; +import { initData, isMiniAppDark, useSignal } from '@telegram-apps/sdk-react'; + +export default function Auth() { + const initDataState = useSignal(initData.state); + const isDark = isMiniAppDark(); + + return ( +
+ Hello, {initDataState?.user?.firstName}
+ Dark: {JSON.stringify(isDark)} +
+ ); +} diff --git a/apps/web/app/(main)/page.tsx b/apps/web/app/(main)/page.tsx deleted file mode 100644 index cb723f3..0000000 --- a/apps/web/app/(main)/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { redirect } from 'next/navigation'; - -export default async function Profile() { - redirect('/dashboard'); -} diff --git a/apps/web/app/(main)/profile/page.tsx b/apps/web/app/(main)/profile/page.tsx index 74455a0..5e54ed3 100644 --- a/apps/web/app/(main)/profile/page.tsx +++ b/apps/web/app/(main)/profile/page.tsx @@ -1,8 +1,3 @@ -'use client'; -import { initData, useSignal } from '@telegram-apps/sdk-react'; - export default function ProfilePage() { - const initDataState = useSignal(initData.state); - - return JSON.stringify(initDataState, null, 2); + return 'Profile'; } diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index f1fd866..4790ede 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -1,4 +1,3 @@ -// import { Root as TelegramRoot } from '@/components/telegram'; import { I18nProvider } from '@/utils/i18n/provider'; import { type Metadata } from 'next'; import { getLocale } from 'next-intl/server'; @@ -16,11 +15,7 @@ export default async function RootLayout({ children }: Readonly - - {/* */} - {children} - {/* */} - + {children} ); diff --git a/apps/web/components/telegram/Root.tsx b/apps/web/components/telegram/Root.tsx index d479a8a..0affc62 100644 --- a/apps/web/components/telegram/Root.tsx +++ b/apps/web/components/telegram/Root.tsx @@ -1,9 +1,9 @@ /* eslint-disable sonarjs/function-return-type */ 'use client'; -import { useClientOnce, useDidMount, useTelegramMock } from '@/hooks/telegram'; +import { useClientOnce, useDidMount } from '@/hooks/telegram'; import { setLocale } from '@/utils/i18n/locale'; import { init } from '@/utils/init'; -import { initData, useLaunchParams, useSignal } from '@telegram-apps/sdk-react'; +import { initData, useSignal } from '@telegram-apps/sdk-react'; import { type PropsWithChildren, useEffect } from 'react'; export function Root(props: Readonly) { @@ -20,14 +20,7 @@ export function Root(props: Readonly) { function RootInner({ children }: PropsWithChildren) { const isDevelopment = process.env.NODE_ENV === 'development'; - // Mock Telegram environment in development mode if needed. - if (isDevelopment) { - // eslint-disable-next-line react-hooks/rules-of-hooks - useTelegramMock(); - } - - const lp = useLaunchParams(); - const debug = isDevelopment || lp.startParam === 'debug'; + const debug = isDevelopment; // Initialize the library. useClientOnce(() => { diff --git a/apps/web/hooks/telegram/index.ts b/apps/web/hooks/telegram/index.ts index 36c0b34..019eb25 100644 --- a/apps/web/hooks/telegram/index.ts +++ b/apps/web/hooks/telegram/index.ts @@ -1,3 +1,2 @@ export * from './use-client-once'; export * from './use-did-mount'; -export * from './use-telegram-mock'; diff --git a/apps/web/hooks/telegram/use-telegram-mock.ts b/apps/web/hooks/telegram/use-telegram-mock.ts deleted file mode 100644 index 181b881..0000000 --- a/apps/web/hooks/telegram/use-telegram-mock.ts +++ /dev/null @@ -1,76 +0,0 @@ -/* eslint-disable no-console */ -import { useClientOnce } from '@/hooks/telegram/use-client-once'; -import { - isTMA, - type LaunchParams, - mockTelegramEnv, - parseInitData, - retrieveLaunchParams, -} from '@telegram-apps/sdk-react'; - -/** - * Mocks Telegram environment in development mode. - */ -export function useTelegramMock(): void { - useClientOnce(() => { - if (!sessionStorage.getItem('env-mocked') && isTMA('simple')) { - return; - } - - // Determine which launch params should be applied. We could already - // apply them previously, or they may be specified on purpose using the - // default launch parameters transmission method. - let lp: LaunchParams | undefined; - try { - lp = retrieveLaunchParams(); - } catch { - const initDataRaw = new URLSearchParams([ - [ - 'user', - JSON.stringify({ - allows_write_to_pm: true, - first_name: 'Andrew', - id: 99_281_932, - is_premium: true, - language_code: 'en', - last_name: 'Rogue', - username: 'rogue', - }), - ], - ['hash', '89d6079ad6762351f38c6dbbc41bb53048019256a9443988af7a48bcad16ba31'], - ['auth_date', '1716922846'], - ['start_param', 'debug'], - ['chat_type', 'sender'], - ['chat_instance', '8428209589180549439'], - ]).toString(); - - lp = { - initData: parseInitData(initDataRaw), - initDataRaw, - platform: 'tdesktop', - themeParams: { - accentTextColor: '#6ab2f2', - bgColor: '#17212b', - buttonColor: '#5288c1', - buttonTextColor: '#ffffff', - destructiveTextColor: '#ec3942', - headerBgColor: '#17212b', - hintColor: '#708499', - linkColor: '#6ab3f3', - secondaryBgColor: '#232e3c', - sectionBgColor: '#17212b', - sectionHeaderTextColor: '#6ab3f3', - subtitleTextColor: '#708499', - textColor: '#f5f5f5', - }, - version: '8', - }; - } - - sessionStorage.setItem('env-mocked', '1'); - mockTelegramEnv(lp); - console.warn( - '⚠️ As long as the current environment was not considered as the Telegram-based one, it was mocked. Take a note, that you should not do it in production and current behavior is only specific to the development process. Environment mocking is also applied only in development mode. So, after building the application, you will not see this behavior and related warning, leading to crashing the application outside Telegram.', - ); - }); -} diff --git a/apps/web/utils/init.ts b/apps/web/utils/init.ts index eddded6..00e4a81 100644 --- a/apps/web/utils/init.ts +++ b/apps/web/utils/init.ts @@ -6,8 +6,6 @@ import { initData, init as initSDK, miniApp, - themeParams, - viewport, } from '@telegram-apps/sdk-react'; /** @@ -15,7 +13,7 @@ import { */ export function init(debug: boolean): void { // Set @telegram-apps/sdk-react debug mode. - debugSDK.set(debug); + if (debug) debugSDK.set(debug); // Initialize special event handlers for Telegram Desktop, Android, iOS, etc. // Also, configure the package. @@ -24,22 +22,8 @@ export function init(debug: boolean): void { // Mount all components used in the project. if (backButton.isSupported()) backButton.mount(); miniApp.mount(); - themeParams.mount(); initData.restore(); - void viewport - .mount() - .then(() => { - // Define components-related CSS variables. - viewport.bindCssVars(); - miniApp.bindCssVars(); - themeParams.bindCssVars(); - }) - .catch((error) => { - console.error('Something went wrong mounting the viewport', error); - }); // Add Eruda if needed. - if (debug) { - import('eruda').then((library) => library.default.init()).catch(console.error); - } + if (debug) import('eruda').then((library) => library.default.init()).catch(console.error); }