Telegram Mini Apps Tma Js Sdk

https://docs.telegram-mini-apps.com/packages/
Admin
A TypeScript library designed to simplify communication and interaction with Telegram Mini Apps...
Tokens:62,707
Snippets:608
Trust Score:5.4
Update:1 month ago
Show doc for...
Tokens:
Raw
### Installation

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react

Install the @tma.js/sdk-react package. It is recommended to have React installed as it is a peer dependency.

```APIDOC
pnpm i @tma.js/sdk-react

npm i @tma.js/sdk-react

yarn add @tma.js/sdk-react
```

--------------------------------

### Install @tma.js/init-data-node with yarn

Source: https://docs.telegram-mini-apps.com/packages/tma-js-init-data-node

Install the package using yarn.

```bash
yarn add @tma.js/init-data-node
```

--------------------------------

### Install @tma.js/init-data-node with npm

Source: https://docs.telegram-mini-apps.com/packages/tma-js-init-data-node

Install the package using npm.

```bash
npm i @tma.js/init-data-node
```

--------------------------------

### Mock Telegram Environment Example

Source: https://docs.telegram-mini-apps.com/packages/tma-js-bridge/environment

This snippet shows how to initialize a mocked Telegram environment. It includes setting up launch parameters like theme, user data, and start parameters, as well as defining event handlers for theme, viewport, and safe area changes. Use this for local development and testing without a live Telegram connection.

```typescript
import { mockTelegramEnv, emitEvent } from '@tma.js/bridge';

const noInsets = {
  left: 0,
  top: 0,
  bottom: 0,
  right: 0,
} as const;
const themeParams = {
  accent_text_color: '#6ab2f2',
  bg_color: '#17212b',
  button_color: '#5288c1',
  button_text_color: '#ffffff',
  destructive_text_color: '#ec3942',
  header_bg_color: '#17212b',
  hint_color: '#708499',
  link_color: '#6ab3f3',
  secondary_bg_color: '#232e3c',
  section_bg_color: '#17212b',
  section_header_text_color: '#6ab3f3',
  subtitle_text_color: '#708499',
  text_color: '#f5f5f5',
} as const;

mockTelegramEnv({
  launchParams: {
    tgWebAppThemeParams: themeParams,
    tgWebAppData: new URLSearchParams([
      ['user', JSON.stringify({
        id: 1,
        first_name: 'Pavel',
      })],
      ['hash', ''],
      ['signature', ''],
      ['auth_date', Date.now().toString()],
    ]),
    tgWebAppStartParam: 'debug',
    tgWebAppVersion: '8',
    tgWebAppPlatform: 'tdesktop',
  },
  onEvent(event) {
    // event here is an object { event: string; params?: any }, but 
    // typed depending on the "event" prop.
    if (event.name === 'web_app_request_theme') {
      return emitEvent('theme_changed', { theme_params: themeParams });
    }
    if (event.name === 'web_app_request_viewport') {
      return emitEvent('viewport_changed', {
        height: window.innerHeight,
        width: window.innerWidth,
        is_expanded: true,
        is_state_stable: true,
      });
    }
    if (event.name === 'web_app_request_content_safe_area') {
      return emitEvent('content_safe_area_changed', noInsets);
    }
    if (event.name === 'web_app_request_safe_area') {
      return emitEvent('safe_area_changed', noInsets);
    }
  },
});
```

--------------------------------

### Install @tma.js/init-data-node with pnpm

Source: https://docs.telegram-mini-apps.com/packages/tma-js-init-data-node

Install the package using pnpm.

```bash
pnpm i @tma.js/init-data-node
```

--------------------------------

### Complete signing example for Node.js

Source: https://docs.telegram-mini-apps.com/packages/tma-js-init-data-node/signing

A comprehensive example demonstrating how to use the `sign` method in a Node.js environment with all necessary parameters.

```typescript
import { sign } from '@tma.js/init-data-node';

sign(
  {
    can_send_after: 10000,
    chat: {
      id: 1,
      type: 'group',
      username: 'my-chat',
      title: 'chat-title',
      photo_url: 'chat-photo',
    },
    chat_instance: '888',
    chat_type: 'sender',
    query_id: 'QUERY',
    receiver: {
      added_to_attachment_menu: false,
      allows_write_to_pm: true,
      first_name: 'receiver-first-name',
      id: 991,
      is_bot: false,
      is_premium: true,
      language_code: 'ru',
      last_name: 'receiver-last-name',
      photo_url: 'receiver-photo',
      username: 'receiver-username',
    },
    start_param: 'debug',
    user: {
      added_to_attachment_menu: false,
      allows_write_to_pm: false,
      first_name: 'user-first-name',
      id: 222,
      is_bot: true,
      is_premium: false,
      language_code: 'en',
      last_name: 'user-last-name',
      photo_url: 'user-photo',
      username: 'user-username',
    },
  },
  '5768337691:AAH5YkoiEuPk8-FZa32hStHTqXiLPtAEhx8',
  new Date(1000),
);
```

--------------------------------

### Install @tma.js/sdk-vue with npm

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-vue

Install the package using npm. Assumes Vue is already installed.

```bash
npm i @tma.js/sdk-vue
```

--------------------------------

### Install @tma.js/sdk-vue with pnpm

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-vue

