From b5e32f68b356b9c5aa30ea03e0beef94814d8b3d Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Tue, 6 Feb 2024 19:13:47 +0100
Subject: [PATCH] fix: Show error message in case saltNonce can't be retrieved

---
 .../new-safe/create/steps/ReviewStep/index.tsx           | 9 ++++++++-
 .../new-safe/create/steps/ReviewStep/styles.module.css   | 4 ++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
index d0bf3fb4a1..b5b1916f26 100644
--- a/src/components/new-safe/create/steps/ReviewStep/index.tsx
+++ b/src/components/new-safe/create/steps/ReviewStep/index.tsx
@@ -141,6 +141,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
   const [gasPrice] = useGasPrice()
   const [_, setPendingSafe] = usePendingSafe()
   const [executionMethod, setExecutionMethod] = useState(ExecutionMethod.RELAY)
+  const [submitError, setSubmitError] = useState<string>()
   const isCounterfactualEnabled = useHasFeature(FEATURES.COUNTERFACTUAL)
 
   const ownerAddresses = useMemo(() => data.owners.map((owner) => owner.address), [data.owners])
@@ -180,7 +181,12 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
   }
 
   const createSafe = async () => {
-    if (!wallet || !provider || !chain || !deployProps) return
+    if (!wallet || !provider || !chain) return
+
+    if (!deployProps) {
+      setSubmitError('Error creating the Safe Account. Please try again later.')
+      return
+    }
 
     const props = deployProps.deploySafeProps
     const saltNonce = deployProps.saltNonce
@@ -291,6 +297,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
       <Divider />
 
       <Box className={layoutCss.row}>
+        {submitError && <ErrorMessage className={css.errorMessage}>{submitError}</ErrorMessage>}
         <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
           <Button
             data-testid="back-btn"
diff --git a/src/components/new-safe/create/steps/ReviewStep/styles.module.css b/src/components/new-safe/create/steps/ReviewStep/styles.module.css
index 05cff69a60..2d4e1be420 100644
--- a/src/components/new-safe/create/steps/ReviewStep/styles.module.css
+++ b/src/components/new-safe/create/steps/ReviewStep/styles.module.css
@@ -9,3 +9,7 @@
   text-decoration: line-through;
   color: var(--color-text-secondary);
 }
+
+.errorMessage {
+  margin-top: 0;
+}