Merge pull request #119 from gnosis/edit-remove-safe

Safe settings: Change Safe name & Remove Safe

package.json

@@ -32,13 +32,13 @@
   "dependencies": {
     "@gnosis.pm/safe-contracts": "^1.0.0",
     "@gnosis.pm/util-contracts": "2.0.1",
-    "@material-ui/core": "4.1.1",
+    "@material-ui/core": "4.1.3",
-    "@material-ui/icons": "4.2.0",
+    "@material-ui/icons": "4.2.1",
     "@welldone-software/why-did-you-render": "3.2.1",
     "axios": "0.19.0",
     "bignumber.js": "9.0.0",
     "connected-react-router": "^6.3.1",
-    "final-form": "4.15.0",
+    "final-form": "4.16.1",
     "history": "^4.7.2",
     "immortal-db": "^1.0.2",
     "immutable": "^4.0.0-rc.9",
@@ -47,7 +47,7 @@
     "qrcode.react": "^0.9.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-final-form": "6.2.1",
+    "react-final-form": "6.3.0",
     "react-final-form-listeners": "^1.0.2",
     "react-hot-loader": "4.11.1",
     "react-infinite-scroll-component": "^4.5.2",
@@ -86,10 +86,11 @@
     "@babel/preset-flow": "^7.0.0-beta.40",
     "@babel/preset-react": "^7.0.0-beta.40",
     "@sambego/storybook-state": "^1.0.7",
-    "@storybook/addon-actions": "5.1.8",
+    "@storybook/addon-actions": "5.1.9",
-    "@storybook/addon-knobs": "5.1.8",
+    "@storybook/addon-knobs": "5.1.9",
-    "@storybook/addon-links": "5.1.8",
+    "@storybook/addon-links": "5.1.9",
-    "@storybook/react": "5.1.8",
+    "@storybook/react": "5.1.9",
+    "@testing-library/react": "^8.0.1",
     "autoprefixer": "9.6.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "10.0.2",
@@ -103,15 +104,15 @@
     "detect-port": "^1.2.2",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-flowtype": "3.10.3",
+    "eslint-plugin-flowtype": "3.11.1",
-    "eslint-plugin-import": "2.17.3",
+    "eslint-plugin-import": "2.18.0",
-    "eslint-plugin-jest": "22.6.4",
+    "eslint-plugin-jest": "22.7.1",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "7.13.0",
+    "eslint-plugin-react": "7.14.2",
     "ethereumjs-abi": "^0.6.7",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "4.0.0",
-    "flow-bin": "0.101.0",
+    "flow-bin": "0.102.0",
     "fs-extra": "8.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.0.4",
@@ -128,13 +129,13 @@
     "storybook-host": "^5.0.3",
     "storybook-router": "^0.3.3",
     "style-loader": "^0.23.1",
-    "truffle": "5.0.22",
+    "truffle": "5.0.24",
-    "truffle-contract": "4.0.20",
+    "truffle-contract": "4.0.21",
-    "truffle-solidity-loader": "0.1.21",
+    "truffle-solidity-loader": "0.1.23",
     "uglifyjs-webpack-plugin": "2.1.3",
-    "webpack": "4.34.0",
+    "webpack": "4.35.0",
     "webpack-bundle-analyzer": "3.3.2",
-    "webpack-cli": "3.3.4",
+    "webpack-cli": "3.3.5",
     "webpack-dev-server": "3.7.2",
     "webpack-manifest-plugin": "^2.0.0-rc.2"
   }

readme.md

@@ -43,13 +43,12 @@ git clone https://github.com/gnosis/safe-contracts.git
 cd safe-contracts
 yarn
 ganache-cli -l 7000000
-npx truffle compile
 npx truffle migrate
 ```
-2. Compiling Token Contracts for the tests:
+2. Migrate Token Contracts for the tests:
 Inside `safe-react` directory
 ```
-npx truffle compile
+npx truffle migrate
 ```
 3. Run the tests:
 ```

src/components/layout/Heading/index.jsx

