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