Install the package using pnpm. Assumes Vue is already installed.

```bash
pnpm i @tma.js/sdk-vue
```

--------------------------------

### Get Start Param

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieve the value of the `startattach` or `startapp` query parameter from the launch link. Returns a string or `undefined`.

```typescript
initData.startParam(); // 'my-value'
```

--------------------------------

### Basic Usage

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react

A simple example demonstrating how to initialize the SDK and mount the Back Button component.

```APIDOC
import ReactDOM from 'react-dom/client';
import { init, backButton } from '@tma.js/sdk-react';

import { BackButton } from './BackButton.js';

// Initialize the package.
init();

// Mount the Back Button, so we will work with 
// the actual component properties.
backButton.mount();

ReactDOM
  .createRoot(document.getElementById('root')!)
  .render(<BackButton />);
```

--------------------------------

### Install @tma.js/sdk-vue with yarn

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-vue

Install the package using yarn. Assumes Vue is already installed.

```bash
yarn add @tma.js/sdk-vue
```

--------------------------------

### Install @tma.js/sdk-solid

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-solid

Install the SDK package using your preferred package manager.

```bash
pnpm i @tma.js/sdk-solid
```

```bash
npm i @tma.js/sdk-solid
```

```bash
yarn add @tma.js/sdk-solid
```

--------------------------------

### Install @tma.js/signals with yarn

Source: https://docs.telegram-mini-apps.com/packages/tma-js-signals

Install the signals package using yarn.

```bash
yarn add @tma.js/signals
```

--------------------------------

### Install @tma.js/sdk-svelte with npm

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-svelte

Install the package using npm. Assumes svelte-js is already installed.

```bash
npm i @tma.js/sdk-svelte
```

--------------------------------

### Install @tma.js/signals with npm

Source: https://docs.telegram-mini-apps.com/packages/tma-js-signals

Install the signals package using npm.

```bash
npm i @tma.js/signals
```

--------------------------------

### Install @tma.js/sdk-svelte with yarn

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-svelte

Install the package using yarn. Assumes svelte-js is already installed.

```bash
yarn add @tma.js/sdk-svelte
```

--------------------------------

### Install @tma.js/sdk-svelte with pnpm

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-svelte

Install the package using pnpm. Assumes svelte-js is already installed.

```bash
pnpm i @tma.js/sdk-svelte
```

--------------------------------

### Install @tma.js/sdk-react

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react

Install the SDK React package using your preferred package manager.

```bash
pnpm i @tma.js/sdk-react
```

```bash
npm i @tma.js/sdk-react
```

```bash
yarn add @tma.js/sdk-react
```

--------------------------------

### Install Core Telegram Mini Apps SDK (npm)

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/usage-tips

Install the core SDK package using npm when not using a framework-specific wrapper.

```bash
npm i @tma.js/sdk
```

--------------------------------

### Complete signing example for Web Crypto API

Source: https://docs.telegram-mini-apps.com/packages/tma-js-init-data-node/signing

An example of using the `sign` method in a browser environment with the Web Crypto API. Note the use of `await` as the operation is asynchronous.

```typescript
import { sign } from '@tma.js/init-data-node/web';

await sign(
  {
    can_send_after: 10000,
    chat: {
      id: 1,
      type: 'group',
      username: 'my-chat',
      title: 'chat-title',
      photo_url: 'chat-photo',
    },
    chat_instance: '888',
    chat_type: 'sender',
    query_id: 'QUERY',
    receiver: {
      added_to_attachment_menu: false,
      allows_write_to_pm: true,
      first_name: 'receiver-first-name',
      id: 991,
      is_bot: false,
      is_premium: true,
      language_code: 'ru',
      last_name: 'receiver-last-name',
      photo_url: 'receiver-photo',
      username: 'receiver-username',
    },
    start_param: 'debug',
    user: {
      added_to_attachment_menu: false,
      allows_write_to_pm: false,
      first_name: 'user-first-name',
      id: 222,
      is_bot: true,
      is_premium: false,
      language_code: 'en',
      last_name: 'user-last-name',
      photo_url: 'user-photo',
      username: 'user-username',
    },
  },
  '5768337691:AAH5YkoiEuPk8-FZa32hStHTqXiLPtAEhx8',
  new Date(1000),
);
```

--------------------------------

### Install Telegram Mini Apps SDK (npm)

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/usage-tips

Use this command to install the core SDK package with npm if your project does not rely on a specific framework wrapper.

```bash
npm i @tma.js/sdk-react
```

--------------------------------

### Install @tma.js/signals with pnpm

Source: https://docs.telegram-mini-apps.com/packages/tma-js-signals

Install the signals package using pnpm.

```bash
pnpm i @tma.js/signals
```

--------------------------------

### Install Telegram Mini Apps SDK (yarn)

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/usage-tips

Use this command to install the core SDK package with yarn if your project does not rely on a specific framework wrapper.

```bash
yarn add @tma.js/sdk-react
```

--------------------------------

### Install Core Telegram Mini Apps SDK (yarn)

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/usage-tips

Install the core SDK package using yarn when not using a framework-specific wrapper.

```bash
yarn add @tma.js/sdk
```

--------------------------------

### Initialize SDK and Mount Back Button

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-solid

