From 2c89cd984a378f557a91eb783dd47a684f6a00ef Mon Sep 17 00:00:00 2001 From: katspaugh Date: Mon, 31 Oct 2022 08:26:45 +0100 Subject: [PATCH] usePendingCreation --- .../create-safe/status/CreationStatus.tsx | 7 ++----- src/components/create-safe/steps/ReviewStep.tsx | 6 ++---- src/components/create-safe/usePendingCreation.ts | 10 ++++++++++ src/components/create-safe/useSetCreationStep.ts | 8 +++----- src/services/ExternalStore.ts | 16 ++++++++-------- yarn.lock | 9 ++++++++- 6 files changed, 33 insertions(+), 23 deletions(-) create mode 100644 src/components/create-safe/usePendingCreation.ts diff --git a/src/components/create-safe/status/CreationStatus.tsx b/src/components/create-safe/status/CreationStatus.tsx index b0f4cd1841..9b45884e20 100644 --- a/src/components/create-safe/status/CreationStatus.tsx +++ b/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( - SAFE_PENDING_CREATION_STORAGE_KEY, - params, - ) + const [pendingSafe = params, setPendingSafe] = usePendingCreation() const wallet = useWallet() const isWrongChain = useIsWrongChain() const isConnected = wallet && !isWrongChain diff --git a/src/components/create-safe/steps/ReviewStep.tsx b/src/components/create-safe/steps/ReviewStep.tsx index 2cbe975381..e97d2046e2 100644 --- a/src/components/create-safe/steps/ReviewStep.tsx +++ b/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(SAFE_PENDING_CREATION_STORAGE_KEY, undefined) + const [_, setPendingSafe] = usePendingCreation() const { maxFeePerGas, maxPriorityFeePerGas } = useGasPrice() diff --git a/src/components/create-safe/usePendingCreation.ts b/src/components/create-safe/usePendingCreation.ts new file mode 100644 index 0000000000..759d5e872c --- /dev/null +++ b/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(SAFE_PENDING_CREATION_STORAGE_KEY) +} + +export default usePendingCreation diff --git a/src/components/create-safe/useSetCreationStep.ts b/src/components/create-safe/useSetCreationStep.ts index f17b116bc4..f8ed889052 100644 --- a/src/components/create-safe/useSetCreationStep.ts +++ b/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(SAFE_PENDING_CREATION_STORAGE_KEY, undefined) + const [pendingSafe] = usePendingCreation() const wallet = useWallet() const isWrongChain = useIsWrongChain() diff --git a/src/services/ExternalStore.ts b/src/services/ExternalStore.ts index 7097a84e5c..6c0776ea48 100644 --- a/src/services/ExternalStore.ts +++ b/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 { private store: T | undefined - private listeners: Set = 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 { 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 = () => { diff --git a/yarn.lock b/yarn.lock index 16bc0449d8..866de0ad80 100644 --- a/yarn.lock +++ b/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"