Create edit owner modal window

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

@@ -0,0 +1,140 @@
+// @flow
+import React from 'react'
+import { connect } from 'react-redux'
+import { List } from 'immutable'
+import { withStyles } from '@material-ui/core/styles'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import Row from '~/components/layout/Row'
+import Col from '~/components/layout/Col'
+import Link from '~/components/layout/Link'
+import Block from '~/components/layout/Block'
+import GnoForm from '~/components/forms/GnoForm'
+import Button from '~/components/layout/Button'
+import Hairline from '~/components/layout/Hairline'
+import Field from '~/components/forms/Field'
+import TextField from '~/components/forms/TextField'
+import Paragraph from '~/components/layout/Paragraph'
+import Identicon from '~/components/Identicon'
+import IconButton from '@material-ui/core/IconButton'
+import Close from '@material-ui/icons/Close'
+import { getEtherScanLink } from '~/logic/wallets/getWeb3'
+import type { Owner } from '~/routes/safe/store/models/owner'
+import { makeOwner } from '~/routes/safe/store/models/owner'
+import {
+  composeValidators,
+  required,
+  minMaxLength,
+} from '~/components/forms/validator'
+import Modal from '~/components/Modal'
+import { setOwners } from '~/logic/safe/utils'
+import { styles } from './style'
+import { secondary } from '~/theme/variables'
+
+const openIconStyle = {
+  height: '16px',
+  color: secondary,
+}
+
+const stylesModal = () => ({
+  smallerModalWindow: {
+    height: 'auto',
+    position: 'static',
+  },
+})
+
+type Props = {
+  onClose: () => void,
+  classes: Object,
+  isOpen: boolean,
+  safeAddress: string,
+  ownerAddress: string,
+  owners: List<Owner>,
+  network: string,
+}
+
+const EditOwnerComponent = ({
+  onClose,
+  isOpen,
+  classes,
+  safeAddress,
+  ownerAddress,
+  owners,
+  network,
+}: Props) => {
+  const handleSubmit = (values) => {
+    const updatedOwners = owners.filter(o => o.address !== ownerAddress).push(
+      makeOwner({ name: values.ownerName, address: ownerAddress }),
+    )
+    setOwners(safeAddress, updatedOwners)
+    onClose()
+  }
+
+  return (
+    <Modal
+      title="Edit owner from Safe"
+      description="Edit owner from Safe"
+      handleClose={onClose}
+      open={isOpen}
+      paperClassName={stylesModal.smallerModalWindow}
+    >
+      <Row align="center" grow className={classes.heading}>
+        <Paragraph className={classes.manage} noMargin weight="bolder">
+            Edit owner name
+        </Paragraph>
+        <IconButton onClick={onClose} disableRipple>
+          <Close className={classes.close} />
+        </IconButton>
+      </Row>
+      <Hairline />
+      <GnoForm onSubmit={handleSubmit}>
+        {(...args) => (
+          <React.Fragment>
+            <Block className={classes.container}>
+              <Row margin="md">
+                <Field
+                  name="ownerName"
+                  component={TextField}
+                  type="text"
+                  validate={composeValidators(required, minMaxLength(1, 50))}
+                  placeholder="Owner name*"
+                  text="Owner name*"
+                  className={classes.addressInput}
+                />
+              </Row>
+              <Row>
+                <Block align="center" className={classes.user}>
+                  <Identicon address={ownerAddress} diameter={32} />
+                  <Paragraph style={{ marginLeft: 10 }} size="md" color="disabled" noMargin>
+                    {ownerAddress}
+                  </Paragraph>
+                  <Link className={classes.open} to={getEtherScanLink(ownerAddress, network)} target="_blank">
+                    <OpenInNew style={openIconStyle} />
+                  </Link>
+                </Block>
+              </Row>
+            </Block>
+            <Hairline />
+            <Row align="center" className={classes.buttonRow}>
+              <Button className={classes.button} minWidth={140} onClick={onClose}>
+                  Cancel
+              </Button>
+              <Button
+                type="submit"
+                className={classes.button}
+                variant="contained"
+                minWidth={140}
+                color="primary"
+              >
+                  Save
+              </Button>
+            </Row>
+          </React.Fragment>
+        )}
+      </GnoForm>
+    </Modal>
+  )
+}
+
+const EditOwnerModal = withStyles(styles)(EditOwnerComponent)
+
+export default EditOwnerModal

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

@@ -0,0 +1,39 @@
+// @flow
+import {
+  lg, md, sm, error, background,
+} from '~/theme/variables'
+
+export const styles = (theme: Object) => ({
+  heading: {
+    padding: `${sm} ${lg}`,
+    justifyContent: 'space-between',
+    maxHeight: '75px',
+    boxSizing: 'border-box',
+  },
+  manage: {
+    fontSize: '24px',
+  },
+  container: {
+    padding: `${md} ${lg}`,
+    paddingBottom: '40px',
+  },
+  close: {
+    height: '35px',
+    width: '35px',
+  },
+  buttonRow: {
+    height: '84px',
+    justifyContent: 'center',
+  },
+  buttonEdit: {
+    color: '#fff',
+    backgroundColor: error,
+  },
+  open: {
+    paddingLeft: sm,
+    width: 'auto',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+})

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

@@ -22,6 +22,7 @@ import Button from '~/components/layout/Button'
 import AddOwnerModal from './AddOwnerModal'
 import RemoveOwnerModal from './RemoveOwnerModal'
 import ReplaceOwnerModal from './ReplaceOwnerModal'
+import EditOwnerModal from './EditOwnerModal'
 import OwnerAddressTableCell from './OwnerAddressTableCell'
 import type { Owner } from '~/routes/safe/store/models/owner'
 import {
@@ -62,6 +63,7 @@ class ManageOwners extends React.Component<Props, State> {
     showAddOwner: false,
     showRemoveOwner: false,
     showReplaceOwner: false,
+    showEditOwner: false,
   }
 
   onShow = (action: Action, row?: Object) => () => {
@@ -95,6 +97,7 @@ class ManageOwners extends React.Component<Props, State> {
       showAddOwner,
       showRemoveOwner,
       showReplaceOwner,
+      showEditOwner,
       selectedOwnerName,
       selectedOwnerAddress,
     } = this.state
@@ -185,6 +188,14 @@ class ManageOwners extends React.Component<Props, State> {
           userAddress={userAddress}
           createTransaction={createTransaction}
         />
+        <EditOwnerModal
+          onClose={this.onHide('EditOwner')}
+          isOpen={showEditOwner}
+          safeAddress={safeAddress}
+          ownerAddress={selectedOwnerAddress}
+          owners={owners}
+          network={network}
+        />
       </React.Fragment>
     )
   }