Merge branch 'main' into migrate-test-suites-to-starknetkit

frontend/jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
   },
   moduleNameMapper: {
     '\\.svg$': '<rootDir>/test/__mocks__/svgMock.js',
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.js',
     '^src/(.*)$': ['<rootDir>/src/$1'],
   },
   transformIgnorePatterns: [

frontend/src/App.jsx

@@ -13,21 +13,27 @@ import { getTelegramUserWalletId } from 'services/telegram';
 import Documentation from 'pages/spotnet/documentation/Documentation';
 import Withdraw from 'pages/vault/withdraw/Withdraw';
 import { useWalletStore } from 'stores/useWalletStore';
-import { Notifier } from 'components/Notifier/Notifier';
+import { Notifier, notify } from 'components/Notifier/Notifier';
 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 { notifyError } from 'utils/notification';
+import { TELEGRAM_BOT_LINK } from 'utils/constants';
+import { useCheckMobile } from 'hooks/useCheckMobile';
+import PositionHistory from 'pages/spotnet/position_history/PositionHistory';
+
 
 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);
 
-
   const handleConnectWallet = () => {
     connectWalletMutation.mutate();
   };
@@ -47,19 +53,31 @@ 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) => {
-        setWalletId(linked_wallet_id);
-        window.Telegram.WebApp.ready();
-      }).catch((error) => {
-        console.error('Error getting Telegram user wallet ID:', error);
-        notifyError('Error loading wallet');
-        window.Telegram.WebApp.ready();
-      });
+      getTelegramUserWalletId(window.Telegram.WebApp.initDataUnsafe.user.id)
+        .then((linked_wallet_id) => {
+          setWalletId(linked_wallet_id);
+          window.Telegram.WebApp.ready();
+        })
+        .catch((error) => {
+          console.error('Error getting Telegram user wallet ID:', error);
+          notify('Error loading wallet', "error");
+          window.Telegram.WebApp.ready();
+        });
     }
   }, [window.Telegram?.WebApp?.initDataUnsafe]);
 
+
   return (
     <div className="App">
       <Notifier />
@@ -76,14 +94,11 @@ function App() {
           />,
           document.body
         )}
-      <Header
-        onConnectWallet={handleConnectWallet}
-        onLogout={handleLogoutModal}
-      />
+      <Header onConnectWallet={handleConnectWallet} onLogout={handleLogoutModal} />
       <main>
         <Routes>
           <Route index element={<SpotnetApp onConnectWallet={handleConnectWallet} onLogout={handleLogout} />} />
-          <Route  
+          <Route
             path="/login"
             element={walletId ? <Navigate to="/" /> : <Login onConnectWallet={handleConnectWallet} />}
           />
