From 1f59ce3a22d3687526ab4cc358f9cf08a986bf17 Mon Sep 17 00:00:00 2001 From: VSaric Date: Wed, 25 Jan 2023 12:48:20 +0100 Subject: [PATCH] Using single component for navigation which shows both messages and transactions requests --- test/e2e/tests/navigate-transactions.spec.js | 38 ++++-- ui/components/app/app-components.scss | 1 - ...irm-page-container-navigation.component.js | 125 +++++++++++++++--- .../index.scss | 2 +- .../app/confirm-page-container/index.scss | 1 + ui/components/app/navigation/index.js | 1 - ui/components/app/navigation/navigation.js | 96 -------------- .../signature-request-original.test.js.snap | 20 +-- .../signature-request-original.component.js | 4 +- .../signature-request.component.test.js.snap | 20 +-- .../signature-request-navigation/index.js | 1 - .../signature-request-navigation.js | 36 ----- .../signature-request.component.js | 4 +- 13 files changed, 156 insertions(+), 193 deletions(-) rename ui/components/app/{navigation => confirm-page-container/confirm-page-container-navigation}/index.scss (96%) delete mode 100644 ui/components/app/navigation/index.js delete mode 100644 ui/components/app/navigation/navigation.js delete mode 100644 ui/components/app/signature-request/signature-request-navigation/index.js delete mode 100644 ui/components/app/signature-request/signature-request-navigation/signature-request-navigation.js diff --git a/test/e2e/tests/navigate-transactions.spec.js b/test/e2e/tests/navigate-transactions.spec.js index fbf72d24eb1e..d2f964b8ea54 100644 --- a/test/e2e/tests/navigate-transactions.spec.js +++ b/test/e2e/tests/navigate-transactions.spec.js @@ -28,7 +28,9 @@ 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'), @@ -36,7 +38,9 @@ describe('Navigate transactions', function () { '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'), @@ -44,7 +48,9 @@ describe('Navigate transactions', function () { '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'), @@ -52,7 +58,9 @@ describe('Navigate transactions', function () { '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'), @@ -60,7 +68,9 @@ describe('Navigate transactions', function () { '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'), @@ -68,7 +78,9 @@ describe('Navigate transactions', function () { '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'), @@ -76,7 +88,9 @@ describe('Navigate transactions', function () { '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 index 01ebea13aeba..314a6c76bba1 100644 --- 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/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 50fdb29ead1c..d116109de731 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,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 ( - +
+
+ + +
+
+
+ {positionOfCurrentTx} {t('ofTextNofM')} {totalTx} +
+
+ {t('requestsAwaitingAcknowledgement')} +
+
+
+ + +
+
); }; diff --git a/ui/components/app/navigation/index.scss b/ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss similarity index 96% rename from ui/components/app/navigation/index.scss rename to ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss index d45497b7bc31..93ed2e962f74 100644 --- a/ui/components/app/navigation/index.scss +++ b/ui/components/app/confirm-page-container/confirm-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 index b4372d938720..ca1ac9fb150d 100644 --- 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 deleted file mode 100644 index cfc2bfbb0385..000000000000 --- a/ui/components/app/navigation/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './navigation'; diff --git a/ui/components/app/navigation/navigation.js b/ui/components/app/navigation/navigation.js deleted file mode 100644 index 5a6f8032cc99..000000000000 --- a/ui/components/app/navigation/navigation.js +++ /dev/null @@ -1,96 +0,0 @@ -import React, { useContext } from 'react'; -import { useParams } from 'react-router-dom'; -import PropTypes from 'prop-types'; -import { I18nContext } from '../../../contexts/i18n'; - -export default function Navigation({ - enumUnapprovedTxsOrUnconfirmedMessages, - onNext, -}) { - const t = useContext(I18nContext); - const { id } = useParams(); - - const currentPosition = enumUnapprovedTxsOrUnconfirmedMessages.indexOf(id); - const totalTx = enumUnapprovedTxsOrUnconfirmedMessages.length; - const positionOfCurrentTx = currentPosition + 1; - const nextTxId = enumUnapprovedTxsOrUnconfirmedMessages[currentPosition + 1]; - const prevTxId = enumUnapprovedTxsOrUnconfirmedMessages[currentPosition - 1]; - const showNavigation = enumUnapprovedTxsOrUnconfirmedMessages.length > 1; - const firstTx = enumUnapprovedTxsOrUnconfirmedMessages[0]; - const lastTx = - enumUnapprovedTxsOrUnconfirmedMessages[ - enumUnapprovedTxsOrUnconfirmedMessages.length - 1 - ]; - - return ( -
-
- - -
-
-
- {positionOfCurrentTx} {t('ofTextNofM')} {totalTx} -
-
- {t('requestsAwaitingAcknowledgement')} -
-
-
- - -
-
- ); -} - -Navigation.propTypes = { - /** - * Returns the names of the enumerable string properties and methods of an object. - */ - enumUnapprovedTxsOrUnconfirmedMessages: PropTypes.array.isRequired, - /** - * The onNext handler to be passed to the Navigation component. - */ - onNext: PropTypes.func.isRequired, -}; diff --git a/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap b/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap index 696926fcd093..a6f34832fcf0 100644 --- a/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap +++ b/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap @@ -9,16 +9,16 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = ` class="request-signature__navigation" >