modal ui

src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.jsx

@@ -10,6 +10,7 @@ import {
   composeValidators, minValue, mustBeInteger, required,
 } from '~/components/forms/validator'
 import Field from '~/components/forms/Field'
+import GnoForm from '~/components/forms/GnoForm'
 import Hairline from '~/components/layout/Hairline'
 import Paragraph from '~/components/layout/Paragraph'
 import Button from '~/components/layout/Button'
@@ -28,63 +29,75 @@ type Props = {
 
 const ChangeThreshold = ({
   onClose, owners, threshold, classes,
-}: Props) => (
+}: Props) => {
-  <React.Fragment>
+  const handleSubmit = () => ({})
-    <Row align="center" grow className={classes.heading}>
+
-      <Paragraph className={classes.headingText} weight="bolder" noMargin>
+  return (
-        Change required confirmations
+    <React.Fragment>
-      </Paragraph>
+      <Row align="center" grow className={classes.heading}>
-      <IconButton onClick={onClose} disableRipple>
+        <Paragraph className={classes.headingText} weight="bolder" noMargin>
-        <Close className={classes.close} />
+          Change required confirmations
-      </IconButton>
-    </Row>
-    <Hairline />
-    <Block className={classes.modalContent}>
-      <Row>
-        <Paragraph>
-          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.
         </Paragraph>
+        <IconButton onClick={onClose} disableRipple>
+          <Close className={classes.close} />
+        </IconButton>
       </Row>
-      <Row>
+      <Hairline />
-        <Paragraph weight="bolder">Any transaction over any daily limit requires the confirmation of:</Paragraph>
+      <Block className={classes.modalContent}>
+        <GnoForm onSubmit={handleSubmit} initialValues={{ threshold: threshold.toString() }}>
+          {() => (
+            <React.Fragment>
+              <Row>
+                <Paragraph>
+                  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.
+                </Paragraph>
+              </Row>
+              <Row>
+                <Paragraph weight="bolder">
+                  Any transaction over any daily limit requires the confirmation of:
+                </Paragraph>
+              </Row>
+              <Row margin="xl" align="center">
+                <Col xs={2}>
+                  <Field
+                    name="threshold"
+                    component={SelectField}
+                    validate={composeValidators(required, mustBeInteger, minValue(1))}
+                    data-testid="threshold-select-input"
+                  >
+                    {[...Array(Number(owners.size))].map((x, index) => (
+                      <MenuItem key={index} value={`${index + 1}`}>
+                        {index + 1}
+                      </MenuItem>
+                    ))}
+                  </Field>
+                </Col>
+                <Col xs={10}>
+                  <Paragraph size="lg" color="primary" noMargin className={classes.owners}>
+                    out of
+                    {' '}
+                    {owners.size}
+                    {' '}
+owner(s)
+                  </Paragraph>
+                </Col>
+              </Row>
+            </React.Fragment>
+          )}
+        </GnoForm>
+      </Block>
+      <Hairline style={{ position: 'absolute', bottom: 85 }} />
+      <Row align="center" className={classes.buttonRow}>
+        <Button className={classes.button} minWidth={140} onClick={onClose}>
+          BACK
+        </Button>
+        <Button color="primary" className={classes.button} minWidth={140} onClick={onClose} variant="contained">
+          CHANGE
+        </Button>
       </Row>
-      <Row margin="xl" align="center">
+    </React.Fragment>
-        <Col xs={2}>
+  )
-          <Field
+}
-            name="threshold"
-            component={SelectField}
-            validate={composeValidators(required, mustBeInteger, minValue(1))}
-            data-testid="threshold-select-input"
-          >
-            {[...Array(Number(owners.size))].map((x, index) => (
-              <MenuItem key={index} value={`${index + 1}`}>
-                {index + 1}
-              </MenuItem>
-            ))}
-          </Field>
-        </Col>
-        <Col xs={10}>
-          <Paragraph size="lg" color="primary" noMargin className={classes.owners}>
-            out of
-            {' '}
-            {owners.size}
-            {' '}
-            owner(s)
-          </Paragraph>
-        </Col>
-      </Row>
-    </Block>
-    <Hairline style={{ position: 'absolute', bottom: 85 }} />
-    <Row align="center" className={classes.buttonRow}>
-      <Button className={classes.button} minWidth={140} onClick={onClose}>
-        BACK
-      </Button>
-      <Button color="primary" className={classes.button} minWidth={140} onClick={onClose} variant="contained">
-        CHANGE
-      </Button>
-    </Row>
-  </React.Fragment>
-)
 
 export default withStyles(styles)(ChangeThreshold)

src/routes/safe/components/Settings/ThresholdSettings/index.jsx

@@ -64,6 +64,8 @@ owners
       >
         <ChangeThreshold
           onClose={toggleModal}
+          owners={owners}
+          threshold={threshold}
         />
       </Modal>
     </React.Fragment>