Initialize the SDK and mount the Back Button component. This setup is necessary to interact with the actual component properties.

```tsx
import { render } from 'solid-js/web';
import { init, backButton } from '@tma.js/sdk-solid';

import { BackButton } from './BackButton.js';

// Initialize the package.
init();

// Mount the Back Button, so we will work with 
// the actual component properties.
backButton.mount();

render(() => <BackButton />, document.getElementById('root')!);
```

--------------------------------

### Install Telegram Mini Apps SDK (pnpm)

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/usage-tips

Use this command to install the core SDK package with pnpm if your project does not rely on a specific framework wrapper.

```bash
pnpm i @tma.js/sdk-react
```

--------------------------------

### Install Core Telegram Mini Apps SDK (pnpm)

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/usage-tips

Install the core SDK package using pnpm when not using a framework-specific wrapper.

```bash
pnpm i @tma.js/sdk
```

--------------------------------

### Install @tma.js/bridge with npm

Source: https://docs.telegram-mini-apps.com/packages/tma-js-bridge

Install the @tma.js/bridge package using npm.

```bash
npm i @tma.js/bridge
```

--------------------------------

### Install @tma.js/bridge with yarn

Source: https://docs.telegram-mini-apps.com/packages/tma-js-bridge

Install the @tma.js/bridge package using yarn.

```bash
yarn add @tma.js/bridge
```

--------------------------------

### Install @tma.js/bridge with pnpm

Source: https://docs.telegram-mini-apps.com/packages/tma-js-bridge

Install the @tma.js/bridge package using pnpm.

```bash
pnpm i @tma.js/bridge
```

--------------------------------

### Functional signing example for Node.js

Source: https://docs.telegram-mini-apps.com/packages/tma-js-init-data-node/signing

Demonstrates signing init data using a functional programming approach with `signFp` and `fp-ts/Either` for error handling in Node.js.

```typescript
import { signFp } from '@tma.js/init-data-node';
import * as E from 'fp-ts/Either';
import { pipe } from 'fp-ts/function';

pipe(
  signFp(
    {
      can_send_after: 10000,
      chat: {
        id: 1,
        type: 'group',
        username: 'my-chat',
        title: 'chat-title',
        photo_url: 'chat-photo',
      },
      chat_instance: '888',
      chat_type: 'sender',
      query_id: 'QUERY',
      receiver: {
        added_to_attachment_menu: false,
        allows_write_to_pm: true,
        first_name: 'receiver-first-name',
        id: 991,
        is_bot: false,
        is_premium: true,
        language_code: 'ru',
        last_name: 'receiver-last-name',
        photo_url: 'receiver-photo',
        username: 'receiver-username',
      },
      start_param: 'debug',
      user: {
        added_to_attachment_menu: false,
        allows_write_to_pm: false,
        first_name: 'user-first-name',
        id: 222,
        is_bot: true,
        is_premium: false,
        language_code: 'en',
        last_name: 'user-last-name',
        photo_url: 'user-photo',
        username: 'user-username',
      },
    },
    '5768337691:AAH5YkoiEuPk8-FZa32hStHTqXiLPtAEhx8',
    new Date(1000),
  ),
  E.match(
    error => {
      // Something went wrong.
    },
    signedData => {
      // Signing is successful.
    },
  ),
);
```

--------------------------------

### Example of Signed Initialization Data String

Source: https://docs.telegram-mini-apps.com/packages/tma-js-init-data-node/signing

This string represents the format of the signed initialization data, including all relevant user and chat information, along with the computed hash.

```plaintext
'auth_date=1' +
'&can_send_after=10000' +
'&chat=%7B%22id%22%3A1%2C%22type%22%3A%22group%22%2C%22title%22%3A%22chat-title%22%2C%22photo_url%22%3A%22group%22%2C%22username%22%3A%22my-chat%22%7D' +
'&chat_instance=888' +
'&chat_type=sender' +
'&query_id=QUERY' +
'&receiver=%7B%22added_to_attachment_menu%22%3Afalse%2C%22allows_write_to_pm%22%3Atrue%2C%22first_name%22%3A%22receiver-first-name%22%2C%22id%22%3A991%2C%22is_bot%22%3Afalse%2C%22is_premium%22%3Atrue%2C%22language_code%22%3A%22ru%22%2C%22last_name%22%3A%22receiver-last-name%22%2C%22photo_url%22%3A%22receiver-photo%22%2C%22username%22%3A%22receiver-username%22%7D' +
'&start_param=debug' +
'&user=%7B%22added_to_attachment_menu%22%3Afalse%2C%22allows_write_to_pm%22%3Afalse%2C%22first_name%22%3A%22user-first-name%22%2C%22id%22%3A222%2C%22is_bot%22%3Atrue%2C%22is_premium%22%3Afalse%2C%22language_code%22%3A%22en%22%2C%22last_name%22%3A%22user-last-name%22%2C%22photo_url%22%3A%22user-photo%22%2C%22username%22%3A%22user-username%22%7D' +
'&hash=47cfa22e72b887cba90c9cb833c5ea0f599975b6ce7193741844b5c4a4228b40'
```

--------------------------------

### Web Crypto API Functional Signing Example

Source: https://docs.telegram-mini-apps.com/packages/tma-js-init-data-node/signing

