(Fix) Feature/1558 Replace owner modal names (#1562)

* Types

* Uses addressBook when displaying the replace owner modal

Co-authored-by: nicolas <nicosampler@users.noreply.github.com>
Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>

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

@@ -4,6 +4,9 @@ import Close from '@material-ui/icons/Close'
 import classNames from 'classnames'
 import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
+import { List } from 'immutable'
+import { ExplorerButton } from '@gnosis.pm/safe-react-components'
+
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 import CopyBtn from 'src/components/CopyBtn'
@@ -23,9 +26,10 @@ import {
 } from 'src/logic/safe/store/selectors'
 import { estimateTxGasCosts } from 'src/logic/safe/transactions/gas'
 import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
+import { getOwnersWithNameFromAddressBook } from 'src/logic/addressBook/utils'
+import { addressBookSelector } from 'src/logic/addressBook/store/selectors'
 
 import { styles } from './style'
-import { ExplorerButton } from '@gnosis.pm/safe-react-components'
 
 export const REPLACE_OWNER_SUBMIT_BTN_TEST_ID = 'replace-owner-submit-btn'
 
@@ -37,6 +41,8 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
   const safeName = useSelector(safeNameSelector)
   const owners = useSelector(safeOwnersSelector)
   const threshold = useSelector(safeThresholdSelector)
+  const addressBook = useSelector(addressBookSelector)
+  const ownersWithAddressBookName = owners ? getOwnersWithNameFromAddressBook(addressBook, owners) : List([])
 
   useEffect(() => {
     let isCurrent = true
@@ -106,7 +112,7 @@ const ReviewRemoveOwner = ({ classes, onClickBack, onClose, onSubmit, ownerAddre
               </Paragraph>
             </Row>
             <Hairline />
-            {owners?.map(
+            {ownersWithAddressBookName?.map(
               (owner) =>
                 owner.address !== ownerAddress && (
                   <React.Fragment key={owner.address}>

src/routes/safe/components/Settings/ManageOwners/dataFetcher.ts

@@ -1,17 +1,16 @@
 import { List } from 'immutable'
 import { TableColumn } from 'src/components/Table/types.d'
+import { SafeOwner } from 'src/logic/safe/store/models/safe'
 
 export const OWNERS_TABLE_NAME_ID = 'name'
 export const OWNERS_TABLE_ADDRESS_ID = 'address'
 export const OWNERS_TABLE_ACTIONS_ID = 'actions'
 
-export const getOwnerData = (owners) => {
-  const rows = owners.map((owner) => ({
+export const getOwnerData = (owners: List<SafeOwner>): List<{ address: string; name: string }> => {
+  return owners.map((owner) => ({
     [OWNERS_TABLE_NAME_ID]: owner.name,
     [OWNERS_TABLE_ADDRESS_ID]: owner.address,
   }))
-
-  return rows
 }
 
 export const generateColumns = (): List<TableColumn> => {

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

@@ -84,8 +84,8 @@ const ManageOwners = ({ addressBook, granted, owners }: Props): React.ReactEleme
 
   const columns = generateColumns()
   const autoColumns = columns.filter((c) => !c.custom)
-  const ownersAdbk = getOwnersWithNameFromAddressBook(addressBook, owners)
-  const ownerData = getOwnerData(ownersAdbk)
+  const ownersWithAddressBookName = getOwnersWithNameFromAddressBook(addressBook, owners)
+  const ownerData = getOwnerData(ownersWithAddressBookName)
 
   return (
     <>