Fixed e2e test failure

MetaMask · Jan 9, 2023 · 8220055 · 8220055
1 parent 5665d5d
commit 8220055
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 60 deletions.
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-container.test.js b/ui/components/app/confirm-page-container/confirm-page-container-container.test.js
@@ -23,10 +23,52 @@ jest.mock('../../../pages/swaps/swaps.util', () => {
   };
 });
 
-jest.mock('../../../selectors', () => {
-  return {
-    ...jest.requireActual('../../../selectors/'),
-    getTxData: jest.fn(() => ({
+describe('Confirm Page Container Container Test', () => {
+  const props = {
+    title: 'Title',
+    fromAddress: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
+    toAddress: '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8',
+    origin: 'testOrigin', // required
+    // Footer
+    onCancelAll: sinon.spy(),
+    onCancel: sinon.spy(),
+    onSubmit: sinon.spy(),
+    handleCloseEditGas: sinon.spy(),
+    // Gas Popover
+    currentTransaction: {
+      id: 8783053010106567,
+      time: 1656448479005,
+      status: 'unapproved',
+      metamaskNetworkId: '5',
+      originalGasEstimate: '0x5208',
+      userEditedGasLimit: false,
+      loadingDefaults: false,
+      dappSuggestedGasFees: null,
+      sendFlowHistory: [],
+      txParams: {
+        from: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
+        to: '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8',
+        value: '0x0',
+        gas: '0x5208',
+        maxFeePerGas: '0x59682f0d',
+        maxPriorityFeePerGas: '0x59682f00',
+      },
+      origin: 'testOrigin',
+      type: 'simpleSend',
+      userFeeLevel: 'medium',
+      defaultGasEstimates: {
+        estimateType: 'medium',
+        gas: '0x5208',
+        maxFeePerGas: '59682f0d',
+        maxPriorityFeePerGas: '59682f00',
+      },
+    },
+    isOwnedAccount: false,
+    showAccountInHeader: true,
+    showEdit: true,
+    hideSenderToRecipient: false,
+    toName: '0x7a1...E4E8',
+    txData: {
       id: 1230035278491151,
       time: 1671022500513,
       status: 'unapproved',
@@ -123,55 +165,7 @@ jest.mock('../../../selectors', () => {
         maxFeePerGas: '0',
         maxPriorityFeePerGas: '0',
       },
-    })),
-  };
-});
-
-describe('Confirm Page Container Container Test', () => {
-  const props = {
-    title: 'Title',
-    fromAddress: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
-    toAddress: '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8',
-    origin: 'testOrigin', // required
-    // Footer
-    onCancelAll: sinon.spy(),
-    onCancel: sinon.spy(),
-    onSubmit: sinon.spy(),
-    handleCloseEditGas: sinon.spy(),
-    // Gas Popover
-    currentTransaction: {
-      id: 8783053010106567,
-      time: 1656448479005,
-      status: 'unapproved',
-      metamaskNetworkId: '5',
-      originalGasEstimate: '0x5208',
-      userEditedGasLimit: false,
-      loadingDefaults: false,
-      dappSuggestedGasFees: null,
-      sendFlowHistory: [],
-      txParams: {
-        from: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
-        to: '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8',
-        value: '0x0',
-        gas: '0x5208',
-        maxFeePerGas: '0x59682f0d',
-        maxPriorityFeePerGas: '0x59682f00',
-      },
-      origin: 'testOrigin',
-      type: 'simpleSend',
-      userFeeLevel: 'medium',
-      defaultGasEstimates: {
-        estimateType: 'medium',
-        gas: '0x5208',
-        maxFeePerGas: '59682f0d',
-        maxPriorityFeePerGas: '59682f00',
-      },
     },
-    isOwnedAccount: false,
-    showAccountInHeader: true,
-    showEdit: true,
-    hideSenderToRecipient: false,
-    toName: '0x7a1...E4E8',
   };
   describe('Render and simulate button clicks', () => {
     const store = configureMockStore()(mockState);

diff --git a/...ontainer/confirm-page-container-navigation/confirm-page-container-navigation.component.js b/...ontainer/confirm-page-container-navigation/confirm-page-container-navigation.component.js
@@ -1,26 +1,29 @@
 import React, { useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import { getTxData, getUnapprovedTransactions } from '../../../../selectors';
+import PropTypes from 'prop-types';
+import {
+  getCurrentChainId,
+  getUnapprovedTransactions,
+} from '../../../../selectors';
 import { transactionMatchesNetwork } from '../../../../../shared/modules/transaction.utils';
 import { I18nContext } from '../../../../contexts/i18n';
 import { CONFIRM_TRANSACTION_ROUTE } from '../../../../helpers/constants/routes';
 import { clearConfirmTransaction } from '../../../../ducks/confirm-transaction/confirm-transaction.duck';
 import { hexToDecimal } from '../../../../../shared/lib/metamask-controller-utils';
 
-const ConfirmPageContainerNavigation = () => {
+const ConfirmPageContainerNavigation = ({ txData }) => {
   const t = useContext(I18nContext);
   const dispatch = useDispatch();
   const history = useHistory();
 
   const unapprovedTxs = useSelector(getUnapprovedTransactions);
-  const txData = useSelector(getTxData);
-
-  const network = hexToDecimal(txData.chainId);
+  const currentChainId = useSelector(getCurrentChainId);
+  const network = hexToDecimal(currentChainId);
 
   const currentNetworkUnapprovedTxs = Object.keys(unapprovedTxs)
     .filter((key) =>
-      transactionMatchesNetwork(unapprovedTxs[key], txData.chainId, network),
+      transactionMatchesNetwork(unapprovedTxs[key], currentChainId, network),
     )
     .reduce((acc, key) => ({ ...acc, [key]: unapprovedTxs[key] }), {});
 
@@ -106,4 +109,8 @@ const ConfirmPageContainerNavigation = () => {
   );
 };
 
+ConfirmPageContainerNavigation.propTypes = {
+  txData: PropTypes.object,
+};
+
 export default ConfirmPageContainerNavigation;
diff --git a/ui/components/app/confirm-page-container/confirm-page-container.component.js b/ui/components/app/confirm-page-container/confirm-page-container.component.js
@@ -84,6 +84,7 @@ export default class ConfirmPageContainer extends Component {
     origin: PropTypes.string.isRequired,
     ethGasPriceWarning: PropTypes.string,
     networkIdentifier: PropTypes.string,
+    txData: PropTypes.object,
     // Footer
     onCancelAll: PropTypes.func,
     onCancel: PropTypes.func,
@@ -167,6 +168,7 @@ export default class ConfirmPageContainer extends Component {
       accountBalance,
       assetStandard,
       isApprovalOrRejection,
+      txData,
     } = this.props;
 
     const shouldDisplayWarning =
@@ -191,7 +193,7 @@ export default class ConfirmPageContainer extends Component {
     return (
       <GasFeeContextProvider transaction={currentTransaction}>
         <div className="page-container" data-testid="page-container">
-          <ConfirmPageContainerNavigation />
+          <ConfirmPageContainerNavigation txData={txData} />
           {assetStandard === ERC20 ||
           assetStandard === ERC721 ||
           assetStandard === ERC1155 ? (

diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -1203,6 +1203,7 @@ export default class ConfirmTransactionBase extends Component {
           nativeCurrency={nativeCurrency}
           isApprovalOrRejection={isApprovalOrRejection}
           assetStandard={assetStandard}
+          txData={txData}
         />
       </TransactionModalContextProvider>
     );

diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js
@@ -238,7 +238,7 @@ export default function TokenAllowance({
   return (
     <Box className="token-allowance-container page-container">
       <Box>
-        <ConfirmPageContainerNavigation />
+        <ConfirmPageContainerNavigation txData={fullTxData} />
       </Box>
       <Box
         paddingLeft={4}