feat: migrate to Next.js for Mini App and enhance project structure
- Replaced the previous webapp with a new Mini App built using Next.js, improving performance and maintainability. - Updated the `.gitignore` to exclude Next.js build artifacts and node modules. - Revised documentation in `AGENTS.md`, `README.md`, and `architecture.md` to reflect the new Mini App structure and technology stack. - Enhanced Dockerfile to support the new build process for the Next.js application. - Updated CI workflow to build and test the Next.js application. - Added new configuration options for the Mini App, including `MINI_APP_SHORT_NAME` for improved deep linking. - Refactored frontend testing setup to accommodate the new structure and testing framework. - Removed legacy webapp files and dependencies to streamline the project.
This commit is contained in:
46
webapp-next/src/components/providers/TelegramProvider.tsx
Normal file
46
webapp-next/src/components/providers/TelegramProvider.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import {
|
||||
init,
|
||||
mountMiniAppSync,
|
||||
mountThemeParamsSync,
|
||||
bindThemeParamsCssVars,
|
||||
} from "@telegram-apps/sdk-react";
|
||||
import { fixSurfaceContrast } from "@/hooks/use-telegram-theme";
|
||||
|
||||
/**
|
||||
* Wraps the app with Telegram Mini App SDK initialization.
|
||||
* Calls init(acceptCustomStyles), mounts theme params (binds --tg-theme-* CSS vars),
|
||||
* and mounts the mini app. Does not call ready() here — the app calls
|
||||
* callMiniAppReadyOnce() from lib/telegram-ready when the first visible screen
|
||||
* has finished loading, so Telegram keeps its native loading animation until then.
|
||||
* Theme is set before first paint by the inline script in layout.tsx (URL hash);
|
||||
* useTelegramTheme() in the app handles ongoing theme changes.
|
||||
*/
|
||||
export function TelegramProvider({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
const cleanup = init({ acceptCustomStyles: true });
|
||||
|
||||
if (mountThemeParamsSync.isAvailable()) {
|
||||
mountThemeParamsSync();
|
||||
}
|
||||
if (bindThemeParamsCssVars.isAvailable()) {
|
||||
bindThemeParamsCssVars();
|
||||
}
|
||||
fixSurfaceContrast();
|
||||
void document.documentElement.offsetHeight;
|
||||
|
||||
if (mountMiniAppSync.isAvailable()) {
|
||||
mountMiniAppSync();
|
||||
}
|
||||
|
||||
return cleanup;
|
||||
}, []);
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
Reference in New Issue
Block a user