Merge branch 'develop' into 17191/onboarding-unit-tests

MetaMask · Jan 31, 2023 · f0f9ba8 · f0f9ba8
2 parents a7d8c44 + 8aa3263
commit f0f9ba8
Show file tree

Hide file tree

Showing 29 changed files with 521 additions and 156 deletions.
diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json
@@ -902,8 +902,6 @@
   "ui/components/ui/icon/info-icon-inverted.component.js",
   "ui/components/ui/icon/info-icon.component.js",
   "ui/components/ui/icon/interaction-icon.component.js",
-  "ui/components/ui/icon/overview-buy-icon.component.js",
-  "ui/components/ui/icon/overview-send-icon.component.js",
   "ui/components/ui/icon/preloader/index.js",
   "ui/components/ui/icon/preloader/preloader-icon.component.js",
   "ui/components/ui/icon/receive-icon.component.js",
@@ -912,7 +910,6 @@
   "ui/components/ui/icon/sign-icon.component.js",
   "ui/components/ui/icon/sun-check-icon.component.js",
   "ui/components/ui/icon/swap-icon-for-list.component.js",
-  "ui/components/ui/icon/swap-icon.component.js",
   "ui/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js",
   "ui/components/ui/identicon/blockieIdenticon/index.js",
   "ui/components/ui/identicon/identicon.component.js",

diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
@@ -103,4 +103,4 @@
 @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';
