diff --git a/src/routes/load/components/Layout.jsx b/src/routes/load/components/Layout.jsx index 167ce9c8..43e65210 100644 --- a/src/routes/load/components/Layout.jsx +++ b/src/routes/load/components/Layout.jsx @@ -7,12 +7,13 @@ import Heading from '~/components/layout/Heading' import Row from '~/components/layout/Row' import IconButton from '@material-ui/core/IconButton' import ReviewInformation from '~/routes/load/components/ReviewInformation' +import OwnerList from '~/routes/load/components/OwnerList' import DetailsForm, { safeFieldsValidation } from '~/routes/load/components/DetailsForm' import { history } from '~/store' import { secondary } from '~/theme/variables' import { type SelectorProps } from '~/routes/load/container/selector' -const getSteps = () => ['Details', 'Review'] +const getSteps = () => ['Details', 'Owners', 'Review'] type Props = SelectorProps & { onLoadSafeSubmit: (values: Object) => Promise, @@ -45,13 +46,14 @@ const Layout = ({ {DetailsForm} + {OwnerList} {ReviewInformation} ) : ( -
No metamask detected
+
No account detected
)} ) diff --git a/src/routes/load/components/OwnerList/index.jsx b/src/routes/load/components/OwnerList/index.jsx new file mode 100644 index 00000000..348c0717 --- /dev/null +++ b/src/routes/load/components/OwnerList/index.jsx @@ -0,0 +1,180 @@ +// @flow +import * as React from 'react' +import Block from '~/components/layout/Block' +import { withStyles } from '@material-ui/core/styles' +import Field from '~/components/forms/Field' +import { required } from '~/components/forms/validator' +import TextField from '~/components/forms/TextField' +import OpenInNew from '@material-ui/icons/OpenInNew' +import Identicon from '~/components/Identicon' +import OpenPaper from '~/components/Stepper/OpenPaper' +import Col from '~/components/layout/Col' +import Row from '~/components/layout/Row' +import Link from '~/components/layout/Link' +import Paragraph from '~/components/layout/Paragraph' +import Hairline from '~/components/layout/Hairline' +import { + xs, sm, md, lg, border, secondary, +} from '~/theme/variables' +import { getOwnerNameBy } from '~/routes/open/components/fields' +import { getEtherScanLink, getWeb3 } from '~/logic/wallets/getWeb3' +import { FIELD_LOAD_ADDRESS } from '~/routes/load/components/fields' +import { getGnosisSafeContract } from '~/logic/contracts/safeContracts' + + +const openIconStyle = { + height: '16px', + color: secondary, +} + +const styles = () => ({ + details: { + padding: lg, + borderRight: `solid 1px ${border}`, + height: '100%', + }, + owners: { + display: 'flex', + justifyContent: 'flex-start', + }, + ownerNames: { + maxWidth: '400px', + }, + ownerAddresses: { + alignItems: 'center', + marginLeft: `${sm}`, + }, + address: { + paddingLeft: '6px', + }, + open: { + paddingLeft: sm, + width: 'auto', + '&:hover': { + cursor: 'pointer', + }, + }, + title: { + padding: `${md} ${lg}`, + }, + owner: { + padding: `0 ${lg}`, + marginBottom: '12px', + }, + header: { + padding: `${sm} ${lg}`, + }, + name: { + marginRight: `${sm}`, + }, +}) + +type LayoutProps = { + network: string, +} + +type Props = LayoutProps & { + values: Object, + classes: Object, +} + +type State = { + owners: Array, +} + +class OwnerListComponent extends React.PureComponent { + state = { + owners: [], + } + + mounted = false + + componentDidMount = async () => { + this.mounted = true + const { values } = this.props + + const safeAddress = values[FIELD_LOAD_ADDRESS] + const web3 = getWeb3() + + const GnosisSafe = getGnosisSafeContract(web3) + const gnosisSafe = await GnosisSafe.at(safeAddress) + const owners = await gnosisSafe.getOwners() + + if (!owners) { + return + } + + if (this.mounted) { + this.setState(() => ({ owners: owners.sort() })) + } + } + + componentWillUnmount() { + this.mounted = false + } + + render() { + const { network, classes } = this.props + const { owners } = this.state + + return ( + + + + {`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`} + + + + + NAME + ADDRESS + + + + { owners.map((x, index) => ( + + + + + + + + + {owners[index]} + + + + + + + + )) } + + + ) + } +} + +const OwnerListPage = withStyles(styles)(OwnerListComponent) + +const OwnerList = (network: string) => (controls: React$Node, { values }: Object) => ( + + + + + +) + +export default OwnerList