fix removing safe owner

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

@@ -1,16 +1,15 @@
 // @flow
 import React, { useState, useEffect } from 'react'
 import { List } from 'immutable'
+import { withStyles } from '@material-ui/core/styles'
 import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
 import Modal from '~/components/Modal'
-import { type Safe } from '~/routes/safe/store/models/safe'
 import { type Owner } 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 ReviewRemoveOwner from './screens/Review'
-import { withStyles } from '@material-ui/core/styles'
 
 const styles = () => ({
   biggerModalWindow: {
@@ -31,7 +30,6 @@ type Props = {
   owners: List<Owner>,
   threshold: number,
   network: string,
-  userAddress: string,
   createTransaction: Function,
 }
 type ActiveScreen = 'checkOwner' | 'selectThreshold' | 'reviewRemoveOwner'
@@ -51,8 +49,10 @@ export const sendRemoveOwner = async (
   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 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) {
@@ -71,7 +71,6 @@ const RemoveOwner = ({
   owners,
   threshold,
   network,
-  userAddress,
   createTransaction,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('checkOwner')
@@ -93,7 +92,7 @@ const RemoveOwner = ({
     }
   }
 
-  const ownerSubmitted = (newValues: Object) => {
+  const ownerSubmitted = () => {
     setActiveScreen('selectThreshold')
   }
 

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

@@ -4,16 +4,15 @@ import classNames from 'classnames/bind'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
+import OpenInNew from '@material-ui/icons/OpenInNew'
 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 Link from '~/components/layout/Link'
 import Identicon from '~/components/Identicon'
-import OpenInNew from '@material-ui/icons/OpenInNew'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
 import { styles } from './style'
 import { secondary } from '~/theme/variables'
@@ -94,7 +93,7 @@ const CheckOwner = ({
           variant="contained"
           minWidth={140}
           color="primary"
-          data-testid="review-tx-btn"
+          onClick={handleSubmit}
         >
           Next
         </Button>

src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx

@@ -4,6 +4,7 @@ import classNames from 'classnames/bind'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
+import OpenInNew from '@material-ui/icons/OpenInNew'
 import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
 import GnoForm from '~/components/forms/GnoForm'
@@ -15,13 +16,9 @@ import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
 import Identicon from '~/components/Identicon'
 import Link from '~/components/layout/Link'
-import OpenInNew from '@material-ui/icons/OpenInNew'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
 import {
-  composeValidators,
-  required,
-  mustBeEthereumAddress,
-  minMaxLength,
+  composeValidators, required, mustBeEthereumAddress, minMaxLength,
 } from '~/components/forms/validator'
 import { styles } from './style'
 import { secondary } from '~/theme/variables'
@@ -41,12 +38,7 @@ type Props = {
 }
 
 const OwnerForm = ({
-  classes,
-  onClose,
-  ownerAddress,
-  ownerName,
-  network,
-  onSubmit,
+  classes, onClose, ownerAddress, ownerName, network, onSubmit,
 }: Props) => {
   const handleSubmit = (values) => {
     onSubmit(values)
@@ -65,93 +57,86 @@ const OwnerForm = ({
       </Row>
       <Hairline />
       <GnoForm onSubmit={handleSubmit}>
-        {(...args) => {
-          const formState = args[2]
-
-          return (
-            <React.Fragment>
-              <Block className={classes.formContainer}>
-                <Row noMargin>
-                  <Paragraph>
-                    Review the owner you want to replace from the active Safe. Then specify the new owner you want to replace it with:
-                  </Paragraph>
-                </Row>
-                <Row noMargin>
-                  <Paragraph>
-                    Current owner
-                  </Paragraph>
-                </Row>
-                <Row className={classes.owner}>
-                  <Col xs={1} align="center">
-                    <Identicon address={ownerAddress} diameter={32} />
-                  </Col>
-                  <Col xs={7}>
-                    <Block className={classNames(classes.name, classes.userName)}>
-                      <Paragraph size="lg" noMargin weight="bolder">
-                        {ownerName}
-                      </Paragraph>
-                      <Block align="center" className={classes.user}>
-                        <Paragraph size="md" color="disabled" noMargin>
-                          {ownerAddress}
-                        </Paragraph>
-                        <Link className={classes.open} to={getEtherScanLink(ownerAddress, network)} target="_blank">
-                          <OpenInNew style={openIconStyle} />
-                        </Link>
-                      </Block>
-                    </Block>
-                  </Col>
-                </Row>
-                <Row noMargin>
-                  <Paragraph>
-                    New owner
-                  </Paragraph>
-                </Row>
-                <Row margin="md">
-                  <Col xs={8}>
-                    <Field
-                      name="ownerName"
-                      component={TextField}
-                      type="text"
-                      validate={composeValidators(required, minMaxLength(1,50))}
-                      placeholder="Owner name*"
-                      text="Owner name*"
-                      className={classes.addressInput}
-                    />
-                  </Col>
-                </Row>
-                <Row margin="md">
-                  <Col xs={8}>
-                    <Field
-                      name="ownerAddress"
-                      component={TextField}
-                      type="text"
-                      validate={composeValidators(required, mustBeEthereumAddress)}
-                      placeholder="Owner address*"
-                      text="Owner address*"
-                      className={classes.addressInput}
-                    />
-                  </Col>
-                </Row>
-              </Block>
-              <Hairline />
-              <Row align="center" className={classes.buttonRow}>
-                <Button className={classes.button} minWidth={140} onClick={onClose}>
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
-                  className={classes.button}
-                  variant="contained"
-                  minWidth={140}
-                  color="primary"
-                  data-testid="review-tx-btn"
-                >
-                  Next
-                </Button>
+        {() => (
+          <React.Fragment>
+            <Block className={classes.formContainer}>
+              <Row>
+                <Paragraph>
+                  Review the owner you want to replace from the active Safe. Then specify the new owner you want to
+                  replace it with:
+                </Paragraph>
               </Row>
-            </React.Fragment>
-          )
-        }}
+              <Row>
+                <Paragraph>Current owner</Paragraph>
+              </Row>
+              <Row className={classes.owner}>
+                <Col xs={1} align="center">
+                  <Identicon address={ownerAddress} diameter={32} />
+                </Col>
+                <Col xs={7}>
+                  <Block className={classNames(classes.name, classes.userName)}>
+                    <Paragraph size="lg" noMargin weight="bolder">
+                      {ownerName}
+                    </Paragraph>
+                    <Block align="center" className={classes.user}>
+                      <Paragraph size="md" color="disabled" noMargin>
+                        {ownerAddress}
+                      </Paragraph>
+                      <Link className={classes.open} to={getEtherScanLink(ownerAddress, network)} target="_blank">
+                        <OpenInNew style={openIconStyle} />
+                      </Link>
+                    </Block>
+                  </Block>
+                </Col>
+              </Row>
+              <Row>
+                <Paragraph>New owner</Paragraph>
+              </Row>
+              <Row margin="md">
+                <Col xs={8}>
+                  <Field
+                    name="ownerName"
+                    component={TextField}
+                    type="text"
+                    validate={composeValidators(required, minMaxLength(1, 50))}
+                    placeholder="Owner name*"
+                    text="Owner name*"
+                    className={classes.addressInput}
+                  />
+                </Col>
+              </Row>
+              <Row margin="md">
+                <Col xs={8}>
+                  <Field
+                    name="ownerAddress"
+                    component={TextField}
+                    type="text"
+                    validate={composeValidators(required, mustBeEthereumAddress)}
+                    placeholder="Owner address*"
+                    text="Owner address*"
+                    className={classes.addressInput}
+                  />
+                </Col>
+              </Row>
+            </Block>
+            <Hairline />
+            <Row align="center" className={classes.buttonRow}>
+              <Button className={classes.button} minWidth={140} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                className={classes.button}
+                variant="contained"
+                minWidth={140}
+                color="primary"
+                data-testid="review-tx-btn"
+              >
+                Next
+              </Button>
+            </Row>
+          </React.Fragment>
+        )}
       </GnoForm>
     </React.Fragment>
   )

src/routes/safe/components/Settings/ManageOwners/style.js

@@ -16,9 +16,6 @@ export const styles = () => ({
     '&:hover $actions': {
       visibility: 'initial',
     },
-    '&:focus $actions': {
-      visibility: 'initial',
-    },
   },
   actions: {
     justifyContent: 'flex-end',