add asset_type to transactions (#13858)

app/scripts/controllers/transactions/index.js

@@ -46,6 +46,7 @@ import {
   CHAIN_ID_TO_GAS_LIMIT_BUFFER_MAP,
 } from '../../../../shared/constants/network';
 import {
+  determineTransactionAssetType,
   determineTransactionType,
   isEIP1559Transaction,
 } from '../../../../shared/modules/transaction.utils';
@@ -130,6 +131,7 @@ export default class TransactionController extends EventEmitter {
     this.getEventFragmentById = opts.getEventFragmentById;
     this.getDeviceModel = opts.getDeviceModel;
     this.getAccountType = opts.getAccountType;
+    this.getTokenStandardAndDetails = opts.getTokenStandardAndDetails;
 
     this.memStore = new ObservableStore({});
     this.query = new EthQuery(this.provider);
@@ -1833,6 +1835,12 @@ export default class TransactionController extends EventEmitter {
     } = txMeta;
     const source = referrer === 'metamask' ? 'user' : 'dapp';
 
+    const { assetType, tokenStandard } = await determineTransactionAssetType(
+      txMeta,
+      this.query,
+      this.getTokenStandardAndDetails,
+    );
+
     const gasParams = {};
 
     if (isEIP1559Transaction(txMeta)) {
@@ -1906,6 +1914,8 @@ export default class TransactionController extends EventEmitter {
       gas_edit_attempted: 'none',
       account_type: await this.getAccountType(this.getSelectedAddress()),
       device_model: await this.getDeviceModel(this.getSelectedAddress()),
+      asset_type: assetType,
+      token_standard: tokenStandard,
     };
 
     const sensitiveProperties = {

app/scripts/controllers/transactions/index.test.js

@@ -15,6 +15,7 @@ import {
   TRANSACTION_TYPES,
   TRANSACTION_ENVELOPE_TYPES,
   TRANSACTION_EVENTS,
+  ASSET_TYPES,
 } from '../../../../shared/constants/transaction';
 
 import { SECOND } from '../../../../shared/constants/time';
@@ -24,6 +25,7 @@ import {
 } from '../../../../shared/constants/gas';
 import { TRANSACTION_ENVELOPE_TYPE_NAMES } from '../../../../ui/helpers/constants/transactions';
 import { METAMASK_CONTROLLER_EVENTS } from '../../metamask-controller';
+import { TOKEN_STANDARDS } from '../../../../ui/helpers/constants/common';
 import TransactionController from '.';
 
 const noop = () => true;
@@ -1469,6 +1471,8 @@ describe('Transaction Controller', function () {
             source: 'user',
             type: TRANSACTION_TYPES.SIMPLE_SEND,
             account_type: 'MetaMask',
+            asset_type: ASSET_TYPES.NATIVE,
+            token_standard: TOKEN_STANDARDS.NONE,
             device_model: 'N/A',
           },
           sensitiveProperties: {
@@ -1546,6 +1550,8 @@ describe('Transaction Controller', function () {
             source: 'user',
             type: TRANSACTION_TYPES.SIMPLE_SEND,
             account_type: 'MetaMask',
+            asset_type: ASSET_TYPES.NATIVE,
+            token_standard: TOKEN_STANDARDS.NONE,
             device_model: 'N/A',
           },
           sensitiveProperties: {
@@ -1633,6 +1639,8 @@ describe('Transaction Controller', function () {
             source: 'dapp',
             type: TRANSACTION_TYPES.SIMPLE_SEND,
             account_type: 'MetaMask',
+            asset_type: ASSET_TYPES.NATIVE,
+            token_standard: TOKEN_STANDARDS.NONE,
             device_model: 'N/A',
           },
           sensitiveProperties: {
@@ -1712,6 +1720,8 @@ describe('Transaction Controller', function () {
             source: 'dapp',
             type: TRANSACTION_TYPES.SIMPLE_SEND,
             account_type: 'MetaMask',
+            asset_type: ASSET_TYPES.NATIVE,
+            token_standard: TOKEN_STANDARDS.NONE,
             device_model: 'N/A',
           },
           sensitiveProperties: {
@@ -1791,6 +1801,8 @@ describe('Transaction Controller', function () {
           source: 'dapp',
           type: TRANSACTION_TYPES.SIMPLE_SEND,
           account_type: 'MetaMask',
+          asset_type: ASSET_TYPES.NATIVE,
+          token_standard: TOKEN_STANDARDS.NONE,
           device_model: 'N/A',
         },
         sensitiveProperties: {
@@ -1852,6 +1864,8 @@ describe('Transaction Controller', function () {
           gas_edit_attempted: 'none',
           gas_edit_type: 'none',
           account_type: 'MetaMask',
+          asset_type: ASSET_TYPES.NATIVE,
+          token_standard: TOKEN_STANDARDS.NONE,
           device_model: 'N/A',
         },
         sensitiveProperties: {
@@ -1923,6 +1937,8 @@ describe('Transaction Controller', function () {
           source: 'dapp',
           type: TRANSACTION_TYPES.SIMPLE_SEND,
           account_type: 'MetaMask',
+          asset_type: ASSET_TYPES.NATIVE,
+          token_standard: TOKEN_STANDARDS.NONE,
           device_model: 'N/A',
         },
         sensitiveProperties: {

app/scripts/metamask-controller.js

@@ -717,6 +717,9 @@ export default class MetamaskController extends EventEmitter {
       ),
       getAccountType: this.getAccountType.bind(this),
       getDeviceModel: this.getDeviceModel.bind(this),
+      getTokenStandardAndDetails: this.assetsContractController.getTokenStandardAndDetails.bind(
+        this.assetsContractController,
+      ),
     });
     this.txController.on('newUnapprovedTx', () => opts.showUserConfirmation());
 

shared/constants/transaction.js

@@ -305,3 +305,18 @@ export const TRANSACTION_EVENTS = {
   REJECTED: 'Transaction Rejected',
   SUBMITTED: 'Transaction Submitted',
 };
+
+/**
+ * The types of assets that a user can send
+ * 1. NATIVE - The native asset for the current network, such as ETH
+ * 2. TOKEN - An ERC20 token.
+ * 3. COLLECTIBLE - An ERC721 or ERC1155 token.
+ * 4. UNKNOWN - A transaction interacting with a contract that isn't a token
+ *  method interaction will be marked as dealing with an unknown asset type.
+ */
+export const ASSET_TYPES = {
+  NATIVE: 'NATIVE',
+  TOKEN: 'TOKEN',
+  COLLECTIBLE: 'COLLECTIBLE',
+  UNKNOWN: 'UNKNOWN',
+};

shared/modules/transaction.utils.js

@@ -2,7 +2,8 @@ import { isHexString } from 'ethereumjs-util';
 import { ethers } from 'ethers';
 import abi from 'human-standard-token-abi';
 import log from 'loglevel';
-import { TRANSACTION_TYPES } from '../constants/transaction';
+import { TOKEN_STANDARDS } from '../../ui/helpers/constants/common';
+import { ASSET_TYPES, TRANSACTION_TYPES } from '../constants/transaction';
 import { readAddressAsContract } from './contract-utils';
 import { isEqualCaseInsensitive } from './string-utils';
 
@@ -131,3 +132,86 @@ export async function determineTransactionType(txParams, query) {
 
   return { type: result, getCodeResponse: contractCode };
 }
+
+const INFERRABLE_TRANSACTION_TYPES = [
+  TRANSACTION_TYPES.TOKEN_METHOD_APPROVE,
+  TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER,
+  TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER_FROM,
+  TRANSACTION_TYPES.CONTRACT_INTERACTION,
+  TRANSACTION_TYPES.SIMPLE_SEND,
+];
+
+/**
+ * Given a transaction meta object, determine the asset type that the
+ * transaction is dealing with, as well as the standard for the token if it
+ * is a token transaction.
+ *
+ * @param {import('../constants/transaction').TransactionMeta} txMeta -
+ *  transaction meta object
+ * @param {EthQuery} query - EthQuery instance
+ * @param {Function} getTokenStandardAndDetails - function to get token
+ *  standards and details.
+ * @returns {{ assetType: string, tokenStandard: string}}
+ */
+export async function determineTransactionAssetType(
+  txMeta,
+  query,
+  getTokenStandardAndDetails,
+) {
+  // If the transaction type is already one of the inferrable types, then we do
+  // not need to re-establish the type.
+  let inferrableType = txMeta.type;
+  if (INFERRABLE_TRANSACTION_TYPES.includes(txMeta.type) === false) {
+    // Because we will deal with all types of transactions (including swaps)
+    // we want to get an inferrable type of transaction that isn't special cased
+    // that way we can narrow the number of logic gates required.
+    const result = await determineTransactionType(txMeta.txParams, query);
+    inferrableType = result.type;
+  }
+
+  // If the inferred type of the transaction is one of those that are part of
+  // the token contract standards, we can use the getTokenStandardAndDetails
+  // method to get the asset type.
+  const isTokenMethod = [
+    TRANSACTION_TYPES.TOKEN_METHOD_APPROVE,
+    TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER,
+    TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER_FROM,
+  ].find((methodName) => methodName === inferrableType);
+
+  if (
+    isTokenMethod ||
+    // We can also check any contract interaction type to see if the to address
+    // is a token contract. If it isn't, then the method will throw and we can
+    // fall through to the other checks.
+    inferrableType === TRANSACTION_TYPES.CONTRACT_INTERACTION
+  ) {
+    try {
+      // We don't need a balance check, so the second parameter to
+      // getTokenStandardAndDetails is omitted.
+      const details = await getTokenStandardAndDetails(txMeta.txParams.to);
+      if (details.standard) {
+        return {
+          assetType:
+            details.standard === TOKEN_STANDARDS.ERC20
+              ? ASSET_TYPES.TOKEN
+              : ASSET_TYPES.COLLECTIBLE,
+          tokenStandard: details.standard,
+        };
+      }
+    } catch {
+      // noop, We expect errors here but we don't need to report them or do
+      // anything in response.
+    }
+  }
+
+  // If the transaction is interacting with a contract but isn't a token method
+  // we use the 'UNKNOWN' value to show that it isn't a transaction sending any
+  // particular asset.
+  if (inferrableType === TRANSACTION_TYPES.CONTRACT_INTERACTION) {
+    return {
+      assetType: ASSET_TYPES.UNKNOWN,
+      tokenStandard: TOKEN_STANDARDS.NONE,
+    };
+  }
+  return { assetType: ASSET_TYPES.NATIVE, tokenStandard: TOKEN_STANDARDS.NONE };
+}

ui/components/app/asset-list-item/asset-list-item.js

@@ -9,10 +9,11 @@ import Tooltip from '../../ui/tooltip';
 import InfoIcon from '../../ui/icon/info-icon.component';
 import Button from '../../ui/button';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { ASSET_TYPES, updateSendAsset } from '../../../ducks/send';
+import { updateSendAsset } from '../../../ducks/send';
 import { SEND_ROUTE } from '../../../helpers/constants/routes';
 import { SEVERITIES } from '../../../helpers/constants/design-system';
 import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
+import { ASSET_TYPES } from '../../../../shared/constants/transaction';
 import { MetaMetricsContext } from '../../../contexts/metametrics.new';
 
 const AssetListItem = ({

ui/components/app/collectible-details/collectible-details.js

@@ -45,12 +45,13 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
 import CollectibleOptions from '../collectible-options/collectible-options';
 import Button from '../../ui/button';
-import { ASSET_TYPES, updateSendAsset } from '../../../ducks/send';
+import { updateSendAsset } from '../../../ducks/send';
 import InfoTooltip from '../../ui/info-tooltip';
 import { ERC721 } from '../../../helpers/constants/common';
 import { usePrevious } from '../../../hooks/usePrevious';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
+import { ASSET_TYPES } from '../../../../shared/constants/transaction';
 
 export default function CollectibleDetails({ collectible }) {
   const {

ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js

@@ -60,7 +60,9 @@ jest.mock('../../../../ducks/gas/gas.duck', () => ({
 }));
 
 jest.mock('../../../../ducks/send', () => {
-  const { ASSET_TYPES } = jest.requireActual('../../../../ducks/send');
+  const { ASSET_TYPES } = jest.requireActual(
+    '../../../../../shared/constants/transaction',
+  );
   return {
     useCustomGas: jest.fn(),
     updateGasLimit: jest.fn(),

ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js

@@ -19,7 +19,6 @@ import {
   updateGasPrice,
   useCustomGas,
   getSendAsset,
-  ASSET_TYPES,
 } from '../../../../ducks/send';
 import {
   conversionRateSelector as getConversionRate,
@@ -54,7 +53,10 @@ import {
   isBalanceSufficient,
 } from '../../../../pages/send/send.utils';
 import { MIN_GAS_LIMIT_DEC } from '../../../../pages/send/send.constants';
-import { TRANSACTION_STATUSES } from '../../../../../shared/constants/transaction';
+import {
+  ASSET_TYPES,
+  TRANSACTION_STATUSES,
+} from '../../../../../shared/constants/transaction';
 import { GAS_LIMITS } from '../../../../../shared/constants/gas';
 import { updateTransactionGasFees } from '../../../../ducks/metamask/metamask';
 import GasModalPageContainer from './gas-modal-page-container.component';

ui/components/app/wallet-overview/token-overview.js

@@ -15,7 +15,7 @@ import {
 import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
 import { useTokenTracker } from '../../../hooks/useTokenTracker';
 import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount';
-import { ASSET_TYPES, updateSendAsset } from '../../../ducks/send';
+import { updateSendAsset } from '../../../ducks/send';
 import { setSwapsFromToken } from '../../../ducks/swaps/swaps';
 import {
   getCurrentKeyring,
@@ -29,6 +29,7 @@ import IconButton from '../../ui/icon-button';
 import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
 import { showModal } from '../../../store/actions';
 import { MetaMetricsContext } from '../../../contexts/metametrics.new';
+import { ASSET_TYPES } from '../../../../shared/constants/transaction';
 import WalletOverview from './wallet-overview';
 
 const TokenOverview = ({ className, token }) => {

ui/contexts/metametrics.js

@@ -15,11 +15,12 @@ import {
   getNumberOfAccounts,
   getNumberOfTokens,
 } from '../selectors/selectors';
-import { getSendAsset, ASSET_TYPES } from '../ducks/send';
+import { getSendAsset } from '../ducks/send';
 import { txDataSelector } from '../selectors/confirm-transaction';
 import { getEnvironmentType } from '../../app/scripts/lib/util';
 import { trackMetaMetricsEvent } from '../store/actions';
 import { getNativeCurrency } from '../ducks/metamask/metamask';
+import { ASSET_TYPES } from '../../shared/constants/transaction';
 
 export const MetaMetricsContext = createContext(() => {
   captureException(

ui/ducks/send/send.js

@@ -99,7 +99,10 @@ import {
   ETH,
   GWEI,
 } from '../../helpers/constants/common';
-import { TRANSACTION_ENVELOPE_TYPES } from '../../../shared/constants/transaction';
+import {
+  ASSET_TYPES,
+  TRANSACTION_ENVELOPE_TYPES,
+} from '../../../shared/constants/transaction';
 import { readAddressAsContract } from '../../../shared/modules/contract-utils';
 import { INVALID_ASSET_TYPE } from '../../helpers/constants/error-keys';
 import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils';
@@ -164,18 +167,6 @@ export const GAS_INPUT_MODES = {
   CUSTOM: 'CUSTOM',
 };
 
-/**
- * The types of assets that a user can send
- * 1. NATIVE - The native asset for the current network, such as ETH
- * 2. TOKEN - An ERC20 token.
- * 2. COLLECTIBLE - An ERC721 or ERC1155 token.
- */
-export const ASSET_TYPES = {
-  NATIVE: 'NATIVE',
-  TOKEN: 'TOKEN',
-  COLLECTIBLE: 'COLLECTIBLE',
-};
-
 /**
  * The modes that the amount field can be set by
  * 1. INPUT - the user provides the amount by typing in the field

ui/ducks/send/send.test.js

@@ -16,6 +16,7 @@ import {
 } from '../../../shared/constants/network';
 import { GAS_ESTIMATE_TYPES, GAS_LIMITS } from '../../../shared/constants/gas';
 import {
+  ASSET_TYPES,
   TRANSACTION_ENVELOPE_TYPES,
   TRANSACTION_TYPES,
 } from '../../../shared/constants/transaction';
@@ -34,7 +35,6 @@ import sendReducer, {
   toggleSendMaxMode,
   signTransaction,
   SEND_STATUSES,
-  ASSET_TYPES,
   SEND_STAGES,
   AMOUNT_MODES,
   RECIPIENT_SEARCH_MODES,

ui/helpers/constants/common.js

@@ -9,6 +9,13 @@ export const ERC20 = 'ERC20';
 export const ERC721 = 'ERC721';
 export const ERC1155 = 'ERC1155';
 
+export const TOKEN_STANDARDS = {
+  ERC20,
+  ERC721,
+  ERC1155,
+  NONE: 'NONE',
+};
+
 export const GAS_ESTIMATE_TYPES = {
   SLOW: 'SLOW',
   AVERAGE: 'AVERAGE',

ui/pages/confirm-send-ether/confirm-send-ether.container.js

@@ -1,8 +1,9 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
-import { ASSET_TYPES, editTransaction } from '../../ducks/send';
+import { editTransaction } from '../../ducks/send';
 import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
+import { ASSET_TYPES } from '../../../shared/constants/transaction';
 import ConfirmSendEther from './confirm-send-ether.component';
 
 const mapStateToProps = (state) => {

ui/pages/confirm-send-token/confirm-send-token.container.js

@@ -3,8 +3,9 @@ import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
 import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
 import { showSendTokenPage } from '../../store/actions';
-import { ASSET_TYPES, editTransaction } from '../../ducks/send';
+import { editTransaction } from '../../ducks/send';
 import { sendTokenTokenAmountAndToAddressSelector } from '../../selectors';
+import { ASSET_TYPES } from '../../../shared/constants/transaction';
 import ConfirmSendToken from './confirm-send-token.component';
 
 const mapStateToProps = (state) => {

ui/pages/confirm-send-token/confirm-send-token.js

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import ConfirmTokenTransactionBase from '../confirm-token-transaction-base/confirm-token-transaction-base';
 import { SEND_ROUTE } from '../../helpers/constants/routes';
-import { ASSET_TYPES, editTransaction } from '../../ducks/send';
+import { editTransaction } from '../../ducks/send';
 import {
   contractExchangeRateSelector,
   getCurrentCurrency,
@@ -16,6 +16,7 @@ import {
 import { ERC20, ERC721 } from '../../helpers/constants/common';
 import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
 import { showSendTokenPage } from '../../store/actions';
+import { ASSET_TYPES } from '../../../shared/constants/transaction';
 
 export default function ConfirmSendToken({
   assetStandard,

ui/pages/send/send-content/send-amount-row/send-amount-row.component.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import SendRowWrapper from '../send-row-wrapper';
 import UserPreferencedCurrencyInput from '../../../../components/app/user-preferenced-currency-input';
 import UserPreferencedTokenInput from '../../../../components/app/user-preferenced-token-input';
-import { ASSET_TYPES } from '../../../../ducks/send';
+import { ASSET_TYPES } from '../../../../../shared/constants/transaction';
 import AmountMaxButton from './amount-max-button';
 
 export default class SendAmountRow extends Component {

ui/pages/send/send-content/send-amount-row/send-amount-row.component.test.js

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import SendRowWrapper from '../send-row-wrapper/send-row-wrapper.component';
 import UserPreferencedTokenInput from '../../../../components/app/user-preferenced-token-input';
-import { ASSET_TYPES } from '../../../../ducks/send';
+import { ASSET_TYPES } from '../../../../../shared/constants/transaction';
 import SendAmountRow from './send-amount-row.component';
 
 import AmountMaxButton from './amount-max-button/amount-max-button';

ui/pages/send/send-content/send-asset-row/send-asset-row.component.js

@@ -6,8 +6,8 @@ import TokenBalance from '../../../../components/ui/token-balance';
 import TokenListDisplay from '../../../../components/app/token-list-display';
 import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display';
 import { ERC20, ERC721, PRIMARY } from '../../../../helpers/constants/common';
-import { ASSET_TYPES } from '../../../../ducks/send';
 import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-utils';
+import { ASSET_TYPES } from '../../../../../shared/constants/transaction';
 
 export default class SendAssetRow extends Component {
   static propTypes = {

ui/pages/send/send-content/send-content.component.js

@@ -9,7 +9,7 @@ import {
   GAS_PRICE_EXCESSIVE_ERROR_KEY,
   INSUFFICIENT_FUNDS_FOR_GAS_ERROR_KEY,
 } from '../../../helpers/constants/error-keys';
-import { ASSET_TYPES } from '../../../ducks/send';
+import { ASSET_TYPES } from '../../../../shared/constants/transaction';
 import SendAmountRow from './send-amount-row';
 import SendHexDataRow from './send-hex-data-row';
 import SendAssetRow from './send-asset-row';

ui/pages/send/send-header/send-header.component.js

@@ -5,12 +5,12 @@ import PageContainerHeader from '../../../components/ui/page-container/page-cont
 import { getMostRecentOverviewPage } from '../../../ducks/history/history';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
-  ASSET_TYPES,
   getSendAsset,
   getSendStage,
   resetSendState,
   SEND_STAGES,
 } from '../../../ducks/send';
+import { ASSET_TYPES } from '../../../../shared/constants/transaction';
 
 export default function SendHeader() {
   const history = useHistory();

ui/pages/send/send-header/send-header.component.test.js

@@ -3,8 +3,9 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
 import { fireEvent } from '@testing-library/react';
-import { ASSET_TYPES, initialState, SEND_STAGES } from '../../../ducks/send';
+import { initialState, SEND_STAGES } from '../../../ducks/send';
 import { renderWithProvider } from '../../../../test/jest';
+import { ASSET_TYPES } from '../../../../shared/constants/transaction';
 import SendHeader from './send-header.component';
 
 const middleware = [thunk];