Add threshold form in remove owner modal

src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.jsx

@@ -34,6 +34,22 @@ type Props = {
 }
 type ActiveScreen = 'selectOwner' | 'selectThreshold' | 'reviewAddOwner'
 
+export const sendAddOwner = async (
+  values: Object,
+  safeAddress: string,
+  owners: List<Owner>,
+  openSnackbar: Fuction,
+  createTransaction: Function,
+) => {
+  const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
+  const txData = gnosisSafe.contract.methods.addOwnerWithThreshold(values.ownerAddress, values.threshold).encodeABI()
+
+  const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar)
+  if (txHash) {
+    setOwners(safeAddress, owners.push(makeOwner({ name: values.ownerName, address: values.ownerAddress })))
+  }
+}
+
 const AddOwner = ({
   onClose,
   isOpen,
@@ -84,12 +100,11 @@ const AddOwner = ({
         {({ openSnackbar }) => {
           const onAddOwner = async () => {
             onClose()
-            const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
+            try {
-            const txData = gnosisSafe.contract.methods.addOwnerWithThreshold(values.ownerAddress, values.threshold).encodeABI()
+              sendAddOwner(values, safeAddress, owners, openSnackbar, createTransaction)
-
+            } catch (error) {
-            const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar)
+              // eslint-disable-next-line
-            if (txHash) {
+              console.log('Error while removing an owner ' + error)
-              setOwners(safeAddress, owners.push(makeOwner({ name: values.ownerName, address: values.ownerAddress })))
             }
           }
 

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.jsx

@@ -8,6 +8,7 @@ import { type Owner, makeOwner } from '~/routes/safe/store/models/owner'
 import { setOwners } from '~/logic/safe/utils'
 import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
 import CheckOwner from './screens/CheckOwner'
+import ThresholdForm from './screens/ThresholdForm'
 import { withStyles } from '@material-ui/core/styles'
 
 const styles = () => ({
@@ -34,6 +35,30 @@ type Props = {
 }
 type ActiveScreen = 'checkOwner' | 'selectThreshold' | 'reviewRemoveOwner'
 
+const SENTINEL_ADDRESS = '0x0000000000000000000000000000000000000001'
+
+export const sendRemoveOwner = async (
+  values: Object,
+  safeAddress: string,
+  ownerAddressToRemove: string,
+  ownerNameToRemove: string,
+  owners: List<Owner>,
+  openSnackbar: Function,
+  createTransaction: Function,
+) => {
+  const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
+  const storedOwners = await gnosisSafe.getOwners()
+  const index = storedOwners.findIndex(ownerAddress => ownerAddress === ownerAddressToRemove)
+  const prevAddress = index === 0 ? SENTINEL_ADDRESS : storedOwners[index - 1]
+  const txData = gnosisSafe.contract.methods.removeOwner(prevAddress, ownerAddressToRemove, values.threshold).encodeABI()
+  const text = `Remove Owner ${ownerNameToRemove} (${ownerAddressToRemove})`
+
+  const txHash = createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar)
+  if (txHash) {
+    setOwners(safeAddress, owners.filter(o => o.address !== ownerAddressToRemove))
+  }
+}
+
 const RemoveOwner = ({
   onClose,
   isOpen,
@@ -81,7 +106,14 @@ const RemoveOwner = ({
     <React.Fragment>
       <SharedSnackbarConsumer>
         {({ openSnackbar }) => {
-          const onRemoveOwner = async () => {
+          const onRemoveOwner = () => {
+            onClose()
+            try {
+              sendRemoveOwner(values, safeAddress, ownerAddress, ownerName, owners, openSnackbar, createTransaction)
+            } catch (error) {
+              // eslint-disable-next-line
+              console.log('Error while removing an owner ' + error)
+            }
           }
 
           return (
@@ -102,6 +134,15 @@ const RemoveOwner = ({
                     onSubmit={ownerSubmitted}
                   />
                 )}
+                {activeScreen === 'selectThreshold' && (
+                  <ThresholdForm
+                    onClose={onClose}
+                    owners={owners}
+                    threshold={threshold}
+                    onClickBack={onClickBack}
+                    onSubmit={thresholdSubmitted}
+                  />
+                )}
               </React.Fragment>
             </Modal>
           )

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/index.jsx

@@ -0,0 +1,139 @@
+// @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,
+  owners: List<Owner>,
+  threshold: number,
+  onClickBack: Function,
+  onSubmit: Function,
+}
+
+const ThresholdForm = ({
+  classes,
+  onClose,
+  owners,
+  threshold,
+  onClickBack,
+  onSubmit,
+}: Props) => {
+  const handleSubmit = (values) => {
+    onSubmit(values)
+  }
+  const defaultThreshold = threshold > 1 ? threshold - 1 : threshold
+
+  return (
+    <React.Fragment>
+      <Row align="center" grow className={classes.heading}>
+        <Paragraph weight="bolder" className={classes.manage} noMargin>
+          Remove owner
+        </Paragraph>
+        <Paragraph className={classes.annotation}>2 of 3</Paragraph>
+        <IconButton onClick={onClose} disableRipple>
+          <Close className={classes.closeIcon} />
+        </IconButton>
+      </Row>
+      <Hairline />
+      <GnoForm onSubmit={handleSubmit} initialValues={{threshold: defaultThreshold.toString()}}>
+        {(...args) => {
+          const formState = args[2]
+          const numOptions = owners.size > 1 ? owners.size - 1 : 1
+
+          return (
+            <React.Fragment>
+              <Block className={classes.formContainer}>
+                <Row>
+                  <Paragraph weight="bolder" className={classes.headingText}>
+                    Set the required owner confirmations:
+                  </Paragraph>
+                </Row>
+                <Row>
+                  <Paragraph weight="bolder">
+                    Any transaction over any daily limit requires the confirmation of:
+                  </Paragraph>
+                </Row>
+                <Row margin="xl" align="center" className={classes.inputRow}>
+                  <Col xs={2}>
+                    <Field
+                      name={"threshold"}
+                      render={props => (
+                        <React.Fragment>
+                          <SelectField {...props} disableError>
+                            {[...Array(Number(numOptions))].map((x, index) => (
+                              <MenuItem key={index} value={`${index + 1}`}>
+                                {index + 1}
+                              </MenuItem>
+                            ))}
+                          </SelectField>
+                          {props.meta.error && props.meta.touched && (
+                            <Paragraph className={classes.errorText} noMargin color="error">
+                              {props.meta.error}
+                            </Paragraph>
+                          )}
+                        </React.Fragment>
+                      )}
+                      validate={composeValidators(required, mustBeInteger, minValue(1), maxValue(numOptions))}
+                      data-testid="threshold-select-input"
+                    />
+                  </Col>
+                  <Col xs={10}>
+                    <Paragraph size="lg" color="primary" noMargin className={classes.ownersText}>
+                      out of
+                      {' '}
+                      {owners.size - 1}
+                      {' '}
+                      owner(s)
+                    </Paragraph>
+                  </Col>
+                </Row>
+              </Block>
+              <Hairline />
+              <Row align="center" className={classes.buttonRow}>
+                <Button className={classes.button} minWidth={140} onClick={onClickBack}>
+                  Back
+                </Button>
+                <Button
+                  type="submit"
+                  className={classes.button}
+                  variant="contained"
+                  minWidth={140}
+                  color="primary"
+                  data-testid="review-tx-btn"
+                >
+                  Review
+                </Button>
+              </Row>
+            </React.Fragment>
+          )
+        }}
+      </GnoForm>
+    </React.Fragment>
+  )
+}
+
+export default withStyles(styles)(ThresholdForm)

src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/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',
+  },
+})

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

@@ -93,7 +93,7 @@ class ManageOwners extends React.Component<Props, State> {
       showAddOwner,
       showRemoveOwner,
       selectedOwnerName,
-      selectedOwnerAddress
+      selectedOwnerAddress,
     } = this.state
 
     const columns = generateColumns()