diff --git a/ui/components/app/collectibles-items/collectibles-items.js b/ui/components/app/collectibles-items/collectibles-items.js
@@ -92,7 +92,7 @@ export default function CollectiblesItems({
       return (
         <img
           alt={collectionName}
-          src={collectionImage}
+          src={getAssetImageURL(collectionImage, ipfsGateway)}
           className="collectibles-items__collection-image"
         />
       );

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
@@ -2,32 +2,43 @@ import React, { useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useParams } from 'react-router-dom';
 import {
-  getCurrentChainId,
-  getUnapprovedTransactions,
+  unconfirmedTransactionsHashSelector,
+  unapprovedDecryptMsgsSelector,
+  unapprovedEncryptionPublicKeyMsgsSelector,
 } 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/modules/conversion.utils';
 
 const ConfirmPageContainerNavigation = () => {
   const t = useContext(I18nContext);
   const dispatch = useDispatch();
   const history = useHistory();
   const { id } = useParams();
 
-  const unapprovedTxs = useSelector(getUnapprovedTransactions);
-  const currentChainId = useSelector(getCurrentChainId);
-  const network = hexToDecimal(currentChainId);
+  const unapprovedDecryptMsgs = useSelector(unapprovedDecryptMsgsSelector);
+  const unapprovedEncryptionPublicKeyMsgs = useSelector(
+    unapprovedEncryptionPublicKeyMsgsSelector,
+  );
+  const uncofirmedTransactions = useSelector(
+    unconfirmedTransactionsHashSelector,
+  );
 
-  const currentNetworkUnapprovedTxs = Object.keys(unapprovedTxs)
-    .filter((key) =>
-      transactionMatchesNetwork(unapprovedTxs[key], currentChainId, network),
-    )
-    .reduce((acc, key) => ({ ...acc, [key]: unapprovedTxs[key] }), {});
+  const enumUnapprovedDecryptMsgsKey = Object.keys(unapprovedDecryptMsgs);
+  const enumUnapprovedEncryptMsgsKey = Object.keys(
+    unapprovedEncryptionPublicKeyMsgs,
+  );
+  const enumDecryptAndEncryptMsgs = [
+    ...enumUnapprovedDecryptMsgsKey,
+    ...enumUnapprovedEncryptMsgsKey,
+  ];
 
-  const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs);
+  const enumUnapprovedTxs = Object.keys(uncofirmedTransactions).filter(
+    (key) => enumDecryptAndEncryptMsgs.includes(key) === false,
+  );
 
   const currentPosition = enumUnapprovedTxs.indexOf(id);
 
@@ -42,7 +53,11 @@ const ConfirmPageContainerNavigation = () => {
   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}`,
+      );
     }
   };
 

diff --git a/ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss b/ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss
diff --git a/ui/components/app/connected-accounts-list/connected-accounts-list.component.js b/ui/components/app/connected-accounts-list/connected-accounts-list.component.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
+import { ICON_NAMES } from '../../component-library';
 import { MenuItem } from '../../ui/menu';
 import ConnectedAccountsListItem from './connected-accounts-list-item';
 import ConnectedAccountsListOptions from './connected-accounts-list-options';
@@ -104,7 +105,7 @@ export default class ConnectedAccountsList extends PureComponent {
         onShowOptions={this.showAccountOptions.bind(null, address)}
         show={accountWithOptionsShown === address}
       >
-        <MenuItem iconClassName="fa fa-ban" onClick={this.disconnectAccount}>
+        <MenuItem iconName={ICON_NAMES.LOGOUT} onClick={this.disconnectAccount}>
           {t('disconnectThisAccount')}
         </MenuItem>
       </ConnectedAccountsListOptions>

diff --git a/ui/components/app/menu-bar/account-options-menu.js b/ui/components/app/menu-bar/account-options-menu.js
@@ -24,6 +24,7 @@ import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
 import { HardwareKeyringTypes } from '../../../../shared/constants/hardware-wallets';
 import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { ICON_NAMES } from '../../component-library';
 
 export default function AccountOptionsMenu({ anchorElement, onClose }) {
   const t = useI18nContext();
@@ -82,7 +83,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
             </span>
           ) : null
         }
-        iconClassName="fas fa-external-link-alt"
+        iconName={ICON_NAMES.EXPORT}
       >
         {t(
           blockExplorerLinkText.firstPart,
@@ -104,7 +105,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
             global.platform.openExtensionInBrowser();
             onClose();
           }}
-          iconClassName="fas fa-expand-alt"
+          iconName={ICON_NAMES.EXPAND}
         >
           {t('expandView')}
         </MenuItem>
@@ -122,7 +123,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
           });
           onClose();
         }}
-        iconClassName="fas fa-qrcode"
+        iconName={ICON_NAMES.SCAN_BARCODE}
       >
         {t('accountDetails')}
       </MenuItem>
@@ -139,7 +140,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
           history.push(CONNECTED_ROUTE);
           onClose();
         }}
-        iconClassName="fa fa-bullseye"
+        iconName={ICON_NAMES.CONNECT}
       >
         {t('connectedSites')}
       </MenuItem>
@@ -155,7 +156,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
             );
             onClose();
           }}
-          iconClassName="fas fa-trash-alt"
+          iconName={ICON_NAMES.TRASH}
         >
           {t('removeAccount')}
         </MenuItem>

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
@@ -21,6 +21,7 @@ import {
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
 import { Numeric } from '../../../../shared/modules/Numeric';
 import { EtherDenomination } from '../../../../shared/constants/common';
+import ConfirmPageContainerNavigation from '../confirm-page-container/confirm-page-container-navigation';
 import SignatureRequestOriginalWarning from './signature-request-original-warning';
 
 export default class SignatureRequestOriginal extends Component {
@@ -280,6 +281,9 @@ export default class SignatureRequestOriginal extends Component {
 
     return (
       <div className="request-signature__container">
+        <div className="request-signature__navigation">
+          <ConfirmPageContainerNavigation />
+        </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/__snapshots__/signature-request.component.test.js.snap b/ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap
@@ -5,6 +5,72 @@ exports[`Signature Request Component render should match snapshot 1`] = `
   <div
     class="signature-request"
   >
+    <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
       class="request-signature__account"
     >

diff --git a/ui/components/app/signature-request/index.scss b/ui/components/app/signature-request/index.scss
@@ -8,17 +8,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 {