Known Addresses V1 (#2113)

* Tx Custom: Add toInfo (icon+name) in table row. * Custom tx: add to info if available * update EthHashInfo API usage Co-authored-by: Fernando <fernando.greco@gmail.com>
2025-02-23 15:08:05 +00:00 · 2021-04-07 08:10:48 -03:00 · 2021-04-07 08:10:48 -03:00 · 9f3ff69a75
commit 9f3ff69a75
parent c96e3192ff
21 changed files with 93 additions and 56 deletions
--- a/package.json
+++ b/package.json
@ -161,7 +161,7 @@
    "@gnosis.pm/safe-apps-sdk": "1.0.3",
    "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
    "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#7ebc414",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#2e427ee",
    "@gnosis.pm/util-contracts": "2.0.6",
    "@ledgerhq/hw-transport-node-hid-singleton": "5.45.0",
    "@material-ui/core": "^4.11.0",
--- a/src/components/AppLayout/Header/components/ProviderInfo/ProviderAccessible.tsx
+++ b/src/components/AppLayout/Header/components/ProviderInfo/ProviderAccessible.tsx
@ -89,8 +89,8 @@ const ProviderInfo = ({ connected, provider, userAddress }: ProviderInfoProps):
            <EthHashInfo
              hash={userAddress}
              shortenHash={4}
-              showIdenticon
-              identiconSize="xs"
+              showAvatar
+              avatarSize="xs"
              textColor={addressColor}
              textSize="sm"
            />
--- a/src/components/CustomIconText/index.tsx
+++ b/src/components/CustomIconText/index.tsx
@ -12,9 +12,11 @@ const Icon = styled.img`
  margin-right: 9px;
 `

-export const CustomIconText = ({ iconUrl, text }: { iconUrl: string; text?: string }): ReactElement => (
+type Props = { iconUrl: string | null | undefined; text?: string }
+
+export const CustomIconText = ({ iconUrl, text }: Props): ReactElement => (
  <Wrapper>
-    <Icon alt={text} src={iconUrl} />
+    {iconUrl && <Icon alt={text} src={iconUrl} />}
    {text && <Text size="xl">{text}</Text>}
  </Wrapper>
 )
--- a/src/components/DecodeTxs/index.tsx
+++ b/src/components/DecodeTxs/index.tsx
@ -69,7 +69,7 @@ export const BasicTxInfo = ({
        </Text>
        <EthHashInfo
          hash={txRecipient}
-          showIdenticon
+          showAvatar
          textSize="lg"
          showCopyBtn
          explorerUrl={getExplorerInfo(txRecipient)}
@ -96,7 +96,7 @@ export const getParameterElement = (parameter: DecodedDataBasicParameter, index:
    valueElement = (
      <EthHashInfo
        hash={parameter.value}
-        showIdenticon
+        showAvatar
        textSize="lg"
        showCopyBtn
        explorerUrl={getExplorerInfo(parameter.value)}
--- a/src/components/SafeListSidebar/SafeList/AddressWrapper.tsx
+++ b/src/components/SafeListSidebar/SafeList/AddressWrapper.tsx
@ -62,7 +62,7 @@ export const AddressWrapper = (props: Props): React.ReactElement => {

  return (
    <div className={classes.wrapper}>
-      <EthHashInfo hash={safe.address} name={safe.name} showIdenticon shortenHash={4} />
+      <EthHashInfo hash={safe.address} name={safe.name} showAvatar shortenHash={4} />

      <div className={classes.addressDetails}>
        <Text size="xl">{`${formatAmount(safe.ethBalance)} ${nativeCoin.name}`}</Text>
--- a/src/logic/contracts/safeContracts.ts
+++ b/src/logic/contracts/safeContracts.ts
@ -123,23 +123,22 @@ export const estimateGasForDeployingSafe = async (
    data: proxyFactoryData,
    from: userAccount,
    to: proxyFactoryMaster.options.address,
-  }).then(value => value * 2)
+  }).then((value) => value * 2)
 }

 export const getGnosisSafeInstanceAt = (safeAddress: string): GnosisSafe => {
  const web3 = getWeb3()
  return (new web3.eth.Contract(GnosisSafeSol.abi as AbiItem[], safeAddress) as unknown) as GnosisSafe
-  
 }

 /**
 * Creates a Contract instance of the SpendingLimitModule contract
 */
- export const getSpendingLimitContract = () => {
+export const getSpendingLimitContract = () => {
  const web3 = getWeb3()

-    return (new web3.eth.Contract(
-     SpendingLimitModule.abi as AbiItem[],
-     SPENDING_LIMIT_MODULE_ADDRESS,
-   ) as unknown) as AllowanceModule
+  return (new web3.eth.Contract(
+    SpendingLimitModule.abi as AbiItem[],
+    SPENDING_LIMIT_MODULE_ADDRESS,
+  ) as unknown) as AllowanceModule
 }
--- a/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx
+++ b/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx
@ -219,7 +219,7 @@ export const ReviewConfirm = ({

          <Container>
            {/* Safe */}
-            <EthHashInfo name={safeName} hash={safeAddress} showIdenticon showCopyBtn explorerUrl={explorerUrl} />
+            <EthHashInfo name={safeName} hash={safeAddress} showAvatar showCopyBtn explorerUrl={explorerUrl} />
            <StyledBlock>
              <Text size="md">Balance:</Text>
              <Text size="md" strong>{`${ethBalance} ${nativeCoin.symbol}`}</Text>
--- a/src/routes/safe/components/Balances/SendModal/SafeInfo/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/SafeInfo/index.tsx
@ -32,7 +32,7 @@ const SafeInfo = (): React.ReactElement => {
        hash={safeAddress}
        name={safeName}
        explorerUrl={getExplorerInfo(safeAddress)}
-        showIdenticon
+        showAvatar
        showCopyBtn
      />
      {ethBalance && (
--- a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx
@ -148,7 +148,7 @@ const BaseAddressBookInput = ({
        />
      )}
      getOptionLabel={({ address }) => address}
-      renderOption={({ address, name }) => <EthHashInfo hash={address} name={name} showIdenticon />}
+      renderOption={({ address, name }) => <EthHashInfo hash={address} name={name} showAvatar />}
      role="listbox"
      style={{ display: 'flex', flexGrow: 1 }}
    />
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
@ -151,7 +151,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
              </Paragraph>
            </Row>
            <Row align="center" margin="md">
-              <EthHashInfo hash={tx.contractAddress as string} showIdenticon showCopyBtn explorerUrl={explorerUrl} />
+              <EthHashInfo hash={tx.contractAddress as string} showAvatar showCopyBtn explorerUrl={explorerUrl} />
            </Row>
            <Row margin="xs">
              <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
--- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
@ -265,7 +265,7 @@ const SendFunds = ({
                      <EthHashInfo
                        hash={selectedEntry.address}
                        name={selectedEntry.name}
-                        showIdenticon
+                        showAvatar
                        showCopyBtn
                        explorerUrl={getExplorerInfo(selectedEntry.address)}
                      />
--- a/src/routes/safe/components/Settings/SpendingLimit/FormFields/Beneficiary.tsx
+++ b/src/routes/safe/components/Settings/SpendingLimit/FormFields/Beneficiary.tsx
@ -81,7 +81,7 @@ const Beneficiary = (): ReactElement => {
        hash={selectedEntry.address}
        name={selectedEntry.name}
        showCopyBtn
-        showIdenticon
+        showAvatar
        textSize="lg"
        shortenHash={4}
        explorerUrl={getExplorerInfo(selectedEntry.address)}
--- a/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/AddressInfo.tsx
+++ b/src/routes/safe/components/Settings/SpendingLimit/InfoDisplay/AddressInfo.tsx
@ -24,7 +24,7 @@ const AddressInfo = ({ address, cut = 4, title }: AddressInfoProps): ReactElemen
        hash={address}
        name={sameString(name, 'UNKNOWN') ? undefined : name}
        showCopyBtn
-        showIdenticon
+        showAvatar
        textSize="lg"
        explorerUrl={explorerUrl}
        shortenHash={cut}
--- a/src/routes/safe/components/Transactions/TxList/AddressInfo.tsx
+++ b/src/routes/safe/components/Transactions/TxList/AddressInfo.tsx
@ -5,7 +5,13 @@ import { getExplorerInfo } from 'src/config'

 import { getNameFromAddressBookSelector } from 'src/logic/addressBook/store/selectors'

-export const AddressInfo = ({ address }: { address: string }): ReactElement | null => {
+type Props = {
+  address: string
+  name?: string | undefined
+  avatarUrl?: string | undefined
+}
+
+export const AddressInfo = ({ address, name, avatarUrl }: Props): ReactElement | null => {
  const recipientName = useSelector((state) => getNameFromAddressBookSelector(state, address))

  if (address === '') {
@ -15,8 +21,9 @@ export const AddressInfo = ({ address }: { address: string }): ReactElement | nu
  return (
    <EthHashInfo
      hash={address}
-      name={recipientName === 'UNKNOWN' ? undefined : recipientName}
-      showIdenticon
+      name={recipientName === 'UNKNOWN' ? name : recipientName}
+      showAvatar
+      customAvatar={avatarUrl}
      showCopyBtn
      explorerUrl={getExplorerInfo(address)}
    />
--- a/src/routes/safe/components/Transactions/TxList/OwnerRow.tsx
+++ b/src/routes/safe/components/Transactions/TxList/OwnerRow.tsx
@ -12,7 +12,7 @@ export const OwnerRow = ({ ownerAddress }: { ownerAddress: string }): ReactEleme
    <EthHashInfo
      hash={ownerAddress}
      name={ownerName === 'UNKNOWN' ? '' : ownerName}
-      showIdenticon
+      showAvatar
      showCopyBtn
      explorerUrl={getExplorerInfo(ownerAddress)}
      shortenHash={4}
--- a/src/routes/safe/components/Transactions/TxList/TxData.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxData.tsx
@ -1,7 +1,12 @@
 import React, { ReactElement, ReactNode } from 'react'

 import { getNetworkInfo } from 'src/config'
-import { ExpandedTxDetails, TransactionData } from 'src/logic/safe/store/models/types/gateway.d'
+import {
+  ExpandedTxDetails,
+  isCustomTxInfo,
+  TransactionData,
+  TransactionInfo,
+} from 'src/logic/safe/store/models/types/gateway.d'
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import {
  DeleteSpendingLimitDetails,
@ -20,23 +25,39 @@ const { nativeCoin } = getNetworkInfo()
 type DetailsWithTxInfoProps = {
  children: ReactNode
  txData: TransactionData
+  txInfo: TransactionInfo
 }

-const DetailsWithTxInfo = ({ children, txData }: DetailsWithTxInfoProps): ReactElement => (
-  <>
-    <TxInfoDetails
-      address={txData.to}
-      title={`Send ${txData.value ? fromTokenUnit(txData.value, nativeCoin.decimals) : 'n/a'} ${nativeCoin.symbol} to:`}
-    />
-    {children}
-  </>
-)
+const DetailsWithTxInfo = ({ children, txData, txInfo }: DetailsWithTxInfoProps): ReactElement => {
+  const amount = txData.value ? fromTokenUnit(txData.value, nativeCoin.decimals) : 'n/a'
+  let name
+  let avatarUrl
+
+  if (isCustomTxInfo(txInfo)) {
+    name = txInfo.toInfo.name
+    avatarUrl = txInfo.toInfo.logoUri
+  }
+
+  return (
+    <>
+      <TxInfoDetails
+        address={txData.to}
+        name={name}
+        avatarUrl={avatarUrl}
+        title={`Send ${amount} ${nativeCoin.symbol} to:`}
+      />
+
+      {children}
+    </>
+  )
+}

 type TxDataProps = {
  txData: ExpandedTxDetails['txData']
+  txInfo: TransactionInfo
 }

-export const TxData = ({ txData }: TxDataProps): ReactElement | null => {
+export const TxData = ({ txData, txInfo }: TxDataProps): ReactElement | null => {
  // nothing to render
  if (!txData) {
    return null
@ -51,7 +72,7 @@ export const TxData = ({ txData }: TxDataProps): ReactElement | null => {

    // we render the hex encoded data
    return (
-      <DetailsWithTxInfo txData={txData}>
+      <DetailsWithTxInfo txData={txData} txInfo={txInfo}>
        <HexEncodedData title="Data (hex encoded)" hexData={txData.hexData} />
      </DetailsWithTxInfo>
    )
@ -74,7 +95,7 @@ export const TxData = ({ txData }: TxDataProps): ReactElement | null => {

  // we render the decoded data
  return (
-    <DetailsWithTxInfo txData={txData}>
+    <DetailsWithTxInfo txData={txData} txInfo={txInfo}>
      <MethodDetails data={txData.dataDecoded} />
    </DetailsWithTxInfo>
  )
--- a/src/routes/safe/components/Transactions/TxList/TxDetails.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxDetails.tsx
@ -74,7 +74,7 @@ const TxDataGroup = ({ txDetails }: { txDetails: ExpandedTxDetails }): ReactElem
    return null
  }

-  return <TxData txData={txDetails.txData} />
+  return <TxData txData={txDetails.txData} txInfo={txDetails.txInfo} />
 }

 type TxDetailsProps = {
--- a/src/routes/safe/components/Transactions/TxList/TxInfo.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxInfo.tsx
@ -1,18 +1,10 @@
 import React, { ReactElement } from 'react'

-import {
-  ExpandedTxDetails,
-  isSettingsChangeTxInfo,
-  isTransferTxInfo,
-} from 'src/logic/safe/store/models/types/gateway.d'
+import { TransactionInfo, isSettingsChangeTxInfo, isTransferTxInfo } from 'src/logic/safe/store/models/types/gateway.d'
 import { TxInfoSettings } from './TxInfoSettings'
 import { TxInfoTransfer } from './TxInfoTransfer'

-type TxInfoProps = {
-  txInfo: ExpandedTxDetails['txInfo']
-}
-
-export const TxInfo = ({ txInfo }: TxInfoProps): ReactElement | null => {
+export const TxInfo = ({ txInfo }: { txInfo: TransactionInfo }): ReactElement | null => {
  if (isSettingsChangeTxInfo(txInfo)) {
    return <TxInfoSettings settingsInfo={txInfo.settingsInfo} />
  }
--- a/src/routes/safe/components/Transactions/TxList/TxInfoDetails.tsx
+++ b/src/routes/safe/components/Transactions/TxList/TxInfoDetails.tsx
@ -21,11 +21,20 @@ const SingleRow = styled.div`
 type TxInfoDetailsProps = {
  title: string
  address: string
+  name?: string | undefined
+  avatarUrl?: string | undefined
  isTransferType?: boolean
  txInfo?: Transfer
 }

-export const TxInfoDetails = ({ title, address, isTransferType, txInfo }: TxInfoDetailsProps): ReactElement => {
+export const TxInfoDetails = ({
+  title,
+  address,
+  isTransferType,
+  txInfo,
+  name,
+  avatarUrl,
+}: TxInfoDetailsProps): ReactElement => {
  const recipientName = useSelector((state) => getNameFromAddressBookSelector(state, address))
  const knownAddress = recipientName !== 'UNKNOWN'

@ -59,6 +68,7 @@ export const TxInfoDetails = ({ title, address, isTransferType, txInfo }: TxInfo
    selectedToken: ZERO_ADDRESS,
    tokenAmount: '0',
  })
+
  useEffect(() => {
    if (txInfo) {
      const isCollectible = txInfo.transferInfo.type === 'ERC721'
@ -76,7 +86,7 @@ export const TxInfoDetails = ({ title, address, isTransferType, txInfo }: TxInfo
  return (
    <InfoDetails title={title}>
      <SingleRow>
-        <AddressInfo address={address} />
+        <AddressInfo address={address} name={name} avatarUrl={avatarUrl} />
        <EllipsisTransactionDetails
          address={address}
          knownAddress={knownAddress}
--- a/src/routes/safe/components/Transactions/TxList/hooks/useTransactionType.ts
+++ b/src/routes/safe/components/Transactions/TxList/hooks/useTransactionType.ts
@ -10,7 +10,7 @@ import OutgoingTxIcon from 'src/routes/safe/components/Transactions/TxList/asset
 import SettingsTxIcon from 'src/routes/safe/components/Transactions/TxList/assets/settings.svg'

 export type TxTypeProps = {
-  icon: string
+  icon: string | null
  text: string
 }

@ -50,6 +50,12 @@ export const useTransactionType = (tx: Transaction): TxTypeProps => {
          break
        }

+        const toInfo = tx.txInfo.toInfo
+        if (toInfo) {
+          setType({ icon: toInfo.logoUri, text: toInfo.name })
+          break
+        }
+
        setType({ icon: CustomTxIcon, text: 'Contract interaction' })
        break
      }
--- a/yarn.lock
+++ b/yarn.lock
@ -1596,9 +1596,9 @@
    solc "0.5.14"
    truffle "^5.1.21"

-"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#7ebc414":
+"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#2e427ee":
  version "0.5.0"
-  resolved "https://github.com/gnosis/safe-react-components.git#7ebc414ae975d60846704c5a8db5e61c30348d12"
+  resolved "https://github.com/gnosis/safe-react-components.git#2e427ee36694c7964301fc155b0c080101a34bed"
  dependencies:
    classnames "^2.2.6"
    react-media "^1.10.0"