Update the template

package.json

@@ -14,7 +14,7 @@
     "predeploy": "npm run build"
   },
   "dependencies": {
-    "@telegram-apps/sdk-react": "^2.0.5",
+    "@telegram-apps/sdk-react": "^2.0.7",
     "@telegram-apps/telegram-ui": "^2.1.5",
     "@tonconnect/ui-react": "^2.0.5",
     "eruda": "^3.0.1",

src/components/EnvUnsupported.tsx

@@ -0,0 +1,37 @@
+import { Placeholder, AppRoot } from '@telegram-apps/telegram-ui';
+import { retrieveLaunchParams, isColorDark, isRGB } from '@telegram-apps/sdk-react';
+import { useMemo } from 'react';
+
+export function EnvUnsupported() {
+  const [platform, isDark] = useMemo(() => {
+    let platform = 'base';
+    let isDark = false;
+    try {
+      const lp = retrieveLaunchParams();
+      const { bgColor } = lp.themeParams;
+      platform = lp.platform;
+      isDark = bgColor && isRGB(bgColor) ? isColorDark(bgColor) : false;
+    } catch { /* empty */
+    }
+
+    return [platform, isDark];
+  }, []);
+
+  return (
+    <AppRoot
+      appearance={isDark ? 'dark' : 'light'}
+      platform={['macos', 'ios'].includes(platform) ? 'ios' : 'base'}
+    >
+      <Placeholder
+        header="Oops"
+        description="You are using too old Telegram client to run this application"
+      >
+        <img
+          alt="Telegram sticker"
+          src="https://xelene.me/telegram.gif"
+          style={{ display: 'block', width: '144px', height: '144px' }}
+        />
+      </Placeholder>
+    </AppRoot>
+  );
+}

src/index.tsx

@@ -2,7 +2,8 @@ import ReactDOM from 'react-dom/client';
 import { StrictMode } from 'react';
 import { retrieveLaunchParams } from '@telegram-apps/sdk-react';
 
-import { Root } from '@/components/Root';
+import { Root } from '@/components/Root.tsx';
+import { EnvUnsupported } from '@/components/EnvUnsupported.tsx';
 import { init } from '@/init.ts';
 
 import '@telegram-apps/telegram-ui/dist/styles.css';
@@ -11,11 +12,17 @@ import './index.css';
 // Mock the environment in case, we are outside Telegram.
 import './mockEnv.ts';
 
-// Configure all application dependencies.
-init(retrieveLaunchParams().startParam === 'debug' || import.meta.env.DEV);
+const root = ReactDOM.createRoot(document.getElementById('root')!);
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <Root/>
-  </StrictMode>,
-);
+try {
+  // Configure all application dependencies.
+  init(retrieveLaunchParams().startParam === 'debug' || import.meta.env.DEV);
+
+  root.render(
+    <StrictMode>
+      <Root/>
+    </StrictMode>,
+  );
+} catch (e) {
+  root.render(<EnvUnsupported/>);
+}

src/init.ts

@@ -19,22 +19,31 @@ export function init(debug: boolean): void {
   // Also, configure the package.
   initSDK();
 
+  // Add Eruda if needed.
+  debug && import('eruda')
+    .then((lib) => lib.default.init())
+    .catch(console.error);
+
+  // Check if all required components are supported.
+  if (!backButton.isSupported() || !miniApp.isSupported()) {
+    throw new Error('ERR_NOT_SUPPORTED');
+  }
+
   // Mount all components used in the project.
-  backButton.isSupported() && backButton.mount();
+  backButton.mount();
   miniApp.mount();
   themeParams.mount();
   initData.restore();
-  void viewport.mount().catch(e => {
-    console.error('Something went wrong mounting the viewport', e);
-  });
+  void viewport
+    .mount()
+    .catch(e => {
+      console.error('Something went wrong mounting the viewport', e);
+    })
+    .then(() => {
+      viewport.bindCssVars();
+    });
 
   // Define components-related CSS variables.
-  viewport.bindCssVars();
   miniApp.bindCssVars();
   themeParams.bindCssVars();
-
-  // Add Eruda if needed.
-  debug && import('eruda')
-    .then((lib) => lib.default.init())
-    .catch(console.error);
 }