Use customAction and prevent clear storage toast from closing

api3dao · Jan 8, 2025 · c864c77 · c864c77
1 parent 2d31bbc
commit c864c77
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 22 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -18,6 +18,7 @@ import Vesting from './pages/vesting';
 import { registerWeb3Modal, wagmiConfig } from './wallet-connect';
 import './styles/variables.module.scss';
 import { notifications } from './components/notifications';
+import { ClearStorageButton } from './components/notifications/clear-storage-button';
 
 const ErrorBoundary: FallbackRender = (props) => {
   const { error } = props;
@@ -112,10 +113,20 @@ window.localStorage.setItem = (key, value) => {
   try {
     setStorageItem(key, value);
   } catch (e) {
-    notifications.warning({
-      message: 'We have detected that your local storage is full. Would you like to clear it and refresh the page?',
-      isClearStorage: true,
-    });
+    notifications.warning(
+      {
+        message: 'We have detected that your local storage is full. Would you like to clear it and refresh the page?',
+        customAction: <ClearStorageButton />,
+      },
+      {
+        toastId: 'storage-warning',
+        bodyClassName: 'cursor-auto',
+        closeOnClick: false,
+        draggable: false,
+        closeButton: false,
+        autoClose: false,
+      }
+    );
 
     throw e;
   }

diff --git a/src/components/notifications/notifications.tsx b/src/components/notifications/notifications.tsx
@@ -4,6 +4,7 @@ import { toast, Slide, ToastOptions } from 'react-toastify';
 import * as Sentry from '@sentry/browser';
 import Button from '../button';
 import styles from './notifications.module.scss';
+import { ReactNode } from 'react';
 import {
   CheckCircleFillIcon,
   CrossIcon,
@@ -12,7 +13,6 @@ import {
   InfoCircleFillIcon,
   WarningCircleFillIcon,
 } from '../icons';
-import { ClearStorageButton } from './clear-storage-button';
 
 import 'react-toastify/dist/ReactToastify.css';
 import './react-toastify-overrides.scss';
@@ -21,12 +21,12 @@ const THROTTLE_MS = 0;
 
 type ToastProps =
   | {
-      isClearStorage?: never;
+      customAction?: never;
       message: string;
       url?: string;
     }
   | {
-      isClearStorage: true;
+      customAction: ReactNode;
       message: string;
       url?: never;
     };
@@ -48,7 +48,7 @@ const GenericIcon = (props: { type: Partial<ToastOptions['type']> }) => {
 };
 
 const CustomToast = (props: ToastProps & ToastOptions) => {
-  const { isClearStorage, message, type, url } = props;
+  const { customAction, message, type, url } = props;
 
   return (
     <div className={styles.notification}>
@@ -66,7 +66,7 @@ const CustomToast = (props: ToastProps & ToastOptions) => {
           </div>
         )}
 
-        {isClearStorage && <ClearStorageButton />}
+        {customAction}
       </div>
 
       <div className={styles.progressBarBackground} />
@@ -85,13 +85,6 @@ const BASE_OPTIONS: ToastOptions = {
   ),
 };
 
-const CLEAR_STORAGE_OPTIONS: ToastOptions = {
-  toastId: 'storage-warning',
-  bodyClassName: 'cursor-auto',
-  closeOnClick: false,
-  draggable: false,
-};
-
 // NOTE: toasts are throttled to prevent duplicate notifications being displayed.
 // This can occur due to callbacks being fired multiple times in quick succession
 export const info = throttle(
@@ -117,7 +110,6 @@ export const warning = throttle(
   (props: ToastProps, overrides?: ToastOptions) => {
     return toast.warning(<CustomToast {...props} type="warning" />, {
       ...BASE_OPTIONS,
-      ...(props.isClearStorage && CLEAR_STORAGE_OPTIONS),
       ...overrides,
     });
   },

diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx
@@ -26,6 +26,7 @@ import ConfirmUnstakeForm from './forms/confirm-unstake-form';
 import classNames from 'classnames';
 import ConnectButton from '../../components/connect-button';
 import { notifications } from '../../components/notifications';
+import { ClearStorageButton } from '../../components/notifications/clear-storage-button';
 
 type ModalType = 'deposit' | 'withdraw' | 'stake' | 'unstake' | 'confirm-unstake';
 
@@ -104,11 +105,21 @@ const Dashboard = () => {
           type="secondary"
           size="sm"
           onClick={() =>
-            notifications.warning({
-              message:
-                'We have detected that your local storage is full. Would you like to clear it and refresh the page?',
-              isClearStorage: true,
-            })
+            notifications.warning(
+              {
+                message:
+                  'We have detected that your local storage is full. Would you like to clear it and refresh the page?',
+                customAction: <ClearStorageButton />,
+              },
+              {
+                toastId: 'storage-warning',
+                bodyClassName: 'cursor-auto',
+                closeOnClick: false,
+                draggable: false,
+                closeButton: false,
+                autoClose: false,
+              }
+            )
           }
         >
           Warning