An example using the functional `signFp` for browser environments, leveraging `fp-ts/TaskEither` for asynchronous error handling.

```typescript
import { signFp } from '@tma.js/init-data-node/web';
import * as TE from 'fp-ts/TaskEither';
import { pipe } from 'fp-ts/function';

pipe(
  signFp(
    {
      can_send_after: 10000,
      chat: {
        id: 1,
        type: 'group',
        username: 'my-chat',
        title: 'chat-title',
        photo_url: 'chat-photo',
      },
      chat_instance: '888',
      chat_type: 'sender',
      query_id: 'QUERY',
      receiver: {
        added_to_attachment_menu: false,
        allows_write_to_pm: true,
        first_name: 'receiver-first-name',
        id: 991,
        is_bot: false,
        is_premium: true,
        language_code: 'ru',
        last_name: 'receiver-last-name',
        photo_url: 'receiver-photo',
        username: 'receiver-username',
      },
    },
    '5768337691:AAH5YkoiEuPk8-FZa32hStHTqXiLPtAEhx8',
    new Date(1000),
  ),
  TE.match(
    error => {
      // Something went wrong.
    },
    signedData => {
      // Signing is successful.
    },
  ),
);
```

--------------------------------

### Using useSignal Hook

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-solid

Demonstrates how to use the `useSignal` helper to integrate SDK signals with Solid.js signals. This example shows how to track the back button's visibility.

```ts
import { createEffect, onCleanup, onMount } from 'solid-js';
import { backButton, useSignal } from '@tma.js/sdk-solid';

function Component() {
  const isVisible = useSignal(backButton.isVisible);

  createEffect(() => {
    console.log('The button is', isVisible() ? 'visible' : 'invisible');
  });

  onMount(() => {
    backButton.show();
    onCleanup(() => {
      backButton.hide();
    });
  });

  return null;
}
```

--------------------------------

### Get Raw Launch Parameters with useRawLaunchParams

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react

Retrieve launch parameters in their raw, URL-encoded string format using the `useRawLaunchParams` hook.

```ts
import { useRawLaunchParams } from '@tma.js/sdk-react';

function Component() {
  console.log(useRawLaunchParams());
  // tgWebAppBotInline=0&tgWebAppData=%7B%22user%22%3A%7B%7D...
}

```

--------------------------------

### Functional signing example for Web Crypto API

Source: https://docs.telegram-mini-apps.com/packages/tma-js-init-data-node/signing

Demonstrates signing init data using `signFp` with `fp-ts/TaskEither` for asynchronous error handling in browser environments.

```typescript
import { signFp } from '@tma.js/init-data-node/web';
import * as TE from 'fp-ts/TaskEither';
import { pipe } from 'fp-ts/function';

pipe(
  signFp(
    {
      can_send_after: 10000,
      chat: {
        id: 1,
        type: 'group',
        username: 'my-chat',
        title: 'chat-title',
        photo_url: 'chat-photo',
      },
      chat_instance: '888',
      chat_type: 'sender',
      query_id: 'QUERY',
      receiver: {

```

--------------------------------

### Get Hash

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieve the initialization data signature. Returns a string or `undefined`.

```typescript
initData.hash(); // 'group'
```

--------------------------------

### Get Raw Init Data with useRawInitData

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react

Retrieve init data in its raw JSON string format using the `useRawInitData` hook.

```ts
import { useRawInitData } from '@tma.js/sdk-react';

function Component() {
  console.log(useRawInitData());
  // '{"user":...,"auth_date":...,"query_id":...,...}'
}

```

--------------------------------

### Initialize SDK and use BackButton component in Svelte

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-svelte

Basic Svelte component setup to initialize the SDK and render a BackButton. Ensure the BackButton component is imported and used.

```svelte
<script lang="ts">
  import { init, backButton } from '@tma.js/sdk-svelte';

  import { BackButton } from './BackButton.svelte';

  // Initialize the package.
  init();
</script>

<BackButton />

```

--------------------------------

### Retrieve Raw Launch Parameters - TypeScript

Source: https://docs.telegram-mini-apps.com/packages/tma-js-bridge/launch-parameters

To get launch parameters in their initial format as query parameters, use this function. The output is a string of key-value pairs.

```typescript
import { retrieveRawLaunchParams } from '@tma.js/bridge';

retrieveRawLaunchParams();
// tgWebAppBotInline=0&tgWebAppData=%7B%22user%22%3A%7B%7D%2C%22auth_date%22%3A1787367222%2C%22query_id%22%3A%22abc%22%7D...&...
```

--------------------------------

### General Init Data Validation

Source: https://docs.telegram-mini-apps.com/packages/tma-js-init-data-node/validating

Provides examples of validating the initialization data signature using the `validate` function for both Node.js and web environments.

```APIDOC
## General Init Data Validation

### Node.js Environment

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

validate(
  // Init data.
  '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',
  // Bot secret token.
  '5768337691:AAH5YkoiEuPk8-FZa32hStHTqXiLPtAEhx8',
);
```

### Web Crypto API (non-Node.js) Environment

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

await validate(
  // Init data.
  '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',
  // Bot secret token.
  '5768337691:AAH5YkoiEuPk8-FZa32hStHTqXiLPtAEhx8',
);
```
```

