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,7 +29,10 @@ type Props = {
 
 const ChangeThreshold = ({
   onClose, owners, threshold, classes,
-}: Props) => (
+}: Props) => {
+  const handleSubmit = () => ({})
+
+  return (
     <React.Fragment>
       <Row align="center" grow className={classes.heading}>
         <Paragraph className={classes.headingText} weight="bolder" noMargin>
@@ -40,14 +44,19 @@ const ChangeThreshold = ({
       </Row>
       <Hairline />
       <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
+                  Every transaction outside any specified daily limits, needs to be confirmed by all specified owners.
-          daily limits are set, all owners will need to sign for transactions.
+                  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>
+                <Paragraph weight="bolder">
+                  Any transaction over any daily limit requires the confirmation of:
+                </Paragraph>
               </Row>
               <Row margin="xl" align="center">
                 <Col xs={2}>
@@ -70,10 +79,13 @@ const ChangeThreshold = ({
                     {' '}
                     {owners.size}
                     {' '}
-            owner(s)
+owner(s)
                   </Paragraph>
                 </Col>
               </Row>
+            </React.Fragment>
+          )}
+        </GnoForm>
       </Block>
       <Hairline style={{ position: 'absolute', bottom: 85 }} />
       <Row align="center" className={classes.buttonRow}>
@@ -85,6 +97,7 @@ const ChangeThreshold = ({
         </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>