diff --git a/src/routes/open/components/Layout.jsx b/src/routes/open/components/Layout.jsx index 0c9f4e9a..03441379 100644 --- a/src/routes/open/components/Layout.jsx +++ b/src/routes/open/components/Layout.jsx @@ -7,20 +7,21 @@ import Row from '~/components/layout/Row' import IconButton from '@material-ui/core/IconButton' import Review from '~/routes/open/components/ReviewInformation' import ChevronLeft from '@material-ui/icons/ChevronLeft' -import SafeFields, { safeFieldsValidation } from '~/routes/open/components/SafeForm' import SafeNameField from '~/routes/open/components/SafeNameForm' +import SafeThresholdField, { safeFieldsValidation } from '~/routes/open/components/SafeThresholdForm' import SafeOwnersFields from '~/routes/open/components/SafeOwnersForm' -import { getOwnerNameBy, getOwnerAddressBy } from '~/routes/open/components/fields' +import { getOwnerNameBy, getOwnerAddressBy, FIELD_CONFIRMATIONS } from '~/routes/open/components/fields' import { history } from '~/store' import { secondary } from '~/theme/variables' const getSteps = () => [ - 'Start', 'Owners', 'Details', 'Review', + 'Start', 'Owners', 'Confirmations', 'Review', ] const initialValuesFrom = (userAccount: string) => ({ [getOwnerNameBy(0)]: 'My Metamask (me)', [getOwnerAddressBy(0)]: userAccount, + [FIELD_CONFIRMATIONS]: '1', }) type Props = { @@ -68,7 +69,7 @@ const Layout = ({ { SafeOwnersFields } - { SafeFields } + { SafeThresholdField } { Review } diff --git a/src/routes/open/components/SafeThresholdForm/index.jsx b/src/routes/open/components/SafeThresholdForm/index.jsx new file mode 100644 index 00000000..385b3739 --- /dev/null +++ b/src/routes/open/components/SafeThresholdForm/index.jsx @@ -0,0 +1,103 @@ +// @flow +import * as React from 'react' +import { withStyles } from '@material-ui/core/styles' +import MenuItem from '@material-ui/core/MenuItem' +import Field from '~/components/forms/Field' +import SelectField from '~/components/forms/SelectField' +import { composeValidators, minValue, mustBeInteger, required } from '~/components/forms/validator' +import Block from '~/components/layout/Block' +import Row from '~/components/layout/Row' +import Col from '~/components/layout/Col' +import Paragraph from '~/components/layout/Paragraph' +import OpenPaper from '~/components/Stepper/OpenPaper' +import { FIELD_CONFIRMATIONS, getNumOwnersFrom } from '~/routes/open/components/fields' +import { md } from '~/theme/variables' + +type Props = { + classes: Object, + values: Object, +} + +const styles = () => ({ + root: { + display: 'flex', + }, + owners: { + paddingLeft: md, + }, +}) + +export const CONFIRMATIONS_ERROR = 'Number of confirmations can not be higher than the number of owners' + +export const safeFieldsValidation = (values: Object) => { + const errors = {} + + const numOwners = getNumOwnersFrom(values) + if (numOwners < Number.parseInt(values[FIELD_CONFIRMATIONS], 10)) { + errors[FIELD_CONFIRMATIONS] = CONFIRMATIONS_ERROR + } + + return errors +} + +const SafeThreshold = ({ classes, values }: Props) => { + const numOwners = getNumOwnersFrom(values) + + return ( + + + + Set the required owner confirmations: + + + + + Every transaction outside any specified daily limits, needs to be confirmed by all + specified owners. If no daily limits are set, all owners will need to sign for transactions. + + + + + Any transaction over any daily limit requires the confirmation of: + + + + + + { + [...Array(Number(numOwners))].map((x, index) => ( + {index + 1} + )) + } + + + + + out of {numOwners} owner(s) + + + + + ) +} + +const SafeThresholdForm = withStyles(styles)(SafeThreshold) + +const SafeOwnersPage = () => (controls: React$Node, { values }: Object) => ( + + + + + +) + + +export default SafeOwnersPage