Refactor owner management components

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

@@ -4,9 +4,8 @@ import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
 import Modal from '~/components/Modal'
-import { type Owner, makeOwner } from '~/routes/safe/store/models/owner'
+import { type Owner } from '~/routes/safe/store/models/owner'
 import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
-import { getOwners } from '~/logic/safe/utils'
 import OwnerForm from './screens/OwnerForm'
 import ThresholdForm from './screens/ThresholdForm'
 import ReviewAddOwner from './screens/Review'
@@ -28,7 +27,7 @@ type Props = {
   owners: List<Owner>,
   threshold: number,
   network: string,
-  updateSafe: Function,
+  addSafeOwner: Function,
   createTransaction: Function,
 }
 type ActiveScreen = 'selectOwner' | 'selectThreshold' | 'reviewAddOwner'
@@ -39,29 +38,15 @@ export const sendAddOwner = async (
   ownersOld: List<Owner>,
   openSnackbar: Function,
   createTransaction: Function,
-  updateSafe: Function,
+  addSafeOwner: 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)
 
-  const owners = []
-  const storedOwners = await getOwners(safeAddress)
-  storedOwners.forEach((value, key) => owners.push(makeOwner({
-    address: key,
-    name: (values.ownerAddress.toLowerCase() === key.toLowerCase()) ? values.ownerName : value,
-  })))
-  const newOwnerIndex = List(owners).findIndex(o => o.address.toLowerCase() === values.ownerAddress.toLowerCase())
-  if (newOwnerIndex < 0) {
-    owners.push(makeOwner({ address: values.ownerAddress, name: values.ownerName }))
-  }
-
   if (txHash) {
-    updateSafe({
-      address: safeAddress,
-      owners: List(owners),
-    })
+    addSafeOwner({ safeAddress, ownerName: values.ownerName, ownerAddress: values.ownerAddress })
   }
 }
 