@@ -92,13 +107,25 @@ function App() {
           <Route path="/overview" element={<OverviewPage />} />
           <Route path="/form" element={<Form />} />
           <Route path="/documentation" element={<Documentation />} />
-
+          <Route path="/position-history" element={<PositionHistory />} />
           <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/components/Card/card.css

@@ -1,9 +1,9 @@
 .card {
   width: 309px;
   height: 101px;
-  background: var(--dark-background);
+  background: var(--bg);
   border: 1px solid var(--light-purple);
-  border-radius: 900px;
+  border-radius: 12px;
   padding-top: 4px;
   padding-right: 24px;
   padding-left: 24px;

frontend/src/components/GasFee/GasFee.jsx

@@ -6,7 +6,7 @@ import './gasfee.css';
 export default function GasFee() {
     return (
         <div className="main-card-footer">
-            <div className="divider"></div>
+
             <div className="gas-fee-container">
                 <div className="gas-fee-circle">
                     <SettingIcon className="gas-fee-icon" />

frontend/src/components/GasFee/gasfee.css

@@ -3,6 +3,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: 0rem 3rem;
+    padding-bottom: 1rem;
 }
 
 .gas-fee-circle {

frontend/src/components/LendingForm.js

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getTokenBalances, sendTransaction } from 'services/wallet';
-import { notifyError } from 'utils/notification';
 import { axiosInstance } from 'utils/axios';
 import Button from 'components/ui/Button/Button';
 import { useWalletStore } from 'stores /useWalletStore';
+import { notify } from './Notifier/Notifier';
 
 
 const LendingForm = () => {
@@ -29,7 +29,7 @@ const navigate = useNavigate();
       setBalances(tokenBalances);
     } catch (error) {
       console.error('Failed to fetch balances:', error);
-      notifyError('Failed to fetch token balances. Please try again.');
+      notify('Failed to fetch token balances. Please try again.', "error");
     }
   }, [walletId]);
 

frontend/src/components/MultiplierSelector.jsx

@@ -6,7 +6,7 @@ import './multiplier.css';
 const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {
   const minMultiplier = 1.1;
 
-  const { data, isLoading, error } = useMaxMultiplier();
+  const { data, isLoading } = useMaxMultiplier();
   const [actualValue, setActualValue] = useState(minMultiplier);
   const sliderRef = useRef(null);
   const isDragging = useRef(false);
@@ -104,7 +104,6 @@ const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {
   }, [maxMultiplier, actualValue, setSelectedMultiplier]);
 
   if (isLoading) return <div className="slider-skeleton">Loading multiplier data...</div>;
-  if (error) return <div className="error-message">Error loading multiplier data: {error.message}</div>;
 
   return (
     <div className="multiplier-card">

frontend/src/components/Notifier/Notifier.jsx

@@ -2,14 +2,27 @@ import React from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
-const notify = (message) => toast(message);
+const defaultStyles = {
+  success: { backgroundColor: 'green', color: 'white' },
+  error: { backgroundColor: 'red', color: 'white' },
+  warning: { backgroundColor: 'orange', color: 'white' },
+  info: { backgroundColor: 'blue', color: 'white' },
+};
+
+const ToastWithLink = (message, link, linkMessage) => (
+  <div>
+    <span>{message}</span> <a target='_blank' href={link}>{linkMessage}</a>
+  </div>
+);
+
+const notify = (message, type='info', autoClose=3000) => toast(message, { type, autoClose, style: defaultStyles[type] || defaultStyles.info });
 
 const Notifier = () => {
   return (
     <div>
-      <ToastContainer />
+      <ToastContainer position='top-center' />
     </div>
   );
 };
 
-export { Notifier, notify };
+export { Notifier, notify, ToastWithLink};

frontend/src/components/SlideBarFour.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import { useMaxMultiplier } from 'hooks/useMaxMultiplier';
 import './slider-three.css';
+import { notify } from 'components/Notifier/Notifier';
 
 const StepSlider = ({ min = 0, max = 10, step = 1, defaultValue = 1, setSelectedMultiplier, selectedToken }) => {
     const { data, isLoading, error } = useMaxMultiplier();
@@ -34,7 +35,7 @@ const StepSlider = ({ min = 0, max = 10, step = 1, defaultValue = 1, setSelected
     }, [value, maxMultiplier, TOTAL_MARKS]);
 
     if (isLoading) return <div className="slider-skeleton">Loading multiplier data...</div>;
-    if (error) return <div className="error-message">Error loading multiplier data: {error.message}</div>;
+    if (error) return notify(error.message, 'error');
 
     const currentMark = getCurrentMark();
 

frontend/src/components/StakeCard/metricCard.css

@@ -1,12 +1,14 @@
 .stake-card {
   width: 309px;
+
   background: var(--header-button-bg);
   border: var(--midnight-purple-border);
-  border-radius: 900px;
+  border-radius: 999px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
 }
 
 .stake-card .img {

frontend/src/components/WalletSection.jsx

@@ -74,7 +74,7 @@ const WalletSection = ({ onConnectWallet, onLogout }) => {
                       onLogout();
                     }}
                   >
-                    Log out
+                    Disconnect
                   </button>
                 </div>
               )}

frontend/src/components/collateral/Collateral.jsx

@@ -14,7 +14,7 @@ function Collateral({ data, startSum, currentSum, getCurrentSumColor }) {
           <span className="currency-name">{data[0]?.currencyName || 'N/A'}</span>
         </div>
         <span>
-          <span className="balance-label">Balance: </span>
+          <span className="balance-label">Position Balance: </span>
           <span className="balance-value">{data[0]?.balance ? Number(data[0].balance).toFixed(8) : '0.00'}</span>
         </span>
         <span>

frontend/src/components/ui/Button/button.css

@@ -3,7 +3,7 @@
   border: none;
   cursor: pointer;
   font-weight: 600;
-  border-radius: 900px;
+  border-radius: 8px;
   transition: all 0.2s ease-in-out;
   display: flex;
   justify-content: center;
@@ -71,7 +71,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border-radius: 50px;
+  border-radius: 8px;
   padding: 2px;
   background: linear-gradient(90deg, #74d6fd 0%, #e01dee 100%);
   -webkit-mask:
@@ -101,15 +101,15 @@
 
 @media (max-width: 768px) {
   .button {
-    border-radius: 16px;
+    border-radius: 8px;
   }
 
   .button--primary {
     padding: 20px 12px;
   }
 
   .button--secondary::before {
-    border-radius: 16px;
+    border-radius: 8px;
   }
 
   .button--lg {

frontend/src/globals.css

@@ -49,6 +49,9 @@
   --gray: #83919f;
   --dark-purple: #120721;
   --light-blue: #74d5fd;
+  --status-opened: #1edc9e;
+  --status-closed: #433b5a;
+  --status-pending: #83919f;
   --slider-gray: #393942;
   --light-blue: #88b4fa;
   --thumb-image: url('./assets/icons/slider-thumb.svg');
@@ -63,6 +66,7 @@
   --dark-background: #130713;
   --light-dark-background: #130713;
   --text-gray: #798795;
+  --modal-border: #170f2e;
 }
 
 body {

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/hooks/useClosePosition.js

@@ -2,6 +2,7 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { axiosInstance } from 'utils/axios';
 import { closePosition } from 'services/transaction';
 import { useWalletStore } from 'stores/useWalletStore';
+import { notify } from 'components/Notifier/Notifier';
 
 export const useClosePosition = () => {
   const { walletId } = useWalletStore();
@@ -18,6 +19,7 @@ export const useClosePosition = () => {
     },
     onError: (error) => {
       console.error('Error during closePositionEvent', error);
+      notify(`Error during closePositionEvent: ${error.message}`, 'error')
     },
   });
 };

frontend/src/hooks/useConnectWallet.js

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
+import { notify } from 'components/Notifier/Notifier';
 import { connectWallet, checkForCRMToken } from 'services/wallet';
-import {  notifyError } from 'utils/notification';
 
 export const useConnectWallet = (setWalletId) => {
   return useMutation({
@@ -22,7 +22,7 @@ export const useConnectWallet = (setWalletId) => {
     },
     onError: (error) => {
       console.error('Wallet connection failed:', error);
-      notifyError('Failed to connect wallet. Please try again.');
+      notify('Failed to connect wallet. Please try again.', "error");
     },
   });
 };