From 05c22b6eaafddb2cb0b48b88f94ae2e0fc56ba73 Mon Sep 17 00:00:00 2001
From: Fabricio Robles <fabrobles92@gmail.com>
Date: Tue, 17 Dec 2024 11:59:57 -0600
Subject: [PATCH 01/10] feat: Rename Log out to Disconnect

---
 frontend/src/components/WalletSection.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/WalletSection.jsx b/frontend/src/components/WalletSection.jsx
index 0dc94869..394562dd 100644
--- a/frontend/src/components/WalletSection.jsx
+++ b/frontend/src/components/WalletSection.jsx
@@ -74,7 +74,7 @@ const WalletSection = ({ onConnectWallet, onLogout }) => {
                       onLogout();
                     }}
                   >
-                    Log out
+                    Disconnect
                   </button>
                 </div>
               )}

From 6b406ec94dd63880d7497617db542452070b3dbc Mon Sep 17 00:00:00 2001
From: Fabricio Robles <fabrobles92@gmail.com>
Date: Tue, 17 Dec 2024 15:57:21 -0600
Subject: [PATCH 02/10] feat: Change Balance to Position balance in Collateral
 component

---
 frontend/src/components/collateral/Collateral.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/collateral/Collateral.jsx b/frontend/src/components/collateral/Collateral.jsx
index ef50530e..7714705e 100644
--- a/frontend/src/components/collateral/Collateral.jsx
+++ b/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>

From d765f2dea9a0152b3b171cd848877a600dab2c85 Mon Sep 17 00:00:00 2001
From: Fabricio Robles <fabrobles92@gmail.com>
Date: Tue, 17 Dec 2024 16:43:30 -0600
Subject: [PATCH 03/10] Using react-tostify to display error toasts

