[Multichain] fix: Disable submit button while replaying safe [SW-173] (…

…#4211) * fix: Disable submit button while replaying safe * fix: Add try catch
safe-global · Sep 23, 2024 · 126a8bb · 126a8bb
1 parent 244dad2
commit 126a8bb
Showing 1 changed file with 43 additions and 30 deletions.
diff --git 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<Error>()
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(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