Merge branch 'develop' into fix-missing-usd-conversion

Author: adonesky1

.circleci/config.yml

@@ -670,6 +670,13 @@ jobs:
       - run:
           name: test:coverage:jest
           command: yarn test:coverage:jest
+      - run: 
+          name: Validate coverage thresholds
+          command: |
+            if ! git diff --exit-code jest.config.js development/jest.config.js; then
+              echo "Detected changes in coverage thresholds"
+              exit 1
+            fi
       - persist_to_workspace:
           root: .
           paths:

app/scripts/controllers/metametrics.js

@@ -621,7 +621,9 @@ export default class MetaMetricsController {
    */
   _getAllNFTsFlattened = memoize((allCollectibles = {}) => {
     return Object.values(allCollectibles)
-      .flatMap((chainNFTs) => Object.values(chainNFTs))
+      .reduce((result, chainNFTs) => {
+        return result.concat(Object.values(chainNFTs));
+      }, [])
       .flat();
   });
 

app/scripts/controllers/transactions/index.js

@@ -647,6 +647,35 @@ export default class TransactionController extends EventEmitter {
     return this._getTransaction(txId);
   }
 
+  /**
+   * append new sendFlowHistory to the transaction with id if the transaction
+   * state is unapproved. Returns the updated transaction.
+   *
+   * @param {string} txId - transaction id
+   * @param {Array<{ entry: string, timestamp: number }>} sendFlowHistory -
+   *  history to add to the sendFlowHistory property of txMeta.
+   * @returns {TransactionMeta} the txMeta of the updated transaction
+   */
+  updateTransactionSendFlowHistory(txId, sendFlowHistory) {
+    this._throwErrorIfNotUnapprovedTx(txId, 'updateTransactionSendFlowHistory');
+    const txMeta = this._getTransaction(txId);
+
+    // only update what is defined
+    const note = `Update sendFlowHistory for ${txId}`;
+
+    this.txStateManager.updateTransaction(
+      {
+        ...txMeta,
+        sendFlowHistory: [
+          ...(txMeta?.sendFlowHistory ?? []),
+          ...sendFlowHistory,
+        ],
+      },
+      note,
+    );
+    return this._getTransaction(txId);
+  }
+
   // ====================================================================================================================================================
 
   /**
@@ -656,9 +685,15 @@ export default class TransactionController extends EventEmitter {
    * @param txParams
    * @param origin
    * @param transactionType
+   * @param sendFlowHistory
    * @returns {txMeta}
    */
-  async addUnapprovedTransaction(txParams, origin, transactionType) {
+  async addUnapprovedTransaction(
+    txParams,
+    origin,
+    transactionType,
+    sendFlowHistory = [],
+  ) {
     if (
       transactionType !== undefined &&
       !VALID_UNAPPROVED_TRANSACTION_TYPES.includes(transactionType)
@@ -683,6 +718,7 @@ export default class TransactionController extends EventEmitter {
     let txMeta = this.txStateManager.generateTxMeta({
       txParams: normalizedTxParams,
       origin,
+      sendFlowHistory,
     });
 
     if (origin === ORIGIN_METAMASK) {

app/scripts/controllers/transactions/tx-state-manager.js

@@ -127,6 +127,7 @@ export default class TransactionStateManager extends EventEmitter {
       chainId,
       loadingDefaults: true,
       dappSuggestedGasFees,
+      sendFlowHistory: [],
       ...opts,
     };
   }

app/scripts/metamask-controller.js

@@ -1637,6 +1637,9 @@ export default class MetamaskController extends EventEmitter {
       updateTransactionGasFees: txController.updateTransactionGasFees.bind(
         txController,
       ),
+      updateTransactionSendFlowHistory: txController.updateTransactionSendFlowHistory.bind(
+        txController,
+      ),
 
       updateSwapApprovalTransaction: txController.updateSwapApprovalTransaction.bind(
         txController,

development/jest.config.js

@@ -2,7 +2,7 @@ module.exports = {
   displayName: '/development',
   collectCoverageFrom: ['<rootDir>/**/*.js'],
   coverageDirectory: '../jest-coverage/development/',
-  coverageReporters: ['html', 'text-summary'],
+  coverageReporters: ['html', 'text-summary', 'json-summary'],
   coverageThreshold: {
     './development/build/transforms/**/*.js': {
       branches: 100,

jest.config.js

@@ -6,13 +6,13 @@ module.exports = {
   ],
   coverageDirectory: './jest-coverage/main',
   coveragePathIgnorePatterns: ['.stories.js', '.snap'],
-  coverageReporters: ['html', 'text-summary'],
+  coverageReporters: ['html', 'text-summary', 'json-summary'],
   coverageThreshold: {
     global: {
-      branches: 35,
-      functions: 37,
-      lines: 43,
-      statements: 43,
+      branches: 44,
+      functions: 42,
+      lines: 48,
+      statements: 48,
     },
     './app/scripts/controllers/permissions/**/*.js': {
       branches: 100,

package.json

@@ -34,7 +34,7 @@
     "test:e2e:firefox:snaps": "SELENIUM_BROWSER=firefox node test/e2e/run-all.js --snaps",
     "test:e2e:single": "node test/e2e/run-e2e-test.js",
     "test:coverage:mocha": "nyc --reporter=text --reporter=html yarn test:unit:mocha",
-    "test:coverage:jest": "yarn test:unit:jest --coverage --maxWorkers=2",
+    "test:coverage:jest": "yarn test:unit:jest --coverage --maxWorkers=2 && yarn jest-it-up -m 5",
     "ganache:start": "./development/run-ganache.sh",
     "sentry:publish": "node ./development/sentry-publish.js",
     "lint": "yarn lint:prettier && yarn lint:eslint && yarn lint:tsc && yarn lint:styles",
@@ -276,7 +276,7 @@
     "@typescript-eslint/parser": "^4.20.0",
     "addons-linter": "1.14.0",
     "babelify": "^10.0.0",
-    "bify-module-groups": "^1.0.0",
+    "bify-module-groups": "^2.0.0",
     "brfs": "^2.0.2",
     "browser-util-inspect": "^0.2.0",
     "browserify": "^16.5.1",
@@ -325,6 +325,7 @@
     "improved-yarn-audit": "^3.0.0",
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.1",
+    "jest-it-up": "^2.0.2",
     "jsdom": "^11.2.0",
     "koa": "^2.7.0",
     "lavamoat": "^6.1.2",

ui/ducks/send/send.js

@@ -60,6 +60,7 @@ import {
   getTokenStandardAndDetails,
   showModal,
   addUnapprovedTransactionAndRouteToConfirmationPage,
+  updateTransactionSendFlowHistory,
 } from '../../store/actions';
 import { setCustomGasLimit } from '../gas/gas.duck';
 import {
@@ -110,6 +111,7 @@ import {
 import { readAddressAsContract } from '../../../shared/modules/contract-utils';
 import { INVALID_ASSET_TYPE } from '../../helpers/constants/error-keys';
 import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils';
+import { getValueFromWeiHex } from '../../helpers/utils/confirm-tx.util';
 // typedefs
 /**
  * @typedef {import('@reduxjs/toolkit').PayloadAction} PayloadAction
@@ -684,12 +686,19 @@ export const initialState = {
     // Layer 1 gas fee total on multi-layer fee networks
     layer1GasTotal: '0x0',
   },
+  history: [],
 };
 
 const slice = createSlice({
   name,
   initialState,
   reducers: {
+    addHistoryEntry: (state, action) => {
+      state.history.push({
+        entry: action.payload,
+        timestamp: Date.now(),
+      });
+    },
     /**
      * update current amount.value in state and run post update validation of
      * the amount field and the send state. Recomputes the draftTransaction
@@ -1402,9 +1411,10 @@ const {
   updateGasLimit,
   validateRecipientUserInput,
   updateRecipientSearchMode,
+  addHistoryEntry,
 } = actions;
 
-export { useDefaultGas, useCustomGas, updateGasLimit };
+export { useDefaultGas, useCustomGas, updateGasLimit, addHistoryEntry };
 
 // Action Creators
 
@@ -1421,6 +1431,9 @@ export { useDefaultGas, useCustomGas, updateGasLimit };
  */
 export function updateGasPrice(gasPrice) {
   return (dispatch) => {
+    dispatch(
+      addHistoryEntry(`sendFlow - user set legacy gasPrice to ${gasPrice}`),
+    );
     dispatch(
       actions.updateGasFees({
         gasPrice,
@@ -1452,8 +1465,36 @@ export function resetSendState() {
  */
 export function updateSendAmount(amount) {
   return async (dispatch, getState) => {
-    await dispatch(actions.updateSendAmount(amount));
     const state = getState();
+    let logAmount = amount;
+    if (state[name].asset.type === ASSET_TYPES.TOKEN) {
+      const multiplier = Math.pow(
+        10,
+        Number(state[name].asset.details?.decimals || 0),
+      );
+      const decimalValueString = conversionUtil(addHexPrefix(amount), {
+        fromNumericBase: 'hex',
+        toNumericBase: 'dec',
+        toCurrency: state[name].asset.details?.symbol,
+        conversionRate: multiplier,
+        invertConversionRate: true,
+      });
+
+      logAmount = `${Number(decimalValueString) ? decimalValueString : ''} ${
+        state[name].asset.details?.symbol
+      }`;
+    } else {
+      const ethValue = getValueFromWeiHex({
+        value: amount,
+        toCurrency: ETH,
+        numberOfDecimals: 8,
+      });
+      logAmount = `${ethValue} ${ETH}`;
+    }
+    await dispatch(
+      addHistoryEntry(`sendFlow - user set amount to ${logAmount}`),
+    );
+    await dispatch(actions.updateSendAmount(amount));
     if (state.send.amount.mode === AMOUNT_MODES.MAX) {
       await dispatch(actions.updateAmountMode(AMOUNT_MODES.INPUT));
     }
@@ -1482,6 +1523,19 @@ export function updateSendAmount(amount) {
  */
 export function updateSendAsset({ type, details }) {
   return async (dispatch, getState) => {
+    dispatch(addHistoryEntry(`sendFlow - user set asset type to ${type}`));
+    dispatch(
+      addHistoryEntry(
+        `sendFlow - user set asset symbol to ${details?.symbol ?? 'undefined'}`,
+      ),
+    );
+    dispatch(
+      addHistoryEntry(
+        `sendFlow - user set asset address to ${
+          details?.address ?? 'undefined'
+        }`,
+      ),
+    );
     const state = getState();
     let { balance, error } = state.send.asset;
     const userAddress = state.send.account.address ?? getSelectedAddress(state);
@@ -1580,6 +1634,11 @@ export function updateSendAsset({ type, details }) {
  * it only applicable for use within action creators.
  */
 const debouncedValidateRecipientUserInput = debounce((dispatch, payload) => {
+  dispatch(
+    addHistoryEntry(
+      `sendFlow - user typed ${payload.userInput} into recipient input field`,
+    ),
+  );
   dispatch(validateRecipientUserInput(payload));
 }, 300);
 
@@ -1600,6 +1659,7 @@ export function updateRecipientUserInput(userInput) {
     const useTokenDetection = getUseTokenDetection(state);
     const tokenAddressList = Object.keys(getTokenList(state));
     debouncedValidateRecipientUserInput(dispatch, {
+      userInput,
       chainId,
       tokens,
       useTokenDetection,
@@ -1610,12 +1670,22 @@ export function updateRecipientUserInput(userInput) {
 
 export function useContactListForRecipientSearch() {
   return (dispatch) => {
+    dispatch(
+      addHistoryEntry(
+        `sendFlow - user selected back to all on recipient screen`,
+      ),
+    );
     dispatch(updateRecipientSearchMode(RECIPIENT_SEARCH_MODES.CONTACT_LIST));
   };
 }
 
 export function useMyAccountsForRecipientSearch() {
   return (dispatch) => {
+    dispatch(
+      addHistoryEntry(
+        `sendFlow - user selected transfer to my accounts on recipient screen`,
+      ),
+    );
     dispatch(updateRecipientSearchMode(RECIPIENT_SEARCH_MODES.MY_ACCOUNTS));
   };
 }
@@ -1638,6 +1708,8 @@ export function useMyAccountsForRecipientSearch() {
  */
 export function updateRecipient({ address, nickname }) {
   return async (dispatch, getState) => {
+    // Do not addHistoryEntry here as this is called from a number of places
+    // each with significance to the user and transaction history.
     const state = getState();
     const nicknameFromAddressBookEntryOrAccountName =
       getAddressBookEntryOrAccountName(state, address) ?? '';
@@ -1656,6 +1728,7 @@ export function updateRecipient({ address, nickname }) {
  */
 export function resetRecipientInput() {
   return async (dispatch) => {
+    await dispatch(addHistoryEntry(`sendFlow - user cleared recipient input`));
     await dispatch(updateRecipientUserInput(''));
     await dispatch(updateRecipient({ address: '', nickname: '' }));
     await dispatch(resetEnsResolution());
@@ -1675,6 +1748,9 @@ export function resetRecipientInput() {
  */
 export function updateSendHexData(hexData) {
   return async (dispatch, getState) => {
+    await dispatch(
+      addHistoryEntry(`sendFlow - user added custom hexData ${hexData}`),
+    );
     await dispatch(actions.updateUserInputHexData(hexData));
     const state = getState();
     if (state.send.asset.type === ASSET_TYPES.NATIVE) {
@@ -1695,9 +1771,11 @@ export function toggleSendMaxMode() {
     if (state.send.amount.mode === AMOUNT_MODES.MAX) {
       await dispatch(actions.updateAmountMode(AMOUNT_MODES.INPUT));
       await dispatch(actions.updateSendAmount('0x0'));
+      await dispatch(addHistoryEntry(`sendFlow - user toggled max mode off`));
     } else {
       await dispatch(actions.updateAmountMode(AMOUNT_MODES.MAX));
       await dispatch(actions.updateAmountToMax());
+      await dispatch(addHistoryEntry(`sendFlow - user toggled max mode on`));
     }
     await dispatch(computeEstimatedGasLimit());
   };
@@ -1746,6 +1824,12 @@ export function signTransaction() {
           eip1559support ? eip1559OnlyTxParamsToUpdate : txParams,
         ),
       };
+      await dispatch(
+        addHistoryEntry(
+          `sendFlow - user clicked next and transaction should be updated in controller`,
+        ),
+      );
+      await dispatch(updateTransactionSendFlowHistory(id, state[name].history));
       dispatch(updateEditableParams(id, editingTx.txParams));
       dispatch(updateTransactionGasFees(id, editingTx.txParams));
     } else {
@@ -1757,10 +1841,17 @@ export function signTransaction() {
             ? TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER_FROM
             : TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER;
       }
+      await dispatch(
+        addHistoryEntry(
+          `sendFlow - user clicked next and transaction should be added to controller`,
+        ),
+      );
+
       dispatch(
         addUnapprovedTransactionAndRouteToConfirmationPage(
           txParams,
           transactionType,
+          state[name].history,
         ),
       );
     }
@@ -1775,6 +1866,11 @@ export function editTransaction(
 ) {
   return async (dispatch, getState) => {
     const state = getState();
+    await dispatch(
+      addHistoryEntry(
+        `sendFlow - user clicked edit on transaction with id ${transactionId}`,
+      ),
+    );
     const unapprovedTransactions = getUnapprovedTxs(state);
     const transaction = unapprovedTransactions[transactionId];
     const { txParams } = transaction;