Add update Safe name component

src/routes/safe/components/Layout.jsx

@@ -90,7 +90,7 @@ class Layout extends React.Component<Props, State> {
 
   render() {
     const {
-      safe, provider, network, classes, granted, tokens, activeTokens, createTransaction,
+      safe, provider, network, classes, granted, tokens, activeTokens, createTransaction, updateSafeName,
     } = this.props
     const { tabIndex } = this.state
 
@@ -148,6 +148,7 @@ class Layout extends React.Component<Props, State> {
             safeAddress={address}
             safeName={name}
             etherScanLink={etherScanLink}
+            updateSafeName={updateSafeName}
           />
         )}
       </React.Fragment>

src/routes/safe/components/Settings/UpdateSafeName/index.jsx

@@ -1,10 +1,17 @@
 // @flow
-import * as React from 'react'
+import React, { useState } from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
+import Field from '~/components/forms/Field'
+import {
+  composeValidators, required, minMaxLength,
+} from '~/components/forms/validator'
+import TextField from '~/components/forms/TextField'
+import GnoForm from '~/components/forms/GnoForm'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph'
+import Hairline from '~/components/layout/Hairline'
 import Button from '~/components/layout/Button'
 import { sm, boldFont } from '~/theme/variables'
 import { styles } from './style'
@@ -21,36 +28,63 @@ const saveButtonStyle = {
 
 type Props = {
   classes: Object,
+  safeAddress: string,
+  safeName: string,
+  updateSafe: Funtion
 }
 
-class UpdateSafeName extends React.Component<Props, State> {
-  render() {
-    const { classes } = this.props
+const UpdateSafeName = (props: Props) => {
+  const {
+    classes,
+    safeAddress,
+    safeName,
+    updateSafeName,
+  } = props
 
-    return (
-      <React.Fragment>
-        <Block margin="lg">
-          <Paragraph size="lg" color="primary" noMargin>
-            Details
-          </Paragraph>
-        </Block>
-        <Row style={controlsStyle} align="end" grow>
-          <Col end="xs">
-            <Button
-              type="submit"
-              style={saveButtonStyle}
-              size="small"
-              variant="contained"
-              color="primary"
-              onClick={() => {}}
-            >
-              SAVE
-            </Button>
-          </Col>
-        </Row>
-      </React.Fragment>
-    )
+  const handleSubmit = (values) => {
+    updateSafeName(safeAddress, values.safeName)
   }
+
+  return (
+    <React.Fragment>
+      <GnoForm onSubmit={handleSubmit}>
+        {() => (
+          <React.Fragment>
+            <Block className={classes.formContainer}>
+              <Paragraph noMargin className={classes.title} size="lg">
+              Modify Safe name
+              </Paragraph>
+              <Block className={classes.root}>
+                <Field
+                  name="safeName"
+                  component={TextField}
+                  type="text"
+                  validate={composeValidators(required, minMaxLength(1, 50))}
+                  placeholder="Safe name*"
+                  text="Safe name*"
+                  defaultValue={safeName}
+                />
+              </Block>
+            </Block>
+            <Hairline />
+            <Row style={controlsStyle} align="end" grow>
+              <Col end="xs">
+                <Button
+                  type="submit"
+                  style={saveButtonStyle}
+                  size="small"
+                  variant="contained"
+                  color="primary"
+                >
+                SAVE
+                </Button>
+              </Col>
+            </Row>
+          </React.Fragment>
+        )}
+      </GnoForm>
+    </React.Fragment>
+  )
 }
 
 export default withStyles(styles)(UpdateSafeName)

src/routes/safe/components/Settings/index.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react'
+import { connect } from 'react-redux'
 import { withStyles } from '@material-ui/core/styles'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
@@ -7,13 +8,15 @@ import Row from '~/components/layout/Row'
 import RemoveSafeModal from './RemoveSafeModal'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
+import UpdateSafeName from './UpdateSafeName'
+import actions, { type Actions } from './actions'
 import { styles } from './style'
 
 type State = {
   showRemoveSafe: boolean,
 }
 
-type Props = {
+type Props = Actions & {
   classes: Object,
   granted: boolean,
   etherScanLink: string,
@@ -49,6 +52,7 @@ class Settings extends React.Component<Props, State> {
       etherScanLink,
       safeAddress,
       safeName,
+      updateSafeName,
     } = this.props
 
     return (
@@ -98,7 +102,11 @@ class Settings extends React.Component<Props, State> {
           <Col xs={9} layout="column">
             <Block className={classes.container}>
               {menuOptionIndex === 1 && (
-                <p>To be done</p>
+                <UpdateSafeName
+                  safeAddress={safeAddress}
+                  safeName={safeName}
+                  updateSafeName={updateSafeName}
+                />
               )}
               {granted && menuOptionIndex === 2 && (
                 <p>To be done</p>
@@ -117,4 +125,9 @@ class Settings extends React.Component<Props, State> {
   }
 }
 
-export default withStyles(styles)(Settings)
+const settingsComponent = withStyles(styles)(Settings)
+
+export default connect(
+  undefined,
+  actions,
+)(settingsComponent)