feat: add relay debug toggle (#1847)

src/components/sidebar/DebugToggle/index.tsx

@@ -5,6 +5,7 @@ import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import { setDarkMode } from '@/store/settingsSlice'
 import { useDarkMode } from '@/hooks/useDarkMode'
 import { useAppDispatch } from '@/store'
+import { useRelayingDebugger } from '@/hooks/useRelayingDebugger'
 
 const LS_KEY = 'debugProdCgw'
 
@@ -15,22 +16,28 @@ const DebugToggle = (): ReactElement => {
   const isDarkMode = useDarkMode()
 
   const [isProdGateway = false, setIsProdGateway] = useLocalStorage<boolean>(LS_KEY)
+  const [isRelayingEnabled, setIsRelayingEnabled] = useRelayingDebugger()
 
-  const onToggle = (event: ChangeEvent<HTMLInputElement>) => {
+  const onToggleGateway = (event: ChangeEvent<HTMLInputElement>) => {
     setIsProdGateway(event.target.checked)
 
     setTimeout(() => {
       location.reload()
     }, 300)
   }
 
+  const onToggleRelaying = (event: ChangeEvent<HTMLInputElement>) => {
+    setIsRelayingEnabled(event.target.checked)
+  }
+
   return (
     <Box py={2} ml={2}>
       <FormControlLabel
         control={<Switch checked={isDarkMode} onChange={(_, checked) => dispatch(setDarkMode(checked))} />}
         label="Dark mode"
       />
-      <FormControlLabel control={<Switch checked={isProdGateway} onChange={onToggle} />} label="Use prod CGW" />
+      <FormControlLabel control={<Switch checked={isRelayingEnabled} onChange={onToggleRelaying} />} label="Relaying" />
+      <FormControlLabel control={<Switch checked={isProdGateway} onChange={onToggleGateway} />} label="Use prod CGW" />
     </Box>
   )
 }

src/hooks/useRelayingDebugger.ts

@@ -0,0 +1,15 @@
+import { FEATURES, hasFeature } from '@/utils/chains'
+import { useCurrentChain } from '@/hooks/useChains'
+import useLocalStorage from '@/services/local-storage/useLocalStorage'
+import type { Setter } from '@/services/local-storage/useLocalStorage'
+
+const LS_KEY = 'debugRelay'
+
+export const useRelayingDebugger = (): [boolean, Setter<boolean>] => {
+  const currentChain = useCurrentChain()
+  const canRelay = !!currentChain && hasFeature(currentChain, FEATURES.RELAYING)
+
+  const [isRelayingEnabled = canRelay, setIsRelayingEnabled] = useLocalStorage<boolean>(LS_KEY)
+
+  return [isRelayingEnabled, setIsRelayingEnabled]
+}

src/hooks/useRemainingRelays.ts

@@ -9,6 +9,7 @@ import {
 import { FEATURES, hasFeature } from '@/utils/chains'
 import { useCurrentChain } from '@/hooks/useChains'
 import { cgwDebugStorage } from '@/components/sidebar/DebugToggle'
+import { useRelayingDebugger } from '@/hooks/useRelayingDebugger'
 
 export const SAFE_GELATO_RELAY_SERVICE_URL =
   IS_PRODUCTION || cgwDebugStorage.get()
@@ -31,9 +32,10 @@ const fetchRemainingRelays = async (chainId: string, address: string): Promise<n
 export const useRemainingRelaysBySafe = () => {
   const chain = useCurrentChain()
   const safeAddress = useSafeAddress()
+  const [isRelayingEnabled] = useRelayingDebugger()
 
   return useAsync(() => {
-    if (!safeAddress || !chain || !hasFeature(chain, FEATURES.RELAYING)) return
+    if (!safeAddress || !chain || !hasFeature(chain, FEATURES.RELAYING) || !isRelayingEnabled) return
 
     return fetchRemainingRelays(chain.chainId, safeAddress)
   }, [chain, safeAddress])
@@ -43,9 +45,10 @@ const getMinimum = (result: number[]) => Math.min(...result)
 
 export const useLeastRemainingRelays = (ownerAddresses: string[]) => {
   const chain = useCurrentChain()
+  const [isRelayingEnabled] = useRelayingDebugger()
 
   return useAsync(async () => {
-    if (!chain || !hasFeature(chain, FEATURES.RELAYING)) return
+    if (!chain || !hasFeature(chain, FEATURES.RELAYING) || !isRelayingEnabled) return
 
     const result = await Promise.all(ownerAddresses.map((address) => fetchRemainingRelays(chain.chainId, address)))
 

src/services/local-storage/useLocalStorage.ts

@@ -6,7 +6,7 @@ import local from './local'
 // Mimics the behavior of useState
 type Undefinable<T> = T | undefined
 
-type Setter<T> = (val: T | ((prevVal: Undefinable<T>) => Undefinable<T>)) => void
+export type Setter<T> = (val: T | ((prevVal: Undefinable<T>) => Undefinable<T>)) => void
 
 // External stores for each localStorage key which act as a shared cache for LS
 const externalStores: Record<string, ExternalStore<any>> = {}