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