I can see the issue. The Telegram WebApp script adds style={{--tg-viewport-height:"100vh",--tg-viewport-stable-height:"100vh"}} to the <html> element before React hydrates, causing a mismatch. I need to:
suppressHydrationWarning on the html elementI've fixed both issues:
suppressHydrationWarning to both the <html> and <body> elements. The Telegram WebApp script injects CSS variables (--tg-viewport-height, --tg-viewport-stable-height) onto the html element before React hydrates, which caused the mismatch. This prop tells React to ignore attribute differences on these elements.isVersionAtLeast() helper function and version checks for Telegram API features. Features like enableClosingConfirmation, setHeaderColor, and setBackgroundColor require version 6.2+, so they're now only called when the WebApp version supports them. The methods are also marked as optional in the TypeScript interface.The logs show no errors - just a Fast Refresh full reload notification, which is expected behavior when modifying context providers like the TelegramProvider. The app is loading successfully with 200 responses.
The Telegram Mini App integration is now working correctly. The hydration warnings are suppressed and the version-specific API calls are properly guarded.
I'll simplify the UI and add random user matching. This requires a backend to track available users. Let me check what integrations are available.
You can send messages while the preview loads