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
 
@@ -151,6 +151,7 @@ class Layout extends React.Component<Props, State> {
             threshold={safe.threshold}
             owners={safe.owners}
             createTransaction={createTransaction}
+            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,19 +28,45 @@ const saveButtonStyle = {
 
 type Props = {
   classes: Object,
+  safeAddress: string,
+  safeName: string,
+  updateSafe: Funtion
 }
 
-class UpdateSafeName extends React.Component<Props, State> {
+const UpdateSafeName = (props: Props) => {
-  render() {
+  const {
-    const { classes } = this.props
+    classes,
+    safeAddress,
+    safeName,
+    updateSafeName,
+  } = props
+
+  const handleSubmit = (values) => {
+    updateSafeName(safeAddress, values.safeName)
+  }
 
   return (
     <React.Fragment>
-        <Block margin="lg">
+      <GnoForm onSubmit={handleSubmit}>
-          <Paragraph size="lg" color="primary" noMargin>
+        {() => (
-            Details
+          <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
@@ -42,15 +75,16 @@ class UpdateSafeName extends React.Component<Props, State> {
                   size="small"
                   variant="contained"
                   color="primary"
-              onClick={() => {}}
                 >
                 SAVE
                 </Button>
               </Col>
             </Row>
           </React.Fragment>
+        )}
+      </GnoForm>
+    </React.Fragment>
   )
 }
-}
 
 export default withStyles(styles)(UpdateSafeName)

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

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import cn from 'classnames'
 import { List } from 'immutable'
+import { connect } from 'react-redux'
 import { withStyles } from '@material-ui/core/styles'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
@@ -11,6 +12,8 @@ import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
 import type { Owner } from '~/routes/safe/store/models/owner'
 import ThresholdSettings from './ThresholdSettings'
+import UpdateSafeName from './UpdateSafeName'
+import actions, { type Actions } from './actions'
 import { styles } from './style'
 
 type State = {
@@ -18,7 +21,7 @@ type State = {
   menuOptionIndex: number,
 }
 
-type Props = {
+type Props = Actions & {
   classes: Object,
   granted: boolean,
   etherScanLink: string,
@@ -52,7 +55,15 @@ class Settings extends React.Component<Props, State> {
   render() {
     const { showRemoveSafe, menuOptionIndex } = this.state
     const {
-      classes, granted, etherScanLink, safeAddress, safeName, owners, threshold, createTransaction,
+      classes,
+      granted,
+      etherScanLink,
+      safeAddress,
+      safeName,
+      owners,
+      threshold,
+      createTransaction,
+      updateSafeName,
     } = this.props
 
     return (
@@ -113,7 +124,13 @@ class Settings extends React.Component<Props, State> {
           </Col>
           <Col xs={9} layout="column">
             <Block className={classes.container}>
-              {menuOptionIndex === 1 && <p>To be done</p>}
+              {menuOptionIndex === 1 && (
+                <UpdateSafeName
+                  safeAddress={safeAddress}
+                  safeName={safeName}
+                  updateSafeName={updateSafeName}
+                />
+              )}
               {granted && menuOptionIndex === 2 && <p>To be done</p>}
               {granted && menuOptionIndex === 3 && (
                 <ThresholdSettings
@@ -132,4 +149,9 @@ class Settings extends React.Component<Props, State> {
   }
 }
 
-export default withStyles(styles)(Settings)
+const settingsComponent = withStyles(styles)(Settings)
+
+export default connect(
+  undefined,
+  actions,
+)(settingsComponent)