Make name mandatory for create/load safe flows

src/routes/load/components/DetailsForm/index.jsx

@@ -50,8 +50,15 @@ export const SAFE_MASTERCOPY_ERROR = 'Mastercopy used by this safe is not the sa
 export const safeFieldsValidation = async (values: Object) => {
   const errors = {}
   const web3 = getWeb3()
+  const safeName = values[FIELD_LOAD_NAME]
   const safeAddress = values[FIELD_LOAD_ADDRESS]
+
+  if (!safeName) {
+    errors[FIELD_LOAD_NAME] = 'Required'
+  }
+
   if (!safeAddress || mustBeEthereumAddress(safeAddress) !== undefined) {
+    errors[FIELD_LOAD_ADDRESS] = 'Required'
     return errors
   }
 
@@ -92,8 +99,8 @@ const Details = ({ classes, errors, form }: Props) => (
   <>
     <Block margin="sm">
       <Paragraph noMargin size="lg" color="primary">
-        Adding an existing Safe only requires the Safe address. Your connected wallet does not have to be the owner of
-        this Safe. In this case, the interface will provide you a read-only view.
+        You are about to load an existing Gnosis Safe. First, choose a name and enter the Safe address. The name is only
+        stored locally and will never be shared with Gnosis or any third parties
       </Paragraph>
     </Block>
     <Block className={classes.root}>

src/routes/open/components/Layout.jsx

@@ -7,7 +7,7 @@ import Block from '~/components/layout/Block'
 import Heading from '~/components/layout/Heading'
 import Row from '~/components/layout/Row'
 import Review from '~/routes/open/components/ReviewInformation'
-import SafeNameField from '~/routes/open/components/SafeNameForm'
+import SafeNameField, { safeNameValidation } from '~/routes/open/components/SafeNameForm'
 import SafeOwnersFields from '~/routes/open/components/SafeOwnersConfirmationsForm'
 import { getOwnerNameBy, getOwnerAddressBy, FIELD_CONFIRMATIONS } from '~/routes/open/components/fields'
 import { history } from '~/store'
@@ -67,7 +67,7 @@ const Layout = ({
             mutators={formMutators}
             testId="create-safe-form"
           >
-            <StepperPage>{SafeNameField}</StepperPage>
+            <StepperPage validate={safeNameValidation}>{SafeNameField}</StepperPage>
             <StepperPage>{SafeOwnersFields}</StepperPage>
             <StepperPage network={network} userAccount={userAccount}>
               {Review}

src/routes/open/components/SafeNameForm/index.jsx

@@ -10,6 +10,16 @@ import Paragraph from '~/components/layout/Paragraph'
 import OpenPaper from '~/components/Stepper/OpenPaper'
 import { sm, secondary } from '~/theme/variables'
 
+export const safeNameValidation = async (values: Object) => {
+  const errors = {}
+
+  if (!values[FIELD_NAME]) {
+    errors[FIELD_NAME] = 'Required'
+  }
+
+  return errors
+}
+
 type Props = {
   classes: Object,
 }