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) => (
+
+ ))
+ }
+
+
+
+
+ out of {numOwners} owner(s)
+
+
+
+
+ )
+}
+
+const SafeThresholdForm = withStyles(styles)(SafeThreshold)
+
+const SafeOwnersPage = () => (controls: React$Node, { values }: Object) => (
+
+
+
+
+
+)
+
+
+export default SafeOwnersPage