fix displaying threshold in replacing owner modal, eslint fixes

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

@@ -1,15 +1,14 @@
 // @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, makeOwner } from '~/routes/safe/store/models/owner'
 import { setOwners } from '~/logic/safe/utils'
 import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
 import OwnerForm from './screens/OwnerForm'
 import ReviewReplaceOwner from './screens/Review'
-import { withStyles } from '@material-ui/core/styles'
 
 const styles = () => ({
   biggerModalWindow: {
@@ -29,10 +28,10 @@ type Props = {
   ownerName: string,
   owners: List<Owner>,
   network: string,
-  userAddress: string,
+  threshold: string,
   createTransaction: Function,
 }
-type ActiveScreen = 'ownerForm' | 'reviewReplaceOwner'
+type ActiveScreen = 'checkOwner' | 'reviewReplaceOwner'
 
 const SENTINEL_ADDRESS = '0x0000000000000000000000000000000000000001'
 
@@ -49,11 +48,15 @@ export const sendReplaceOwner = 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.swapOwner(prevAddress, ownerAddressToRemove, values.ownerAddress).encodeABI()
-  const text = `Replace Owner ${ownerNameToRemove} (${ownerAddressToRemove}) with ${values.ownerName} (${values.ownerAddress})`
+  const txData = gnosisSafe.contract.methods
+    .swapOwner(prevAddress, ownerAddressToRemove, values.ownerAddress)
+    .encodeABI()
+  // const text = `Replace Owner ${ownerNameToRemove} (${ownerAddressToRemove}) with ${values.ownerName} (${values.ownerAddress})`
 
   const ownersWithoutOldOwner = owners.filter(o => o.address !== ownerAddressToRemove)
-  const ownersWithNewOwner = ownersWithoutOldOwner.push(makeOwner({ name: values.ownerName, address: values.ownerAddress }))
+  const ownersWithNewOwner = ownersWithoutOldOwner.push(
+    makeOwner({ name: values.ownerName, address: values.ownerAddress }),
+  )
 
   const txHash = createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar)
   if (txHash) {
@@ -71,7 +74,7 @@ const ReplaceOwner = ({
   ownerName,
   owners,
   network,
-  userAddress,
+  threshold,
   createTransaction,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('checkOwner')
@@ -137,6 +140,7 @@ const ReplaceOwner = ({
                     ownerName={ownerName}
                     onClickBack={onClickBack}
                     onSubmit={onReplaceOwner}
+                    threshold={threshold}
                   />
                 )}
               </React.Fragment>

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

@@ -10,13 +10,10 @@ import Identicon from '~/components/Identicon'
 import Link from '~/components/layout/Link'
 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 { getEtherScanLink } from '~/logic/wallets/getWeb3'
 import { secondary } from '~/theme/variables'
@@ -38,6 +35,7 @@ type Props = {
   ownerName: string,
   onClickBack: Function,
   onSubmit: Function,
+  threshold: string,
 }
 
 const ReviewRemoveOwner = ({
@@ -50,6 +48,7 @@ const ReviewRemoveOwner = ({
   ownerAddress,
   ownerName,
   onClickBack,
+  threshold,
   onSubmit,
 }: Props) => {
   const handleSubmit = () => {
@@ -90,7 +89,13 @@ const ReviewRemoveOwner = ({
                   Any transaction requires the confirmation of:
                 </Paragraph>
                 <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
-                  {values.threshold} out of {owners.size} owner(s)
+                  {threshold}
+                  {' '}
+                  out of
+                  {' '}
+                  {owners.size}
+                  {' '}
+                  owner(s)
                 </Paragraph>
               </Block>
             </Block>
@@ -98,35 +103,43 @@ const ReviewRemoveOwner = ({
           <Col xs={8} layout="column" className={classes.owners}>
             <Row className={classes.ownersTitle}>
               <Paragraph size="lg" color="primary" noMargin>
-                {owners.size} Safe owner(s)
+                {owners.size}
+                {' '}
+                Safe owner(s)
               </Paragraph>
             </Row>
             <Hairline />
-            {owners.map(owner => owner.get('address') != ownerAddress && (
-              <React.Fragment key={owner.get('address')}>
-                <Row className={classes.owner}>
-                  <Col xs={1} align="center">
-                    <Identicon address={owner.get('address')} diameter={32} />
-                  </Col>
-                  <Col xs={11}>
-                    <Block className={classNames(classes.name, classes.userName)}>
-                      <Paragraph weight="bolder" size="lg" noMargin>
-                        {owner.get('name')}
-                      </Paragraph>
-                      <Block align="center" className={classes.user}>
-                        <Paragraph size="md" color="disabled" noMargin>
-                          {owner.get('address')}
+            {owners.map(
+              owner => owner.address !== ownerAddress && (
+                <React.Fragment key={owner.get('address')}>
+                  <Row className={classes.owner}>
+                    <Col xs={1} align="center">
+                      <Identicon address={owner.get('address')} diameter={32} />
+                    </Col>
+                    <Col xs={11}>
+                      <Block className={classNames(classes.name, classes.userName)}>
+                        <Paragraph weight="bolder" size="lg" noMargin>
+                          {owner.get('name')}
                         </Paragraph>
-                        <Link className={classes.open} to={getEtherScanLink(owner.get('address'), network)} target="_blank">
-                          <OpenInNew style={openIconStyle} />
-                        </Link>
+                        <Block align="center" className={classes.user}>
+                          <Paragraph size="md" color="disabled" noMargin>
+                            {owner.get('address')}
+                          </Paragraph>
+                          <Link
+                            className={classes.open}
+                            to={getEtherScanLink(owner.get('address'), network)}
+                            target="_blank"
+                          >
+                            <OpenInNew style={openIconStyle} />
+                          </Link>
+                        </Block>
                       </Block>
-                    </Block>
-                  </Col>
-                </Row>
-                <Hairline />
-              </React.Fragment>
-            ))}
+                    </Col>
+                  </Row>
+                  <Hairline />
+                </React.Fragment>
+              ),
+            )}
             <Row className={classes.info} align="center">
               <Paragraph weight="bolder" noMargin color="primary" size="md">
                 REMOVING OWNER &darr;

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

@@ -204,6 +204,7 @@ class ManageOwners extends React.Component<Props, State> {
           ownerName={selectedOwnerName}
           owners={owners}
           network={network}
+          threshold={threshold}
           userAddress={userAddress}
           createTransaction={createTransaction}
         />