Display the address icon for the contract requesting spending cap instead of the dapp/url icon (#17858)

ui/components/app/modals/contract-details-modal/contract-details-modal.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { getAccountLink } from '@metamask/etherscan-link';
 import { useSelector } from 'react-redux';
-import classnames from 'classnames';
 import Box from '../../../ui/box';
 import Button from '../../../ui/button/button.component';
 import Tooltip from '../../../ui/tooltip/tooltip';
@@ -23,7 +22,6 @@ import {
   AlignItems,
 } from '../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
-import UrlIcon from '../../../ui/url-icon/url-icon';
 import { getAddressBookEntry } from '../../../../selectors';
 import { TokenStandard } from '../../../../../shared/constants/transaction';
 import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image';
@@ -36,8 +34,6 @@ export default function ContractDetailsModal({
   toAddress,
   chainId,
   rpcPrefs,
-  origin,
-  siteImage,
   tokenId,
   assetName,
   assetStandard,
@@ -207,30 +203,11 @@ export default function ContractDetailsModal({
           borderColor={BorderColor.borderDefault}
           className="contract-details-modal__content__contract"
         >
-          {nft ? (
           <Identicon
             className="contract-details-modal__content__contract__identicon"
             diameter={24}
             address={toAddress}
           />
-          ) : (
-            <UrlIcon
-              className={classnames({
-                'contract-details-modal__content__contract__identicon-for-unknown-contact':
-                  addressBookEntry?.data?.name === undefined,
-                'contract-details-modal__content__contract__identicon':
-                  addressBookEntry?.data?.name !== undefined,
-              })}
-              fallbackClassName={classnames({
-                'contract-details-modal__content__contract__identicon-for-unknown-contact':
-                  addressBookEntry?.data?.name === undefined,
-                'contract-details-modal__content__contract__identicon':
-                  addressBookEntry?.data?.name !== undefined,
-              })}
-              name={origin}
-              url={siteImage}
-            />
-          )}
           <Box data-testid="recipient">
             <Typography
               fontWeight={FONT_WEIGHT.BOLD}
@@ -341,14 +318,6 @@ ContractDetailsModal.propTypes = {
    * RPC prefs of the current network
    */
   rpcPrefs: PropTypes.object,
-  /**
-   * Dapp URL
-   */
-  origin: PropTypes.string,
-  /**
-   * Dapp image
-   */
-  siteImage: PropTypes.string,
   /**
    * The token id of the NFT
    */

ui/components/app/modals/contract-details-modal/contract-details-modal.stories.js

@@ -33,16 +33,6 @@ export default {
         type: 'object',
       },
     },
-    origin: {
-      control: {
-        type: 'text',
-      },
-    },
-    siteImage: {
-      control: {
-        type: 'text',
-      },
-    },
   },
   args: {
     tokenName: 'DAI',
@@ -50,8 +40,6 @@ export default {
     toAddress: '0x9bc5baf874d2da8d216ae9f137804184ee5afef4',
     chainId: '0x3',
     rpcPrefs: {},
-    origin: 'https://metamask.github.io',
-    siteImage: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
   },
 };
 

ui/components/app/modals/contract-details-modal/index.scss

@@ -11,10 +11,6 @@
         box-shadow: none;
         background: none;
       }
-
-      &__identicon-for-unknown-contact {
-        margin: 16px;
-      }
     }
   }
 }

ui/components/app/signature-request/signature-request.component.js

@@ -62,10 +62,6 @@ export default class SignatureRequest extends PureComponent {
      * RPC prefs of the current network
      */
     rpcPrefs: PropTypes.object,
-    /**
-     * Dapp image
-     */
-    siteImage: PropTypes.string,
     conversionRate: PropTypes.number,
     nativeCurrency: PropTypes.string,
     provider: PropTypes.object,
@@ -157,7 +153,6 @@ export default class SignatureRequest extends PureComponent {
       hardwareWalletRequiresConnection,
       chainId,
       rpcPrefs,
-      siteImage,
       txData,
       subjectMetadata,
       conversionRate,
@@ -309,8 +304,6 @@ export default class SignatureRequest extends PureComponent {
             toAddress={verifyingContract}
             chainId={chainId}
             rpcPrefs={rpcPrefs}
-            origin={origin}
-            siteImage={siteImage}
             onClose={() => this.setState({ showContractDetails: false })}
             isContractRequestingSignature
           />

ui/components/app/signature-request/signature-request.container.js

@@ -32,20 +32,15 @@ function mapStateToProps(state, ownProps) {
   const isLedgerWallet = isAddressLedger(state, from);
   const chainId = getCurrentChainId(state);
   const rpcPrefs = getRpcPrefsForCurrentProvider(state);
-  const subjectMetadata = getSubjectMetadata(state);
   const unconfirmedMessagesList = unconfirmedMessagesHashSelector(state);
   const unapprovedMessagesCount = getTotalUnapprovedMessagesCount(state);
 
-  const { iconUrl: siteImage = '' } =
-    subjectMetadata[txData.msgParams.origin] || {};
-
   return {
     provider,
     isLedgerWallet,
     hardwareWalletRequiresConnection,
     chainId,
     rpcPrefs,
-    siteImage,
     unconfirmedMessagesList,
     unapprovedMessagesCount,
     mostRecentOverviewPage: getMostRecentOverviewPage(state),
@@ -85,7 +80,6 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
     hardwareWalletRequiresConnection,
     chainId,
     rpcPrefs,
-    siteImage,
     conversionRate,
     nativeCurrency,
     provider,
@@ -138,7 +132,6 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
     hardwareWalletRequiresConnection,
     chainId,
     rpcPrefs,
-    siteImage,
     conversionRate,
     nativeCurrency,
     provider,

ui/pages/token-allowance/token-allowance.js

@@ -518,8 +518,6 @@ export default function TokenAllowance({
           toAddress={toAddress}
           chainId={fullTxData.chainId}
           rpcPrefs={rpcPrefs}
-          origin={origin}
-          siteImage={siteImage}
         />
       )}
     </Box>