Merge pull request #281 from NowGoody/feat/ConnectWallet

Feat/connect wallet

frontend/src/App.jsx

@@ -9,18 +9,21 @@ import Login from 'pages/Login';
 import Form from 'pages/forms/Form';
 import { createPortal } from 'react-dom';
 import LogoutModal from './components/Logout/LogoutModal';
-import { connectWallet, logout, checkForCRMToken } from 'services/wallet';
+import { logout } from 'services/wallet';
 import { saveTelegramUser, getTelegramUserWalletId } from 'services/telegram';
 import Documentation from 'pages/spotnet/documentation/Documentation';
 import Withdraw from 'pages/vault/withdraw/Withdraw';
+import { useConnectWallet } from 'hooks/useConnectWallet';
+import { Notifier } from 'components/Notifier/Notifier';
 
 function App() {
   const [walletId, setWalletId] = useState(localStorage.getItem('wallet_id'));
   const [tgUser, setTgUser] = useState(JSON.parse(localStorage.getItem('tg_user')));
-  const [error, setError] = useState(null);
   const [showModal, setShowModal] = useState(false);
   const navigate = useNavigate();
 
+  const connectWalletMutation = useConnectWallet(setWalletId);
+
   useEffect(() => {
     if (tgUser) {
       saveTelegramUser(tgUser, walletId)
@@ -51,25 +54,8 @@ function App() {
     }
   }, [tgUser, walletId]);
 
-  const handleConnectWallet = async () => {
-    try {
-      setError(null);
-      const walletAddress = await connectWallet();
-
-      if (!walletAddress) {
-        throw new Error('Failed to connect wallet');
-      }
-
-      const hasCRMToken = await checkForCRMToken(walletAddress);
-      if (!hasCRMToken) {
-        return; // Stop further actions if wallet doesn't have CRM token
-      }
-
-      setWalletId(walletAddress);
-    } catch (err) {
-      console.error('Failed to connect wallet:', err);
-      setError(err.message);
-    }
+  const handleConnectWallet = () => {
+    connectWalletMutation.mutate();
   };
 
   const handleLogout = () => {
@@ -89,6 +75,7 @@ function App() {
 
   return (
     <div className="App">
+      <Notifier />
       {showModal && createPortal(<LogoutModal onClose={closeModal} onLogout={handleLogout} />, document.body)}
       <Header
         tgUser={tgUser}
@@ -98,7 +85,6 @@ function App() {
         onLogout={handleLogoutModal}
       />
       <main>
-        {error && <div className="alert alert-danger">{error}</div>}
         <Routes>
           <Route
             index
@@ -119,4 +105,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

frontend/src/components/LendingForm.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getTokenBalances, sendTransaction } from 'services/wallet';
-import { Notifier } from 'components/Notifier/Notifier';
 import { notifyError } from 'utils/notification';
 import { axiosInstance } from 'utils/axios';
 
@@ -169,7 +168,6 @@ const LendingForm = ({ walletId }) => {
         <button type="submit" className="btn-submit" disabled={isLoading}>
           {isLoading ? 'Processing...' : 'Submit'}
         </button>
-        <Notifier />
       </form>
 
       {transactionData && (

frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import './telegramNotificationModal.css';
 import useTelegramNotification from 'hooks/useTelegramNotification';
-import { Notifier } from 'components/Notifier/Notifier';
 
 const TelegramNotificationModal = ({ onClose, telegramId, walletId }) => {
   const { subscribe, isLoading } = useTelegramNotification();
@@ -12,7 +11,6 @@ const TelegramNotificationModal = ({ onClose, telegramId, walletId }) => {
 
   return (
     <div className="notification-overlay">
-      <Notifier />
       <div className="notification-backdrop" onClick={onClose} />
       <div className="notification-wrapper">
         <div className="notification-box">

frontend/src/hooks/useConnectWallet.js

@@ -0,0 +1,28 @@
+import { useMutation } from '@tanstack/react-query';
+import { connectWallet, checkForCRMToken } from 'services/wallet';
+import {  notifyError } from 'utils/notification';
+
+export const useConnectWallet = (setWalletId) => {
+  return useMutation({
+    mutationFn: async () => {
+     const walletAddress = await connectWallet();
+
+      if (!walletAddress) {
+        throw new Error('Failed to connect wallet');
+      }
+    const hasCRMToken = await checkForCRMToken(walletAddress);
+      if (!hasCRMToken) {
+        throw new Error('Wallet does not have CRM token');
+      }
+
+      return walletAddress;
+    },
+    onSuccess: (walletAddress) => {
+      setWalletId(walletAddress);
+    },
+    onError: (error) => {
+      console.error('Wallet connection failed:', error);
+      notifyError('Failed to connect wallet. Please try again.');
+    },
+  });
+};

frontend/src/pages/forms/Form.jsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import TokenSelector from 'components/TokenSelector';
 import BalanceCards from 'components/BalanceCards';
 import MultiplierSelector from 'components/MultiplierSelector';
-import { connectWallet } from 'services/wallet';
 import { handleTransaction } from 'services/transaction';
 import Spinner from 'components/spinner/Spinner';
 import { ReactComponent as AlertHexagon } from 'assets/icons/alert_hexagon.svg';
@@ -13,6 +12,7 @@ import CongratulationsModal from 'components/congratulationsModal/Congratulation
 import StyledPopup from 'components/openpositionpopup/StyledPopup';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
+import { useConnectWallet } from 'hooks/useConnectWallet';
 
 const Form = ({ walletId, setWalletId }) => {
   const [tokenAmount, setTokenAmount] = useState('');
@@ -25,6 +25,8 @@ const Form = ({ walletId, setWalletId }) => {
   useLockBodyScroll(successful);
   const [showPopup, setShowPopup] = useState(false);
 
+  const connectWalletMutation = useConnectWallet(setWalletId);
+
   const { data: positionData, refetch: refetchPosition } = useQuery({
     queryKey: ['hasOpenPosition', walletId],
     queryFn: async () => {
@@ -37,32 +39,19 @@ const Form = ({ walletId, setWalletId }) => {
     enabled: !!walletId,
   });
 
-  const connectWalletHandler = async () => {
-    try {
-      setError(null);
-      const address = await connectWallet();
-      if (address) {
-        setWalletId(address);
-        console.log('Wallet successfully connected. Address:', address);
-        return address;
-      } else {
-        setError('Failed to connect wallet. Please try again.');
-        console.error('Wallet connection flag is false after enabling');
-      }
-    } catch (error) {
-      console.error('Wallet connection failed:', error);
-      setError('Failed to connect wallet. Please try again.');
-    }
-    return null;
+  const connectWalletHandler = () => {
+    connectWalletMutation.mutate();
   };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
 
     let connectedWalletId = walletId;
     if (!connectedWalletId) {
-      connectedWalletId = await connectWalletHandler();
-      if (!connectedWalletId) return;
+      connectWalletHandler();
+      return;
     }
+
     await refetchPosition();
     if (positionData?.has_opened_position) {
       setShowPopup(true);
@@ -95,51 +84,46 @@ const Form = ({ walletId, setWalletId }) => {
 
   return (
     <div className="form-content-wrapper">
-        <BalanceCards walletId={walletId} />
-        {successful && createPortal(<CongratulationsModal />, document.body)}
-      <StyledPopup
-        isOpen={showPopup}
-        onClose={handleClosePopup}
-        onClosePosition={handleClosePosition}
+      <BalanceCards walletId={walletId} />
+      {successful && createPortal(<CongratulationsModal />, document.body)}
+      <StyledPopup isOpen={showPopup} onClose={handleClosePopup} onClosePosition={handleClosePosition} />
+      <form className="form-container" onSubmit={handleSubmit}>
+        <div className="form-title">
+          <h1>Please submit your leverage details</h1>
+        </div>
+        {alertMessage && (
+          <p className="error-message form-alert">
+            {alertMessage} <AlertHexagon className="form-alert-hex" />
+          </p>
+        )}
+        <label>Select Token</label>
+        <TokenSelector selectedToken={selectedToken} setSelectedToken={setSelectedToken} />
+        <label>Select Multiplier</label>
+        <MultiplierSelector
+          setSelectedMultiplier={setSelectedMultiplier}
+          selectedToken={selectedToken}
+          sliderValue={selectedMultiplier}
         />
-        {/* The rest of the UI stays largely unchanged */}
-        <form className='form-container' onSubmit={handleSubmit}>
-            <div className="form-title">
-              <h1>Please submit your leverage details</h1>
-            </div>
-            {alertMessage && (
-              <p className="error-message form-alert">
-                {alertMessage} <AlertHexagon className="form-alert-hex" />
-              </p>
-            )}
-            <label>Select Token</label>
-            <TokenSelector selectedToken={selectedToken} setSelectedToken={setSelectedToken} />
-            <label>Select Multiplier</label>
-            <MultiplierSelector
-              setSelectedMultiplier={setSelectedMultiplier}
-              selectedToken={selectedToken}
-              sliderValue={selectedMultiplier}
-            />
-            <div className="token-label">
-              <label>Token Amount</label>
-              {error && <p className="error-message">{error}</p>}
-              <input
-                type="number"
-                placeholder="Enter Token Amount"
-                value={tokenAmount}
-                onChange={(e) => setTokenAmount(e.target.value)}
-                className={error ? 'error' : ''}
-              />
-            </div>
-            <div>
-              <div className="form-button-container">
-                <button type="submit" className="form-button">
-                  Submit
-                </button>
-              </div>
-            </div>
-        </form>
-        <Spinner loading={loading} />
+        <div className="token-label">
+          <label>Token Amount</label>
+          {error && <p className="error-message">{error}</p>}
+          <input
+            type="number"
+            placeholder="Enter Token Amount"
+            value={tokenAmount}
+            onChange={(e) => setTokenAmount(e.target.value)}
+            className={error ? 'error' : ''}
+          />
+        </div>
+        <div>
+          <div className="form-button-container">
+            <button type="submit" className="form-button">
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+      <Spinner loading={loading} />
     </div>
   );
 };

frontend/src/pages/spotnet/dont_miss/DontMiss.jsx

@@ -4,7 +4,7 @@ import { ReactComponent as Rocket } from 'assets/icons/rocket.svg';
 import { ReactComponent as Hand } from 'assets/images/hand.svg';
 import { ReactComponent as Star } from 'assets/particles/star.svg';
 import { useNavigate } from 'react-router-dom';
-import { Notifier, notify } from 'components/Notifier/Notifier';
+import {  notify } from 'components/Notifier/Notifier';
 
 const DontMiss = ({ walletId }) => {
   const navigate = useNavigate();
@@ -47,7 +47,6 @@ const DontMiss = ({ walletId }) => {
           </div>
         </button>
         <Hand className="hand-icon" />
-        <Notifier />
       </div>
     </div>
   );

frontend/src/pages/spotnet/home/Home.jsx

@@ -5,7 +5,6 @@ import StarMaker from '../../../components/StarMaker';
 import { ReactComponent as Decoration } from 'assets/particles/deco.svg';
 import { ReactComponent as Starknet } from 'assets/particles/starknet.svg';
 import { ReactComponent as Rocket } from 'assets/icons/rocket.svg';
-import { Notifier } from 'components/Notifier/Notifier';
 import { notifyWarning } from 'utils/notification';
 import './home.css';
 
@@ -98,7 +97,6 @@ function Home({ walletId }) {
             <Rocket className="rocket-icon" />
           </div>
         </button>
-        <Notifier />
         <div className="bottom-gradient"></div>
       </div>
     </div>