Merge branch 'develop' into fix/buttonbase-ts-update

CHANGELOG.md

@@ -6,6 +6,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [10.34.0]
+### Added
+- Add a security quiz to the SRP reveal ([#19283](https://github.com/MetaMask/metamask-extension/pull/19283))
+- [FLASK] Add Snaps keyring and new snap accounts related pages ([#19710](https://github.com/MetaMask/metamask-extension/pull/19710))
+
+
+### Changed
+- Decrease boldness of text in some labels ([#19731](https://github.com/MetaMask/metamask-extension/pull/19731))
+
+### Fixed
+- Fix design inconsistencies in the connect flow ([#19800](https://github.com/MetaMask/metamask-extension/pull/19800))
+- Fix connection issues on some dapps, and ensure that `eth_requestAccount` returns accounts when opening multiple tabs for the same dapp ([#19727](https://github.com/MetaMask/metamask-extension/pull/19727))
+- Fix UI bugs in contacts page ([#19646](https://github.com/MetaMask/metamask-extension/pull/19646))
+- Ensure correct logo shown on Linea ([#19717](https://github.com/MetaMask/metamask-extension/pull/19717))
+- Fix the autolock field in settings on firefox ([#19653](https://github.com/MetaMask/metamask-extension/pull/19653))
+- Prevent duplicate account names that only differ by letter casing ([#19616](https://github.com/MetaMask/metamask-extension/pull/19616))
+- Ensure token details stay within asset dropdown border ([#19626](https://github.com/MetaMask/metamask-extension/pull/19626))
+- Prevent rounded corners in account menu ([#19615](https://github.com/MetaMask/metamask-extension/pull/19615))
+- Ensure network changes before the user accepts a wallet_watchAsset request add the NFT to pre-change chain ID and address ([#19629](https://github.com/MetaMask/metamask-extension/pull/19629))
+- Fix performance degradations noticable on Firefox builds ([#19993](https://github.com/MetaMask/metamask-extension/pull/19993))
+- Fix copy to clipboard of public address, so that it is only cleared from the clipboard after 60 seconds ([#19948](https://github.com/MetaMask/metamask-extension/pull/19948))
+- Fix overlapping text, in some language, in home screen buttons ([#19920](https://github.com/MetaMask/metamask-extension/pull/19920))
+
+
 ## [10.33.1]
 ### Fixed
 - Fix to bug causing users to see an infinite spinner when signing typed messages. ([#19894](https://github.com/MetaMask/metamask-extension/pull/19894))
@@ -3829,7 +3853,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Uncategorized
 - Added the ability to restore accounts from seed words.
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.33.1...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.34.0...HEAD
+[10.34.0]: https://github.com/MetaMask/metamask-extension/compare/v10.33.1...v10.34.0
 [10.33.1]: https://github.com/MetaMask/metamask-extension/compare/v10.33.0...v10.33.1
 [10.33.0]: https://github.com/MetaMask/metamask-extension/compare/v10.32.0...v10.33.0
 [10.32.0]: https://github.com/MetaMask/metamask-extension/compare/v10.31.1...v10.32.0

app/scripts/controllers/incoming-transactions.js

@@ -135,15 +135,12 @@ export default class IncomingTransactionsController {
   }
 
   start() {
-    const { featureFlags = {} } = this.preferencesController.store.getState();
-    const { showIncomingTransactions } = featureFlags;
+    const chainId = this.getCurrentChainId();
 
-    if (!showIncomingTransactions) {
-      return;
+    if (this._allowedToMakeFetchIncomingTx(chainId)) {
+      this.blockTracker.removeListener('latest', this._onLatestBlock);
+      this.blockTracker.addListener('latest', this._onLatestBlock);
     }
-
-    this.blockTracker.removeListener('latest', this._onLatestBlock);
-    this.blockTracker.addListener('latest', this._onLatestBlock);
   }
 
   stop() {
@@ -161,13 +158,9 @@ export default class IncomingTransactionsController {
    * @param {number} [newBlockNumberDec] - block number to begin fetching from
    */
   async _update(address, newBlockNumberDec) {
-    const { completedOnboarding } = this.onboardingController.store.getState();
     const chainId = this.getCurrentChainId();
-    if (
-      !Object.hasOwnProperty.call(ETHERSCAN_SUPPORTED_NETWORKS, chainId) ||
-      !address ||
-      !completedOnboarding
-    ) {
+
+    if (!address || !this._allowedToMakeFetchIncomingTx(chainId)) {
       return;
     }
     try {
@@ -302,4 +295,26 @@ export default class IncomingTransactionsController {
       type: TransactionType.incoming,
     };
   }
+
+  /**
+   * @param chainId - {string} The chainId of the current network
+   * @returns {boolean} Whether or not the user has consented to show incoming transactions
+   */
+  _allowedToMakeFetchIncomingTx(chainId) {
+    const { featureFlags = {} } = this.preferencesController.store.getState();
+    const { completedOnboarding } = this.onboardingController.store.getState();
+
+    const hasIncomingTransactionsFeatureEnabled = Boolean(
+      featureFlags.showIncomingTransactions,
+    );
+
+    const isEtherscanSupportedNetwork = Boolean(
+      ETHERSCAN_SUPPORTED_NETWORKS[chainId],
+    );
+    return (
+      completedOnboarding &&
+      isEtherscanSupportedNetwork &&
+      hasIncomingTransactionsFeatureEnabled
+    );
+  }
 }

app/scripts/controllers/incoming-transactions.test.js

@@ -78,11 +78,11 @@ function getMockPreferencesController({
   };
 }
 
-function getMockOnboardingController() {
+function getMockOnboardingController({ completedOnboarding = true } = {}) {
   return {
     store: {
       getState: sinon.stub().returns({
-        completedOnboarding: true,
+        completedOnboarding,
       }),
       subscribe: sinon.spy(),
     },
@@ -98,6 +98,16 @@ function getMockBlockTracker() {
   };
 }
 
+function getDefaultControllerOpts() {
+  return {
+    blockTracker: getMockBlockTracker(),
+    ...getMockNetworkControllerMethods(CHAIN_IDS.GOERLI),
+    preferencesController: getMockPreferencesController(),
+    onboardingController: getMockOnboardingController(),
+    initState: getEmptyInitState(),
+  };
+}
+
 /**
  * @typedef {import(
  *  '../../../../app/scripts/controllers/incoming-transactions'
@@ -226,6 +236,7 @@ describe('IncomingTransactionsController', function () {
           preferencesController: getMockPreferencesController(),
           onboardingController: getMockOnboardingController(),
           initState: {},
+          getCurrentChainId: () => CHAIN_IDS.GOERLI,
         },
       );
 
@@ -831,6 +842,97 @@ describe('IncomingTransactionsController', function () {
     });
   });
 
+  describe('block explorer lookup', function () {
+    let sandbox;
+
+    beforeEach(function () {
+      sandbox = sinon.createSandbox();
+    });
+
+    afterEach(function () {
+      sandbox.restore();
+    });
+
+    function stubFetch() {
+      return sandbox.stub(window, 'fetch');
+    }
+
+    function assertStubNotCalled(stub) {
+      assert(stub.callCount === 0);
+    }
+
+    async function triggerUpdate(incomingTransactionsController) {
+      const subscription =
+        incomingTransactionsController.preferencesController.store.subscribe.getCall(
+          1,
+        ).args[0];
+
+      // Sets address causing a call to _update
+      await subscription({ selectedAddress: MOCK_SELECTED_ADDRESS });
+    }
+
+    it('should not happen when incoming transactions feature is disabled', async function () {
+      const incomingTransactionsController = new IncomingTransactionsController(
+        {
+          ...getDefaultControllerOpts(),
+          preferencesController: getMockPreferencesController({
+            showIncomingTransactions: false,
+          }),
+        },
+      );
+      const fetchStub = stubFetch();
+      await triggerUpdate(incomingTransactionsController);
+      assertStubNotCalled(fetchStub);
+    });
+
+    it('should not happen when onboarding is in progress', async function () {
+      const incomingTransactionsController = new IncomingTransactionsController(
+        {
+          ...getDefaultControllerOpts(),
+          onboardingController: getMockOnboardingController({
+            completedOnboarding: false,
+          }),
+        },
+      );
+
+      const fetchStub = stubFetch();
+      await triggerUpdate(incomingTransactionsController);
+      assertStubNotCalled(fetchStub);
+    });
+
+    it('should not happen when chain id is not supported', async function () {
+      const incomingTransactionsController = new IncomingTransactionsController(
+        {
+          ...getDefaultControllerOpts(),
+          getCurrentChainId: () => FAKE_CHAIN_ID,
+        },
+      );
+
+      const fetchStub = stubFetch();
+      await triggerUpdate(incomingTransactionsController);
+      assertStubNotCalled(fetchStub);
+    });
+
+    it('should make api call when chain id, incoming features, and onboarding status are ok', async function () {
+      const incomingTransactionsController = new IncomingTransactionsController(
+        {
+          ...getDefaultControllerOpts(),
+          getCurrentChainId: () => CHAIN_IDS.GOERLI,
+          onboardingController: getMockOnboardingController({
+            completedOnboarding: true,
+          }),
+          preferencesController: getMockPreferencesController({
+            showIncomingTransactions: true,
+          }),
+        },
+      );
+
+      const fetchStub = stubFetch();
+      await triggerUpdate(incomingTransactionsController);
+      assert(fetchStub.callCount === 1);
+    });
+  });
+
   describe('_update', function () {
     describe('when state is empty (initialized)', function () {
       it('should use provided block number and update the latest block seen', async function () {

package.json

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

shared/constants/metametrics.ts

@@ -583,10 +583,19 @@ export enum MetaMetricsEventName {
   WalletSetupFailed = 'Wallet Setup Failed',
   WalletCreated = 'Wallet Created',
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
-  UserClickedDeepLink = 'User Clicked Deeplink',
-  UserClickedConnectCustodialAccount = 'Clicked Connect Custodial Account',
-  UserClickedPortfolioButton = 'Clicked Portfolio Button',
-  UserClickedCompliance = 'Clicked Compliance',
+  DeeplinkClicked = 'Deeplink Clicked',
+  ConnectCustodialAccountClicked = 'Connect Custodial Account Clicked',
+  MMIPortfolioButtonClicked = 'MMI Portfolio Button Clicked',
+  StakeButtonClicked = 'Stake Button Clicked',
+  ComplianceButtonClicked = 'Compliance Button Clicked',
+  RefreshTokenListClicked = 'Refresh Token List Clicked',
+  SignatureDeeplinkDisplayed = 'Signature Deeplink Displayed',
+  InstitutionalFeatureConnected = 'Institutional Feature Connected',
+  CustodianSelected = 'Custodian Selected',
+  CustodianConnected = 'Custodian Connected',
+  CustodianConnectionCanceled = 'Custodian Connection Canceled',
+  CustodianConnectionFailed = 'Custodian Connection Failed',
+  CustodialAccountsConnected = 'Custodial Accounts Connected',
   ///: END:ONLY_INCLUDE_IN
   AccountDetailMenuOpened = 'Account Details Menu Opened',
   BlockExplorerLinkClicked = 'Block Explorer Clicked',

ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js

@@ -4,8 +4,8 @@ import Box from '../../ui/box';
 import Tooltip from '../../ui/tooltip';
 import {
   TextColor,
-  DISPLAY,
   TextVariant,
+  Display,
 } from '../../../helpers/constants/design-system';
 
 import { Icon, IconName, IconSize } from '../../component-library';
@@ -15,7 +15,7 @@ export const CustomSpendingCapTooltip = ({
   tooltipContentText,
   tooltipIcon,
 }) => (
-  <Box display={DISPLAY.INLINE_BLOCK}>
+  <Box display={Display.InlineBlock}>
     <Tooltip
       interactive
       position="top"

ui/components/app/custom-spending-cap/custom-spending-cap.js

@@ -12,15 +12,15 @@ import { ButtonLink, Icon, IconName } from '../../component-library';
 import { Text } from '../../component-library/text/deprecated';
 import {
   AlignItems,
-  DISPLAY,
-  FLEX_DIRECTION,
   TextAlign,
   TextVariant,
   JustifyContent,
   Size,
   BLOCK_SIZES,
   BackgroundColor,
   TextColor,
+  Display,
+  FlexDirection,
 } from '../../../helpers/constants/design-system';
 import { setCustomTokenAmount } from '../../../ducks/app/app';
 import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils';
@@ -213,15 +213,15 @@ export default function CustomSpendingCap({
         paddingTop={2}
         paddingRight={6}
         paddingLeft={6}
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         alignItems={AlignItems.flexStart}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        flexDirection={FlexDirection.Column}
         backgroundColor={BackgroundColor.backgroundAlternative}
         gap={2}
       >
         <Box
           justifyContent={JustifyContent.center}
-          display={DISPLAY.BLOCK}
+          display={Display.Block}
           className="custom-spending-cap__input"
         >
           <label

ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap

@@ -50,7 +50,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
           data-testid="nft-item"
         >
           <div
-            class="mm-box mm-badge-wrapper nft-item__badge-wrapper"
+            class="mm-box mm-badge-wrapper nft-item__badge-wrapper mm-box--display-block"
           >
             <img
               alt="MUNK #1 1"

ui/components/app/signature-request/signature-request.component.js

@@ -11,7 +11,12 @@ import {
   shortenAddress,
   ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/utils/util';
-import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
+import {
+  MetaMetricsEventCategory,
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  MetaMetricsEventName,
+  ///: END:ONLY_INCLUDE_IN
+} from '../../../../shared/constants/metametrics';
 import SiteOrigin from '../../ui/site-origin';
 import Button from '../../ui/button';
 import ContractDetailsModal from '../modals/contract-details-modal/contract-details-modal';
@@ -121,8 +126,8 @@ export default class SignatureRequest extends PureComponent {
         onDeepLinkFetched: () => undefined,
         onDeepLinkShown: () => {
           this.context.trackEvent({
-            category: 'MMI',
-            event: 'Show deeplink for signature',
+            category: MetaMetricsEventCategory.MMI,
+            event: MetaMetricsEventName.SignatureDeeplinkDisplayed,
           });
         },
       });

ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap

@@ -51,19 +51,19 @@ exports[`Token Cell should match snapshot 1`] = `
                 title=""
               >
                 <p
-                  class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
                 >
                   TEST
                 </p>
               </div>
             </div>
           </div>
           <p
-            class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--width-2/3 box--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
           />
         </div>
         <p
-          class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
           data-testid="multichain-token-list-item-value"
         >
           5.000