Using react-tostify to display error toasts

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

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">

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();
 

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}

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"

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