Merge pull request #1659 from bancorprotocol/issue-#1658

[Debug] clear localstorage on reset config

src/components/core/menu/mainMenu/MainMenuRight.tsx

@@ -1,22 +1,42 @@
-import { FC } from 'react';
-import { IS_TENDERLY_FORK } from 'libs/wagmi';
+import { FC, useEffect, useState } from 'react';
 import { useBreakpoints } from 'hooks/useBreakpoints';
 import { MainMenuRightWallet } from 'components/core/menu/mainMenu/MainMenuRightWallet';
 import { MainMenuRightNotifications } from 'components/core/menu/mainMenu/MainMenuRightNotifications';
-import { Button } from 'components/common/button';
 import { MainMenuRightBurger } from './MainMenuRightBurger';
 import { useBurgerMenuItems } from './MainMenuRightBurger/useBurgerMenuItems';
 import { MainMenuRightChainSelector } from './MainMenuRightChainSelector';
 import { networks } from 'config';
 import { MainMenuCart } from './MainMenuCart';
+import { lsService } from 'services/localeStorage';
+import { Link } from '@tanstack/react-router';
 import config from 'config';
 
 const TenderlyForkAlert = () => {
-  return IS_TENDERLY_FORK ? (
-    <Button variant="error" size="sm">
-      Fork
-    </Button>
-  ) : null;
+  const [isDebugMode, setIsDebugMode] = useState(false);
+  useEffect(() => {
+    const checkDebugMode = () => {
+      if (!!lsService.getItem('imposterAccount')) return setIsDebugMode(true);
+      if (!!lsService.getItem('tenderlyRpc')) return setIsDebugMode(true);
+      if (!!lsService.getItem('configOverride')) return setIsDebugMode(true);
+      const api = lsService.getItem('carbonApi');
+      if (api && api !== config.carbonApi) return setIsDebugMode(true);
+      setIsDebugMode(false);
+    };
+    checkDebugMode();
+    window.addEventListener('storage', checkDebugMode);
+    return () => window.removeEventListener('storage', checkDebugMode);
+  }, []);
+
+  if (!isDebugMode) return;
+
+  return (
+    <Link
+      to="/debug"
+      className="bg-warning text-14 rounded-full px-16 py-8 text-black"
+    >
+      Debug Mode
+    </Link>
+  );
 };
 
 export const MainMenuRight: FC = () => {

src/components/debug/DebugConfig.tsx

@@ -21,14 +21,14 @@ export const DebugConfig = () => {
     try {
       if (!configOverride) {
         setConfigOverride('');
+        localStorage.clear();
         lsService.removeItem('configOverride');
+        window?.location.reload();
       } else {
         const parsedConfig = JSON.parse(configOverride || '');
         const result = v.safeParse(v.partial(AppConfigSchema), parsedConfig);
         if (result.success) {
-          for (let i = 0; i < localStorage.length; i++) {
-            localStorage.removeItem(localStorage.key(i)!);
-          }
+          localStorage.clear();
           lsService.setItem('configOverride', parsedConfig);
           window?.location.reload();
         } else {

src/utils/managedLocalStorage.ts

@@ -13,6 +13,19 @@ export class ManagedLocalStorage<T> {
     }
   }
 
+  private emit(formattedId: string, newValue: string | null) {
+    // Reproduce "storage" event so it run also within the context of the same document
+    const event = new StorageEvent('storage', {
+      key: formattedId,
+      newValue: newValue,
+      // If this become needed in the app we can send oldValue too, but it requires an additional getItem() call
+      oldValue: null,
+      // eslint-disable-next-line no-restricted-globals
+      url: location.href,
+    });
+    window.dispatchEvent(event);
+  }
+
   getItem = <K extends keyof T>(key: K): T[K] | undefined => {
     const formattedId = this.keyFormatter(key);
     const value = localStorage.getItem(formattedId);
@@ -48,21 +61,13 @@ export class ManagedLocalStorage<T> {
 
     localStorage.setItem(formattedId, stringValue);
 
-    // Reproduce "storage" event so it run also within the context of the same document
-    const event = new StorageEvent('storage', {
-      key: formattedId,
-      newValue: stringValue,
-      // If this become needed in the app we can send oldValue too, but it requires an additional getItem() call
-      oldValue: null,
-      // eslint-disable-next-line no-restricted-globals
-      url: location.href,
-    });
-    window.dispatchEvent(event);
+    this.emit(formattedId, stringValue);
   };
 
   removeItem = <K extends keyof T>(key: K) => {
     const formattedId = this.keyFormatter(key);
     localStorage.removeItem(formattedId);
+    this.emit(formattedId, null);
   };
 
   migrateItems = () => {