[Address Book v2] 1603 Use addressbook over known addresses (#2352)

* Use ADDRESS_BOOK_DEFAULT_NAME instead of hard coded string

* Use address book name in Send Collectible review step

* Show name if known in contract interaction review

* Use string comparison util

src/routes/safe/components/AddressBook/EllipsisTransactionDetails/index.tsx

@@ -7,6 +7,9 @@ import { push } from 'connected-react-router'
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
+import { sameString } from 'src/utils/strings'
+import { ADDRESS_BOOK_DEFAULT_NAME } from 'src/logic/addressBook/model/addressBook'
+import { getNameFromAddressBookSelector } from 'src/logic/addressBook/store/selectors'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { xs } from 'src/theme/variables'
@@ -35,13 +38,11 @@ const useStyles = makeStyles(
 
 type EllipsisTransactionDetailsProps = {
   address: string
-  knownAddress?: boolean
   sendModalOpenHandler?: () => void
 }
 
 export const EllipsisTransactionDetails = ({
   address,
-  knownAddress,
   sendModalOpenHandler,
 }: EllipsisTransactionDetailsProps): React.ReactElement => {
   const classes = useStyles()
@@ -51,6 +52,10 @@ export const EllipsisTransactionDetails = ({
   const currentSafeAddress = useSelector(safeParamAddressFromStateSelector)
   const isOwnerConnected = useSelector(grantedSelector)
 
+  const recipientName = useSelector((state) => getNameFromAddressBookSelector(state, { address }))
+  // We have to check that the name returned is not UNKNOWN
+  const isStoredInAddressBook = !sameString(recipientName, ADDRESS_BOOK_DEFAULT_NAME)
+
   const handleClick = (event) => setAnchorEl(event.currentTarget)
 
   const closeMenuHandler = () => setAnchorEl(null)
@@ -73,7 +78,7 @@ export const EllipsisTransactionDetails = ({
                 <Divider key="divider" />,
               ]
             : null}
-          {knownAddress ? (
+          {isStoredInAddressBook ? (
             <MenuItem onClick={addOrEditEntryHandler}>Edit Address book Entry</MenuItem>
           ) : (
             <MenuItem onClick={addOrEditEntryHandler}>Add to address book</MenuItem>

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx

@@ -27,6 +27,7 @@ import {
   getValueFromTxInputs,
 } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils'
 import { useEstimateTransactionGas, EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
+import { getNameFromAddressBookSelector } from 'src/logic/addressBook/store/selectors'
 import { useEstimationStatus } from 'src/logic/hooks/useEstimationStatus'
 import { ButtonStatus, Modal } from 'src/components/Modal'
 import { TransactionFees } from 'src/components/TransactionsFees'
@@ -60,6 +61,9 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
   const [manualSafeTxGas, setManualSafeTxGas] = useState(0)
   const [manualGasPrice, setManualGasPrice] = useState<string | undefined>()
   const [manualGasLimit, setManualGasLimit] = useState<string | undefined>()
+  const addressName = useSelector((state) =>
+    getNameFromAddressBookSelector(state, { address: tx.contractAddress as string }),
+  )
 
   const [txInfo, setTxInfo] = useState<{
     txRecipient: string
@@ -154,7 +158,13 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
               </Paragraph>
             </Row>
             <Row align="center" margin="md">
-              <EthHashInfo hash={tx.contractAddress as string} showAvatar showCopyBtn explorerUrl={explorerUrl} />
+              <EthHashInfo
+                hash={tx.contractAddress as string}
+                name={addressName}
+                showAvatar
+                showCopyBtn
+                explorerUrl={explorerUrl}
+              />
             </Row>
             <Row margin="xs">
               <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>

src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx

@@ -35,6 +35,7 @@ const useStyles = makeStyles(styles)
 
 export type CollectibleTx = {
   recipientAddress: string
+  recipientName?: string
   assetAddress: string
   assetName: string
   nftTokenId: string
@@ -177,6 +178,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
               <Col xs={12}>
                 <EthHashInfo
                   hash={tx.recipientAddress}
+                  name={tx.recipientName}
                   showAvatar
                   showCopyBtn
                   explorerUrl={getExplorerInfo(tx.recipientAddress)}

src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx

@@ -57,6 +57,7 @@ export type SendCollectibleTxInfo = {
   assetName: string
   nftTokenId: string
   recipientAddress?: string
+  recipientName?: string
 }
 
 const SendCollectible = ({
@@ -106,7 +107,7 @@ const SendCollectible = ({
     if (!values.recipientAddress) {
       values.recipientAddress = selectedEntry?.address
     }
-
+    values.recipientName = selectedEntry?.name
     values.assetName = nftAssets[values.assetAddress].name
 
     onNext(values)

src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/AddressInfo.tsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'
 
 import { getExplorerInfo } from 'src/config'
 import { getNameFromAddressBookSelector } from 'src/logic/addressBook/store/selectors'
+import { ADDRESS_BOOK_DEFAULT_NAME } from 'src/logic/addressBook/model/addressBook'
 import { sameString } from 'src/utils/strings'
 
 import DataDisplay from './DataDisplay'
@@ -21,7 +22,7 @@ const AddressInfo = ({ address, title }: AddressInfoProps): ReactElement => {
     <DataDisplay title={title}>
       <EthHashInfo
         hash={address}
-        name={sameString(name, 'UNKNOWN') ? undefined : name}
+        name={sameString(name, ADDRESS_BOOK_DEFAULT_NAME) ? undefined : name}
         showCopyBtn
         showAvatar
         textSize="lg"

src/routes/safe/components/Transactions/TxList/OwnerRow.tsx

@@ -4,6 +4,8 @@ import { useSelector } from 'react-redux'
 
 import { getExplorerInfo } from 'src/config'
 import { getNameFromAddressBookSelector } from 'src/logic/addressBook/store/selectors'
+import { ADDRESS_BOOK_DEFAULT_NAME } from 'src/logic/addressBook/model/addressBook'
+import { sameString } from 'src/utils/strings'
 
 export const OwnerRow = ({ address }: { address: string }): ReactElement => {
   const ownerName = useSelector((state) => getNameFromAddressBookSelector(state, { address }))
@@ -11,7 +13,7 @@ export const OwnerRow = ({ address }: { address: string }): ReactElement => {
   return (
     <EthHashInfo
       hash={address}
-      name={ownerName === 'UNKNOWN' ? '' : ownerName}
+      name={sameString(ownerName, ADDRESS_BOOK_DEFAULT_NAME) ? undefined : ownerName}
       showAvatar
       showCopyBtn
       explorerUrl={getExplorerInfo(address)}

src/routes/safe/components/Transactions/TxList/TxInfoDetails.tsx

@@ -1,9 +1,7 @@
 import React, { ReactElement, useContext, useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
-import { getNameFromAddressBookSelector } from 'src/logic/addressBook/store/selectors'
 import { ZERO_ADDRESS } from 'src/logic/wallets/ethAddresses'
 import { Erc721Transfer, Transfer } from 'src/logic/safe/store/models/types/gateway.d'
 import { EllipsisTransactionDetails } from 'src/routes/safe/components/AddressBook/EllipsisTransactionDetails'
@@ -35,9 +33,6 @@ export const TxInfoDetails = ({
   name,
   avatarUrl,
 }: TxInfoDetailsProps): ReactElement => {
-  const recipientName = useSelector((state) => getNameFromAddressBookSelector(state, { address }))
-  const knownAddress = recipientName !== 'UNKNOWN'
-
   const { txLocation } = useContext<TxLocationProps>(TxLocationContext)
   const canRepeatTransaction =
     // is transfer type by context
@@ -89,7 +84,6 @@ export const TxInfoDetails = ({
         <AddressInfo address={address} name={name} avatarUrl={avatarUrl} />
         <EllipsisTransactionDetails
           address={address}
-          knownAddress={knownAddress}
           sendModalOpenHandler={canRepeatTransaction ? sendModalOpenHandler : undefined}
         />
       </SingleRow>

src/routes/safe/components/Transactions/TxList/hooks/useKnownAddress.ts

@@ -1,5 +1,7 @@
 import { useSelector } from 'react-redux'
 
+import { sameString } from 'src/utils/strings'
+import { ADDRESS_BOOK_DEFAULT_NAME } from 'src/logic/addressBook/model/addressBook'
 import { getNameFromAddressBookSelector } from 'src/logic/addressBook/store/selectors'
 
 type AddressInfo = { name: string | undefined; image: string | undefined }
@@ -8,8 +10,8 @@ type UseKnownAddressResponse = AddressInfo & { isAddressBook: boolean }
 
 export const useKnownAddress = (address: string, addressInfo: AddressInfo): UseKnownAddressResponse => {
   const recipientName = useSelector((state) => getNameFromAddressBookSelector(state, { address }))
-
+  // We have to check that the name returned is not UNKNOWN
-  const isInAddressBook = recipientName !== 'UNKNOWN'
+  const isInAddressBook = !sameString(recipientName, ADDRESS_BOOK_DEFAULT_NAME)
 
   return isInAddressBook
     ? {