telegram-mini-apps / tma.js Goto Github PK

It is currently not that comfortable to use SDK for React. There could be at least several cases when forcing React to call re-render with the same component instance is a bad idea.

For example, useThemeParams returns the same instance of ThemeParams which will not work fine when it is being passed as a dependency to some hook like useEffect. React will just not see the changes.

I need more feedback for this task to start working on rework.

Describe the bug
Native desktop application is not sending theme_changed event until web_app_request_theme was called. In case, web_app_request_theme was called, desktop application starts reacting to Night mode changes and sends required event.

You will be unable to reproduce this error with official SDK as long as it always calls web_app_request_theme event. Nevertheless, bug exists and should be fixed.

To Reproduce
Unfortunately, I can not provide lowest level example to reproduce error. In case, custom SDK will be used, it can't be trusted as long as it is custom.

Expected behavior
theme_changed event is always sent in case theme changed without calling web_app_request_theme.

It seems like we have missed web_app_switch_inline_query method in bridge. We should also add it to SDK

It seems like current init data and SDK packages state is outdated. We should add these properties:

• added_to_attachment_menu
• allows_write_to_pm

We could probably test if navigation package works fine using our solid-sdk-example. The idea is to create navigator integration for solid-router

Platform

Select one of the following:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Mount the button with @tma.js/sdk-react with the following code

const onSubmit = useCallback((values: zod.infer<typeof schema>) => {
  // ...
}, []);

