Styles on the Owner Page

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

@@ -3,40 +3,84 @@ import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
-import { required } from '~/components/forms/validator'
+import { required, composeValidators, uniqueAddress, mustBeEthereumAddress } from '~/components/forms/validator'
 import Block from '~/components/layout/Block'
+import Button from '~/components/layout/Button'
 import Row from '~/components/layout/Row'
 import Col from '~/components/layout/Col'
-import { FIELD_NAME } from '~/routes/open/components/fields'
+import IconButton from '@material-ui/core/IconButton'
+import Delete from '@material-ui/icons/Delete'
+import InputAdornment from '@material-ui/core/InputAdornment'
+import CheckCircle from '@material-ui/icons/CheckCircle'
+import { getOwnerNameBy, getOwnerAddressBy } from '~/routes/open/components/fields'
 import Paragraph from '~/components/layout/Paragraph'
 import OpenPaper from '~/components/Stepper/OpenPaper'
 import { getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
 import Hairline from '~/components/layout/Hairline'
-import { lg } from '~/theme/variables'
+import { md, lg, sm } from '~/theme/variables'
 
 type Props = {
   classes: Object,
+  otherAccounts: string[],
+  errors: Object,
+}
+
+type State = {
+  numOwners: number,
 }
 
 const styles = () => ({
   root: {
     display: 'flex',
   },
-  padding: {
+  title: {
-    padding: lg,
+    padding: `${md} ${lg}`,
+  },
+  owner: {
+    padding: `${sm} ${lg}`,
+  },
+  name: {
+    marginRight: `${sm}`,
+  },
+  trash: {
+    top: '5px',
+  },
+  add: {
+    justifyContent: 'center',
+  },
+  check: {
+    color: '#03AE60',
+    height: '20px',
   },
 })
 
-const SafeOwners = ({ classes }: Props) => (
+const getAddressValidators = (addresses: string[], position: number) => {
+  const copy = addresses.slice()
+  copy.splice(position, 1)
+
+  return composeValidators(required, mustBeEthereumAddress, uniqueAddress(copy))
+}
+
+const noErrorsOn = (name: string, errors: Object) => errors[name] === undefined
+
+class SafeOwners extends React.Component<Props, State> {
+  state = {
+    numOwners: 3,
+  }
+
+  render() {
+    const { classes, errors, otherAccounts } = this.props
+    const { numOwners } = this.state
+
+    return (
       <React.Fragment>
-    <Block className={classes.padding}>
+        <Block className={classes.title}>
           <Paragraph noMargin size="md" color="primary" weight="light">
             Specify the owners of the Safe.
           </Paragraph>
         </Block>
-    <Block margin="md">
+        <Hairline />
-      <Hairline margin="sm" />
+        <Row className={classes.owner}>
-      <Row className={classes.padding}>
           <Col xs={4}>
             NAME
           </Col>
@@ -44,34 +88,72 @@ const SafeOwners = ({ classes }: Props) => (
             ADDRESS
           </Col>
         </Row>
-      <Hairline margin="sm" />
+        <Hairline />
-    </Block>
+        { [...Array(Number(numOwners))].map((x, index) => {
-    <Block margin="md">
+          const addressName = getOwnerAddressBy(index)
-      <Paragraph size="md" color="primary" weight="bolder">
+
-        &#9679; My Safe is a smart contract on the Ethereum blockchain.
+          return (
-      </Paragraph>
+            <Row key={`owner${(index)}`} className={classes.owner}>
-    </Block>
+              <Col xs={4}>
-    <Block margin="lg" className={classes.root}>
                 <Field
-        name={FIELD_NAME}
+                  className={classes.name}
+                  name={getOwnerNameBy(index)}
                   component={TextField}
                   type="text"
                   validate={required}
-        placeholder="Name of the new Safe"
+                  placeholder="Owner Name*"
-        text="Safe name"
+                  text="Owner Name"
                 />
-    </Block>
+              </Col>
+              <Col xs={7}>
+                <Field
+                  name={addressName}
+                  component={TextField}
+                  inputAdornment={noErrorsOn(addressName, errors) && {
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <CheckCircle className={classes.check} />
+                      </InputAdornment>
+                    ),
+                  }}
+                  type="text"
+                  validate={getAddressValidators(otherAccounts, index)}
+                  placeholder="Owner Address*"
+                  text="Owner Address"
+                />
+              </Col>
+              <Col xs={1} center="xs" middle="xs">
+                { index > 0 &&
+                  <IconButton aria-label="Delete" onClick={undefined} className={classes.trash}>
+                    <Delete />
+                  </IconButton>
+                }
+              </Col>
+            </Row>
+          )
+        }) }
+        <Row align="center" grow className={classes.add} margin="xl">
+          <Button color="secondary">
+            + ADD ANOTHER OWNER
+          </Button>
+        </Row>
       </React.Fragment>
     )
+  }
+}
 
 const SafeOwnersForm = withStyles(styles)(SafeOwners)
 
-const SafeOwnersPage = () => (controls: React$Node, { values }: Object) => (
+const SafeOwnersPage = () => (controls: React$Node, moe: Object) => {
+  const { values, errors } = moe
+
+  return (
     <React.Fragment>
       <OpenPaper controls={controls} padding={false}>
-      <SafeOwnersForm numOwners={values.owners} otherAccounts={getAccountsFrom(values)} />
+        <SafeOwnersForm otherAccounts={getAccountsFrom(values)} errors={errors} />
       </OpenPaper>
     </React.Fragment>
   )
+}
 
 export default SafeOwnersPage