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
index 008abbdab388..8bbbdd072544 100644
--- 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,13 +23,116 @@ jest.mock('../../../pages/swaps/swaps.util', () => {
   };
 });
 
+jest.mock('../../../selectors', () => {
+  return {
+    ...jest.requireActual('../../../selectors/'),
+    getTxData: jest.fn(() => ({
+      id: 1230035278491151,
+      time: 1671022500513,
+      status: 'unapproved',
+      metamaskNetworkId: '80001',
+      originalGasEstimate: '0xea60',
+      userEditedGasLimit: false,
+      chainId: '0x13881',
+      loadingDefaults: false,
+      dappSuggestedGasFees: {
+        gasPrice: '0x4a817c800',
+        gas: '0xea60',
+      },
+      sendFlowHistory: [],
+      txParams: {
+        from: '0xdd34b35ca1de17dfcdc07f79ff1f8f94868c40a1',
+        to: '0x7a67ff4a59594a56d46e9308a5c6e197fa83a3cf',
+        value: '0x0',
+        data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
+        gas: '0xea60',
+        maxFeePerGas: '0x0',
+        maxPriorityFeePerGas: '0x0',
+      },
+      origin: 'https://metamask.github.io',
+      type: 'simpleSend',
+      history: [
+        {
+          id: 1230035278491151,
+          time: 1671022500513,
+          status: 'unapproved',
+          metamaskNetworkId: '80001',
+          originalGasEstimate: '0xea60',
+          userEditedGasLimit: false,
+          chainId: '0x13881',
+          loadingDefaults: true,
+          dappSuggestedGasFees: {
+            gasPrice: '0x4a817c800',
+            gas: '0xea60',
+          },
+          sendFlowHistory: [],
+          txParams: {
+            from: '0xdd34b35ca1de17dfcdc07f79ff1f8f94868c40a1',
+            to: '0x7a67ff4a59594a56d46e9308a5c6e197fa83a3cf',
+            value: '0x0',
+            data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
+            gas: '0xea60',
+            gasPrice: '0x4a817c800',
+          },
+          origin: 'https://metamask.github.io',
+          type: 'simpleSend',
+        },
+        [
+          {
+            op: 'remove',
+            path: '/txParams/gasPrice',
+            note: 'Added new unapproved transaction.',
+            timestamp: 1671022501288,
+          },
+          {
+            op: 'add',
+            path: '/txParams/maxFeePerGas',
+            value: '0x0',
+          },
+          {
+            op: 'add',
+            path: '/txParams/maxPriorityFeePerGas',
+            value: '0x0',
+          },
+          {
+            op: 'replace',
+            path: '/loadingDefaults',
+            value: false,
+          },
+          {
+            op: 'add',
+            path: '/userFeeLevel',
+            value: 'custom',
+          },
+          {
+            op: 'add',
+            path: '/defaultGasEstimates',
+            value: {
+              estimateType: 'custom',
+              gas: '0xea60',
+              maxFeePerGas: '0',
+              maxPriorityFeePerGas: '0',
+            },
+          },
+        ],
+      ],
+      userFeeLevel: 'custom',
+      defaultGasEstimates: {
+        estimateType: 'custom',
+        gas: '0xea60',
+        maxFeePerGas: '0',
+        maxPriorityFeePerGas: '0',
+      },
+    })),
+  };
+});
+
 describe('Confirm Page Container Container Test', () => {
   const props = {
     title: 'Title',
     fromAddress: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
     toAddress: '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8',
     origin: 'testOrigin', // required
-    onNextTx: sinon.spy(),
     // Footer
     onCancelAll: sinon.spy(),
     onCancel: sinon.spy(),
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js b/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
index 06b944a6e710..37e8f666eb04 100755
--- a/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
@@ -1,19 +1,48 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { getTxData, 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 = (props) => {
-  const {
-    onNextTx,
-    totalTx,
-    positionOfCurrentTx,
-    nextTxId,
-    prevTxId,
-    showNavigation,
-    firstTx,
-    lastTx,
-    ofText,
-    requestsWaitingText,
-  } = props;
+const ConfirmPageContainerNavigation = () => {
+  const t = useContext(I18nContext);
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const unapprovedTxs = useSelector(getUnapprovedTransactions);
+  const txData = useSelector(getTxData);
+
+  const network = hexToDecimal(txData.chainId);
+
+  const currentNetworkUnapprovedTxs = Object.keys(unapprovedTxs)
+    .filter((key) =>
+      transactionMatchesNetwork(unapprovedTxs[key], txData.chainId, network),
+    )
+    .reduce((acc, key) => ({ ...acc, [key]: unapprovedTxs[key] }), {});
+
+  const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs);
+  const currentPosition = enumUnapprovedTxs.indexOf(
+    txData.id ? txData.id.toString() : '',
+  );
+
+  const totalTx = enumUnapprovedTxs.length;
+  const positionOfCurrentTx = currentPosition + 1;
+  const nextTxId = enumUnapprovedTxs[currentPosition + 1];
+  const prevTxId = enumUnapprovedTxs[currentPosition - 1];
+  const showNavigation = enumUnapprovedTxs.length > 1;
+  const firstTx = enumUnapprovedTxs[0];
+  const lastTx = enumUnapprovedTxs[enumUnapprovedTxs.length - 1];
+
+  const onNextTx = (txId) => {
+    if (txId) {
+      dispatch(clearConfirmTransaction());
+      history.push(`${CONFIRM_TRANSACTION_ROUTE}/${txId}`);
+    }
+  };
 
   return (
     <div
@@ -46,10 +75,10 @@ const ConfirmPageContainerNavigation = (props) => {
       </div>
       <div className="confirm-page-container-navigation__textcontainer">
         <div className="confirm-page-container-navigation__navtext">
-          {positionOfCurrentTx} {ofText} {totalTx}
+          {positionOfCurrentTx} {t('ofTextNofM')} {totalTx}
         </div>
         <div className="confirm-page-container-navigation__longtext">
-          {requestsWaitingText}
+          {t('requestsAwaitingAcknowledgement')}
         </div>
       </div>
       <div
@@ -77,17 +106,4 @@ const ConfirmPageContainerNavigation = (props) => {
   );
 };
 
-ConfirmPageContainerNavigation.propTypes = {
-  totalTx: PropTypes.number,
-  positionOfCurrentTx: PropTypes.number,
-  onNextTx: PropTypes.func,
-  nextTxId: PropTypes.string,
-  prevTxId: PropTypes.string,
-  showNavigation: PropTypes.bool,
-  firstTx: PropTypes.string,
-  lastTx: PropTypes.string,
-  ofText: PropTypes.string,
-  requestsWaitingText: PropTypes.string,
-};
-
 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
index b4ea1a3fb725..52e5d1d12f6c 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js
@@ -83,17 +83,6 @@ export default class ConfirmPageContainer extends Component {
     origin: PropTypes.string.isRequired,
     ethGasPriceWarning: PropTypes.string,
     networkIdentifier: PropTypes.string,
-    // Navigation
-    totalTx: PropTypes.number,
-    positionOfCurrentTx: PropTypes.number,
-    nextTxId: PropTypes.string,
-    prevTxId: PropTypes.string,
-    showNavigation: PropTypes.bool,
-    onNextTx: PropTypes.func,
-    firstTx: PropTypes.string,
-    lastTx: PropTypes.string,
-    ofText: PropTypes.string,
-    requestsWaitingText: PropTypes.string,
     // Footer
     onCancelAll: PropTypes.func,
     onCancel: PropTypes.func,
@@ -158,16 +147,6 @@ export default class ConfirmPageContainer extends Component {
       nonce,
       unapprovedTxCount,
       warning,
-      totalTx,
-      positionOfCurrentTx,
-      nextTxId,
-      prevTxId,
-      showNavigation,
-      onNextTx,
-      firstTx,
-      lastTx,
-      ofText,
-      requestsWaitingText,
       hideSenderToRecipient,
       showAccountInHeader,
       origin,
@@ -208,18 +187,7 @@ export default class ConfirmPageContainer extends Component {
     return (
       <GasFeeContextProvider transaction={currentTransaction}>
         <div className="page-container" data-testid="page-container">
-          <ConfirmPageContainerNavigation
-            totalTx={totalTx}
-            positionOfCurrentTx={positionOfCurrentTx}
-            nextTxId={nextTxId}
-            prevTxId={prevTxId}
-            showNavigation={showNavigation}
-            onNextTx={(txId) => onNextTx(txId)}
-            firstTx={firstTx}
-            lastTx={lastTx}
-            ofText={ofText}
-            requestsWaitingText={requestsWaitingText}
-          />
+          <ConfirmPageContainerNavigation />
           {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
index c5dddfdaa640..7465bd4d1eda 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -7,10 +7,7 @@ import ConfirmPageContainer from '../../components/app/confirm-page-container';
 import TransactionDecoding from '../../components/app/transaction-decoding';
 import { isBalanceSufficient } from '../send/send.utils';
 import { addHexes } from '../../helpers/utils/conversions.util';
-import {
-  CONFIRM_TRANSACTION_ROUTE,
-  DEFAULT_ROUTE,
-} from '../../helpers/constants/routes';
+import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
 import {
   INSUFFICIENT_FUNDS_ERROR_KEY,
   GAS_LIMIT_TOO_LOW_ERROR_KEY,
@@ -116,7 +113,6 @@ export default class ConfirmTransactionBase extends Component {
     transactionStatus: PropTypes.string,
     txData: PropTypes.object,
     unapprovedTxCount: PropTypes.number,
-    currentNetworkUnapprovedTxs: PropTypes.object,
     customGas: PropTypes.object,
     // Component props
     actionKey: PropTypes.string,
@@ -1015,33 +1011,6 @@ export default class ConfirmTransactionBase extends Component {
     );
   }
 
-  handleNextTx(txId) {
-    const { history, clearConfirmTransaction } = this.props;
-
-    if (txId) {
-      clearConfirmTransaction();
-      history.push(`${CONFIRM_TRANSACTION_ROUTE}/${txId}`);
-    }
-  }
-
-  getNavigateTxData() {
-    const { currentNetworkUnapprovedTxs, txData: { id } = {} } = this.props;
-    const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs);
-    const currentPosition = enumUnapprovedTxs.indexOf(id ? id.toString() : '');
-
-    return {
-      totalTx: enumUnapprovedTxs.length,
-      positionOfCurrentTx: currentPosition + 1,
-      nextTxId: enumUnapprovedTxs[currentPosition + 1],
-      prevTxId: enumUnapprovedTxs[currentPosition - 1],
-      showNavigation: enumUnapprovedTxs.length > 1,
-      firstTx: enumUnapprovedTxs[0],
-      lastTx: enumUnapprovedTxs[enumUnapprovedTxs.length - 1],
-      ofText: this.context.t('ofTextNofM'),
-      requestsWaitingText: this.context.t('requestsAwaitingAcknowledgement'),
-    };
-  }
-
   _beforeUnloadForGasPolling = () => {
     this._isMounted = false;
     if (this.state.pollingToken) {
@@ -1150,17 +1119,6 @@ export default class ConfirmTransactionBase extends Component {
     const hasSimulationError = Boolean(txData.simulationFails);
     const renderSimulationFailureWarning =
       hasSimulationError && !userAcknowledgedGasMissing;
-    const {
-      totalTx,
-      positionOfCurrentTx,
-      nextTxId,
-      prevTxId,
-      showNavigation,
-      firstTx,
-      lastTx,
-      ofText,
-      requestsWaitingText,
-    } = this.getNavigateTxData();
 
     const isContractInteractionFromDapp =
       txData.type === TRANSACTION_TYPES.CONTRACT_INTERACTION &&
@@ -1209,16 +1167,6 @@ export default class ConfirmTransactionBase extends Component {
           errorKey={errorKey}
           hasSimulationError={hasSimulationError}
           warning={submitWarning}
-          totalTx={totalTx}
-          positionOfCurrentTx={positionOfCurrentTx}
-          nextTxId={nextTxId}
-          prevTxId={prevTxId}
-          showNavigation={showNavigation}
-          onNextTx={(txId) => this.handleNextTx(txId)}
-          firstTx={firstTx}
-          lastTx={lastTx}
-          ofText={ofText}
-          requestsWaitingText={requestsWaitingText}
           disabled={
             renderSimulationFailureWarning ||
             !valid ||
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
index be74a6c789a1..e68f1eeafd3b 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -219,7 +219,6 @@ const mapStateToProps = (state, ownProps) => {
     nonce,
     unapprovedTxs,
     unapprovedTxCount,
-    currentNetworkUnapprovedTxs,
     customGas: {
       gasLimit,
       gasPrice,
diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js
index 87151e5e6b3f..2528a8fa64f7 100644
--- a/ui/pages/token-allowance/token-allowance.js
+++ b/ui/pages/token-allowance/token-allowance.js
@@ -51,9 +51,6 @@ import { getCustomTxParamsData } from '../confirm-approve/confirm-approve.util';
 import { setCustomTokenAmount } from '../../ducks/app/app';
 import { valuesFor } from '../../helpers/utils/util';
 import { ConfirmPageContainerNavigation } from '../../components/app/confirm-page-container';
-import { transactionMatchesNetwork } from '../../../shared/modules/transaction.utils';
-import { hexToDecimal } from '../../../shared/lib/metamask-controller-utils';
-import { CONFIRM_TRANSACTION_ROUTE } from '../../helpers/constants/routes';
 
 export default function TokenAllowance({
   origin,
@@ -212,38 +209,6 @@ export default function TokenAllowance({
 
   const isEmpty = customTokenAmount === '';
 
-  const network = hexToDecimal(fullTxData.chainId);
-
-  const currentNetworkUnapprovedTxs = Object.keys(unapprovedTxs)
-    .filter((key) =>
-      transactionMatchesNetwork(
-        unapprovedTxs[key],
-        fullTxData.chainId,
-        network,
-      ),
-    )
-    .reduce((acc, key) => ({ ...acc, [key]: unapprovedTxs[key] }), {});
-
-  const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs);
-  const currentPosition = enumUnapprovedTxs.indexOf(
-    fullTxData.id ? fullTxData.id.toString() : '',
-  );
-
-  const totalTx = enumUnapprovedTxs.length;
-  const positionOfCurrentTx = currentPosition + 1;
-  const nextTxId = enumUnapprovedTxs[currentPosition + 1];
-  const prevTxId = enumUnapprovedTxs[currentPosition - 1];
-  const showNavigation = enumUnapprovedTxs.length > 1;
-  const firstTx = enumUnapprovedTxs[0];
-  const lastTx = enumUnapprovedTxs[enumUnapprovedTxs.length - 1];
-
-  const handleNextTx = (txId) => {
-    if (txId) {
-      dispatch(clearConfirmTransaction());
-      history.push(`${CONFIRM_TRANSACTION_ROUTE}/${txId}`);
-    }
-  };
-
   const renderContractTokenValues = (
     <Box marginTop={4} key={tokenAddress}>
       <ContractTokenValues
@@ -258,18 +223,7 @@ export default function TokenAllowance({
   return (
     <Box className="token-allowance-container page-container">
       <Box>
-        <ConfirmPageContainerNavigation
-          totalTx={totalTx}
-          positionOfCurrentTx={positionOfCurrentTx}
-          nextTxId={nextTxId}
-          prevTxId={prevTxId}
-          showNavigation={showNavigation}
-          onNextTx={(txId) => handleNextTx(txId)}
-          firstTx={firstTx}
-          lastTx={lastTx}
-          ofText={t('ofTextNofM')}
-          requestsWaitingText={t('requestsAwaitingAcknowledgement')}
-        />
+        <ConfirmPageContainerNavigation />
       </Box>
       <Box
         paddingLeft={4}