--------------------------------

### Track Home Screen Addition Status

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/home-screen

Listen for events related to adding the Mini App to the home screen. Use `on` to subscribe and `off` to unsubscribe. Note that events may not be received if the device cannot determine the installation status.

```typescript
import { on, off } from '@tma.js/sdk';

function onAdded() {
  console.log('Added');
}

on('home_screen_added', onAdded);
off('home_screen_added', onAdded);

function onFailed() {
  console.log('User declined the request');
}

on('home_screen_failed', onFailed);
off('home_screen_failed', onFailed);
```

--------------------------------

### Validate Init Data with Hashed Token

Source: https://docs.telegram-mini-apps.com/packages/tma-js-init-data-node/validating

This example demonstrates how to use the `validate` function with a hashed secret token. This approach is useful for reducing the instances where you directly pass a raw token.

```APIDOC
## validate

### Description
Validates Telegram Mini App init data. It can optionally use a hashed secret token for enhanced security.

### Method
`validate(initData: string, secretToken: string, options?: { tokenHashed: true })`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```ts
import { validate } from '@tma.js/init-data-node';

validate(
  // Init data.
  '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',
  // Hashed secret token.
  'a5c609aa52f63cb5e6d8ceb6e4138726ea82bbc36bb786d64482d445ea38ee5f',
  { tokenHashed: true },
);
```

### Response
#### Success Response (void)
Returns void if the init data is valid.

#### Error Response
Throws an error if the init data is invalid.

#### Response Example
None
```

--------------------------------

### Ready Method

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/mini-app

The `ready` method signals that the Mini App is ready to be displayed, hiding the loading placeholder and showing the Mini App. It should be called as early as possible for a smooth user experience.

```APIDOC
## `ready` 

To signal that the Mini App is ready to be displayed, use the `ready` method. Once called, the loading placeholder is hidden, and the Mini App is shown.

```ts
miniApp.ready();
```

TIP
Call this function as early as possible after loading essential interface elements to ensure a smooth user experience.
```

--------------------------------

### Initialize SDK with Updated Options

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/migrate-from-telegram-apps

The `init` function options have been updated. You no longer need to pass a complete set of launch parameters.

```typescript
interface InitOptions {
  /**
   * True if SDK should accept styles sent from the Telegram
   * application.
   * @default true
   */
  acceptCustomStyles?: boolean;
  /**
   * True if the application is launched in inline mode.
   * @default Will be calculated based on the launch parameters' 
   * tgWebAppBotInline field.
   */
  isInlineMode?: boolean;
  /**
   * A custom `postEvent` function to use across the package.
   * @default tma.js/bridge's postEventFp function will be used.
   */
  postEvent?: PostEventFpFn;
  /**
   * Mini application theme parameters.
   * @default Will be calculated based on the launch parameters' 
   * tgWebAppThemeParams field.
   */
  themeParams?: ThemeParams;
  /**
   * Telegram Mini Apps version supported by the Telegram
   * client.
   * @default Will be calculated based on the launch parameters' 
   * tgWebAppVersion field.
   */
  version?: Version;
}
```

--------------------------------

### Initialize SDK with `initFp`

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/initializing

Use the `initFp` function for initialization. This is an alternative to `init` and also configures the SDK's global dependencies.

```typescript
import { initFp } from '@tma.js/sdk';

initFp();
```

--------------------------------

### Get Can Send After

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Get the number of seconds after which a message can be sent using `answerWebAppQuery`. Returns a number or `undefined`.

```typescript
initData.canSendAfter(); // 3600
```

--------------------------------

### Initialize SDK and handle Back Button

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk

Initialize the SDK and set up the back button to navigate the browser history. Ensure the SDK is initialized before using its components. The onClick handler returns a function to unbind the event listener.

```typescript
import { init, backButton } from '@tma.js/sdk';

// Init the package and actualize all global dependencies.
init();

// Mount the back button component and retrieve its actual
// state.
backButton.mount();

// When a user clicked the back button, go back in the
// navigation history.
const off = backButton.onClick(() => {
  off();
  window.history.back();
});
```

--------------------------------

### useRawLaunchParams Hook

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react

Returns launch parameters in a raw format from any known source.

```APIDOC
import { useRawLaunchParams } from '@tma.js/sdk-react';

function Component() {
  console.log(useRawLaunchParams());
  // Example output:
  // tgWebAppBotInline=0&tgWebAppData=%7B%22user%22%3A%7B%7D... 
}
```

--------------------------------

### Get signal value

Source: https://docs.telegram-mini-apps.com/packages/tma-js-signals

Retrieve the current value of a signal by calling the signal function.

```typescript
console.log('The element is', isVisible() ? 'visible' : 'invisible');
```

--------------------------------

### Get User Data

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieve an object containing information about the current user. Returns the `User` object or `undefined`.

```typescript
initData.user();
// {
//   added_to_attachment_menu: false,
//   allows_write_to_pm: true,
//   is_premium: true,
//   first_name: 'Pavel',
//   id: 78262681,
//   is_bot: false,
//   last_name: 'Durov',
//   language_code: 'ru',
//   photo_url: 'https://example.com/image.png',
//   username: 'durove',
// }
```

--------------------------------

