usePendingCreation

src/components/create-safe/status/CreationStatus.tsx

@@ -12,11 +12,11 @@ import { useCallback } from 'react'
 import { useSafeCreation } from '@/components/create-safe/status/useSafeCreation'
 import type { StepRenderProps } from '@/components/tx/TxStepper/useTxStepper'
 import type { PendingSafeData } from '@/components/create-safe/types.d'
-import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import StatusMessage from '@/components/create-safe/status/StatusMessage'
 import useWallet from '@/hooks/wallets/useWallet'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
 import useStatus from '@/components/create-safe/status/useStatus'
+import usePendingCreation from '@/components/create-safe/usePendingCreation'
 
 export const SAFE_PENDING_CREATION_STORAGE_KEY = 'pendingSafe'
 
@@ -29,10 +29,7 @@ type Props = {
 
 export const CreationStatus = ({ params, setStep }: Props) => {
   const [status, setStatus] = useStatus()
-  const [pendingSafe, setPendingSafe] = useLocalStorage<PendingSafeData | undefined>(
-    SAFE_PENDING_CREATION_STORAGE_KEY,
-    params,
-  )
+  const [pendingSafe = params, setPendingSafe] = usePendingCreation()
   const wallet = useWallet()
   const isWrongChain = useIsWrongChain()
   const isConnected = wallet && !isWrongChain

src/components/create-safe/steps/ReviewStep.tsx

@@ -13,9 +13,7 @@ import { getFallbackHandlerContractInstance } from '@/services/contracts/safeCon
 import { computeNewSafeAddress } from '@/components/create-safe/logic'
 import { useWeb3 } from '@/hooks/wallets/web3'
 import useWallet from '@/hooks/wallets/useWallet'
-import useLocalStorage from '@/services/local-storage/useLocalStorage'
-import type { PendingSafeData } from '@/components/create-safe/types'
-import { SAFE_PENDING_CREATION_STORAGE_KEY } from '@/components/create-safe/status/CreationStatus'
+import usePendingCreation from '../usePendingCreation'
 
 type Props = {
   params: SafeFormData
@@ -30,7 +28,7 @@ const ReviewStep = ({ params, onSubmit, setStep, onBack }: Props) => {
   const provider = useWeb3()
   const chain = useCurrentChain()
   const saltNonce = useMemo(() => Date.now(), [])
-  const [_, setPendingSafe] = useLocalStorage<PendingSafeData | undefined>(SAFE_PENDING_CREATION_STORAGE_KEY, undefined)
+  const [_, setPendingSafe] = usePendingCreation()
 
   const { maxFeePerGas, maxPriorityFeePerGas } = useGasPrice()
 

src/components/create-safe/usePendingCreation.ts

@@ -0,0 +1,10 @@
+import useLocalStorage from '@/services/local-storage/useLocalStorage'
+import type { PendingSafeData } from './types'
+
+const SAFE_PENDING_CREATION_STORAGE_KEY = 'pendingSafe'
+
+const usePendingCreation = () => {
+  return useLocalStorage<PendingSafeData | undefined>(SAFE_PENDING_CREATION_STORAGE_KEY)
+}
+
+export default usePendingCreation

src/components/create-safe/useSetCreationStep.ts

@@ -1,13 +1,11 @@
+import { useEffect } from 'react'
 import type { StepRenderProps } from '@/components/tx/TxStepper/useTxStepper'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
 import useWallet from '@/hooks/wallets/useWallet'
-import { useEffect } from 'react'
-import useLocalStorage from '@/services/local-storage/useLocalStorage'
-import { SAFE_PENDING_CREATION_STORAGE_KEY } from '@/components/create-safe/status/CreationStatus'
-import type { PendingSafeData } from '@/components/create-safe/types.d'
+import usePendingCreation from './usePendingCreation'
 
 const useSetCreationStep = (setStep: StepRenderProps['setStep']) => {
-  const [pendingSafe] = useLocalStorage<PendingSafeData | undefined>(SAFE_PENDING_CREATION_STORAGE_KEY, undefined)
+  const [pendingSafe] = usePendingCreation()
   const wallet = useWallet()
   const isWrongChain = useIsWrongChain()
 

src/services/ExternalStore.ts

@@ -1,14 +1,16 @@
 import { useSyncExternalStore } from 'react'
+import EventBus from './EventBus'
 
-type Listener = () => void
+const UPDATE_EVENT = 'update'
 
 // Singleton with getter/setter whose hook triggers a re-render
 class ExternalStore<T extends unknown> {
   private store: T | undefined
-  private listeners: Set<Listener> = new Set()
+  private eventBus: EventBus<{ [UPDATE_EVENT]: T }>
 
   constructor(initialValue?: T) {
     this.store = initialValue
+    this.eventBus = new EventBus()
   }
 
   public readonly getStore = () => {
@@ -18,15 +20,13 @@ class ExternalStore<T extends unknown> {
   public readonly setStore = (value: T): void => {
     if (value !== this.store) {
       this.store = value
-      this.listeners.forEach((listener) => listener())
+      this.eventBus.dispatch(UPDATE_EVENT, value)
     }
   }
 
-  private readonly subscribe = (listener: Listener): (() => void) => {
-    this.listeners.add(listener)
-    return () => {
-      this.listeners.delete(listener)
-    }
+  // Returns an unsubscribe function
+  private readonly subscribe = (listener: () => any): (() => void) => {
+    return this.eventBus.subscribe(UPDATE_EVENT, listener)
   }
 
   public readonly useStore = () => {

yarn.lock

@@ -2463,13 +2463,20 @@
   resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-modules-deployments/-/safe-modules-deployments-1.0.0.tgz#b4cfcf7782c3fa1491b84405ac06cfa4f7eff365"
   integrity sha512-mZkGtfGmEym7l5w2K6d/mIaS8sDmy50uGWAfTj5Q/+Y1cU9fHYU6hzhb0QaeyNM7F7HM3jg5ZTJjartZJUqu3w==
 
-"@gnosis.pm/safe-react-gateway-sdk@^3.1.3", "@gnosis.pm/safe-react-gateway-sdk@^3.4.1":
+"@gnosis.pm/safe-react-gateway-sdk@^3.1.3":
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-gateway-sdk/-/safe-react-gateway-sdk-3.4.1.tgz#6864abdb28ce0487d64929dee0205e03a49e864f"
   integrity sha512-b8i0BLEP9CC7S2N7hYDX3OXRYIb9asOMVW0QWh4jzsgT5xitUOPy4jrZL9kAmx8QgcMPYbD+Jjsq/R9ltzSmew==
   dependencies:
     cross-fetch "^3.1.5"
 
+"@gnosis.pm/safe-react-gateway-sdk@^3.4.3":
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-gateway-sdk/-/safe-react-gateway-sdk-3.4.3.tgz#4551f75ee39a690f106804a5e19c9c59e2ba1ea1"
+  integrity sha512-KCyM+tl0Rw+Mv+N/yqNzCX3qm80WYhqPpJ3/vcV3jfxqvbBWsXN3z0TMOrx2oJb9621su8NiQmUaQAnLzv9SaQ==
+  dependencies:
+    cross-fetch "^3.1.5"
+
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"