create branching logic for different types of contract interactions for identifying the contract address (#13776)

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -28,7 +28,7 @@ export default class ConfirmPageContainerContent extends Component {
     errorMessage: PropTypes.string,
     hasSimulationError: PropTypes.bool,
     hideSubtitle: PropTypes.bool,
-    identiconAddress: PropTypes.string,
+    tokenAddress: PropTypes.string,
     nonce: PropTypes.string,
     subtitleComponent: PropTypes.node,
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -106,7 +106,7 @@ export default class ConfirmPageContainerContent extends Component {
       titleComponent,
       subtitleComponent,
       hideSubtitle,
-      identiconAddress,
+      tokenAddress,
       nonce,
       detailsComponent,
       dataComponent,
@@ -179,7 +179,7 @@ export default class ConfirmPageContainerContent extends Component {
           titleComponent={titleComponent}
           subtitleComponent={subtitleComponent}
           hideSubtitle={hideSubtitle}
-          identiconAddress={identiconAddress}
+          tokenAddress={tokenAddress}
           nonce={nonce}
           origin={origin}
           hideTitle={hideTitle}

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js

@@ -20,22 +20,40 @@ const ConfirmPageContainerSummary = (props) => {
     subtitleComponent,
     hideSubtitle,
     className,
-    identiconAddress,
+    tokenAddress,
+    toAddress,
     nonce,
     origin,
     hideTitle,
     image,
     transactionType,
-    toAddress,
   } = props;
 
   const [showNicknamePopovers, setShowNicknamePopovers] = useState(false);
   const t = useI18nContext();
-  const { toName, isTrusted } = useAddressDetails(toAddress);
 
-  const isContractTypeTransaction =
+  const contractInitiatedTransactionType = [
-    transactionType === TRANSACTION_TYPES.CONTRACT_INTERACTION;
+    TRANSACTION_TYPES.CONTRACT_INTERACTION,
-  const checksummedAddress = toChecksumHexAddress(toAddress);
+    TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER,
+    TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER_FROM,
+  ];
+  const isContractTypeTransaction = contractInitiatedTransactionType.includes(
+    transactionType,
+  );
+  let contractAddress;
+  if (isContractTypeTransaction) {
+    // If the transaction is TOKEN_METHOD_TRANSFER or TOKEN_METHOD_TRANSFER_FROM
+    // the contract address is passed down as tokenAddress, if it is anyother
+    // type of contract interaction it is passed as toAddress
+    contractAddress =
+      transactionType === TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER ||
+      transactionType === TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER_FROM
+        ? tokenAddress
+        : toAddress;
+  }
+
+  const { toName, isTrusted } = useAddressDetails(contractAddress);
+  const checksummedAddress = toChecksumHexAddress(contractAddress);
 
   const renderImage = () => {
     if (image) {
@@ -46,12 +64,12 @@ const ConfirmPageContainerSummary = (props) => {
           src={image}
         />
       );
-    } else if (identiconAddress) {
+    } else if (contractAddress) {
       return (
         <Identicon
           className="confirm-page-container-summary__icon"
           diameter={36}
-          address={identiconAddress}
+          address={contractAddress}
           image={image}
         />
       );
@@ -127,11 +145,11 @@ ConfirmPageContainerSummary.propTypes = {
   subtitleComponent: PropTypes.node,
   hideSubtitle: PropTypes.bool,
   className: PropTypes.string,
-  identiconAddress: PropTypes.string,
+  tokenAddress: PropTypes.string,
+  toAddress: PropTypes.string,
   nonce: PropTypes.string,
   origin: PropTypes.string.isRequired,
   hideTitle: PropTypes.bool,
-  toAddress: PropTypes.string,
   transactionType: PropTypes.string,
 };
 

ui/components/app/confirm-page-container/confirm-page-container.component.js

@@ -67,7 +67,7 @@ export default class ConfirmPageContainer extends Component {
     dataComponent: PropTypes.node,
     dataHexComponent: PropTypes.node,
     detailsComponent: PropTypes.node,
-    identiconAddress: PropTypes.string,
+    tokenAddress: PropTypes.string,
     nonce: PropTypes.string,
     warning: PropTypes.string,
     unapprovedTxCount: PropTypes.number,
@@ -126,7 +126,7 @@ export default class ConfirmPageContainer extends Component {
       onCancelAll,
       onCancel,
       onSubmit,
-      identiconAddress,
+      tokenAddress,
       nonce,
       unapprovedTxCount,
       warning,
@@ -236,7 +236,7 @@ export default class ConfirmPageContainer extends Component {
               dataHexComponent={dataHexComponent}
               errorMessage={errorMessage}
               errorKey={errorKey}
-              identiconAddress={identiconAddress}
+              tokenAddress={tokenAddress}
               nonce={nonce}
               warning={warning}
               onCancelAll={onCancelAll}

ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js

@@ -93,7 +93,7 @@ export default function ConfirmTokenTransactionBase({
       toAddress={toAddress}
       image={image}
       onEdit={onEdit}
-      identiconAddress={tokenAddress}
+      tokenAddress={tokenAddress}
       title={title}
       subtitleComponent={subtitleComponent()}
       primaryTotalTextOverride={`${title} + ${ethTransactionTotal} ${nativeCurrency}`}

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -114,7 +114,7 @@ export default class ConfirmTransactionBase extends Component {
     dataHexComponent: PropTypes.node,
     hideData: PropTypes.bool,
     hideSubtitle: PropTypes.bool,
-    identiconAddress: PropTypes.string,
+    tokenAddress: PropTypes.string,
     onEdit: PropTypes.func,
     subtitleComponent: PropTypes.node,
     title: PropTypes.string,
@@ -998,7 +998,7 @@ export default class ConfirmTransactionBase extends Component {
       methodData,
       title,
       hideSubtitle,
-      identiconAddress,
+      tokenAddress,
       contentComponent,
       onEdit,
       nonce,
@@ -1080,7 +1080,7 @@ export default class ConfirmTransactionBase extends Component {
           contentComponent={contentComponent}
           nonce={customNonceValue || nonce}
           unapprovedTxCount={unapprovedTxCount}
-          identiconAddress={identiconAddress}
+          tokenAddress={tokenAddress}
           errorMessage={submitError}
           errorKey={errorKey}
           hasSimulationError={hasSimulationError}