useEffect(() => {
  mainButton.setText("Зберегти");
  mainButton.on("click", form.handleSubmit(onSubmit));

  return () => {
    mainButton.hide();
    mainButton.off("click", form.handleSubmit(onSubmit));
  };
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [onSubmit]);

2. Try to press the button and see nothing happened

Expected behavior

The button calls the callback passed to mainButton.on('click')

I tried latest version but still can't get chat_type and chat_instance

Also types are missed:

Property 'chatInstance' does not exist on type 'InitData'
Property 'chatType' does not exist on type 'InitData'

Looks like something wrong here:
https://github.com/Telegram-Mini-Apps/tma.js/blob/master/packages/sdk/src/components/InitData/InitData.ts

As long as there are a lot of developers working with Next, we have to add SDK usage example for this framework.

Telegram Application

Telegram Desktop

Describe the Bug

Uncaught SyntaxError: The requested module '/node_modules/@solidjs/router/dist/index.jsx' does not provide an export named 'createIntegration'

To Reproduce

import { render } from "solid-js/web";

import { Application } from "./application";
import { Route, Router } from "@solidjs/router";
import { HashNavigator } from "@tma.js/sdk";
import { createIntegration } from "@tma.js/solid-router-integration";

render(
  () => {
    const navigator = new HashNavigator([{}], 0);
    void navigator.attach();

    return (
        {/* @ts-expect-error */}
        <Router source={createIntegration(() => navigator)}>
          <Route component={Application} path={"*"} />
        </Router>
    );
  },
  document.getElementById("root") as HTMLElement,
);


### Expected Behavior

It must work

As long as current sprint is aimed at documentation improvement, this issue is a good point for external developers to suggest the documentation enhancement.

I will add more information on what I am going with the doc in near future.

Telegram Application

Telegram for iOS

Describe the Bug

When I programatically call viewport.expand() while working with a miniapp, the UI disappears too soon when scrolling

An example of this happening (the heading at the bottom disappears):
https://github.com/Telegram-Mini-Apps/tma.js/assets/65034737/4dbd18dd-f458-4de8-85ca-20aa7f7583c9

The issue is not present if I resize the viewport manually. Tested on ios and mac, only happens on ios (dont konw about android)

To Reproduce

• have a miniapp with larger ui than is the screen height (a scrollable container)
• call .expand() programatically
• watch the ui at the bottom of screen flicker / disappear

Expected Behavior

The UI should remain visible as long as it is on the screen.

You've explained some methods of local development in the documentation.

I want to share another one:

1. Run:

mkcert -install

This will install a root mkcert certificate so that your browser won't complain.

2. Run:

mkdir -p dev/certs && cd dev/certs
mkcert acme.local

This will generate self-signed TLS certificate under the dev/certs directory.

3. Add the following to your Webpack Dev Server config:

devServer: {
  https: {
    cert: path.resolve(__dirname, 'dev/certs/acme.local.pem'),
    key: path.resolve(__dirname, 'dev/certs/acme.local-key.pem'),
  },
  allowedHosts: [
    'acme.local',
  ],
  port: 8080,
  proxy: {
    '/api/*': {
      target: 'http://localhost:8081',
      secure: false,
      logLevel: 'debug',
      changeOrigin: true,
    },
  },
  // …
},

The https configuration will use the specified TLS certificates to support HTTPS.

The proxy configuration will allow you to redirect traffic to your backend server via HTTPS, so you won't have to configure TLS there as well.

4. Just add acme.local to the hosts file.

You will be able to open your TWA via https://acme.local:8080 right inside the Telegram without any issues.

Cheers!

Is your feature request related to a problem? Please describe.

A request to add more information to the documentation. I consider the inability to turn off dozens of console.log statements inside the official Telegram SDK a disadvantage. The browser’s console easily gets spammed by unneeded messages making debug more difficult.

Describe the solution you'd like

Document that tma.js doesn't have this issue

P.S. I understand the proper label for this issue is "documentation", but for some reason I can't edit them. Maybe due to the lack of permissions.

Telegram Application

Telegram for Android, Telegram for iOS, Telegram for macOS, Telegram Desktop

Describe the Bug

I am having situations on initialization getting this error: "Async call timeout exceeded. Timeout 500"
The application is done with next.js 13, so I am doing async loading.

'use client';

import {
  SDKProvider,
  type SDKInitOptions,
  DisplayGate,
} from '@tma.js/sdk-react';

interface SDKProviderErrorProps {
  error: unknown;
}

function SDKProviderError({ error }: SDKProviderErrorProps) {
  console.log("🚀 ~ SDKProviderError ~ error:", error)
  return (
    <div className="h-screen bg-bg-dark flex justify-center items-center">
      Oops. Something went wrong.
      <blockquote>
        <code>
          {error instanceof Error ? error.message : JSON.stringify(error)}
        </code>
      </blockquote>
    </div>
  );
}

function SDKProviderLoading() {
  return (
    <div className="h-screen bg-bg-dark flex justify-center items-center">
      SDK is loading.
    </div>
  );
}

function SDKInitialState() {
  return (
    <div className="h-screen bg-bg-dark flex justify-center items-center">
      Waiting for initialization to start.
    </div>
  );
}

/**
 * Root component for the whole project.
 */
export const TeleSDKProvider = (props: React.PropsWithChildren) => {
  const options: SDKInitOptions = {
    cssVars: true,
    acceptCustomStyles: true,
    async: true,
  };

  return (
    <SDKProvider options={options}>
      {/* @ts-ignore */}
      <DisplayGate
        error={SDKProviderError}
        loading={SDKProviderLoading}
        initial={SDKInitialState}>
        {props.children}
      </DisplayGate>
    </SDKProvider>
  );
};

But this code worked in example nextjs 14.

To Reproduce

Steps to reproduce the behavior:
Wrap _app.tsx by example code in NextJS 13

Expected Behavior

Libraries compatible with both NextJS 13 and NextJS 14

Here comes the big section for @tma.js repository. I would like to describe why developers should think twice before using Telegram SDK

I was trying to follow the instructions from the docs:
I installed @tma.js/sdk (0.13.3)
Then pasted this code into my Vue app like so:

import { init } from '@tma.js/sdk';

init().then(components => {
    const { mainButton, viewport } = components;
    mainButton.on('click', () => viewport.expand());
    mainButton
        .setBackgroundColor('#ff0000')
        .setTextColor('#ffffff')
        .setText('Expand')
        .enable()
        .show();
});

I am using Telegram's test environment so that I can use the tma without ssl protocol.

So when I open up the app I see:

1. no main button there
2. if i check the browser and inspect the console I can see the Error with the following text:

Uncaught (in promise) Error: Unable to retrieve any launch parameters. []
at R2 (computeLaunchData.ts:94:9)
    at T2 (retrieveLaunchData.ts:21:22)
    at Dt (init.ts:62:42)
    at Jt (init.ts:166:22)
    at setup (App.vue:16:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7289:25)
    at setupComponent (runtime-core.esm-bundler.js:7250:36)
    at mountComponent (runtime-core.esm-bundler.js:5646:7)
    at processComponent (runtime-core.esm-bundler.js:5612:9)

Steps to reproduce the behavior:

1. install the packaje with "npm i @tma.js/sdk"
2. run tma locally with Telegram on test environment (https://docs.telegram-mini-apps.com/platform/test-environment)
3. paste in your root component the code:

import { init } from '@tma.js/sdk';

init().then(components => {
    const { mainButton, viewport } = components;

    mainButton.on('click', () => viewport.expand());

    mainButton
        .setBackgroundColor('#ff0000')
        .setTextColor('#ffffff')
        .setText('Expand')
        .enable()
        .show();
});

4. See no mainButton there

Expected behavior

I expected to see the main button

missed params chat_type and chat_instance in InitData

https://docs.telegram-mini-apps.com/docs/launch-params/init-data#parameters-list
https://core.telegram.org/bots/webapps#webappinitdata

Telegram Application

Telegram for iOS, Telegram Desktop

Describe the Bug

Hello, im using @tma.js/sdk-react with TelegramUI library and have problems with bg-color variable. tma.js attaching --tg-background-color and --tg-theme-background-color instead of --tg-theme-bg-color (which is described in the telegram documentation). This causes TelegramUI to display the fallback instead of the theme color.

To Reproduce

Steps to reproduce the behavior:

1. Install @tma.js/sdk-react and @tma.js/sdk
2. Check html css variables

Expected Behavior

There must be a --tg-theme-bg-color variable and --tg-theme-secondary-bg-color

Platform

Select platforms where this bug is reproducible:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

When using @tma.js/sdk-react with NextJS an issue with SDK crashing with undefined is not an object (evaluating 'window.TelegramGameProxy.receiveEvent') can appear from time to time

To Reproduce

Steps to reproduce the behavior:

1. Mount the SDK provider with the following code

"use client";

import { useState, useEffect, useMemo } from "react";

import { useSDKContext } from "@tma.js/sdk-react";

export const ComponentsProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [render, setRender] = useState(false);
  const { loading, error } = useSDKContext();

  useEffect(() => {
    setRender(true);
  }, []);

  const errorMessage = useMemo<null | string>(() => {
    if (!error) {
      return null;
    }

    return error instanceof Error ? error.message : "Unknown error";
  }, [error]);

  if (!render) return null;

  if (error) {
    setTimeout(() => {
      throw new Error(`SDK error: ${errorMessage}`);
    });

    return <Alert />;
  }

  if (loading) {
    return <Loading />;
  }

  return children;
};

2. Create several pages linked to each other with useRouter from next/navigation
3. Navigate between pages and see the issue from time to time

Telegram is going to add new theme parameters. This is the reason to add them on our packages.

Nevertheless, the problem is we want next new theme parameters to appear automatically as CSS variables.

Is your feature request related to a problem? Please describe.

No response

Describe the solution you'd like

Add BiometricManager implementation

Describe alternatives you've considered

No response

Additional context

https://core.telegram.org/bots/webapps#biometricmanager

Describe the bug
Getting "Async call timeout exceeded. Timeout: 1000 " error while SDK initialisation in telegram web app (https://web.telegram.org/k)

To Reproduce
Steps to reproduce the behavior:

1. import and use SDKProvider component
2. open mini app in telegram web app

Expected behavior

init should be successful as in android telegram app

Platform

Select one of the following:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Configure SDKProvider with initOptions to be { cssVars: true } to have access to variables
2. Create a div with background set to either --tg-bg-color or to backgroundColor received from useThemeParams hook
3. Open the Mini App in iOS app and macOS/WebK and see different colors for the same theme (iOS background color differs from the header color)

Expected behavior

Color of the div should be the same as the header color

Media
iOS

macOS

WebK

it works sry

for example: page
after click Edit this page on GitHub:

In this task we have to provide the first major version of @tma.js/launch-params package. To make it stable, it seems like we have to provide the following:

• Different utilities to retrieve launch parameters
• Add simple and single utility to allow developers extract launch parameters. This utility could be used at any time, at any place
• Add missing launch parameters
• Re-check all tests
• Write documentation related to package usage

I would like to add the following sections:

• Examples. Here we refer to the examples we already created
• Package formats. By this we could notify users about several formats supported by packages. Don't forget to mention, that UMD for browser is a bad practice

Is your feature request related to a problem? Please describe.
Sometimes, application has no need to wait for user choice in popup. For example, we wanted user to confirm payment via Popup, but something went wrong and payment process was stopped. As a result, user will still see popup, but now, there is no need for response. To make behavior more expected, we could replace current popup content with some message, which states, that payment process failed.

Describe the solution you'd like
To solve such cases and to have more flexible control over popup, we could provide method, which replaces current popup content. Additionally, we could provide method that closes current popup.

Describe alternatives you've considered
-

Additional context
-

1. write something in the search input and go to any page

https://docs.telegram-mini-apps.com/

Telegram Application

Other

Describe the Bug

Hi,
I was looking for a way to use react-router-dom route with params as mini app URL but it's impossible because of the HashNavigator implementation.
Routes

[{
  path: "/foo/:param",
  Component: Comp
}]

There is no way to set https://127.0.0.1:5173/reactjs-template/#/foo/bar as the application URL.

To Reproduce

Steps to reproduce the behavior:

1. pnpm dlx @tma.js/create-mini-app

Language
❯◉ TypeScript
 ◯ JavaScript
SDK
 ◉ tma.js
 ◯ Telegram SDK
Framework
 ◉ React.js
 ◯ Solid.js
 ◯ Next.js

4. pnpm i
5. Setup SSL for the dev server with @vitejs/plugin-basic-ssl
6. Use https://127.0.0.1:5173/reactjs-template/#/foo/bar as the application URL.

Expected Behavior

HashNavigator should persist the navigation state using the URL instead of the sessionStorage to make routes accessible.

Telegram Application

Other

Describe the Bug

Trying to import any functions or variables from "@tma.js/sdk" in project that uses metro bundler ends up in the next behavior: every imported function or variable is undefined

After some investigation I found out that this problem caused by "browser" key in package.json of package. When I deleted this key with specified "./dist/index.iife.js" from my node_modules/@tma.js/sdk/package.json all imports started work correctly. I believe there is some conflict with "browser" key with metro bundler

I understand that this is probably very specific problem, and if there will be no solution I suggest to use package-patch for anyone that will encounter same issue

node_modules/@tma.js/sdk/package.json

   "main": "./dist/index.cjs",
-  "browser": "./dist/index.iife.js",
   "module": "./dist/index.mjs",
   "types": "./dist/dts/index.d.ts",

To Reproduce

Steps to reproduce the behavior:

1. Create project using expo, that uses metro bundler

npx create-expo-app example-app

2. Install @tma.js/sdk

npm install "@tma.js/sdk"

3. Import any function from "@tma.js/sdk" and try to use it in web development mode

/* in App.jsx */
import { init } from "@tma.js/sdk"

console.log({ init })

4. Run expo web development build

npm run web

5. Wait for the build, open http://localhost:8081 and check console

{ init: undefined }

Expected Behavior

Correct import

Platform

Select one of the following:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

This example:

import { validate } from '@tma.js/init-data-node';

const secretToken = '5768337691:AAH5YkoiEuPk8-FZa32hStHTqXiLPtAEhx8';
const initData =
  'query_id=AAHdF6IQAAAAAN0XohDhrOrc' +
  '&user=%7B%22id%22%3A279058397%2C%22first_name%22%3A%22Vladislav%22%2C%22last_name%22%3A%22Kibenko%22%2C%22username%22%3A%22vdkfrost%22%2C%22language_code%22%3A%22ru%22%2C%22is_premium%22%3Atrue%7D' +
  '&auth_date=1662771648' +
  '&hash=c501b71e775f74ce10e377dea85a7ea24ecd640b223ea86dfe453e0eaed2e2b2';

validate(initData, secretToken);

Which i found Here lacks allows_write_to_pm parameter, and always returns Invalid signature error when calling validate() without allows_write_to_pm.

It happens that there is no allows_write_to_pm parameter on the const initData = useInitData(), but when i attach the official Telegram SDK via a script link and read the window.Telegram.initData, then allows_write_to_pm is present on the user object.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://docs.telegram-mini-apps.com/docs/libraries/tma-js-init-data-node
2. Copy/paste code example into your app
3. Run the validate() method
4. Get Invalid signature error, because you don't pass allows_write_to_pm and there is none in tma.js

Expected behavior

A clear and concise description of what you expected to happen.

import { useInitData } from "@tma.js/sdk-react";

const initData = useInitData()
console.log(initData.user.allowsWriteToPm)
// outputs true/false or null

Telegram Application

Telegram for iOS

Describe the Bug

The telegram UI is inconsistent and renders the miniapp differently based on how it was opened.

One method of opening a mini app is through a button in the bot menu like this

(click on "registrovať sa na akcie")

Another option is to directly set the menu button like this

(click on hello)

My concern is that when I use the first option, the opened application fills the entire screen, with chat field being invisible. On the other hand, if I open an app via the second option, the chat field remains visible. This is inconsistent, which in case of my miniapp has negative implications for user experience - It makes a position fixed element at the bottom of the screen hard to interact with (see example)

As you can see, the slider overlaps with native ios controls, which makes this hard to use. As it commonly is the case with usual mobile browsers, I don't think this part of the screen should ever be a part of the app viewport.

To Reproduce

• create any miniApp
• use these two different launching methods

Expected Behavior

I would expect both methods to open the miniapp with the same size.

Describe the bug
Trying to get data from a clipboard but get null
Getting these in logs

To Reproduce
Steps to reproduce the behavior:

 const webApp = useWebApp();

  useEffect(() => {
  webApp.readTextFromClipboard().then((text) => alert(text));
  }, [webApp]);

Expected behavior
A clear and concise description of what you expected to happen.

Telegram Application

Telegram Web A, Telegram Web K

Describe the Bug

Using await cloudStorage.get(...) will do nothing and not throw any error in try catch block despite that cloudStorage.supports("get") returns true

To Reproduce

Steps to reproduce the behavior:

1. Implement method using cloud storage
2. Open component/page using this method and try to fetch cloud storage data
3. See no data in variable which awaits the result and no error in catch block

Expected Behavior

Data is fetched successfully

Runtime error on iOS

Getting following error:

TypeError: undefined is not an object (evaluating 'window.TelegramGameProxy.receiveEvent')

To Reproduce

Run react-sdk-example and add main button that increments some counter.

const [count, setCount] = useState(0);

useEffect(() => {
  const listener = () => setCount((count) => count + 1);
  mainButton.on("click", listener);
  mainButton.show();

  return () => {
    mainButton.off("click", listener);
    mainButton.hide();
  };
}, [mainButton]);

Expected behavior

Button is clickable and increments the count.

Describe the bug
It seems, that in case, when popup is being opened too often, native app stops showing it even when frontend application requests it. You have to wait for about 2-3 seconds and then try again to make it work.

As a result, when web_app_open_popup is called too often, native app starts instantly returning popup_closed event for some reason.

During tests, it was noticed, that it is enough to open popup 3 times in a short period of time (2-3 seconds) to make this bug appear.

To Reproduce
Steps to reproduce the behavior:

1. Open Sandbox
2. Open console
3. Try showing popup with script. When it appears, close. You should do it as fast as you can:

WebView.postEvent('web_app_open_popup', {
    title: 'Title',
    message: 'Message',
    buttons: [{type: 'ok', id: 'ok'}]
})

4. After some attempts, popup will not be shown and popup_closed event will be instantly received.

To make a bug reproduce a bit easier, you could visit Popup section and do the same trick with Alert button, it will show popup for you. No script needed.

Expected behavior
Popup is shown every time web_app_open_popup is called.

Describe the bug
When use Inline Mode with button property, and open WebApp from button getting an error "Unable to extract launch params". If we pass the launch params manually in hash url, in example for testing, - getting "components === null" and sdk is not initializing. This bug always appears in MacOS, Android, iOS. Sometimes appears on Web.

To Reproduce
Steps to reproduce the behavior:

1. Add button property to inline_mode with WebApp url
2. Click on button top open WebApp
3. See error

Expected behavior
WebApp must open without crashes and SDK must be initialized.

Looks like docs link does not work any longer? Could u please fix?

Is your feature request related to a problem? Please describe.

According to the current source code, such function as bindCSSVariables is being called asynchronously which could lead to some user application re-renders.

Describe the solution you'd like

We would like to call this function in the same frame with init function.

There is also a good idea to export everything init function uses to let other developers to write their own initialisation functions in case current one does not fit them.

Platform

Select one of the following:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug
The user type definition doesn't match the latest Telegram implementation.
I.e.: the login event returns an interface for the User like the following:

  first_name: string;
  last_name?: string;
...

while this library exposes the following interface:

  firstName: string;
  lastName?: string;
...

Am I doing something wrong?

thanks for the great work!

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Telegram Application

Telegram for iOS, Telegram for macOS, Telegram Desktop

Describe the Bug

When i run "npx @tma.js/create-mini-app " after i specify directory name it shows this:

and nothing happens until i press "return" (aka "Enter") button.

Then it returns Error:

What could cause the problem ?

To Reproduce

Steps to reproduce the behavior:

1. Go to https://docs.telegram-mini-apps.com/packages/tma-js-sdk and copy installation terminal script from there.
2. Go to NodeJS and navigate to any directory, then run the script that you've copied in step 1.
3. Follow wizard instructions
4. See error

Expected Behavior

I expected to get the boilerplate initialized successfully

SvelteKit is built on Svelte, a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know — HTML, CSS and JavaScript

fast:
Powered by Svelte and Vite, speed is baked into every crevice: fast setup, fast dev, fast builds, fast page loads, fast navigation. fastest choice for an TMA.

fun:
No more wasted days figuring out bundler configuration, routing, SSR, CSP, TypeScript, deployment settings and all the other boring stuff.

flexible:
SPA? MPA? SSR? SSG? Check. SvelteKit gives you the tools to succeed whatever it is you're building. And it runs wherever JavaScript does.

Platform

Select one of the following:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Inspect the WebApp with DevTools using the script from the documentation
2. Inspect the WebApp with DevTools using the package
3. Compare and see the amount of colors in the second case is less then in the first one

Expected behavior

The amount of colors is the same in both cases

Platform

Select platforms where this bug is reproducible:

• Telegram for Android
• Telegram for iOS
• Telegram for macOS
• Telegram Desktop
• Telegram Web A
• Telegram Web K

Describe the bug

I am having situations on initialization getting this error: "Async call timeout exceeded. Timeout 100"
The same miniapp is working fine in other devices but specially in an android phone I have 2 telegram user and trying switching between them and getting that error 90% of the time when opening the application.
In other devices, the application is always opening fine with the same users.

The application is done with next.js, so I am doing async loading.

'use client'

import type { PropsWithChildren } from 'react'
import { SDKProvider } from '@tma.js/sdk-react'

export function TmaSDKLoader({ children }: PropsWithChildren) {
  return (
    <SDKProvider
      options={{
        cssVars: true,
        acceptCustomStyles: true,
        async: true,
      }}
    >
      {children}
    </SDKProvider>
  )
}

To Reproduce

Steps to reproduce the behavior:
Do loading process and show error result:
const { loading, initResult, error } = useSDKContext()

Expected behavior

Expected to obtain a value on initResult when loading finishes.

Navigator restoration will not work in Telegram Web as long as web version recreates whole iframe breaking browser history. We should probably restore from the sessionStorage then.

Could take such implementation from the SDK.

Is your feature request related to a problem? Please describe.

Currently, when I click the menu button on the top right corner I can only see "Reload Page" option.

Describe the solution you'd like

I would like to add "Settings" button there, that opens settings page.

Describe alternatives you've considered

I can add that button somewhere on the screen, but putting it inside that menu seems more appropriate.

Describe the bug
Just copy pasted what was in the docs to setup a minimul Webapp

When I call this:
in my App
const webApp = useWebApp();

useEffect(() => {
webApp.ready();
}, [webApp]);

To Reproduce
Steps to reproduce the behavior:
Follow the guide here: https://docs.twa.dev/docs/libraries/twa-js-sdk-react

Expected behavior
A clear and concise description of what you expected to happen.

My main.tsx:

import React from "react";
import ReactDOM from "react-dom/client";

import "./index.css";
import { App } from "./app";



ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
      <App />
  </React.StrictMode>
);

my app.tsx

const options: InitOptions = {
    acceptScrollbarStyle: true,
    checkCompat: true,
    debug: true
  };
const AppWrapped = withSDK(Root);

export function App() {
  return (
    <SDKProvider initOptions={options}>
      <AppWrapped />
    </SDKProvider>
  );
}

my root.tsx

/**
 * This component is the layer controlling the application display. It displays
 * application in case, the SDK is initialized, displays an error if something
 * went wrong, and a loader if the SDK is warming up.
 */
function Loader({children}: PropsWithChildren<{}>) {
    const {didInit, components, error} = useSDK();
  
    // There were no calls of SDK's init function. It means, we did not
    // even try to do it.
    if (!didInit) {
      return <div>SDK init function is not yet called.</div>;
    }
  
    // Error occurred during SDK init.
    if (error !== null) {
      return <div>Something went wrong.</div>;
    }
  
    // If components is null, it means, SDK is not ready at the
    // moment and currently initializing. Usually, it takes like
    // several milliseconds or something like that, but we should
    // have this check.
    if (components === null) {
      return <div>Warming up SDK.</div>;
    }
  
    // Safely render application.
    return <>{children}</>;
  }

export function Root({ sdk }) {

  return (
    <Loader>
        <div>TEST app</div>
    </Loader>
  )
}

Loader gets stuck at Warming up SDK.
When console logging the sdk:
{components: null, didInit: true, error: null}

I ran into a problem that my HTML file was infinitely cached. The problem disappeared after I uninstalled and reinstalled Telegram. It looks like we need to add headers that directly affect the caching of HTML files.

https://stackoverflow.com/questions/49547/how-do-we-control-web-page-caching-across-all-browsers/2068407#2068407

Developers are currently unable to get init data raw representation the normal way. We should add useInitDataRaw hook.