diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 43926cc1..d330ceeb 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -18,12 +18,19 @@ import { useConnectWallet } from 'hooks/useConnectWallet'; import OverviewPage from 'pages/spotnet/overview/Overview'; import { ActionModal } from 'components/ui/ActionModal'; import Stake from 'pages/vault/stake/Stake'; +import { TELEGRAM_BOT_LINK } from 'utils/constants'; +import { useCheckMobile } from 'hooks/useCheckMobile'; import { notifyError } from 'utils/notification'; + function App() { const { walletId, setWalletId, removeWalletId } = useWalletStore(); const [showModal, setShowModal] = useState(false); const navigate = useNavigate(); + const [isMobileRestrictionModalOpen, setisMobileRestrictionModalOpen] = useState(true); + const isMobile = useCheckMobile(); + + const disableDesktopOnMobile = process.env.REACT_APP_DISABLE_DESKTOP_ON_MOBILE !== 'false'; const connectWalletMutation = useConnectWallet(setWalletId); @@ -47,6 +54,15 @@ function App() { setShowModal(false); }; + + const handleisMobileRestrictionModalClose = () => { + setisMobileRestrictionModalOpen(false); + }; + + const openTelegramBot = () => { + window.open(TELEGRAM_BOT_LINK, '_blank'); + }; + useEffect(() => { if (window.Telegram?.WebApp?.initData) { getTelegramUserWalletId(window.Telegram.WebApp.initDataUnsafe.user.id).then((linked_wallet_id) => { @@ -60,6 +76,7 @@ function App() { } }, [window.Telegram?.WebApp?.initDataUnsafe]); + return (
@@ -92,13 +109,24 @@ function App() { } /> } /> } /> - } />
); } -export default App; +export default App; \ No newline at end of file diff --git a/frontend/src/hooks/useCheckMobile.js b/frontend/src/hooks/useCheckMobile.js new file mode 100644 index 00000000..f3f66576 --- /dev/null +++ b/frontend/src/hooks/useCheckMobile.js @@ -0,0 +1,26 @@ +import { useState, useEffect } from 'react'; + +export const useCheckMobile = () => { + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + const checkMobile = () => { + const userAgent = navigator.userAgent || navigator.vendor || window.opera; + + const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i; + + const isMobileDevice = mobileRegex.test(userAgent); + const isMobileWidth = window.innerWidth <= 768; + + setIsMobile(isMobileDevice || isMobileWidth); + }; + + checkMobile(); + + window.addEventListener('resize', checkMobile); + + return () => window.removeEventListener('resize', checkMobile); + }, []); + + return isMobile; +}; diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js index d6ec692c..7207c4c1 100644 --- a/frontend/src/utils/constants.js +++ b/frontend/src/utils/constants.js @@ -12,6 +12,8 @@ export const USDC_ADDRESS = '0x053c91253bc9682c04929ca02ed00b3e423f6710d2ee7e0d5 export const ONE_HOUR_IN_MILLISECONDS = 3600000; +export const TELEGRAM_BOT_LINK = 'https://t.me/spotnet_bot'; + export function getDeployContractData(walletId) { return { classHash: CLASS_HASH,