@tma.js -> @telegram-apps

README.md

@@ -6,7 +6,7 @@ Mini Apps platform using the following technologies and libraries:
 - [React](https://react.dev/)
 - [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
 - [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview)
-- [@tma.js SDK](https://docs.telegram-mini-apps.com/packages/tma-js-sdk)
+- [@telegram-apps SDK](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk)
 - [Telegram UI](https://github.com/Telegram-Mini-Apps/TelegramUI)
 - [Vite](https://vitejs.dev/)
 
@@ -71,7 +71,7 @@ link (`http://localhost:5173/reactjs-js-template` in this example) in your brows
 
 ![Application](assets/application.png)
 
-It is important to note that some libraries in this template, such as `@tma.js/sdk`, are not
+It is important to note that some libraries in this template, such as `@telegram-apps/sdk`, are not
 intended for use outside of Telegram.
 
 Nevertheless, they appear to function properly. This is because the `src/mockEnv.js` file, which is
@@ -243,5 +243,5 @@ project's information.
 ## Useful Links
 
 - [Platform documentation](https://docs.telegram-mini-apps.com/)
-- [@tma.js/sdk-react documentation](https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react)
+- [@telegram-apps/sdk-react documentation](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk-react)
 - [Telegram developers community chat](https://t.me/devs)

package.json

@@ -14,9 +14,9 @@
     "predeploy": "npm run build"
   },
   "dependencies": {
+    "@telegram-apps/react-router-integration": "^1.0.0",
+    "@telegram-apps/sdk-react": "^1.0.0",
     "@telegram-apps/telegram-ui": "^2.1.4",
-    "@tma.js/react-router-integration": "^4.0.3",
-    "@tma.js/sdk-react": "^2.2.5",
     "@tonconnect/ui-react": "^2.0.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",

src/components/App.jsx

@@ -1,4 +1,4 @@
-import { useIntegration } from '@tma.js/react-router-integration';
+import { useIntegration } from '@telegram-apps/react-router-integration';
 import {
   bindMiniAppCSSVars,
   bindThemeParamsCSSVars,
@@ -7,7 +7,7 @@ import {
   useMiniApp,
   useThemeParams,
   useViewport,
-} from '@tma.js/sdk-react';
+} from '@telegram-apps/sdk-react';
 import { AppRoot } from '@telegram-apps/telegram-ui';
 import { useEffect, useMemo } from 'react';
 import {

src/components/DisplayData/DisplayData.jsx

@@ -1,4 +1,4 @@
-import { isRGB } from '@tma.js/sdk-react';
+import { isRGB } from '@telegram-apps/sdk-react';
 import { Cell, Checkbox, Section } from '@telegram-apps/telegram-ui';
 
 import { RGB } from '@/components/RGB/RGB.jsx';
@@ -9,7 +9,7 @@ import './DisplayData.css';
 /**
  * @typedef {object} DisplayDataRow
  * @property {string} title
- * @property {string | boolean | import('react').ReactNode | import('@tma.js/sdk-react').RGB} [value]
+ * @property {string | boolean | import('react').ReactNode | import('@telegram-apps/sdk-react').RGB} [value]
  */
 
 /**

src/components/Link/Link.jsx

@@ -1,4 +1,4 @@
-import { classNames, useUtils } from '@tma.js/sdk-react';
+import { classNames, useUtils } from '@telegram-apps/sdk-react';
 import { useCallback } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 

src/components/RGB/RGB.jsx

@@ -1,9 +1,9 @@
-import { classNames } from '@tma.js/sdk-react';
+import { classNames } from '@telegram-apps/sdk-react';
 
 import './RGB.css';
 
 /**
- * @param {import('@tma.js/sdk-react').RGB} color
+ * @param {import('@telegram-apps/sdk-react').RGB} color
  * @param {string} [className]
  * @param rest
  * @return {JSX.Element}

src/components/Root.jsx

@@ -1,4 +1,4 @@
-import { SDKProvider, useLaunchParams } from '@tma.js/sdk-react';
+import { SDKProvider, useLaunchParams } from '@telegram-apps/sdk-react';
 import { TonConnectUIProvider } from '@tonconnect/ui-react';
 import { useEffect, useMemo } from 'react';
 

src/mockEnv.js

@@ -1,4 +1,4 @@
-import { mockTelegramEnv, parseInitData, retrieveLaunchParams } from '@tma.js/sdk-react';
+import { mockTelegramEnv, parseInitData, retrieveLaunchParams } from '@telegram-apps/sdk-react';
 
 // It is important, to mock the environment only for development purposes. When building the
 // application, import.meta.env.DEV will become false, and the code inside will be tree-shaken,

src/pages/InitDataPage/InitDataPage.jsx

@@ -1,13 +1,13 @@
 import { useMemo } from 'react';
-import { useInitData, useLaunchParams } from '@tma.js/sdk-react';
+import { useInitData, useLaunchParams } from '@telegram-apps/sdk-react';
 import { List, Placeholder } from '@telegram-apps/telegram-ui';
 
 import { DisplayData } from '@/components/DisplayData/DisplayData.jsx';
 
 import './InitDataPage.css';
 
 /**
- * @param {import('@tma.js/sdk-react').User} user
+ * @param {import('@telegram-apps/sdk-react').User} user
  * @returns {DisplayDataRow[]}
  */
 function getUserRows(user) {

src/pages/LaunchParamsPage/LaunchParamsPage.jsx

@@ -1,4 +1,4 @@
-import { useLaunchParams } from '@tma.js/sdk-react';
+import { useLaunchParams } from '@telegram-apps/sdk-react';
 import { List } from '@telegram-apps/telegram-ui';
 
 import { DisplayData } from '@/components/DisplayData/DisplayData.jsx';

src/pages/TONConnectPage/TONConnectPage.jsx

@@ -1,4 +1,4 @@
-import { useUtils } from '@tma.js/sdk-react';
+import { useUtils } from '@telegram-apps/sdk-react';
 import { TonConnectButton, useTonWallet } from '@tonconnect/ui-react';
 import {
   Avatar,

src/pages/ThemeParamsPage/ThemeParamsPage.jsx

@@ -1,4 +1,4 @@
-import { useThemeParams } from '@tma.js/sdk-react';
+import { useThemeParams } from '@telegram-apps/sdk-react';
 import { List } from '@telegram-apps/telegram-ui';
 
 import { DisplayData } from '@/components/DisplayData/DisplayData.jsx';