---
 frontend/src/App.jsx                           |  2 ++
 frontend/src/components/MultiplierSelector.jsx |  3 ++-
 frontend/src/components/SlideBarFour.jsx       |  3 ++-
 frontend/src/components/Toast/ErrorToast.jsx   | 18 ++++++++++++++++++
 frontend/src/pages/forms/Form.jsx              | 10 +++-------
 .../src/pages/spotnet/dashboard/Dashboard.jsx  |  8 ++------
 6 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/components/Toast/ErrorToast.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 43926cc1..685fe179 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -19,6 +19,7 @@ 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 { ErrorToast } from 'components/Toast/ErrorToast';
 
 function App() {
   const { walletId, setWalletId, removeWalletId } = useWalletStore();
@@ -63,6 +64,7 @@ function App() {
   return (
     <div className="App">
       <Notifier />
+      <ErrorToast /> 
       {showModal &&
         createPortal(
           <ActionModal
diff --git a/frontend/src/components/MultiplierSelector.jsx b/frontend/src/components/MultiplierSelector.jsx
index 5ba11bf4..9473e581 100644
--- a/frontend/src/components/MultiplierSelector.jsx
+++ b/frontend/src/components/MultiplierSelector.jsx
@@ -2,6 +2,7 @@ import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react'
 import { useMaxMultiplier } from 'hooks/useMaxMultiplier';
 import sliderThumb from '../assets/icons/slider_thumb.svg';
 import './multiplier.css';
+import { notifyError } from 'components/Toast/ErrorToast';
 
 const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {
   const minMultiplier = 1.1;
@@ -104,7 +105,7 @@ 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>;
+  if (error) return notifyError(error.message);
 
   return (
     <div className="multiplier-card">
diff --git a/frontend/src/components/SlideBarFour.jsx b/frontend/src/components/SlideBarFour.jsx
index afb5aa54..76e5a5ad 100644
--- a/frontend/src/components/SlideBarFour.jsx
+++ b/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 { notifyError } from 'components/Toast/ErrorToast';
 
 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 notifyError(error.message);
 
     const currentMark = getCurrentMark();
 
diff --git a/frontend/src/components/Toast/ErrorToast.jsx b/frontend/src/components/Toast/ErrorToast.jsx
new file mode 100644
index 00000000..f754dfcd
--- /dev/null
+++ b/frontend/src/components/Toast/ErrorToast.jsx
@@ -0,0 +1,18 @@
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+import React from 'react'
+
+const notifyError = (message, id, autoClose) => {
+    toast.error(message, {toastId: id || undefined, autoClose: autoClose !== undefined ? autoClose : 3000} );
+  };
+
+const ErrorToast = () => {
+  return (
+    <div>
+        <ToastContainer position='top-center' />
+    </div>
+  )
+}
+
+export {ErrorToast, notifyError}
diff --git a/frontend/src/pages/forms/Form.jsx b/frontend/src/pages/forms/Form.jsx
index 8a0d817f..0697cd94 100644
--- a/frontend/src/pages/forms/Form.jsx
+++ b/frontend/src/pages/forms/Form.jsx
@@ -7,7 +7,6 @@ import BalanceCards from 'components/BalanceCards';
 import MultiplierSelector from 'components/MultiplierSelector';
 import { handleTransaction } from 'services/transaction';
 import Spinner from 'components/spinner/Spinner';
-import { ReactComponent as AlertHexagon } from 'assets/icons/alert_hexagon.svg';
 import './form.css';
 import { createPortal } from 'react-dom';
 import useLockBodyScroll from 'hooks/useLockBodyScroll';
@@ -19,6 +18,7 @@ import { useCheckPosition } from 'hooks/useClosePosition';
 import { useNavigate } from 'react-router-dom';
 import { ActionModal } from 'components/ui/ActionModal';
 import { useHealthFactor } from 'hooks/useHealthRatio';
+import { notifyError } from 'components/Toast/ErrorToast';
 
 const Form = () => {
   const navigate = useNavigate();
@@ -117,11 +117,7 @@ const Form = () => {
         <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>
-        )}
+        {alertMessage && notifyError(alertMessage, "error1")}
         <label className="token-select">Select Token</label>
         <TokenSelector selectedToken={selectedToken} setSelectedToken={setSelectedToken} />
         <label>Select Multiplier</label>
@@ -132,7 +128,7 @@ const Form = () => {
         />
         <div className="token-label">
           <label className="token-amount">Token Amount</label>
-          {error && <p className="error-message">{error}</p>}
+          {error && notifyError(alertMessage, "error1")}
           <input
             type="number"
             placeholder="Enter Token Amount"
diff --git a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
index 5a4475ec..3d97a704 100644
--- a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
+++ b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
@@ -12,12 +12,12 @@ import Button from 'components/ui/Button/Button';
 import { useWalletStore } from 'stores/useWalletStore';
 import { ActionModal } from 'components/ui/ActionModal';
 import useTelegramNotification from 'hooks/useTelegramNotification';
-import { ReactComponent as AlertHexagon } from 'assets/icons/alert_hexagon.svg';
 import Borrow from 'components/borrow/Borrow';
 import { ReactComponent as CollateralIcon } from 'assets/icons/collateral_dynamic.svg';
 import Collateral from 'components/collateral/Collateral';
 import Card from 'components/Card/Card';
 import { ReactComponent as HealthIcon } from 'assets/icons/health.svg';
+import { notifyError } from 'components/Toast/ErrorToast';
 
 export default function Component({ telegramId }) {
   const { walletId } = useWalletStore();
@@ -189,11 +189,7 @@ export default function Component({ telegramId }) {
             >
               {isClosing ? 'Closing...' : 'Redeem'}
             </Button>
-            {closePositionError && (
-              <div className="error-message">
-                Error: {closePositionError.message} <AlertHexagon className="form-alert-hex" />
-              </div>
-            )}
+            {closePositionError && (notifyError("Error: " + closePositionError.message))}
             <Button variant="secondary" size="lg" className="dashboard-btn telegram" onClick={handleOpen}>
               <TelegramIcon className="tab-icon" />
               Enable telegram notification bot

From dd8b143a5ccd28458dddd317f778d34df5eb02b7 Mon Sep 17 00:00:00 2001
From: Fabricio Robles <fabrobles92@gmail.com>
Date: Wed, 18 Dec 2024 14:45:04 -0600
Subject: [PATCH 04/10] Using Notifier.jsx instead of ErrorToast.jsx

---
 frontend/src/App.jsx                           |  2 --
 frontend/src/components/MultiplierSelector.jsx |  4 ++--
 frontend/src/components/Notifier/Notifier.jsx  |  4 ++--
 frontend/src/components/SlideBarFour.jsx       |  4 ++--
 frontend/src/components/Toast/ErrorToast.jsx   | 18 ------------------
 frontend/src/pages/forms/Form.jsx              |  6 +++---
 .../src/pages/spotnet/dashboard/Dashboard.jsx  |  4 ++--
 7 files changed, 11 insertions(+), 31 deletions(-)
 delete mode 100644 frontend/src/components/Toast/ErrorToast.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 685fe179..43926cc1 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -19,7 +19,6 @@ 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 { ErrorToast } from 'components/Toast/ErrorToast';
 
 function App() {
   const { walletId, setWalletId, removeWalletId } = useWalletStore();
@@ -64,7 +63,6 @@ function App() {
   return (
     <div className="App">
       <Notifier />
-      <ErrorToast /> 
       {showModal &&
         createPortal(
           <ActionModal
diff --git a/frontend/src/components/MultiplierSelector.jsx b/frontend/src/components/MultiplierSelector.jsx
index 9473e581..94ef2c7c 100644
--- a/frontend/src/components/MultiplierSelector.jsx
+++ b/frontend/src/components/MultiplierSelector.jsx
@@ -2,7 +2,7 @@ import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react'
 import { useMaxMultiplier } from 'hooks/useMaxMultiplier';
 import sliderThumb from '../assets/icons/slider_thumb.svg';
 import './multiplier.css';
-import { notifyError } from 'components/Toast/ErrorToast';
+import { notify } from 'components/Notifier/Notifier';
 
 const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {
   const minMultiplier = 1.1;
@@ -105,7 +105,7 @@ const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {
   }, [maxMultiplier, actualValue, setSelectedMultiplier]);
 
   if (isLoading) return <div className="slider-skeleton">Loading multiplier data...</div>;
-  if (error) return notifyError(error.message);
+  if (error) return notify(error.message);
 
   return (
     <div className="multiplier-card">
diff --git a/frontend/src/components/Notifier/Notifier.jsx b/frontend/src/components/Notifier/Notifier.jsx
index ea6a3573..4cf14e96 100644
--- a/frontend/src/components/Notifier/Notifier.jsx
+++ b/frontend/src/components/Notifier/Notifier.jsx
@@ -2,12 +2,12 @@ import React from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
-const notify = (message) => toast(message);
+const notify = (message, id, autoClose) => toast(message, {toastId: id || undefined, autoClose: autoClose !== undefined ? autoClose : 3000});
 
 const Notifier = () => {
   return (
     <div>
-      <ToastContainer />
+      <ToastContainer position='top-center' />
     </div>
   );
 };
diff --git a/frontend/src/components/SlideBarFour.jsx b/frontend/src/components/SlideBarFour.jsx
index 76e5a5ad..70526748 100644
--- a/frontend/src/components/SlideBarFour.jsx
+++ b/frontend/src/components/SlideBarFour.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import { useMaxMultiplier } from 'hooks/useMaxMultiplier';
 import './slider-three.css';
-import { notifyError } from 'components/Toast/ErrorToast';
+import { notify } from 'components/Notifier/Notifier';
 
 const StepSlider = ({ min = 0, max = 10, step = 1, defaultValue = 1, setSelectedMultiplier, selectedToken }) => {
     const { data, isLoading, error } = useMaxMultiplier();
@@ -35,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 notifyError(error.message);
+    if (error) return notify(error.message);
 
     const currentMark = getCurrentMark();
 
diff --git a/frontend/src/components/Toast/ErrorToast.jsx b/frontend/src/components/Toast/ErrorToast.jsx
deleted file mode 100644
index f754dfcd..00000000
--- a/frontend/src/components/Toast/ErrorToast.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-
-import React from 'react'
-
-const notifyError = (message, id, autoClose) => {
-    toast.error(message, {toastId: id || undefined, autoClose: autoClose !== undefined ? autoClose : 3000} );
-  };
-
-const ErrorToast = () => {
-  return (
-    <div>
-        <ToastContainer position='top-center' />
-    </div>
-  )
-}
-
-export {ErrorToast, notifyError}
diff --git a/frontend/src/pages/forms/Form.jsx b/frontend/src/pages/forms/Form.jsx
index 0697cd94..f2676880 100644
--- a/frontend/src/pages/forms/Form.jsx
+++ b/frontend/src/pages/forms/Form.jsx
@@ -18,7 +18,7 @@ import { useCheckPosition } from 'hooks/useClosePosition';
 import { useNavigate } from 'react-router-dom';
 import { ActionModal } from 'components/ui/ActionModal';
 import { useHealthFactor } from 'hooks/useHealthRatio';
-import { notifyError } from 'components/Toast/ErrorToast';
+import { notify } from 'components/Notifier/Notifier';
 
 const Form = () => {
   const navigate = useNavigate();
@@ -117,7 +117,7 @@ const Form = () => {
         <div className="form-title">
           <h1>Please submit your leverage details</h1>
         </div>
-        {alertMessage && notifyError(alertMessage, "error1")}
+        {alertMessage && notify(alertMessage, "error1")}
         <label className="token-select">Select Token</label>
         <TokenSelector selectedToken={selectedToken} setSelectedToken={setSelectedToken} />
         <label>Select Multiplier</label>
@@ -128,7 +128,7 @@ const Form = () => {
         />
         <div className="token-label">
           <label className="token-amount">Token Amount</label>
-          {error && notifyError(alertMessage, "error1")}
+          {error && notify(alertMessage, "error1")}
           <input
             type="number"
             placeholder="Enter Token Amount"
diff --git a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
index 3d97a704..9c596057 100644
--- a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
+++ b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
@@ -17,7 +17,7 @@ import { ReactComponent as CollateralIcon } from 'assets/icons/collateral_dynami
 import Collateral from 'components/collateral/Collateral';
 import Card from 'components/Card/Card';
 import { ReactComponent as HealthIcon } from 'assets/icons/health.svg';
-import { notifyError } from 'components/Toast/ErrorToast';
+import { notify } from 'components/Notifier/Notifier';
 
 export default function Component({ telegramId }) {
   const { walletId } = useWalletStore();
@@ -189,7 +189,7 @@ export default function Component({ telegramId }) {
             >
               {isClosing ? 'Closing...' : 'Redeem'}
             </Button>
-            {closePositionError && (notifyError("Error: " + closePositionError.message))}
+            {closePositionError && (notify("Error: " + closePositionError.message))}
             <Button variant="secondary" size="lg" className="dashboard-btn telegram" onClick={handleOpen}>
               <TelegramIcon className="tab-icon" />
               Enable telegram notification bot

From 3231c5ce95b7ef8d518fb9f30c08571c6cf91ced Mon Sep 17 00:00:00 2001
From: Fabricio Robles <fabrobles92@gmail.com>
Date: Wed, 18 Dec 2024 16:40:43 -0600
Subject: [PATCH 05/10] Removing setError and setAlertMessage states replacing
 them with notify

---
 frontend/jest.config.js                    |  1 +
 frontend/src/pages/forms/Form.jsx          | 11 ++---------
 frontend/src/services/transaction.js       |  8 ++++----
 frontend/test/__mocks__/styleMock.js       |  1 +
 frontend/test/services/transaction.test.js | 12 ++++++------
 5 files changed, 14 insertions(+), 19 deletions(-)
 create mode 100644 frontend/test/__mocks__/styleMock.js

diff --git a/frontend/jest.config.js b/frontend/jest.config.js
index d704a6fd..bb18538e 100644
--- a/frontend/jest.config.js
+++ b/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: [
diff --git a/frontend/src/pages/forms/Form.jsx b/frontend/src/pages/forms/Form.jsx
index f2676880..2618babc 100644
--- a/frontend/src/pages/forms/Form.jsx
+++ b/frontend/src/pages/forms/Form.jsx
@@ -26,9 +26,7 @@ const Form = () => {
   const [tokenAmount, setTokenAmount] = useState('');
   const [selectedToken, setSelectedToken] = useState('ETH');
   const [selectedMultiplier, setSelectedMultiplier] = useState('');
-  const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  const [alertMessage, setAlertMessage] = useState('');
   const [successful, setSuccessful] = useState(false);
   
   useLockBodyScroll(successful);
@@ -70,19 +68,17 @@ const Form = () => {
     }
 
     if (tokenAmount === '' || selectedToken === '' || selectedMultiplier === '') {
-      setAlertMessage('Please fill the form');
+      notify("Please fill the form")
       return;
     }
 
-    setAlertMessage('');
-
     const formData = {
       wallet_id: connectedWalletId,
       token_symbol: selectedToken,
       amount: tokenAmount,
       multiplier: selectedMultiplier,
     };
-    await handleTransaction(connectedWalletId, formData, setError, setTokenAmount, setLoading, setSuccessful);
+    await handleTransaction(connectedWalletId, formData, setTokenAmount, setLoading, setSuccessful);
   };
 
   const handleCloseModal = () => {
@@ -117,7 +113,6 @@ const Form = () => {
         <div className="form-title">
           <h1>Please submit your leverage details</h1>
         </div>
-        {alertMessage && notify(alertMessage, "error1")}
         <label className="token-select">Select Token</label>
         <TokenSelector selectedToken={selectedToken} setSelectedToken={setSelectedToken} />
         <label>Select Multiplier</label>
@@ -128,13 +123,11 @@ const Form = () => {
         />
         <div className="token-label">
           <label className="token-amount">Token Amount</label>
-          {error && notify(alertMessage, "error1")}
           <input
             type="number"
             placeholder="Enter Token Amount"
             value={tokenAmount}
             onChange={(e) => setTokenAmount(e.target.value)}
-            className={error ? 'error' : ''}
           />
         </div>
         <div>
diff --git a/frontend/src/services/transaction.js b/frontend/src/services/transaction.js
index 94983e21..117f9c77 100644
--- a/frontend/src/services/transaction.js
+++ b/frontend/src/services/transaction.js
@@ -4,6 +4,7 @@ import { erc20abi } from '../abis/erc20';
 import { abi } from '../abis/abi';
 import { axiosInstance } from '../utils/axios';
 import {checkAndDeployContract} from './contract';
+import { notify } from '../components/Notifier/Notifier';
 
 export async function sendTransaction(loopLiquidityData, contractAddress) {
   try {
@@ -68,15 +69,14 @@ export async function closePosition(transactionData) {
   ]);
 }
 
-export const handleTransaction = async (connectedWalletId, formData, setError, setTokenAmount, setLoading, setSuccessful) => {
+export const handleTransaction = async (connectedWalletId, formData, setTokenAmount, setLoading, setSuccessful) => {
 
   setLoading(true);
-  setError('');
   try{
     await checkAndDeployContract(connectedWalletId);
   } catch (error) {
     console.error('Error deploying contract:', error);
-    setError('Error deploying contract. Please try again.');
+    notify('Error deploying contract. Please try again.')
     setSuccessful(false)
     setLoading(false);
     return;
@@ -98,7 +98,7 @@ export const handleTransaction = async (connectedWalletId, formData, setError, s
     setTokenAmount('');
   } catch (err) {
     console.error('Failed to create position:', err);
-    setError('Failed to create position. Please try again.');
+    notify('Error deploying contract. Please try again.')
     setSuccessful(false)
   } finally {
     setLoading(false);
diff --git a/frontend/test/__mocks__/styleMock.js b/frontend/test/__mocks__/styleMock.js
new file mode 100644
index 00000000..a0995453
--- /dev/null
+++ b/frontend/test/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
\ No newline at end of file
diff --git a/frontend/test/services/transaction.test.js b/frontend/test/services/transaction.test.js
index dcc4729c..23034340 100644
--- a/frontend/test/services/transaction.test.js
+++ b/frontend/test/services/transaction.test.js
@@ -133,14 +133,14 @@ describe('Transaction Functions', () => {
   });
 
   describe('handleTransaction', () => {
-    const mockSetError = jest.fn();
+    // const mockSetError = jest.fn();
     const mockSetTokenAmount = jest.fn();
     const mockSetLoading = jest.fn();
     const mockSetSuccessful = jest.fn();
     const mockFormData = { position_id: 1 };
 
     beforeEach(() => {
-      mockSetError.mockClear();
+      // mockSetError.mockClear();
       mockSetTokenAmount.mockClear();
       mockSetLoading.mockClear();
       mockSetSuccessful.mockClear();
@@ -162,7 +162,7 @@ describe('Transaction Functions', () => {
         data: { status: 'open' },
       });
 
-      await handleTransaction(mockWalletId, mockFormData, mockSetError, mockSetTokenAmount, mockSetLoading, mockSetSuccessful);
+      await handleTransaction(mockWalletId, mockFormData, mockSetTokenAmount, mockSetLoading, mockSetSuccessful);
 
       expect(mockSetLoading).toHaveBeenCalledWith(true);
       expect(axiosInstance.post).toHaveBeenCalledWith('/api/create-position', mockFormData);
@@ -171,7 +171,7 @@ describe('Transaction Functions', () => {
       });
       expect(mockSetTokenAmount).toHaveBeenCalledWith('');
       expect(mockSetLoading).toHaveBeenCalledWith(false);
-      expect(mockSetError).toHaveBeenCalledWith('');
+      // expect(mockSetError).toHaveBeenCalledWith('');
     });
 
     it('should handle create position error', async () => {
@@ -180,9 +180,9 @@ describe('Transaction Functions', () => {
 
       console.error = jest.fn();
 
-      await handleTransaction(mockWalletId, mockFormData, mockSetError, mockSetTokenAmount, mockSetLoading, mockSetSuccessful);
+      await handleTransaction(mockWalletId, mockFormData, mockSetTokenAmount, mockSetLoading, mockSetSuccessful);
 
-      expect(mockSetError).toHaveBeenCalledWith('Failed to create position. Please try again.');
+      // expect(mockSetError).toHaveBeenCalledWith('Failed to create position. Please try again.');
       expect(console.error).toHaveBeenCalledWith('Failed to create position:', mockError);
       expect(mockSetLoading).toHaveBeenCalledWith(false);
       expect(mockSetSuccessful).toHaveBeenCalledWith(false);

From 7c1e243c8a3afeb705fdd5227e98777761041dfe Mon Sep 17 00:00:00 2001
From: Fabricio Robles <fabrobles92@gmail.com>
Date: Wed, 18 Dec 2024 16:48:12 -0600
Subject: [PATCH 06/10] Displaying toast inside useMaxMultiplier inside hook

---
 frontend/src/components/MultiplierSelector.jsx | 4 +---
 frontend/src/hooks/useMaxMultiplier.js         | 6 ++++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/MultiplierSelector.jsx b/frontend/src/components/MultiplierSelector.jsx
index 94ef2c7c..82dac369 100644
--- a/frontend/src/components/MultiplierSelector.jsx
+++ b/frontend/src/components/MultiplierSelector.jsx
@@ -2,12 +2,11 @@ import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react'
 import { useMaxMultiplier } from 'hooks/useMaxMultiplier';
 import sliderThumb from '../assets/icons/slider_thumb.svg';
 import './multiplier.css';
-import { notify } from 'components/Notifier/Notifier';
 
 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);
@@ -105,7 +104,6 @@ const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {
   }, [maxMultiplier, actualValue, setSelectedMultiplier]);
 
   if (isLoading) return <div className="slider-skeleton">Loading multiplier data...</div>;
-  if (error) return notify(error.message);
 
   return (
     <div className="multiplier-card">
diff --git a/frontend/src/hooks/useMaxMultiplier.js b/frontend/src/hooks/useMaxMultiplier.js
index cc03e540..6aad6802 100644
--- a/frontend/src/hooks/useMaxMultiplier.js
+++ b/frontend/src/hooks/useMaxMultiplier.js
@@ -1,9 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import { ONE_HOUR_IN_MILLISECONDS } from '../utils/constants';
 import { axiosInstance } from 'utils/axios';
+import { notify } from 'components/Notifier/Notifier';
 
 export const useMaxMultiplier = () => {
-  const { data, isPending, error } = useQuery({
+  const { data, isPending } = useQuery({
     queryKey: ['max-multiplier'],
     queryFn: async () => {
       const response = await axiosInstance.get(`/api/get-multipliers`);
@@ -11,7 +12,8 @@ export const useMaxMultiplier = () => {
     },
     staleTime: ONE_HOUR_IN_MILLISECONDS,
     refetchInterval: ONE_HOUR_IN_MILLISECONDS,
+    onError: (error) => notify(`Error using multiplier: ${error.message}`)
   });
 
-  return { data, isLoading: isPending, error };
+  return { data, isLoading: isPending };
 };

From 39950e702c369f6819c14f3dfdde8f4ab23c99a9 Mon Sep 17 00:00:00 2001
From: Fabricio Robles <fabrobles92@gmail.com>
Date: Wed, 18 Dec 2024 16:48:50 -0600
Subject: [PATCH 07/10] Display toast error inside useClosePosition hook

---
 frontend/src/hooks/useClosePosition.js             | 2 ++
 frontend/src/pages/spotnet/dashboard/Dashboard.jsx | 4 +---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/hooks/useClosePosition.js b/frontend/src/hooks/useClosePosition.js
index 859cbfe2..7138d0b0 100644
--- a/frontend/src/hooks/useClosePosition.js
+++ b/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}`)
     },
   });
 };
diff --git a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
index 9c596057..ce6a7304 100644
--- a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
+++ b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
@@ -17,7 +17,6 @@ import { ReactComponent as CollateralIcon } from 'assets/icons/collateral_dynami
 import Collateral from 'components/collateral/Collateral';
 import Card from 'components/Card/Card';
 import { ReactComponent as HealthIcon } from 'assets/icons/health.svg';
-import { notify } from 'components/Notifier/Notifier';
 
 export default function Component({ telegramId }) {
   const { walletId } = useWalletStore();
@@ -30,7 +29,7 @@ export default function Component({ telegramId }) {
     data: { health_ratio: '1.5', current_sum: '0.05', start_sum: '0.04', borrowed: '10.0' },
     isLoading: false,
   };
-  const { mutate: closePositionEvent, isLoading: isClosing, error: closePositionError } = useClosePosition(walletId);
+  const { mutate: closePositionEvent, isLoading: isClosing } = useClosePosition(walletId);
   const { data: positionData } = useCheckPosition();
   const { subscribe } = useTelegramNotification();
 
@@ -189,7 +188,6 @@ export default function Component({ telegramId }) {
             >
               {isClosing ? 'Closing...' : 'Redeem'}
             </Button>
-            {closePositionError && (notify("Error: " + closePositionError.message))}
             <Button variant="secondary" size="lg" className="dashboard-btn telegram" onClick={handleOpen}>
               <TelegramIcon className="tab-icon" />
               Enable telegram notification bot

From ee100ac9239bbb0ff4cc866dcac32f4f3773e87d Mon Sep 17 00:00:00 2001
From: Fabricio Robles <fabrobles92@gmail.com>
Date: Wed, 18 Dec 2024 17:15:09 -0600
Subject: [PATCH 08/10] - Remove notification.js - Modify Notifier.jsx so it
 accepts toast type and apply defaultStyles - Replace old notify with new
 notify from Notifier.jsx

---
 frontend/src/App.jsx                          |  5 ++---
 frontend/src/components/LendingForm.js        |  4 ++--
 frontend/src/components/Notifier/Notifier.jsx |  9 +++++++-
 frontend/src/components/SlideBarFour.jsx      |  2 +-
 frontend/src/hooks/useClosePosition.js        |  2 +-
 frontend/src/hooks/useConnectWallet.js        |  4 ++--
 frontend/src/hooks/useMaxMultiplier.js        |  2 +-
 frontend/src/hooks/useTelegramNotification.js |  6 +++---
 frontend/src/pages/forms/Form.jsx             |  2 +-
 .../src/pages/spotnet/dont_miss/DontMiss.jsx  |  2 +-
 frontend/src/pages/spotnet/home/Home.jsx      |  4 ++--
 frontend/src/services/transaction.js          |  4 ++--
 frontend/src/utils/notification.js            | 21 -------------------
 13 files changed, 26 insertions(+), 41 deletions(-)
 delete mode 100644 frontend/src/utils/notification.js

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 43926cc1..f0dfb548 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -13,12 +13,11 @@ 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';
 
 function App() {
   const { walletId, setWalletId, removeWalletId } = useWalletStore();
@@ -54,7 +53,7 @@ function App() {
         window.Telegram.WebApp.ready();
       }).catch((error) => {
         console.error('Error getting Telegram user wallet ID:', error);
-        notifyError('Error loading wallet');
+        notify('Error loading wallet', "error");
         window.Telegram.WebApp.ready();
       });
     }
diff --git a/frontend/src/components/LendingForm.js b/frontend/src/components/LendingForm.js
index 3289f18c..d2749392 100644
--- a/frontend/src/components/LendingForm.js
+++ b/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]);
 
diff --git a/frontend/src/components/Notifier/Notifier.jsx b/frontend/src/components/Notifier/Notifier.jsx
index 4cf14e96..7cc4f9bf 100644
--- a/frontend/src/components/Notifier/Notifier.jsx
+++ b/frontend/src/components/Notifier/Notifier.jsx
@@ -2,7 +2,14 @@ import React from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
-const notify = (message, id, autoClose) => toast(message, {toastId: id || undefined, autoClose: autoClose !== undefined ? autoClose : 3000});
+const defaultStyles = {
+  success: { backgroundColor: 'green', color: 'white' },
+  error: { backgroundColor: 'red', color: 'white' },
+  warning: { backgroundColor: 'orange', color: 'white' },
+  info: { backgroundColor: 'blue', color: 'white' },
+};
+
+const notify = (message, type='info', autoClose=3000) => toast(message, { type, autoClose, style: defaultStyles[type] || defaultStyles.info });
 
 const Notifier = () => {
   return (
diff --git a/frontend/src/components/SlideBarFour.jsx b/frontend/src/components/SlideBarFour.jsx
index 70526748..f40e0f8c 100644
--- a/frontend/src/components/SlideBarFour.jsx
+++ b/frontend/src/components/SlideBarFour.jsx
@@ -35,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 notify(error.message);
+    if (error) return notify(error.message, 'error');
 
     const currentMark = getCurrentMark();
 
diff --git a/frontend/src/hooks/useClosePosition.js b/frontend/src/hooks/useClosePosition.js
index 7138d0b0..8df35d34 100644
--- a/frontend/src/hooks/useClosePosition.js
+++ b/frontend/src/hooks/useClosePosition.js
@@ -19,7 +19,7 @@ export const useClosePosition = () => {
     },
     onError: (error) => {
       console.error('Error during closePositionEvent', error);
-      notify(`Error during closePositionEvent: ${error.message}`)
+      notify(`Error during closePositionEvent: ${error.message}`, 'error')
     },
   });
 };
diff --git a/frontend/src/hooks/useConnectWallet.js b/frontend/src/hooks/useConnectWallet.js
index 61e7519a..576ffff9 100644
--- a/frontend/src/hooks/useConnectWallet.js
+++ b/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");
     },
   });
 };
\ No newline at end of file
diff --git a/frontend/src/hooks/useMaxMultiplier.js b/frontend/src/hooks/useMaxMultiplier.js
index 6aad6802..3d8f7eeb 100644
--- a/frontend/src/hooks/useMaxMultiplier.js
+++ b/frontend/src/hooks/useMaxMultiplier.js
@@ -12,7 +12,7 @@ export const useMaxMultiplier = () => {
     },
     staleTime: ONE_HOUR_IN_MILLISECONDS,
     refetchInterval: ONE_HOUR_IN_MILLISECONDS,
-    onError: (error) => notify(`Error using multiplier: ${error.message}`)
+    onError: (error) => notify(`Error using multiplier: ${error.message}`, 'error')
   });
 
   return { data, isLoading: isPending };
diff --git a/frontend/src/hooks/useTelegramNotification.js b/frontend/src/hooks/useTelegramNotification.js
index ec0e51b5..883261b7 100644
--- a/frontend/src/hooks/useTelegramNotification.js
+++ b/frontend/src/hooks/useTelegramNotification.js
@@ -1,6 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
 import { subscribeToNotification, generateTelegramLink } from "services/telegram";
-import { notifyError, notifySuccess } from "utils/notification";
+import { notify } from "components/Notifier/Notifier";
 
 const useTelegramNotification = () => {
     const mutation = useMutation({
@@ -14,10 +14,10 @@ const useTelegramNotification = () => {
             return await subscribeToNotification(telegramId, walletId);
         },
         onSuccess: () => {
-            notifySuccess("Subscribed to notifications successfully!");
+            notify("Subscribed to notifications successfully!", "success");
         },
         onError: (error) => {
-            notifyError(error?.message || "Failed to subscribe. Please try again.");
+            notify(error?.message || "Failed to subscribe. Please try again.", "error");
         },
     });
 
diff --git a/frontend/src/pages/forms/Form.jsx b/frontend/src/pages/forms/Form.jsx
index 2618babc..659f4d73 100644
--- a/frontend/src/pages/forms/Form.jsx
+++ b/frontend/src/pages/forms/Form.jsx
@@ -68,7 +68,7 @@ const Form = () => {
     }
 
     if (tokenAmount === '' || selectedToken === '' || selectedMultiplier === '') {
-      notify("Please fill the form")
+      notify("Please fill the form", 'error')
       return;
     }
 
diff --git a/frontend/src/pages/spotnet/dont_miss/DontMiss.jsx b/frontend/src/pages/spotnet/dont_miss/DontMiss.jsx
index 768cd831..0a5c7ab8 100644
--- a/frontend/src/pages/spotnet/dont_miss/DontMiss.jsx
+++ b/frontend/src/pages/spotnet/dont_miss/DontMiss.jsx
@@ -14,7 +14,7 @@ const DontMiss = () => {
     if (walletId) {
       navigate('/form');
     } else {
-      notify('Please connect to your wallet');
+      notify('Please connect to your wallet', 'warning');
     }
   };
 
diff --git a/frontend/src/pages/spotnet/home/Home.jsx b/frontend/src/pages/spotnet/home/Home.jsx
index a63624fa..68e89e17 100644
--- a/frontend/src/pages/spotnet/home/Home.jsx
+++ b/frontend/src/pages/spotnet/home/Home.jsx
@@ -5,9 +5,9 @@ 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 { notifyWarning } from 'utils/notification';
 import './home.css';
 import { useWalletStore } from 'stores/useWalletStore';
+import { notify } from 'components/Notifier/Notifier';
 
 
 function Home() {
@@ -19,7 +19,7 @@ function Home() {
     if (walletId) {
       navigate('/form');
     } else {
-      notifyWarning('Please connect to your wallet');
+      notify('Please connect to your wallet', "warning");
     }
   };
 
diff --git a/frontend/src/services/transaction.js b/frontend/src/services/transaction.js
index 117f9c77..74958eba 100644
--- a/frontend/src/services/transaction.js
+++ b/frontend/src/services/transaction.js
@@ -76,7 +76,7 @@ export const handleTransaction = async (connectedWalletId, formData, setTokenAmo
     await checkAndDeployContract(connectedWalletId);
   } catch (error) {
     console.error('Error deploying contract:', error);
-    notify('Error deploying contract. Please try again.')
+    notify('Error deploying contract. Please try again.', 'error')
     setSuccessful(false)
     setLoading(false);
     return;
@@ -98,7 +98,7 @@ export const handleTransaction = async (connectedWalletId, formData, setTokenAmo
     setTokenAmount('');
   } catch (err) {
     console.error('Failed to create position:', err);
-    notify('Error deploying contract. Please try again.')
+    notify('Error deploying contract. Please try again.', 'error')
     setSuccessful(false)
   } finally {
     setLoading(false);
diff --git a/frontend/src/utils/notification.js b/frontend/src/utils/notification.js
deleted file mode 100644
index 620a3856..00000000
--- a/frontend/src/utils/notification.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { notify } from 'components/Notifier/Notifier';
-
-const defaultStyles = {
-  success: { backgroundColor: 'green', color: 'white' },
-  error: { backgroundColor: 'red', color: 'white' },
-  warning: { backgroundColor: 'orange', color: 'white' },
-  info: { backgroundColor: 'blue', color: 'white' },
-};
-
-export const showNotification = (message, type = 'info') => {
-  const style = defaultStyles[type] || defaultStyles.info;
-
-  notify(message, {
-    style,
-  });
-};
-
-export const notifySuccess = (message) => showNotification(message, 'success');
-export const notifyError = (message) => showNotification(message, 'error');
-export const notifyWarning = (message) => showNotification(message, 'warning');
-export const notifyInfo = (message) => showNotification(message, 'info');

From 6c0b83fb4c0cf365a29275e3a7a8dcd7d91ff779 Mon Sep 17 00:00:00 2001
From: Fabricio Robles <fabrobles92@gmail.com>
Date: Wed, 18 Dec 2024 18:00:45 -0600
Subject: [PATCH 09/10] Add success messages when Deploying Contract, Send
 Transaction and close position attaching the transaction hash in a link that
 goes to starkscan.co

---
 frontend/src/components/Notifier/Notifier.jsx |  8 +++++++-
 frontend/src/services/contract.js             |  2 ++
 frontend/src/services/transaction.js          | 11 ++++++++---
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Notifier/Notifier.jsx b/frontend/src/components/Notifier/Notifier.jsx
index 7cc4f9bf..6072e57c 100644
--- a/frontend/src/components/Notifier/Notifier.jsx
+++ b/frontend/src/components/Notifier/Notifier.jsx
@@ -9,6 +9,12 @@ const defaultStyles = {
   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 = () => {
@@ -19,4 +25,4 @@ const Notifier = () => {
   );
 };
 
-export { Notifier, notify };
+export { Notifier, notify, ToastWithLink};
diff --git a/frontend/src/services/contract.js b/frontend/src/services/contract.js
index 68a5016a..afe866e1 100644
--- a/frontend/src/services/contract.js
+++ b/frontend/src/services/contract.js
@@ -1,6 +1,7 @@
 import { connect } from 'get-starknet';
 import { getDeployContractData } from '../utils/constants';
 import { axiosInstance } from '../utils/axios';
+import { notify, ToastWithLink } from '../components/Notifier/Notifier';
 
 export async function deployContract(walletId) {
   try {
@@ -39,6 +40,7 @@ export async function checkAndDeployContract(walletId) {
       const result = await deployContract(walletId);
       const contractAddress = result.contractAddress;
 
+      notify(ToastWithLink("Contract Deployed Successfully", `https://starkscan.co/tx/${result.transactionHash}`, "Transaction ID"), "success")
       console.log('Contract address:', contractAddress);
 
       // Update the backend with transaction hash and wallet ID
diff --git a/frontend/src/services/transaction.js b/frontend/src/services/transaction.js
index 74958eba..ef24e166 100644
--- a/frontend/src/services/transaction.js
+++ b/frontend/src/services/transaction.js
@@ -4,7 +4,7 @@ import { erc20abi } from '../abis/erc20';
 import { abi } from '../abis/abi';
 import { axiosInstance } from '../utils/axios';
 import {checkAndDeployContract} from './contract';
-import { notify } from '../components/Notifier/Notifier';
+import { notify, ToastWithLink } from '../components/Notifier/Notifier';
 
 export async function sendTransaction(loopLiquidityData, contractAddress) {
   try {
@@ -33,8 +33,11 @@ export async function sendTransaction(loopLiquidityData, contractAddress) {
     };
     console.log(depositTransaction);
     let result = await starknet.account.execute([approveTransaction, depositTransaction]);
+
     console.log('Resp: ');
     console.log(result);
+    notify(ToastWithLink("Transaction successfully sent", `https://starkscan.co/tx/${result.transaction_hash}`, "Transaction ID"), "success")
+
     return {
       loopTransaction: result.transaction_hash,
     };
@@ -64,9 +67,11 @@ export async function closePosition(transactionData) {
   console.log(compiled);
   const starknet = await connect();
   console.log(transactionData.contract_address);
-  await starknet.account.execute([
+  let result = await starknet.account.execute([
     { contractAddress: transactionData.contract_address, entrypoint: 'close_position', calldata: compiled },
   ]);
+  notify(ToastWithLink("Close position successfully sent", `https://starkscan.co/tx/${result.transaction_hash}`, "Transaction ID"), "success")
+
 }
 
 export const handleTransaction = async (connectedWalletId, formData, setTokenAmount, setLoading, setSuccessful) => {
@@ -98,7 +103,7 @@ export const handleTransaction = async (connectedWalletId, formData, setTokenAmo
     setTokenAmount('');
   } catch (err) {
     console.error('Failed to create position:', err);
-    notify('Error deploying contract. Please try again.', 'error')
+    notify(`Error sending transaction: ${err}`, 'error')
     setSuccessful(false)
   } finally {
     setLoading(false);

From 7d58e2ac5f3bc51d786f72e8e31fb9d806271c74 Mon Sep 17 00:00:00 2001
From: Fabricio Robles <fabrobles92@gmail.com>
Date: Wed, 18 Dec 2024 18:11:57 -0600
Subject: [PATCH 10/10] Delete unsed and commented code

---
 frontend/src/App.jsx                       |  1 -
 frontend/test/services/transaction.test.js | 12 ++++--------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ffe7591c..28351230 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -20,7 +20,6 @@ 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() {
diff --git a/frontend/test/services/transaction.test.js b/frontend/test/services/transaction.test.js
index 23034340..25781c85 100644
--- a/frontend/test/services/transaction.test.js
+++ b/frontend/test/services/transaction.test.js
@@ -132,15 +132,13 @@ describe('Transaction Functions', () => {
     });
   });
 
-  describe('handleTransaction', () => {
-    // const mockSetError = jest.fn();
+  describe('handleTransaction', () => {    
     const mockSetTokenAmount = jest.fn();
     const mockSetLoading = jest.fn();
     const mockSetSuccessful = jest.fn();
     const mockFormData = { position_id: 1 };
 
-    beforeEach(() => {
-      // mockSetError.mockClear();
+    beforeEach(() => {      
       mockSetTokenAmount.mockClear();
       mockSetLoading.mockClear();
       mockSetSuccessful.mockClear();
@@ -170,8 +168,7 @@ describe('Transaction Functions', () => {
         params: { position_id: mockTransactionData.position_id },
       });
       expect(mockSetTokenAmount).toHaveBeenCalledWith('');
-      expect(mockSetLoading).toHaveBeenCalledWith(false);
-      // expect(mockSetError).toHaveBeenCalledWith('');
+      expect(mockSetLoading).toHaveBeenCalledWith(false);      
     });
 
     it('should handle create position error', async () => {
@@ -181,8 +178,7 @@ describe('Transaction Functions', () => {
       console.error = jest.fn();
 
       await handleTransaction(mockWalletId, mockFormData, mockSetTokenAmount, mockSetLoading, mockSetSuccessful);
-
-      // expect(mockSetError).toHaveBeenCalledWith('Failed to create position. Please try again.');
+      
       expect(console.error).toHaveBeenCalledWith('Failed to create position:', mockError);
       expect(mockSetLoading).toHaveBeenCalledWith(false);
       expect(mockSetSuccessful).toHaveBeenCalledWith(false);