From b35359b3948618960c2d4d62af492209d5978ea1 Mon Sep 17 00:00:00 2001 From: qbnk Date: Sat, 12 Oct 2024 11:58:42 +0600 Subject: [PATCH] Actualize the template --- README.md | 2 +- package-lock.json | 437 ++++++++++++++++-- package.json | 5 +- src/components/App.tsx | 58 +-- src/components/Link/Link.tsx | 12 +- src/components/Page.tsx | 24 + src/components/Root.tsx | 65 +-- src/helpers/publicUrl.ts | 11 + src/index.tsx | 19 +- src/init.ts | 40 ++ src/mockEnv.ts | 124 ++--- src/navigation/routes.tsx | 6 +- src/pages/IndexPage/IndexPage.tsx | 61 +-- src/pages/{InitDataPage => }/InitDataPage.tsx | 78 ++-- src/pages/LaunchParamsPage.tsx | 28 ++ .../LaunchParamsPage/LaunchParamsPage.tsx | 25 - src/pages/TONConnectPage/TONConnectPage.tsx | 125 ++--- src/pages/ThemeParamsPage.tsx | 29 ++ src/pages/ThemeParamsPage/ThemeParamsPage.tsx | 26 -- vite.config.ts | 8 +- 20 files changed, 792 insertions(+), 391 deletions(-) create mode 100644 src/components/Page.tsx create mode 100644 src/helpers/publicUrl.ts create mode 100644 src/init.ts rename src/pages/{InitDataPage => }/InitDataPage.tsx (58%) create mode 100644 src/pages/LaunchParamsPage.tsx delete mode 100644 src/pages/LaunchParamsPage/LaunchParamsPage.tsx create mode 100644 src/pages/ThemeParamsPage.tsx delete mode 100644 src/pages/ThemeParamsPage/ThemeParamsPage.tsx diff --git a/README.md b/README.md index 224b107..da18db3 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Mini Apps platform using the following technologies and libraries: - [React](https://react.dev/) - [TypeScript](https://www.typescriptlang.org/) - [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview) -- [@telegram-apps SDK](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk) +- [@telegram-apps SDK](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk/2-x) - [Telegram UI](https://github.com/Telegram-Mini-Apps/TelegramUI) - [Vite](https://vitejs.dev/) diff --git a/package-lock.json b/package-lock.json index 6d2dc57..300a989 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,7 @@ "name": "reactjs-template", "version": "0.0.1", "dependencies": { - "@telegram-apps/react-router-integration": "^1.0.0", - "@telegram-apps/sdk-react": "^1.0.0", + "@telegram-apps/sdk-react": "^2.0.5", "@telegram-apps/telegram-ui": "^2.1.5", "@tonconnect/ui-react": "^2.0.5", "eruda": "^3.0.1", @@ -24,7 +23,6 @@ "@types/react-dom": "^18.2.0", "@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/parser": "^7.8.0", - "@vitejs/plugin-basic-ssl": "^1.1.0", "@vitejs/plugin-react-swc": "^3.6.0", "eslint": "^8.57.0", "eslint-plugin-react": "^7.34.1", @@ -33,6 +31,7 @@ "typescript": "^5.4.5", "typescript-eslint": "^7.8.0", "vite": "^5.2.11", + "vite-plugin-mkcert": "^1.17.6", "vite-tsconfig-paths": "^4.3.2" } }, @@ -632,6 +631,173 @@ "node": ">= 8" } }, + "node_modules/@octokit/auth-token": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-4.0.0.tgz", + "integrity": "sha512-tY/msAuJo6ARbK6SPIxZrPBms3xPbfwBrulZe0Wtr/DIY9lje2HeV1uoebShn6mx7SjCHif6EjMvoREj+gZ+SA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 18" + } + }, + "node_modules/@octokit/core": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.0.tgz", + "integrity": "sha512-1LFfa/qnMQvEOAdzlQymH0ulepxbxnCYAKJZfMci/5XJyIHWgEYnDmgnKakbTh7CH2tFQ5O60oYDvns4i9RAIg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@octokit/auth-token": "^4.0.0", + "@octokit/graphql": "^7.1.0", + "@octokit/request": "^8.3.1", + "@octokit/request-error": "^5.1.0", + "@octokit/types": "^13.0.0", + "before-after-hook": "^2.2.0", + "universal-user-agent": "^6.0.0" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/@octokit/endpoint": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-9.0.5.tgz", + "integrity": "sha512-ekqR4/+PCLkEBF6qgj8WqJfvDq65RH85OAgrtnVp1mSxaXF03u2xW/hUdweGS5654IlC0wkNYC18Z50tSYTAFw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@octokit/types": "^13.1.0", + "universal-user-agent": "^6.0.0" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/@octokit/graphql": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-7.1.0.tgz", + "integrity": "sha512-r+oZUH7aMFui1ypZnAvZmn0KSqAUgE1/tUXIWaqUCa1758ts/Jio84GZuzsvUkme98kv0WFY8//n0J1Z+vsIsQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@octokit/request": "^8.3.0", + "@octokit/types": "^13.0.0", + "universal-user-agent": "^6.0.0" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/@octokit/openapi-types": { + "version": "22.2.0", + "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-22.2.0.tgz", + "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@octokit/plugin-paginate-rest": { + "version": "11.3.1", + "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-11.3.1.tgz", + "integrity": "sha512-ryqobs26cLtM1kQxqeZui4v8FeznirUsksiA+RYemMPJ7Micju0WSkv50dBksTuZks9O5cg4wp+t8fZ/cLY56g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@octokit/types": "^13.5.0" + }, + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "@octokit/core": "5" + } + }, + "node_modules/@octokit/plugin-request-log": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-4.0.1.tgz", + "integrity": "sha512-GihNqNpGHorUrO7Qa9JbAl0dbLnqJVrV8OXe2Zm5/Y4wFkZQDfTreBzVmiRfJVfE4mClXdihHnbpyyO9FSX4HA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "@octokit/core": "5" + } + }, + "node_modules/@octokit/plugin-rest-endpoint-methods": { + "version": "13.2.2", + "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-13.2.2.tgz", + "integrity": "sha512-EI7kXWidkt3Xlok5uN43suK99VWqc8OaIMktY9d9+RNKl69juoTyxmLoWPIZgJYzi41qj/9zU7G/ljnNOJ5AFA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@octokit/types": "^13.5.0" + }, + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "@octokit/core": "^5" + } + }, + "node_modules/@octokit/request": { + "version": "8.4.0", + "resolved": "https://registry.npmjs.org/@octokit/request/-/request-8.4.0.tgz", + "integrity": "sha512-9Bb014e+m2TgBeEJGEbdplMVWwPmL1FPtggHQRkV+WVsMggPtEkLKPlcVYm/o8xKLkpJ7B+6N8WfQMtDLX2Dpw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@octokit/endpoint": "^9.0.1", + "@octokit/request-error": "^5.1.0", + "@octokit/types": "^13.1.0", + "universal-user-agent": "^6.0.0" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/@octokit/request-error": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-5.1.0.tgz", + "integrity": "sha512-GETXfE05J0+7H2STzekpKObFe765O5dlAKUTLNGeH+x47z7JjXHfsHKo5z21D/o/IOZTUEI6nyWyR+bZVP/n5Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@octokit/types": "^13.1.0", + "deprecation": "^2.0.0", + "once": "^1.4.0" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/@octokit/rest": { + "version": "20.1.1", + "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-20.1.1.tgz", + "integrity": "sha512-MB4AYDsM5jhIHro/dq4ix1iWTLGToIGk6cWF5L6vanFaMble5jTX/UBQyiv05HsWnwUtY8JrfHy2LWfKwihqMw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@octokit/core": "^5.0.2", + "@octokit/plugin-paginate-rest": "11.3.1", + "@octokit/plugin-request-log": "^4.0.0", + "@octokit/plugin-rest-endpoint-methods": "13.2.2" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/@octokit/types": { + "version": "13.6.1", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-13.6.1.tgz", + "integrity": "sha512-PHZE9Z+kWXb23Ndik8MKPirBPziOc0D2/3KH1P+6jK5nGWe96kadZuE4jev2/Jq7FvIfTlT2Ltg8Fv2x1v0a5g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@octokit/openapi-types": "^22.2.0" + } + }, "node_modules/@radix-ui/primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", @@ -1392,33 +1558,36 @@ "@swc/counter": "^0.1.3" } }, - "node_modules/@telegram-apps/react-router-integration": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@telegram-apps/react-router-integration/-/react-router-integration-1.0.0.tgz", - "integrity": "sha512-4629YophzOhN6NngFYQvxVX5AlEX29bJPFMUB4pnTN0RwRahtAexLkFfbjPWtV5UAjwpeBmV8eUUrqCiwLSACw==", - "peerDependencies": { - "@telegram-apps/sdk": "^1.0.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-router-dom": "^6.22.3" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } + "node_modules/@telegram-apps/bridge": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@telegram-apps/bridge/-/bridge-1.2.1.tgz", + "integrity": "sha512-nNri01sAIDqDPPV1dBwB5/U0dWhm5URInY8jcY39BuRqbC4mjwf7xJmRwO67MYxncwSqacBW43ILIrpv8PQyrQ==", + "license": "MIT", + "dependencies": { + "@telegram-apps/signals": "^1.0.1", + "@telegram-apps/toolkit": "^1.0.0", + "@telegram-apps/transformers": "^1.0.1", + "@telegram-apps/types": "^1.0.1" } }, - "node_modules/@telegram-apps/sdk": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@telegram-apps/sdk/-/sdk-1.0.0.tgz", - "integrity": "sha512-lnmYrmti4hF1AuVVflkgHpVSsnwhPnukuc2sM5AZ4eKVM6ZMzPpeZtHyEdft5GqxgmePhN8+sTJuQRbvqCJvjQ==" + "node_modules/@telegram-apps/navigation": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@telegram-apps/navigation/-/navigation-1.0.3.tgz", + "integrity": "sha512-v1BPs0GrV7GhbTYWbFw7tUJj0dLR8+LdEBSzQmpEF1KK+6gmPrgGxQ0U9FzZ/jOiJlzcGNz/pLF8PEpoVzrQnA==", + "license": "MIT", + "dependencies": { + "@telegram-apps/bridge": "^1.2.1", + "@telegram-apps/signals": "^1.0.1", + "@telegram-apps/toolkit": "^1.0.0" + } }, "node_modules/@telegram-apps/sdk-react": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@telegram-apps/sdk-react/-/sdk-react-1.0.0.tgz", - "integrity": "sha512-3+/ck6c9PXmPsJ3jfjFuTlRET1h/k9QuOiuNX3OYwkzmjGJbHARvcd/hJOSoeRInbYUU/UwFWMwOt+p0UH+TQw==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@telegram-apps/sdk-react/-/sdk-react-2.0.5.tgz", + "integrity": "sha512-KL8wvoMZeXIKgttD3d8p6th26789gvxipv6MMGZ2m/sZ2uhHgbTiHhIGjc+n5u0WuhLa7xdeyd0+D/k4SBLK1A==", + "license": "MIT", "dependencies": { - "@telegram-apps/sdk": "^1.0.0" + "@telegram-apps/sdk": "^2.4.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", @@ -1430,6 +1599,24 @@ } } }, + "node_modules/@telegram-apps/sdk-react/node_modules/@telegram-apps/sdk": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@telegram-apps/sdk/-/sdk-2.4.0.tgz", + "integrity": "sha512-TqGheu3jVZj3Dv0wrZ81J+ojLWuOrnpHXecl8c8StrpjdCReV4WUtd00Mfu4IWakOyR1qE5Ohgv7cQvrkAisyA==", + "license": "MIT", + "dependencies": { + "@telegram-apps/bridge": "^1.2.1", + "@telegram-apps/navigation": "^1.0.3", + "@telegram-apps/signals": "^1.0.1", + "@telegram-apps/transformers": "^1.0.1" + } + }, + "node_modules/@telegram-apps/signals": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@telegram-apps/signals/-/signals-1.0.1.tgz", + "integrity": "sha512-+DAltcPtLBeNPjX+BxEh9smh0cbxCXuEcsOEyDCovp6HJHusWFv1tDyJuV0/rXFmcDs+VwU7SjmINdjld2nFHw==", + "license": "MIT" + }, "node_modules/@telegram-apps/telegram-ui": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@telegram-apps/telegram-ui/-/telegram-ui-2.1.5.tgz", @@ -1449,6 +1636,28 @@ "react-dom": "^18.2.0" } }, + "node_modules/@telegram-apps/toolkit": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@telegram-apps/toolkit/-/toolkit-1.0.0.tgz", + "integrity": "sha512-fSVoveLuMzwRKWeXEufMSXxH+HvjsFKb1DeT3pG5qLpnb2rdtejnNcwAt6WEPtiZ3a4YntYaFuR3KYgVv0ZxeQ==", + "license": "MIT" + }, + "node_modules/@telegram-apps/transformers": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@telegram-apps/transformers/-/transformers-1.0.1.tgz", + "integrity": "sha512-SsI+FhCOkkZFUPqr+ib11Fi25fRCpdMsI2Flp51NrdtKaPDnKFkBBG4GcSEaGL8sXquW9uAANjc499jSaZK5jQ==", + "license": "MIT", + "dependencies": { + "@telegram-apps/toolkit": "^1.0.0", + "@telegram-apps/types": "^1.0.1" + } + }, + "node_modules/@telegram-apps/types": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@telegram-apps/types/-/types-1.0.1.tgz", + "integrity": "sha512-8tGy1zG/1MEt0KF8nR0ffZ93whKveEJIkBI+qxHCRgatKwKVJV2dVSXrrBspFKn7FIIo1/CvmB8zP4vKPzglbg==", + "license": "MIT" + }, "node_modules/@tonconnect/isomorphic-eventsource": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/@tonconnect/isomorphic-eventsource/-/isomorphic-eventsource-0.0.2.tgz", @@ -1743,18 +1952,6 @@ "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", "dev": true }, - "node_modules/@vitejs/plugin-basic-ssl": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.1.0.tgz", - "integrity": "sha512-wO4Dk/rm8u7RNhOf95ZzcEmC9rYOncYgvq4z3duaJrCgjN8BxAnDVyndanfcJZ0O6XZzHz6Q0hTimxTg8Y9g/A==", - "dev": true, - "engines": { - "node": ">=14.6.0" - }, - "peerDependencies": { - "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" - } - }, "node_modules/@vitejs/plugin-react-swc": { "version": "3.7.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.0.tgz", @@ -2020,6 +2217,13 @@ "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==", "dev": true }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "dev": true, + "license": "MIT" + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -2035,12 +2239,31 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", + "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/before-after-hook": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz", + "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==", + "dev": true, + "license": "Apache-2.0" + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -2129,6 +2352,19 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dev": true, + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/commander": { "version": "11.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz", @@ -2222,12 +2458,13 @@ } }, "node_modules/debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", "dev": true, + "license": "MIT", "dependencies": { - "ms": "2.1.2" + "ms": "^2.1.3" }, "engines": { "node": ">=6.0" @@ -2286,6 +2523,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/deprecation": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz", + "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==", + "dev": true, + "license": "ISC" + }, "node_modules/detect-node-es": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", @@ -2963,6 +3217,27 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -2972,6 +3247,21 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz", + "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==", + "dev": true, + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fs-extra": { "version": "11.2.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz", @@ -3956,6 +4246,29 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dev": true, + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "9.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", @@ -3972,10 +4285,11 @@ } }, "node_modules/ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" }, "node_modules/nanoid": { "version": "3.3.7", @@ -4419,6 +4733,13 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "dev": true, + "license": "MIT" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -5286,6 +5607,13 @@ "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", "dev": true }, + "node_modules/universal-user-agent": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.1.tgz", + "integrity": "sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==", + "dev": true, + "license": "ISC" + }, "node_modules/universalify": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", @@ -5400,6 +5728,25 @@ } } }, + "node_modules/vite-plugin-mkcert": { + "version": "1.17.6", + "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.17.6.tgz", + "integrity": "sha512-4JR1RN0HEg/w17eRQJ/Ve2pSa6KCVQcQO6yKtIaKQCFDyd63zGfXHWpygBkvvRSpqa0GcqNKf0fjUJ0HiJQXVQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@octokit/rest": "^20.1.1", + "axios": "^1.7.4", + "debug": "^4.3.6", + "picocolors": "^1.0.1" + }, + "engines": { + "node": ">=v16.7.0" + }, + "peerDependencies": { + "vite": ">=3" + } + }, "node_modules/vite-tsconfig-paths": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz", diff --git a/package.json b/package.json index 4ef9a5f..f256e46 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,7 @@ "predeploy": "npm run build" }, "dependencies": { - "@telegram-apps/react-router-integration": "^1.0.0", - "@telegram-apps/sdk-react": "^1.0.0", + "@telegram-apps/sdk-react": "^2.0.5", "@telegram-apps/telegram-ui": "^2.1.5", "@tonconnect/ui-react": "^2.0.5", "eruda": "^3.0.1", @@ -30,7 +29,6 @@ "@types/react-dom": "^18.2.0", "@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/parser": "^7.8.0", - "@vitejs/plugin-basic-ssl": "^1.1.0", "@vitejs/plugin-react-swc": "^3.6.0", "eslint": "^8.57.0", "eslint-plugin-react": "^7.34.1", @@ -39,6 +37,7 @@ "typescript": "^5.4.5", "typescript-eslint": "^7.8.0", "vite": "^5.2.11", + "vite-plugin-mkcert": "^1.17.6", "vite-tsconfig-paths": "^4.3.2" } } diff --git a/src/components/App.tsx b/src/components/App.tsx index 4f1b0bd..75ec265 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,65 +1,23 @@ -import { useIntegration } from '@telegram-apps/react-router-integration'; -import { - bindMiniAppCSSVars, - bindThemeParamsCSSVars, - bindViewportCSSVars, - initNavigator, useLaunchParams, - useMiniApp, - useThemeParams, - useViewport, -} from '@telegram-apps/sdk-react'; +import { useLaunchParams, miniApp } from '@telegram-apps/sdk-react'; import { AppRoot } from '@telegram-apps/telegram-ui'; -import { type FC, useEffect, useMemo } from 'react'; -import { - Navigate, - Route, - Router, - Routes, -} from 'react-router-dom'; +import { Navigate, Route, Routes, HashRouter } from 'react-router-dom'; import { routes } from '@/navigation/routes.tsx'; -export const App: FC = () => { +export function App() { const lp = useLaunchParams(); - const miniApp = useMiniApp(); - const themeParams = useThemeParams(); - const viewport = useViewport(); - - useEffect(() => { - return bindMiniAppCSSVars(miniApp, themeParams); - }, [miniApp, themeParams]); - - useEffect(() => { - return bindThemeParamsCSSVars(themeParams); - }, [themeParams]); - - useEffect(() => { - return viewport && bindViewportCSSVars(viewport); - }, [viewport]); - - // Create a new application navigator and attach it to the browser history, so it could modify - // it and listen to its changes. - const navigator = useMemo(() => initNavigator('app-navigation-state'), []); - const [location, reactNavigator] = useIntegration(navigator); - - // Don't forget to attach the navigator to allow it to control the BackButton state as well - // as browser history. - useEffect(() => { - navigator.attach(); - return () => navigator.detach(); - }, [navigator]); return ( - + {routes.map((route) => )} - }/> + }/> - + ); -}; +} diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index ef78a0b..e40a5d3 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -1,4 +1,4 @@ -import { classNames, useUtils } from '@telegram-apps/sdk-react'; +import { classNames, openLink } from '@telegram-apps/sdk-react'; import { type FC, type MouseEventHandler, useCallback } from 'react'; import { Link as RouterLink, type LinkProps } from 'react-router-dom'; @@ -10,13 +10,11 @@ export const Link: FC = ({ to, ...rest }) => { - const utils = useUtils(); - const onClick = useCallback>((e) => { propsOnClick?.(e); - // Compute if target path is external. In this case we would like to open link using - // TMA method. + // Compute if target path is external. In this case we would like to open + // link using TMA method. let path: string; if (typeof to === 'string') { path = to; @@ -32,9 +30,9 @@ export const Link: FC = ({ if (isExternal) { e.preventDefault(); - utils.openLink(targetUrl.toString()); + openLink(targetUrl.toString()); } - }, [to, propsOnClick, utils]); + }, [to, propsOnClick]); return ( ) { + const navigate = useNavigate(); + + useEffect(() => { + if (back) { + backButton.show(); + return backButton.onClick(() => { + navigate(-1); + }); + } + backButton.hide(); + }, [back]); + + return <>{children}; +} \ No newline at end of file diff --git a/src/components/Root.tsx b/src/components/Root.tsx index ab415af..c1af6ff 100644 --- a/src/components/Root.tsx +++ b/src/components/Root.tsx @@ -1,49 +1,34 @@ -import { SDKProvider, useLaunchParams } from '@telegram-apps/sdk-react'; import { TonConnectUIProvider } from '@tonconnect/ui-react'; -import { type FC, useEffect, useMemo } from 'react'; import { App } from '@/components/App.tsx'; import { ErrorBoundary } from '@/components/ErrorBoundary.tsx'; +import { publicUrl } from '@/helpers/publicUrl.ts'; -const ErrorBoundaryError: FC<{ error: unknown }> = ({ error }) => ( -
-

An unhandled error occurred:

-
- - {error instanceof Error - ? error.message - : typeof error === 'string' - ? error - : JSON.stringify(error)} - -
-
-); - -const Inner: FC = () => { - const debug = useLaunchParams().startParam === 'debug'; - const manifestUrl = useMemo(() => { - return new URL('tonconnect-manifest.json', window.location.href).toString(); - }, []); - - // Enable debug mode to see all the methods sent and events received. - useEffect(() => { - if (debug) { - import('eruda').then((lib) => lib.default.init()); - } - }, [debug]); +function ErrorBoundaryError({ error }: { error: unknown }) { + return ( +
+

An unhandled error occurred:

+
+ + {error instanceof Error + ? error.message + : typeof error === 'string' + ? error + : JSON.stringify(error)} + +
+
+ ); +} +export function Root() { return ( - - + + - - + + ); -}; - -export const Root: FC = () => ( - - - -); +} diff --git a/src/helpers/publicUrl.ts b/src/helpers/publicUrl.ts new file mode 100644 index 0000000..05a6d9c --- /dev/null +++ b/src/helpers/publicUrl.ts @@ -0,0 +1,11 @@ +/** + * @returns A complete public URL prefixed with the public static assets base + * path. + * @param path - path to prepend prefix to + */ +export function publicUrl(path: string): string { + return new URL( + path.replace(/^\/+/, ''), + window.location.origin + import.meta.env.BASE_URL + ).toString(); +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index f2fff80..879a17b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,12 +1,21 @@ import ReactDOM from 'react-dom/client'; +import { StrictMode } from 'react'; +import { retrieveLaunchParams } from '@telegram-apps/sdk-react'; import { Root } from '@/components/Root'; - -// Uncomment this import in case, you would like to develop the application even outside -// the Telegram application, just in your browser. -import './mockEnv.ts'; +import { init } from '@/init.ts'; import '@telegram-apps/telegram-ui/dist/styles.css'; import './index.css'; -ReactDOM.createRoot(document.getElementById('root')!).render(); +// Mock the environment in case, we are outside Telegram. +import './mockEnv.ts'; + +// Configure all application dependencies. +init(retrieveLaunchParams().startParam === 'debug' || import.meta.env.DEV); + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/src/init.ts b/src/init.ts new file mode 100644 index 0000000..51f2977 --- /dev/null +++ b/src/init.ts @@ -0,0 +1,40 @@ +import { + backButton, + viewport, + themeParams, + miniApp, + initData, + $debug, + init as initSDK, +} from '@telegram-apps/sdk-react'; + +/** + * Initializes the application and configures its dependencies. + */ +export function init(debug: boolean): void { + // Set @telegram-apps/sdk-react debug mode. + $debug.set(debug); + + // Initialize special event handlers for Telegram Desktop, Android, iOS, etc. + // Also, configure the package. + initSDK(); + + // Mount all components used in the project. + backButton.isSupported() && backButton.mount(); + miniApp.mount(); + themeParams.mount(); + initData.restore(); + void viewport.mount().catch(e => { + console.error('Something went wrong mounting the viewport', e); + }); + + // 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); +} \ No newline at end of file diff --git a/src/mockEnv.ts b/src/mockEnv.ts index 38ca801..1407029 100644 --- a/src/mockEnv.ts +++ b/src/mockEnv.ts @@ -1,68 +1,70 @@ -import { mockTelegramEnv, parseInitData, retrieveLaunchParams } from '@telegram-apps/sdk-react'; +import { + mockTelegramEnv, + isTMA, + parseInitData, + LaunchParams, 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, -// so you will not see it in your final bundle. +// It is important, to mock the environment only for development purposes. +// When building the application the import.meta.env.DEV will value become +// `false` and the code inside will be tree-shaken (removed), so you will not +// see it in your final bundle. if (import.meta.env.DEV) { - let shouldMock: boolean; + await (async () => { + if (await isTMA()) { + return; + } - // Try to extract launch parameters to check if the current environment is Telegram-based. - try { - // If we are able to extract launch parameters, it means that we are already in the - // Telegram environment. So, there is no need to mock it. - retrieveLaunchParams(); + // Determine which launch params should be applied. We could already + // apply them previously, or they may be specified on purpose using the + // default launch parameters transmission method. + let lp: LaunchParams | undefined; + try { + lp = retrieveLaunchParams(); + } catch (e) { + const initDataRaw = new URLSearchParams([ + ['user', JSON.stringify({ + id: 99281932, + first_name: 'Andrew', + last_name: 'Rogue', + username: 'rogue', + language_code: 'en', + is_premium: true, + allows_write_to_pm: true, + })], + ['hash', '89d6079ad6762351f38c6dbbc41bb53048019256a9443988af7a48bcad16ba31'], + ['auth_date', '1716922846'], + ['start_param', 'debug'], + ['chat_type', 'sender'], + ['chat_instance', '8428209589180549439'], + ]).toString(); - // We could previously mock the environment. In case we did, we should do it again. The reason - // is the page could be reloaded, and we should apply mock again, because mocking also - // enables modifying the window object. - shouldMock = !!sessionStorage.getItem('____mocked'); - } catch (e) { - shouldMock = true; - } + lp = { + themeParams: { + accentTextColor: '#6ab2f2', + bgColor: '#17212b', + buttonColor: '#5288c1', + buttonTextColor: '#ffffff', + destructiveTextColor: '#ec3942', + headerBgColor: '#17212b', + hintColor: '#708499', + linkColor: '#6ab3f3', + secondaryBgColor: '#232e3c', + sectionBgColor: '#17212b', + sectionHeaderTextColor: '#6ab3f3', + subtitleTextColor: '#708499', + textColor: '#f5f5f5', + }, + initData: parseInitData(initDataRaw), + initDataRaw, + version: '8', + platform: 'tdesktop', + } + } - if (shouldMock) { - const initDataRaw = new URLSearchParams([ - ['user', JSON.stringify({ - id: 99281932, - first_name: 'Andrew', - last_name: 'Rogue', - username: 'rogue', - language_code: 'en', - is_premium: true, - allows_write_to_pm: true, - })], - ['hash', '89d6079ad6762351f38c6dbbc41bb53048019256a9443988af7a48bcad16ba31'], - ['auth_date', '1716922846'], - ['start_param', 'debug'], - ['chat_type', 'sender'], - ['chat_instance', '8428209589180549439'], - ]).toString(); - - mockTelegramEnv({ - themeParams: { - accentTextColor: '#6ab2f2', - bgColor: '#17212b', - buttonColor: '#5288c1', - buttonTextColor: '#ffffff', - destructiveTextColor: '#ec3942', - headerBgColor: '#17212b', - hintColor: '#708499', - linkColor: '#6ab3f3', - secondaryBgColor: '#232e3c', - sectionBgColor: '#17212b', - sectionHeaderTextColor: '#6ab3f3', - subtitleTextColor: '#708499', - textColor: '#f5f5f5', - }, - initData: parseInitData(initDataRaw), - initDataRaw, - version: '7.2', - platform: 'tdesktop', - }); - sessionStorage.setItem('____mocked', '1'); - - console.info( - 'As long as the current environment was not considered as the Telegram-based one, it was mocked. Take a note, that you should not do it in production and current behavior is only specific to the development process. Environment mocking is also applied only in development mode. So, after building the application, you will not see this behavior and related warning, leading to crashing the application outside Telegram.', + mockTelegramEnv(lp); + console.warn( + '⚠️ As long as the current environment was not considered as the Telegram-based one, it was mocked. Take a note, that you should not do it in production and current behavior is only specific to the development process. Environment mocking is also applied only in development mode. So, after building the application, you will not see this behavior and related warning, leading to crashing the application outside Telegram.', ); - } + })(); } \ No newline at end of file diff --git a/src/navigation/routes.tsx b/src/navigation/routes.tsx index 5301c62..b840bac 100644 --- a/src/navigation/routes.tsx +++ b/src/navigation/routes.tsx @@ -1,9 +1,9 @@ import type { ComponentType, JSX } from 'react'; import { IndexPage } from '@/pages/IndexPage/IndexPage'; -import { InitDataPage } from '@/pages/InitDataPage/InitDataPage'; -import { LaunchParamsPage } from '@/pages/LaunchParamsPage/LaunchParamsPage.tsx'; -import { ThemeParamsPage } from '@/pages/ThemeParamsPage/ThemeParamsPage.tsx'; +import { InitDataPage } from '@/pages/InitDataPage.tsx'; +import { LaunchParamsPage } from '@/pages/LaunchParamsPage.tsx'; +import { ThemeParamsPage } from '@/pages/ThemeParamsPage.tsx'; import { TONConnectPage } from '@/pages/TONConnectPage/TONConnectPage'; interface Route { diff --git a/src/pages/IndexPage/IndexPage.tsx b/src/pages/IndexPage/IndexPage.tsx index 70105c1..d927416 100644 --- a/src/pages/IndexPage/IndexPage.tsx +++ b/src/pages/IndexPage/IndexPage.tsx @@ -2,39 +2,42 @@ import { Section, Cell, Image, List } from '@telegram-apps/telegram-ui'; import type { FC } from 'react'; import { Link } from '@/components/Link/Link.tsx'; +import { Page } from '@/components/Page.tsx'; import tonSvg from './ton.svg'; export const IndexPage: FC = () => { return ( - -
- - } - subtitle='Connect your TON wallet' - > - TON Connect - - -
-
- - Init Data - - - Launch Parameters - - - Theme Parameters - -
- + + +
+ + } + subtitle="Connect your TON wallet" + > + TON Connect + + +
+
+ + Init Data + + + Launch Parameters + + + Theme Parameters + +
+ + ); }; diff --git a/src/pages/InitDataPage/InitDataPage.tsx b/src/pages/InitDataPage.tsx similarity index 58% rename from src/pages/InitDataPage/InitDataPage.tsx rename to src/pages/InitDataPage.tsx index 56cdf19..22234e4 100644 --- a/src/pages/InitDataPage/InitDataPage.tsx +++ b/src/pages/InitDataPage.tsx @@ -1,8 +1,9 @@ import { type FC, useMemo } from 'react'; -import { useInitData, useLaunchParams, type User } from '@telegram-apps/sdk-react'; +import { initData, type User, useSignal } from '@telegram-apps/sdk-react'; import { List, Placeholder } from '@telegram-apps/telegram-ui'; import { DisplayData, type DisplayDataRow } from '@/components/DisplayData/DisplayData.tsx'; +import { Page } from '@/components/Page.tsx'; function getUserRows(user: User): DisplayDataRow[] { return [ @@ -20,50 +21,59 @@ function getUserRows(user: User): DisplayDataRow[] { } export const InitDataPage: FC = () => { - const initDataRaw = useLaunchParams().initDataRaw; - const initData = useInitData(); + const initDataRaw = useSignal(initData.raw); + const initDataState = useSignal(initData.state); const initDataRows = useMemo(() => { - if (!initData || !initDataRaw) { + if (!initDataState || !initDataRaw) { return; } const { + authDate, hash, queryId, chatType, chatInstance, - authDate, - startParam, canSendAfter, - canSendAfterDate, - } = initData; + startParam, + } = initDataState; return [ { title: 'raw', value: initDataRaw }, { title: 'auth_date', value: authDate.toLocaleString() }, { title: 'auth_date (raw)', value: authDate.getTime() / 1000 }, { title: 'hash', value: hash }, - { title: 'can_send_after', value: canSendAfterDate?.toISOString() }, + { title: 'can_send_after', value: initData.canSendAfterDate()?.toISOString() }, { title: 'can_send_after (raw)', value: canSendAfter }, { title: 'query_id', value: queryId }, { title: 'start_param', value: startParam }, { title: 'chat_type', value: chatType }, { title: 'chat_instance', value: chatInstance }, ]; - }, [initData, initDataRaw]); + }, [initDataState, initDataRaw]); const userRows = useMemo(() => { - return initData && initData.user ? getUserRows(initData.user) : undefined; - }, [initData]); + return initDataState && initDataState.user + ? getUserRows(initDataState.user) + : undefined; + }, [initDataState]); const receiverRows = useMemo(() => { - return initData && initData.receiver ? getUserRows(initData.receiver) : undefined; - }, [initData]); + return initDataState && initDataState.receiver + ? getUserRows(initDataState.receiver) + : undefined; + }, [initDataState]); const chatRows = useMemo(() => { - if (!initData?.chat) { + if (!initDataState?.chat) { return; } - const { id, title, type, username, photoUrl } = initData.chat; + const { + id, + title, + type, + username, + photoUrl, + } = initDataState.chat; return [ { title: 'id', value: id.toString() }, @@ -76,24 +86,28 @@ export const InitDataPage: FC = () => { if (!initDataRows) { return ( - - Telegram sticker - + + + Telegram sticker + + ); } return ( - - - {userRows && } - {receiverRows && } - {chatRows && } - + + + + {userRows && } + {receiverRows && } + {chatRows && } + + ); }; diff --git a/src/pages/LaunchParamsPage.tsx b/src/pages/LaunchParamsPage.tsx new file mode 100644 index 0000000..48188f4 --- /dev/null +++ b/src/pages/LaunchParamsPage.tsx @@ -0,0 +1,28 @@ +import { useLaunchParams } from '@telegram-apps/sdk-react'; +import { List } from '@telegram-apps/telegram-ui'; +import type { FC } from 'react'; + +import { DisplayData } from '@/components/DisplayData/DisplayData.tsx'; +import { Page } from '@/components/Page.tsx'; + +export const LaunchParamsPage: FC = () => { + const lp = useLaunchParams(); + + return ( + + + + + + ); +}; diff --git a/src/pages/LaunchParamsPage/LaunchParamsPage.tsx b/src/pages/LaunchParamsPage/LaunchParamsPage.tsx deleted file mode 100644 index f7268fc..0000000 --- a/src/pages/LaunchParamsPage/LaunchParamsPage.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useLaunchParams } from '@telegram-apps/sdk-react'; -import { List } from '@telegram-apps/telegram-ui'; -import type { FC } from 'react'; - -import { DisplayData } from '@/components/DisplayData/DisplayData.tsx'; - -export const LaunchParamsPage: FC = () => { - const lp = useLaunchParams(); - - return ( - - - - ); -}; diff --git a/src/pages/TONConnectPage/TONConnectPage.tsx b/src/pages/TONConnectPage/TONConnectPage.tsx index 07c4390..768ded2 100644 --- a/src/pages/TONConnectPage/TONConnectPage.tsx +++ b/src/pages/TONConnectPage/TONConnectPage.tsx @@ -1,4 +1,4 @@ -import { useUtils } from '@telegram-apps/sdk-react'; +import { openLink } from '@telegram-apps/sdk-react'; import { TonConnectButton, useTonWallet } from '@tonconnect/ui-react'; import { Avatar, @@ -13,27 +13,30 @@ import { import type { FC } from 'react'; import { DisplayData } from '@/components/DisplayData/DisplayData.tsx'; +import { Page } from '@/components/Page.tsx'; import './TONConnectPage.css'; export const TONConnectPage: FC = () => { const wallet = useTonWallet(); - const utils = useUtils(); if (!wallet) { return ( - - - To display the data related to the TON Connect, it is required to connect your wallet - - - - } - /> + + + + To display the data related to the TON Connect, it is required to connect your + wallet + + + + } + /> + ); } @@ -49,51 +52,53 @@ export const TONConnectPage: FC = () => { } = wallet; return ( - - {'imageUrl' in wallet && ( - <> -
- - } - after={About wallet} - subtitle={wallet.appName} - onClick={(e) => { - e.preventDefault(); - utils.openLink(wallet.aboutUrl); - }} - > - {wallet.name} - -
- - - )} - - typeof f === 'object' ? f.name : undefined) - .filter(v => v) - .join(', '), - }, - ]} - /> - + + + {'imageUrl' in wallet && ( + <> +
+ + } + after={About wallet} + subtitle={wallet.appName} + onClick={(e) => { + e.preventDefault(); + openLink(wallet.aboutUrl); + }} + > + {wallet.name} + +
+ + + )} + + typeof f === 'object' ? f.name : undefined) + .filter(v => v) + .join(', '), + }, + ]} + /> + + ); }; diff --git a/src/pages/ThemeParamsPage.tsx b/src/pages/ThemeParamsPage.tsx new file mode 100644 index 0000000..6fcfac2 --- /dev/null +++ b/src/pages/ThemeParamsPage.tsx @@ -0,0 +1,29 @@ +import { themeParams, useSignal } from '@telegram-apps/sdk-react'; +import type { FC } from 'react'; +import { List } from '@telegram-apps/telegram-ui'; + +import { DisplayData } from '@/components/DisplayData/DisplayData.tsx'; +import { Page } from '@/components/Page.tsx'; + +export const ThemeParamsPage: FC = () => { + const tp = useSignal(themeParams.state); + + return ( + + + ({ + title: title + .replace(/[A-Z]/g, (m) => `_${m.toLowerCase()}`) + .replace(/background/, 'bg'), + value, + })) + } + /> + + + ); +}; diff --git a/src/pages/ThemeParamsPage/ThemeParamsPage.tsx b/src/pages/ThemeParamsPage/ThemeParamsPage.tsx deleted file mode 100644 index 3f77aa6..0000000 --- a/src/pages/ThemeParamsPage/ThemeParamsPage.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useThemeParams } from '@telegram-apps/sdk-react'; -import type { FC } from 'react'; -import { List } from '@telegram-apps/telegram-ui'; - -import { DisplayData } from '@/components/DisplayData/DisplayData.tsx'; - -export const ThemeParamsPage: FC = () => { - const themeParams = useThemeParams(); - - return ( - - ({ - title: title - .replace(/[A-Z]/g, (m) => `_${m.toLowerCase()}`) - .replace(/background/, 'bg'), - value, - })) - } - /> - - ); -}; diff --git a/vite.config.ts b/vite.config.ts index 81e8b3d..e663878 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; import react from '@vitejs/plugin-react-swc'; -// import basicSsl from '@vitejs/plugin-basic-ssl'; +import mkcert from 'vite-plugin-mkcert'; // https://vitejs.dev/config/ export default defineConfig({ @@ -13,9 +13,9 @@ export default defineConfig({ // Allows using the compilerOptions.paths property in tsconfig.json. // https://www.npmjs.com/package/vite-tsconfig-paths tsconfigPaths(), - // Allows using self-signed certificates to run the dev server using HTTPS. - // https://www.npmjs.com/package/@vitejs/plugin-basic-ssl - // basicSsl(), + // Create a custom SSL certificate valid for the local machine. + // https://www.npmjs.com/package/vite-plugin-mkcert + mkcert(), ], publicDir: './public', server: {