### Initialize SDK and Mount Back Button

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react

Initialize the SDK and mount the Back Button component for integration into your React application.

```tsx
import ReactDOM from 'react-dom/client';
import { init, backButton } from '@tma.js/sdk-react';

import { BackButton } from './BackButton.js';

// Initialize the package.
init();

// Mount the Back Button, so we will work with 
// the actual component properties.
backButton.mount();

ReactDOM
  .createRoot(document.getElementById('root')!)
  .render(<BackButton />);

```

--------------------------------

### Get Init Data State Object

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieve the initialization data as an object. Returns the `InitData` object or `undefined`.

```typescript
initData.state();
```

--------------------------------

### Get Raw Init Data

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieve the raw string representation of the initialization data. Returns a string or `undefined`.

```typescript
initData.raw(); // 'user=...&chat=...&...'
```

--------------------------------

### Mounting and Unmounting

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/mini-app

Demonstrates how to mount and unmount the miniApp component. It's crucial to mount themeParams before miniApp for proper property initialization. The `isMounted` signal indicates the component's mounted state.

```APIDOC
## Mounting

To mount the component, use the `mount` method, it will update the `isMounted` signal. But to have proper properties' values, before mounting the `miniApp`, it is required to mount `themeParams`.

```ts
import { miniApp, themeParams } from '@tma.js/sdk';

themeParams.mount();
miniApp.mount();
miniApp.isMounted(); // true
```

To unmount the component, use the `unmount` method:

```ts
miniApp.unmount();
miniApp.isMounted(); // false
```
```

--------------------------------

### Get All Keys from Cloud Storage

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/cloud-storage

Retrieve a list of all keys currently stored in the cloud storage. This is an asynchronous operation.

```typescript
const keys = await cloudStorage.getKeys(); // ['a', 'b', 'c']
```

--------------------------------

### Create Mini App with npx

Source: https://docs.telegram-mini-apps.com/packages/tma-js-create-mini-app

Use this command to scaffold a new Telegram Mini App project using npx.

```bash
npx @tma.js/create-mini-app@latest
```

--------------------------------

### Get Current Time

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/uncategorized

Retrieves the current Telegram server time. Returns a JavaScript Date object. This function is asynchronous.

```typescript
import { getCurrentTime } from '@tma.js/sdk';

const time = await getCurrentTime(); // Date
```

--------------------------------

### Signal Mini App Ready

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/mini-app

Call the ready method to signal that the Mini App is ready to be displayed. This hides the loading placeholder and shows the app. Call this early for a better user experience.

```typescript
miniApp.ready();
```

--------------------------------

### Get Chat Type

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieve the type of chat from which the Mini App was opened. This is only returned for applications opened by direct link.

```typescript
initData.chatType(); // 'group'
```

--------------------------------

### Get Can Send After Date

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieve the time after which a message can be sent, formatted as a `Date` object. Returns a `Date` object or `undefined`.

```typescript
initData.canSendAfterDate(); // Date(1727368897600)
```

--------------------------------

### Mounting and Unmounting

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/main-button

Learn how to mount and unmount the Main Button component to enable or disable its functionality. Ensure Theme Params are mounted first.

```APIDOC
## Mounting
Before using this component, it is necessary to mount it to work with properly configured properties. To do so, use the `mount` method. It will update the `isMounted` signal.
```ts
import { mainButton } from '@tma.js/sdk';

mainButton.mount();
mainButton.isMounted(); // true
```

To unmount, use the `unmount` method:
```ts
mainButton.unmount();
mainButton.isMounted(); // false
```

WARNING
This component's properties depend on values from the Theme Params component. Make sure to mount Theme Params before using the Main Button.
```

--------------------------------

### Get All Theme Parameters

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/theme-params

Returns an object containing all current theme parameters, where keys are parameter names and values are their RGB representations.

```typescript
themeParams.state(); // Record<string, RGB>;
```

--------------------------------

### Mounting and Unmounting

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/theme-params

Demonstrates how to mount and unmount the theme parameters component. Mounting makes the component active and updates its `isMounted` status.

```APIDOC
## Mounting

Before using the component, it must be mounted.
To mount the component, use the `mount` method. It will update the `isMounted` signal.

```ts
import { themeParams } from '@tma.js/sdk';

themeParams.mount();
themeParams.isMounted(); // true
```

To unmount, use the `unmount` method:

```ts
themeParams.unmount();
themeParams.isMounted(); // false
```
```

--------------------------------

### Get Chat Instance

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieve a global identifier for the chat from which the Mini App was opened. This is only returned for applications opened by direct link.

```typescript
initData.chatInstance(); // 'group'
```

--------------------------------

### Mount Mini App and Theme Parameters

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/mini-app

Mount the Mini App component and its dependencies. Ensure themeParams are mounted before the miniApp for correct property values. The isMounted signal indicates the component's status.

```typescript
import { miniApp, themeParams } from '@tma.js/sdk';

themeParams.mount();
miniApp.mount();
miniApp.isMounted(); // true
```

--------------------------------

### Get Query ID

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieve the unique session ID of the Mini App, used for methods like `answerWebAppQuery`. Returns a string or `undefined`.

```typescript
initData.queryId(); // 'hSvhacj28716'
```