@@ -75,7 +60,7 @@ const AddOwner = ({
   threshold,
   network,
   createTransaction,
-  updateSafe,
+  addSafeOwner,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('selectOwner')
   const [values, setValues] = useState<Object>({})
@@ -120,7 +105,7 @@ const AddOwner = ({
           const onAddOwner = async () => {
             onClose()
             try {
-              sendAddOwner(values, safeAddress, owners, openSnackbar, createTransaction, updateSafe)
+              sendAddOwner(values, safeAddress, owners, openSnackbar, createTransaction, addSafeOwner)
             } catch (error) {
               // eslint-disable-next-line
               console.log('Error while removing an owner ' + error)

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

@@ -1,6 +1,5 @@
 // @flow
 import React from 'react'
-import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import OpenInNew from '@material-ui/icons/OpenInNew'
@@ -16,7 +15,6 @@ import TextField from '~/components/forms/TextField'
 import Paragraph from '~/components/layout/Paragraph'
 import Identicon from '~/components/Identicon'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
-import type { Owner } from '~/routes/safe/store/models/owner'
 import { composeValidators, required, minMaxLength } from '~/components/forms/validator'
 import Modal from '~/components/Modal'
 import { styles } from './style'
@@ -30,23 +28,15 @@ const openIconStyle = {
   color: secondary,
 }
 
-const stylesModal = () => ({
-  smallerModalWindow: {
-    height: 'auto',
-    position: 'static',
-  },
-})
-
 type Props = {
   onClose: () => void,
   classes: Object,
   isOpen: boolean,
   safeAddress: string,
   ownerAddress: string,
-  owners: List<Owner>,
   network: string,
   selectedOwnerName: string,
-  updateSafe: Function,
+  editSafeOwner: Function,
 }
 
 const EditOwnerComponent = ({
@@ -56,15 +46,11 @@ const EditOwnerComponent = ({
   safeAddress,
   ownerAddress,
   selectedOwnerName,
-  updateSafe,
-  owners,
+  editSafeOwner,
   network,
 }: Props) => {
   const handleSubmit = (values) => {
-    const ownerToUpdateIndex = owners.findIndex(o => o.address === ownerAddress)
-    const updatedOwners = owners.update(ownerToUpdateIndex, owner => owner.set('name', values.ownerName))
-
-    updateSafe({ address: safeAddress, owners: updatedOwners })
+    editSafeOwner({ safeAddress, ownerAddress, ownerName: values.ownerName })
     onClose()
   }
 
@@ -74,7 +60,7 @@ const EditOwnerComponent = ({
       description="Edit owner from Safe"
       handleClose={onClose}
       open={isOpen}
-      paperClassName={stylesModal.smallerModalWindow}
+      paperClassName={classes.smallerModalWindow}
     >
       <Row align="center" grow className={classes.heading}>
         <Paragraph className={classes.manage} noMargin weight="bolder">

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

@@ -1,9 +1,9 @@
 // @flow
 import {
-  lg, md, sm, error, background,
+  lg, md, sm, error,
 } from '~/theme/variables'
 
-export const styles = (theme: Object) => ({
+export const styles = () => ({
   heading: {
     padding: `${sm} ${lg}`,
     justifyContent: 'space-between',
@@ -36,4 +36,8 @@ export const styles = (theme: Object) => ({
       cursor: 'pointer',
     },
   },
+  smallerModalWindow: {
+    height: 'auto',
+    position: 'static',
+  },
 })

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

@@ -4,9 +4,8 @@ import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
 import Modal from '~/components/Modal'
-import { type Owner, makeOwner } from '~/routes/safe/store/models/owner'
+import { type Owner } from '~/routes/safe/store/models/owner'
 import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
-import { getOwners } from '~/logic/safe/utils'
 import CheckOwner from './screens/CheckOwner'
 import ThresholdForm from './screens/ThresholdForm'
 import ReviewRemoveOwner from './screens/Review'
@@ -31,7 +30,7 @@ type Props = {
   threshold: number,
   network: string,
   createTransaction: Function,
-  updateSafe: Function,
+  removeSafeOwner: Function,
 }
 type ActiveScreen = 'checkOwner' | 'selectThreshold' | 'reviewRemoveOwner'
 
@@ -45,7 +44,7 @@ export const sendRemoveOwner = async (
   ownersOld: List<Owner>,
   openSnackbar: Function,
   createTransaction: Function,
-  updateSafe: Function,
+  removeSafeOwner: Function,
 ) => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
   const safeOwners = await gnosisSafe.getOwners()
@@ -57,16 +56,8 @@ export const sendRemoveOwner = async (
 
   const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar)
 
-  let owners = []
-  const storedOwners = await getOwners(safeAddress)
-  storedOwners.forEach((value, key) => owners.push(makeOwner({ address: key, name: value })))
-  owners = List(owners).filter(o => o.address.toLowerCase() !== ownerAddressToRemove.toLowerCase())
-
   if (txHash) {
-    updateSafe({
-      address: safeAddress,
-      owners,
-    })
+    removeSafeOwner({ safeAddress, ownerAddress: ownerAddressToRemove })
   }
 }
 
@@ -82,7 +73,7 @@ const RemoveOwner = ({
   threshold,
   network,
   createTransaction,
-  updateSafe,
+  removeSafeOwner,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('checkOwner')
   const [values, setValues] = useState<Object>({})
@@ -128,7 +119,7 @@ const RemoveOwner = ({
                 owners,
                 openSnackbar,
                 createTransaction,
-                updateSafe,
+                removeSafeOwner,
               )
             } catch (error) {
               // eslint-disable-next-line

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

@@ -4,8 +4,6 @@ import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
 import Modal from '~/components/Modal'
-import { type Owner, makeOwner } from '~/routes/safe/store/models/owner'
-import { getOwners } from '~/logic/safe/utils'
 import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
 import OwnerForm from './screens/OwnerForm'
 import ReviewReplaceOwner from './screens/Review'
@@ -30,7 +28,7 @@ type Props = {
   network: string,
   threshold: string,
   createTransaction: Function,
-  updateSafe: Function,
+  replaceSafeOwner: Function,
 }
 type ActiveScreen = 'checkOwner' | 'reviewReplaceOwner'
 
@@ -44,7 +42,7 @@ export const sendReplaceOwner = async (
   ownersOld: List<Owner>,
   openSnackbar: Function,
   createTransaction: Function,
-  updateSafe: Function,
+  replaceSafeOwner: Function,
 ) => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
   const safeOwners = await gnosisSafe.getOwners()
@@ -56,22 +54,12 @@ export const sendReplaceOwner = async (
 
   const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar)
 
-  let owners = []
-  const storedOwners = await getOwners(safeAddress)
-  storedOwners.forEach((value, key) => owners.push(makeOwner({
-    address: key,
-    name: (values.ownerAddress.toLowerCase() === key.toLowerCase()) ? values.ownerName : value,
-  })))
-  const newOwnerIndex = List(owners).findIndex(o => o.address.toLowerCase() === values.ownerAddress.toLowerCase())
-  if (newOwnerIndex < 0) {
-    owners.push(makeOwner({ address: values.ownerAddress, name: values.ownerName }))
-  }
-  owners = List(owners).filter(o => o.address.toLowerCase() !== ownerAddressToRemove.toLowerCase())
-
   if (txHash) {
-    updateSafe({
-      address: safeAddress,
-      owners,
+    replaceSafeOwner({
+      safeAddress,
+      oldOwnerAddress: ownerAddressToRemove,
+      ownerAddress: values.ownerAddress,
+      ownerName: values.ownerName,
     })
   }
 }
@@ -88,7 +76,7 @@ const ReplaceOwner = ({
   network,
   threshold,
   createTransaction,
-  updateSafe,
+  replaceSafeOwner,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('checkOwner')
   const [values, setValues] = useState<Object>({})
@@ -125,7 +113,7 @@ const ReplaceOwner = ({
                 owners,
                 openSnackbar,
                 createTransaction,
-                updateSafe,
+                replaceSafeOwner,
               )
             } catch (error) {
               // eslint-disable-next-line

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

@@ -57,7 +57,10 @@ type Props = {
   threshold: number,
   userAddress: string,
   createTransaction: Function,
-  updateSafe: Function,
+  addSafeOwner: Function,
+  removeSafeOwner: Function,
+  replaceSafeOwner: Function,
+  editSafeOwner: Function,
   granted: boolean,
 }
 
@@ -108,7 +111,10 @@ class ManageOwners extends React.Component<Props, State> {
       network,
       userAddress,
       createTransaction,
-      updateSafe,
+      addSafeOwner,
+      removeSafeOwner,
+      replaceSafeOwner,
+      editSafeOwner,
       granted,
     } = this.props
     const {
@@ -211,7 +217,7 @@ class ManageOwners extends React.Component<Props, State> {
           network={network}
           userAddress={userAddress}
           createTransaction={createTransaction}
-          updateSafe={updateSafe}
+          addSafeOwner={addSafeOwner}
         />
         <RemoveOwnerModal
           onClose={this.onHide('RemoveOwner')}
@@ -225,7 +231,7 @@ class ManageOwners extends React.Component<Props, State> {
           network={network}
           userAddress={userAddress}
           createTransaction={createTransaction}
-          updateSafe={updateSafe}
+          removeSafeOwner={removeSafeOwner}
         />
         <ReplaceOwnerModal
           onClose={this.onHide('ReplaceOwner')}
@@ -239,7 +245,7 @@ class ManageOwners extends React.Component<Props, State> {
           threshold={threshold}
           userAddress={userAddress}
           createTransaction={createTransaction}
-          updateSafe={updateSafe}
+          replaceSafeOwner={replaceSafeOwner}
         />
         <EditOwnerModal
           onClose={this.onHide('EditOwner')}
@@ -249,7 +255,7 @@ class ManageOwners extends React.Component<Props, State> {
           selectedOwnerName={selectedOwnerName}
           owners={owners}
           network={network}
-          updateSafe={updateSafe}
+          editSafeOwner={editSafeOwner}
         />
       </React.Fragment>
     )

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

@@ -37,7 +37,10 @@ type Props = Actions & {
   threshold: number,
   network: string,
   createTransaction: Function,
-  updateSafe: Function,
+  addSafeOwner: Function,
+  removeSafeOwner: Function,
+  replaceSafeOwner: Function,
+  editSafeOwner: Function,
   userAddress: string,
 }
 
@@ -75,6 +78,10 @@ class Settings extends React.Component<Props, State> {
       userAddress,
       createTransaction,
       updateSafe,
+      addSafeOwner,
+      removeSafeOwner,
+      replaceSafeOwner,
+      editSafeOwner,
     } = this.props
 
     return (
@@ -116,7 +123,9 @@ class Settings extends React.Component<Props, State> {
                 onClick={this.handleChange(2)}
                 testId={OWNERS_SETTINGS_TAB_TESTID}
               >
-                Owners ({owners.size})
+                Owners (
+                {owners.size}
+)
               </Row>
               <Hairline />
               {granted && (
@@ -146,7 +155,10 @@ class Settings extends React.Component<Props, State> {
                   network={network}
                   createTransaction={createTransaction}
                   userAddress={userAddress}
-                  updateSafe={updateSafe}
+                  addSafeOwner={addSafeOwner}
+                  removeSafeOwner={removeSafeOwner}
+                  replaceSafeOwner={replaceSafeOwner}
+                  editSafeOwner={editSafeOwner}
                   granted={granted}
                 />
               )}