diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx new file mode 100644 index 00000000..e0f23234 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx @@ -0,0 +1,141 @@ +// @flow +import React from 'react' +import { List } from 'immutable' +import { withStyles } from '@material-ui/core/styles' +import Close from '@material-ui/icons/Close' +import IconButton from '@material-ui/core/IconButton' +import SelectField from '~/components/forms/SelectField' +import MenuItem from '@material-ui/core/MenuItem' +import Paragraph from '~/components/layout/Paragraph' +import Row from '~/components/layout/Row' +import GnoForm from '~/components/forms/GnoForm' +import Col from '~/components/layout/Col' +import Button from '~/components/layout/Button' +import Block from '~/components/layout/Block' +import Hairline from '~/components/layout/Hairline' +import Field from '~/components/forms/Field' +import TextField from '~/components/forms/TextField' +import type { Owner } from '~/routes/safe/store/models/owner' +import { + composeValidators, + required, + minValue, + maxValue, + mustBeInteger, +} from '~/components/forms/validator' +import { styles } from './style' + +type Props = { + onClose: () => void, + classes: Object, + safeAddress: string, + safeName: string, + owners: List, + threshold: number, + onClickBack: Function, + onSubmit: Function, +} + +const ThresholdForm = ({ + classes, + onClose, + safeAddress, + safeName, + owners, + threshold, + onClickBack, + onSubmit, +}: Props) => { + const handleSubmit = (values) => { + onSubmit(values) + } + + return ( + + + + Add new owner + + 2 of 3 + + + + + + + {(...args) => { + const formState = args[2] + + return ( + + + + + Set the required owner confirmations: + + + + + Any transaction over any daily limit requires the confirmation of: + + + + + ( + + + {[...Array(Number(owners.size + 1))].map((x, index) => ( + + {index + 1} + + ))} + + {props.meta.error && props.meta.touched && ( + + {props.meta.error} + + )} + + )} + validate={composeValidators(required, mustBeInteger, minValue(1), maxValue(owners.size + 1))} + data-testid="threshold-select-input" + /> + + + + out of + {' '} + {owners.size + 1} + {' '} + owner(s) + + + + + + + + + + + ) + }} + + + ) +} + +export default withStyles(styles)(ThresholdForm) diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/style.js b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/style.js new file mode 100644 index 00000000..dfd2de15 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/style.js @@ -0,0 +1,45 @@ +// @flow +import { lg, md, sm } from '~/theme/variables' + +export const styles = () => ({ + heading: { + padding: `${sm} ${lg}`, + justifyContent: 'flex-start', + boxSizing: 'border-box', + maxHeight: '75px', + }, + annotation: { + letterSpacing: '-1px', + color: '#a2a8ba', + marginRight: 'auto', + marginLeft: '20px', + }, + manage: { + fontSize: '24px', + }, + closeIcon: { + height: '35px', + width: '35px', + }, + headingText: { + fontSize: '16px', + }, + formContainer: { + padding: `${md} ${lg}`, + minHeight: '340px', + }, + ownersText: { + marginLeft: sm, + }, + buttonRow: { + height: '84px', + justifyContent: 'center', + }, + inputRow: { + position: 'relative', + }, + errorText: { + position: 'absolute', + bottom: '-25px', + }, +})