--------------------------------

### Get Auth Date

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieve the initialization data creation date using the `authDate` signal. Returns a `Date` object or `undefined` if not available.

```typescript
initData.authDate(); // Date(1727368894000)
```

--------------------------------

### hash()

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieves the initialization data signature.

```APIDOC
## hash()

### Description
Returns an initialization data signature.

### Return type
`string | undefined`

### Example
```ts
initData.hash(); // 'group'
```
```

--------------------------------

### Get Theme Parameter Properties

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/theme-params

Retrieves individual theme parameter values. These methods return the color in RGB format or undefined if the parameter is not set.

```typescript
themeParams.accentTextColor(); // RGB | undefined
themeParams.bgColor(); // RGB | undefined
themeParams.buttonTextColor(); // RGB | undefined
themeParams.buttonColor(); // RGB | undefined
themeParams.destructiveTextColor(); // RGB | undefined
themeParams.headerBgColor(); // RGB | undefined
themeParams.hintColor(); // RGB | undefined
themeParams.linkColor(); // RGB | undefined
themeParams.subtitleTextColor(); // RGB | undefined
themeParams.sectionBgColor(); // RGB | undefined
themeParams.secondaryBgColor(); // RGB | undefined
themeParams.sectionSeparatorColor(); // RGB | undefined
themeParams.sectionHeaderTextColor(); // RGB | undefined
themeParams.textColor(); // RGB | undefined
```

--------------------------------

### Prompt to Add Mini App to Home Screen

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/home-screen

Use this function to prompt the user to add the Mini App to their device's home screen. Ensure the SDK is initialized before calling.

```typescript
import { addToHomeScreen } from '@tma.js/sdk';

addToHomeScreen();
```

--------------------------------

### state()

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieves the initialization data in object format.

```APIDOC
## state()

### Description
Returns an object containing the initialization data in object format.

### Return type
`undefined` or `InitData`

### Example
```ts
initData.state();
```
```

--------------------------------

### Retrieve Raw Launch Parameters

Source: https://docs.telegram-mini-apps.com/packages/tma-js-bridge/launch-parameters

Retrieves launch parameters in their initial raw format, as query parameters.

```APIDOC
## retrieveRawLaunchParams

### Description
Retrieves launch parameters in their raw format, as they appear in the URL query string.

### Method
`retrieveRawLaunchParams()`

### Parameters
None

### Response Example
```
tgWebAppBotInline=0&tgWebAppData=%7B%22user%22%3A%7B%7D%2C%22auth_date%22%3A1787367222%2C%22query_id%22%3A%22abc%22%7D...&...
```
```

--------------------------------

### Get Android Device Data from Custom User Agent

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react

Parse Android device data from a custom user agent string using the `useAndroidDeviceDataFrom` hook.

```ts
import { useAndroidDeviceDataFrom } from '@tma.js/sdk-react';

function Component() {
  const deviceData = useAndroidDeviceDataFrom(navigator.userAgent);
  // Example complete output:
  // {
  //   manufacturer: 'Samsung',
  //   performanceClass: 'AVERAGE',
  //   model: 'SM-A155F',
  //   androidVersion: '14',
  //   sdkVersion: 34,
  // }
}

```

--------------------------------

### Get Android Device Data with useAndroidDeviceData

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react

Retrieve parsed Android device data from `navigator.userAgent` using the `useAndroidDeviceData` hook. All keys in the returned object are optional.

```ts
import { useAndroidDeviceData } from '@tma.js/sdk-react';

function Component() {
  const deviceData = useAndroidDeviceData();
  // Example complete output:
  // {
  //   manufacturer: 'Samsung',
  //   performanceClass: 'AVERAGE',
  //   model: 'SM-A155F',
  //   androidVersion: '14',
  //   sdkVersion: 34,
  // }
}

```

--------------------------------

### Create Mini App with pnpm

Source: https://docs.telegram-mini-apps.com/packages/tma-js-create-mini-app

Use this command to scaffold a new Telegram Mini App project using pnpm as the package manager.

```bash
pnpm dlx @tma.js/create-mini-app@latest
```

--------------------------------

### Requesting Current Location

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/location-manager

Use the `requestLocation` method to get the current device location. It returns a cancelable promise that resolves with an object containing location details.

```APIDOC
## Requesting Location

To request the current location, use the `requestLocation` method. It returns a cancelable promise with an object, describing the current device location.

ts
```javascript
const location = await locationManager.requestLocation();
```

The object contains the following numeric properties:

Property| Description  
---|---
`latitude`| Latitude in degrees.  
`longitude`| Longitude in degrees.  
`altitude`| _Optional_. Altitude above sea level in meters.  
`course`| _Optional_. The direction the device is moving in degrees.  
`speed`| _Optional_. The speed of the device in m/s.  
`horizontal_accuracy`| _Optional_. Accuracy of the latitude and longitude values in meters.  
`vertical_accuracy`| _Optional_. Accuracy of the altitude value in meters.  
`course_accuracy`| _Optional_. Accuracy of the course value in degrees.  
`speed_accuracy`| _Optional_. Accuracy of the speed value in m/s.  
```

--------------------------------

### Initialize Telegram Mini Apps SDK

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features

