Using Notifier.jsx instead of ErrorToast.jsx

djeck1432 · Dec 18, 2024 · dd8b143 · dd8b143
1 parent d765f2d
commit dd8b143
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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