diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index b59623b29279..01ebea13aeba 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -103,4 +103,5 @@ @import 'detected-token/detected-token-selection-popover/index'; @import 'network-account-balance-header/index'; @import 'approve-content-card/index'; -@import 'transaction-alerts/transaction-alerts' +@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 c9905efc8e79..4acb8f2c70f4 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,31 +1,23 @@ -import React, { useContext } from 'react'; +import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { useHistory, useParams } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; import { getCurrentChainId, getUnapprovedTransactions, - unconfirmedMessagesHashSelector, } from '../../../../selectors'; import { transactionMatchesNetwork } from '../../../../../shared/modules/transaction.utils'; -import { I18nContext } from '../../../../contexts/i18n'; -import { - CONFIRM_TRANSACTION_ROUTE, - SIGNATURE_REQUEST_PATH, -} from '../../../../helpers/constants/routes'; +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'; +import Navigation from '../../navigation'; const ConfirmPageContainerNavigation = () => { - const t = useContext(I18nContext); const dispatch = useDispatch(); const history = useHistory(); - const { id } = useParams(); const unapprovedTxs = useSelector(getUnapprovedTransactions); - const unconfirmedMessages = useSelector(unconfirmedMessagesHashSelector); const currentChainId = useSelector(getCurrentChainId); const network = hexToDecimal(currentChainId); - const isUnapprovedTxsEmpty = Object.keys(unapprovedTxs).length === 0; const currentNetworkUnapprovedTxs = Object.keys(unapprovedTxs) .filter((key) => @@ -33,90 +25,20 @@ const ConfirmPageContainerNavigation = () => { ) .reduce((acc, key) => ({ ...acc, [key]: unapprovedTxs[key] }), {}); - const enumUnapprovedTxs = Object.keys( - isUnapprovedTxsEmpty ? unconfirmedMessages : currentNetworkUnapprovedTxs, - ); - - const currentPosition = enumUnapprovedTxs.indexOf(id); - - 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 enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs); const onNextTx = (txId) => { if (txId) { dispatch(clearConfirmTransaction()); - history.push( - isUnapprovedTxsEmpty - ? `${CONFIRM_TRANSACTION_ROUTE}/${txId}${SIGNATURE_REQUEST_PATH}` - : `${CONFIRM_TRANSACTION_ROUTE}/${txId}`, - ); + history.push(`${CONFIRM_TRANSACTION_ROUTE}/${txId}`); } }; return ( -
-
- - -
-
-
- {positionOfCurrentTx} {t('ofTextNofM')} {totalTx} -
-
- {t('requestsAwaitingAcknowledgement')} -
-
-
- - -
-
+ ); }; diff --git a/ui/components/app/confirm-page-container/index.scss b/ui/components/app/confirm-page-container/index.scss index ca1ac9fb150d..b4372d938720 100644 --- a/ui/components/app/confirm-page-container/index.scss +++ b/ui/components/app/confirm-page-container/index.scss @@ -1,7 +1,6 @@ @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 new file mode 100644 index 000000000000..cfc2bfbb0385 --- /dev/null +++ b/ui/components/app/navigation/index.js @@ -0,0 +1 @@ +export { default } from './navigation'; diff --git a/ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss b/ui/components/app/navigation/index.scss old mode 100755 new mode 100644 similarity index 96% rename from ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss rename to ui/components/app/navigation/index.scss index 93ed2e962f74..d45497b7bc31 --- a/ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss +++ b/ui/components/app/navigation/index.scss @@ -1,4 +1,4 @@ -.confirm-page-container-navigation { +.navigation { display: flex; justify-content: space-between; font: inherit; diff --git a/ui/components/app/navigation/navigation.js b/ui/components/app/navigation/navigation.js new file mode 100644 index 000000000000..5a6f8032cc99 --- /dev/null +++ b/ui/components/app/navigation/navigation.js @@ -0,0 +1,96 @@ +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 1006d738dcc8..4a48746adc75 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" >