Styles on the Owner Page
This commit is contained in:
apanizo
parent
9f27f408a2
commit
af0930a02f
|
|
@ -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: {
|
||||
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) => (
|
||||
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 margin="sm" />
|
||||
<Row className={classes.padding}>
|
||||
<Hairline />
|
||||
<Row className={classes.owner}>
|
||||
<Col xs={4}>
|
||||
NAME
|
||||
</Col>
|
||||
|
|
@ -44,34 +88,72 @@ const SafeOwners = ({ classes }: Props) => (
|
|||
ADDRESS
|
||||
</Col>
|
||||
</Row>
|
||||
<Hairline margin="sm" />
|
||||
</Block>
|
||||
<Block margin="md">
|
||||
<Paragraph size="md" color="primary" weight="bolder">
|
||||
● My Safe is a smart contract on the Ethereum blockchain.
|
||||
</Paragraph>
|
||||
</Block>
|
||||
<Block margin="lg" className={classes.root}>
|
||||
<Hairline />
|
||||
{ [...Array(Number(numOwners))].map((x, index) => {
|
||||
const addressName = getOwnerAddressBy(index)
|
||||
|
||||
return (
|
||||
<Row key={`owner${(index)}`} className={classes.owner}>
|
||||
<Col xs={4}>
|
||||
<Field
|
||||
name={FIELD_NAME}
|
||||
className={classes.name}
|
||||
name={getOwnerNameBy(index)}
|
||||
component={TextField}
|
||||
type="text"
|
||||
validate={required}
|
||||
placeholder="Name of the new Safe"
|
||||
text="Safe name"
|
||||
placeholder="Owner 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
|
||||
|
|
|
|||
Loading…
Reference in New Issue