diff --git a/src/routes/open/components/SafeOwnersForm/index.jsx b/src/routes/open/components/SafeOwnersForm/index.jsx
index 83f4247a..0269726b 100644
--- a/src/routes/open/components/SafeOwnersForm/index.jsx
+++ b/src/routes/open/components/SafeOwnersForm/index.jsx
@@ -3,75 +3,157 @@ 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: {
- padding: lg,
+ title: {
+ 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) => (
-
-
-
- Specify the owners of the Safe.
-
-
-
-
-
-
- NAME
-
-
- ADDRESS
-
-
-
-
-
-
- ● My Safe is a smart contract on the Ethereum blockchain.
-
-
-
-
-
-
-)
+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 {
+ state = {
+ numOwners: 3,
+ }
+
+ render() {
+ const { classes, errors, otherAccounts } = this.props
+ const { numOwners } = this.state
+
+ return (
+
+
+
+ Specify the owners of the Safe.
+
+
+
+
+
+ NAME
+
+
+ ADDRESS
+
+
+
+ { [...Array(Number(numOwners))].map((x, index) => {
+ const addressName = getOwnerAddressBy(index)
+
+ return (
+
+
+
+
+
+
+
+
+ ),
+ }}
+ type="text"
+ validate={getAddressValidators(otherAccounts, index)}
+ placeholder="Owner Address*"
+ text="Owner Address"
+ />
+
+
+ { index > 0 &&
+
+
+
+ }
+
+
+ )
+ }) }
+
+
+
+
+ )
+ }
+}
const SafeOwnersForm = withStyles(styles)(SafeOwners)
-const SafeOwnersPage = () => (controls: React$Node, { values }: Object) => (
-
-
-
-
-
-)
+const SafeOwnersPage = () => (controls: React$Node, moe: Object) => {
+ const { values, errors } = moe
+
+ return (
+
+
+
+
+
+ )
+}
export default SafeOwnersPage