Update Clear Storage toast

src/app.tsx

@@ -15,7 +15,6 @@ import NotFoundPage from './pages/not-found';
 import ProposalDetailsPage from './pages/proposal-commons/proposal-details';
 import Proposals from './pages/proposals';
 import Vesting from './pages/vesting';
-import StorageFullNotification from './components/notifications/storage-full-notification';
 import { registerWeb3Modal, wagmiConfig } from './wallet-connect';
 import './styles/variables.module.scss';
 import { notifications } from './components/notifications';
@@ -113,17 +112,10 @@ window.localStorage.setItem = (key, value) => {
   try {
     setStorageItem(key, value);
   } catch (e) {
-    notifications.warning(
-      { message: <StorageFullNotification /> },
-      {
-        toastId: 'storage-warning',
-        bodyClassName: 'cursor-auto',
-        closeButton: false,
-        closeOnClick: false,
-        autoClose: false,
-        draggable: false,
-      }
-    );
+    notifications.warning({
+      message: 'We have detected that your local storage is full. Would you like to clear it and refresh the page?',
+      isClearStorage: true,
+    });
 
     throw e;
   }

src/components/notifications/clear-storage-button.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { ALLOW_ANALYTICS, ALLOW_ERROR_REPORTING } from '../../utils/analytics';
+import styles from './notifications.module.scss';
+import Button from '../button';
+
+export const ClearStorageButton = () => {
+  const [isClearing, setIsClearing] = useState(false);
+
+  const clearStorage = () => {
+    setIsClearing(true);
+
+    // Store the current values of the analytics and error reporting settings
+    const errorReportingValue = window.localStorage.getItem(ALLOW_ERROR_REPORTING);
+    const analyticsValue = window.localStorage.getItem(ALLOW_ANALYTICS);
+
+    window.localStorage.clear();
+
+    // Restore the previous values of the analytics and error reporting settings
+    if (errorReportingValue) {
+      window.localStorage.setItem(ALLOW_ERROR_REPORTING, errorReportingValue);
+    }
+    if (analyticsValue) {
+      window.localStorage.setItem(ALLOW_ANALYTICS, analyticsValue);
+    }
+
+    window.location.reload();
+  };
+
+  return (
+    <div className={styles.transactionButtonContainer}>
+      <Button
+        type="text-gray"
+        size="xs"
+        disabled={isClearing}
+        className={styles.transactionButton}
+        onClick={clearStorage}
+      >
+        <span>{isClearing ? 'Clearing...' : 'Clear Storage'}</span>
+      </Button>
+    </div>
+  );
+};