The SDK must be initialized before using any of its features. This ensures that you are using valid global dependencies.

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

init();
```

--------------------------------

### Get Chat Data

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieve an object containing data about the chat where the bot was launched via the attachment menu. This is returned for supergroups, channels, and group chats.

```typescript
initData.chat();
// {
//   id: 7728725378876215,
//   type: 'group',
//   title: '@BotFather',
//   photo_url: 'https://example.com/image.png',
//   username: 'botfather'
// }
```

--------------------------------

### Create Mini App with yarn

Source: https://docs.telegram-mini-apps.com/packages/tma-js-create-mini-app

Use this command to scaffold a new Telegram Mini App project using yarn as the package manager.

```bash
yarn create @tma.js/mini-app
```

--------------------------------

### startParam()

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieves the value of the `startattach` or `startapp` query parameter.

```APIDOC
## startParam()

### Description
Returns the value of the `startattach` or `startapp` query parameter specified in the link.

### Return type
`string | undefined`

### Example
```ts
initData.startParam(); // 'my-value'
```
```

--------------------------------

### Retrieve Launch Parameters

Source: https://docs.telegram-mini-apps.com/packages/tma-js-bridge/launch-parameters

Extracts launch parameters from the current environment. Throws an error if retrieval fails.

```APIDOC
## retrieveLaunchParams

### Description
Retrieves launch parameters from the current environment. This function attempts to get parameters from all possible sources and will throw an error if it fails.

### Method
`retrieveLaunchParams()`

### Parameters
None

### Response Example
```json
{
  "tgWebAppBotInline": false,
  "tgWebAppData": {
    "user": { ... },
    "auth_date": Date(...),
    "query_id": ...,
    "hash": ...
  },
  ...
}
```
```

--------------------------------

### Listen to an Event and Remove Listener

Source: https://docs.telegram-mini-apps.com/packages/tma-js-bridge/events

Use the `on` function to start listening to a specific event. The function returns another function that can be called to remove the event listener.

```typescript
import { on } from '@tma.js/bridge';

// Start listening to the "viewport_changed" event. The returned value
// is a function that removes this event listener.
const removeListener = on('viewport_changed', payload => {
  console.log('Viewport changed:', payload);
  // Remove this event listener.
  removeListener();
});
```

--------------------------------

### Get Receiver Data

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk/features/init-data

Retrieve an object with data about the chat partner in a private chat. This is only returned for private chats and Mini Apps launched via the attachment menu.

```typescript
initData.receiver();
// {
//   added_to_attachment_menu: false,
//   allows_write_to_pm: true,
//   is_premium: true,
//   first_name: 'Pavel',
//   id: 78262681,
//   is_bot: false,
//   last_name: 'Durov',
//   language_code: 'ru',
//   photo_url: 'https://example.com/image.png',
//   username: 'durove',
// }
```

--------------------------------

### Retrieve Launch Parameters - TypeScript

Source: https://docs.telegram-mini-apps.com/packages/tma-js-bridge/launch-parameters

Use this function to extract structured launch parameters from the current environment. It attempts to get them from all possible sources and throws an error if it fails.

```typescript
import { retrieveLaunchParams } from '@tma.js/bridge';

retrieveLaunchParams();
// {
//   tgWebAppBotInline: false,
//   tgWebAppData: {
//     user: { ... },
//     auth_date: Date(...),
//     query_id: ...,
//     hash: ...
//   },
//   ...
// };
```

--------------------------------

### Functional Approach: Retrieve Raw Launch Parameters

Source: https://docs.telegram-mini-apps.com/packages/tma-js-bridge/launch-parameters

Provides a functional programming alternative to retrieve raw launch parameters using fp-ts.

```APIDOC
## retrieveRawLaunchParamsFp

### Description
A functional programming alternative to `retrieveRawLaunchParams`, designed to be used with `fp-ts`.

### Method
`retrieveRawLaunchParamsFp()`

### Parameters
None

### Response Example
```
tgWebAppBotInline=0&tgWebAppData=%7B%22user%22%3A%7B%7D%2C%22auth_date%22%3A1787367222%2C%22query_id%22%3A%22abc%22%7D...&...
```
```

--------------------------------

### Invoke Custom Method Directly

Source: https://docs.telegram-mini-apps.com/packages/tma-js-bridge/advanced

Call custom methods using the `web_app_invoke_custom_method` with the `request` function. This example demonstrates how to capture a specific request ID for matching the response.

```typescript
const reqId = 'ABC';

request('web_app_invoke_custom_method', 'custom_method_invoked', {
  params: {
    req_id: reqId,
    method: 'deleteStorageValues',
    params: { keys: ['a'] },
  },
  capture(data) {
    return data.req_id === reqId;
  }
})
  .then(({ data, error }) => {
    if (error) {
      throw new Error(error);
    }
    return data;
  })
  .then(data => {
    console.log('We got some data', data);
  });
```

--------------------------------

### useRawInitData Hook

Source: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react

Uses the retrieveRawInitData function and allows retrieving the init data passed in its initial format.

```APIDOC
import { useRawInitData } from '@tma.js/sdk-react';

function Component() {
  console.log(useRawInitData());
  // Example output:
  // '{"user":...,"auth_date":...,"query_id":...,...}'
}
```
Tokens:
Raw