status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[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
This commit is contained in:
Daniel Sanchez 2021-06-01 12:17:58 +02:00 committed by GitHub
parent 0d915a6bc1
commit e58b6d6b7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/routes/safe/components/AddressBook/EllipsisTransactionDetails/index.tsx
View File

@ -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>

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

@ -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' }}>

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

@ -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)}

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

@ -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)

3
src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/AddressInfo.tsx
View File

@ -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"

4
src/routes/safe/components/Transactions/TxList/OwnerRow.tsx
View File

@ -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)}

6
src/routes/safe/components/Transactions/TxList/TxInfoDetails.tsx
View File

@ -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>

6
src/routes/safe/components/Transactions/TxList/hooks/useKnownAddress.ts
View File

@ -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 }))
const isInAddressBook = recipientName !== 'UNKNOWN'
// We have to check that the name returned is not UNKNOWN
const isInAddressBook = !sameString(recipientName, ADDRESS_BOOK_DEFAULT_NAME)
return isInAddressBook
? {