Ensure smart contract interactions are properly represented on the confirm screen (#15446)

* Ensure smart contract interactions are properly represented on the confirm screen

* Fix unit tests

* Code cleanup

* Cleanup

* Code cleanup

* Fix test

Author: danjm

app/scripts/controllers/transactions/index.js

@@ -74,6 +74,7 @@ const VALID_UNAPPROVED_TRANSACTION_TYPES = [
   TRANSACTION_TYPES.SIMPLE_SEND,
   TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER,
   TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER_FROM,
+  TRANSACTION_TYPES.CONTRACT_INTERACTION,
 ];
 
 /**

ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js

@@ -13,6 +13,7 @@ export default function UserPreferencedCurrencyDisplay({
   showEthLogo,
   type,
   showFiat,
+  showCurrencySuffix,
   ...restProps
 }) {
   const { currency, numberOfDecimals } = useUserPreferencedCurrency(type, {
@@ -43,6 +44,7 @@ export default function UserPreferencedCurrencyDisplay({
       data-testid={dataTestId}
       numberOfDecimals={numberOfDecimals}
       prefixComponent={prefixComponent}
+      suffix={showCurrencySuffix && !showEthLogo && currency}
     />
   );
 }
@@ -68,4 +70,5 @@ UserPreferencedCurrencyDisplay.propTypes = {
     PropTypes.number,
   ]),
   showFiat: PropTypes.bool,
+  showCurrencySuffix: PropTypes.bool,
 };

ui/ducks/send/send.js

@@ -18,6 +18,7 @@ import {
   INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR,
   KNOWN_RECIPIENT_ADDRESS_WARNING,
   NEGATIVE_ETH_ERROR,
+  RECIPIENT_TYPES,
 } from '../../pages/send/send.constants';
 
 import {
@@ -82,14 +83,18 @@ import {
   getTokens,
   getUnapprovedTxs,
 } from '../metamask/metamask';
+import {
+  isSmartContractAddress,
+  sumHexes,
+} from '../../helpers/utils/transactions.util';
 
 import { resetEnsResolution } from '../ens';
 import {
   isBurnAddress,
   isValidHexAddress,
   toChecksumHexAddress,
 } from '../../../shared/modules/hexstring-utils';
-import { sumHexes } from '../../helpers/utils/transactions.util';
+
 import fetchEstimatedL1Fee from '../../helpers/utils/optimism/fetchEstimatedL1Fee';
 
 import { TOKEN_STANDARDS, ETH } from '../../helpers/constants/common';
@@ -383,6 +388,7 @@ export const draftTransactionInitialState = {
     error: null,
     nickname: '',
     warning: null,
+    type: '',
     recipientWarningAcknowledged: false,
   },
   status: SEND_STATUSES.VALID,
@@ -1172,6 +1178,12 @@ const slice = createSlice({
       draftTransaction.recipient.warning = action.payload;
     },
 
+    updateRecipientType: (state, action) => {
+      const draftTransaction =
+        state.draftTransactions[state.currentTransactionUUID];
+      draftTransaction.recipient.type = action.payload;
+    },
+
     updateDraftTransactionStatus: (state, action) => {
       const draftTransaction =
         state.draftTransactions[state.currentTransactionUUID];
@@ -1876,19 +1888,24 @@ export function updateRecipientUserInput(userInput) {
     const inputIsValidHexAddress = isValidHexAddress(userInput);
     let isProbablyAnAssetContract = false;
     if (inputIsValidHexAddress) {
-      const { symbol, decimals } = getTokenMetadata(userInput, tokenMap) || {};
+      const smartContractAddress = await isSmartContractAddress(userInput);
+      if (smartContractAddress) {
+        dispatch(actions.updateRecipientType(RECIPIENT_TYPES.SMART_CONTRACT));
+        const { symbol, decimals } =
+          getTokenMetadata(userInput, tokenMap) || {};
 
-      isProbablyAnAssetContract = symbol && decimals !== undefined;
+        isProbablyAnAssetContract = symbol && decimals !== undefined;
 
-      if (!isProbablyAnAssetContract) {
-        try {
-          const { standard } = await getTokenStandardAndDetails(
-            userInput,
-            sendingAddress,
-          );
-          isProbablyAnAssetContract = Boolean(standard);
-        } catch (e) {
-          console.log(e);
+        if (!isProbablyAnAssetContract) {
+          try {
+            const { standard } = await getTokenStandardAndDetails(
+              userInput,
+              sendingAddress,
+            );
+            isProbablyAnAssetContract = Boolean(standard);
+          } catch (e) {
+            console.log(e);
+          }
         }
       }
     }
@@ -2259,7 +2276,10 @@ export function signTransaction() {
         updateTransactionGasFees(draftTransaction.id, editingTx.txParams),
       );
     } else {
-      let transactionType = TRANSACTION_TYPES.SIMPLE_SEND;
+      let transactionType =
+        draftTransaction.recipient.type === RECIPIENT_TYPES.SMART_CONTRACT
+          ? TRANSACTION_TYPES.CONTRACT_INTERACTION
+          : TRANSACTION_TYPES.SIMPLE_SEND;
 
       if (draftTransaction.asset.type !== ASSET_TYPES.NATIVE) {
         transactionType =

ui/ducks/send/send.test.js

@@ -2412,6 +2412,7 @@ describe('Send Slice', () => {
               nickname: '',
               warning: null,
               recipientWarningAcknowledged: false,
+              type: '',
             },
             status: SEND_STATUSES.VALID,
             transactionType: '0x0',
@@ -2554,6 +2555,7 @@ describe('Send Slice', () => {
               error: null,
               nickname: '',
               warning: null,
+              type: '',
               recipientWarningAcknowledged: false,
             },
             status: SEND_STATUSES.VALID,
@@ -2740,6 +2742,7 @@ describe('Send Slice', () => {
             error: null,
             warning: null,
             nickname: '',
+            type: '',
             recipientWarningAcknowledged: false,
           },
           status: SEND_STATUSES.VALID,

ui/helpers/utils/transactions.util.js

@@ -144,8 +144,11 @@ export function getLatestSubmittedTxWithNonce(
 }
 
 export async function isSmartContractAddress(address) {
-  const { isContractCode } = await readAddressAsContract(global.eth, address);
-  return isContractCode;
+  const { isContractAddress } = await readAddressAsContract(
+    global.eth,
+    address,
+  );
+  return isContractAddress;
 }
 
 export function sumHexes(...args) {

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

@@ -864,20 +864,24 @@ export default class ConfirmTransactionBase extends Component {
   }
 
   renderTitleComponent() {
-    const { title, hexTransactionAmount } = this.props;
+    const { title, hexTransactionAmount, txData } = this.props;
 
     // Title string passed in by props takes priority
     if (title) {
       return null;
     }
 
+    const isContractInteraction =
+      txData.type === TRANSACTION_TYPES.CONTRACT_INTERACTION;
+
     return (
       <UserPreferencedCurrencyDisplay
         value={hexTransactionAmount}
         type={PRIMARY}
         showEthLogo
         ethLogoHeight={24}
-        hideLabel
+        hideLabel={!isContractInteraction}
+        showCurrencySuffix={isContractInteraction}
       />
     );
   }

ui/pages/send/send.constants.js

@@ -47,6 +47,11 @@ const ENS_ILLEGAL_CHARACTER = 'ensIllegalCharacter';
 const ENS_UNKNOWN_ERROR = 'ensUnknownError';
 const ENS_REGISTRATION_ERROR = 'ensRegistrationError';
 
+const RECIPIENT_TYPES = {
+  SMART_CONTRACT: 'SMART_CONTRACT',
+  NON_CONTRACT: 'NON_CONTRACT',
+};
+
 export {
   MAX_GAS_LIMIT_DEC,
   HIGH_FEE_WARNING_MULTIPLIER,
@@ -73,4 +78,5 @@ export {
   CONFUSING_ENS_ERROR,
   TOKEN_TRANSFER_FUNCTION_SIGNATURE,
   COLLECTIBLE_TRANSFER_FROM_FUNCTION_SIGNATURE,
+  RECIPIENT_TYPES,
 };