@@ -6,7 +6,7 @@ import styles from './index.scss'
 
 const cx = classNames.bind(styles)
 
-type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4';
+type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4'
 
 type Props = {
   align?: 'left' | 'center' | 'right',
@@ -15,24 +15,18 @@ type Props = {
   tag: HeadingTag,
   truncate?: boolean,
   children: React.Node,
+  testId?: string,
 }
 
 class Heading extends React.PureComponent<Props> {
   render() {
     const {
-      align, tag, truncate, margin, color, children, ...props
+      align, tag, truncate, margin, color, children, testId, ...props
     } = this.props
 
-    const className = cx(
+    const className = cx('heading', align, tag, margin ? capitalize(margin, 'margin') : undefined, color, { truncate })
-      'heading',
-      align,
-      tag,
-      margin ? capitalize(margin, 'margin') : undefined,
-      color,
-      { truncate },
-    )
 
-    return React.createElement(tag, { ...props, className }, children)
+    return React.createElement(tag, { ...props, className, 'data-testid': testId || '' }, children)
   }
 }
 

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

@@ -1,11 +1,11 @@
 // @flow
-import * as React from 'react'
+import React, { useState, useEffect } from 'react'
-import Block from '~/components/layout/Block'
 import { withStyles } from '@material-ui/core/styles'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import Block from '~/components/layout/Block'
 import Field from '~/components/forms/Field'
 import { required } from '~/components/forms/validator'
 import TextField from '~/components/forms/TextField'
-import OpenInNew from '@material-ui/icons/OpenInNew'
 import Identicon from '~/components/Identicon'
 import OpenPaper from '~/components/Stepper/OpenPaper'
 import Col from '~/components/layout/Col'
@@ -78,10 +78,6 @@ type Props = LayoutProps & {
   updateInitialProps: (initialValues: Object) => void,
 }
 
-type State = {
-  owners: Array<string>,
-}
-
 const calculateSafeValues = (owners: Array<string>, threshold: Number, values: Object) => {
   const initialValues = { ...values }
   for (let i = 0; i < owners.length; i += 1) {
@@ -91,87 +87,80 @@ const calculateSafeValues = (owners: Array<string>, threshold: Number, values: O
   return initialValues
 }
 
-class OwnerListComponent extends React.PureComponent<Props, State> {
+const OwnerListComponent = (props: Props) => {
-  state = {
+  const [owners, setOwners] = useState<Array<string>>([])
-    owners: [],
+  const {
-  }
+    values, updateInitialProps, network, classes,
+  } = props
 
-  mounted = false
+  useEffect(() => {
+    let isCurrent = true
 
-  componentDidMount = async () => {
+    const fetchSafe = async () => {
-    this.mounted = true
+      const safeAddress = values[FIELD_LOAD_ADDRESS]
-    const { values, updateInitialProps } = this.props
+      const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
-    const safeAddress = values[FIELD_LOAD_ADDRESS]
+      const safeOwners = await gnosisSafe.getOwners()
+      const threshold = await gnosisSafe.getThreshold()
 
-    const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
+      if (isCurrent && owners) {
-    const owners = await gnosisSafe.getOwners()
+        const sortedOwners = safeOwners.sort()
-    const threshold = await gnosisSafe.getThreshold()
+        const initialValues = calculateSafeValues(sortedOwners, threshold, values)
-
+        updateInitialProps(initialValues)
-    const initialValues = calculateSafeValues(owners.sort(), threshold, values)
+        setOwners(sortedOwners)
-    updateInitialProps(initialValues)
+      }
-
-    if (!owners) {
-      return
     }
 
-    if (this.mounted) {
+    fetchSafe()
-      this.setState(() => ({ owners: owners.sort() }))
+
+    return () => {
+      isCurrent = false
     }
-  }
+  }, [])
 
-  componentWillUnmount() {
+  return (
-    this.mounted = false
+    <React.Fragment>
-  }
+      <Block className={classes.title}>
-
+        <Paragraph noMargin size="md" color="primary">
-  render() {
+          {`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`}
-    const { network, classes } = this.props
+        </Paragraph>
-    const { owners } = this.state
+      </Block>
-
+      <Hairline />
-    return (
+      <Row className={classes.header}>
-      <React.Fragment>
+        <Col xs={4}>NAME</Col>
-        <Block className={classes.title}>
+        <Col xs={8}>ADDRESS</Col>
-          <Paragraph noMargin size="md" color="primary">
+      </Row>
-            {`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`}
+      <Hairline />
-          </Paragraph>
+      <Block margin="md" padding="md">
-        </Block>
+        {owners.map((address, index) => (
-        <Hairline />
+          <Row key={address} className={classes.owner}>
-        <Row className={classes.header}>
+            <Col xs={4}>
-          <Col xs={4}>NAME</Col>
+              <Field
-          <Col xs={8}>ADDRESS</Col>
+                className={classes.name}
-        </Row>
+                name={getOwnerNameBy(index)}
-        <Hairline />
+                component={TextField}
-        <Block margin="md" padding="md">
+                type="text"
-          {owners.map((x, index) => (
+                validate={required}
-            <Row key={owners[index].address} className={classes.owner}>
+                initialValue={`Owner #${index + 1}`}
-              <Col xs={4}>
+                placeholder="Owner Name*"
-                <Field
+                text="Owner Name"
-                  className={classes.name}
+              />
-                  name={getOwnerNameBy(index)}
+            </Col>
-                  component={TextField}
+            <Col xs={7}>
-                  type="text"
+              <Row className={classes.ownerAddresses}>
-                  validate={required}
+                <Identicon address={address} diameter={32} />
-                  defaultValue={`Owner #${index + 1}`}
+                <Paragraph size="md" color="disabled" noMargin className={classes.address}>
-                  placeholder="Owner Name*"
+                  {address}
-                  text="Owner Name"
+                </Paragraph>
-                />
+                <Link className={classes.open} to={getEtherScanLink(address, network)} target="_blank">
-              </Col>
+                  <OpenInNew style={openIconStyle} />
-              <Col xs={7}>
+                </Link>
-                <Row className={classes.ownerAddresses}>
+              </Row>
-                  <Identicon address={owners[index]} diameter={32} />
+            </Col>
-                  <Paragraph size="md" color="disabled" noMargin className={classes.address}>
+          </Row>
-                    {owners[index]}
+        ))}
-                  </Paragraph>
+      </Block>
-                  <Link className={classes.open} to={getEtherScanLink(owners[index], network)} target="_blank">
+    </React.Fragment>
-                    <OpenInNew style={openIconStyle} />
+  )
-                  </Link>
-                </Row>
-              </Col>
-            </Row>
-          )) }
-        </Block>
-      </React.Fragment>
-    )
-  }
 }
 
 const OwnerListPage = withStyles(styles)(OwnerListComponent)
@@ -179,11 +168,7 @@ const OwnerListPage = withStyles(styles)(OwnerListComponent)
 const OwnerList = ({ updateInitialProps }: Object, network: string) => (controls: React$Node, { values }: Object) => (
   <React.Fragment>
     <OpenPaper controls={controls} padding={false}>
-      <OwnerListPage
+      <OwnerListPage network={network} updateInitialProps={updateInitialProps} values={values} />
-        network={network}
-        updateInitialProps={updateInitialProps}
-        values={values}
-      />
     </OpenPaper>
   </React.Fragment>
 )

src/routes/load/components/fields.js

@@ -1,4 +1,4 @@
 // @flow
 export const FIELD_LOAD_NAME: string = 'name'
 export const FIELD_LOAD_ADDRESS: string = 'address'
-export const THRESHOLD: Number = 'threshold'
+export const THRESHOLD: string = 'threshold'

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

@@ -23,8 +23,7 @@ import OpenPaper from '~/components/Stepper/OpenPaper'
 import { getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
 import Hairline from '~/components/layout/Hairline'
 import { md, lg, sm } from '~/theme/variables'
-
+import trash from '~/assets/icons/trash.svg'
-const trash = require('../../assets/trash.svg')
 
 type Props = {
   classes: Object,

src/routes/safe/components/Balances/Tokens/index.jsx

@@ -42,7 +42,7 @@ const Tokens = (props: Props) => {
   return (
     <React.Fragment>
       <Row align="center" grow className={classes.heading}>
-        <Paragraph className={classes.manage} noMargin>
+        <Paragraph className={classes.manage} noMargin weight="bolder">
           Manage Tokens
         </Paragraph>
         <IconButton onClick={onClose} disableRipple data-testid={MANAGE_TOKENS_MODAL_CLOSE_BUTTON_TEST_ID}>

src/routes/safe/components/Layout.jsx

@@ -3,10 +3,10 @@ import * as React from 'react'
 import OpenInNew from '@material-ui/icons/OpenInNew'
 import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
+import { withStyles } from '@material-ui/core/styles'
 import Hairline from '~/components/layout/Hairline'
 import Block from '~/components/layout/Block'
 import Identicon from '~/components/Identicon'
-import { withStyles } from '@material-ui/core/styles'
 import Heading from '~/components/layout/Heading'
 import Row from '~/components/layout/Row'
 import Link from '~/components/layout/Link'
@@ -21,10 +21,14 @@ import { copyToClipboard } from '~/utils/clipboard'
 import Balances from './Balances'
 import Settings from './Settings'
 
+export const SETTINGS_TAB_BTN_TESTID = 'settings-tab-btn'
+export const SAFE_VIEW_NAME_HEADING_TESTID = 'safe-name-heading'
+
 type Props = SelectorProps & {
   classes: Object,
   granted: boolean,
   createTransaction: Function,
+  updateSafe: Function,
 }
 
 type State = {
@@ -90,7 +94,15 @@ 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,
+      updateSafe,
     } = this.props
     const { tabIndex } = this.state
 
@@ -107,7 +119,7 @@ class Layout extends React.Component<Props, State> {
           <Identicon address={address} diameter={50} />
           <Block className={classes.name}>
             <Row>
-              <Heading tag="h2" color="secondary">
+              <Heading tag="h2" color="secondary" testId={SAFE_VIEW_NAME_HEADING_TESTID}>
                 {name}
               </Heading>
               {!granted && <Block className={classes.readonly}>Read Only</Block>}
@@ -126,7 +138,7 @@ class Layout extends React.Component<Props, State> {
           <Tabs value={tabIndex} onChange={this.handleChange} indicatorColor="secondary" textColor="secondary">
             <Tab label="Balances" />
             <Tab label="Transactions" />
-            <Tab label="Settings" />
+            <Tab label="Settings" data-testid={SETTINGS_TAB_BTN_TESTID} />
           </Tabs>
         </Row>
         <Hairline color="#c8ced4" />
@@ -148,6 +160,7 @@ class Layout extends React.Component<Props, State> {
             safeAddress={address}
             safeName={name}
             etherScanLink={etherScanLink}
+            updateSafe={updateSafe}
             threshold={safe.threshold}
             owners={safe.owners}
             createTransaction={createTransaction}

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

@@ -0,0 +1,94 @@
+// @flow
+import React 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'
+
+const controlsStyle = {
+  backgroundColor: 'white',
+  padding: sm,
+}
+
+const saveButtonStyle = {
+  marginRight: sm,
+  fontWeight: boldFont,
+}
+
+export const SAFE_NAME_INPUT_TESTID = 'safe-name-input'
+export const SAFE_NAME_SUBMIT_BTN_TESTID = 'change-safe-name-btn'
+
+type Props = {
+  classes: Object,
+  safeAddress: string,
+  safeName: string,
+  updateSafe: Function,
+}
+
+const ChangeSafeName = (props: Props) => {
+  const {
+    classes, safeAddress, safeName, updateSafe,
+  } = props
+
+  const handleSubmit = (values) => {
+    updateSafe({ address: safeAddress, name: values.safeName })
+  }
+
+  return (
+    <React.Fragment>
+      <GnoForm onSubmit={handleSubmit}>
+        {() => (
+          <React.Fragment>
+            <Block className={classes.formContainer}>
+              <Paragraph noMargin className={classes.title} size="lg" weight="bolder">
+                Modify Safe name
+              </Paragraph>
+              <Paragraph size="sm">
+                You can change the name of this Safe. This name is only stored locally and never shared with Gnosis or
+                any third parties.
+              </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}
+                  testId={SAFE_NAME_INPUT_TESTID}
+                />
+              </Block>
+            </Block>
+            <Hairline />
+            <Row style={controlsStyle} align="end" grow>
+              <Col end="xs">
+                <Button
+                  type="submit"
+                  style={saveButtonStyle}
+                  size="small"
+                  variant="contained"
+                  color="primary"
+                  testId={SAFE_NAME_SUBMIT_BTN_TESTID}
+                >
+                  SAVE
+                </Button>
+              </Col>
+            </Row>
+          </React.Fragment>
+        )}
+      </GnoForm>
+    </React.Fragment>
+  )
+}
+
+export default withStyles(styles)(ChangeSafeName)

src/routes/safe/components/Settings/ChangeSafeName/style.js

@@ -0,0 +1,17 @@
+// @flow
+import { lg } from '~/theme/variables'
+
+export const styles = () => ({
+  title: {
+    padding: `${lg} 0 20px`,
+    fontSize: '16px',
+  },
+  formContainer: {
+    padding: '0 20px',
+    minHeight: '369px',
+  },
+  root: {
+    display: 'flex',
+    maxWidth: '460px',
+  },
+})

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

@@ -18,7 +18,7 @@ import Link from '~/components/layout/Link'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
 import actions, { type Actions } from './actions'
-import { lg, md, secondary } from '~/theme/variables'
+import { secondary } from '~/theme/variables'
 import { styles } from './style'
 
 const openIconStyle = {
@@ -36,23 +36,12 @@ type Props = Actions & {
 }
 
 const RemoveSafeComponent = ({
-  onClose,
+  onClose, isOpen, classes, safeAddress, etherScanLink, safeName, removeSafe,
-  isOpen,
-  classes,
-  safeAddress,
-  etherScanLink,
-  safeName,
-  removeSafe,
 }: Props) => (
-  <Modal
+  <Modal title="Remove Safe" description="Remove the selected Safe" handleClose={onClose} open={isOpen}>
-    title="Remove Safe"
-    description="Remove the selected Safe"
-    handleClose={onClose}
-    open={isOpen}
-  >
     <Row align="center" grow className={classes.heading}>
-      <Paragraph className={classes.manage} noMargin>
+      <Paragraph className={classes.manage} noMargin weight="bolder">
-          Remove Safe
+        Remove Safe
       </Paragraph>
       <IconButton onClick={onClose} disableRipple>
         <Close className={classes.close} />
@@ -66,7 +55,7 @@ const RemoveSafeComponent = ({
         </Col>
         <Col xs={11}>
           <Block className={classNames(classes.name, classes.userName)}>
-            <Paragraph size="lg" noMargin>
+            <Paragraph size="lg" noMargin weight="bolder">
               {safeName}
             </Paragraph>
             <Block align="center" className={classes.user}>
@@ -83,16 +72,16 @@ const RemoveSafeComponent = ({
       <Hairline />
       <Row className={classes.description}>
         <Paragraph noMargin>
-            Removing a Safe only removes it from your interface.
+          Removing a Safe only removes it from your interface.
-            <b>It does not delete the Safe</b>.
+          <b>It does not delete the Safe</b>
-            You can always add it back using the Safe's address.
+. You can always add it back using the Safe&apos;s address.
         </Paragraph>
       </Row>
     </Block>
     <Hairline />
     <Row align="center" className={classes.buttonRow}>
       <Button className={classes.button} minWidth={140} onClick={onClose}>
-          Cancel
+        Cancel
       </Button>
       <Button
         type="submit"
@@ -105,7 +94,7 @@ const RemoveSafeComponent = ({
         variant="contained"
         minWidth={140}
       >
-          Remove
+        Remove
       </Button>
     </Row>
   </Modal>

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

@@ -14,7 +14,6 @@ import ChangeThreshold from './ChangeThreshold'
 import type { Owner } from '~/routes/safe/store/models/owner'
 import { styles } from './style'
 import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
-import { ZERO_ADDRESS } from '~/logic/wallets/ethAddresses'
 
 type Props = {
   owners: List<Owner>,

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

@@ -1,56 +0,0 @@
-// @flow
-import * as React from 'react'
-import { withStyles } from '@material-ui/core/styles'
-import Block from '~/components/layout/Block'
-import Col from '~/components/layout/Col'
-import Row from '~/components/layout/Row'
-import Paragraph from '~/components/layout/Paragraph'
-import Button from '~/components/layout/Button'
-import { sm, boldFont } from '~/theme/variables'
-import { styles } from './style'
-
-const controlsStyle = {
-  backgroundColor: 'white',
-  padding: sm,
-}
-
-const saveButtonStyle = {
-  marginRight: sm,
-  fontWeight: boldFont,
-}
-
-type Props = {
-  classes: Object,
-}
-
-class UpdateSafeName extends React.Component<Props, State> {
-  render() {
-    const { classes } = this.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>
-    )
-  }
-}
-
-export default withStyles(styles)(UpdateSafeName)

src/routes/safe/components/Settings/UpdateSafeName/style.js

@@ -1,4 +0,0 @@
-// @flow
-import { lg, border } from '~/theme/variables'
-
-export const styles = () => ({})

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

@@ -9,7 +9,8 @@ import Row from '~/components/layout/Row'
 import RemoveSafeModal from './RemoveSafeModal'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
-import type { Owner } from '~/routes/safe/store/models/owner'
+import { type Owner } from '~/routes/safe/store/models/owner'
+import ChangeSafeName from './ChangeSafeName'
 import ThresholdSettings from './ThresholdSettings'
 import { styles } from './style'
 
@@ -27,6 +28,7 @@ type Props = {
   owners: List<Owner>,
   threshold: number,
   createTransaction: Function,
+  updateSafe: Function,
 }
 
 type Action = 'RemoveSafe'
@@ -52,14 +54,24 @@ 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,
+      updateSafe,
+      owners,
+      threshold,
+      createTransaction,
     } = this.props
 
     return (
       <React.Fragment>
         <Row align="center" className={classes.message}>
           <Col xs={6}>
-            <Paragraph className={classes.settings}>Settings</Paragraph>
+            <Paragraph className={classes.settings} size="lg" weight="bolder">
+              Settings
+            </Paragraph>
           </Col>
           <Col xs={6} end="sm">
             <Paragraph noMargin size="md" color="error" className={classes.links} onClick={this.onShow('RemoveSafe')}>
@@ -113,7 +125,9 @@ 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 && (
+                <ChangeSafeName safeAddress={safeAddress} safeName={safeName} updateSafe={updateSafe} />
+              )}
               {granted && menuOptionIndex === 2 && <p>To be done</p>}
               {granted && menuOptionIndex === 3 && (
                 <ThresholdSettings

src/routes/safe/components/Settings/style.js

@@ -1,9 +1,9 @@
 // @flow
 import {
-  sm, md, lg, border, secondary, bolderFont,
+  sm, lg, border, secondary, bolderFont,
 } from '~/theme/variables'
 
-export const styles = (theme: Object) => ({
+export const styles = () => ({
   root: {
     backgroundColor: 'white',
     boxShadow: '0 -1px 4px 0 rgba(74, 85, 121, 0.5)',

src/routes/safe/container/actions.js

@@ -2,15 +2,18 @@
 import fetchSafe from '~/routes/safe/store/actions/fetchSafe'
 import fetchTokenBalances from '~/routes/safe/store/actions/fetchTokenBalances'
 import createTransaction from '~/routes/safe/store/actions/createTransaction'
+import updateSafe from '~/routes/safe/store/actions/updateSafe'
 
 export type Actions = {
   fetchSafe: typeof fetchSafe,
   fetchTokenBalances: typeof fetchTokenBalances,
   createTransaction: typeof createTransaction,
+  updateSafe: typeof updateSafe,
 }
 
 export default {
   fetchSafe,
   fetchTokenBalances,
   createTransaction,
+  updateSafe,
 }

src/routes/safe/container/index.jsx

@@ -29,8 +29,9 @@ class SafeView extends React.Component<Props> {
 
   componentDidUpdate(prevProps) {
     const { activeTokens } = this.props
+    const oldActiveTokensSize = prevProps.activeTokens.size
 
-    if (activeTokens.size > prevProps.activeTokens.size) {
+    if (oldActiveTokensSize > 0 && activeTokens.size > oldActiveTokensSize) {
       this.checkForUpdates()
     }
   }
@@ -52,7 +53,15 @@ class SafeView extends React.Component<Props> {
 
   render() {
     const {
-      safe, provider, activeTokens, granted, userAddress, network, tokens, createTransaction,
+      safe,
+      provider,
+      activeTokens,
+      granted,
+      userAddress,
+      network,
+      tokens,
+      createTransaction,
+      updateSafe,
     } = this.props
 
     return (
@@ -66,6 +75,7 @@ class SafeView extends React.Component<Props> {
           network={network}
           granted={granted}
           createTransaction={createTransaction}
+          updateSafe={updateSafe}
         />
       </Page>
     )

src/test/safe.dom.load.test.js

@@ -61,6 +61,10 @@ describe('DOM > Feature > LOAD a safe', () => {
     fireEvent.submit(form)
     await sleep(400)
 
+    // submit form with owners names
+    fireEvent.submit(form)
+    await sleep(400)
+
     // Submit
     fireEvent.submit(form)
     const deployedAddress = await whenSafeDeployed()

src/test/safe.dom.settings.test.js

@@ -0,0 +1,46 @@
+// @flow
+import { fireEvent, cleanup } from '@testing-library/react'
+import { aNewStore } from '~/store'
+import { aMinedSafe } from '~/test/builder/safe.redux.builder'
+import { renderSafeView } from '~/test/builder/safe.dom.utils'
+import { sleep } from '~/utils/timer'
+import 'jest-dom/extend-expect'
+import { SETTINGS_TAB_BTN_TESTID, SAFE_VIEW_NAME_HEADING_TESTID } from '~/routes/safe/components/Layout'
+import { SAFE_NAME_INPUT_TESTID, SAFE_NAME_SUBMIT_BTN_TESTID } from '~/routes/safe/components/Settings/ChangeSafeName'
+
+afterEach(cleanup)
+
+describe('DOM > Feature > Settings', () => {
+  let store
+  let safeAddress
+  beforeEach(async () => {
+    store = aNewStore()
+    // using 4th account because other accounts were used in other tests and paid gas
+    safeAddress = await aMinedSafe(store)
+  })
+
+  it('Changes safe name', async () => {
+    const INITIAL_NAME = 'Safe Name'
+    const NEW_NAME = 'NEW SAFE NAME'
+
+    const SafeDom = renderSafeView(store, safeAddress)
+    await sleep(1300)
+
+    const safeNameHeading = SafeDom.getByTestId(SAFE_VIEW_NAME_HEADING_TESTID)
+    expect(safeNameHeading).toHaveTextContent(INITIAL_NAME)
+
+    // Open settings tab
+    // Safe name setting screen should be pre-selected
+    const settingsBtn = SafeDom.getByTestId(SETTINGS_TAB_BTN_TESTID)
+    fireEvent.click(settingsBtn)
+
+    // Change the name
+    const safeNameInput = SafeDom.getByTestId(SAFE_NAME_INPUT_TESTID)
+    const submitBtn = SafeDom.getByTestId(SAFE_NAME_SUBMIT_BTN_TESTID)
+    fireEvent.change(safeNameInput, { target: { value: NEW_NAME } })
+    fireEvent.click(submitBtn)
+
+    // Check if the name changed
+    expect(safeNameHeading).toHaveTextContent(NEW_NAME)
+  })
+})