Added navigation between multiple sign prompts and reject all sign pr…

…ompts
MetaMask · Jan 9, 2023 · cb3cf68 · cb3cf68
1 parent 924aabe
commit cb3cf68
Show file tree

Hide file tree

Showing 10 changed files with 200 additions and 11 deletions.
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
@@ -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,16 +22,20 @@ 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) =>
       transactionMatchesNetwork(unapprovedTxs[key], currentChainId, network),
     )
     .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/...ents/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap b/...ents/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
     );
   }