Merge pull request #391 from Akshola00/main

feat: implement restriction to mobile devices

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 (
     <div className="App">
       <Notifier />
@@ -92,13 +109,24 @@ function App() {
           <Route path="/overview" element={<OverviewPage />} />
           <Route path="/form" element={<Form />} />
           <Route path="/documentation" element={<Documentation />} />
-
           <Route path="/stake" element={<Stake />} />
         </Routes>
       </main>
       <Footer />
+      {isMobile && disableDesktopOnMobile && (
+        <ActionModal
+          isOpen={isMobileRestrictionModalOpen}
+          title="Mobile website restriction"
+          subTitle="Please, use desktop version or telegram mini-app"
+          content={[]}
+          cancelLabel="Cancel"
+          submitLabel="Open in Telegram"
+          submitAction={openTelegramBot}
+          cancelAction={handleisMobileRestrictionModalClose}
+        />
+      )}
     </div>
   );
 }
 
-export default App;
+export default App;

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;
+};

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,