refactor: migrate to @telegram-apps/sdk-react v3, remove all window.Telegram.WebApp usage

Полный переход с нативного window.Telegram.WebApp API на @telegram-apps/sdk-react v3.
Bridge SDK оборачивал receiveEvent, из-за чего popup_closed не доходил до нативного
обработчика — это было основной причиной бага с двойным открытием попапа.

Изменения:

- Удалён @telegram-apps/react-router-integration (привязан к SDK v1)
- Инициализация SDK v3 в main.tsx: init(), restoreInitData(), mount всех компонентов
- AppWithNavigator: убран TelegramRouter (initNavigator + useIntegration), все платформы
  на BrowserRouter, добавлен TelegramBackButton через SDK v3
- useTelegramSDK: детекция через retrieveLaunchParams(), реактивные значения через
  useSignal() (fullscreen, viewport, safe area insets), initData через retrieveRawInitData()
- TelegramAdapter: полная перезапись — попапы через showPopup() (Promise-based, без
  ручного onEvent/offEvent/timeout), кнопки через setMainButtonParams/showBackButton,
  haptic через hapticFeedbackImpactOccurred, тема через themeParamsState с конвертацией
  camelCase→snake_case, cloud storage через getCloudStorageItem/setCloudStorageItem
- api/client.ts: initData через retrieveRawInitData() вместо window.Telegram.WebApp.initData
- AppHeader: фото пользователя через initDataUser() сигнал
- ConnectionModal: openLink через SDK вместо window.Telegram.WebApp.openLink
- ColorPicker: детекция Telegram через isInTelegramWebApp()
- Удалён интерфейс TelegramWebApp (368 строк) и Window augmentation из vite-env.d.ts
- Убрано поле telegram из PlatformContext в types.ts
- Обновлён manualChunks в vite.config.ts
This commit is contained in:
c0mrade
2026-02-04 11:06:59 +03:00
parent 2d00a5c21f
commit 023c3ef6b3
17 changed files with 497 additions and 873 deletions

View File

@@ -1,14 +1,66 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import {
init,
restoreInitData,
mountMiniApp,
miniAppReady,
mountThemeParams,
mountViewport,
expandViewport,
mountSwipeBehavior,
disableVerticalSwipes,
mountClosingBehavior,
disableClosingConfirmation,
mountBackButton,
mountMainButton,
bindThemeParamsCssVars,
bindViewportCssVars,
} from '@telegram-apps/sdk-react';
import { AppWithNavigator } from './AppWithNavigator';
import { initLogoPreload } from './api/branding';
import { initTelegramSDK } from './hooks/useTelegramSDK';
import { getCachedFullscreenEnabled, isTelegramMobile } from './hooks/useTelegramSDK';
import './i18n';
import './styles/globals.css';
// Initialize Telegram SDK (init, viewport mount, CSS vars binding, swipe control)
initTelegramSDK();
// Initialize Telegram SDK v3
try {
init();
restoreInitData();
mountMiniApp();
mountThemeParams();
bindThemeParamsCssVars();
mountSwipeBehavior();
disableVerticalSwipes();
mountClosingBehavior();
disableClosingConfirmation();
mountBackButton();
mountMainButton();
mountViewport()
.then(() => {
bindViewportCssVars();
expandViewport();
})
.catch(() => {});
miniAppReady();
// Auto-enter fullscreen if enabled in settings (mobile only)
if (getCachedFullscreenEnabled() && isTelegramMobile()) {
import('@telegram-apps/sdk-react').then(({ requestFullscreen, isFullscreen }) => {
setTimeout(() => {
if (!isFullscreen()) {
requestFullscreen();
}
}, 100);
});
}
} catch {
// Not in Telegram — ok
}
// Preload logo from cache immediately on page load
initLogoPreload();