Merge pull request #24840 from MetaMask/Version-v11.16.1

Version v11.16.1

CHANGELOG.md

@@ -6,6 +6,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [11.16.1]
+
 ## [11.16.0]
 ### Added
 - Revamped the UI for Snap installation and update processes ([#23870](https://github.com/MetaMask/metamask-extension/pull/23870))
@@ -4748,7 +4750,8 @@ Update styles and spacing on the critical error page  ([#20350](https://github.c
 - Added the ability to restore accounts from seed words.
 
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v11.16.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v11.16.1...HEAD
+[11.16.1]: https://github.com/MetaMask/metamask-extension/compare/v11.16.0...v11.16.1
 [11.16.0]: https://github.com/MetaMask/metamask-extension/compare/v11.15.6...v11.16.0
 [11.15.6]: https://github.com/MetaMask/metamask-extension/compare/v11.15.5...v11.15.6
 [11.15.5]: https://github.com/MetaMask/metamask-extension/compare/v11.15.4...v11.15.5

app/scripts/lib/transaction/metrics.ts

@@ -76,12 +76,12 @@ export type TransactionMetricsRequest = {
   getEIP1559GasFeeEstimates(options?: FetchGasFeeEstimateOptions): Promise<any>;
   getParticipateInMetrics: () => boolean;
   getSelectedAddress: () => string;
-  getTokenStandardAndDetails: () => {
+  getTokenStandardAndDetails: () => Promise<{
     decimals?: string;
     balance?: string;
     symbol?: string;
     standard?: TokenStandard;
-  };
+  }>;
   getTransaction: (transactionId: string) => TransactionMeta;
   provider: Provider;
   snapAndHardwareMessenger: SnapAndHardwareMessenger;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "metamask-crx",
-  "version": "11.16.0",
+  "version": "11.16.1",
   "private": true,
   "repository": {
     "type": "git",

shared/modules/transaction.utils.ts

@@ -198,12 +198,12 @@ export async function determineTransactionType(
   return { type: TransactionType.simpleSend, getCodeResponse: contractCode };
 }
 
-type GetTokenStandardAndDetails = (to: string | undefined) => {
+type GetTokenStandardAndDetails = (to: string | undefined) => Promise<{
   decimals?: string;
   balance?: string;
   symbol?: string;
   standard?: TokenStandard;
-};
+}>;
 /**
  * Given a transaction meta object, determine the asset type that the
  * transaction is dealing with, as well as the standard for the token if it
@@ -254,7 +254,7 @@ export async function determineTransactionAssetType(
     try {
       // We don't need a balance check, so the second parameter to
       // getTokenStandardAndDetails is omitted.
-      const details = getTokenStandardAndDetails(txMeta.txParams.to);
+      const details = await getTokenStandardAndDetails(txMeta.txParams.to);
       if (details.standard) {
         return {
           assetType:

test/e2e/mmi/pageObjects/mmi-signup-page.ts

@@ -13,7 +13,7 @@ export class MMISignUpPage {
 
   readonly agreeBtn: Locator;
 
-  readonly noThanksBtn: Locator;
+  readonly enableBtn: Locator;
 
   readonly passwordTxt: Locator;
 
@@ -44,9 +44,7 @@ export class MMISignUpPage {
       'button:has-text("Confirm Secret Recovery Phrase")',
     );
     this.agreeBtn = page.locator('button:has-text("I agree")');
-    this.noThanksBtn = page.locator(
-      'button:has-text("Don\'t enable enhanced protection")',
-    );
+    this.enableBtn = page.locator('button:has-text("Enable")'); // It shows in the Smart Transactions Opt-In Modal.
     this.passwordTxt = page.getByTestId('create-password-new');
     this.passwordConfirmTxt = page.getByTestId('create-password-confirm');
     this.agreeCheck = page.getByTestId('create-new-vault__terms-checkbox');

test/e2e/mock-e2e.js

@@ -577,6 +577,17 @@ async function setupMocking(server, testSpecificMock, { chainId }) {
   await mockLensNameProvider(server);
   await mockTokenNameProvider(server, chainId);
 
+  // IPFS endpoint for NFT metadata
+  await server
+    .forGet(
+      'https://bafybeidxfmwycgzcp4v2togflpqh2gnibuexjy4m4qqwxp7nh3jx5zlh4y.ipfs.dweb.link/1.json',
+    )
+    .thenCallback(() => {
+      return {
+        statusCode: 200,
+      };
+    });
+
   /**
    * Returns an array of alphanumerically sorted hostnames that were requested
    * during the current test suite.

test/e2e/vault-decryption-chrome.spec.js

@@ -50,12 +50,13 @@ async function getExtensionStorageFilePath(driver) {
  */
 async function closePopoverIfPresent(driver) {
   const popoverButtonSelector = '[data-testid="popover-close"]';
-  const linkNoThanks = {
-    text: "Don't enable enhanced protection",
+  // It shows in the Smart Transactions Opt-In Modal.
+  const enableButtonSelector = {
+    text: 'Enable',
     tag: 'button',
   };
   await driver.clickElementSafe(popoverButtonSelector);
-  await driver.clickElementSafe(linkNoThanks);
+  await driver.clickElementSafe(enableButtonSelector);
 }
 
 /**

ui/components/app/smart-transactions/__snapshots__/smart-transactions-opt-in-modal.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SmartTransactionsOptInModal displays the correct text in the modal 1`] = `<div />`;

ui/components/app/smart-transactions/smart-transactions-opt-in-modal.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import thunk from 'redux-thunk';
+import configureMockStore from 'redux-mock-store';
+import { useHistory } from 'react-router-dom';
+
+import {
+  renderWithProvider,
+  createSwapsMockStore,
+} from '../../../../test/jest';
+import { setSmartTransactionsOptInStatus } from '../../../store/actions';
+import { ADVANCED_ROUTE } from '../../../helpers/constants/routes';
+import SmartTransactionsOptInModal from './smart-transactions-opt-in-modal';
+
+const middleware = [thunk];
+
+jest.mock('../../../store/actions');
+
+describe('SmartTransactionsOptInModal', () => {
+  it('displays the correct text in the modal', () => {
+    const store = configureMockStore(middleware)(createSwapsMockStore());
+    const { getByText, container } = renderWithProvider(
+      <SmartTransactionsOptInModal
+        isOpen={true}
+        hideWhatsNewPopup={jest.fn()}
+      />,
+      store,
+    );
+    expect(getByText('Enable')).toBeInTheDocument();
+    expect(getByText('Manage in settings')).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('calls setSmartTransactionsOptInStatus with false when the "Manage in settings" link is clicked and redirects to Advanced Settings', () => {
+    (setSmartTransactionsOptInStatus as jest.Mock).mockImplementationOnce(() =>
+      jest.fn(),
+    );
+    const historyPushMock = jest.fn();
+    (useHistory as jest.Mock).mockImplementationOnce(() => ({
+      push: historyPushMock,
+    }));
+    const store = configureMockStore(middleware)(createSwapsMockStore());
+    const { getByText } = renderWithProvider(
+      <SmartTransactionsOptInModal
+        isOpen={true}
+        hideWhatsNewPopup={jest.fn()}
+      />,
+      store,
+    );
+    const manageInSettingsLink = getByText('Manage in settings');
+    fireEvent.click(manageInSettingsLink);
+    expect(setSmartTransactionsOptInStatus).toHaveBeenCalledWith(false);
+    expect(historyPushMock).toHaveBeenCalledWith(
+      `${ADVANCED_ROUTE}#smart-transactions`,
+    );
+  });
+
+  it('calls setSmartTransactionsOptInStatus with true when the "Enable" button is clicked', () => {
+    (setSmartTransactionsOptInStatus as jest.Mock).mockImplementationOnce(() =>
+      jest.fn(),
+    );
+    const store = configureMockStore(middleware)(createSwapsMockStore());
+    const { getByText } = renderWithProvider(
+      <SmartTransactionsOptInModal
+        isOpen={true}
+        hideWhatsNewPopup={jest.fn()}
+      />,
+      store,
+    );
+    const enableButton = getByText('Enable');
+    fireEvent.click(enableButton);
+    expect(setSmartTransactionsOptInStatus).toHaveBeenCalledWith(true);
+  });
+});

ui/components/app/smart-transactions/smart-transactions-opt-in-modal.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -30,6 +31,7 @@ import {
 } from '../../component-library';
 import { setSmartTransactionsOptInStatus } from '../../../store/actions';
 import { SMART_TRANSACTIONS_LEARN_MORE_URL } from '../../../../shared/constants/smartTransactions';
+import { ADVANCED_ROUTE } from '../../../helpers/constants/routes';
 
 export type SmartTransactionsOptInModalProps = {
   isOpen: boolean;
@@ -73,10 +75,10 @@ const EnableSmartTransactionsButton = ({
   );
 };
 
-const NoThanksLink = ({
-  handleNoThanksLinkClick,
+const ManageInSettingsLink = ({
+  handleManageInSettingsLinkClick,
 }: {
-  handleNoThanksLinkClick: () => void;
+  handleManageInSettingsLinkClick: () => void;
 }) => {
   const t = useI18nContext();
   return (
@@ -85,11 +87,11 @@ const NoThanksLink = ({
       type="link"
       variant={ButtonVariant.Link}
       color={TextColor.textAlternative}
-      onClick={handleNoThanksLinkClick}
+      onClick={handleManageInSettingsLinkClick}
       width={BlockSize.Full}
       className="mm-smart-transactions-opt-in-modal__no-thanks-link"
     >
-      {t('dontEnableEnhancedProtection')}
+      {t('manageInSettings')}
     </Button>
   );
 };
@@ -164,13 +166,16 @@ export default function SmartTransactionsOptInModal({
 }: SmartTransactionsOptInModalProps) {
   const t = useI18nContext();
   const dispatch = useDispatch();
+  const history = useHistory();
 
   const handleEnableButtonClick = useCallback(() => {
     dispatch(setSmartTransactionsOptInStatus(true));
   }, [dispatch]);
 
-  const handleNoThanksLinkClick = useCallback(() => {
+  const handleManageInSettingsLinkClick = useCallback(() => {
+    // Set the Smart Transactions opt-in status to false, so the opt-in modal is not shown again.
     dispatch(setSmartTransactionsOptInStatus(false));
+    history.push(`${ADVANCED_ROUTE}#smart-transactions`);
   }, [dispatch]);
 
   useEffect(() => {
@@ -210,7 +215,9 @@ export default function SmartTransactionsOptInModal({
           <EnableSmartTransactionsButton
             handleEnableButtonClick={handleEnableButtonClick}
           />
-          <NoThanksLink handleNoThanksLinkClick={handleNoThanksLinkClick} />
+          <ManageInSettingsLink
+            handleManageInSettingsLinkClick={handleManageInSettingsLinkClick}
+          />
         </Box>
       </ModalContent>
     </Modal>

ui/pages/home/home.component.js

@@ -840,10 +840,8 @@ export default class Home extends PureComponent {
       !process.env.IN_TEST &&
       !newNetworkAddedConfigurationId;
 
-    // TODO(dbrans): temporary fix to disable the smart transactions opt-in modal
-    // in 11.15 to unblock the release. Change this line in 11.16.
     const showSmartTransactionsOptInModal =
-      false && canSeeModals && isSmartTransactionsOptInModalAvailable;
+      canSeeModals && isSmartTransactionsOptInModalAvailable;
 
     const showWhatsNew =
       canSeeModals &&

ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap

@@ -80,7 +80,7 @@ exports[`AdvancedTab Component should match snapshot 1`] = `
         >
           <span>
              
-            Turn on Smart Transactions for more reliable and secure transactions on ETH Mainnet. 
+            Turn on Smart Transactions for more reliable and secure transactions on Ethereum Mainnet. 
             <a
               class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               href="https://support.metamask.io/transactions-and-gas/transactions/smart-transactions/"