From c403d4ece3272e4ca2ea5d70425bfedb369b60f3 Mon Sep 17 00:00:00 2001
From: VSaric <vladimir.saric@consensys.net>
Date: Fri, 6 Jan 2023 13:39:49 +0100
Subject: [PATCH] Added navigation between multiple sign prompts and reject all
 sign prompts

---
 ...irm-page-container-navigation.component.js | 18 ++++-
 .../signature-request-original.test.js.snap   | 70 +++++++++++++++++++
 .../app/signature-request-original/index.scss |  5 +-
 .../signature-request-original.component.js   |  5 ++
 .../signature-request-original.test.js        |  6 ++
 .../app/signature-request/index.scss          |  7 +-
 .../signature-request.component.js            | 44 +++++++++++-
 .../signature-request.container.js            | 47 ++++++++++++-
 .../signature-request.container.test.js       |  1 +
 .../confirm-transaction.container.js          |  8 ++-
 10 files changed, 200 insertions(+), 11 deletions(-)

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 fe201a507792..6acfd71eb160 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
@@ -5,10 +5,14 @@ import PropTypes from 'prop-types';
 import {
   getCurrentChainId,
   getUnapprovedTransactions,
+  unconfirmedMessagesHashSelector,
 } from '../../../../selectors';
 import { transactionMatchesNetwork } from '../../../../../shared/modules/transaction.utils';
 import { I18nContext } from '../../../../contexts/i18n';
-import { CONFIRM_TRANSACTION_ROUTE } from '../../../../helpers/constants/routes';
+import {
+  CONFIRM_TRANSACTION_ROUTE,
+  SIGNATURE_REQUEST_PATH,
+} from '../../../../helpers/constants/routes';
 import { clearConfirmTransaction } from '../../../../ducks/confirm-transaction/confirm-transaction.duck';
 import { hexToDecimal } from '../../../../../shared/lib/metamask-controller-utils';
 
@@ -18,8 +22,10 @@ const ConfirmPageContainerNavigation = ({ txData }) => {
   const history = useHistory();
 
   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) =>
@@ -27,7 +33,9 @@ const ConfirmPageContainerNavigation = ({ txData }) => {
     )
     .reduce((acc, key) => ({ ...acc, [key]: unapprovedTxs[key] }), {});
 
-  const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs);
+  const enumUnapprovedTxs = Object.keys(
+    isUnapprovedTxsEmpty ? unconfirmedMessages : currentNetworkUnapprovedTxs,
+  );
   const currentPosition = enumUnapprovedTxs.indexOf(
     txData.id ? txData.id.toString() : '',
   );
@@ -43,7 +51,11 @@ const ConfirmPageContainerNavigation = ({ txData }) => {
   const onNextTx = (txId) => {
     if (txId) {
       dispatch(clearConfirmTransaction());
-      history.push(`${CONFIRM_TRANSACTION_ROUTE}/${txId}`);
+      history.push(
+        isUnapprovedTxsEmpty
+          ? `${CONFIRM_TRANSACTION_ROUTE}/${txId}${SIGNATURE_REQUEST_PATH}`
+          : `${CONFIRM_TRANSACTION_ROUTE}/${txId}`,
+      );
     }
   };
 
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 38b691b7d563..1006d738dcc8 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
@@ -5,6 +5,76 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
   <div
     class="request-signature__container"
   >
+    <div
+      class="request-signature__navigation"
+    >
+      <div
+        class="confirm-page-container-navigation"
+        style="display: none;"
+      >
+        <div
+          class="confirm-page-container-navigation__container"
+          data-testid="navigation-container"
+          style="visibility: hidden;"
+        >
+          <button
+            class="confirm-page-container-navigation__arrow"
+            data-testid="first-page"
+          >
+            <i
+              class="fa fa-angle-double-left fa-2x"
+            />
+          </button>
+          <button
+            class="confirm-page-container-navigation__arrow"
+            data-testid="previous-page"
+          >
+            <i
+              class="fa fa-angle-left fa-2x"
+            />
+          </button>
+        </div>
+        <div
+          class="confirm-page-container-navigation__textcontainer"
+        >
+          <div
+            class="confirm-page-container-navigation__navtext"
+          >
+            0
+             
+            of
+             
+            0
+          </div>
+          <div
+            class="confirm-page-container-navigation__longtext"
+          >
+            requests waiting to be acknowledged
+          </div>
+        </div>
+        <div
+          class="confirm-page-container-navigation__container"
+          style="visibility: hidden;"
+        >
+          <button
+            class="confirm-page-container-navigation__arrow"
+            data-testid="next-page"
+          >
+            <i
+              class="fa fa-angle-right fa-2x"
+            />
+          </button>
+          <button
+            class="confirm-page-container-navigation__arrow"
+            data-testid="last-page"
+          >
+            <i
+              class="fa fa-angle-double-right fa-2x"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
     <div
       class="request-signature__account"
     >
diff --git a/ui/components/app/signature-request-original/index.scss b/ui/components/app/signature-request-original/index.scss
index d44b72f71cf9..9764cb252c4a 100644
--- a/ui/components/app/signature-request-original/index.scss
+++ b/ui/components/app/signature-request-original/index.scss
@@ -20,7 +20,7 @@
     }
 
     @include screen-sm-min {
-      height: 620px;
+      height: 650px;
     }
 
     &__reject {
@@ -56,7 +56,8 @@
     z-index: 3;
   }
 
