diff --git a/src/features/multichain/components/CreateSafeOnNewChain/index.tsx b/src/features/multichain/components/CreateSafeOnNewChain/index.tsx index beccedec52..43ab7e78cf 100644 --- a/src/features/multichain/components/CreateSafeOnNewChain/index.tsx +++ b/src/features/multichain/components/CreateSafeOnNewChain/index.tsx @@ -69,45 +69,58 @@ const ReplaySafeDialog = ({ const customRpc = useAppSelector(selectRpc) const dispatch = useAppDispatch() const [creationError, setCreationError] = useState() + const [isSubmitting, setIsSubmitting] = useState(false) // Load some data const [safeCreationData, safeCreationDataError, safeCreationDataLoading] = safeCreationResult const onFormSubmit = handleSubmit(async (data) => { - const selectedChain = chain ?? replayableChains?.find((config) => config.chainId === data.chainId) - if (!safeCreationData || !selectedChain) { - return + setIsSubmitting(true) + + try { + const selectedChain = chain ?? replayableChains?.find((config) => config.chainId === data.chainId) + if (!safeCreationData || !selectedChain) { + return + } + + // We need to create a readOnly provider of the deployed chain + const customRpcUrl = selectedChain ? customRpc?.[selectedChain.chainId] : undefined + const provider = createWeb3ReadOnly(selectedChain, customRpcUrl) + if (!provider) { + return + } + + // 1. Double check that the creation Data will lead to the correct address + const predictedAddress = await predictAddressBasedOnReplayData(safeCreationData, provider) + if (!sameAddress(safeAddress, predictedAddress)) { + setCreationError(new Error('The replayed Safe leads to an unexpected address')) + return + } + + // 2. Replay Safe creation and add it to the counterfactual Safes + replayCounterfactualSafeDeployment(selectedChain.chainId, safeAddress, safeCreationData, data.name, dispatch) + + router.push({ + query: { + safe: `${selectedChain.shortName}:${safeAddress}`, + }, + }) + } catch (err) { + console.error(err) + } finally { + setIsSubmitting(false) + + // Close modal + onClose() } - - // We need to create a readOnly provider of the deployed chain - const customRpcUrl = selectedChain ? customRpc?.[selectedChain.chainId] : undefined - const provider = createWeb3ReadOnly(selectedChain, customRpcUrl) - if (!provider) { - return - } - - // 1. Double check that the creation Data will lead to the correct address - const predictedAddress = await predictAddressBasedOnReplayData(safeCreationData, provider) - if (!sameAddress(safeAddress, predictedAddress)) { - setCreationError(new Error('The replayed Safe leads to an unexpected address')) - return - } - - // 2. Replay Safe creation and add it to the counterfactual Safes - replayCounterfactualSafeDeployment(selectedChain.chainId, safeAddress, safeCreationData, data.name, dispatch) - - router.push({ - query: { - safe: `${selectedChain.shortName}:${safeAddress}`, - }, - }) - - // Close modal - onClose() }) const submitDisabled = - isUnsupportedSafeCreationVersion || !!safeCreationDataError || safeCreationDataLoading || !formState.isValid + isUnsupportedSafeCreationVersion || + !!safeCreationDataError || + safeCreationDataLoading || + !formState.isValid || + isSubmitting const noChainsAvailable = !chain && safeCreationData && replayableChains && replayableChains.filter((chain) => chain.available).length === 0