Improve transaction confirmation page performance (#16205)

* Reduce the amount of calls to insight snaps * Add dep * Update LavaMoat policies * Fix selectors and revert changes to hook * Remove dep * Revert "Update LavaMoat policies" This reverts commit 7469c94.
MetaMask · Oct 28, 2022 · 012e9fa · 012e9fa
1 parent d452613
commit 012e9fa
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 23 deletions.
diff --git a/ui/hooks/flask/useTransactionInsightSnap.js b/ui/hooks/flask/useTransactionInsightSnap.js
@@ -18,7 +18,7 @@ export function useTransactionInsightSnap({ transaction, chainId, snapId }) {
     async function fetchInsight() {
       const d = await handleSnapRequest({
         snapId,
-        origin: 'test',
+        origin: '',
         handler: 'onTransaction',
         request: {
           jsonrpc: '2.0',

diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -35,6 +35,8 @@ import {
   getEIP1559V2Enabled,
   getIsBuyableChain,
   getEnsResolutionByAddress,
+  getUnapprovedTransaction,
+  getFullTxData,
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
   getInsightSnaps,
   ///: END:ONLY_INCLUDE_IN
@@ -98,10 +100,8 @@ const mapStateToProps = (state, ownProps) => {
   } = metamask;
   const { tokenData, txData, tokenProps, nonce } = confirmTransaction;
   const { txParams = {}, id: transactionId, type } = txData;
-  const transaction =
-    Object.values(unapprovedTxs).find(
-      ({ id }) => id === (transactionId || Number(paramsTransactionId)),
-    ) || {};
+  const txId = transactionId || Number(paramsTransactionId);
+  const transaction = getUnapprovedTransaction(state, txId);
   const {
     from: fromAddress,
     to: txParamsToAddress,
@@ -148,10 +148,6 @@ const mapStateToProps = (state, ownProps) => {
     gasEstimationObject,
   } = transactionFeeSelector(state, transaction);
 
-  if (transaction && transaction.simulationFails) {
-    txData.simulationFails = transaction.simulationFails;
-  }
-
   const currentNetworkUnapprovedTxs = Object.keys(unapprovedTxs)
     .filter((key) =>
       transactionMatchesNetwork(unapprovedTxs[key], chainId, network),
@@ -168,16 +164,7 @@ const mapStateToProps = (state, ownProps) => {
 
   const methodData = getKnownMethodData(state, data) || {};
 
-  let fullTxData = { ...txData, ...transaction };
-  if (customTxParamsData) {
-    fullTxData = {
-      ...fullTxData,
-      txParams: {
-        ...fullTxData.txParams,
-        data: customTxParamsData,
-      },
-    };
-  }
+  const fullTxData = getFullTxData(state, txId, customTxParamsData);
 
   const isCollectibleTransfer = Boolean(
     allCollectibleContracts?.[selectedAddress]?.[chainId]?.find((contract) => {

diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
@@ -1,7 +1,14 @@
-import { createSelector } from 'reselect';
-///: BEGIN:ONLY_INCLUDE_IN(flask)
-import { memoize } from 'lodash';
-///: END:ONLY_INCLUDE_IN
+import {
+  createSelector,
+  createSelectorCreator,
+  defaultMemoize,
+} from 'reselect';
+import {
+  ///: BEGIN:ONLY_INCLUDE_IN(flask)
+  memoize,
+  ///: END:ONLY_INCLUDE_IN
+  isEqual,
+} from 'lodash';
 import { addHexPrefix } from '../../app/scripts/lib/util';
 import {
   TEST_CHAINS,
@@ -779,6 +786,45 @@ export function getShowWhatsNewPopup(state) {
   return state.appState.showWhatsNewPopup;
 }
 
+const createDeepEqualSelector = createSelectorCreator(defaultMemoize, isEqual);
+
+export const getUnapprovedTransactions = (state) =>
+  state.metamask.unapprovedTxs;
+
+export const getTxData = (state) => state.confirmTransaction.txData;
+
+export const getUnapprovedTransaction = createDeepEqualSelector(
+  getUnapprovedTransactions,
+  (_, transactionId) => transactionId,
+  (unapprovedTxs, transactionId) => {
+    return (
+      Object.values(unapprovedTxs).find(({ id }) => id === transactionId) || {}
+    );
+  },
+);
+
+export const getFullTxData = createDeepEqualSelector(
+  getTxData,
+  (state, transactionId) => getUnapprovedTransaction(state, transactionId),
+  (_state, _transactionId, customTxParamsData) => customTxParamsData,
+  (txData, transaction, customTxParamsData) => {
+    let fullTxData = { ...txData, ...transaction };
+    if (transaction && transaction.simulationFails) {
+      txData.simulationFails = transaction.simulationFails;
+    }
+    if (customTxParamsData) {
+      fullTxData = {
+        ...fullTxData,
+        txParams: {
+          ...fullTxData.txParams,
+          data: customTxParamsData,
+        },
+      };
+    }
+    return fullTxData;
+  },
+);
+
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 export function getSnaps(state) {
   return state.metamask.snaps;