-  &__account {
+  &__account,
+  &__navigation {
     width: 100%;
   }
 
diff --git a/ui/components/app/signature-request-original/signature-request-original.component.js b/ui/components/app/signature-request-original/signature-request-original.component.js
index 10472db12657..4d55ed3bef87 100644
--- a/ui/components/app/signature-request-original/signature-request-original.component.js
+++ b/ui/components/app/signature-request-original/signature-request-original.component.js
@@ -19,6 +19,7 @@ import {
   TEXT_ALIGN,
 } from '../../../helpers/constants/design-system';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
+import { ConfirmPageContainerNavigation } from '../confirm-page-container';
 import SignatureRequestOriginalWarning from './signature-request-original-warning';
 
 export default class SignatureRequestOriginal extends Component {
@@ -278,6 +279,7 @@ export default class SignatureRequestOriginal extends Component {
       conversionRate,
       nativeCurrency,
       fromAccount: { address, balance, name },
+      txData,
     } = this.props;
     const { showSignatureRequestWarning } = this.state;
     const { t } = this.context;
@@ -295,6 +297,9 @@ export default class SignatureRequestOriginal extends Component {
 
     return (
       <div className="request-signature__container">
+        <div className="request-signature__navigation">
+          <ConfirmPageContainerNavigation txData={txData} />
+        </div>
         <div className="request-signature__account">
           <NetworkAccountBalanceHeader
             networkName={currentNetwork}
diff --git a/ui/components/app/signature-request-original/signature-request-original.test.js b/ui/components/app/signature-request-original/signature-request-original.test.js
index d2ab83c9b56a..7f23421e76fa 100644
--- a/ui/components/app/signature-request-original/signature-request-original.test.js
+++ b/ui/components/app/signature-request-original/signature-request-original.test.js
@@ -74,6 +74,12 @@ describe('SignatureRequestOriginal', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should render navigation', () => {
+    render();
+    const navigationContainer = screen.queryByTestId('navigation-container');
+    expect(navigationContainer).toBeInTheDocument();
+  });
+
   it('should render eth sign screen', () => {
     render();
     expect(screen.getByText('Signature request')).toBeInTheDocument();
diff --git a/ui/components/app/signature-request/index.scss b/ui/components/app/signature-request/index.scss
index 28a2eb16cfd3..4aa8e7e9e992 100644
--- a/ui/components/app/signature-request/index.scss
+++ b/ui/components/app/signature-request/index.scss
@@ -9,17 +9,22 @@
   flex-direction: column;
   min-width: 0;
   width: 408px;
+  height: max-content;
   background-color: var(--color-background-default);
   box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
   border-radius: 8px;
 
   @include screen-sm-min {
-    max-height: 55vh;
+    max-height: 80vh;
     min-height: 570px;
     flex: 0 0 auto;
     margin-left: auto;
     margin-right: auto;
   }
+
+  &__reject-all-button {
+    margin-top: -15px;
+  }
 }
 
 .signature-request-header {
diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js
index a55e595ba3cf..8dc21d9513cb 100644
--- a/ui/components/app/signature-request/signature-request.component.js
+++ b/ui/components/app/signature-request/signature-request.component.js
@@ -17,6 +17,7 @@ import {
 } from '../../../helpers/constants/design-system';
 import NetworkAccountBalanceHeader from '../network-account-balance-header';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
+import { ConfirmPageContainerNavigation } from '../confirm-page-container';
 import Footer from './signature-request-footer';
 import Message from './signature-request-message';
 
@@ -66,6 +67,12 @@ export default class SignatureRequest extends PureComponent {
     nativeCurrency: PropTypes.string,
     provider: PropTypes.object,
     subjectMetadata: PropTypes.object,
+    unapprovedMessagesCount: PropTypes.number,
+    clearConfirmTransaction: PropTypes.func.isRequired,
+    history: PropTypes.object,
+    mostRecentOverviewPage: PropTypes.string,
+    showRejectTransactionsConfirmationModal: PropTypes.func.isRequired,
+    cancelAll: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -114,6 +121,26 @@ export default class SignatureRequest extends PureComponent {
     return { sanitizedMessage, domain };
   });
 
+  handleCancelAll = () => {
+    const {
+      cancelAll,
+      clearConfirmTransaction,
+      history,
+      mostRecentOverviewPage,
+      showRejectTransactionsConfirmationModal,
+      unapprovedMessagesCount,
+    } = this.props;
+
+    showRejectTransactionsConfirmationModal({
+      unapprovedTxCount: unapprovedMessagesCount,
+      onSubmit: async () => {
+        await cancelAll();
+        clearConfirmTransaction();
+        history.push(mostRecentOverviewPage);
+      },
+    });
+  };
+
   render() {
     const {
       txData: {
@@ -132,10 +159,12 @@ export default class SignatureRequest extends PureComponent {
       subjectMetadata,
       conversionRate,
       nativeCurrency,
+      unapprovedMessagesCount,
     } = this.props;
-    const { trackEvent } = this.context;
+    const { t, trackEvent } = this.context;
     const { sanitizedMessage, domain } = this.memoizedParseMessage(data);
 
+    const rejectNText = t('rejectRequestsN', [unapprovedMessagesCount]);
     const currentNetwork = this.getNetworkName();
 
     const balanceInBaseAsset = conversionUtil(balance, {
@@ -183,6 +212,7 @@ export default class SignatureRequest extends PureComponent {
 
     return (
       <div className="signature-request">
+        <ConfirmPageContainerNavigation txData={txData} />
         <div className="request-signature__account">
           <NetworkAccountBalanceHeader
             networkName={currentNetwork}
@@ -268,6 +298,18 @@ export default class SignatureRequest extends PureComponent {
             isContractRequestingSignature
           />
         )}
+        {unapprovedMessagesCount > 1 ? (
+          <Button
+            type="link"
+            className="signature-request__reject-all-button"
+            onClick={(e) => {
+              e.preventDefault();
+              this.handleCancelAll();
+            }}
+          >
+            {rejectNText}
+          </Button>
+        ) : null}
       </div>
     );
   }
diff --git a/ui/components/app/signature-request/signature-request.container.js b/ui/components/app/signature-request/signature-request.container.js
index 450f93189bc0..52a67c1ec915 100644
--- a/ui/components/app/signature-request/signature-request.container.js
+++ b/ui/components/app/signature-request/signature-request.container.js
@@ -6,13 +6,18 @@ import {
   getRpcPrefsForCurrentProvider,
   conversionRateSelector,
   getSubjectMetadata,
+  unconfirmedMessagesHashSelector,
+  getTotalUnapprovedMessagesCount,
 } from '../../../selectors';
 import {
   isAddressLedger,
   getNativeCurrency,
 } from '../../../ducks/metamask/metamask';
-import { getAccountByAddress } from '../../../helpers/utils/util';
+import { getAccountByAddress, valuesFor } from '../../../helpers/utils/util';
 import { MESSAGE_TYPE } from '../../../../shared/constants/app';
+import { cancelMsgs, showModal } from '../../../store/actions';
+import { getMostRecentOverviewPage } from '../../../ducks/history/history';
+import { clearConfirmTransaction } from '../../../ducks/confirm-transaction/confirm-transaction.duck';
 import SignatureRequest from './signature-request.component';
 
 function mapStateToProps(state, ownProps) {
@@ -28,6 +33,8 @@ function mapStateToProps(state, ownProps) {
   const chainId = getCurrentChainId(state);
   const rpcPrefs = getRpcPrefsForCurrentProvider(state);
   const subjectMetadata = getSubjectMetadata(state);
+  const unconfirmedMessagesList = unconfirmedMessagesHashSelector(state);
+  const unapprovedMessagesCount = getTotalUnapprovedMessagesCount(state);
 
   const { iconUrl: siteImage = '' } =
     subjectMetadata[txData.msgParams.origin] || {};
@@ -39,6 +46,9 @@ function mapStateToProps(state, ownProps) {
     chainId,
     rpcPrefs,
     siteImage,
+    unconfirmedMessagesList,
+    unapprovedMessagesCount,
+    mostRecentOverviewPage: getMostRecentOverviewPage(state),
     conversionRate: conversionRateSelector(state),
     nativeCurrency: getNativeCurrency(state),
     subjectMetadata: getSubjectMetadata(state),
@@ -47,6 +57,27 @@ function mapStateToProps(state, ownProps) {
   };
 }
 
+function mapDispatchToProps(dispatch) {
+  return {
+    clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
+    showRejectTransactionsConfirmationModal: ({
+      onSubmit,
+      unapprovedTxCount: unapprovedMessagesCount,
+    }) => {
+      return dispatch(
+        showModal({
+          name: 'REJECT_TRANSACTIONS',
+          onSubmit,
+          unapprovedTxCount: unapprovedMessagesCount,
+          isRequestType: true,
+        }),
+      );
+    },
+    cancelAll: (unconfirmedMessagesList) =>
+      dispatch(cancelMsgs(unconfirmedMessagesList)),
+  };
+}
+
 function mergeProps(stateProps, dispatchProps, ownProps) {
   const {
     allAccounts,
@@ -59,6 +90,9 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
     nativeCurrency,
     provider,
     subjectMetadata,
+    unconfirmedMessagesList,
+    unapprovedMessagesCount,
+    mostRecentOverviewPage,
   } = stateProps;
   const {
     signPersonalMessage,
@@ -70,6 +104,8 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
     txData,
   } = ownProps;
 
+  const { cancelAll: dispatchCancelAll } = dispatchProps;
+
   const {
     type,
     msgParams: { from },
@@ -107,7 +143,14 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
     nativeCurrency,
     provider,
     subjectMetadata,
+    unapprovedMessagesCount,
+    mostRecentOverviewPage,
+    cancelAll: () => dispatchCancelAll(valuesFor(unconfirmedMessagesList)),
   };
 }
 
-export default connect(mapStateToProps, null, mergeProps)(SignatureRequest);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps,
+)(SignatureRequest);
diff --git a/ui/components/app/signature-request/signature-request.container.test.js b/ui/components/app/signature-request/signature-request.container.test.js
index 9d921609d080..262caa68ae8f 100644
--- a/ui/components/app/signature-request/signature-request.container.test.js
+++ b/ui/components/app/signature-request/signature-request.container.test.js
@@ -58,6 +58,7 @@ describe('Signature Request', () => {
         },
       },
       cachedBalances: {},
+      unapprovedTxs: {},
       selectedAddress: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
     },
   };
diff --git a/ui/pages/confirm-transaction/confirm-transaction.container.js b/ui/pages/confirm-transaction/confirm-transaction.container.js
index ad144b94b542..28a1c6a5aa58 100644
--- a/ui/pages/confirm-transaction/confirm-transaction.container.js
+++ b/ui/pages/confirm-transaction/confirm-transaction.container.js
@@ -11,7 +11,10 @@ import {
   getContractMethodData,
   setDefaultHomeActiveTabName,
 } from '../../store/actions';
-import { unconfirmedTransactionsListSelector } from '../../selectors';
+import {
+  unconfirmedTransactionsListSelector,
+  unconfirmedTransactionsHashSelector,
+} from '../../selectors';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
 import { getSendTo } from '../../ducks/send';
 import ConfirmTransaction from './confirm-transaction.component';
@@ -27,9 +30,10 @@ const mapStateToProps = (state, ownProps) => {
   const sendTo = getSendTo(state);
 
   const unconfirmedTransactions = unconfirmedTransactionsListSelector(state);
+  const unconfirmedMessages = unconfirmedTransactionsHashSelector(state);
   const totalUnconfirmed = unconfirmedTransactions.length;
   const transaction = totalUnconfirmed
-    ? unapprovedTxs[id] || unconfirmedTransactions[0]
+    ? unapprovedTxs[id] || unconfirmedMessages[id] || unconfirmedTransactions[0]
     : {};
   const { id: transactionId, type } = transaction;