diff --git a/package-lock.json b/package-lock.json index 12fba59..3a2f623 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,13 +10,13 @@ "dependencies": { "@hookform/resolvers": "^3.3.4", "@sentry/react": "^9.1.0", + "@telegram-apps/sdk": "^3.5.1", "@ton/core": "^0.59.1", "@tonconnect/ui-react": "^2.0.2", "@vkruglikov/react-telegram-web-app": "^2.1.9", "axios": "^1.6.7", "buffer": "^6.0.3", "clsx": "^2.1.0", - "jssha": "^3.3.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.51.0", @@ -1404,6 +1404,113 @@ "react": "^16.14.0 || 17.x || 18.x || 19.x" } }, + "node_modules/@telegram-apps/bridge": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@telegram-apps/bridge/-/bridge-2.4.0.tgz", + "integrity": "sha512-Lp/vhspF7okK8zXvSWWirunKXOPE6Gr11o9VBne4VmKG/yHRhEW7Pf07ncPtXLLzI6wW8+VYc3khsHPABJymEw==", + "license": "MIT", + "dependencies": { + "@telegram-apps/signals": "^1.1.1", + "@telegram-apps/toolkit": "^2.0.0", + "@telegram-apps/transformers": "^2.2.0", + "@telegram-apps/types": "^2.0.0", + "better-promises": "^0.4.0", + "error-kid": "^0.0.4", + "mitt": "^3.0.1", + "valibot": "1.0.0-beta.14" + } + }, + "node_modules/@telegram-apps/navigation": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@telegram-apps/navigation/-/navigation-1.0.13.tgz", + "integrity": "sha512-TsUueB5LQp77GQHoMa93nq26Uw7GJjrFCPbyseMVU7aBBxAc+8CV2IYytRwcVp5sv/q7ThK5X4JaKn2V1yBHDQ==", + "license": "MIT", + "dependencies": { + "@telegram-apps/bridge": "^1.9.2", + "@telegram-apps/signals": "^1.1.1", + "@telegram-apps/toolkit": "^1.1.1" + } + }, + "node_modules/@telegram-apps/navigation/node_modules/@telegram-apps/bridge": { + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/@telegram-apps/bridge/-/bridge-1.9.2.tgz", + "integrity": "sha512-SJLcNWLXhbbZr9MiqFH/g2ceuitSJKMxUIZysK4zUNyTUNuonrQG80Q/yrO+XiNbKUj8WdDNM86NBARhuyyinQ==", + "license": "MIT", + "dependencies": { + "@telegram-apps/signals": "^1.1.1", + "@telegram-apps/toolkit": "^1.1.1", + "@telegram-apps/transformers": "^1.2.2", + "@telegram-apps/types": "^1.2.1" + } + }, + "node_modules/@telegram-apps/navigation/node_modules/@telegram-apps/toolkit": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@telegram-apps/toolkit/-/toolkit-1.1.1.tgz", + "integrity": "sha512-+vhKx6ngfvjyTE6Xagl3z1TPVbfx5s7xAkcYzCdHYUo6T60jLIqLgyZMcI1UPoIAMuMu1pHoO+p8QNCj/+tFmw==", + "license": "MIT" + }, + "node_modules/@telegram-apps/navigation/node_modules/@telegram-apps/transformers": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@telegram-apps/transformers/-/transformers-1.2.2.tgz", + "integrity": "sha512-vvMwXckd1D7Ozc0h66PSUwF5QLrRV9HlGJFFeBuUex8QEk5mSPtsJkLiqB8aBbwuFDa91+TUSM/CxqPZO/e9YQ==", + "license": "MIT", + "dependencies": { + "@telegram-apps/toolkit": "^1.1.1", + "@telegram-apps/types": "^1.2.1" + } + }, + "node_modules/@telegram-apps/navigation/node_modules/@telegram-apps/types": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@telegram-apps/types/-/types-1.2.1.tgz", + "integrity": "sha512-so4HLh7clur0YyMthi9KVIgWoGpZdXlFOuQjk3+Q5NAvJZ11nAheBSwPlGw/Ko92+zwvrSBE/lQyN2+p17RP+w==", + "license": "MIT" + }, + "node_modules/@telegram-apps/sdk": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/@telegram-apps/sdk/-/sdk-3.5.1.tgz", + "integrity": "sha512-m/ynpSozXsqq6Kfb6M9fm8SD6x/+jqvTFT59FuuOBvC+G8eMd0F+fvZdr6Pj0I6IL9M67nrfm92JpTu/aVNEjw==", + "license": "MIT", + "dependencies": { + "@telegram-apps/bridge": "^2.4.0", + "@telegram-apps/navigation": "^1.0.13", + "@telegram-apps/signals": "^1.1.1", + "@telegram-apps/toolkit": "^2.0.0", + "@telegram-apps/transformers": "^2.2.0", + "@telegram-apps/types": "^2.0.0", + "better-promises": "^0.4.0", + "error-kid": "^0.0.4", + "valibot": "1.0.0-beta.14" + } + }, + "node_modules/@telegram-apps/signals": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@telegram-apps/signals/-/signals-1.1.1.tgz", + "integrity": "sha512-vz37r8lemGpPzDiBRfqpXYBynzmy3SFnY6zfHsTZABTYYt0b0WQZyU5mFDqqqugGhka78Gy11xmr9csgy4YgGA==", + "license": "MIT" + }, + "node_modules/@telegram-apps/toolkit": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@telegram-apps/toolkit/-/toolkit-2.0.0.tgz", + "integrity": "sha512-1GKTLBNme1Phu/gFvgS9NWPq+LhPfzSIfnwhcF9I/6tCdufrLRcVaSMRiK9R4VDYD6iZUyj+a2l250qWAxxjQQ==", + "license": "MIT" + }, + "node_modules/@telegram-apps/transformers": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@telegram-apps/transformers/-/transformers-2.2.0.tgz", + "integrity": "sha512-wqXXOukhEjZKhzdq5vG1LkxWL11DApbmUKzk+3nA/ki3TLyD3awVTOXbpoNdOwFl2xliIooYcsUOEl4WCyyLGw==", + "license": "MIT", + "dependencies": { + "@telegram-apps/toolkit": "^2.0.0", + "@telegram-apps/types": "^2.0.0", + "valibot": "1.0.0-beta.14" + } + }, + "node_modules/@telegram-apps/types": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@telegram-apps/types/-/types-2.0.0.tgz", + "integrity": "sha512-yF499FJK82a2IDNDAQdrmVH3sgFZl/QFNdVZKgWpgtunIVJ1fres5wi9+4aUBRVIdQwZOZZqB/AOvYYuYXsq3Q==", + "license": "MIT" + }, "node_modules/@ton/core": { "version": "0.59.1", "resolved": "https://registry.npmjs.org/@ton/core/-/core-0.59.1.tgz", @@ -2189,6 +2296,15 @@ ], "license": "MIT" }, + "node_modules/better-promises": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/better-promises/-/better-promises-0.4.0.tgz", + "integrity": "sha512-AcKkTUSd4o1vMf41eBbHW1NkY7vrXeNI6etitGdQE54WFXsF2wkfonrKA06Za7lViRNyT/cMvj5z+DScqhYW8A==", + "license": "MIT", + "dependencies": { + "error-kid": "^0.0.4" + } + }, "node_modules/big-integer": { "version": "1.6.52", "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz", @@ -2640,6 +2756,12 @@ "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", "dev": true }, + "node_modules/error-kid": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/error-kid/-/error-kid-0.0.4.tgz", + "integrity": "sha512-x+yQhY56SorLMnX6kOf+z3JCv2QBurcWEDcIjgxYtVr4fGeCfAtOdZOCyWttkHHDFPtL2PqnaRUmphbmALJd9w==", + "license": "MIT" + }, "node_modules/es-abstract": { "version": "1.22.5", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.5.tgz", @@ -4222,15 +4344,6 @@ "node": ">=6" } }, - "node_modules/jssha": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/jssha/-/jssha-3.3.1.tgz", - "integrity": "sha512-VCMZj12FCFMQYcFLPRm/0lOBbLi8uM2BhXPTqw3U4YAfs4AZfiApOoBLoN8cQE60Z50m1MYMTQVCfgF/KaCVhQ==", - "license": "BSD-3-Clause", - "engines": { - "node": "*" - } - }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -4413,6 +4526,12 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/mitt": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", + "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -6153,7 +6272,7 @@ "version": "5.3.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", - "dev": true, + "devOptional": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -6271,6 +6390,20 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, + "node_modules/valibot": { + "version": "1.0.0-beta.14", + "resolved": "https://registry.npmjs.org/valibot/-/valibot-1.0.0-beta.14.tgz", + "integrity": "sha512-tLyV2rE5QL6U29MFy3xt4AqMrn+/HErcp2ZThASnQvPMwfSozjV1uBGKIGiegtZIGjinJqn0SlBdannf18wENA==", + "license": "MIT", + "peerDependencies": { + "typescript": ">=5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/vite": { "version": "5.1.4", "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.4.tgz", diff --git a/package.json b/package.json index 8559d60..506e8db 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@hookform/resolvers": "^3.3.4", "@sentry/react": "^9.1.0", + "@telegram-apps/sdk": "^3.5.1", "@ton/core": "^0.59.1", "@tonconnect/ui-react": "^2.0.2", "@vkruglikov/react-telegram-web-app": "^2.1.9", diff --git a/src/app/index.tsx b/src/app/index.tsx index 6c66e95..e02b605 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -1,27 +1,30 @@ -import "~/app/styles/globals.css"; +import '~/app/styles/globals.css'; import '~/shared/libs/buffer'; -import { useEffect } from "react"; -import { useExpand, useWebApp } from "@vkruglikov/react-telegram-web-app"; - -import { Providers } from "~/app/providers"; -import { AppRouter } from "~/app/router"; +import { useEffect } from 'react'; +import { useExpand, useWebApp } from '@vkruglikov/react-telegram-web-app'; +import { Providers } from '~/app/providers'; +import { AppRouter } from '~/app/router'; +import { Notification } from '~/shared/ui/notification'; +import { init } from '@telegram-apps/sdk'; export const App = () => { - const WebApp = useWebApp(); - const [, expand] = useExpand(); + const WebApp = useWebApp(); + const [, expand] = useExpand(); - useEffect(() => { - WebApp.enableClosingConfirmation(); - expand(); + useEffect(() => { + init(); + WebApp.enableClosingConfirmation(); + expand(); - WebApp.setHeaderColor("#1d1d1b"); - WebApp.setBackgroundColor("#1d1d1b"); - }, []); + WebApp.setHeaderColor('#1d1d1b'); + WebApp.setBackgroundColor('#1d1d1b'); + }, []); - return ( - - - - ); + return ( + + + + + ); }; diff --git a/src/pages/view-content/index.tsx b/src/pages/view-content/index.tsx index 0163501..69f3912 100644 --- a/src/pages/view-content/index.tsx +++ b/src/pages/view-content/index.tsx @@ -1,7 +1,6 @@ import ReactPlayer from 'react-player/lazy'; import { useTonConnectUI } from '@tonconnect/ui-react'; import { useWebApp } from '@vkruglikov/react-telegram-web-app'; - import { Button } from '~/shared/ui/button'; import { usePurchaseContent, useViewContent } from '~/shared/services/content'; import { fromNanoTON } from '~/shared/utils'; @@ -10,7 +9,8 @@ import { AudioPlayer } from '~/shared/ui/audio-player'; import { useAuth } from '~/shared/services/auth'; import { CongratsModal } from './components/congrats-modal'; import { ErrorModal } from './components/error-modal'; - +import { useRootStore } from '~/shared/stores/root'; +import { useTgFullscreen } from '~/shared/hooks/use-tgfullscreen'; type InvoiceStatus = 'paid' | 'failed' | 'cancelled' | 'pending'; // Add type for invoice event @@ -21,7 +21,7 @@ interface InvoiceEvent { export const ViewContentPage = () => { const WebApp = useWebApp(); - + const { addNotification } = useRootStore(); const { data: content, refetch: refetchContent } = useViewContent( WebApp.initDataUnsafe?.start_param ); @@ -30,6 +30,8 @@ export const ViewContentPage = () => { const [tonConnectUI] = useTonConnectUI(); + const { isFullscreen, toggleFullscreen } = useTgFullscreen(); + const auth = useAuth(); const [isCongratsModal, setIsCongratsModal] = useState(false); const [isErrorModal, setIsErrorModal] = useState(false); @@ -42,11 +44,12 @@ export const ViewContentPage = () => { while (Date.now() - startTime < timeoutMs) { if (tonConnectUI.connected) { + addNotification('Кошелек подключен', 'success'); return true; } await new Promise((resolve) => setTimeout(resolve, intervalMs)); } - + addNotification('Время ожидания подключения кошелька истекло', 'warning'); return false; // Timed out }; @@ -185,38 +188,68 @@ export const ViewContentPage = () => {
{isCongratsModal && } {isErrorModal && } - {content?.data?.content_type.startsWith('audio') && - content?.data?.display_options?.metadata?.image && ( -
- {'content_image'} + +
+
+ {content?.data?.content_type.startsWith('audio') && + content?.data?.display_options?.metadata?.image && ( +
+ {'content_image'} +
+ )} + {content?.data?.content_type.startsWith('audio') ? ( + + ) : ( +
+
)} - - {content?.data?.content_type.startsWith('audio') ? ( - - ) : ( - - )} - +

{content?.data?.display_options?.metadata?.name} @@ -227,7 +260,6 @@ export const ViewContentPage = () => { {content?.data?.display_options?.metadata?.description}

-
{content?.data?.downloadable && (