Creating SafesOwnersPage WIP
This commit is contained in:
parent
f8784a706b
commit
61ed0f1889
|
@ -0,0 +1,77 @@
|
|||
// @flow
|
||||
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 Block from '~/components/layout/Block'
|
||||
import Row from '~/components/layout/Row'
|
||||
import Col from '~/components/layout/Col'
|
||||
import { FIELD_NAME } 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'
|
||||
|
||||
type Props = {
|
||||
classes: Object,
|
||||
}
|
||||
|
||||
const styles = () => ({
|
||||
root: {
|
||||
display: 'flex',
|
||||
},
|
||||
padding: {
|
||||
padding: lg,
|
||||
},
|
||||
})
|
||||
|
||||
const SafeOwners = ({ classes }: Props) => (
|
||||
<React.Fragment>
|
||||
<Block className={classes.padding}>
|
||||
<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}>
|
||||
<Col xs={4}>
|
||||
NAME
|
||||
</Col>
|
||||
<Col xs={8}>
|
||||
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}>
|
||||
<Field
|
||||
name={FIELD_NAME}
|
||||
component={TextField}
|
||||
type="text"
|
||||
validate={required}
|
||||
placeholder="Name of the new Safe"
|
||||
text="Safe name"
|
||||
/>
|
||||
</Block>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
const SafeOwnersForm = withStyles(styles)(SafeOwners)
|
||||
|
||||
const SafeOwnersPage = () => (controls: React$Node, { values }: Object) => (
|
||||
<React.Fragment>
|
||||
<OpenPaper controls={controls} padding={false}>
|
||||
<SafeOwnersForm numOwners={values.owners} otherAccounts={getAccountsFrom(values)} />
|
||||
</OpenPaper>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export default SafeOwnersPage
|
Loading…
Reference in New Issue