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

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 {
@@ -388,6 +389,7 @@ export const draftTransactionInitialState = {
     error: null,
     nickname: '',
     warning: null,
+    type: '',
     recipientWarningAcknowledged: false,
   },
   status: SEND_STATUSES.VALID,
@@ -1169,6 +1171,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];
@@ -1881,6 +1889,7 @@ export function updateRecipientUserInput(userInput) {
     if (inputIsValidHexAddress) {
       const smartContractAddress = await isSmartContractAddress(userInput);
       if (smartContractAddress) {
+        dispatch(actions.updateRecipientType(RECIPIENT_TYPES.SMART_CONTRACT));
         const { symbol, decimals } =
           getTokenMetadata(userInput, tokenMap) || {};
 
@@ -2270,7 +2279,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

@@ -2428,6 +2428,7 @@ describe('Send Slice', () => {
               nickname: '',
               warning: null,
               recipientWarningAcknowledged: false,
+              type: '',
             },
             status: SEND_STATUSES.VALID,
             transactionType: '0x0',
@@ -2570,6 +2571,7 @@ describe('Send Slice', () => {
               error: null,
               nickname: '',
               warning: null,
+              type: '',
               recipientWarningAcknowledged: false,
             },
             status: SEND_STATUSES.VALID,
@@ -2759,6 +2761,7 @@ describe('Send Slice', () => {
             error: null,
             warning: null,
             nickname: '',
+            type: '',
             recipientWarningAcknowledged: false,
           },
           status: SEND_STATUSES.VALID,

ui/helpers/utils/transactions.util.js

@@ -128,8 +128,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

@@ -870,20 +870,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,
@@ -72,4 +77,5 @@ export {
   CONFUSING_ENS_ERROR,
   TOKEN_TRANSFER_FUNCTION_SIGNATURE,
   COLLECTIBLE_TRANSFER_FROM_FUNCTION_SIGNATURE,
+  RECIPIENT_TYPES,
 };