status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

rewrite OwnersList with hooks

This commit is contained in:
Mikhail Mikheev 2019-06-26 15:55:08 +04:00
parent f8e9b4dfb3
commit ff9448c4db
1 changed files with 70 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/routes/load/components/OwnerList/index.jsx
View File

@ -1,11 +1,11 @@
// @flow // @flow
import * as React from 'react' import React, { useState, useEffect } from 'react'
import Block from '~/components/layout/Block'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import OpenInNew from '@material-ui/icons/OpenInNew'
import Block from '~/components/layout/Block'
import Field from '~/components/forms/Field' import Field from '~/components/forms/Field'
import { required } from '~/components/forms/validator' import { required } from '~/components/forms/validator'
import TextField from '~/components/forms/TextField' import TextField from '~/components/forms/TextField'
import OpenInNew from '@material-ui/icons/OpenInNew'
import Identicon from '~/components/Identicon' import Identicon from '~/components/Identicon'
import OpenPaper from '~/components/Stepper/OpenPaper' import OpenPaper from '~/components/Stepper/OpenPaper'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
@ -78,10 +78,6 @@ type Props = LayoutProps & {
updateInitialProps: (initialValues: Object) => void, updateInitialProps: (initialValues: Object) => void,
} }
type State = {
owners: Array<string>,
}
const calculateSafeValues = (owners: Array<string>, threshold: Number, values: Object) => { const calculateSafeValues = (owners: Array<string>, threshold: Number, values: Object) => {
const initialValues = { ...values } const initialValues = { ...values }
for (let i = 0; i < owners.length; i += 1) { for (let i = 0; i < owners.length; i += 1) {
@ -91,88 +87,80 @@ const calculateSafeValues = (owners: Array<string>, threshold: Number, values: O
return initialValues return initialValues
} }
class OwnerListComponent extends React.PureComponent<Props, State> { const OwnerListComponent = (props: Props) => {
static whyDidYouRender = true const [owners, setOwners] = useState<Array<string>>([])
const {
values, updateInitialProps, network, classes,
} = props
state = { useEffect(() => {
owners: [], let isCurrent = true
}
mounted = false const fetchSafe = async () => {
const safeAddress = values[FIELD_LOAD_ADDRESS]
const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
const safeOwners = await gnosisSafe.getOwners()
const threshold = await gnosisSafe.getThreshold()
componentDidMount = async () => { if (isCurrent && owners) {
this.mounted = true const sortedOwners = safeOwners.sort()
const { values, updateInitialProps } = this.props const initialValues = calculateSafeValues(sortedOwners, threshold, values)
const safeAddress = values[FIELD_LOAD_ADDRESS] updateInitialProps(initialValues)
setOwners(sortedOwners)
const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress) }
const owners = await gnosisSafe.getOwners()
const threshold = await gnosisSafe.getThreshold()
if (!owners) {
return
} }
if (this.mounted) { fetchSafe()
const initialValues = calculateSafeValues(owners.sort(), threshold, values)
updateInitialProps(initialValues) return () => {
this.setState(() => ({ owners: owners.sort() })) isCurrent = false
} }
} }, [])
componentWillUnmount() { return (
this.mounted = false <React.Fragment>
} <Block className={classes.title}>
<Paragraph noMargin size="md" color="primary">
render() { {`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`}
const { network, classes } = this.props </Paragraph>
const { owners } = this.state </Block>
<Hairline />
return ( <Row className={classes.header}>
<React.Fragment> <Col xs={4}>NAME</Col>
<Block className={classes.title}> <Col xs={8}>ADDRESS</Col>
<Paragraph noMargin size="md" color="primary"> </Row>
{`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`} <Hairline />
</Paragraph> <Block margin="md" padding="md">
</Block> {owners.map((address, index) => (
<Hairline /> <Row key={address} className={classes.owner}>
<Row className={classes.header}> <Col xs={4}>
<Col xs={4}>NAME</Col> <Field
<Col xs={8}>ADDRESS</Col> className={classes.name}
</Row> name={getOwnerNameBy(index)}
<Hairline /> component={TextField}
<Block margin="md" padding="md"> type="text"
{owners.map((address, index) => ( validate={required}
<Row key={address} className={classes.owner}> initialValue={`Owner #${index + 1}`}
<Col xs={4}> placeholder="Owner Name*"
<Field text="Owner Name"
className={classes.name} />
name={getOwnerNameBy(index)} </Col>
component={TextField} <Col xs={7}>
type="text" <Row className={classes.ownerAddresses}>
validate={required} <Identicon address={address} diameter={32} />
initialValue={`Owner #${index + 1}`} <Paragraph size="md" color="disabled" noMargin className={classes.address}>
placeholder="Owner Name*" {address}
text="Owner Name" </Paragraph>
/> <Link className={classes.open} to={getEtherScanLink(address, network)} target="_blank">
</Col> <OpenInNew style={openIconStyle} />
<Col xs={7}> </Link>
<Row className={classes.ownerAddresses}> </Row>
<Identicon address={address} diameter={32} /> </Col>
<Paragraph size="md" color="disabled" noMargin className={classes.address}> </Row>
{address} ))}
</Paragraph> </Block>
<Link className={classes.open} to={getEtherScanLink(address, network)} target="_blank"> </React.Fragment>
<OpenInNew style={openIconStyle} /> )
</Link>
</Row>
</Col>
</Row>
))}
</Block>
</React.Fragment>
)
}
} }
const OwnerListPage = withStyles(styles)(OwnerListComponent) const OwnerListPage = withStyles(styles)(OwnerListComponent)
@ -185,6 +173,4 @@ const OwnerList = ({ updateInitialProps }: Object, network: string) => (controls
</React.Fragment> </React.Fragment>
) )
OwnerList.whyDidYouRender = true
export default OwnerList export default OwnerList