Using single component for navigation which shows both messages and t…

…ransactions requests
MetaMask · Jan 25, 2023 · 1f59ce3 · 1f59ce3
1 parent c87747f
commit 1f59ce3
Show file tree

Hide file tree

Showing 13 changed files with 156 additions and 193 deletions.
diff --git a/test/e2e/tests/navigate-transactions.spec.js b/test/e2e/tests/navigate-transactions.spec.js
@@ -28,55 +28,69 @@ describe('Navigate transactions', function () {
 
         // navigate transactions
         await driver.clickElement('[data-testid="next-page"]');
-        let navigationElement = await driver.findElement('.navigation');
+        let navigationElement = await driver.findElement(
+          '.confirm-page-container-navigation',
+        );
         let navigationText = await navigationElement.getText();
         assert.equal(
           navigationText.includes('2 of 4'),
           true,
           'changed transaction right',
         );
         await driver.clickElement('[data-testid="next-page"]');
-        navigationElement = await driver.findElement('.navigation');
+        navigationElement = await driver.findElement(
+          '.confirm-page-container-navigation',
+        );
         navigationText = await navigationElement.getText();
         assert.equal(
           navigationText.includes('3 of 4'),
           true,
           'changed transaction right',
         );
         await driver.clickElement('[data-testid="next-page"]');
-        navigationElement = await driver.findElement('.navigation');
+        navigationElement = await driver.findElement(
+          '.confirm-page-container-navigation',
+        );
         navigationText = await navigationElement.getText();
         assert.equal(
           navigationText.includes('4 of 4'),
           true,
           'changed transaction right',
         );
         await driver.clickElement('[data-testid="first-page"]');
-        navigationElement = await driver.findElement('.navigation');
+        navigationElement = await driver.findElement(
+          '.confirm-page-container-navigation',
+        );
         navigationText = await navigationElement.getText();
         assert.equal(
           navigationText.includes('1 of 4'),
           true,
           'navigate to first transaction',
         );
         await driver.clickElement('[data-testid="last-page"]');
-        navigationElement = await driver.findElement('.navigation');
+        navigationElement = await driver.findElement(
+          '.confirm-page-container-navigation',
+        );
         navigationText = await navigationElement.getText();
         assert.equal(
           navigationText.includes('4 of 4'),
           true,
           'navigate to last transaction',
         );
         await driver.clickElement('[data-testid="previous-page"]');
-        navigationElement = await driver.findElement('.navigation');
+        navigationElement = await driver.findElement(
+          '.confirm-page-container-navigation',
+        );
         navigationText = await navigationElement.getText();
         assert.equal(
           navigationText.includes('3 of 4'),
           true,
           'changed transaction left',
         );
         await driver.clickElement('[data-testid="previous-page"]');
-        navigationElement = await driver.findElement('.navigation');
+        navigationElement = await driver.findElement(
+          '.confirm-page-container-navigation',
+        );
         navigationText = await navigationElement.getText();
         assert.equal(
           navigationText.includes('2 of 4'),
@@ -104,7 +118,9 @@ describe('Navigate transactions', function () {
         await driver.press('#password', driver.Key.ENTER);
 
         await driver.clickElement('[data-testid="next-page"]');
-        let navigationElement = await driver.findElement('.navigation');
+        let navigationElement = await driver.findElement(
+          '.confirm-page-container-navigation',
+        );
         let navigationText = await navigationElement.getText();
         assert.equal(
           navigationText.includes('2 of 4'),
@@ -121,7 +137,7 @@ describe('Navigate transactions', function () {
         await driver.switchToWindow(extension);
         navigationElement = await driver.waitForSelector(
           {
-            css: '.navigation',
+            css: '.confirm-page-container-navigation',
             text: '2 of 5',
           },
           { timeout: 10000 },
@@ -154,7 +170,7 @@ describe('Navigate transactions', function () {
         await driver.clickElement({ text: 'Reject', tag: 'button' });
         const navigationElement = await driver.waitForSelector(
           {
-            css: '.navigation',
+            css: '.confirm-page-container-navigation',
             text: '1 of 3',
           },
           { timeout: 10000 },
@@ -187,7 +203,7 @@ describe('Navigate transactions', function () {
         await driver.clickElement({ text: 'Confirm', tag: 'button' });
         const navigationElement = await driver.waitForSelector(
           {
-            css: '.navigation',
+            css: '.confirm-page-container-navigation',
             text: '1 of 3',
           },
           { timeout: 10000 },

diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
@@ -104,4 +104,3 @@
 @import 'network-account-balance-header/index';
 @import 'approve-content-card/index';
 @import 'transaction-alerts/transaction-alerts';
-@import 'navigation/index';
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,44 +1,125 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import {
-  getCurrentChainId,
-  getUnapprovedTransactions,
+  unconfirmedTransactionsHashSelector,
+  unapprovedDecryptMsgsSelector,
+  unapprovedEncryptionPublicKeyMsgsSelector,
 } from '../../../../selectors';
-import { transactionMatchesNetwork } from '../../../../../shared/modules/transaction.utils';
-import { CONFIRM_TRANSACTION_ROUTE } from '../../../../helpers/constants/routes';
+import { I18nContext } from '../../../../contexts/i18n';
+import {
+  CONFIRM_TRANSACTION_ROUTE,
+  SIGNATURE_REQUEST_PATH,
+} from '../../../../helpers/constants/routes';
 import { clearConfirmTransaction } from '../../../../ducks/confirm-transaction/confirm-transaction.duck';
-import { hexToDecimal } from '../../../../../shared/modules/conversion.utils';
-import Navigation from '../../navigation';
 
 const ConfirmPageContainerNavigation = () => {
+  const t = useContext(I18nContext);
   const dispatch = useDispatch();
   const history = useHistory();
+  const { id } = useParams();
+
+  const unapprovedDecryptMsgs = useSelector(unapprovedDecryptMsgsSelector);
+  const unapprovedEncryptionPublicKeyMsgs = useSelector(
+    unapprovedEncryptionPublicKeyMsgsSelector,
+  );
+  const uncofirmedTransactions = useSelector(
+    unconfirmedTransactionsHashSelector,
+  );
 
-  const unapprovedTxs = useSelector(getUnapprovedTransactions);
-  const currentChainId = useSelector(getCurrentChainId);
-  const network = hexToDecimal(currentChainId);
+  const enumUnapprovedDecryptMsgsKey = Object.keys(unapprovedDecryptMsgs);
+  const enumUnapprovedEncryptMsgsKey = Object.keys(
+    unapprovedEncryptionPublicKeyMsgs,
+  );
+  const enumDecryptAndEncryptMsgs = [
+    ...enumUnapprovedDecryptMsgsKey,
+    ...enumUnapprovedEncryptMsgsKey,
+  ];
+
+  const enumUnapprovedTxs = Object.keys(uncofirmedTransactions).filter(
+    (key) => enumDecryptAndEncryptMsgs.includes(key) === false,
+  );
 
-  const currentNetworkUnapprovedTxs = Object.keys(unapprovedTxs)
-    .filter((key) =>
-      transactionMatchesNetwork(unapprovedTxs[key], currentChainId, network),
-    )
-    .reduce((acc, key) => ({ ...acc, [key]: unapprovedTxs[key] }), {});
+  const currentPosition = enumUnapprovedTxs.indexOf(id);
 
-  const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs);
+  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}`);
+      history.push(
+        uncofirmedTransactions[txId]?.msgParams
+          ? `${CONFIRM_TRANSACTION_ROUTE}/${txId}${SIGNATURE_REQUEST_PATH}`
+          : `${CONFIRM_TRANSACTION_ROUTE}/${txId}`,
+      );
     }
   };
 
   return (
-    <Navigation
-      enumUnapprovedTxsOrUnconfirmedMessages={enumUnapprovedTxs}
-      onNext={onNextTx}
-    />
+    <div
+      className="confirm-page-container-navigation"
+      style={{
+        display: showNavigation ? 'flex' : 'none',
+      }}
+    >
+      <div
+        className="confirm-page-container-navigation__container"
+        data-testid="navigation-container"
+        style={{
+          visibility: prevTxId ? 'initial' : 'hidden',
+        }}
+      >
+        <button
+          className="confirm-page-container-navigation__arrow"
+          data-testid="first-page"
+          onClick={() => onNextTx(firstTx)}
+        >
+          <i className="fa fa-angle-double-left fa-2x" />
+        </button>
+        <button
+          className="confirm-page-container-navigation__arrow"
+          data-testid="previous-page"
+          onClick={() => onNextTx(prevTxId)}
+        >
+          <i className="fa fa-angle-left fa-2x" />
+        </button>
+      </div>
+      <div className="confirm-page-container-navigation__textcontainer">
+        <div className="confirm-page-container-navigation__navtext">
+          {positionOfCurrentTx} {t('ofTextNofM')} {totalTx}
+        </div>
+        <div className="confirm-page-container-navigation__longtext">
+          {t('requestsAwaitingAcknowledgement')}
+        </div>
+      </div>
+      <div
+        className="confirm-page-container-navigation__container"
+        style={{
+          visibility: nextTxId ? 'initial' : 'hidden',
+        }}
+      >
+        <button
+          className="confirm-page-container-navigation__arrow"
+          data-testid="next-page"
+          onClick={() => onNextTx(nextTxId)}
+        >
+          <i className="fa fa-angle-right fa-2x" />
+        </button>
+        <button
+          className="confirm-page-container-navigation__arrow"
+          data-testid="last-page"
+          onClick={() => onNextTx(lastTx)}
+        >
+          <i className="fa fa-angle-double-right fa-2x" />
+        </button>
+      </div>
+    </div>
   );
 };
 

diff --git a/ui/components/app/navigation/index.scss → ...firm-page-container-navigation/index.scss b/ui/components/app/navigation/index.scss → ...firm-page-container-navigation/index.scss
@@ -1,4 +1,4 @@
-.navigation {
+.confirm-page-container-navigation {
   display: flex;
   justify-content: space-between;
   font: inherit;

diff --git a/ui/components/app/confirm-page-container/index.scss b/ui/components/app/confirm-page-container/index.scss
@@ -1,6 +1,7 @@
 @import 'confirm-page-container-content/index';
 @import 'confirm-page-container-header/index';
 @import 'confirm-detail-row/index';
+@import 'confirm-page-container-navigation/index';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 @import 'flask/index';
 ///: END:ONLY_INCLUDE_IN

diff --git a/ui/components/app/navigation/index.js b/ui/components/app/navigation/index.js
diff --git a/ui/components/app/navigation/navigation.js b/ui/components/app/navigation/navigation.js